a {
    
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-color3);
    
}

.texto_tarjeta h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.texto_tarjeta div {
    
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #463C5F;
    
}
/*TARJETA*/
.tarjeta{
    width: 100%; 
    height: 75vh;
    background: #fff; 
    align-items: center;
    border-radius: 10px 10px 0px 0px; 
    box-shadow: 2px 7px 13px #00000036; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px;
    overflow: hidden;
    display: flex;
justify-content: center;
    
}

.imagen_tarjeta{
    width: 100%; 
    height: 80%;
    background-position: center;
    background-size: cover;
    background-image: url(look/modificables/portada_02.png); 
    border-radius: 10px 10px 0px 0px; 
    transition:.5s;
    padding: 10px;
    
    
}

.texto_tarjeta{
    width: 100%; 
    height:20%; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px;
    background: #fff;
    
}

.texto_tarjeta_hover{
    color:#fff;
    text-align: left;
    font-size:12px;
    line-height: 18px;
    
    
}

.tarjeta:hover{
    box-shadow: 6px 10px 20px #00000036;
    transition: 3s;
    
}


.card {
    width: 100; height: 40vh;
    background: #fff; 
    align-items: center;
    border-radius: 10px 10px 0px 0px; 
    box-shadow: 2px 7px 13px #00000036; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px;
    
}

.card_image{width: 100%; height: 70%; background: #000;
border-radius: 10px 10px 0px 0px;
}

.card_text{
    width: 100%; height: 30%; background: #455212;
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px;
    
}

.rollover{
margin: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.rollover .box-photo{
    position: relative;
display: block;
width: 100%;
height: 250px;
z-index: 1;
transition: all .3s ease-in-out;
transform: translateZ(0);
    background-image: url("look/modificables/portada_02.png");
    background-size: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
    z-index: 1;
}
/*
.rollover .box-photo:hover{
     webkit-transform: scale(1.04);
-moz-transform: scale(1.04);
-o-transform: scale(1.04);
-ms-transform: scale(1.04);
transform: scale(1.04);
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
    transition: 5s;
    
}
 */

.rollover .box-photo img{
    position: relative;
    display: block;
    width: 100%;
    height: 250px;
    z-index: 1;
    transition: all .3s ease-in-out;
    transform: translateZ(0);
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 3s;
    
    
}

.text_box_photo {
    position: relative;
    bottom: -100%;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.56);
    padding: 10px 20px;
    z-index: 2;
    
}

.text_box_photo p {
    font-size: 10px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    
}

.text_box_photo h2 {
    font-size: 12px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
}

.rollover:hover .text_box_photo{
    bottom: 80%;
    transition: 1.5s;
    
}

.rollover .box-photo img:hover{
    transform: scale(1.2);
    
}



/*MEDIA CQUERY CELULARES*/
@media (max-width: 600px) {
      .rollover:hover .text_box_photo{
    bottom: 100%;
    transition: 1.5s;
    
}
    
    .text_box_photo p {
    font-size: 9px;
        line-height: 10px;
    
    }

.text_box_photo h2 {
    font-size: 10px;
    line-height: 11px;
}
    
    
    
}


/*BOTON*/
.dropdownbtn {
    background: #463C5F 0% 0% no-repeat padding-box;
    border: none;
    color:#fff;
    width: 100px;
    height: 35px; 
    padding: auto 20px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 12px;
}

@media (max-width: 600px) {
      
    .dropdownbtn {
    margin-left: 10px;
    width: 75px;
    height: 25px; 
    padding: auto 20px;
    border-radius: 10px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #fff;
    font-size: 12px;
    
}

.dropdownlist-content
{

    position:static !important; 


}

.dropdownlist-content a {
    color: #000000;
    margin-top: 5px;
    
    }
    
}

