@charset "utf-8";

* {box-sizing: border-box;}

body {
  margin: 0px;
  font-family: "Arial", "Helvetica", "sans-serif";

  padding: 0;
  background-color: black;
    
  overflow-x: hidden;
  overflow-y: scroll;
  

}

/*--------------------- Estilos del scrollbar -----------------*/

::-webkit-scrollbar {
 /* width: 0px;
  height: 0px;*/
    width:2px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  /*background: grey;*/
  background: rgba(252,185,0,1);
  border-radius: 10px; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
 /* background: #555;*/
  background: #b30000; 
}    


.logo{
        position: fixed;
        width: 80px;
        height: 80px;
        top: 16px;
        left: 16px;
        z-index:3000;
}

/*.logo__img{
    position: absolute;
    
    width: 100%;
    height: 100%;
}*/

.logo__img{
    position: absolute;
    top: 3%;
    left: 2%;
    width: 8%;
    height: 15%;
}

/* ---------------------------Logo Big fondo-----------*/

.logobig {
    position: absolute;
    width:38%;
    right: 1%;
    bottom: 0%;
 /*   left: 63%; 
    top: 33%;  */
}

.logo_big {
    opacity: 0.15;
    width: 100%;
    height: 56%;
}

    
/*---------------------Estilos del banner---------------------*/

.main-header{
    z-index: 800;
    background:  rgba(0,0,0,0.5);
    
   /* position: fixed;*/
}


.banner {
    
    position: relative;
    z-index: 1000;
    }

.banner__img{
    top: -4%;
    width: 100%;
    height: 670px;
    object-fit: cover;
}



.login {
  position: absolute;
  top: 0px;
  left: 0px;
  /*float: right;*/
  background-color: rgba(252,185,0,1) ;
  color: white;
  padding: 7px 20px;
  text-align: center;
  font-size: 17px;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;    
    
}


.login:hover{
    background-color: rgba(223,172,31);
}

.login_lost{
    position: relative;
    top:90%;
}

.formBox{
    position: absolute;
    overflow-x: hidden;
    overflow-y:hidden;
    top: 4%;
    left: 5%;
    width: 91%;
    height: 90%;
    padding: 10px;
    background: rgba(50,50,50,0.98);
    color: white;
    border-radius: 7px;

}

.formBox p{
    margin-top: 10px; 
    margin-left: 5px;
    margin-bottom: 15px;
    /*font-size: 22px;*/
}

.cabecera{
    position: relative;
    /*top: -2%;*/
    top:1%;
    left: 12%;
    width:53%;
    font-size: 31px;
    color: rgba(252,185,0,1);
    border-width: 1px;
    border-color: rgba(0, 0, 0, 0.6);
}

.pCabecera{
    margin-top: 0px;
    margin-left:0px;
    margin-bottom: 0px;
    position: relative;
    top:-11px;
    left:136px;
    width: 53%;
    

}

.banner__content{
    position: absolute;
    top: 10%;
    left: 20%;
    width: 60%;
    margin: auto;
    padding: 1px;
    z-index: 1500;
    background: rgba(50,50,50,0.7);
    color: white;
    /*text-align: center;*/
}

/*.formBox{
    position: absolute;
    overflow-x: hidden;
    overflow-y:hidden;
    top: 10%;
    left: 20%;
    width: 60%;
    height: 81%;
    padding: 10px;
    background: rgba(50,50,50,0.7);
    color: white;
    border-radius: 7px;

}*/

.banner__content p.aviso{
    font-size: 13px;
}

.modal{
    background: rgba(0, 0, 0, 0.6);
    top:0;
    left:0;
    position: fixed;
    width:100vw;
    height: 100vh;
    visibility: hidden;
    z-index: 2900;


}

.modal_msg{
    background-color: rgba(33,33,33,0.9);
    font-family: "Arial","Tahoma","Helvetica","Haettenschweiler";
    color: #fff;
    position: absolute;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    align-content: center;
   /* display: block;*/
    left: 38%;
    top:32%;
    width: 25vw;
    height: 23vh;
    border: 1px;
    border-color: black;
    border-style: inset;
    
    
    /*top: 9vh;*/
   /* top: 60%;*/
    /*height: 0px;
    width: 0px;*/
     
}

.msg{
    position: absolute;
    width: 92.5%;
    height: 40%;
    top: 8px;
    left: 12px;
    padding: 7px;
   /* background-color: #FFAC27;*/
    background: rgba(65,65,65,0.9);
    
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    /*text-shadow:-1px 0px 0px #000000;*/
   /* margin-top: 4px;
    margin-bottom: 2px;
    margin-left: 2px;
    margin-right: 2px;*/
   /* background-color: #FFAC27;*/
      border-radius: 3px;
   /* background: rgba(10,10,255,0.9);*/
    border-style: none;
    outline: 0px;

}

