@font-face {
    font-family: 'HeeboBold';
    src: url(../fonts/Heebo-Bold.ttf)
}

@font-face {
    font-family: 'HeeboLight';
    src: url(../fonts/Heebo-Light.ttf)
}

@font-face {
    font-family: 'HeeboRegular';
    src: url(../fonts/Heebo-Regular.ttf)
}

@font-face {
    font-family: 'MyriaPro';
    src: url(../fonts/MyriadPro-Regular.ttf)
}

@font-face {
    font-family: 'PressuraBold';
    src: url(../fonts/Pressura-Bold.ttf)
}

@font-face {
    font-family: 'PressuraLight';
    src: url(../fonts/Pressura-Light.ttf)
}

a:link,
a:visited,
a:active {
    text-decoration: none;
    color: white
}

a.nounderline:link {
    text-decoration: none;
    color: white
}

a {
    text-decoration: none;
    color: white
}

a:hover {
    text-decoration: none;
    color: white
}

li {
    list-style-type: none
}

body {
    background: black
}

h1 {
    margin: 0
}

.row {
    margin: 0
}

.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5,
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9,
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10,
.col-xs-11,
.col-sm-11,
.col-md-11,
.col-lg-11,
.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12 {
    padding-right: 0;
    padding-left: 0
}

.contenedor {
    overflow: hidden;
    height: 100vh
}

.overlay {
    position: absolute;
    ;
    width: 650px;
    z-index: 11;
    color: white;
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

#videogif {
    display: none
}

video#bgvid {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 10;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background-repeat: no-repeat;
    background-size: cover
}

.titulo-1 {
    font-family: PressuraBold;
    font-size: 45px
}

.uno {
    top: 0;
    width: 650px;
    animation: uno 4s infinite
}

@keyframes uno {
    0% {
        opacity: 1
    }

    25% {
        opacity: 1
    }

    36% {
        opacity: 1
    }

    38% {
        opacity: 0
    }

    40% {
        opacity: 1
    }

    42% {
        opacity: 0
    }

    44% {
        opacity: 1
    }

    46% {
        opacity: 0
    }

    48% {
        opacity: 1
    }

    49% {
        opacity: 0
    }

    50% {
        opacity: 0
    }

    75% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

.dos {
    position: absolute;
    top: 0;
    width: 650px;
    text-align: center;
    animation: dos 4s infinite
}

@keyframes dos {
    0% {
        opacity: 0
    }

    25% {
        opacity: 0
    }

    49% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    86% {
        opacity: 1
    }

    88% {
        opacity: 0
    }

    90% {
        opacity: 1
    }

    92% {
        opacity: 0
    }

    94% {
        opacity: 1
    }

    96% {
        opacity: 0
    }

    98% {
        opacity: 1
    }

    99% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

.txt-premio {
    font-family: HeeboRegular;
    font-size: 22px;
    line-height: 5px
}

.img-premio {
    width: 100px
}

@media screen and (max-height:500px) {
    #videogif {
        display: block;
        width: 100%;
        height: 100vh;
        position: fixed;
        z-index: 1000;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-position: center center;
        z-index: 10
    }

    video#bgvid {
        display: block
    }

    #videogif {
        display: none
    }
}

@media screen and (max-width:500px) {
    #videogif {
        display: none
    }

    video#bgvid {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: 1;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        background-size: cover;
    }
}

.home {
    position: absolute;
    top: 0;
    z-index: 100
}

.menu {
    color: white;
    font-family: PressuraBold;
    font-size: 50px;
    line-height: 58px;
    position: absolute;
    top: 55%;
    right: 80.5%;
    -ms-transform: translateX(-10%) translateY(-10%);
    -moz-transform: translateX(-10%) translateY(-10%);
    -webkit-transform: translateX(-10%) translateY(-10%);
    transform: translateX(-10%) translateY(-10%)
}

.transi {
    transition: all 0.5s
}

.menu li {
    list-style: none;
    cursor: pointer
}

.menu-item2 {
    width: 0;
    position: absolute;
    z-index: -1;
    background: white;
    top: 51%;
    transform: translateY(-50%);
    height: 7px;
    transition: all 0.3s;
    left: -5px
}

