@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@200;300;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@700&display=swap');
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0px;padding:0px;list-style:none;text-decoration: none;border: none;outline: none}
html,body{font-size:16px;color:#333;font-family:'Fira Sans', sans-serif;font-weight:300}
a{text-decoration:none;outline:none}
h1{margin: 0px 0px 10px 0px}
h2.tits{color:#333!important;}
h5,h6{border-radius:4px;padding:15px;font-size:16px;font-weight:bold;text-align:center;margin:0px 0px 10px 0px;color:#fff}
h5{background-color:#50AD46}
h6{background-color:#BF3B3B}
.notify{border-radius:4px;margin:0px 0px 10px 0px;color:#fff;font-size:16px;padding:15px;text-align:center}
.notify.ok{background-color:#31A83F}
.notify.error{background-color:#B73636}

.modal{background:rgba(204, 204, 204, 0.85);width:100%;height:100vh;position:fixed;z-index:1100}
.modal .wrap{ width:80%; position: absolute; background-color: #fff;left: 50%;top: 50%;transform: translate(-50%, -55%);border:1px solid #ccc;padding:20px; box-shadow: 0px 0px 10px #666; border-radius:3px}
.modal .wrap h1{font-size:20px}
.modal .wrap p{margin-bottom: 20px}
.modal .wrap a{padding: 10px; border-radius: 4px; display: inline-block; background-color:#999; font-size: 14px; font-weight: bold; color: #333}
.modal .wrap a.aceptar{float: right;}
.modal .wrap a:hover{background-color:#054d98; color: #fff}
.modal .wrap button{padding:10px;background-color:#6C0F0F;color:#eee;font-size:16px;border:none;border-radius:4px;position:relative;margin-right:0px}
.modal .wrap .editar{ padding: 5px; width: 100%; border:1px solid #ccc; height: 100px; border-radius: 4px; margin-bottom: 10px }

.wait{position:fixed;width:100%;height:100%;background-color:rgba(0,0,0,.4);z-index: 1000000}
.wait i{ position: absolute; top:50%; left:40%; color: #fff; font-size: 60px;-webkit-animation:spin 3s linear infinite;
    -moz-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite; }
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg)} }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg)} }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg)}}

.msgModal{position:fixed;z-index:30000;color:#FFF;background-color:#8FE591;text-align:center;font-size:18px;top:-65px;width:100%;padding:20px}
.msgModal.error{background-color:#EA5757} 
.msgModal.exito{background-color:#53A94F} 
.container{padding:0px;margin:0px;overflow:auto;width:100%}
.container .header{position:fixed;background-color:#fff;height:60px;width:100%;z-index:1000;transition:all 1s ease;background:#010810}
.container .header .tope{display:none}
.container .header .wrap{width:94%;margin:0px auto;position:relative}
.container .header .wrap .logo{margin-top:10px;float:left}
.container .header .wrap .logo img{width:100px}
.container .header .wrap .fas.fa-bars,
.container .header .wrap .fas.fa-times{float:right;margin:10px 10px 0px 0px;font-size:40px;color:#fff}
.container .header .wrap p{display:none}
.container .header .wrap nav{padding:10px 0px;border-radius:0px 0px 0px 10px;max-height:90vh;background-color:#fff;position:absolute;top:60px;width:70vw;left:102vw}
.container .header .wrap nav a{color:#333;display:block;padding:10px 30px 10px 10px;font-size:24px;text-align:right}
.container .header #config{display:none}
.container .header .preinscricions{background-color:#E73AD9;color:#fff;display:block;text-align:center;font-size:14px;padding:5px 0px}
.container .cuerpo{min-height:90vh;padding:120px 20px 20px 20px}
.container h2{font-family:'Rowdies', cursive;padding:0px;margin:0px 0px 20px 0px;color:#fff}
.container h2 i{font-size:12px;color:#4DCBF4}
.container .post{background-color:#181818;padding:20px}
.container .post .wrap .wrapper .box{display:block;font-size:16px;color:#fff;background-color:#3B3C3E;margin-bottom:20px}
.container .post .wrap .wrapper .box .img{height:200px;background-position:center;background-size:cover;background-repeat:no-repeat}
.container .post .wrap .wrapper .box .data{font-size:16px;padding:10px}
.container .post .wrap .wrapper .box .data a{color:#00CEFA}
.container .post .wrap .wrapper .box .data a:first-of-type{font-weight:bolder}
.container .post .wrap .wrapper .box .data a p{color:#fff}
.container .post .wrap .wrapper .box .data p{text-shadow:1px 1px 2px #000;font-weight:bolder;font-size:22px;margin:0px 0px 10px 0px}
.container .footer{background-color:#010810;text-align:center}
.container .footer .rrss{padding:60px 20px;background-color:#11519b;color:#010810}
.container .footer .rrss div:first-of-type{margin-bottom:10px;font-size:20px;font-weight:bolder}
.container .footer .rrss a{font-size:60px;color:#fff;margin-right:4%}
.container .footer .cont{overflow:auto;text-align:left;color:#fff;padding:20px}
.container .footer .cont a{color:#ccc;margin-bottom:8px;display:block;text-shadow:5px 10px 2px #000}
.container .footer .cont .ll{float:left;width:48%}
.container .footer .cont .der{float:right;width:48%}
.container .footer .cont .col{margin-bottom:20px}
.container .footer .cont .col:last-of-type{margin-bottom:0px}
.container .footer .cont .col h3{font-family:'Rowdies', cursive;margin:0px 0px 15px 0px;font-size:20px}
.container .footer .band{background-color:#031b34;color:#eee;padding:30px 10px}
.container .footer .band .wrap{overflow:auto}
.container .footer .band .wrap .logos{margin-bottom:20px;overflow:auto}
.container .footer .band .wrap .logos .cc{display:none}	
.container .footer .band .wrap .izq{text-shadow:1px 1px 2px #000;margin-bottom:20px}
.container .footer .band .wrap .izq span{display:block}
.container .footer .band .wrap nav{width:80%;margin:0px auto}
.container .footer .band .wrap nav a{text-shadow:1px 1px 2px #000;color:#ccc;display:block;font-size:18px;padding:10px;background-color:#275C70;margin-bottom:5px;border-radius:4px}
.container .footer .ending{height:20px;background:rgb(7,83,161);background:linear-gradient(132deg, rgba(7,83,161,1) 13%, rgba(199,228,244,1) 50%, rgba(241,245,247,1) 50%, rgba(3,27,52,1) 91%)}
.container .footer .autoridades{background-color: #fff; padding: 40px 0px}
.container .footer .autoridades .wrap{text-align: center}
.container .footer .autoridades .wrap img{ width: 60% }
/*TOOLS*/
#jumper{width:100%;padding:10px;border-radius:4px;border:1px solid #ccc;background-color:#0f519d;color:#fff}
/*FORMULARIOS*/
form .top{margin-bottom:5px}
form .bot{margin-bottom:5px}
form .bot:last-of-type{margin-bottom:20px}
form input[type="text"],
form input[type="email"],
form input[type="password"],
form select,
form textarea{padding:15px;outline:none;border:1px solid #ccc;border-radius:4px;width:100%}
form textarea{resize:vertical;height:150px}
form button{width:100%;padding:15px;border:none;border-radius:4px;outline:none;background-color:#a0cdea;color:#000}
form button:hover{background-color:#0753a1;cursor:pointer;color:#fff}
form fieldset{ margin-bottom:20px;border-radius:4px;border:1px solid #ccc;padding:10px}
form fieldset legend{ border:1px solid #ccc;padding:10px;border-radius:4px;font-weight:bold;font-size:14px;color:#666 }
.hash{color: #2222FA!important; font-weight: normal!important;}
@media screen and (min-width:768px){
	.modal .wrap{ width:initial}
	.wait i{left:48%;}
	form fieldset{ padding:20px}
	.container .header{height:100px;background:none}
	.container .header #config{display:initial}
	.container .header.active .wrap p{margin-left:20px;margin-top:20px;font-family:'Rowdies', cursive;display:block;float:left;color:#fff}
	.container .header .wrap .fas.fa-bars{display:none}
	.container .header.active{height:60px;background-image:url(../img/layout/bg-fabric.jpg);background-position:bottom right;background-repeat:no-repeat;background-size:cover;box-shadow:0px 0px 6px #000}
	.container .header .tope{text-shadow:0px 0px 2px #000;font-size:14px;padding:10px 5px;overflow:auto;display:block;color:#fff;background:rgb(7,83,161);background:linear-gradient(132deg, rgba(7,83,161,1) 13%, rgba(199,228,244,1) 50%, rgba(241,245,247,1) 50%, rgba(3,27,52,1) 91%)}
	.container .header .tope .aa{font-family:'Rowdies', cursive;float:left;margin-left:4%;font-weight:bolder}
	.container .header .tope .aa h1{font-size:14px;margin:0px}
	.container .header .tope .bb{float:right;margin-right:4%}
	.container .header .tope .bb a{color:#eee;margin-left:10px}
	.container .header .tope .bb a:hover{color:#fff}
	.container .header .tope .bb .fab.fa-youtube{font-size:16px}
	.container .header .wrap nav{position:initial;background:none;float:right;margin-top:10px;width:auto}
	.container .header .wrap nav a{color:#fff;margin-left:20px;padding:0px 10px 5px 10px;transition:color .4s, border-bottom .4s;display:initial;font-size:16px}
	.container .header .wrap nav a:hover{border-bottom:1px solid #ccc}
	.container .header .wrap nav.nopublic a{color:#333}	
	.container .header .wrap nav .submenu{display:none;background-color:#0753a1;border-radius:4px;position:absolute;right:0px;padding:10px 0px}
	.container .header .wrap nav .submenu a{display:block;color:#ccc;border:none;padding:10px}
	.container .header .wrap nav .submenu a:hover{color:#fff}
	.container .header .wrap nav span{display: none;}
	.container .header.active .wrap nav.nopublic a{color:#fff}
	.container .cuerpo{padding-top:150px;overflow:auto}
	.container .post{color:#eee;padding:60px 0px}
	.container .post .wrap{width:92%;margin:0px auto}
	.container .post .wrap .wrapper{display:grid;grid-template-columns:48% 48%;grid-gap:20px}
	.container .post .wrap .wrapper .box .img{height:160px} 
	.container .post .wrap .wrapper .box .data p{font-size:18px} 	
	.container .footer .rrss a{color:#9ed1ee;transition:color .2s}
	.container .footer .rrss a:hover{color:#fff}
	.container .footer .rrss a:last-of-type{margin-right:0%}
	.container .footer .cont{width:90%;margin:0px auto 0px 7%}
	.container .footer .cont .ll{width:60%}
	.container .footer .cont .der{width:40%}		
	.container .footer .cont .ll .col{float:left;padding:20px;width:33.33%}
	.container .footer .cont .der .col{float:left;padding:20px;width:50%}
	.container .footer .cont .col h3{font-size:16px}
	.container .footer .cont .col a{font-size:14px}
	.container .footer .cont .col a:hover{text-decoration:underline;color:#fff}
	.container .footer .band{background-image:url(../img/layout/bg-fabric.jpg);background-position:bottom right;background-size:cover;background-repeat:no-repeat}
	.container .footer .band .wrap .logos .edcc{float:left;width:80px}
	.container .footer .band .wrap .logos .cc{display:block;float:right;width:60px}	
	.container .footer .band .wrap .izq{float:left;font-size:12px;margin:0px}
	.container .footer .band .wrap nav{float:right;width:initial}
	.container .footer .band .wrap nav a{font-size:12px;transition:color .4s;color:#ccc;background:no-repeat;display:inline;padding:initial;padding:0px 5px;border-right:1px solid #ccc;border-radius:0px}	
	.container .footer .band .wrap nav a:hover{color:#fff;text-decoration:underline}
	.container .footer .band .wrap nav a:last-of-type{border:none}
	.container .footer .band .wrap .izq span{display:inline}
	.container .footer .autoridades .wrap img{ width:30% }
}
@media screen and (min-width:1024px){
	.container .header .wrap nav .submenu{right:-20px}
	.container .post .wrap .wrapper .box{border:1px solid #181818;transition:border .2s}
	.container .post .wrap .wrapper .box:hover{border:1px solid #eee}
	.container .post .wrap .wrapper .box .img{height:200px} 
	.container .post .wrap .wrapper .box .data a:hover{color:#fff} 
	.container .post .wrap .wrapper{grid-template-columns:24% 24% 24% 24%}
	.container .footer .band .wrap{width:90%;margin:0px auto}
	.container .footer .autoridades .wrap img{ width:200px}
}
@media screen and (min-width:1600px){
	.container .header{height:80px}
	.container .header.active{height:80px}
	.container .header .wrap nav,
	.container .header.active .wrap nav{margin-top:20px}
	.container .header .wrap nav a{font-size:20px}
	.container .header .wrap .logo img{width:100px}
	.container .header .wrap{width:70%} 
	.container .header .tope,
	.container .header .tope .aa h1{font-size:22px}
	.container .header .tope .aa{margin-left:5%}
	.container .header .tope .bb{margin-right:5%}
	.container .post .wrap{width:70%} 
	.container .footer{padding: 0px}
	.container .footer .cont{width:70%;margin-left:18%}
	.container .footer .band .wrap{width:70%;margin:0px auto}
}