/* landing b2s 1*/

.landing_back_school{
    width:100%;
    overflow:hidden;
    position:relative;
}

.landing_back_school a{
    text-decoration: none;
    display: block;
}
.landing_back_school img{
    width:100%;
}
.landing_back_school p{
    padding:25px;
    text-align:center;
}
.landing_back_school .item{
    display:grid;
    padding-top: 10px;
    padding-bottom: 10px;
}
.landing_back_school .item a{
    display: flex;
    flex-direction: column;
}
.landing_back_school .item a{
    display: flex;
    flex-direction: none;
}
.landing_back_school .marcas .item{
    display:grid;
    padding-top: 0px;
    padding-bottom: 0px;
}
.landing_back_school .marcas .item a{
    display: flex;
    flex-direction: row;
}
.landing_back_school .marcas .item a picture{
    align-self: center;
    /*margin-top: 20%;
    padding: 0px 5px;
    /*padding: calc(30% - 5px) 5px;*/
}
.landing_back_school .item a img{
    display:relative;
}
.landing_back_school .flex{
    display:flex;
    flex-direction:column;
}

.landing_back_school .header{
    flex-direction: row;
    display: flex;
    background-image: radial-gradient( #404040, #2e2e2e);
}
.landing_back_school h2{
    margin-bottom: 10%;
}

.landing_back_school .Logo-banner{
    width: 60%;
    margin-top: 5%;
}
.landing_back_school .img_clip_banner{
    width: 50%;               
}

.landing_back_school .img_marcadores2{
    margin-left:10%;
}
.landing_back_school .header div:nth-of-type(odd){ 
    width:25%;
    position:relative;
}
.landing_back_school .header #Marcadores1{ /*Marcadores 1*/
    transform: rotate(180deg);
    top:-20%;
    filter: hue-rotate(100deg);
    left:-80%;
    width: 60%;
}
.landing_back_school .header div:nth-of-type(2){ /*Logo Banner*/
    width:50%;
    text-align:center;
    position:relative;
}
.landing_back_school .header #post{
    position: absolute;
    top: calc(70% - 10px);
    width: 60%;
}
.landing_back_school .header #marcadores2{
    position: absolute;
    top: calc(60% - 10px);
    width: 60%;
}
.landing_back_school .header span{
    color:#d14b72;
}  
.landing_back_school .marcas{
    display:grid;
    grid-template-columns:repeat(11,1fr);
    grid-gap: 10px;
    width: 80%;
    margin-left: 10%;
    padding-bottom: 20px;
    align-content:center;
}
.landing_back_school .marcas img{
    filter: grayscale(100%);
}


.landing_back_school .Post{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    width: 80%;
    grid-gap: 20px;
    margin-left: 10%;
    padding-bottom: 20px;
    justify-items:center;
    
}
.landing_back_school .Post a{
    position:relative;
}
.landing_back_school .Post span{/*Titulo Post*/
    position: absolute;
    top: calc(50% - 10px);
    color: black;
    font-weight: bold;
    width: 100%;
    text-align: center;
}

.landing_back_school .productos{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    grid-template-rows:repeat(2,1fr);
    grid-gap: 30px;
    width: 80%;
    margin-left: 10%;
    padding-bottom: 20px;
}
.landing_back_school .item a >label{
    display: block;
    color: black;
    font-size: 14px;
    text-align: center;
    margin-bottom: 10px;
}
.landing_back_school .item picture{
    padding: 10px;
   
}