.dropdownlist-content {
display: none;
position:absolute;
background: #fff;
min-width: 120px;
z-index: 2;
}
.dropdownlist-content a {
color: #000000;
padding: 0px 18px;
display: block;
text-decoration: none !important;
font-family: 'Poppins', sans-serif;
}
.dropdownlist-content a:hover {background-color: #dedede; transition: 1s;}
.dropdowndemo:hover .dropdownlist-content {display: block;}
.dropdowndemo:hover .dropdownbtn {background-color: #605380;transition: 1s;}

/**/

.




/**/

.fila_tarjeta {
height: 50%;

}


.col_tarjeta {

    height: 100%;
}

.box_item {
    height: 100%;
    border-radius: 10px;
    
}

.box_item:hover {
    box-shadow: 2px 7px 13px #00000036;
    border-radius: 10px;
    transition: 2s;
    
}

.rollover{
        height: 70%;
        margin: 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .rollover .box-photo{
        position: relative;
    display: block;
    width: 100%;
    height: 250px;
    z-index: 1;
    transition: all .3s ease-in-out;
    transform: translateZ(0);
        background-image: url("look/modificables/portada_02.png");
        background-size: cover;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        overflow: hidden;
        z-index: 1;
    }


    .box_info {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        height: 30%;
        background: #fff;
    }
    
    .title_box_info{
        
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        color:#121212;
        font-size: 29px;
        color: var(--text-color2);
        
    }

    .content {
        height: 30%;
        padding: 0;
        
    }
    
    .content .row a p{
        margin-bottom: 0;
    }


/*carusell*/
    .wrapper {
height: 100%;
/*border: 1px solid #ddd;*/
display: flex;
/*overflow-x:auto;*/
align-items: center;

}



.wrapper::-webkit-scrollbar{
    width: 0;
}

.wrapper .item{ min-width: 25%; /*line-height: 110px; */text-align: center; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px;
}



.item {
    width: 90%;
    height: 80%;
}


.box_item2 {
    margin: auto;
    width: 90%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 0 1px 0 rgba(0,0,0,.15);
}

.box_item2:hover {
    box-shadow: 2px 7px 13px #00000036;
    border-radius: 10px;
    transition: 2s;
    
}

.rollover2{
        height: 80%;
        margin: 0;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        overflow: hidden;
    }
    .box-photo2{
        height: 100%;
    }
    .rollover2 .box-photo2 img{
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        z-index: 1;
        transition: all .3s ease-in-out;
        transform: translateZ(0);
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 3s;
        
        
    }


    .box_info2 {
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        height: 20%;
    }
    
    .title_box_info2{
        
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 29px;
        
    }

    .content2 {
        height: 30%;
        padding: 0;
        
    }
    
    .content2 .row a p{
        margin-bottom: 0;
        
        
    }

    .content2{
        height: 100%;
    }
    .row_modulo {
        height: 50%;
    }
    .row_tra {
        height: 50%;
        padding-bottom: 0;
        justify-content: space-around;
    }

    /*AQUI SE CAMBIA EL COLOR DE "REPASO" Y ACTIVIDAD*/
    .content2 .row a p {
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        text-decoration: none;
    }

    .content2 .row a {
        text-decoration: none;
        
    }

    /*AQUI SE CAMBIA EL COLOR DEL BOTON DE LOS MODULOS*/
    .btn {
        font-family: 'Poppins', sans-serif !important;
        font-weight: 500 !important;
        border:none !important;
        font-size: 13px !important;
        margin-left: 8px;
        }
        
       

    



    .text_box_photo2 {
        position: relative;
        bottom: -100%;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.56);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(16.2px);
        -webkit-backdrop-filter: blur(16.2px);
        border: 1px solid rgba(219, 219, 219, 0.04);
        padding: 10px 20px;
        z-index: 2;
        
    }
    
    .text_box_photo2 p {
        text-align: left;
        color: #fff;
        font-family: 'Poppins', sans-serif;
        font-weight: 400;
        font-size:14px;
        
    }
    
    .text_box_photo2 h2 {
        text-transform:uppercase;
        text-align: left;
        color: #fff;
        font-family: 'Poppins', sans-serif;
        font-weight: 600;
        font-size: 20px;
    }
    
    .rollover2:hover .text_box_photo2{
        bottom: 90%;
        transition: 1.5s;
        
    }
    
    .rollover2 .box-photo2 img:hover{
        transform: scale(1.2);
        
    }


    /*MEDIA CQUERY CELULARES*/
@media (max-width: 600px) {
    .rollover2:hover .text_box_photo2{
  bottom: 100%;
  transition: 1.5s;
  
}
  
  .text_box_photo2 p {
  font-size: 1rem;
line-height: 17px;
  
  }

.text_box_photo2 h2 {
padding-top: 10px;
  font-size: 1.1rem;
  line-height: 11px;

}

.item {
    width: 90%;
}


.box_item2 {
  
    width: 90%;
    
}
  
.wrapper .item{
    min-width: 92% !important;
  
    }

    .wrapper {
        padding:0 ;
        overflow-x:auto;
        
        }
  
  
}


/*CELULARES EN MODO HORIZONTAL*/
@media only screen and (max-height: 575.98px) and (orientation: landscape) {
    .rollover2 {
        height: 70%;
        
    }
    .box_info2{
        height: 30%;
        
    }

    .text_box_photo2 p {
        font-size: .5rem;
      line-height: .6rem;
        
        }
      
      .text_box_photo2 h2 {
      padding-top: 5px;
        font-size: .6rem;
        line-height: .6rem;
      
      }

      .wrapper {
        padding:0 ;
        overflow-x:auto;
        
        }
    }

    @media only screen and (max-height: 390px) and (min-width:700px) and (orientation: landscape) {
        .wrapper .item{
            min-width:45% !important;
          
            }
        
            .wrapper {
                padding:0 ;
                overflow-x:auto;
                
                }
          
          
    
    
       
        }

       

   

/*TABLETS*/
@media screen and (max-width: 992px)  { 
    
    .wrapper .item{
        min-width: 45%;
    
        }
    
    .wrapper .item{
        max-width: 100%;
        }

        

}


@media only screen and (min-width:601px) and (max-width:992px) {
            
    .wrapper .item{
        min-width:80% !important;
      
        }
    
        .wrapper {
            padding:0 ;
            overflow-x:auto;
            
            }
}


@media only screen and (min-height : 768px) and (max-width : 1024px) and (orientation : landscape) {
    

    .btn {
        width: 80px;
        font-size: 12px !important;
        }

        .text_box_photo2 p {
            font-size: .7rem;
          line-height: .8rem;
            
            }
          
          .text_box_photo2 h2 {
          padding-top: 5px;
            font-size: .9rem;
            line-height: 1rem;
          
          }
          .item {
              height: 60%;
          }

          .rollover2:hover .text_box_photo2{
            bottom: 100%;
            transition: 1.5s;
            
          }

          .row_tra a p{
              font-size: 10px;
          }
        }



        @media only screen and (min-width:1669px) {
            
            .wrapper {
                padding: 50px;
            }
        }