#menu-item1:hover .menu-item2 {
    width: 180px
}

#menu-item2:hover .menu-item2 {
    width: 135px
}

#menu-item3:hover .menu-item2 {
    width: 147px
}

#menu-item4:hover .menu-item2 {
    width: 267px
}

.menu-item3-1 {
    width: 180px
}

.menu-item3-2 {
    width: 135px
}

.menu-item3-3 {
    width: 147px
}

.menu-item3-4 {
    width: 267px
}

.logo {
    position: absolute;
    z-index: 100;
    top: 60px;
    left: 80px;
    cursor: pointer
}

.item-logo {
    width: 100%
}

#tabla-home2 {
    display: none
}

@media screen and (max-height:500px) {
    .menu {
        font-size: 40px;
        line-height: 44px;
        top: 60%;
        left: 50%;
        -ms-transform: translateX(-20%) translateY(-10%);
        -moz-transform: translateX(-20%) translateY(-10%);
        -webkit-transform: translateX(-20%) translateY(-10%);
        transform: translateX(-20%) translateY(-10%)
    }

    #menu-item1:hover .menu-item2 {
        width: 140px
    }

    #menu-item2:hover .menu-item2 {
        width: 100px
    }

    #menu-item3:hover .menu-item2 {
        width: 112px
    }

    #menu-item4:hover .menu-item2 {
        width: 208px
    }

    .menu-item3-1 {
        width: 140px
    }

    .menu-item3-2 {
        width: 100px
    }

    .menu-item3-3 {
        width: 112px
    }

    .menu-item3-4 {
        width: 208px
    }

    .logo {
        top: 20px;
        left: 30px
    }

    .item-logo {
        width: 80px
    }
}

@media screen and (max-width:768px) {
    .logo {
        top: 20px;
        left: 30px
    }

    .item-logo {
        width: 80px
    }

    .menu {
        font-size: 40px;
        line-height: 44px;
        top: 70%;
        left: 50%;
        -ms-transform: translateX(-20%) translateY(-10%);
        -moz-transform: translateX(-20%) translateY(-10%);
        -webkit-transform: translateX(-20%) translateY(-10%);
        transform: translateX(-20%) translateY(-10%)
    }

    #tabla-home1 {
        display: none
    }

    #tabla-home2 {
        display: block
    }

    .dos {
        text-align: left;
        width: 100%
    }

    .uno {
        width: 100%
    }

    .overlay {
        width: 100%;
        padding-left: 50px
    }

    .titulo-1 {
        font-size: 70px;
        line-height: 58px
    }

    .img-premio {
        width: 70px
    }

    .txt-premio {
        font-size: 19px
    }

    #menu-item1:hover .menu-item2 {
        width: 145px
    }

    #menu-item2:hover .menu-item2 {
        width: 105px
    }

    #menu-item3:hover .menu-item2 {
        width: 117px
    }

    #menu-item4:hover .menu-item2 {
        width: 213px
    }

    .menu-item3-1 {
        width: 145px
    }

    .menu-item3-2 {
        width: 105px
    }

    .menu-item3-3 {
        width: 117px
    }

    .menu-item3-4 {
        width: 213px
    }
}

@media screen and (max-width:500px) {
    .menu {
        top: 75% !important;
        left: auto;
        right: 30px;
        transform: translateY(-10%);
        text-align: right
    }

    .overlay {
        padding-left: 30px
    }

    .titulo-1 {
        font-size: 45px;
        line-height: 40px
    }

    .img-premio {
        width: 50px
    }

    .txt-premio {
        font-size: 16px
    }

    .item-logo {
        width: 60px
    }

    .button-container {
        height: 25px;
        width: 30px
    }

    .button-container span {
        height: 3px
    }

    .button-container .middle {
        top: 7px
    }

    .button-container .bottom {
        top: 14px
    }

    .bottom-cambio {
        transform: translateY(-7px) translateX(0) rotate(-45deg)
    }

    .arriba-cambio {
        transform: translateY(7px) translateX(0) rotate(45deg)
    }

    .menu-item2 {
        right: -5px;
        left: auto
    }
}

@media screen and (max-width:320px) {
    .menu {
        left: 30%
    }
}