.banner__content p.msg{
    width: 75%;
    padding: 8px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    /*text-shadow:-1px 0px 0px #000000;*/
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 60px;
   /* background-color: #FFAC27;*/
      border-radius: 5px;
   /* background: rgba(10,10,255,0.9);*/
    border-style: none;
    color: white;
    outline: 0px;

}



.button_msg{
    position: relative;
    top: 70%;
    left: 37%;
    padding: 5px;
    width: 24%;
    background-color: rgba(252,185,0,1);
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    border-style: none;
    outline: 0px;
    
}

.button_msg:hover{
    background-color: rgba(105,105,105,.3);
}

.modalMessages{
    background: rgba(0, 0, 0, 0.95);/*rgba(123,125,127,0.7);*/
    position: fixed;
    color: rgba(241,244,246,0.9);
    visibility: hidden;
    top:0;
    left: 0;
    height: 100vh;
    width: 100vw;
    transition: all 0s;
    z-index: 2900;  
  }

.modalA{
    background: rgba(0, 0, 0, 0.6);
    top:0;
    left:0;
    position: fixed;
    width:100vw;
    height: 100vh;
    visibility: hidden;
    z-index: 2910;
}

#img_container {
    
    overflow-x: hidden;
    overflow-y:scroll;  
    
    position: absolute;
    display: flex;
    margin-top: 3px;
  /*width: 100%;*/
    width: 70%;
    height: 70%;
    flex-wrap: wrap;  /* Comportamiento por defecto: nowrap */
    align-items:center;
    justify-content:left;
    left: 16%;
    top: 13%;
    z-index: 3600;
  }
  
.box{

    position: relative;
    display: flex;
    flex-wrap: wrap;
   /* flex-direction: row;*/
    background-color: transparent;
    top: 0px;
    width: 100%;
    height: 88%;
    padding: 3px;
    justify-content:flex-start;
    align-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
}

.item {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 24.5%;
    height: 78%;
    margin-left: 5px;
    margin-top: 3px;
    background-color: rgba(45,45,45,0.8);
   /* background-color: blue;*/
    color: cornsilk;
    border-style:solid;
    border-radius: 10px;
    border-color: transparent;
   /* cursor:pointer;*/
   /* align-content: center;
    align-items: center;*/
    text-align: center;
   }

.imagenes{
    position:relative;
    width: 100%;
    height: 100%;   
}

.imagenes2{
    position:relative;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

.titles_box {
    /*position: absolute;*/
    text-align: left;
   /* top: -320%; */
    font-family: "Arial","Tahoma","Helvetica","Haettenschweiler"; 
    font-size: 9px;
    font-weight: bold;
    color: rgba(252,185,0,1);
  }

.titles_box2 {
    /*position: absolute;*/
    text-align: left;
   /* top: -320%; */
    font-family: "Arial","Tahoma","Helvetica","Haettenschweiler"; 
    font-size: 9px;
    font-weight: bold;
    color: rgb(94, 27, 27);
  }
  
.cierre{
    position: relative;
    top: -103%;
    left: 83%;
}

.button_close {
    position: relative;
    /*top:-11%;*/
   /* left:92%;*/
    width: 35px;
    height: 35px; /*25%;*/
    background-color: transparent;
    color: white;
    border-radius: 20px;
    border-style: solid;
    border-color: white;
    margin-bottom: 10px;
    cursor: pointer;
    z-index: 2900;
}


.content{
    position:relative;
    width: 100%;
    height: 87%;
    top: 0px;
    overflow-x: hidden;
    overflow-y: scroll;
 
}   

.uno{
    position: relative;
    left:6%;
    top:5%;
}

/*.formBox input[type="submit"]{*/

#formulario {
    position: relative;
    height: 80%;
}
    
.botones{
    position:relative;
    width: 19%;
    padding: 6px;
    font-size: 15px;
    bottom: 36px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 5px;
    background-color: #f44336;
    border-radius: 5px;
   /* background: rgba(10,10,255,0.9);*/
    border-style: none;
    color: white;
    outline: 0px;
}




