/*
CSS Designed for Queentessence
If it's useful for inspiration, take it.
*/

/* GENERICS */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,300;0,400;0,600;0,700;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400&family=Ubuntu:wght@300;400&display=swap');


:root{
    --backgroundColor: #fff;
    --primaryColor: #AA8800;
    --secondaryColor: #6A0DAD;
    --oroColor: #ede5d4;
    --brownColor: #b9a378;
    --mutedColor: #2b2a2a;
    --darkColor: #545f5e;
}

body{box-sizing: border-box;font-family: 'Source Serif Pro', serif;overflow-x: hidden;}

#main-back-image{position: fixed;width: 100%;height: auto;z-index: -1;}
#back-opacity{height: 100vh;position: fixed;width: 100%;background-color: rgba(255,255,255,0.5);z-index: 0;}

header{background-color: white;background-image: url('../imgs/NavegDoradoTQE.png');
    background-repeat: no-repeat;background-size: cover;position: relative;margin: 0;padding: 0;height: 100px;
    box-shadow: 3px 3px 9px rgba(0,0,0,0.2);z-index: 10;}
header ul{list-style-type: none;list-style-position: inside;margin: 0;padding: 0;font-family: 'Source Sans Pro', sans-serif;letter-spacing: 1px;}
header ul li a{border: none;color: var(--darkColor);text-decoration: none;}
header ul li a:hover{color: var(--primaryColor);}
#nav-social{position: absolute;top: 0;right: 100px;width: 90px;text-align: center;font-size: 1.6rem;color: var(--primaryColor);}
#nav-social > i:first-of-type{margin-right: 4px;}
#nav-social a{color: var(--primaryColor);}
#nav-lang{position: absolute;top: 0.6rem;right: 10px;width: 80px;text-align: center;font-size: 0.9rem;font-family: 'Source Sans Pro', sans-serif;}
#nav-logo{width: 12%;position: absolute;top: -10px;left: 44%;border-radius: 50%;
    background-image: url('../imgs/back-logo.png');
    background-repeat: no-repeat;
    background-color: white;
    background-size: cover;
}
#nav-logo img{width: 100%;padding-top: 10px;}



#nav-left{position: absolute;bottom: 10px;left: 10%;width: 30%;}
#nav-left p{color: var(--primaryColor);font-size: 1.6rem;margin: 0;padding: 0;letter-spacing: 0.1rem;}
#nav-left ul, #nav-right ul{display: flex;justify-content: space-between;text-transform: uppercase;font-size: 0.8rem;margin-top: 8px;}
#nav-right{position: absolute;bottom: 10px;right: 5%;width: 35%;}
#nav-right p{color: var(--primaryColor);font-size: 1.3rem;margin: 0;padding: 0;}

.mobile-nav-toggle{display: none;}
#mobile-nav{display: none;}

main{background-color: rgba(255,255,255,0.9);width: 95%;
    margin: 0 auto 50px auto;box-shadow: 3px 3px 12px rgba(0,0,0,0.5);
    padding: 40px 20px 20px 20px;border-radius: 0px 0px 4px 4px;}

