/* ********************************** */
/* ************  POR QUE  *********** */
/* ********************************** */
#porque { position: relative; z-index: 15; width: 100%; margin-bottom: 200px; height: 400px; background-image: url(../../img/home/porque.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; }
#porque .txt { width: 100%; font-size: 36px; font-weight: 900; color: #FFF; }
#porque #banners { position: absolute; z-index: 18; top: 0px; margin-top: 280px; width: 100%; height: auto; }
#porque #banners .banner { float: left; background: #FFF; width: 330px; height: 245px; margin-right: 20px; margin-bottom: 20px; padding: 20px; cursor: pointer; transition-duration: 1s; }
#porque #banners .banner .txt { width: 100%; height: 180px; color: #2a0d61; font-size: 22px; text-align: left; }
#porque #banners .banner img { margin-bottom: 10px; }
#porque #banners .banner .masinfo { font-size: 12px; text-transform: uppercase; text-align: center; float: right; background: #2a0d61; color: #FFF; padding: 6px 10px; transition-duration: 1.5s; }
#porque #banners .banner:hover { background: #fff; }

#porque #banners .banner:hover .masinfo { background: #FFF; color: #2a0d61; }
/*
#porque #banners .porque1:hover { cursor: url(../../img/home/banner-barco.png) 20 20,auto!important; }
#porque #banners .porque2:hover { cursor: url(../../img/home/banner-reloj.png) 20 20,auto!important; }
#porque #banners .porque3:hover { cursor: url(../../img/home/banner-trasmapi.png) 20 20,auto!important; }
*/


@media screen and (max-width: 1500px) {
	
	#banners { margin-top: 220px; }
	#porque #banners .banner { width: 23%; }
	#porque #banners .banner .txt { font-size: 20px; }
	
}

@media screen and (max-width: 1200px) {
	
	#porque #banners .banner { width: 48%; padding: 18px; height: 210px; margin-right: 1%; }
	#porque #banners .banner .txt { height: 150px;}
}

@media screen and (max-width: 1000px) {
	
	#porque #banners .banner .masinfo { display: none; }

}

@media screen and (max-width: 810px) {

	#porque #banners .banner .txt { font-size: 18px; }
}

@media screen and (max-width: 700px) {
	
	#porque #banners { left: 0; }
	#porque #banners .banner { position: relative; width: 100%; height: 80px; margin-right: 0px; padding: 6px; overflow: hidden; }
	#porque #banners .banner .txt { width: 100%; height: auto; font-size: 16px; }
	#porque #banners .banner .masinfo { display: none; }
	#porque #banners .banner img { margin-right: 10px; }
	#porque .br { display: none; }
	#porque #banners .banner:hover { background: #efefef; }
	
	#porque #banners .porque4 { height: 300px; }

	
}


@media screen and (max-width: 500px) {
	
	#porque #banners { margin-top: 320px; left: 0; }
	#porque #banners .banner .txt { font-size: 12px; }
	
	#porque #banners .porque4 { height: 200px; }
	
}

