@font-face {
  font-family: 'BrandonGrotesqueBlack';
  src:  url('../fuentes/BrandonGrotesqueBlack.ttf');
}

@font-face {
  font-family: 'BrandonGrotesqueBlackItalic';
  src:  url('../fuentes/BrandonGrotesqueBlackItalic.ttf');
}

@font-face {
  font-family: 'BrandonGrotesqueBold';
  src:  url('../fuentes/BrandonGrotesqueBold.ttf');
}

@font-face {
  font-family: 'BrandonGrotesqueBoldItalic';
  src:  url('../fuentes/BrandonGrotesqueBoldItalic.ttf');
}

@font-face {
  font-family: 'BrandonGrotesqueLight';
  src:  url('../fuentes/BrandonGrotesqueLight.ttf');
}

@font-face {
  font-family: 'BrandonGrotesqueLightItalic';
  src:  url('../fuentes/BrandonGrotesqueLightItalic.ttf');
}

@font-face {
  font-family: 'BrandonGrotesqueMedium';
  src:  url('../fuentes/BrandonGrotesqueMedium.ttf');
}

@font-face {
  font-family: 'BrandonGrotesqueMediumItalic';
  src:  url('../fuentes/BrandonGrotesqueMediumItalic.ttf');
}

@font-face {
  font-family: 'BrandonGrotesqueRegular';
  src:  url('../fuentes/BrandonGrotesqueRegular.ttf');
}

@font-face {
  font-family: 'BrandonGrotesqueRegularItalic';
  src:  url('../fuentes/BrandonGrotesqueRegularItalic.ttf');
}

@font-face {
  font-family: 'BrandonGrotesqueThin';
  src:  url('../fuentes/BrandonGrotesqueThin.ttf');
}

@font-face {
  font-family: 'BrandonGrotesqueThinItalic';
  src:  url('../fuentes/BrandonGrotesqueThinItalic.ttf');
}

@font-face {
  font-family: 'Futura';
  src:  url('../fuentes/FuturaLTBold.ttf');
}

@font-face {
  font-family: 'Futurabook';
  src:  url('../fuentes/FuturaLTBook.ttf');
}


/* CSS VIDEOS */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, .tile.text time, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}

body>nav {
    position: fixed;
    top: 5%;
    left: 5%;
    width: 100%;
    margin-top: 0;
    height: 100px;
    padding-top: 0px;
    background: none;
    z-index: 1000;
    overflow: hidden;
    backface-visibility: hidden;

}

body>nav .bar {
    z-index: 2000;
    margin-top: 0px;
    width: 100%;
    height: 100px;
    background: none;
}

#movil{
  display: none;
}

.play {
    position: absolute;
    background-image: url(../design/play.png);
    background-size: 100% 100%;
      width: 180px;
    height: 180px;
    top: 20%;
     left: 43%;
    z-index: 1;
    cursor: pointer;
}

.play:hover{
  opacity: 0.5;
}

.textoHeader {
    position: absolute;
    top: 46% !important;
    left: 42%;
    z-index: 1;
    color: #fff;
    font-size: 2em;
    text-align: center;
    font-family: 'BrandonGrotesqueBlack' !important;
}
.textoHeader1 {
    position: absolute;
    top: 71%;
    left: 42%;
    z-index: 1;
    color: #fff;
    font-size: 2em;
    text-align: center;
    font-family: 'BrandonGrotesqueBlack' !important;

}
.textoHeader1:hover{
  color: yellow;
}
#movil {
    background-color: #000;
    background-size: cover;
    min-height: 527px;
    background-image: url(../design/movilfoto.jpg);
    background-position: center;
}



video {
    width: 100%;
    height: auto;
    min-height: 270px;
    display: block;
    background-attachment: fixed;
}

#videoLargo{
    display: none;
}

#first{

    width: 100%;
    
    /*background-attachment: fixed;*/
    /*animation: pulse 5s infinite;*/
    /*
     background-image: url(../design/Margen-superior.png);
    
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0px;*/
}

@keyframes pulse {
  0% {
    background-color: #488f92;
  }
  100% {
    background-color: #86dbde;
  }
}
.primero{
  background-image: url(../design/contenido.png);
  background-size: 100% 100%;
  height: 580px;
}

.segundo{
  background-image: url(../design/BOTON.png);
  background-size: 100% 100%;
  height: 580px;
}
.s2{
   background-image: url(../design/contenido.png); 
 background-position: center;
 height: 622px;
 
  background-color: black;
  background-size: contain;
    background-repeat: no-repeat;
    padding: 0px;

}
.s3{
background-image: url(../design/FOTO-MODELO.jpg); 
 background-position: center;
    height: 622px;
     background-size: cover;
     padding: 0px;
     transition: all .2s ease-in-out;
}
.s3:hover{
background-image: url(../design/FOTO-MODELO1.jpg); 
}

.s3.textoHeader1:hover{
  color: yellow;
}

#first .primero{
    padding-top: 10%;
    padding-bottom: 10%;
}

#first .primero .texto {
    color: #fff;
    font-family: 'BrandonGrotesqueBlack' !important;;
    font-size: 3em;
    margin-top: 32%;
}