/*******************************************
HOME
********************************************/
#welcome-blurb{position: relative;}
    #estrella-back{background-image: url('../imgs/dodeca.png');background-repeat: no-repeat;background-size:  auto;background-size: auto 100%;background-position: center center;padding-top: 20px;padding-bottom: 20px;position: relative;}
    #estrella-back h1, #estrella-backc h1, #estrella-backb h1{background-color: white;box-shadow: 3px 3px 12px rgba(0,0,0,0.2);color: var(--primaryColor);text-align: center;letter-spacing: 0.1rem;z-index: 6;width: 90%;position: absolute;top: 44%;left: 5%;font-size: 1.5rem;font-weight: 400;padding: 10px 0;}
    p.welcome-text{font-weight: 400;font-size: 1.3rem;width: 33%;color: var(--primaryColor);text-align: center;background-color: white;padding: 20px;z-index: 6;position: absolute;top: 55%;left: 33%;line-height: 1.2;}
    #welcome-frame{width: 86%;margin: 0 auto;border: 2px solid var(--primaryColor);}
    #welcome-frame-internal{border: 1px solid var(--primaryColor);margin: 10px;position: relative;}
    #welcome-frame-internal img{display: block;width: 60%;margin: 10px auto;}
    #estrella-backb{background-image: url('../imgs/dodeca.png');background-repeat: no-repeat;background-size: auto;background-size: auto 100%;background-position: center center;padding-top: 20px;padding-bottom: 20px;position: relative;margin-top: 60px;}
    #gallery-frame{width: 86%;margin: 0 auto;border: 2px solid var(--primaryColor);}
    #gallery-frame-internal{border: 1px solid var(--primaryColor);margin: 10px;position: relative;}
    #gallery-frame-internal img{display: block;width: 60%;margin: 25px auto;}
    #gallery-descr{display: block;width: 36%;position: absolute;top: 50%;left: 32%;color: white;text-align: center;padding-bottom: 6%;background-color: rgba(170,136,0,0.7);border-bottom-left-radius: 50%;border-bottom-right-radius: 50%;}
    #estrella-backc{background-image: url('../imgs/dodeca.png');background-repeat: no-repeat;background-size: auto;background-size: auto 100%;background-position: center center;padding-top: 20px;padding-bottom: 20px;position: relative;margin-top: 60px;}

/*******************************************
WATERCOLOUR
********************************************/
#water-frame-internal{border: 1px solid var(--primaryColor);margin: 10px;position: relative;}
    #water-frame-internal img{display: block;width: 90%;margin: 0 auto;padding: 70px 0;}
    #water-descr{width: 54%;position: absolute;top: 45%;left: 23%;color: white;text-align: center;background-color: var(--brownColor);}
    #water-descr p{padding: 0;width: 50%;margin: 0 auto 10px auto;font-weight: 300;font-size: 0.9rem;}
    #water-descr p:first-of-type{padding-top: 60px;padding-bottom: 10px;}
    #water-descr p:last-of-type{padding-bottom: 30px;}


/*******************************************
FLOWER CODE
********************************************/
#flowers-frame-internal{border: 1px solid var(--primaryColor);margin: 10px;position: relative;}
    #flowers-frame-distribution{width: 80%;margin: 30px auto;}
    img#triflower{width: 100%;z-index: 4;position: relative;}
    img#medio-circulo{width: 54%;position: absolute;top: 50%;left: 23%;z-index: 2;}

    #flower-frame-circle{width: 54%;position: absolute;top: 50%;left: 23%;z-index: 5;display: block;}
    #flower-frame-circle p{font-size: 0.9rem;color: white;text-align: center;margin-top: 30px;}
    #flower-frame-circle-mobile{display: none;}


#flowers-two{position: relative;width: 90%;margin: 30px auto;display: grid;gap: 2rem;grid-template-columns: 1fr 1fr;}
#flowers-two h1{color: var(--primaryColor);text-align: center;font-size: 2rem;font-weight: 400;margin-bottom: 0px;letter-spacing: 1px;grid-column: span 2;}
#flowers-two p{font-size: 0.9rem;}
#flowers-two img{width: 100%;}

#flowers-three{position: relative;width: 90%;margin: 70px auto;display: grid;gap: 2rem;grid-template-columns: 1fr 1fr;}
#flowers-three p{font-size: 0.9rem;}
#flowers-three img{width: 100%;}



/*******************************************
QUEENTESSENCE
********************************************/
#queen-content{display: grid;gap: 0;grid-template-columns: 1fr 1fr;}
#queen-content h1{color: var(--primaryColor);text-align: center;font-size: 1.9rem;font-weight: 400;margin-top: 30px;margin-bottom: 20px;letter-spacing: 1px;grid-column: span 2;}

