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

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

Comments:
-

Actual file:
index-style.css

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

/* SECCION / PRESENTACIÓN */
/* -- INDEX -- */
#pre-menu {
    height: 100vh;
    padding: 50px 0;
    margin: 0;
    background-image: var(--linear-gradient-1);
    position: relative;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    box-sizing: border-box;
} #pre-menu img {
    width: 65%;
    height: auto;
} #pre-menu a {
    margin: 3vh auto;
    color: var(--color0);
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font1);
    
    display: block;
} #pre-menu a:hover {
    text-decoration: underline;
}

.pre-menu-scroll {
    text-align: center;
    color: var(--color0);
    
    display: none;
}

#pre-cover {
    padding: 30px;
    color: var(--color0);
    
    background-image: url(../imgs/fotos/MAIN.jpg);
    background-position: left center;
    background-size: cover;
    position: relative;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    
    transition: all 1s ease;
    
    box-sizing: border-box;
} 

#pre-cover img {
    width: 50%;
    min-width: 200px;
    max-width: 450px;
    height: auto;
    
    display: block;
}

#pre-cover font {
    width: 40%;
    height: auto;
    font-family: var(--font0);
    
    display: block;
}

#pre-separador-oro {
    width: 5px;
    height: 60vh;
    background-image: var(--oro-vertical);
    
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* -- SERVICES --*/
#servicio-pre-menu {
    height: 100vh;
    padding: 50px 0;
    margin: 0;
    background-image: var(--linear-gradient-1);
    position: relative;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    
    box-sizing: border-box;
} #servicio-pre-menu img {
    width: 65%;
    height: auto;
} #servicio-pre-menu a {
    margin: 3vh auto;
    color: var(--color0);
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font1);
    
    display: block;
} #servicio-pre-menu a:hover {
    text-decoration: underline;
}

#servicio-mob-menu {
    height: 10vh;
    padding: 10px;
    margin: 0;
    background-image: var(--linear-gradient-1);
    position: relative;
    
    display: none;
    flex-direction: row;
    align-items: center;
    
    box-sizing: border-box;
} #servicio-mob-menu img {
    width: 175px;
    height: auto;
    margin-left: 20px;
} #servicio-mob-menu a {
    color: var(--color0);
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font1);
}

#service-cover {
    padding: 30px;
    color: var(--color0);
    
    background-position: left center;
    background-size: cover;
    position: relative;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    
    transition: all 1s ease;
    
    box-sizing: border-box;
} 

#service-cover-degradado {
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(to right,var(--color6),rgba(0,0,0,.1) 60%, transparent);
    
    position: absolute;
    top: 0;
    left: 0;
    
    z-index: 0;
}

#service-cover-firma {
    width: 70%;
    height: 70vh;
    background-image: url(../imgs/texturas/servicios-firma-cover.png);
    background-position: right bottom;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .3;
    
    position: absolute;
    bottom: 0;
    right: 0;
    
    z-index: 0;
}

.titulo-servicio {
    width: 100%;
    margin: 10vh auto 50px auto;
    font-family: var(--font1);
    font-size: 4em;
    text-align: center;
    text-transform: uppercase;
}

.descripcion-servicio {
    width: 90%;
    max-width: 700px;
    margin: 0 auto 30px auto;
    text-align: center;
}

.index2 { z-index: 2; }

@media screen and (max-width: 500px){
    .pre-menu-links { display: none; }
    .pre-menu-scroll { display: block; }
    #pre-cover { min-height: 90vh; }
    #pre-cover img { width: 90%; }
    #pre-cover font { width: 90%; }
    #service-cover { min-height: 90vh; }
    #service-cover font { width: 90%; }
    #service-cover-degradado { height: 90vh; }
    #servicio-pre-menu { display: none; } #servicio-mob-menu { display: flex; }
}

/* SECCION / FIVE LUXURY */
#five-luxury-global {
    padding: 20vh 0;
    position: relative;
    background-color: var(--color4);
    
    transition: all 1s ease;
}

#five-luxury-imagen {
    width: 50%;
    max-width: 750px;
    height: 40vh;
    max-height: 400px;
    min-height: 200px;
    margin: 0 5%;
    
    background-position: center;
    background-size: cover;
    
    position: relative;
}

