/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600i,700i,800i&display=swap');
@font-face { font-family: KelloggsSansBold; font-style: normal; font-weight: 900; src: url("../fonts/KelloggsSans-Bold.otf") format("opentype")}
@font-face { font-family: KelloggsSansMedium; font-style: normal; font-weight: 600; src: url("../fonts/KelloggsSans-Medium.ttf") format("opentype")}
@font-face { font-family: ClarendonBT; font-style: normal; font-weight: 900; src: url("../fonts/ClarendonBT-Bold.ttf") format("opentype")}

html { height: 100%;}
body { display: flex; flex-direction: column; height: 100vh; margin:0px; padding:0px; background-color:#FFF; color:#000; background-image:url(../img/fnd_toy.png); background-position: right top; background-repeat: no-repeat; background-size: inherit}
@media screen and (min-width: 1400px)  {
	 body {background-size: cover}
}
@media screen and (min-height: 768px) and (min-width: 1025px) {
	 body {background-size: cover}
}

@media screen and (min-width: 576px) and  (max-width: 1024px)  {
	body { background-image: url(../img/fnd_toy_tablet.png);background-position: top right}
}
@media screen and (min-width: 576px) and  (max-width: 1024px) and (min-height:1800px) {
	body { background-size: cover}
}
@media screen and  (max-width: 575px)  {
	body { background-image: url(../img/fnd_toy_smart.png);background-position: top center; background-size:cover}
}


.content { flex: 1 0 auto; padding: 0px 0px 20px 0px; margin:0px;  background-repeat:no-repeat; background-position: top center;}

.containerKellogs {background-image: url(../img/fnd_azul.png); background-repeat:no-repeat; background-position: top left; margin:0px 0px -50px 0px; text-align:  center; width: 650px; background-size: cover; display: inline-block; height: 107%;}
.logo {padding:15px 70px 10px 70px}
.divindex {width: 430px; margin-left:90px}
.txtIndex {  font-family: ClarendonBT; font-size: 27px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.3; letter-spacing: normal; text-align: center; color: #ffffff; margin: 10px 0px}
.txtsubIndex {font-family: KelloggsSansMedium; font-size: 16px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: 0.48px; text-align: center; color: #ffffff; max-width: 330px; margin: 10px auto 5px auto}
#txtcod { border-radius: 2px; background-color: #98ddf5; text-align: center;font-family: KelloggsSansMedium; font-size: 25px; color:#FFF; border:0px; padding:8px 10px}
.btnEnviar {font-family:KelloggsSansMedium;  font-size: 20px; font-weight: 500; font-style: normal; font-stretch: normal; line-height: normal;  letter-spacing: normal; text-align: center; color: #ffffff; width:220px; padding: 8px 13px; background-color: #163863; margin: 15px auto 10px auto}
.imgpegat {    margin: 5px 0px;  padding-bottom: 10px; text-align: center}
.imgpegat_tablet {display:none}
.imgpegat_smart {display:none}
#imgcoc { display: inline}
#imgcoc img { vertical-align:bottom}
@media screen and (min-width: 576px) and (max-width: 1024px)  {
	.containerKellogs {   width: 100%; max-width: 100%; text-align: center; height: inherit; padding: 10px 0px 50px;  margin:0px auto 700px auto; background-image: none}
	.divindex {    margin: 0px auto;}
	.imgpegat {display:none}
	.imgpegat_tablet{display:inherit;}
	#imgcoc { display: none}
}

@media screen and (max-width: 575px) {
	.content {padding-bottom:400px}
	.logo {padding: 10px 0px}
	.containerKellogs {width: 100%; background-image: none}
	.imgpegat {display:none}
	.imgpegat_smart{display:inherit;}
	.divindex { margin: 0px auto; width:100%}
	#imgcoc { display: none}
}


#footer {-webkit-flex-shrink: 1; flex-shrink: 1; background-color:transparent; text-align:center; margin:0px; padding:30px 0px 5px 0px; color:#FFF; background-image: url(../img/foot_fnd.png); background-position: top center; background-repeat: no-repeat }
#footer ul {  margin:0px; padding:7px 0px 0px 0px;  border:0px;}
#footer ul li { display:inline; list-style-type:none; list-style:none; text-align: center; margin:0px 7px; padding:0px 0px; }
#footer ul li a { font-family:KelloggsSansMedium !important; font-size: 11px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; text-align: center; color: #ffffff; }
#footer .copy { font-family:KelloggsSansMedium; font-size: 9px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; text-align: center; color: #ffffff; margin: 0px auto 5px auto; padding: 0px }
@media screen and (max-width: 575px) {
	 #footer ul {padding-top:20px}
}
@media screen and (min-width: 1400px)  {
	#footer {background-size: cover; padding: 45px 0px 20px 0px;}
}

@media screen and (min-width: 576px) and (max-width: 1024px)  { 
	#footer {background-image: url(../img/foot_fnd_tablet.png); background-position: top center; background-repeat: no-repeat; background-size:100% 100%}
	#footer ul {padding: 17px 0px 10px 0px; margin-top:10px;}
	#footer ul li { display:block; line-height: 1.6 }
	#footer ul li a {font-size:18px}
	/*#footer .copy {display: none}*/
}
@media screen and (max-width: 575px)  { 
	#footer { background-image: url(../img/foot_fnd_smart.png); background-position: top center; background-repeat: no-repeat; background-size:100% 100% }
	#footer ul {padding: 24px 0px 10px 0px;}
	#footer ul li { display:block; line-height: 1.6 }
	#footer ul li a {font-size:18px}
	/*#footer .copy {display: none}*/
}