.modalMat{background:rgba(204, 204, 204, 0.7);width:100%;height:100vh;position:fixed;z-index:10000}
.modalMat .wrap{background-color: #fff; width: 100vw; height: 100vh; padding: 20px}
.modalMat .wrap h1{padding-bottom: 20px; border-bottom:1px solid #ccc; margin-bottom: 20px}
.modalMat .wrap .img{height: 80vw; border:1px solid #f00; background-position: center; background-repeat: no-repeat; background-size: cover}

.grid{ overflow: auto }
.box{margin-bottom: 20px; border:1px solid #ccc; border-radius:10px; position: relative;}
.box h2{background-color:#1C4075;margin: 0px; padding: 20px; border-radius: 10px 10px 0px 0px}
.box .img{height:50vw; background-position: center; background-size: cover; background-repeat: no-repeat;}
.box p{padding: 20px; margin:0px; font-size: 22px}
.box button{ cursor: pointer; width: 100%; position: absolute; bottom:1px; padding: 10px; border-radius: 0px 0px 5px 5px!important; border:none; background-color: #40B9F2 }
.box button:hover{ background-color:#03c; color:#fff  }
.btLogin{ border-bottom:1px solid #333; border-radius: 5px; background-color: #22B7E8; padding: 15px; text-align: center; color: #000; font-weight: bold; margin-bottom: 100px; display: block; width: 100%}
.op a{ padding: 15px; background-color: #0753a1; color:#fff; border-radius: 5px; display: block }
.op div{padding: 15px; background-color: #eee; border-radius: 5px; margin-bottom: 10px}
.op.left{ margin-bottom: 20px}

.esp, .esp2, .esp3{display: grid;grid-template-columns:47.5% 47.5%; grid-gap:5%; margin-bottom: 20px;padding-bottom: 15px;}
.esp div, .esp2 div, .esp3 div{ padding: 15px; background-color: #ccc; border-radius: 5px; }
.esp div i, .esp2 div i, .esp3 div i{ color: #666;}
.esp div:hover, .esp .active,
.esp2 div:hover, .esp2 .active,
.esp3 div:hover, .esp3 .active{ background-color:#11519b; color: #fff; cursor: default;}
.esp div:hover i, .esp .active i,
.esp2 div:hover i, .esp2 .active i,
.esp3 div:hover i, .esp3 .active i{color: #fff;}

#patinaxe, #liga{display: none;}

.btIns{display: inline-block; background-color: #7FC265; color: #333; font-weight: bold; padding: 10px; font-size: 18px; border-radius: 4px; margin-bottom: 20px;}

@media screen and (min-width:768px){
	.cuerpo .wrap{width: 70%;margin: 0px auto}
	.cuerpo .wrap.preinscricion{ width: 60%; }
	.cuerpo .grid{ padding: 0px 20px }
	.box{width: 48%; height: 500px}
	.box h2{ font-size: 18px}
	.box .img{height:200px}
	.box:nth-child(odd){ float: left}
	.box:nth-child(even){ float:right}
	.btLogin i{float: right; font-size: 30px; margin-top: -5px}
	.btLogin:hover{background-color: #191E4A; color:#fff;}
	.op.left{ float: left; width: 30%; margin-left: 10%}
	.op.right{ float: right; width: 30%; margin-right: 10% }
}
@media screen and (min-width:1024px){
	.cuerpo .wrap{width:80%}
	.cuerpo .wrap.preinscricion{ width:40%; }
	.box{width:23%; margin-right:2%}
	.box .img{height:260px} 
	.box:nth-child(even){ float:left}
	.box p{font-size:16px}
	.btLogin{border-radius: 30px}
}
@media screen and (min-width:1600px){
	.cuerpo .wrap{padding-top: 40px;}
	.cuerpo .wrap.preinscricion{ width:30%; }
}