@font-face{
    font-family: 'Bebas Neue';
    src: url('font/BebasNeueThin.otf'), url('font/BebasNeueRegular.otf'), url('font/BebasNeueLight.otf'), url('font/BebasNeueBook.otf'), url('font/BebasNeueBold.otf');
}
body{
    font-family: 'Open Sans', sans-serif;
}

header{
    position: relative;
}
#logo{
    position: absolute;
    left: 1em;
    top: 1em;
    z-index: 1000;
}
header ul{
    position: absolute;
    right: 1em;
    list-style: none;
    padding-left: 0;
}
header ul li{
    display: inline-block;
    margin: auto 10px;
}
header ul li img, header ul li p{
    display: inline-block;
    vertical-align: middle;
}
header ul li p{
    color: white;
    font-weight: 100;
}
.principal{
    position: absolute;
    margin-right: auto;
    margin-left: auto;
    left: 0;
    right: 0;
    text-align: center;
    top: 25%;
    color: white;
    
}
.principal .open-s{
    margin-bottom: 0;
    margin-top: 0;
    line-height: 30px;
}
.bebas{
    font-family: 'Bebas Neue';
    font-size: 90px;
    margin-bottom: 0;
    margin-top: 0;
 
}
.bebas-bold{
    /*font-family: 'Bebas Neue';*/
    font-style: bold;
    font-size: 60px;
    margin-bottom: 5px;
    margin-top: -5px;
    line-height: 40px;
    font-weight: 800;
}

.descuento{
    font-style: italic;
    font-weight: 100;
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
.descuento span{
    font-weight: 800;
    font-size: 60px;
}
.text{
    font-weight: 100;
    margin-top: 0;
}
.mini{
    font-size: 12px;
}
#bolsa{
    position: absolute;
    bottom: -7em;
    left: 1em;
}
#palanca{
    position: absolute;
     bottom: -10em;
    right: 2em;

}
.redes-head{
    position: absolute;
    left: 1em;
    top: 35%;
        width: 100px;
}
.redes-head li{
    display: block;
    margin-bottom: 10px;
}
video{
    width: 100%;
}
.info{
    margin-top: 8em;
    text-align: center;
    padding-bottom: 3em;
    opacity: 0;
    visibility: hidden;
}

.info h2{
    font-size: 30px;
}
.info ul{
    list-style: none;
    padding-left: 0;
    margin-top: 5em;
}
.info ul li{
    display: inline-block;
    width: 300px;
    vertical-align: top;
}
.info ul li h1{
    font-size: 16px;
    font-weight: 400;
}
.info ul li p{
    color: gray;font-weight: 100;
}
.form-content{
    background: rgb(51,51,51);
    overflow: hidden;
    position: relative;
     opacity: 0;
    visibility: hidden;
}
.form-content h2{
    color: white;
    font-weight: 100;
    text-align: center;
    margin-top: 2em;
}
.form-content h2 span{
    font-size: 50px;
    font-weight: 800;
    font-style: italic;
}
#flecha{
    position: absolute;
    right: -1em;
    top: -1em;
}
#mano{
    position: absolute;
    left: 8%;
    top: 35%;
}
#lapiz{
    position: absolute;
    right: 15%;
    top: 35%;
}
#lapiz{
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}
.form-content form{
    margin-top: 4em;
    margin-bottom: 3em;
}
.form-content form input{
    display: block;
    margin:auto;
    background: none;
    border: none;
    border-bottom: 1px solid white;
    margin: 1em auto;
    text-align: center;
    width: 500px;
    padding: 7px;
    color: white;
}
.form-content form input[type=submit]{
    background: #FFC80A;
    color: white;
    border-radius: 5px;
    font-size: 20px;
    padding: 10px;
    border:none;
}
.contact{
    list-style: none;
    text-align: center;
    padding-left: 0;
}
.contact li{
    display: inline-block;
    margin: auto 10px;
}
.contact li img, .contact li p{
    display: inline-block;
    vertical-align: middle;
}
.contact li p{
    color: white;
    font-weight: 100;
}
.redes-foot{
    text-align: center;
    list-style: none;
    padding-left: 0;
}
.redes-foot li{
    display: inline-block;
}
footer{
    text-align: center;
    color: white;
    background: rgb(51,51,51);
    overflow: hidden;
    padding: 5px;
}
footer p{
    font-weight: 100;
}


.visibilidad-planes{
    visibility: visible !important;
    opacity: 1 !important;
    transition-property: opacity, visibility;
    transition-delay: 1s;
    transition: 1s;
}

@media screen and (max-width: 1290px){
    #mano{
        left: 0;
    }
    #lapiz{
        right: 5%;
    }
}
@media screen and (max-width: 1069px){
    #mano{
        left: -5em;
    }
}
@media screen and (max-width: 1010px){
    #bolsa{
       width: 200px;
       transition: 1s;
       bottom: -5em;
    }
    #palanca{
       width: 200px;
       transition: 1s;
       bottom: -7em;
    }
    .form-content form input{
        width: 400px;
    }
}
@media screen and (max-width: 967px){
    .principal{
        top: 20%;   
    }
    .bebas{
        font-size: 70px;
    }
    .bebas-bold{
        font-size: 50px;
    }
}
@media screen and (max-width: 900px){
    .cont-head{
        display: none;
    }
     #bolsa{
      left: -1em;
    }
}
@media screen and (max-width: 820px){
    video{
        display: none !important;
    }
    #mano, #flecha, #lapiz{
      display: none;
    }
    .form-content form input{
        width: 90%;
    }
    header{
        height: 600px;
        background-image: url('../img/fondo-movil.jpg');
        background-size: cover;
        background-position: center;
    }
}
@media screen and (max-width: 768px){
    .info h2{
        width: 80%;
        margin: auto;
    }
    .info h2 br{
        display: none;
    }
    .form-content h2{
        width: 80%;
        margin: 2em auto;
    }
}
@media screen and (max-width: 480px){
    .info h2{
        font-size: 20px;
    }
}
@media screen and (max-width: 320px){
    .principal{
        top: 30%;
    }
    #bolsa, #palanca{
        display: none;
    }
    .redes-head{
        display: none;
    }
    .principal .open-s{
        font-size: 20px;
    }
    .bebas{
        font-size: 40px;
    }
    .bebas-bold{     
        font-size: 40px;
    }
    .descuento{
        font-size: 20px;
    }
    .descuento span{
        font-weight: 800;
        font-size: 20px;
    }
    header{
        height: 600px;
}