@font-face {
    font-family: 'Khand-Medium';
    src: url(./fonts/Khand-Medium.eot);
    src: url(./fonts/Khand-Medium.eot?#iefix) format('embedded-opentype'),
         url(./fonts/Khand-Medium.ttf) format('truetype'),
         url(./fonts/Khand-Medium.woff) format('woff'),
         url(./fonts/Khand-Medium.woff2) format('woff2');
  }


@font-face {
  font-family: 'Khand-Bold';
  src: url(./fonts/Khand-Bold.eot);
  src: url(./fonts/Khand-Bold.eot?#iefix) format('embedded-opentype'),
       url(./fonts/Khand-Bold.ttf) format('truetype'),
       url(./fonts/Khand-Bold.woff) format('woff'),
       url(./fonts/Khand-Bold.woff2) format('woff2');
}

@font-face {
    font-family: 'BaksoSapi';
    src: url(./fonts/BaksoSapi.eot);
    src: url(./fonts/BaksoSapi.eot?#iefix) format('embedded-opentype'),
         url(./fonts/BaksoSapi.otf) format('otf'),
         url(./fonts/BaksoSapi.ttf) format('truetype'),
         url(./fonts/BaksoSapi.woff) format('woff'),
         url(./fonts/BaksoSapi.woff2) format('woff2');
  }
html {padding:0;}
  body{background-color:black; padding:0px; font-family: Khand-Medium; margin:0px; padding:0;}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 0em;
    margin-block-end: 0em;
    padding-inline-start: 0px;
    unicode-bidi: isolate;
}





header {background-color: black;
  margin:0 auto;
  width:100%; margin:0;
  padding-top:1rem;
  padding-bottom:4rem;
  display:flex;
  align-items: center;
 
  /*position: fixed;*/
  top: 0;

margin:0px}

.content {
    padding: 0px;/* Asegura que el contenido no esté oculto detrás del encabezado */
}

footer{margin:0; padding:0}


nav{width:80%; display:flex; align-items:center; position:relative; max-width: 1200px; margin:0 auto}

.logo {width:33%; text-align: left;  position:relative;  float:left; text-align:center; margin:0 auto;}

.logo img{width:50%; }



#art, #clickme, #brand, #ads, #web, #elearning, #illustration  {
  scroll-margin-top: 140px;
}











.content {background-color:black}
main {margin:0rem; padding: 0%;}

.bgcontainer{width:100%; height:auto; background-color: black}
.container{width:auto; margin:0 auto; display:flex; align-items: center; position:relative; max-width: 1200px;padding-bottom: 2rem;  background-color: black}



.hero-video {
    flex: 1;

    max-width: 600px;
    aspect-ratio: 1 / 1;

    overflow: hidden;
    border-radius: 0px;
}

.hero-video iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.textomain{
  width:40%;
  margin-left:5.5rem;
  margin-top:0px;
  position:relative;
  
 
  }


.horse {width:10%; margin:0 auto; position:relative;}
.horse img {width:100%}




.maintitle{font-size: 6rem;
  line-height: 4.5rem;
  font-family: Khand-medium;
  color:#bbd631;
  margin-left:0rem;
  text-align: center;
    background: linear-gradient(90deg, #bbd631, #6fbe44);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-top: 1rem;
 
 /*border:3px solid white;
  box-shadow:5px 5px 5px #d4d4f4;
  background: linear-gradient(to right,#bbd631,#b2d235);
 
  border-radius: 0px;
  width:90%;
  padding-top: 10px;*/
   margin:0 auto;
  }
.maintitle b {color:#ccc;}
.subtitle {font-size: 1.3rem; line-height: 1.5rem; color:#bebebe;margin-top: 0.7rem; width:80%;text-align: center; margin:0 auto; }
.acento {color:white}
.maindescription {font-size: 1.4rem; line-height: 1.5rem;  margin-top: 0.7rem;color:black; width:80%}



.bulletss {width:70%; color:#ccc; margin-top:0.5rem;  font-size:1.5rem; line-height:2.2rem; letter-spacing: 1px; overflow-wrap: break-word; word-wrap: break-word;text-align: center; margin:0 auto;}
.bulletss b{color:#bbd631;}








/*reel section*/
.bgreel {width:100%; background-color: black; padding-top:4rem; padding-bottom:4rem;color:white}
.reelsection {width:60%; display:flex; align-items: center; margin:0 auto}
.reeltitle {font-size:3rem; text-align:center; font-family:Khand-Bold; line-height: 2rem;  }
.reeltextfull {width:35%; margin-left:1.5rem}

.contvideo{width:50%;margin-top:1.5rem;}
.watchnow { display:flex; font-size: 1.5rem; line-height:1rem; align-items: center; margin-top:0rem; font-family:baksosapi;}
.watchnow .contflecha {transform: rotate(180deg);}
.reeldescription {width:100%; font-family: Arial, Helvetica, sans-serif;  font-size: 1.1rem;}









/*more work*/

.bgmorework {background-color: #000; height:auto; margin-top:1.5rem; padding-bottom: 1.5rem; font-family: Khand-Bold !important; position:relative}

.morework-container ul {display:flex; align-items: center; margin:0 auto; align-items: center; width:100%;  height:auto; flex-wrap: wrap;  gap: 0px; justify-content: center;}
.moreworkflecha{padding-left:0.5rem;}
.moreworktitle{display:flex; font-family:BaksoSapi; color:white;font-size: 1.4rem;
  line-height:1.5rem; align-items: center; padding-top: 2rem; padding-bottom: 2rem; margin-left:0rem; width:auto;}

.bots-morework a{font-family: Khand-Medium !important; font-size: 1.4rem;}
ul li {width:Auto; list-style: none; padding: 0.5rem; color:black}
ul li a { font-weight:200;  background-color:#2c2c2c; text-decoration: none; color: #ccc; border-radius:5px; font-size: 0.9rem; padding-left: 1rem; padding-right: 1rem; padding-top: 0.4rem; padding-bottom: 0.4rem;  }

.bots-morework li :hover {background-color: #bbd631; color: black}




footer {background-color: black; }

.thisistheend{display:flex; text-align: center; align-items: center;width:19rem;margin: 0 auto; padding: 1.5rem;}
.cont-redes{display:flex; align-items: center;   padding:0rem; width:30%; position:relative; }
.cont-redes a {padding:0.2rem; margin:0 auto; }
.elemail{color:#999; font-size: 1.4rem; margin:0 auto; width:70%;position:relative; padding-left:1.3rem;}

/*branding*/



.brandingheader {width:100%; margin:0 auto; font-size:3rem ; line-height: 3rem ;text-align: center;font-family: Khand-Bold;margin-bottom:0rem} 
.brandingheader b {color:#bbd631}


.brandingsub {width:100%; margin:0 auto; font-size:1.2rem ; text-align: center;font-family: Khand-Medium;margin-bottom:1rem; line-height: 1.3rem;} 

.elearningsub {width:100%; margin:0 auto; font-size:1.2rem ; text-align: center;font-family: Khand-Medium; margin-bottom:1rem; line-height: 1.3rem;} 

.contbrandingdesktop{ width:100%; padding-top: 2rem; padding-bottom:2rem; color: black}
.contilusdesktop { width:100%; padding-top: 2rem; padding-bottom:2rem; color: black}
.contweb{background-color: black; width:100%; padding-top: 2rem; padding-bottom:2rem; color: white; height:600px;}
.contelearning{background-color: black; width:100%; padding-top: 2rem; padding-bottom:2rem; color: white; height:750px;}

/*elearning*/



.elearningheader {width:100%; margin:0 auto; font-size:3rem ; line-height: 3rem ;text-align: center;font-family: Khand-Bold;margin-bottom:0rem} 


.elearningsub {width:100%; margin:0 auto; font-size:1.2rem ; text-align: center;font-family: Khand-Medium;margin-bottom:1rem} 







  .slider {
    position: relative;
    width: 100%;
    max-width: 1200px;;
    overflow: hidden;
    margin:0 auto;
    
  }

  .slides {
    display: flex;
    transition: transform 0.5s;
    padding: 0;
    margin: 0;
    list-style-type: none;

  }

  .slide {
    flex: 0 0 100%;
    display:flex;
    align-items: center;
    
    padding:0;
   
  
  }

  .contweb .slide {background-color: #131313 !important; padding-top:20px; padding-bottom: 20px; padding-left: 20px;}
  .contelearning .slide {padding-top:20px; padding-bottom: 20px; }
 
.slide .imgbrandingdesktop
{width:60%;
  position:relative;
  margin-left:10px;
  margin-top:10px;
}

.slide .imgelearningdesktop
{width:60%;
  position:relative;
  margin-left:10px;
  margin-top:0px;

}

.imgdesktop1{ box-shadow: 0px 0px 6px rgba(19, 1, 70, 0.2);}
.imgelearning img {width:100%}



.slide .textcontainerbranding{
  width:40%;
  position:relative;
margin-left:3%}

.slide .textcontainerelearning{
  width:40%;
  position:relative;
margin-left:3%;
}

.brandingtitle{font-size: 5rem; line-height:4.5rem ; color:black}
.brandingdescription{font-family: Arial, Helvetica, sans-serif; width:85%; color:black}

.webtitle{font-size: 5rem; line-height:4.5rem ; color:white}
.webdescription{font-family: Arial, Helvetica, sans-serif; width:85%; color:white }

.elearningtitle{font-size: 5rem; line-height:4.5rem ; color:white}
.elearningdescription{font-family: Arial, Helvetica, sans-serif; width:85%; color:white }

.slide .imgmobile{display:none; width:100%; height:auto; }


  .slide img {
    width: 100%;
    height: auto;
  }

  .controls {
    position: relative;
    
   
   margin:0 auto;
 
     margin-top:1.5rem;
     width:45%;
     text-align: center;
     
  }

  .espacio{width:80%; display:none}

  .controlsweb {
      position: relative;
    
    
   margin:0 auto;
   margin-top:1.5rem;
    width:45%;
     text-align: center;
    
  
  }

    .controlsad {
       
      position: relative;
    
    
   margin:0 auto;
   margin-top:1.5rem;
     width:45%;
     text-align: center;
     
  
  }

     .controlselearning {
      position: relative;
    
    
   margin:0 auto;
   margin-top:1.5rem;
     width:45%;
     text-align: center;
    
  
  
  }

  button {
    background-color: #bbd631  ;
    border-radius: 5px;
    border:2px solid white;
    color: black;
    padding: 10px 20px;
    margin: 0 5px;
    border: none;
    cursor: pointer;
    font-family: Khand-Medium;
    font-size: 1.2rem;
  }

  button:hover {
    background-color: black;
    color:  #bbd631;
  }

   .controlsad button:hover {
    background-color: rgb(110, 110, 110);
    color: white;
  }

     .controlselearning button:hover {
    background-color: rgb(110, 110, 110);
    color: white;
  }


.espaciadorhz {height:3.5rem}

/*ads*/
.contad{background-color: black; width:100%; padding-top: 2rem; padding-bottom:2rem; color: white; height:600px;}
.contad .slide { background-color: transparent !important;}

.slide .imgaddesktop
{width:100%;
  position:relative;
margin:0 auto;
  margin-top:10px;
}



.imgad {margin:0 auto}

/*iframes*/
.webok {margin-top:2rem; height:630px; background-color: #000;}
iframe.brandingok {height:600px; padding-bottom:2rem; background-color:white}

.elearningok {height:660px; padding-bottom:2rem; background-color: #000;}

.goup{width:100%; text-align: center;padding-top:2rem; padding-bottom:2rem;margin-bottom:-1rem;background-color:black; display:block; margin-top:-1rem}
.goup a{width:10%; margin:0 auto; font-size:2rem; color:white; text-decoration: none; height:auto;  padding:0; margin:0}
.goup img{}
.goup p {padding:0; margin-top:-1.2rem; color:#999999}
.goup a:hover{text-decoration: underline; color:#999999}

/*nerd*/
.nerdbg{background-color: white ; padding-top:2rem; padding-bottom:3rem; display:block }
.nerd {width:65%; margin:0 auto; display:flex; align-items:center}
.nerdvideocont{width:60%;   aspect-ratio: 16 / 9;
  overflow: hidden;}
.nerd iframe {  width: 100%;
  height: 100%;
  display: block;
  border: 0;}
.nerdtextcont{width:40%;position:relative;
margin-left:3%}
.nerdtitle{font-size: 5rem; line-height:4.5rem ; color:black; font-family:Khand-Medium}
.nerddescription{font-family: Arial, Helvetica, sans-serif; width:85%; color:black; line-height: normal;}

/*clickme*/
.clickmebg{background-color: black ; padding-top:2rem; padding-bottom:3rem; display:block }
.clickme {width:65%; margin:0 auto; display:flex; align-items:center}
.clickmevideocont{width:60%;   aspect-ratio: 16 / 9;
  overflow: hidden;}
.clickme iframe { width: 100%;
  height: 100%;
  display: block;
  border: 0;}
.clickmetextcont{width:40%;position:relative;
margin-left:3%}
.clickmetitle{font-size: 5rem; line-height:4.5rem ; color:white; font-family:Khand-Medium}
.clickmedescription{font-family: Arial, Helvetica, sans-serif; width:85%; color:white}

/*responsive*/


@media (max-width: 1023px) {


body{padding:0px; margin:0px}

header{margin:0; padding-left:0; padding-top:25px;  padding-bottom:1rem;}
nav{width:100%; display:flex; align-items:center; position:relative; max-width: 1200px; margin:0 auto; margin-left:0}
 .logo {width:50%;text-align:center; margin:0 auto;}


 
  .logo img {width:100%; }
 
 


.hero-video {width:95%; margin:0 auto; margin-top:2rem;}
 

  

  .content {
    padding-top: 0; /* Asegura que el contenido no esté oculto detrás del encabezado */
}







  .container{display:block; text-align: center; width:100%; margin-top:0rem}
  .textomain{width:85%; margin:0 auto; margin-top:30px;}
  .espaciadormain2 {display:block}
  .contvideo{width:100%; margin-top: 1.5rem;}
  
  .maintitle{font-size: 3.2rem; line-height: 3.2rem; }
  .subtitle {font-size: 1.4rem; line-height: 1.6rem; margin-top: 0rem; margin:0 auto; width:100%; margin-top:0.4rem}
  .maindescription {font-size: 1.4rem; line-height: 1.5rem;  margin-top: 0.7rem;color:#444; width:100%}

  .bulletss {width:100%;  margin-top:0.5rem; font-size:1.4rem; line-height:2.2rem; letter-spacing: 1px; overflow-wrap: break-word; word-wrap: break-word; text-align:center; }
  .bulletss b{}


.bgmorework {}

 .morework-container ul {display:flex; width:85%; flex-wrap: wrap;  gap: 18px; justify-content: center; }
 .moreworktext{margin-top: 0rem;}
 .bots-morework {width:95%}

  
  .watchnow {color:black; display:block; font-size: 1.5rem; line-height:1.5rem; align-items: center; color: #000000; margin-top:2rem; font-family:baksosapi; width:50%; margin:0 auto}
  .moreworkflecha{transform: rotate(90deg); margin-top:1rem}

 

.moreworktitle{text-align: center;width:33%; margin:0 auto; display:block}
 
 
    




    

    .thisistheend{display:block; text-align: center; align-items: center; width:90%;margin: 0 auto; padding: 1.5rem;}
.cont-redes{display:flex; align-items: center;   padding:0rem; width:30%; position:relative; margin:0 auto}
.cont-redes a {padding:0.2rem; margin:0 auto; }
.elemail{color:#999; font-size: 1.4rem; margin:0 auto; width:70%;position:relative;text-align: center; padding-left: 0rem; }




/*nerd responsive*/
.nerdbg{background-color: white ; padding-top:2rem; padding-bottom:3rem}
.nerd {width:95%; margin:0 auto; display:block; align-items:center}
.nerdvideocont{width:100%; }
.nerd iframe {width:100%}
.nerdtextcont{width:100%;position:relative; margin:0 auto;}
.nerdtitle{font-size: 2rem; font-weight:bold; line-height:2rem; margin-top: 1rem;}
.nerddescription{font-family: Arial, Helvetica, sans-serif; width:100%; margin:0 auto; margin-top:0.5rem; position:relative; text-align: left;}

/*clickme responsive*/
.clickmebg{padding-top:2rem; padding-bottom:2rem; height:600px}
.clickme {width:95%; margin:0 auto; display:block; align-items:center}
.clickmevideocont{width:100%; }
.clickme iframe {width:100%}
.clickmetextcont{width:100%;position:relative; margin:0 auto;}
.clickmetitle{font-size: 2rem; font-weight:bold; line-height:2rem; margin-top: 1rem;}
.clickmedescription{font-family: Arial, Helvetica, sans-serif; width:100%; margin:0 auto; margin-top:0.5rem; position:relative}






/*responsive branding*/
#brand  {height:1300px}
.brandingok {padding-bottom:0rem; }
.contbrandingdesktop{ width:100%; padding-top: 2rem; padding-bottom:8rem;}


.contelearning{width:100%; padding-top: 2rem; padding-bottom:8rem;}

.brandingheader{font-size: 2rem;}
.brandingtitle{display:none}

.elearningheader{font-size: 2rem;}
.elearningtitle{font-size: 2rem;}




.imgdesktop{display:none}





  .slider {
    position: relative;
    width: 90%;
    max-width: 1200px;;
    overflow: hidden;
    margin:0 auto;
   
   
    
  }

  .slides {
    display: flex;
    transition: transform 0.5s;
    padding: 0;
    margin: 0;
    list-style-type: none;
   
  }

  .slide {
    flex: 0 0 100%;
    display:block;
    align-items: center;
    height:auto;
    padding:0;
    margin:0;
 
  
  }

.slide .imgbrandingdesktop
{width:90%;
  position:relative
}

.slide .imgaddesktop{
  width:90%;
  position:relative;
}

.slide .imgelearningdesktop{width:90%;
  position:relative
}

 .slide img {
    width: 100%;
   
  }

  .slide .imgmobile{display:block; width:100%; height:auto; }

  .brandingdescription{font-family: Arial, Helvetica, sans-serif; width:100%; margin:0 auto; margin-top:1.5rem; text-align: center; position:relative}
  

    .controls, .controlsweb, .controlsad{
   
  
  position:relative;
  width:37%;
    text-align: center;
    display:flex;
    height:2rem;
   

    margin-top:1.5rem;
   
    
   
   
    
  }

  button{margin: 0 auto}
 

/*responsive web*/

#web  {height:1400px}
#ads {height:1200px}
#elearning {height:1300px}
#illustration  {height:1300px}
.contad{padding-top: 0rem; }

.brandingsub {width:90%; margin:0 auto;}
.elearningsub {width:90%; margin:0 auto;}

.slide .imgelearning
{width:100%;
  position:relative
}
.slide .textcontainerbranding{
  width:90%;
  position:relative;
margin-left:0%;
margin:0 auto;
text-align: center;
}

.slide .textcontainerelearning{
  width:90%;
  position:relative;
margin-left:0%;
margin:0 auto;
text-align: center;
margin-top: 1rem;

}


.webtitle{display:none}

.webdescription{font-family: Arial, Helvetica, sans-serif; width:100%; margin:0 auto; margin-top:1.5rem; text-align: center; position:relative; color:black}
.elearningdescription {width:100%; }



 




  .prev{text-align:center; width:8rem; height:3rem; margin-left:5px;}
  .espacio{width:0%; display:block}
  .next{text-align:center;width:8rem; height:3rem; margin-right:5px}

  

 


.espaciadorhz {height:0rem}

.controlsweb {
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
}


/*iframes responsive*/
.webok {margin-top:2rem; height:500px; color:black}
.elearningok {height:1000px; padding-bottom:2rem;}



/*reel section responsive*/
.bgreel {width:100%; background-color: black; padding-top:4rem; padding-bottom:4rem;color:white}
.reelsection {width:90%; display:block; align-items: center; margin:0 auto}
.reeltitle {font-size:3rem; text-align:center; font-family:Khand-Bold; line-height: 2rem;  }
.reeltextfull {width:100%; margin-left:0rem; text-align: center;}

.contvideo{width:100%;margin-top:1.5rem}
.watchnow { display:block; font-size: 1.5rem; line-height:1.5rem; align-items: center; margin-top:0rem; font-family:baksosapi; color:white; width:100%}
.watchnow .contflecha {transform: rotate(270deg); margin-top:1.5rem}
.reeldescription {width:100%; font-family: Arial, Helvetica, sans-serif;  font-size: 1.1rem;}

}









@media (max-width: 767px) {


body{padding:0px; margin:0px}

header{margin:0; padding-left:0; padding-top:25px;  padding-bottom:1rem;}
nav{width:100%; display:flex; align-items:center; position:relative; max-width: 1200px; margin:0 auto; margin-left:0}
 .logo {width:50%;text-align:center; margin:0 auto;}


 
  .logo img {width:100%; }
 
 


.hero-video {width:95%; margin:0 auto; margin-top:2rem;}
 

  

  .content {
    padding-top: 0; /* Asegura que el contenido no esté oculto detrás del encabezado */
}







  .container{display:block; text-align: center; width:100%; margin-top:0rem}
  .textomain{width:85%; margin:0 auto; margin-top:30px;}
  .espaciadormain2 {display:block}
  .contvideo{width:100%; margin-top: 1.5rem;}
  
  .maintitle{font-size: 3.2rem; line-height: 3.2rem; }
  .subtitle {font-size: 1.4rem; line-height: 1.6rem; margin-top: 0rem; margin:0 auto; width:100%; margin-top:0.4rem}
  .maindescription {font-size: 1.4rem; line-height: 1.5rem;  margin-top: 0.7rem;color:#444; width:100%}

  .bulletss {width:100%;  margin-top:0.5rem; font-size:1.4rem; line-height:2.2rem; letter-spacing: 1px; overflow-wrap: break-word; word-wrap: break-word; text-align:center; }
  .bulletss b{}


.bgmorework {}

 .morework-container ul {display:flex; width:85%; flex-wrap: wrap;  gap: 18px; justify-content: center; }
 .moreworktext{margin-top: 0rem;}
 .bots-morework {width:95%}

  
  .watchnow {color:black; display:block; font-size: 1.5rem; line-height:1.5rem; align-items: center; color: #000000; margin-top:2rem; font-family:baksosapi; width:50%; margin:0 auto}
  .moreworkflecha{transform: rotate(90deg); margin-top:1rem}

 

.moreworktitle{text-align: center;width:33%; margin:0 auto; display:block}
 
 
    




    

    .thisistheend{display:block; text-align: center; align-items: center; width:90%;margin: 0 auto; padding: 1.5rem;}
.cont-redes{display:flex; align-items: center;   padding:0rem; width:30%; position:relative; margin:0 auto}
.cont-redes a {padding:0.2rem; margin:0 auto; }
.elemail{color:#999; font-size: 1.4rem; margin:0 auto; width:70%;position:relative;text-align: center; padding-left: 0rem; }




/*nerd responsive*/
.nerdbg{background-color: white ; padding-top:2rem; padding-bottom:3rem}
.nerd {width:95%; margin:0 auto; display:block; align-items:center}
.nerdvideocont{width:100%; }
.nerd iframe {width:100%}
.nerdtextcont{width:100%;position:relative; margin:0 auto;}
.nerdtitle{font-size: 2rem; font-weight:bold; line-height:2rem; margin-top: 1rem;}
.nerddescription{font-family: Arial, Helvetica, sans-serif; width:100%; margin:0 auto; margin-top:0.5rem; position:relative; text-align: left;}

/*clickme responsive*/
.clickmebg{padding-top:2rem; padding-bottom:2rem; height:500px}
.clickme {width:95%; margin:0 auto; display:block; align-items:center}
.clickmevideocont{width:100%; }
.clickme iframe {width:100%}
.clickmetextcont{width:100%;position:relative; margin:0 auto;}
.clickmetitle{font-size: 2rem; font-weight:bold; line-height:2rem; margin-top: 1rem;}
.clickmedescription{font-family: Arial, Helvetica, sans-serif; width:100%; margin:0 auto; margin-top:0.5rem; position:relative}






/*responsive branding*/
#brand  {height:900px}
.brandingok {padding-bottom:0rem; }
.contbrandingdesktop{ width:100%; padding-top: 2rem; padding-bottom:8rem;}


.contelearning{width:100%; padding-top: 2rem; padding-bottom:8rem;}

.brandingheader{font-size: 2rem;}
.brandingtitle{display:none}

.elearningheader{font-size: 2rem;}
.elearningtitle{font-size: 2rem;}




.imgdesktop{display:none}





  .slider {
    position: relative;
    width: 90%;
    max-width: 1200px;;
    overflow: hidden;
    margin:0 auto;
   
   
    
  }

  .slides {
    display: flex;
    transition: transform 0.5s;
    padding: 0;
    margin: 0;
    list-style-type: none;
   
  }

  .slide {
    flex: 0 0 100%;
    display:block;
    align-items: center;
    height:auto;
    padding:0;
    margin:0;
 
  
  }

.slide .imgbrandingdesktop
{width:90%;
  position:relative
}

.slide .imgaddesktop{
  width:90%;
  position:relative;
}

.slide .imgelearningdesktop{width:90%;
  position:relative
}

 .slide img {
    width: 100%;
   
  }

  .slide .imgmobile{display:block; width:100%; height:auto; }

  .brandingdescription{font-family: Arial, Helvetica, sans-serif; width:100%; margin:0 auto; margin-top:1.5rem; text-align: center; position:relative}
  

    .controls, .controlsweb, .controlsad{
   
  
  position:relative;
  width:80%;
    text-align: center;
    display:flex;
    height:2rem;
   

    margin-top:1.5rem;
   
    
   
   
    
  }

  button{margin: 0 auto}
 

/*responsive web*/

#web  {height:1000px}
#ads {height:800px}
#illustration  {height:800px}
.contad{padding-top: 0rem; }

.brandingsub {width:90%; margin:0 auto;}
.elearningsub {width:90%; margin:0 auto;}

.slide .imgelearning
{width:100%;
  position:relative
}
.slide .textcontainerbranding{
  width:90%;
  position:relative;
margin-left:0%;
margin:0 auto;
text-align: center;
}

.slide .textcontainerelearning{
  width:90%;
  position:relative;
margin-left:0%;
margin:0 auto;
text-align: center;
margin-top: 1rem;

}


.webtitle{display:none}

.webdescription{font-family: Arial, Helvetica, sans-serif; width:100%; margin:0 auto; margin-top:1.5rem; text-align: center; position:relative; color:black}
.elearningdescription {width:100%; }



 




  .prev{text-align:center; width:8rem; height:3rem; margin-left:5px;}
  .espacio{width:0%; display:block}
  .next{text-align:center;width:8rem; height:3rem; margin-right:5px}

  

 


.espaciadorhz {height:0rem}

.controlsweb {
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  text-align: center;
}


/*iframes responsive*/
.webok {margin-top:2rem; height:500px; color:black}
.elearningok {height:1000px; padding-bottom:2rem;}



/*reel section responsive*/
.bgreel {width:100%; background-color: black; padding-top:4rem; padding-bottom:4rem;color:white}
.reelsection {width:90%; display:block; align-items: center; margin:0 auto}
.reeltitle {font-size:3rem; text-align:center; font-family:Khand-Bold; line-height: 2rem;  }
.reeltextfull {width:100%; margin-left:0rem; text-align: center;}

.contvideo{width:100%;margin-top:1.5rem}
.watchnow { display:block; font-size: 1.5rem; line-height:1.5rem; align-items: center; margin-top:0rem; font-family:baksosapi; color:white; width:100%}
.watchnow .contflecha {transform: rotate(270deg); margin-top:1.5rem}
.reeldescription {width:100%; font-family: Arial, Helvetica, sans-serif;  font-size: 1.1rem;}

}