/* ==================== | Estilos Basicos | ==================== */ 
 body { font-family: 'Roboto', sans-serif; width:100%; color:#525252; margin:auto; font-size:15px; background: url(../img/bgWifi.jpg) top left no-repeat; background-size: 100% }

::-webkit-scrollbar {
  width: 4px; height: 4px;
}
::-webkit-scrollbar-button {
  width: 4px; height: 4px;
}
::-webkit-scrollbar-thumb {
  background: #e1e1e1; border: 0px none #117756; border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}
::-webkit-scrollbar-track {
  background: #666666; border: 0px none #117756; border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #117756;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

 a { color:#525252; text-decoration:underline; }
 #wrapper { width: 100%; margin:40px auto 30px; float: left }
 #main_container { width: 100%; margin:0% auto; float:left }
 .clear{ clear:both; }

/* ==================== | Contenido | ==================== */ 

 #container_box { float:left; width:100% }
 #container { width:90%; margin:0% 5%; float: left }
 #migas { float: left; width:98%; padding:5px 1%; border-bottom:1px dotted #4c7cc4; font-size:12px; text-align:right }
 #migas a { color:#0077c0; text-decoration:none; font-weight:bold }

 #slogan { float:left; width:40%; padding:0% 9% 0% 1%; margin:7% 0% 3%; font-size:22px; text-align:center; color:#525252; font-weight:bold }
 #slogan h1 { color:#7D7D7D; font-size: 36px; font-weight: bold }
 #slogan h2 { color:#000000; font-size: 32px; font-weight: bold }
 #slogan h3 { color:#525252; font-size: 24px; font-weight: normal }
 #slogan p { margin-bottom: 40px; font-size: 20px; color:#117756 }
 #slogan span { margin-bottom: 40px; font-size: 14px; color:#117756 }
 #home { float:left; width:100%; margin:0% }
 #icons { clear:left; width:300px; margin:0% auto; height:52px }
 .logoSmartCity { float:left; width: 100%; height: 120px; background: url(../img/logoAlcaldia.jpg) center no-repeat; margin: 2% 0.5%; background-size: 17em, 17em, auto, cover; }

 #logos { float:left; width:70%; padding:0% 1%; margin:2.5% 0% 2.5% 28%; display: flex; align-items: center }
 #logos .logo1 { margin: auto 6% }
 #logos .logo2 { margin: auto 6% }

 #registro { float:left; width:86%; padding:2% 1%; margin:3% 6% 0% 6%; font-size:22px; text-align:center; color:#525252 }
 #registro h2 { color:#467753; font-size: 28px; font-weight: normal }
 #registro select { border: 1px solid #467753; width: 90%; margin: 1% 2%; padding: 1% 3%; border-radius: 5px; color: #467753 }
 #registro .inputVerde{ border: 1px solid #467753; width: 90%; margin: 1% 2%; padding: 1% 3%; border-radius: 5px; color: #467753 }
 #registro .inputVerde::placeholder { color: #467753 }
 #noticia { float:left; width:35%; padding:4% 2%; margin:2% 1% 1% 9%; text-align:justify; color:#525252; border: 2px solid #467753; border-radius: 5px; font-size: 14px; height: 450px; overflow-y: scroll }
 #noticia h2 { color:#467753; font-size: 18px; font-weight: normal; text-align: left !important; margin:0% 2% 2% }
 #noticia h3 { color:#467753; font-size: 16px; font-weight: normal; text-align: left !important }
 #noticia img, #noticia p { width: 96%; margin: 1% 2% }
 #contacto h2 { color:#467753; font-size: 18px; font-weight: normal }
 #contacto h3 { color:#CE4BA5; font-size: 16px; font-weight: normal }
 #contacto .campo { border: 1px solid #467753; width: 90%; margin: 1% 2%; padding: 2% 3%; border-radius: 5px; color: #467753 }

 #next { margin:0%; width:40%; text-align: center; float: left; padding: 0% 9% 3% 1% }
 #navegar { margin:0%; width:40%; text-align: center; float: left; padding: 4% 30% }
 #btnNext { background:url("../img/btnNext.png") no-repeat; text-indent: -3000px; border: none; height: 84px; width: 73px }
 #btnNext:hover { background:url("../img/btnNextOver.png?v=2") no-repeat } 
 #terminos { font-size: 14px; color:#525252; margin: 2% auto; }
 #terminos a { color:#467753 }
 #btnRegister { background:#467753; border:1px solid #467753; border-radius: 25px; padding: 2% 8%; color:#fff }
 #btnRegister:hover { background:#fff; border:1px solid #467753; border-radius: 25px; padding:2% 8%; color:#467753 }
 #btnNavegate { background:url("../img/btnNext.png") no-repeat; text-indent: -3000px; border: none; height: 84px; width: 73px }
 #btnNavegate:hover { background:url("../img/btnNextOver.png?v=2") no-repeat } 
 #btnEnviar { float:left; background:#467753; border:1px solid #467753; border-radius: 25px; padding: 2% 8%; color:#fff; margin:2% 20%; width: 60% }
 #btnEnviar:hover { background:#fff; border:1px solid #467753; border-radius: 25px; padding: 2% 8%; color:#467753; margin:2% 20%; width: 60% }

 #banners { float:left; width:86%; padding:0% 3%; margin:2% 4% 0%; height: auto; display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr) }
 #banners .item { width: 96%; padding: 1%; margin:1%; float: left }
 #banners .item img { width: 100% }
 
@media only screen and (max-width: 1024px) {

 	body { background: url(../img/bgWifiTop.jpg) top left no-repeat; background-size: 100% }	
 	#container_box { background: url(../img/bgWifiDown.jpg) bottom left no-repeat; background-size: 100%; padding-bottom: 80px }	
 	.logoSmartCity { background-size: 14em, 14em, auto, cover }
 	#wrapper { margin: 80px auto 0px }
 	#sliderhome { width: 90%; margin: 2% 5% }
	#slogan { width: 90%; margin: 2% 5%; padding: 2% 0% }
	#navegar { padding: 8% 30% }
 	#next { float: left; margin:2% 28% 10%; width:44%; text-align: center }
 	#noticia { display: block; margin: 5% 5% 0%; width: 90%; padding: 0% }	
	#logos { display: block; margin: 5% 15% 0%; width: 70%; padding: 0% }	
 	#logos .logo1 { margin: auto 6%; width: 88% }
 	#logos .logo1 img { width: 100% }
 	#logos .logo2 { margin: auto 6%; width: 88% }
 	#logos .logo2 img { width: 100% }
	#banners { float:left; width:92%; padding:2%; margin:2%; height: auto; display: grid; grid-gap: 10px; grid-template-columns: repeat(2, 1fr) }
 	#banners .item { width: 96%; padding: 1%; margin:1%; float: left }
}