#queen-img{
    position: relative;
}
#queen-img img#uno{width: 100%;}

#queen-content-descr{
    width: 80%;margin: 0 auto;
    font-size: 0.9rem;

}



/*******************************************
EXHIBITION
********************************************/

h1#exhibition-title{color: var(--primaryColor);font-size: 2rem;font-weight: 400;width: 70%;margin: 20px auto;text-align: center;}


#exhibition-container{
    display: grid;gap: 0;grid-template-columns: 1fr 1fr;
    text-align: left;
}
#exhibition-container div:first-of-type{width: 80%;margin: 0 auto 0 8%;}
#exhibition-container p{font-size: 1rem;}
#exhibition-container img{width: 90%;margin: 0 auto 10px auto;display: block;}


#exhibition-two{position: relative;width: 90%;margin: 40px auto;display: grid;gap: 2rem;grid-template-columns: 1fr 1fr;}
#exhibition-two h2{color: var(--primaryColor);text-align: center;font-size: 1.8rem;font-weight: 400;margin-top: 30px;margin-bottom: 20px;letter-spacing: 1px;grid-column: span 2;    }
#exhibition-two p{font-size: 0.9rem;}
#exhibition-two img{width: 100%;}


/*******************************************
ArtAlkemyst
********************************************/

h1#alkemyst-title{color: var(--primaryColor);font-size: 2rem;font-weight: 400;width: 70%;margin: 20px auto;text-align: center;}

#artalkemyst-main{display: grid;gap: 2rem;grid-template-columns: 1fr 1fr;margin-top: 40px;}
    #artalkemyst-descr{width: 88%;margin: 0 0 0 auto;}
    #artalkemyst-descr p{padding: 0;margin: 0;font-size: 0.9rem;}

    #artalkemyst-pics{position: relative;padding-top: 10px;}
    #artalkemyst-pics img:last-of-type{width: 100%;}
    img#logo-alkemyst{width: 100px;position: absolute;top: -50px;left: 45%;}



/*******************************************
Contact
********************************************/
#contact-info{width: 86%;margin: 30px auto 40px auto;}
#contact-info h1{text-align: center;text-transform: capitalize;color: var(--primaryColor);font-size: 1.8rem;margin: 30px 0;}

#contact-border{margin: 100px auto;position: relative;display: grid;gap: 0;grid-template-columns: 1fr 1fr;align-items: center;min-height: 200px;}
    #contact-border p{font-size: 1.1rem;line-height: 1.4;margin: 0 0 10px 0;padding: 0;}
    #contact-border div{padding: 25px 18px 25px 18px;}
    #contact-border p.destaque{background-color: var(--primaryColor);font-size: 1.1rem;padding: 8px 3px;text-align: center;}
    #contact-border p.destaque a{color: white;text-decoration: none;}
#contact-footer{text-align: center;font-size: 0.8rem;}



/*******************************************
ART PATRON
********************************************/

#art-patron{width: 86%;margin: 20px auto 20px auto;position: relative;}
#art-patron h1{text-align: center;text-transform: capitalize;color: var(--primaryColor);font-size: 1.8rem;margin: 30px 0;}

#art-patron-data{display: grid;gap: 1rem;grid-template-columns: 1fr 1fr 1fr;text-align: justify;}

#art-patron-data img{width: 100%;}
#art-patron-data div{width: 90%;margin: 0 auto;}
#art-patron-data div:first-of-type{padding-left: 14px;}
#art-patron-data p.ref-contacto{text-align: center;margin-top: 12px;color: var(--primaryColor);font-size: 1.2rem;}
#art-patron-data p.ref-contacto a{color: var(--primaryColor);text-decoration: none;}
p.bottom-patron{width: 90%;margin: 14px auto 0 auto!important;font-size: 0.8rem !important;padding: 0;line-height: 1.1;color: black !important;}
#art-patron-img img{width: 50%;margin: 10px auto;display: block;}