.valores{

    background: rgba(85,85,85,.95);
    font-family: "Arial","Tahoma","Helvetica","Haettenschweiler";
    font-size: 16px;
    border: 0;
    outline: 0;
    color: rgba(205,205,205,0.8);
    margin-top: 1px;
    margin-left: 5px;
    margin-bottom: 10px;
    padding: 5px;
    width: 70%;
    border:1px;
    border-color: black;
    border-style: inset;
    border-radius: 3px;
}

.valores::selection{
    background-color: rgba(205,205,205,.3);
}

.etiquetas{
    font-size: 13px;
    margin-top: 1px;
    margin-left: 3px;
    margin-bottom: 15px;
    padding: 4px;
}

.formBox input[type="submit"]:hover {
   /* background: rgba(0,0,0,0.5);*/
    background-color: rgba(105,105,105,.3);
    cursor: pointer;
    transition: all 300ms;
    
}



.formBox input[type="submit"]:focus {
   /* background: rgba(0,0,0,0.5);*/
    background-color: rgba(105,105,105,.3);
    cursor: pointer;
    transition: all 300ms;
    
}

.formBox input[type="button"]:hover{
    background: rgba(105,105,105,.3);
    cursor: pointer;
    transition: all 300ms;
  
}

.formBox input[type="button"]:focus{
    background: rgba(105,105,105,.3);
    cursor: pointer;
    transition: all 300ms;
  
}
    
.banner__content a{
    color: white;
    font-size: 17px;
    text-decoration: none;
}

.banner__content a.aviso{
    font-size:13px;
}

.banner__content a:hover{
    text-decoration: underline;

}

#selectfile {
    display: none;
}

#imagen {
    position: relative;
    display: flex;
    width: 230px;
    height: 250px;
    margin-bottom: 10px;
    margin-left: 5px;
}

#poster {
    position:relative;
   /* max-width: 210px;
    max-height: 240px;*/
    max-width:100%;
    max-height: 100%;
    border-radius: 10px;
}

.formView {
       background: rgba(0, 0, 0, 0.75);
       color: #fff;
       position: fixed;
       /*top: -100vh;*/
       visibility: hidden;
       display: block;
       top:0;
       left: 0;
       height: 100vh;
       width: 100vw;
       transition: all .5s;
       z-index: 3800;   
}

.cabecera_lista{
    position: relative;
    left:2%;
    width:60%;
    border: 1px;
    background-color: rgba(85,85,85,0.25);
}

.navegador{
    font-weight: bold;
}

.tablas{
    border:1;
    
}

/*
.formBox input[type="text"]{
    
   background: transparent;
    font-family: "Arial","Tahoma","Helvetica","Haettenschweiler";
    font-size: 13px;
    border: 0;
    outline: 0;
    color: #fff;    
    
    width: 60%;
 
}

.formBox input[type="email"]{
    padding: 4px;  

    font-size: 13px;
    width: 60%;
     
}

.formBox input[type="password"]{
    padding: 4px;  
    font-size: 13px;
    width: 60%;
      
}*/

.buticoClase {
    position: relative;
   /* right: -135px;*/
    top:0px;
    width: 33px;
    height: 33px;
    background-color: transparent;
   /* background-color: rgba(14, 13, 13, 0.795);
    color:white;
    border-radius: 20px;*/
    border-style: hidden;
   /* border-color: white;*/
    cursor: pointer;
  /*  z-index: 3100;*/
}

.icoClase {
   /* display: flex;
    flex-direction: column;
    flex-wrap: nowrap;*/
    position: absolute;
    margin-left: 20.5%;
    /*margin-top: -116%;*/
    width:33px;
    height: 33px;
    z-index: 3100;
}

.imgicoClase {
    width:13px;
    height:13px;
    margin-top:3px;
}

.column__title {
    font-size: 1.3em;
    
}
    
.container{
    width: 100%;
    margin: auto;
}    
    
.container--flex{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;


}

.column{
    width: 100%;
}

.column--33{
        width: 33%;
    }
    
.main-footer{
    background: #262E47;
    color: white;
    padding: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: .8em;
}

.copy {
    text-align: center;
    margin:auto;
    margin-top: 20px;
}
.main-footer [class*="icon-"] {
    color: wheat;
    text-decoration: none;
}

.main-footer [class*="icon-"]:before {
    position: relative;
    top: 3px;
    right: 5px;
}

    
 
    

/*---------------------- Estilos responsive Simples---------------------*/

@media screen and (max-width: 1921px){
    .item{
        height:114%;
    }

    .pCabecera{
        left:154px;
    }

    .cabecera{
        left:9%;
    }

    .logo__img{
        width:7%;
    }

    .icoClase{
        margin-left: 21.5%;
    }


}