#five-luxury-info {
    width: 25%;
    height: auto;
    margin-right: 15%;
    color: var(--color0);
} #five-luxury-info img {
    width: 90%;
    height: auto;
    margin: 20px 0;
} #five-luxury-info p, #five-luxury-info a {
    margin-bottom: 30px;
} 

#fliimg-1 { display: block; }
#fliimg-2 { display: none; }

@media screen and (max-width: 500px){
    #five-luxury-imagen, #five-luxury-info {
        width: 90%;
        margin: 10px auto;
    }
    #five-luxury-info img { width: 100%; }
    #fliimg-1 { display: none; }
    #fliimg-2 { display: block; }
}

/* SECCION / E */
.sec-e {
    padding: 20vh 0;
}

.titulo-sec-e {
    width: 90%;
    margin: 0 auto;
    font-family: var(--font1);
    font-size: 4em;
    text-align: center;
    text-transform: uppercase;
}

.info-sec-e {
    width: 90%;
    max-width: 850px;
    margin: 30px auto 0 auto;
    font-family: var(--font0);
    text-align: center;
}

#about_us {
    background-image: url(../imgs/texturas/relleno-de-espacios-estampa-bottom.png);
    background-position: center bottom;
    background-size: contain;
    background-repeat: no-repeat;
}

#our_history {
    background-image: url(../imgs/texturas/relleno-de-espacios-seccion-6.png);
    background-position: left bottom;
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (max-width: 500px){
    #our_history {
        background-size: 150%;
    }
}

/* SECCION / SERVICIOS */
#descripcion_servicios {
    padding: 100px 20px 20px 20px;
    font-family: var(--font0);
    font-size: var(--subtexto);
    
    box-sizing: border-box;
    position: relative;
    justify-content: flex-start;
    align-items: flex-start;
}

#comentario-ceo {
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    margin: 100px 0 -100px 0;
}

img[src="imgs/firmas/personal.png"] {
    width: 75%;
    margin-bottom: -20px;
    display: block;
}

@media screen and (max-width: 500px){
    #descripcion_servicios {
        justify-content: center;
        align-items: center;
    }
    
    #comentario-ceo {
        position: relative;
        top: 40px;
        text-align: center;
    } 
    
    img[src="imgs/firmas/personal.png"] {
        margin: 0 auto -20px auto;
    }
}

img[src="imgs/EN/seccion-3-titulo.png"], img[src="imgs/ES/seccion-3-titulo.png"], img[src="imgs/PT/seccion-3-titulo.png"] {
    width: 75%;
    max-width: 450px;
}

#servicios_general {
    padding: 100px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#servicios_general_img_titulo {
    width: 80%;
    max-width: 550px;
}

#servicios_contenedor {
    width: 100%;
    height: auto;
    margin: 50px 0;
    
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.servicio_individual {
    width: 30%;
    margin: 30px auto;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--color4);
}

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

@media screen and (max-width: 1200px){
    .servicio_individual {
        width: 90%;
    }
}

.servicio_imagen {
    width: 100%;
    height: 300px;
    margin-bottom: 15px;
    background-position: center;
    background-size: cover;
    
    position: relative;
} .servicio_imagen:hover {
    
} 

.servicio_titulo {
    font-family: var(--font1);
    font-size: var(--subtitulo);
    margin-bottom: 10px;
    text-transform: uppercase;
    text-align: center;
}

.servicio_texto {
    font-family: var(--font0);
    font-size: var(--subtexto-m);
    margin-bottom: 10px;
    text-align: center;
}

#service-gallery {
    
} 

#service-gallery img {
    width: 85%;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
    
    display: block;
}

#contenedor-galeria {
    justify-content: space-around;
    margin-top: 20px;
}

.img-galeria {
    flex: auto;
    height: 25vh;
    min-height: 200px;
    max-height: 300px;
    background-color: white;
    background-position: center;
    background-size: cover;
    
}

/* SECCION / MAPA DEL MUNDO */
#mapa_del_mundo {
    padding: 100px 0;
    position: relative;
}

img[src="imgs/EN/seccion-4-titulo.png"], img[src="imgs/ES/seccion-4-titulo.png"], img[src="imgs/PT/seccion-4-titulo.png"] {
    width: 80%;
    max-width: 500px;
    display: block;
    margin: 0 auto;
}