/*******************************************
GALLERY
********************************************/
#gallery-main{margin-top: 30px;}

#gallery-main h1{text-align: center;color: var(--primaryColor);font-size: 2rem;text-align: center;margin-bottom: 60px;}

#gallery-item{
    display: grid;gap: 1rem;grid-template-columns: 60% 1fr;align-items: center;
}
#gallery-item .request-price{text-align: center;width: 70%;min-width: 170px;
    margin: 0 auto;}

#gallery-item .request-price a{
    background-color: var(--primaryColor);color: white;font-size: 0.9rem;padding: 10px 20px;
    text-decoration: none;
}
#gallery-item img{
    width: 80%;margin: 0 0 0 auto;
    display: block;
}








/****************************************************
    Pantallas Móviles < 800 px
*****************************************************/
@media (max-width: 860px){
    /* navigation */
    header{background-size: auto 200px;position: relative;}
    #nav-logo{width: 80px;position: absolute;top:10px;left: 1%;background-image: none;background-color: transparent;}
    #nav-logo img{width: 100%;padding-top: 0px;}
    header ul{list-style-type: none;list-style-position: inside;}
    header ul li a{border: none;color: var(--darkColor);text-decoration: none;}
    header ul li a:hover{color: var(--primaryColor);}
    #nav-social{display: none;}
    #nav-lang{display: none;}
    #nav-right{position: absolute;bottom: 20px;left: 100px;width: 70%;}
    #nav-right p{font-size: 1.2rem;}
    #nav-left{position: absolute;bottom: 45px;left: 100px;width: 70%;}
    #nav-left p{font-size: 1.2rem;}
    #nav-left ul, #nav-right ul{display: none;}

    .mobile-nav-toggle{display: block;position: absolute;top: 30px;right: 10px;font-size: 2rem;background-color: transparent;border: none;}
    #mobile-nav{display: none;position: absolute;top: 100px;right: 0;height: 100vh;width: 50%;background-color: var(--primaryColor);z-index: 40;padding-top: 10px;box-sizing: border-box;}
    #mobile-nav a{color: white;text-decoration: none;display: block;width: 90%;margin: 4px 0 4px auto ;font-size: 1.2rem;}
    #mobile-nav a:hover{color: var(--secondaryColor);}
    #mobile-social{border-top: 1px solid white;padding: 8px 0 0 0;margin-top: 10px;text-align: center;}
    #mobile-social a{display: inline;}
    #mobile-social i{font-size: 2rem;margin: 0 3px;}

    /* HOME */
    #welcome-frame-internal img {width: 100%;}
    #estrella-back h1 {letter-spacing: auto;width: 95%;font-size: 1.3rem;}
    #welcome-descr{display: none;}


    /* ArtAlkemyst */
    #artalkemyst-main{gap: 1rem;grid-template-columns: 1fr;}
    #artalkemyst-descr{width: 90%;margin: 0 auto 40px auto;}
    #artalkemyst-descr p{font-size: 1rem;}

    /* QUEENTESSENCE */
    #queen-content{grid-template-columns: 1fr;}
    #queen-content h1{margin-top: 0px;grid-column: span 1;}
    #queen-content-descr{width: 90%;margin: 0 auto;font-size: 1rem;}

    /* FLOWER CODE */
    #flowers-two h1{grid-column: span 1;}
    #flowers-frame-distribution{width: 100%;margin: 30px auto;}
    img#triflower{width: 100%;z-index: 4;position: relative;}
    img#medio-circulo{width: 70%;position: absolute;top: 50%;left: 15%;z-index: 2;}
    #flowers-two{margin: 40px auto;display: grid;gap: 1rem;grid-template-columns: 1fr;}
    #flowers-two h2{grid-column: span 1;}
    #flowers-two p{font-size: 1rem;}
    #flowers-three{margin: 70px auto;display: grid;gap: 1rem;grid-template-columns: 1fr;}
    #flowers-three p{font-size: 1rem;}
    #flowers-three img{width: 100%;}


    #flower-frame-circle-mobile{width: 54%;position: absolute;top: 50%;left: 23%;z-index: 5;display: block;}
    #flower-frame-circle-mobile p{font-size: 0.7rem;color: white;text-align: center;margin-top: 30px;}
    #flower-frame-circle{display: none;}
    
    

    /* EXHIBITION */
    h1#exhibition-title{color: var(--primaryColor);font-size: 1.6rem;font-weight: 400;width: 90%;margin: 0 auto 20px 0;}
    #exhibition-container{grid-template-columns: 1fr;}
    #exhibition-container div:first-of-type{width: 80%;margin: 0 auto 0 8%;}
    #exhibition-container p{font-size: 0.9rem;line-height: 1.1;}
    #exhibition-container img{width: 90%;margin: 34px auto 10px auto;display: block;}
    #exhibition-two{margin: 40px auto;gap: 1rem;grid-template-columns: 1fr;}
    #exhibition-two h2{font-size: 1.8rem;margin-top: 30px;margin-bottom: 20px;grid-column: span 1;}
    #exhibition-two p{font-size: 1rem;}

    /* GALLERY */    
    #gallery-frame-internal img{display: block;width: 90%;margin: 25px auto;}
    #gallery-item{gap: 1rem;grid-template-columns: 1fr;}
    #gallery-item .request-price{width: 70%;min-width: 170px;margin: 0 auto;}
    #gallery-item img{width: 100%;margin: 0 0 0 auto;}


    /* ART PATRON */
    #art-patron{width: 90%;margin: 10px auto 20px auto;}
    #art-patron-data{grid-template-columns: 1fr;}
    #art-patron-data div{width: 90%;margin: 0 auto;}
    #art-patron-data div:last-of-type{padding-top: 24px;}
    

    /* Contact */
    #contact-info{width: 90%;margin: 30px auto 40px auto;}
    #contact-info h1{text-align: center;text-transform: capitalize;color: var(--primaryColor);font-size: 1.8rem;margin: 30px 0;}

    #contact-border{margin: 0px auto;grid-template-columns: 1fr;}
    #contact-border p{font-size: 1.1rem;line-height: 1.4;margin: 0 0 10px 0;padding: 0;}
    #contact-border p.destaque{background-color: var(--primaryColor);color: white;font-size: 1.1rem;padding: 8px 3px;text-align: center;}



}



/****************************************************
    Ajustes Móvil base 320 px
*****************************************************/
@media (max-width: 500px){

    #main-back-image{position: fixed;width: auto;height: 100%;z-index: -1;}

    #estrella-back h1 {letter-spacing: auto;width: 95%;font-size: 0.9rem;}
    p.welcome-text{font-weight: 400;
        font-size: 0.8rem;width: 50%;color: var(--primaryColor);text-align: center;background-color: white;
        padding: 10px;z-index: 6;position: absolute;top: 56%;left: 25%;line-height: 1.2;
    }
    #estrella-backb h1{background-color: white;box-shadow: 3px 3px 12px rgba(0,0,0,0.2);color: var(--primaryColor);
        text-align: center;letter-spacing: auto;z-index: 6;width: 90%;position: absolute;top: 38%;left: 5%;font-size: 1.1rem;
        font-weight: 400;padding: 8px 0;}
    #estrella-backc h1 {background-color: white;box-shadow: 3px 3px 12px rgba(0,0,0,0.2);color: var(--primaryColor);
        text-align: center;letter-spacing: 0.1rem;z-index: 6;width: 90%;position: absolute;top: 40%;left: 5%;font-size: 1.1rem;
        font-weight: 400;padding: 8px 0;}
}