@media screen and (max-width: 1281px){
    .logo__img{
        width:8%;
    }

    .cabecera{
        left:11%;
    } 

    .pCabecera{
        left:124px;
    }

    .item{
        height:77%;
    }
}



@media screen and (max-width: 1267px){
    .formBox{
        width:70%;
        left:15%;
        }

 /*   .item{
        height:65%;
    }*/
}

@media screen and (max-width: 1222px){
    .formBox{
        width:75%;
        left:11%;
    }
}

@media screen and (max-width:1181px){
  /*  .item{
        height: 63%;
    }*/
}

@media screen and (max-width:1140px){
  /*  .item{
        height: 56%;
    }*/
}

@media screen and (max-width: 1124px) {
   /* .logobig{
        top:34%;
    }*/
    
    .valores{
        width:80%;
    }    
    
    .botones{
        width:30%;
    } 
}

@media screen and (max-width:1070px){
  /*  .item{
        height: 58%;
    }*/
}

@media screen and (max-width: 987px) {
   /* .logobig{
        top:39%;
    } */
    
    .valores{
        width:90%;
    }
    
    .botones{
        width:30%;
    }  

  /*  .item{
        height: 54%;
    }*/
}

@media screen and (max-width:938px){
  /*  .item{
        height: 52%;
    }*/
}

@media screen and (max-width:892px){
   /* .item{
        height: 50%;
    }*/
}

/*Pantalla móvil o tablet*/
/*@media screen and (max-width:892px) and (max-height:628px){
    .item{
        height: 45%;
    }
}*/

@media screen and (max-width: 857px) {
    /*.logobig{
        top:48%;
    }*/
    
    .formBox{
        width: 80%;
        left: 10%;
    }
    .valores{
        width:95%;
    }
    
    .botones{
        width:30%;
    }        
    
}

@media screen and (max-width:800px){
  /*  .item{
        height: 48%;
    }*/
}

@media screen and (max-width: 768px){
  /*  .item{
        width:31.5%;
        height: 60%;
    }*/

    .icoClase{
        margin-left: 16%;
    }
}

@media screen and (max-width: 763px) {
  /*  .logobig{
        top:52%;
    }*/
    
    .formBox{
        width: 80%;
        left: 10%;
    }
    .valores{
        width:100%;
    }
    
    .botones{
        width:40%;
    }    
    
}

@media screen and (max-width:750px){
  /*  .item{
        height: 57%;
    }*/
}


@media screen and (max-width: 676px){
 /*   .item{
        height: 53%;
    }*/
}

@media screen and (max-width:667px){
 /* /*  .item{
        height: 44%;
    }*/

    .cabecera{
        width: 79%;
        font-size: 20px;
    }

    .button_close{
        width:30px;
        height: 30px;
        top: 13px;
    }
}

@media screen and (max-width:636px){
  /*  .item{
        height: 49%;
    }*/
}

@media screen and (max-width:610px){
    .icoClase{
        margin-left:14%;
    }
}

@media screen and (max-width:576px){
 /*   .item{
        height: 46%;
    }*/
}

@media screen and (max-width:558px){

    .botones{
        width:48%;
    }

 /*   .item{
        height: 43%;
    }*/
}

@media screen and (max-width: 549px) {
   /* .logobig{
        top:52%;
    }*/
    
    .formBox{
        width: 80%;
        left: 10%;
    }
    .valores{
        width:100%;
    }
    
  /*  .botones{
        width:%;
    }*/

 /*  /* .item{
        height: 38%;
    }*/
    
}

@media screen and (max-width: 534px){
  /*  .item{
        height: 40%;
    }*/
}

@media screen and (max-width: 533px) and (min-height:700px){
    
    .cierre{
        top:-104%;
        left: 90%;
    }
}
@media screen and (max-width:516px){

    .cabecera{
        width: 85%;
    }

 /*  /* .item{
        height: 36%;
    }*/

    .icoClase{
        margin-left: 15%; /*23%;*/
        width:24px;
        height: 24px;
    }

    .buticoClase{
        width:24px;
        height: 24px;
    }
}

@media screen and (max-width: 492px) {
   /* .logobig{
        top:59%;
    }*/
    
    .formBox{
        width: 90%;
        left: 5%;
    }
    .valores{
        width:100%;
    }
    
    .botones{
        width:48%;
    }
    
}

/*@media screen and (max-width:479px){
    .item{
        width: 96.5%;
        margin-left: 6px;
        height: 97%;
    }
}*/