.landing_back_school .productos >img{
    width:100%;
    display:block;
}
.landing_back_school .Titulo{
    position:relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.landing_back_school .Titulo h3{
    text-align:center;
}
.landing_back_school .Titulo picture{                     
    position:absolute;
    width:20%;
    left:-20%;
}

.landing_back_school .productos > div:hover,
.landing_back_school .marcas > div:hover,
.landing_back_school .button:hover,
.landing_back_school .Post div:hover img{
    cursor: pointer;
    transition: transform .3s;
    transform: scale(1.05);
    /*box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);*/
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
    
}
.landing_back_school .Post div:hover img,
.landing_back_school .Post div:hover span{
    cursor: pointer;
    transition: transform .1s;
    transform: scale(1.1); 
    
}

.landing_back_school .banner{
    margin-top:5%;
}
.landing_back_school .banner >picture{                         
    position:absolute;
    /*left:80%;*/
    left:100%;
    transform: rotate(280deg);
    margin-top: -10%;
    width: 15%;
}
.landing_back_school .banner >div{
    width: 60%;
    margin: auto;
    display: flex;
    position: relative;
    
}
.landing_back_school .Prod_dest{
    width:50%;
    background-color: #e7e7e7;
    display: flex;
    flex-direction: column;
}
.landing_back_school .Prod_dest span{ /*Nombre del producto*/ 
text-align: center;
padding-top: 15px;
padding-bottom:15px;
font-weight: bold;
color:black;
}
.landing_back_school .Descrip_prod{
    width: 50%;
    background-image: radial-gradient( #404040, #2e2e2e);
    display: flex;
    flex-direction: column;
}
.landing_back_school .Descrip_prod p{
    font-size: 23px;
}
.landing_back_school .Descrip_prod>picture{
    width: 30%;
    align-self: center;
    /*margin-bottom:5%;*/
    /*margin-top: calc(30% - 20px);*/

}
.landing_back_school #publicidad2,
.landing_back_school #publicidad3,
.landing_back_school #publicidad4,
.landing_back_school #publicidad5,
.landing_back_school #publicidad6{
    display: flex;
}
.landing_back_school .footer{
    background-image: radial-gradient( #404040, #2e2e2e);
    margin-top:5%;
}
.landing_back_school .footer a{
    width: 40%;
    padding-top: 30px;
    padding-bottom:30px;
    text-align: center;
    margin: auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
}
.landing_back_school .centrar{
    align-self: center;
    width: 100%;
    text-align: center;
}
.landing_back_school .footer >a>span:nth-of-type(1){
    background-color: #5dbcd2;
    border-radius: 25px;
    display:block;
    color:black;
    font-weight:bold;
    padding: 5px;
}

.landing_back_school .button{
    padding: 5px;
    background-color: #e9408c;
    border-radius: 25px;
    width: 20%;
    color: white;
    font-weight: bold;
    font-family: arial;
    margin-top: 3%;
}
.landing_back_school .button2{
    padding: 5px;
    background-color: #5dbcd2;
    border-radius: 5px;
    width: 60%;
    color: white;
    font-weight: bold;
    font-family: arial;
    text-align:center;
    margin:auto;
    font-size:small;
}


.landing_back_school .footer img{
    width: 80%;
    margin: auto;
    display: block;
    margin: 5% auto;
}
.landing_back_school .letras_blancas{
    color:white;
}
.landing_back_school .animacion-marcadores1{
    position:relative;
    animation-name: animation_marcadores;
    animation-duration: 1s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
}
@keyframes animation_marcadores {             /*-----------------*/
    0%   { left:-150%; }
    100% { left:-10%; }
    /*0%   { left:-150%; }
    100% { left:-50%; }*/
}
.landing_back_school .animacion-banner1{
    position:relative;
    animation-name: animation;
    animation-duration: 1s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
}
@keyframes animation {
    0%   { left:-50%; }
    100% { left:15%; }
}
.animacion-banner2{
    position:relative;
    animation-name: animation2;
    animation-duration: 1s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
}
@keyframes animation2 {
    0%   { right:-50%; }
    100% { right:2%; }
}
.landing_back_school .animacion-logo{
    position:relative;
    animation-name: animation3;
    animation-duration: 1s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
}
@keyframes animation3 {
    0%   { top:-50%; }
    100% { top:-5%; }
}
.landing_back_school .animacion-lapiz{           
    animation-name: animation-lapiz;
    animation-duration: 2s;
    /*animation-delay: 0s;*/
    animation-fill-mode: forwards;
}

@keyframes animation-lapiz {
    0%   { left:-20%; }
    100% { left:-7%; }
}

.landing_back_school .animacion-marcador{                           
    position:relative;
    animation-name: animation-marcador2;
    animation-duration: 2s;
    /*animation-delay: 0s;*/
    animation-fill-mode: forwards;
    
}
@keyframes animation-marcador2 {
    0%   { left:100%; }
    100% { left:85%; }
}


@media only screen and (max-width: 600px) {
    .landing_back_school .marcas {
        grid-template-columns:repeat(3,1fr);
        grid-gap: 5px;
    }
    .landing_back_school .productos,
    .landing_back_school .Post {
        grid-template-columns:repeat(2,1fr);
        grid-gap: 5px;
    }
    .landing_back_school .post{
        grid-gap: 5px;
    }
    .landing_back_school .banner a{
        width:100%;
        flex-direction:column;
    }
    .landing_back_school .Prod_dest{
        width:80%;
        align-self:center;
    }
    .landing_back_school .Prod_dest span{
        text-align:center;
    }
    .landing_back_school .Descrip_prod{
        width:100%;
    }
    .landing_back_school .footer{
        margin-top:1%;
        
    }
    .landing_back_school .footer a{
        width:100%;
        box-sizing: border-box;
        
    }
    .landing_back_school .footer a span{
        width:80%;
        font-size: small;
    }
    .landing_back_school .Descrip_prod>picture{
        width: 20%;
        align-self: center;
        margin-bottom: 20px;
        margin-top: 0px;
    
    }
    .landing_back_school .banner >div{
        width:80%;
        flex-direction: column
    }
    .landing_back_school .letras_blancas, 
    .landing_back_school .button2, 
    .landing_back_school .button{
        font-size:small;
    }
    .landing_back_school .Descrip_prod p{
       font-size: 12px;
    }
    
}
@media (min-width:601px) and ( max-width: 1024px) {
    .landing_back_school .marcas {
        grid-template-columns:repeat(4,1fr);
        grid-gap: 5px;
    }
    .landing_back_school .productos {
        grid-template-columns:repeat(4,1fr);
        grid-gap: 5px;
    }
   
    .landing_back_school .button, 
    .landing_back_school .button2
    .landing_back_school #nombre_producto{
        font-size:smaller;
    }
    .landing_back_school .footer{
        margin-top:1%;
        
    }
    .landing_back_school .letras_blancas    {
        font-size: 15px;
    }
    .landing_back_school .footer a{
        width:100%;
        box-sizing: border-box;
        
    }
    .landing_back_school .Descrip_prod > picture
    {
        margin-top:0px;
    }
    .landing_back_school .banner > a
    {
        width:80%;
    }
    .landing_back_school .footer a span{
        width:80%;
        font-size: small;
    }
    .landing_back_school .button2{
        width:80%;
    }
    .landing_back_school .Post{
        font-size:10px;
    }
    .landing_back_school .banner > div{
        width: 80%;
    }
    .landing_back_school .footer a picture{
        width: 80%;
        align-self: center;
    }
    .button{
        padding: 5px;
        background-color: #5dbcd2;
        border-radius: 5px;
        width: 60%;
        color: white;
        font-weight: bold;
        font-family: arial;
        text-align: center;
        margin: auto;
        font-size: small;
    }
       
}

/* landing b2s 2*/


.landing_bts{
    width:100%;
    overflow:hidden;
    position:relative;
    font-family:arial;
    color:black;
}
.landing_bts img{
    width:100%;
}
.landing_bts a{
    text-decoration: none;
    display: block;
}
.landing_bts p,
.landing_bts h4,
.landing_bts h1{
    text-align:center;
    color:#000;
}
.landing_bts .flex{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.landing_bts .button{
    padding: 5px;
    background-color: #5dbcd2;
    border-radius: 5px;
    width: 60%;
    color: white;
    font-weight: bold;
    font-family: arial;
    text-align:center;
    margin:auto;
    font-size:small;
}
.landing_bts >.banner1 a{
    display:flex

}
.landing_bts >.banner1 a picture:nth-of-type(1){
    width:100%;

}
.landing_bts .Marcador{
    position: absolute;
    width:20%;
    margin-top:27%;
    right:-100%;
    
}
.landing_bts .banner1 #hoja_banner{        /*Imagen hoja  */
    position:absolute;
    margin-top:20%;
    right:-100%;
    width:55%;

}

.landing_bts .container_post{
    display: flex;
    flex-direction: column;
    margin-top:5%;
}
.landing_bts .container_post> picture:nth-of-type(1){ /*Imagen Clips*/
    width:15%;
    position:absolute;
    left:-40%;
    /*transform: rotateY(150deg);*/
    /*transform: rotate(280deg);*/
}

.landing_bts .item1{grid-area:post1;}
.landing_bts .item2{grid-area:post2;}
.landing_bts .item3{grid-area:post3;}
.landing_bts .item4{grid-area:post4;}
.landing_bts .item5{grid-area:post5;}

.landing_bts .Post{
    display:grid;
    grid-template: repeat(2,1fr) / repeat(6,1fr);
    grid-template-areas:
    'post1 post1 post2 post2 post3 post3' 
    '. post4 post4 post5 post5 .';
    width: 40%;
    grid-gap: 20px;
    padding:10px;
    margin-left: 10%;
    padding-bottom: 20px;
    margin:auto;
    position:relative;
   
}

.landing_bts .Post a{
    position:relative;
}
.landing_bts .Post span{                         /*Titulo Post*/
    position: absolute;
    top: calc(50% - 10px);
    color: black;
    font-weight: bold;
    width: 100%;
    text-align: center;
    display:block;
}
.landing_bts .Post div:hover img,
.landing_bts .Post div:hover span{
    cursor: pointer;
    transition: transform .1s;
    transform: scale(1.1); 
}
.landing_bts .Post div:hover img
{
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}
.landing_bts .item{
    padding-top: 10px;
    padding-bottom: 10px;
}
.landing_bts .productos .item > a{
    padding: 15px;
}

.landing_bts .item a img{
    display:relative;
}
.landing_bts .productos{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-gap: 30px;
    width: 80%;
    margin-left: 10%;
    padding-bottom: 20px;

}
.landing_b2s .item picture{
    padding: 10px;
}

.landing_bts .productos >img{
    width:100%;
    display:block;
}
.landing_bts .productos > div:hover{
    cursor: pointer;
    transition: transform .3s;
    transform: scale(1.05);
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}
.landing_bts .item a >label{
    display: block;
    color: black;
    font-size: smaller;
    text-align: center;
    margin-bottom: 10px;
}
.landing_bts .banner2{
    margin-top:30px;
}
.landing_bts .banner2 a{
    width: 50%;
    margin: auto;
    display: flex;
    position: relative;
}
.landing_bts .banner2 a div:nth-of-type(1){/*imagen del producto banner2*/
    width: 50%;
    background-color: #e7e7e7;
    display: flex;
    flex-direction: column;
}
.landing_bts .banner2 a div:nth-of-type(2){ /*Descripcion del producto banner2*/
    width: 50%;
    text-align: center;
    background-image: radial-gradient( #3d594a, #4c645c);
    display: flex;
    flex-direction: column;
}
.landing_bts .banner2 h1{
    color:#feec69;
    margin-top:25px;
}
.landing_bts .banner2 p{
    color:white;
    padding: 0px 30px 30px 30px;
    font-size: large;
    
}
.landing_bts .foot{
    display:flex;
    flex-direction:column;
    margin-top: 20px;
    margin-bottom: 20px
}
.landing_bts .foot .frase{
    position:relative;
    width:60%;

}
.landing_bts .foot picture:nth-of-type(2){ /*img colores footer*/
    position: absolute;
    width: 30%;
    right:-100%;
    margin-top:-15%;
    transform: rotate(-30deg);
}
.landing_bts .animacion_marcador{
    /*position:relative;*/
    animation-name: animation_marcador;
    animation-duration: 1s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
}
@keyframes animation_marcador {
    0%   { left:-50%; }
    100% { left:-7%; }
}
.landing_bts .animacion_clips{
    animation-name: animation_clips;
    animation-duration: 1s;
    animation-delay: 0.2s;
    animation-fill-mode: forwards;
}
@keyframes animation_clips {
    0%   { left:-50%; }
    100% { left:2%; }
}
.landing_bts .animacion_colores{
    position:absolute;
    animation-name: animation_colores;
    animation-duration: 1s;
    animation-delay: 0.2s;
    animation-fill-mode:forwards;
}

@keyframes animation_colores {
    0%   { right:-100%; }
    100% { right:-15%; }
}
.landing_bts .animacion_hoja{
    position:relative;
    animation-name: animation_hoja;
    animation-duration: 1s;
    animation-delay: 0.2s;
    animation-fill-mode:forwards;
}

@keyframes animation_hoja {
    0%   { right:-100%; }
    100% { right:-22%; }
}
@media only screen and (max-width: 600px) {
   
    .landing_bts .Post{
        display:grid;
        grid-template: repeat(2,1fr) / repeat(2,1fr);
        grid-template-areas:
        'post1 post2' 
        'post3 post4' 
        'post5 .';
        width: 40%;
        grid-gap: 20px;
        padding:10px;
        margin-left: 10%;
        padding-bottom: 20px;
        margin:auto;
        position:relative;
   
    }
    .landing_bts span{
        font-size:smaller;
    }
    .landing_back_scholl .productos label{
        font-size:12px;
    }
    .landing_bts .productos{
        grid-template-columns:repeat(2,1fr);
        grid-gap: 5%;
        width: 80%;
        margin-left: 10%;
        padding-bottom: 20px;
        box-sizing:border-box;

    }
   

    .landing_bts .banner2{
        margin-top:10%;
    }
    .landing_bts .banner2 a{
        width:80%;
        margin:auto;
        display:flex;
        flex-direction:column;
    }
    
    .landing_bts .banner2 a div:nth-of-type(1){
        width:100%;
    }
    .landing_bts .banner2 a div:nth-of-type(2){
        width:100%;
    }
    .landing_bts .button{
        font-size:small;
        width:60%;
    }
    .landing_bts .Titulo{
        margin-top: 30px;
        font-size: small;
    }
}

@media only screen and ( max-width: 800px) {
    .landing_bts .button{
        width:80%;
    }
    .landing_bts .Post{
        font-size:small;
        width: 50%;
        grid-gap: 5%;
    }
    .landing_bts .banner2 a{
        width:80%;
    }
    
}