#first .primero .boton {
    border: 2px solid #e1ea82;
    border-radius: 23px;
    padding: 20px;
    color: #fff;
    font-size: 2em;
    width: 50%;
    text-align: center;
    margin-top: 13%;
    font-family: 'BrandonGrotesqueBlack' !important;
}

#first .primero .boton:hover {
}


#first .segundo{
    padding-top: 5%;
    padding-bottom: 5%;
}


#second {
    background-image: url(../design/Footer.jpg);
    background-size: 100% 100%;
    width: 100%;
    min-height: 600px;
    background-size: cover;
    background-position: center;
}


#second .texto {
    color: #e1ea82;
    font-family: 'BrandonGrotesqueBlack' !important;
    font-size: 3em;
    margin-top: 18%;
}

#second .boton {
    border: 2px solid #86dbde;
    border-radius: 23px;
    padding: 20px;
    color: #fff;
    font-size: 2em;
    width: 44%;
    text-align: center;
    margin-top: 6%;
    float: left;
    font-family: 'BrandonGrotesqueBlack' !important;
    margin-right: 5%;
}

#second .boton:hover {
    background-color:#86dbde;
}

#third{
  background-color:#0e0f0f;
  width: 100%;
  padding-top: 5%;
  padding-bottom: 5%;
  color:#fff;
  font-family: 'BrandonGrotesqueBlack' !important;
}

#third .texto {
    color: #85dbde;
    font-family: 'BrandonGrotesqueBlack' !important;
    font-size: 2em;
}

.redes{
    float: right;
    font-size: 3em;
    color: #ffee5b;

  
}

.fa{
  color: #ffee5b;
}

.fa:hover{
  color:#e1ea82;
}

@media(max-width: 2560px){
  .textoHeader1 {
    top: 34% !important;
    left: 42%;
  }
  .redes{
        margin-top: 56%;
    margin-right: 42%;
  }

  }
@media(max-width: 1500px){
  .play {
    top: 21% !important;

  }

  .textoHeader {
    top: 49% !important;
    left:40% !important;
  }

 .textoHeader1 {
    top: 52% !important;
    left: 29%;
  }
  #first .segundo img{
    width:100%;
}

.redes{
    margin-top: 72%;
    margin-right: 39%;

}
  #first .primero .boton {
    border: 2px solid #e1ea82;
    border-radius: 23px;
    padding: 20px;
    color: #fff;
    font-size: 2em;
    width: 62%;
    text-align: center;
    margin-top: 13%;
    font-family: 'BrandonGrotesqueBlack' !important;
}

}

@media(max-width: 1024px){
.redes{
       margin-top: 96% !important;
    margin-right: 31% !important;

}
.textoHeader{
  top: 60% !important;
    left: 40% !important;
}
}

@media(max-width: 1286px){

.textoHeader {
      top: 51% !important;  
  }
  .textoHeader1 {
      top: 52% !important;
    left: 26%;
  }
.redes{
    margin-top: 28%;
    margin-right: 22%;
  }
}

@media(max-width: 1000px){
  #pc{
    display: none;
  }

  #movil{
    display: block;
  }



  .play {
    top: 19% !important;
    left: 47%;
    background-image: url(../design/play.png);
    width: 100px;
    height: 100px;
  }

  .textoHeader {
      top: 37% !important;
      left: 38%;
  }
.textoHeader1 {
top: 46% !important;
    left: 25%;
  }
  #first .primero .texto {
    color: #fff;
    font-family: 'BrandonGrotesqueBlack' !important;;
    font-size: 3em;
    margin-top: 5%;
}

#second .boton {
    border: 2px solid #86dbde;
    border-radius: 23px;
    padding: 20px;
    color: #fff;
    font-size: 2em;
    width: 100%;
    text-align: center;
    margin-top: 6%;
    float: left;
    font-family: 'BrandonGrotesqueBlack' !important;
    margin-right: 5%;
}

.modal-dialog {
    width: 100%;
    margin: 0;
}

.modal-content {
    background-color: #000;
    border: none;
    border-radius: 0px;
    margin-top: 19%;
}

.modal-header {
    padding: 15px;
    border-bottom: none;
}

.modal-open {
    overflow: hidden;
    padding-right: 0px;
}

.close {
    float: right;
    font-size: 35px;
    font-weight: 700;
    line-height: 1;
    color: #86dbde;
    text-shadow: 0 1px 0 #86dbde;
    filter: alpha(opacity=20);
    opacity: 1;
}


}

@media(max-width: 600px){
.textoHeader {
   top: 52% !important;
    left: 27% !important;
   
    font-size: 1em;
}
.redes{
    margin-top: 124% !important;
    margin-right: 27% !important;
}
.textoHeader1 {
    top: 47% !important;
    left: 0;
    width: 100%;
    font-size: 1em;
}

.play {
    top: 30% !important;
    left: 35%;
    background-image: url(../design/play.png);
    width: 100px;
    height: 100px;
}

#first .primero .texto {
    color: #fff;
    font-family: 'BrandonGrotesqueBlack' !important;;
    font-size: 2em;
    margin-top: 5%;
}
}