@media screen and (max-width: 420px) {
   /* .logobig{
        top:63%;
    }*/
    
    .formBox{
        width: 95%;
        left: 2%;
    }
    .valores{
        width:100%;
    }
    
    .botones{
        width:44%;
    }
    
}

@media screen and (max-width: 420px) {
  /*  .logobig{
        top:67%;
    }*/
    
    .formBox{
        width: 95%;
        left: 2%;
    }
    .valores{
        width:110%;
    }
    
    .botones{
        width:48%;
    }
    
}

@media screen and (max-width: 374px){
    .icoClase{
        margin-left: 22%;
        width:23px;
        height: 23px;
    }
}

@media screen and (max-width: 358px) {
    
  /*  .logobig{
        top:69%;
    }*/
    
    .formBox{
        width: 95%;
        left: 2%;
    }
    .valores{
        width:120%;
    }
    
    .botones{
        width:48%;
    }
    
    /*    
    .cabecera{
        width:100%;
    }*/
}

@media screen and (max-width: 338px) {
    
    /*.logobig{
        top:74%;
    }*/
    
    .formBox{
        width: 95%;
        left: 2%;
    }
    .valores{
        width:130%;
    }
    
    .botones{
        width:48%;
    }
    /*
    .cabecera{
        width:110%;
        min-width: 184px;
    }*/
}


/*----------------------- RESPONSIVE COMPUESTO ----------------- */
/* Pantallas y monitores */

@media screen and (max-width: 1921px) and (max-height:884px){
    .item{
        height:114%;
    }

    .pCabecera{
        left:154px;
    }

    .cabecera{
        left:9%;
    }

    .logo__img{
        width:7%;
    }

    .icoClase{
        margin-left: 21.5%;
    }
}


@media screen and (max-width: 1372px) and (max-height: 884px){
      .logo__img{
        width:8%;
    }

    .cabecera{
        left:11%;
    } 

    .pCabecera{
        left:132px;
    }

    .item{
        height:84%;
    }  
}

@media screen and (max-width: 1281px) and (max-height: 884px){
    .logo__img{
        width:8%;
    }

    .cabecera{
        left:11%;
    } 

    .pCabecera{
        left:124px;
    }

    .item{
        height:77%;
    }
}

@media screen and (max-width: 1281px) and (max-height: 643px){
    .logo__img{
        width:8%;
    }

    .cabecera{
        left:11%;
    } 

    .pCabecera{
        left:124px;
    }

    .item{
        height:77%;
    }
}

@media screen and (max-width:1268px) and (max-height:641px) {
    .item{
        width: 23.5%;
        height:60%; /*74%;*/
    }

    .pCabecera{
        left: 102px;
    }

    .cierre{
        left:77%;
    }

    .icoClase{
        margin-left: 19.5%;
    }
}

@media screen and (max-width:1182px) and (max-height:641px) {
    .box{
        padding: 0px;
        left: 10px;
    }
    
    .item{
        width: 23.5%;
        height: 59%; /*63%;*/
    }

    
}


@media screen and (max-width:1141px) and (max-height:641px) {
    .cabecera{
        font-size: 29px;
    }
    
    .item{
        width: 23.5%;
        height:57%; /*61%;*/
    }
}


@media screen and (max-width:1082px) and (max-height:641px){
    .item{
        height: 55%;
    }

    .pCabecera{
        left:92px;
    }
}


@media screen and (max-width:1071px) and (max-height:641px) {
    .item{
        width: 23.5%;
        height: 54%; /*58%;*/
    }
}

@media screen and (max-width:1056px) and (max-height:641px){
    .cabecera{
        font-size: 27px;
    }
}

@media screen and (max-width:1016px) and (max-height:641px){
    .item{
        height: 52%;
    }
}

@media screen and (max-width:993px) and (max-height:641px) {
    .formBox{
        width: 80%;
        left:9%;
    }

    .cabecera{
        font-size: 24px;
    }

    .pCabecera{
        left: 90px;
    }

    .item{
        width: 23.5%;
        height:53%; /*55%;*/
    }

    .icoClase{
        margin-left: 18.5%;
    }

    .cierre{
        left:76%;
        top: -100%;
    }

    .logo__img{
        height:12%;
    }
}



@media screen and (max-width:913px) and (max-height:1369px) {
    .item{
        width: 32%;
        height:30%;
    }

    .cierre{
        top: -101%;
        left:74%;
    }

    .cabecera{
        font-size: 24px;
    }

    .icoClase{
        margin-left:25%;
        margin-top: 1%;
    }


    .pCabecera{
        left:79px;
    }
}

