/* Importamos las fuentes */
@font-face {
    font-family: Futur;
    src: url('../panel/fonts/futur.ttf');
}

@font-face {
    font-family: FuturaBold;
    src: url('../panel/fonts/Futura\ Bold\ font.ttf');
}

@font-face {
    font-family: FuturaBoldItalic;
    src: url('../panel/fonts/Futura\ Bold\ Italic\ font.ttf');
}

@font-face {
    font-family: FuturaBook;
    src: url('../panel/fonts/Futura\ Book\ font.ttf');
}

@font-face {
    font-family: FuturaBookItalic;
    src: url('../panel/fonts/Futura\ Book\ Italic\ font.ttf');
}

@font-face {
    font-family: FuturaExtraBlack;
    src: url('../panel/fonts/Futura\ Extra\ Black\ font.ttf');
}

@font-face {
    font-family: FuturaHeavy;
    src: url('../panel/fonts/Futura\ Heavy\ font.ttf');
}

@font-face {
    font-family: FuturaHeavyItalic;
    src: url('../panel/fonts/Futura\ Heavy\ Italic\ font.ttf');
}

@font-face {
    font-family: FuturaLightBt;
    src: url('../panel/fonts/futura\ light\ bt.ttf');
}

@font-face {
    font-family: FuturaLight;
    src: url('../panel/fonts/Futura\ Light\ font.ttf');
}

@font-face {
    font-family: FuturaLightItalic;
    src: url('../panel/fonts/Futura\ Light\ Italic\ font.ttf');
}

@font-face {
    font-family: FuturaMedium;
    src: url('../panel/fonts/futura\ medium\ bt.ttf');
}

@font-face {
    font-family: FuturaMediumCondensedBt;
    src: url('../panel/fonts/futura\ medium\ condensed\ bt.ttf');
}

@font-face {
    font-family: FuturaMediumItalic;
    src: url('../panel/fonts/Futura\ Medium\ Italic\ font.ttf');
}

@font-face {
    font-family: FuturaXbikBt;
    src: url('../panel/fonts/Futura\ XBlk\ BT.ttf');
}

@font-face {
    font-family: FutureCondensedLight;
    src: url('../panel/fonts/Futura-CondensedLight.otf');
}

.carousel {
    max-width: 100%;
    height: 600px;
    margin: 0px auto 0px 0px;
    display: flex;
    /* background-color: RED; */
}

/* #imagen {
    width: 100%;
    height: 100%;
    background-size: cover;
} */

#infoEmpresa {
    width: 80%;
    height: 100%;
    float: left; 
    /* background-color: aqua; */
}

#divTit {
    margin-top: 100px;
    width: 60%;
    height: 30%;
    /* background-color: yellow; */
}

#titulo{
    color: white;
    text-align: center;
    line-height: 98%;
    margin: 1% 0% 0%;
    padding: 0% 5%;
    font-size: 4vw;
    font-weight: bold;
    text-shadow: 0.1em 0.1em 0.2em black;
}

#divDesc {
    margin-top: 10%;
    width: 53%;
    height: 70%;
    /* background-color: red; */
}

#descrip{
    color: white;
    text-align: justify;
    line-height: 98%;
    margin: 2% 0%;
    padding: 0% 5%;
    font-size: 2vw;
    text-shadow: 0.1em 0.1em 0.2em black;
}

#retroceder {
    width: 10%;
    height: 100%;
    float: left; 
    /* background-color: red; */
}

#retroceder .btn-retroceder{
    margin: 220px 0px;
    color: #fd5000;
    font-size: xx-large;
    float: left;
}

#avanzar {
    width: 10%;
    float: right; 
    height: 100%;
    /* background-color: red; */
}

#avanzar .btn-avanzar{
    margin: 220px 0px;
    color: #fd5000;
    font-size: xx-large;
    float: right;
}

.controles {
    text-align: center;  
    position:absolute;
    /* background:black; */
    width:100%;
    height:10%; bottom:0px; left:0%;
    /* margin-left:-25px; */
    color: white;
}

