/* -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

To: D'Luxe Concierge
Author(s): Oscar Montano
Description: Web site designed to D'Luxe Concierge
Version: 0.2
Text Domain: deluxeconcierge.co.uk

Comments:
-

Actual file:
general.css

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- */

body {
    margin: 0;
    padding: 0;
}

p {
    font-family: var(--font0);
    line-height: 1.5em;
    font-size: .9em;
}

/* LOADER */
#loader {
    width: 100vw;
    height: 100vh;
    background-color: var(--color1);
    background-image: url(../imgs/texturas/relleno-de-espacios-seccion-6.png);
    background-position: left bottom;
    background-size: contain;
    background-repeat: no-repeat;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    position: fixed;
    top: 0;
    
    z-index: 100;
} #loader img {
    width: 200px;
    height: 200px;
    pointer-events: none;
}

.hidden {
    animation: FadeOut 1s;
    animation-fill-mode: forwards;
}

@keyframes FadeOut {
    100% { opacity: 0; visibility: hidden;}
}

/* SECCIÓN PARA LOS CONTENEDORES */
.contenedor-global {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.contenedor-seccion {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    
    display: flex;
    flex-direction: column;
    align-items: center;
} 
.c-s-blanco { background-color: var(--color0); }
.c-s-gris { background-color: var(--color2); }
.c-s-azul { background-color: var(--color5); }
.c-s-negro { background-color: var(--color4); color: var(--color0); }

.contenedor-interno {
    width: 100%;
    max-width: var(--max-width);
    height: auto;
    margin: 0 auto;
    padding: 0;
    
    display: flex;
}

.contenedor-reducido {
    width: 95%;
    max-width: 1350px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
} .info_principal {
    width: 30%;
    margin: 30px auto;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--color4);
} .imagen_info_principal {
    width: 100%;
    height: 300px;
    background-position: center;
    background-size: cover;
} .contenido_info_principal {
    margin-top:10px;
    text-align:left;
    display:flex;
    flex-direction:column;
} .texto_info_principal {
    font-family: var(--font0);
    font-size: var(--subtexto-m);
    margin-bottom: 10px;
    text-align: left;
    line-height: 1.6;
}

@media screen and (max-width: 1050px){
    .info_principal {
        width: 40%;
    }
}

@media screen and (max-width: 850px){
    .info_principal {
        width: 80%;
    }
}
@media screen and (max-width: 450px){
    .info_principal {
        width: 90%;
    }
}

.c-i-row { flex-direction: row; }
.c-i-rowrev { flex-direction: row-reverse; }
.c-i-column { flex-direction: column; }
.c-i-columnrev { flex-direction: column-reverse; }

.sec-peq { width: 330px; display: flex; justify-content: center; align-items: center; }
.sec-gra { 
    width: calc(100% - 330px); 
    width: -moz-calc(100% - 330px); 
    width: -webkit-calc(100% - 330px); 
}

@media screen and (max-width: 500px){
    .c-i-row { flex-direction: column; }
    .c-i-rowrev { flex-direction: column; }
    .sec-peq { width: 100%; margin-bottom: 80px; }
    .sec-gra { width: 100%; }
}

/* MENÚ SUPERIOR / MENU OCULTO */
#menu-superior {
    width: 100vw;
    height: auto;
    margin: 0;
    padding: 10px 20px;
    background-color: var(--color2);
    color: var(--color6);
    
    position: fixed;
    top: -100px;
    
    transition: all .5s ease;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    box-sizing: border-box;
    z-index: 99;
} 

#menu-superior-contenedor-interior {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0;
    
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

#menu-superior-1 {
    width: 33%;
    height: auto;
    
    display: flex;
    flex-direction: row;
    align-items: center;
} 
#menu-superior-1 span { 
    font-size: var(--subtitulo); 
    margin-right: 20px; 
    background-color: transparent; 
    padding: 5px; 
    color: var(--color5); 
    border-radius: 5px;
    cursor: pointer;
}
#menu-superior-1 span:hover { 
    background-color: var(--color5); 
    color: var(--color0);
}
#menu-superior-1 img { width: 160px; height: auto; }

#menu-superior-2 {
    width: 34%;
    height: auto;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

#menu-superior-3 {
    width: 33%;
    height: auto;
    
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
} #menu-superior-3 img { width: 20px; height: auto; margin-left: 10px; }

@media screen and (max-width: 500px) {
    #menu-superior-2, #menu-superior-3 {
        display: none;
    }
}

#menu-oculto {
    height: 100vh;
    padding: 50px 0;
    margin: 0;
    background-color: var(--color4);
    color: var(--color0);
    
    position: fixed;
    left: -500px;
    
    transition: all .5s ease;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    box-sizing: border-box;
    z-index: 100;
} #menu-oculto img {
    width: 65%;
    height: auto;
} #menu-oculto a {
    margin: 3vh auto;
    color: var(--color0);
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font1);
    
    display: block;
} #menu-oculto a:hover {
    text-decoration: underline;
}

/* BOOKING SYSTEM */
#booking {
    width: 100%;
    height: auto;
    padding: 15px;
    
    box-sizing: border-box;
} #booking div {
    display: block;
}