@media screen and (max-width:913px) and (max-height:641px) {
    .formBox{
        width:88%;
        left:6%;
    }

    .pCabecera{
        left:91px;
    }
    
    .item{
        width: 23.5%;
        height:54%;
    }

    .cierre{
        top:-99%;
        left:77%;
    }

    .icoClase{
        margin-left: 18%;
        margin-top: 0%;
    }

}

@media screen and (max-width:903px) and (max-height:641px) {
    .item{
        width: 23.5%;
        height:53%; /*51%;*/
    }

    .icoClase{
        margin-left: 19%;
        margin-top: 0%;
    }

}

@media screen and (max-width:857px) and (max-height:641px){
   /* .logobig{
        top:54%;
    }*/
}

@media screen and (max-width:848px) and (max-height:641px){
    .item{
        height:51%;
    }
}

@media screen and (max-width:808px) and (max-height:641px) {
    .item{
        width: 23.5%;
        height:49%;
    }

    .icoClase{
        margin-left: 41%;
        margin-top: 1%;
    }

}

@media screen and (max-width:821px) and (max-height:1181px) {
    .item{
        width: 48.5%;
        height:87%;
    }

    .cierre{
        top:-99%;
     
    }

    .logo__img{
        height: 11%;
    }

    .cabecera{
        font-size: 23px;
    }

    .icoClase{
        margin-left: 41%;
        margin-top: 1%;
    }

}

@media screen and (max-width:821px) and (max-height:641px) {
    .item{
       /* width: 48.5%;*/
        width: 23.5%;
        height:48%;
    }

    .cierre{

        top:-98%;
     
    }

    .icoClase{
        margin-left:18%;
        margin-top: 0%;
    }

    .pCabecera{
        left:82px;
    }

}

@media screen and (max-width: 815px) and (max-height: 641px){
    .cierre{
        left:79%;
    }

    .login{
        font-size: 15px;
        padding: 6px 13px;
    }
}

@media screen and (max-width:801px) and (max-height:1281px) {
    .item{
        width: 48.5%;
        height:87%;
    }


    .item{
        width: 48.5%;
        height:87%;
    }

    .cierre{
        top:-99%;
     
    }

    .logo__img{
        height: 11%;
    }

    .cabecera{
        font-size: 23px;
    }

    .icoClase{
        margin-left: 41%;
        margin-top: 1%;
    }

}

@media screen and (max-width:801px) and (max-height:641px) {
    .item{
        width: 23.5%;
        height:48%;
    }

    .cierre{
        /*top:-97%;*/
        left:79%;
    }

    .icoClase{
        margin-left: 42%;
        margin-top: 0%;
    }

}

@media screen and (max-width:769px) and (max-height:1281px) {
/*    .item{
        width: 48.5%;
        height:43%;
    }


    .icoClase{
        margin-left: 17%;
        margin-top: 1%;
    }   */ 

    .item{
        width: 48.5%;
        height:83%;
    }


    .cierre{
        top:-99%;
     
    }

    .logo__img{
        height: 10%;
    }

    .cabecera{
        font-size: 22px;
    }

    .icoClase{
        margin-left: 41%;
        margin-top: 1%;
    }

}


@media screen and (max-width:769px) and (max-height:1025px) {
  /*  .item{
        width: 48.5%;
        height:52%;
    }

    .cierre{
        top:-93%;
    }

    .icoClase{
        margin-left:17%;
        margin-top: 1%;
    }*/
    .item{
        width: 48.5%;
        height:81%;
    }


    .cierre{
        top:-99%;
     
    }

    .logo__img{
        height: 10%;
    }

    .cabecera{
        font-size: 22px;
    }

    .icoClase{
        margin-left: 41%;
        margin-top: 1%;
    }
}

@media screen and (max-width:769px) and (max-height:641px){
    .formBox{
        width: 92%;
        left: 4%;
    }
    
    .icoClase{
        margin-left:18%;
        margin-top: 0%;
    }

    .cierre{
        top: -98%;
    }

    .pCabecera{
        left: 72px;
    }
}

@media screen and (max-width:717px) and (max-height:641px){
    .cabecera{
        font-size: 23px;
    }

    .item{
        width:31.5%;
        height:58%;
    }

    .box{

        left:8px;
    }
}

@media screen and (max-width:641px) and (max-height:961px) {
  /*  .item{
        width: 48.5%;
        height:47%;
    }

    .cierre{
        top:-95%;
    }

    .icoClase{
        margin-left: 40%;
        margin-top: 1%;
    }*/

    .item{
        width: 48.5%;
        height:69%;
    }


    .cierre{
        top:-96%;
     
    }

    .logo__img{
        height: 9%;
    }

    .login{
        padding: 7px 11px;
        font-size: 15px;
    }

    .cabecera{
        font-size: 20px;
    }

    .icoClase{
        margin-left: 41%;
        margin-top: 1%;
    }

    .pCabecera{
        left:55px;
    }
}


