/* ==================== | 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; 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% 0px 0px 0%; 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; }

 #sliderhome { float:left; width:35%; padding:0% 0% 1%; margin:-1% 2% 0% 10%; font-size:22px; text-align:center; color:#525252; border-radius: 5px }
 #registro { float:left; width:35%; padding:1%; margin:-3% 6% 0% 6%; font-size:22px; text-align:center; color:#525252; border: 2px solid #CE4BA5; border-radius: 5px }

 #next { margin:0%; width:40%; text-align: center; float: left; padding: 0% 9% 3% 1% }
 #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 }
 #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 } 

 #logos { float:left; width:80%; padding:0% 1%; margin:0% 0% 0% 18%; display: flex; align-items: center }
 #logos .logo1 { margin: auto 6% }
 #logos .logo2 { margin: auto 6% }
	 
@media only screen and (max-width: 1024px) {

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

 	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% }
 	#next { float: left; margin:2% 28% 10%; width:44%; text-align: center }
 	#logos { display: block; margin: 0% 10% }	
 	#logos .logo1 { margin: auto 6%; width: 88% }
 	#logos .logo1 img { width: 100% }
 	#logos .logo2 { margin: auto 6%; width: 88% }
 	#logos .logo2 img { width: 100% }
 
/* ==================== | Footer | ==================== */ 

}
}