#paises_mapa_del_mundo {
    max-width: 800px;
    color: var(--color0);
    display: block;
    margin: 20px auto;
    padding: 0 20px;
    text-align: center;
}

/*--Este espacio es para la imagen que muestra las ubicaciones en todo el mundo--*/
:root {
    /* Alto del mundo */
    --alto-m: 500px;
}

#world {
    width: 90vw;
    max-width: 750px;
    height: 60vw;
    max-height: var(--alto-m);
    margin: 40px auto;
    position: relative;
}

#ubica {
    width: 90vw;
    max-width: 750px;
    height: 60vw;
    max-height: var(--alto-m);
    
    display: block;
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

#fondo_msk { 
    width: 100%;
    height: 60vw;
    max-height: var(--alto-m);
    position: absolute;
    background-image: url(../imgs/texturas/fondo_mask.png);
    background-size: 100% 100%;
    background-attachment: fixed;
    top: 0;
    left: 0; 
    z-index: 1;
    -webkit-mask-image: url(../imgs/extras/mask_world-01.svg);
    mask-image: url(../imgs/extras/mask_world-01.svg);
    -webkit-mask-size: 100% auto;
    mask-size: 100% auto;
}

/* ESTRELLAS DECORATIVAS */
.deco-superior {
    width: 10%;
    min-width: 75px;
    max-width: 110px;
    
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
}

.deco-inferior {
    width: 10%;
    min-width: 75px;
    max-width: 110px;
    
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
}

/* SECCION / MEMBRESÍAS */
#membresias {
    padding: 20vh 0;
    position: relative;
} 

#membresia-images {
    width: 50%;
    min-height: 40vh;
    margin-left: 10%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#membresia-info {
    width: 25%;
    height: auto;
    margin-right: 15%;
    color: var(--color0);
} #membresia-info img {
    width: 75%;
    height: auto;
    margin: 20px 0;
} #membresia-info p, #membresia-info a {
    margin-bottom: 30px;
} 

#moreinfomembresia { 
    font-family: var(--font0); 
    font-size: var(--subtexto); 
    color: var(--color7); 
    text-decoration: none;
} #moreinfomembresia:hover {
    text-decoration: underline;
}

@media screen and (max-width: 500px){
    #membresias { padding: 75px 0; }
    #membresia-images { width: 90%; min-height: 30vh; margin: 5%; }
    #membresia-info { width: 90%; margin: 5%; text-align: center; }
    #membresia-info a { margin: 0 auto 20px auto; }
}

/* SECCIÓN / FORM */
#formulario-de-contacto {
    background-image: url(../imgs/texturas/relleno-de-espacios-seccion-6.png);
    background-position: left bottom;
    background-size: 50%;
    background-repeat: no-repeat;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

#contacto {
    width: 50%;
    height: auto;
    margin: 125px 5%;
    font-family: var(--font1);
} #contacto input, #contacto textarea {
    width: 100%;
    padding: 10px 0;
    margin: 5px 0;
    background-color: transparent;
    font-family: var(--font1);
    font-size: var(--texto);
    border: 0;
    border-bottom: 1px solid var(--color3);
    color: var(--color3);
    
    box-sizing: border-box;
} #contacto input:focus, #contacto textarea:focus {
    outline: none;
} #contacto textarea {
    resize: none;
} #contacto select {
    margin: 20px 0;
}

#contacto-info {
    width: 30%;
    margin: 125px 10% 125px 0;
    background-image: url(../imgs/texturas/servicios-estampa.png);
    background-size: contain;
    background-position: left bottom;
    background-repeat: no-repeat;
} #contacto-info img {
    width: 80%;
    display: block;
}

@media screen and (max-width: 500px){
    #formulario-de-contacto {
        flex-direction: column-reverse;
        background-size: 125%;
    }
    
    #contacto { width: 80%; margin: 10%; text-align: center; }
    #contacto-info { width: 80%; margin: 10%; text-align: center; }
}

/* SECCIÓN : MAPA */
#direccion-mapa {
    width: 100%;
    min-height: 60vh;
}

/* info.php */
img[src="imgs/firmas/DC-vertical-1tinta-azul.png"] {
    width: 210px;
    height: auto;
    margin: 20px auto;
    
    display: block;
}