@media screen and (max-width:601px) and (max-height:1025px) {
 /*   .item{
        width: 48.5%;
        height:42%;
    }

    .cierre{
        top:-95%;
    }

    .icoClase{
        margin-left: 15%;
        margin-top: 0%;
    }    */

    .item{
        width: 48.5%;
        height:66%;
    }


    .cierre{
        top:-94%;
        left: 73%;
     
    }

    .logo__img{
        height: 8%;
        width: 9%;
        top: 3%;
    }

    .login{
        padding: 6px 8px;
        font-size: 13px;
    }

    .cabecera{
        font-size: 19px;
        left:11%;
        top: 0%;

    }

    .icoClase{
        margin-left: 41%;
        margin-top: 1%;
    }

    .pCabecera{
        left:49px;
        top: -15px;
        font-size: 14px;
    }
}

@media screen and (max-width:541px) and (max-height:721px) {
    .item{
        width: 48.5%;
        height:58%;
    }

    .cierre{
        top:-94%;
        left:72%;
    }

    .icoClase{
        margin-left: 39%;
        margin-top: 0%;
    }
}


/* Dispositivos Tablet y similar */

@media screen and (max-width:775px) and (max-height:641px) {
    .item{
        width: 31.5%;
        height:60%;
    }

    .icoClase{
        margin-left: 58%;
    }

}

@media screen and (max-width:714px) and (max-height: 641px){
    .item{
        height: 58%;
    }
}

@media screen and (max-width:688px) and (max-height:641px){
    .cabecera{
        font-size: 22px;
    }

    .pCabecera{
        left: 68px;
    }

    .logo__img{
        height: 10%;
    }

    /*.logobig{
        top:59%;
    }*/

    .item{
        height: 56%;
    }

    .login{
        font-size:13px;
    }


}

@media screen and (max-width:658px) and (max-height:641px) {
    .item{
        
        height:51%;
    }
}

@media screen and (max-width:641px) and (max-height:641px) {
 /*   .item{
        
        height:53%;
    }*/

    .cierre{
        top:-99%;
    }

    .icoClase{
        margin-left: 25%; /*15%;*/
        margin-top: 0%;
    }
}

@media screen and (max-width:598px) and (max-height:641px) {
    .item{
        height:49%;
    }

    .pCabecera{
        margin-left: 60px;
    }

    .cierre{
        left: 75%;
        top: -94%;
    }

    .login{
        font-size:12px;
    }
}

@media screen and (max-width:575px) and (max-height:641px) {
    .item{
        height:46%;
    }

    .icoClase{
        margin-left: 25%;
        margin-top: 0%;
    }

    .pCabecera{
        left: 54px;
    }
}
@media screen and (max-width:570px) and (max-height:641px) {
    .cabecera{
        font-size: 20px;   
        left:12%;
        top:0px;
    }
    .pCabecera{
        left:57px;
        font-size: 14px;
        top: -16px;
    }
    .item{
        height: 47%;
    }
    .logo__img{
        height:8%;
        top:3%;
    }
    .login{
        padding: 6px 10px;
    }
}