#play {
    font-size: xx-large;
    margin: 0;
    padding: 0;
    color: #fd5000;
}

#stop {
    font-size: xx-large;
    margin: 0;
    padding: 0;
    color: #fd5000;
}

.izquierda {
    text-align: left;
}

.derecha {
    text-align: right;
}

.centrado {
    text-align: center;
}

.posIzquierda{
    float: left;
}

.posDerecha{
    float: right;
}

.posCentral{
    float: left;
    margin-left: 20%;
}

.futur{
    font-family: Futur;
}
.futura-bold{
    font-family: FuturaBold;
}
.futura-bold-italic{
    font-family: FuturaBoldItalic;
}
.futura-book{
    font-family: FuturaBook;
}
.futura-book-italic{
    font-family: FuturaBookItalic;
}
.futura-extra-black{
    font-family: FuturaExtraBlack;
}
.futura-heavy{
    font-family: FuturaHeavy;
}
.futura-heavy-italic{
    font-family: FuturaHeavyItalic;
}
.futura-light-bt{
    font-family: FuturaLightBt;
}
.futura-light{
    font-family: FuturaLight;
}
.futura-light-italic{
    font-family: FuturaLightItalic;
}
.futura-medium{
    font-family: FuturaMedium;
}
.futura-medium-condensed-bt{
    font-family: FuturaMediumCondensedBt;
}
.futura-medium-italic{
    font-family: FuturaMediumItalic;
}
.futura-xbik-bt{
    font-family: FuturaXbikBt;
}
.futura-condensed-light{
    font-family: FutureCondensedLight;
}

.carousel>#imagen{
    width: 100%; 
    height: 100%; 
    background-size: cover;
}

@media only screen and (max-width: 700px){
    .carousel {
        max-width: 100%;
        height: 610px;
        margin: auto;
        display: block;
        /* background-color: RED; */
    }
    .carousel>#imagen {
        display: flex;
        background-position: center center;
        background-repeat: no-repeat;
        /* background-attachment: fixed; */
        background-size: 210% 78%;
        height: 100vh;
        background-color: '#66999';
    }
    #infoEmpresa {
        width: 80%;
        height: 100%;
        float: left; 
        /* background-color: aqua; */
    }
    
    #divTit {
        margin-top: 150px;
        /*align-content: center;*/
        height: 100px;
        margin-right: 5px;
    }
    
    #titulo{
        
        color: white;
        margin: 0% -60%; 
        padding: 0% 5%; 
        font-size: 8vw;
        font-weight: bold;
        text-align: center;
        margin-left: -125px;
    }
    
    #divDesc {
        margin-top: 50%;
        width: 100%;
        height: 120px;
        margin-right: -5px;
        /* background-color: red; */
    }
    #descrip{
        color: white;
        margin: 5% -30%;
        padding: 0% 5%;
        font-size: 5vw;
        text-align: center;
        margin-left: -20px;
        line-height: 115%;
    }
    
    #retroceder {
        width: 5%;
        height: 100%;
        float: left; 
        /* background-color: red; */
        margin-left: -5px;
        margin-top: 150px;
    }
    
    #retroceder .btn-retroceder{
        margin: 110px 0px;
        color: #fd5000;
        font-size: xx-large;
        float: left;
    }
    
    #avanzar {
        width: 5%;
        float: right; 
        height: 100%;
        margin-top: 150px;
        /* background-color: red; */
    }
    
    #avanzar .btn-avanzar{
        margin: 110px 0px;
        color: #fd5000;
        font-size: xx-large;
        float: right;
    }
    
    .controles {
        text-align: center;  
        position:absolute;
        /* background:black; */
        width:100%;
        height:25%; bottom:0px; left:0%;
        /* margin-left:-25px; */
        color: white;
    }
    
    #play {
        font-size: xx-large;
        margin: 0;
        padding: 0;
        color: #fd5000;
    }
    
    #stop {
        font-size: xx-large;
        margin: 0;
        padding: 0;
        color: #fd5000;
    }
}