/* BOTONES */
.btn-normal {
    width: auto;
    height: auto;
    padding: 15px 20px;
    margin: 10px;
    color: var(--color5);
    font-family: var(--font1);
    text-decoration: none;
    
    position: relative;
} 
.btn-blanco { background-color: var(--color0); }
.btn-gris { background-color: var(--color1); }
.btn-deco-oro { 
    width: 80%; 
    height: 2px; 
    background-image: var(--oro-horizontal);
    
    position: absolute;
    bottom: 10px;
    right: 50%;
    transform: translateX(50%);
} .btn-normal font { 
    width: 100%; 
    height: auto;
    font-size: var(--textopeq);
    font-family: var(--font0);
    color: var(--color3);
    line-height: 1em;
    text-align: center;
    
    position: absolute;
    bottom: -40px;
    right: 50%;
    transform: translateX(50%);
}

.btn-especial-exterior { 
    width: auto; 
    height: auto;
    padding: 3px; 
    background-image: var(--oro-horizontal); 
    border-radius: 20px;
    display: block;
    text-decoration: none;
    
    box-sizing: border-box;
}
.btn-especial-interior { 
    width: 100%;
    height: auto;
    padding: 10px 15px;
    border-radius: 18px;
    font-family: var(--font0);
    font-size: var(--subtexto);
    text-align: center;
    
    box-sizing: border-box;
}

.btn-e-i-negro { background-color: var(--color4); color: var(--color0); }
.btn-e-i-azul { background-color: var(--color5); color: var(--color0); }
.btn-e-i-gris { background-color: var(--color2); color: var(--color4); }
.btn-e-i-blanco { background-color: var(--color0); color: var(--color4); }

/* SEPARADORES */
.separador-oro-1 {
    width: 100%;
    height: 2px;
    margin: 10px auto;
    background-image: var(--oro-horizontal);
}

.separador-oro-2 {
    width: 100%;
    height: 4px;
    margin: 10px auto;
    background-image: var(--oro-horizontal);
}

.separador-oro-3 {
    width: 4px;
    height: 100%;
    margin: 10px auto;
    background-image: var(--oro-vertical);
}

/* EXTRAS */
.idioma {
    width: auto;
    height: auto;
    margin-right: 10px;
    padding: 3px 5px;
    border-radius: 4px;
    text-decoration: none;
    
    display: inline-block;
} .idioma:hover {
    text-decoration: underline;
} 
.idioma-1 { color: var(--color0); border: 1px solid var(--color0); }
.idioma-2 { color: var(--color5); border: 1px solid var(--color5); }

.titulo-1 { font-family: var(--font1); font-size: var(--titulo); text-transform: uppercase; display: block; }
.subtitulo-1 { font-family: var(--font0); font-size: var(--subtitulo); display: block; }
.subtitulo-2 { font-family: var(--font1); font-size: var(--subtitulo); display: block; }
.texto-1 { font-family: var(--font0); font-size: var(--texto); display: block; }
.subtexto-1 { font-family: var(--font0); font-size: var(--subtexto); display: block; }

/* FOOTER */
#footer-general {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    box-sizing: border-box;
} 

#footer-info-contenedor {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10vh 20px;
    background-image: var(--linear-gradient-1);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    box-sizing: border-box;
} #footer-info {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    color: var(--color0);
    font-family: var(--font0);
    font-size: var(--subtexto);
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    
    box-sizing: border-box;
} 

#f-i-1 {
    width: 300px;
} #f-i-1 img { width: 60%; height: auto; display: block; margin: 0 auto;}

#f-i-2 {
    width: calc(80% - 300px);
}

#f-i-3 {
    width: 20%;
    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
} #f-i-3 a {
    margin: 10px auto;
    font-size: 2em;
    color: var(--color0);
    text-decoration: none;
    
    display: block;
}

#footer-links {
    width: 100%;
    height: auto;
    margin: 10px 0;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
} .footer-links-blocks {
    width: 30%;
    max-width: 250px;
    
    display: flex;
    flex-direction: column;
} .footer-links-blocks a {
    color: var(--color0);
    margin: 5px 0;
    text-decoration: none;
} .footer-links-blocks a:hover {
    text-decoration: underline;
}

#footer-firma-contenedor {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 10px 0;
    background-color: var(--color0);
    background-image: url(../imgs/texturas/relleno-de-espacios-horizontal.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    box-sizing: border-box;
} #footer-firma {
    padding: 40px 0;
    font-family: var(--font1);
    font-size: var(--subtexto);
    
    box-sizing: border-box;
}

@media screen and (max-width: 950px) {
    #f-i-1 { width: 30%; }
    #f-i-2 { width: 55%; }
    #f-i-3 { width: 15%; }
    #footer-firma { padding: 30px; }
}

@media screen and (max-width: 500px) {
    #footer-info {
        flex-direction: column;
        text-align: center;
    }
    #f-i-1, #f-i-2, #f-i-3 {
        width: 100%;
    }
    #f-i-3 {
        flex-direction: row;
    }
    .footer-links-blocks {
        width: 50%;
    }
    #footer-firma { padding: 7px; }
}