@media screen and (max-width:520px) and (max-height:641px) {
    .item{
        width:47.5%;
        height: 62%;
    }   
    .icoClase{
        margin-left: 39%;
    }
    .logobig{
        width:46%;
       /* left:54%;*/
    }
    .container--flex{
        display: inline-grid;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .column--33{
        width:100%;
    }

}

/* Móviles */

@media screen and (max-width:481px) and (max-height:801px) {
    .item{
        width: 48.5%;
        height:57%;
    }

    .cierre{
        top:-97%;
        left: 65%;
    }

    .icoClase{
        margin-left: 40%;
        margin-top: 3%;
    }


    .pCabecera{
        left:42px;
        top: -9px;
        font-size:12px;
    }

    .cabecera{
        left:11%;
        top:0;
        font-size: 15px;
    }

    .logo__img{
        height:7%;
    }

    /*.logobig{
        top:73%;
    }*/

    .login{
        font-size: 14px;
        padding: 7px 6px;
        left:27px;
    }

    .titles_box{
        margin-top:8px;
    }

    .container--flex{
        display: inline-grid;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .column--33{
        width:100%;
    }

    ::-webkit-scrollbar{
        width: 1px;
    }


}

@media screen and (max-width:401px) and (max-height:641px) {
    .item{
        width: 96.5%;
        height:92%;
    }

    .cierre{
        top:-93%;
        left:60%;
    }

    .icoClase{
        margin-left: 83%;
        margin-top: 4%;
    }    

    .login{
        font-size: 12px;
        padding: 5px 6px;
        left:41px;
    }

    .box{
        left:0;
    }

    .pCabecera{
        left:35px;
    }

    .logo__img{
        height:7%;
    }
}

@media screen and (max-width:376px) and (max-height:813px) {
  /*  .item{
        width: 96.5%;
        height:72%;
    }

    .cierre{
        top:-97%;
       
    }

    .icoClase{
        margin-left: 83%;
        margin-top: 4%;
    } */

    .container--flex{
        display: inline-grid;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .column--33{
        width:100%;
    }

    .item{
        width:96.5%;
        height:92%;
    }

    .cierre{
        top:-94%;
        left: 57%;
    }

    .icoClase{
        margin-left: 83%;
        margin-top: 4%;
    }


    .pCabecera{
        left:38px;
        top: -9px;
        font-size:12px;
    }

    .cabecera{
        left:12%;
        top:0;
        font-size: 16px;
    }

    .logo__img{
        height:8%;
        width:10%;
    }

    /*.logobig{
        top:73%;
    }*/

    .login{
        font-size: 12px;
        padding: 7px 6px;
        left:41px;
    }

    .titles_box{
        margin-top:8px;
    }
}

@media screen and (max-width:376px) and (max-height:668px) {
    .item{
        width: 96.5%;
        height:91%;
    }

    .cierre{
        top:-95%;
       
    }

    .icoClase{
        margin-left: 83%;
        margin-top: 4%;
    } 
}

@media screen and (max-width:361px) and (max-height:741px) {
    .item{
        width: 96.5%;
        height:85%;
    }

    .cierre{
        top:-95%;
        left:55%;
    }

    .icoClase{
        margin-left: 83%;
        margin-top: 4%;
    } 

    /*.logobig{
        top:76%;
    }*/

    .cabecera{
        font-size: 17px;
        left:12%;
    }

    .logo__img{
        height: 7%;
        width: 10%;
    }

    .pCabecera{
        left:36px;
    }
}


@media screen and (max-width:361px) and (max-height:719px) {
    .item{
        width: 96.5%;
        height:87%;
    }

    .cierre{
        top:-95%;
        left:54%;
    }

    .icoClase{
        margin-left: 83%;
        margin-top: 4%;
    } 

}

@media screen and (max-width:361px) and (max-height:641px) {
    .item{
        width: 96.5%;
        height:84%;
    }

    .cierre{
        top:-95%;
        left:54%;
    }

    .icoClase{
        margin-left: 83%;
        margin-top: 4%;
    } 
}

@media screen and (max-width:321px) and (max-height:534px) {
    .item{
        width: 96.5%;
        height:74%;
    }

    .cabecera{
        font-size: 15px;
        left:14%;
    }

    .pCabecera{
        font-size: 11px;
    }

    .logo__img{
        height:7%;
        width:12%;
    }

    .cierre{
        top:-93%;
        left:52%;
    }

    .login{
        font-size:11px;
        padding: 4px 6px;
        left: 41px;
    }

    .icoClase{
        margin-left: 83%;
        margin-top: 4%;
    } 
}

@media screen and (max-width:321px) and (max-height:481px) {
    .item{
        width: 96.5%;
        height:74%;
    }

    .cierre{
        top:-93%;
        left:52%;
    }

    .icoClase{
        margin-left: 83%;
        margin-top: 4%;
    }     
}

@media screen and (max-width:281px) and (max-height:654px) {
    .item{
        width: 99.5%;
        height:68%;
        margin-left: 2px;
    }

    .cabecera{
        font-size: 13px;
        width:90%;
        left:14%;
    }

    .pCabecera{
        font-size: 10px;
        left:30px;
    }

    .cierre{
        top:-93%;
        left:52%;
    }

    .icoClase{
        margin-left: 81%;
        margin-top: 4%;
    } 

    .logobig{
       /* top:80%;
        left:54%;*/
        width: 45%;
    }

    .logo__img{
        height:7%;
        width:12%;
    }

    .cierre{
        top:-92%;
        left:48%;
    }
    
    .login{
        font-size:11px;
        padding: 4px 6px;
        left: 41px;
    }

    .logo{
        width: 6%;
        height: 3%;
    }
}