@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');
  }

  body{background-color:black; padding:0px; font-family: Khand-Medium; margin:0px; color:white}
  ul {margin:0; padding:0}


  /*HOME*/

.logo {width:25%; margin:0 auto; margin-top:1.5rem; margin-bottom:1.5rem;  text-align:center}
.logo img{width:65%}
.hero{width:100%; max-width: 850px; margin:0 auto; display:block; align-items:center; padding-bottom:2rem; padding-top:1rem;}


.reel{width:100%; margin:0 auto; max-width:850px}
.reel video {width:100%; position:relative}

.losvideos {width:65%; margin:0 auto}
.losvideos video {width:100%; position:relative}
.text-container {padding-left:0; width:100%; max-width:850px; text-align:center; margin:0 auto }
.pretitle {font-size:1.1rem; width:90%; font-family:Arial, Helvetica, sans-serif; color:#999; margin-bottom:0.6rem}
.verde {color: #bce00f;}
.title{font-size:3.5rem; color:#bce00f; line-height:3.9rem; margin-top:1.5rem; margin-bottom:1.5rem}
.title2{font-size:3rem; color:#bce00f; line-height:4rem; margin-top:1.5rem; margin-bottom:1.5rem}
.description {font-size:1.1rem;line-height:1.5rem;width:90%; font-family:Arial, Helvetica, sans-serif; color:#ccc; margin:0 auto}
.losbullets {margin-top:1rem}
.bullet {font-size:1.1rem;line-height:1.5rem;width:90%; font-family:Arial, Helvetica, sans-serif; color:#ccc; margin-top: 0.5rem;}

.featured{width:70%; max-width: 1400px; margin:0 auto; }
.subtitle{color:#999; font-size:2rem; text-align:center; margin-top:2rem; margin-bottom:2rem; text-align:center;}
.subtitle2{color:bce00f; font-size:2rem; text-align:center; margin-top:2rem; margin-bottom:2rem; text-align:center;}

.featured ul {display:flex; text-decoration: none; text-align:center; width:70%; position:relative; margin:0 auto; }
.featured li {list-style: none; width:222px; margin:0.5rem; text-align:center}
.featured li a {border:1px solid #444; padding:0.5rem}
.featured li a:hover {border:1px solid #ccc; padding:0.5rem}
.featured a {text-decoration: none; display:block; color:#ccc; height:auto; text-align:center}
.featured a:hover{ text-decoration: underline;}
.featured img{width:100%; position:relative; text-align:center}
.featured p {font-size:1.4rem; color:#999; text-align:center; line-height:1.5rem}

.mailfinal{width:25%; text-align:center; margin:0 auto; font-size:1.3rem; color:#ccc; padding-top:2rem; padding-bottom:2rem}

/*FEATURED*/

.hero-featured {width:70%; max-width: 1400px; margin:0 auto; display:block; align-items:center; padding-top:3rem; padding-bottom:3rem}

.back {width:100%; max-width: 1400px; margin:0 auto; text-align:center; font-size:1.3rem; padding-top:2rem; padding-bottom:2rem}
.back a {color:#999; color:#ccc }

.back a:hover{text-decoration: underline; color:#fff}

/*YOUTUBE RESPONSIVE*/

.video-responsive {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	padding-top: 30px; /* Esta línea ofrece compatibilidad para IE6 y puede eliminarse */
	position: relative;
}
.video-responsive iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}


/*social media*/

.social{width:66%; margin:0 auto}
.social ul {display:flex; width:100%; position:relative}
.social li {padding:1.5rem; list-style: none;}
.social video{width:100%; position:relative}
.social img {width:100%; position:relative}

/*branding*/

.branding {width:60%; margin:0 auto}
.branding ul {display:flex; width:100%; position:relative}
.branding li {padding:1.8rem; list-style:none; width:30%}
.imgbranding {width:100%; position:relative}
.imgbranding img{width:100%; position:relative;}
.titlebranding {font-size:2rem; color:#999; text-align:center; margin-top:1.5rem}
.descriptionbranding {font-size:1.2rem; color:#999; text-align:center; line-height: 1.3rem; padding-bottom: 1.5rem; }

/*web*/

.web {width:60%; margin:0 auto}
.web ul {display:flex; width:100%; position:relative}
.web li {padding:1.8rem; list-style:none; width:50%}
.imgweb {width:100%; position:relative}
.imgweb img{width:100%; position:relative}
.titleweb {font-size:2rem; color:#999; text-align:center; margin-top:1.5rem}
.descriptionweb {font-size:1.2rem; color:#999; text-align:center; line-height: 1.3rem; padding-bottom: 1.5rem;}


/*art*/

.art {width:60%; margin:0 auto}
.art ul {display:flex; width:80%; position:relative; margin:0 auto; }
.art li {padding:0.5rem; list-style:none;}
.imgart {width:100%; position:relative}
.imgart img{width:100%; position:relative}







/*responsive-responsive-responsive-responsive-responsive-responsive-responsive-responsive-responsive-responsive-responsive-responsive-responsive-responsive*/



@media (max-width:870px) {

     .logo {width:65%; margin:0 auto; margin-top:1.5rem; margin-bottom:1.5rem}
     .logo img{width:100%}
     .hero{width:95%; max-width: 1400px; margin:0 auto; display:block; }
     
     
     .reel{width:100%}
     .reel video {width:100%; position:relative}
     .losvideos {width:100%}
     .text-container {padding-left:0rem; width:100%; text-align:center; padding-top: 1rem; padding-bottom:0rem}
     .pretitle {font-size:1.1rem; width:90%; font-family:Arial, Helvetica, sans-serif; color:#999; margin-bottom:0.6rem; text-align: center; margin:0 auto}
     .verde {color: #bce00f;}
     .title{font-size:3rem; color:#bce00f; line-height:3rem; text-align: center; margin:0 auto; margin-top:1rem}
     .title2{font-size:3rem; color:#bce00f; line-height:4rem}
     .description {font-size:1.1rem;line-height:1.5rem;width:90%; font-family:Arial, Helvetica, sans-serif; color:#ccc;text-align: center; margin:0 auto; padding-top: 1rem;}
     .losbullets {margin-top:1rem}
     .bullet {font-size:1.1rem;line-height:1.5rem;width:90%; font-family:Arial, Helvetica, sans-serif; color:#ccc; text-align: center; margin:0 auto; padding-top: 1rem;}
     
     .featured{width:80%; margin:0 auto;  }
     .subtitle{font-size:2rem; text-align:center; margin-top:3rem; margin-bottom:2rem}
     .subtitle2{font-size:2rem; text-align:center; margin-top:3rem; margin-bottom:2rem}
    
     
     .featured ul {display:block; text-decoration: none; text-align:center; width:80%; position:relative; margin:0 auto; }
     .featured li {list-style: none; width:auto; margin: 0 auto; text-align:center;  margin-bottom:1.2rem }
     .featured li a {border:1px solid #444;  margin:0 auto}
     .featured li a:hover {border:1px solid #ccc; padding:0.5rem}
     .featured a {text-decoration: none; display:block; color:#ccc; height:auto; text-align:center}
     .featured a:hover{ text-decoration: underline;}
     .featured img{width:100%; position:relative; text-align:center}
     .featured p {font-size:1.4rem; color:#999; text-align:center; line-height:1.5rem}
     
     .mailfinal{width:100%; text-align:center; margin:0 auto; font-size:1.3rem; color:#ccc; padding-top:2rem; padding-bottom:2rem}


/*FEATURED*/

.hero-featured {width:95%; max-width: 1400px; margin:0 auto; display:block; align-items:center; padding-top:2rem; padding-bottom:2rem}
.back {text-align:center; text-decoration: none; color:#999; padding-top:0rem; padding-bottom:0rem}
.back:hover{text-decoration: underline;}




/*social media*/

.social{width:95%; margin:0 auto}
.social ul {display:block; }
.social li {padding-bottom:1.5rem; list-style: none;}
.social video{width:100%; position:relative}
.social img {width:100%; position:relative}




/*branding*/

.branding {width:95%; margin:0 auto}
.branding ul {display:block; width:100%; position:relative}
.branding li {padding-bottom:0rem; width:85%; margin-bottom:1.5rem}
.imgbranding {width:100%; position:relative}
.imgbranding img{width:100%; position:relative}
.titlebranding {font-size:2rem; color:#999; text-align:center; margin-top:1.5rem}
.descriptionbranding {font-size:1.2rem; color:#999; text-align:center; line-height: 1.3rem; padding-bottom: 1.5rem;}








/*web*/

.web {width:95%; margin:0 auto}
.web ul {display:block; width:100%; position:relative}
.web li {padding:1.8rem; width:85%}
.imgweb {width:100%; position:relative}
.imgweb img{width:100%; position:relative}
.titleweb {font-size:2rem; color:#999; text-align:center; margin-top:1.5rem}
.descriptionweb {font-size:1.2rem; color:#999; text-align:center; line-height: 1.3rem; padding-bottom: 1.5rem;}



/*art*/

.art {width:95%; margin:0 auto}
.art ul {display:block; width:80%; position:relative; margin:0 auto; }
.art li {padding-bottom:1rem; list-style:none;}
.imgart {width:100%; position:relative}
.imgart img{width:100%; position:relative}












}