.container .hero{background-color: #000;height: 700px;background-position: center;background-repeat: no-repeat;background-size: 70vh;background-image: url(../img/portada/bg-moviles.jpg)}
.container .hero .desk{display:none}
/*.container .hero .movil{position:relative;height:700px;background-image:url(../img/portada/bg-moviles.jpg);background-position:center;background-repeat:no-repeat;background-size:cover}*/
.container .hero .movil{background-position:center;background-repeat:no-repeat;background-size:cover}
.container .hero .movil select{position:absolute;bottom:30px;width:80%;margin:0px auto;left:10%;padding:15px;border:1px solid #fff;border-radius:5px}
.container .videos{background-color:#181818;color:#eee;padding:20px;background-image:url(../img/layout/pattern.jpg)}
.container .videos .wrap{overflow:auto}
.container .videos .wrap .iframe{width:100%;transition:border .3s;height:50vw;margin-bottom:20px;background-size:cover;background-position:center;background-repeat:no-repeat}
.container .videos .wrap .iframe:hover{cursor:pointer;border:1px solid #fff}
.container .eventos{background-color:#010810}
.container .eventos .wrap{padding:40px 20px 60px 20px}
.container .eventos .wrap .clock{padding-top:5px;overflow:auto;position:absolute;left:0px;width:100%;background-color:#fff}
.container .eventos .wrap .clock .aa{text-align:center;font-style:italic;float:left;width:25%;font-weight:bolder;font-size:12px;line-height:500%}
.container .eventos .wrap .clock .bb{float:right;width:75%;overflow:auto}
.container .eventos .wrap .clock .bb div{float:left;margin-right:5px}
.container .eventos .wrap .clock .bb div span{display:block;text-align:center}
.container .eventos .wrap .clock .bb div span:first-of-type{font-size:30px;font-weight:bold;font-family:'Rowdies', cursive;background:-webkit-linear-gradient(#6aacf1, #031b34);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.container .eventos .wrap .clock .bb div span:last-of-type{font-size:12px}
.container .eventos .wrap .clock .bb .sep{font-size:30px;font-weight:bold;color:#666}
.container .eventos .wrap .clock .bb div:last-of-type{width:50px}
/*
.container .eventos .wrap .roll{padding-top:80px}
.container .eventos .wrap .roll .box{margin-bottom:20px;background-color:#fff}
.container .eventos .wrap .roll .box.logo{height:60vw;position:relative;text-align:center;background-image:url(../img/layout/bg-eventos.jpg);background-position:center;background-size:cover;background-repeat:no-repeat}
.container .eventos .wrap .roll .box.logo div{position:absolute;bottom:10%;width:100%}
.container .eventos .wrap .roll .box.logo div a{color:#fff;font-size:20px}
.container .eventos .wrap .roll .slider{height:100vw;overflow:auto}
.container .eventos .wrap .roll .box .top{padding:5px;overflow:auto;color:#fff;font-weight:bolder;background:rgb(1,11,22);background:linear-gradient(90deg, rgba(1,11,22,1) 0%, rgba(9,78,153,1) 49%, rgba(155,208,239,1) 100%)}
.container .eventos .wrap .roll .box .top .dia{line-height:100%;font-family:'Rowdies', cursive;float:left;margin-right:5px;font-size:40px;font-weight:bolder}
.container .eventos .wrap .roll .box .top .fecha{float:left;font-weight:lighter}
.container .eventos .wrap .roll .box .top .fecha span{font-family:'Rowdies', cursive;display:block}
.container .eventos .wrap .roll .box .bot{padding:20px;text-align:center}
.container .eventos .wrap .roll .box .bot .hora{font-size:36px;font-weight:bold;font-family:'Rowdies', cursive;background:-webkit-linear-gradient(#6aacf1, #031b34);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.container .eventos .wrap .roll .box .bot .img{font-weight:bold;font-size:20px}
.container .eventos .wrap .roll .box .bot .img span{font-weight:lighter}
.container .eventos .wrap .roll .box .bot .lugar{color:#05ACD0}
*/
.cta{position: absolute;z-index: 2;width:90vw;top:140px;left:5vw}
.cta.fut{top:380px}
.cnc{ border:2px dotted white; border-radius: 4px; padding:20px;background: rgba(0,0,0,.2); text-align: center;}
.cnc:first-of-type{margin-bottom:10px}
.cnc .con{padding:15px; background: rgba(256,256,256,.5); border-radius: 6px; box-shadow: 0px 0px 6px #333; border:1px solid white;}
.cnc .top{padding: 10px; border-radius: 4px;background-color: #333; color: white; font-weight: bold; font-size: 18px; margin-bottom: 10px}
.cnc .top span{color: yellow;}
.cnc .bot a{display: inline-block; padding: 10px 20px; background-color:orange; color: white; text-shadow:1px 1px 3px #000; font-weight: bold; border-radius: 4px; border:1px solid white;}
.cnc .bot a:hover{background-color: #DA900E}

@media screen and (min-width:768px){
	.container .hero .movil{display:none}
	.container .hero{height:60vh}
	.container .hero .desk{display:block;overflow:auto;position:relative;height:60vh}
	.container .hero .desk .izq{position:absolute;width:20%;top:180px;left:0%;z-index:1}
	.container .hero .desk .izq div{transition:background .4s;padding:15px;background-color:rgba(8, 59, 153, .7);color:#eee;text-shadow:1px 1px 2px #000}
	.container .hero .desk .izq div:hover,
	.container .hero .desk .izq div.active{cursor:pointer;background:rgb(7,83,161);background:linear-gradient(90deg, rgba(7,83,161,1) 0%, rgba(0,0,0,0) 100%)}
	.container .hero .desk .izq div i{visibility:hidden;float:right;font-size:30px;margin-top:-6px}
	.container .hero .desk .izq div.active i{visibility:visible}
	.container .hero .desk .der{height:60vh;display:none;background-position:center bottom;background-size:cover;background-repeat:no-repeat;background-image:url(../img/layout/preloader.gif)}
	.container .hero .desk .der .submenu{float:left;left:22%;position:absolute;top:180px;overflow:auto;width:80%}
	.container .hero .desk .der .submenu .box{float:left;margin-right:10px;width:22%;transition:background .3s;background-color:rgba(256,256,256,.6);color:#15508c;padding:15px;font-weight:bold;font-size:22px}
	.container .hero .desk .der .submenu .box:hover{background-color:rgba(256,256,256,.95)}
	.container .hero .desk .der .submenu .box div{text-shadow:1px 1px 1px #fff;padding-bottom:5px;border-bottom:1px solid #15508c;margin-bottom:10px}
	.container .hero .desk .der .submenu .box a{text-shadow:1px 1px 1px #fff;color:#15508c;display:block;font-weight:normal;font-size:16px;margin-bottom:5px}
	.container .hero .desk .der .submenu .box a:hover{color:#333}
	.container .videos{padding:30px}
	.container .videos .wrap .iframe{margin-bottom:30px;width:46%;float:left;height:180px;border-radius:10px;box-shadow:0px 0px 4px #000;margin-right:2%}
	.container .videos .wrap .iframe:nth-child(1){float:left;width:100%;height:380px}
	.container .videos .wrap .iframe:nth-child(2){margin-right:4%}
	.container .videos .wrap .iframe:nth-child(4){margin-right:4%}
	.container .eventos{background-image:url(../img/layout/polideportivo.jpg);overflow:auto;background-size:cover;background-position:center}
	.container .eventos .wrap{width:96%;margin:0px auto;padding-bottom:40px;padding-top:40px}
	.container .eventos .wrap .clock{padding:0px;position:relative;width:50%;float:right;top:-60px;background:none} 
	.container .eventos .wrap .clock .aa{color:#fff;text-shadow:1px 1px 2px #000}
	.container .eventos .wrap .clock .bb div span:last-of-type{color:#fff;text-shadow:1px 1px 2px #000}
	.container .eventos .wrap .clock .bb div span:first-of-type{-webkit-text-stroke-width:1px;-webkit-text-stroke-color:#eee}
	.container .eventos .wrap .clock .bb .sep{color:#ccc}
	/*
	.container .eventos .wrap .roll{padding-top:0px;overflow:auto;width:100%}
	.container .eventos .wrap .roll .box{height:260px}
	.container .eventos .wrap .roll .box.logo{height:260px;float:left;width:30%;margin-right:2%} 
	.container .eventos .wrap .roll .slider{float:left;height:260px;width:68%;overflow:hidden}
	.container .eventos .wrap .roll .slider .box{width:48%;float:left;margin-right:2%}
	*/
	.cta{width:45vw;left:50vw}
	.cta.fut img{width:50%}
}
@media screen and (min-width:1024px){	
	.container .hero{height:100vh}
	.container .hero .desk{height:100vh}
	.container .hero .desk .der{height:100vh} 
	.container .hero .desk .der .submenu{width:70%}	
	.container .eventos .wrap .clock{width:32%}
	.container .videos{padding:80px 50px}
	.container .videos .wrap .iframe{float:right;width:22%;margin-right:0%;height:180px;margin-bottom:20px}
	.container .videos .wrap .iframe:nth-child(1){width:50%;margin-right:4%}
	.container .videos .wrap .iframe:nth-child(2){margin-right:0px;margin-left:2%}
	.container .videos .wrap .iframe:nth-child(4){margin-right:0px;margin-left:2%}	

	.cta {
        width: 35vw;
        left: 59vw;
    }

}
@media screen and (min-width:1366px){	
	.cta.fut {
	    top: 480px;
	}
}
@media screen and (min-width:1600px){
	.container .hero .desk .izq{top:250px}
	.container .hero .desk .izq div{font-size:22px}
	.container .hero .desk .izq div i{margin-top:2px}
	.container .hero .desk .der .submenu{top:250px}
	.container .hero .desk .der .submenu .box div{font-size:24px;padding-bottom:10px;margin-bottom:20px}
	.container .hero .desk .der .submenu .box a{margin-bottom:10px;font-size:22px}
	.container .videos{padding:80px 50px}	
	.container .videos .wrap{width:74%;margin:0px auto}
	.container .eventos .wrap{width:72%}
	.cta{width:25vw;left:70vw;top:200px}
	.cnc{background: rgba(10,140,241,.5); border-radius: 10px}
	.cnc .con{background: rgba(256,256,256,.75); }
	.cta.fut{top:480px}
}
@media screen and (min-width:1920px){
    .cta.fut {
        top: 550px;
    }	

}