/*
Theme Name: Eternal Diamonds
Author: Juliett Busuioc
Description: Grundtema för Fullstack webbutvecklare online butik
Version: 1.0
License: Online Butik Eternal Diamonds © 2021 by Juliett Busuioc is licensed under Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)
Tags: e-commerce, online butik, web development, fullstack.
Text Domain: Online Butik for fullstack webbutveclking.
It is forbidden to reproduce and/or use any part of this code without explicit written authorization from the author.
*/
.hamburger-bars, .hamburger-bars img, .hamburger-x, .hamburger-x img{
    display: none;
}
/*----------------------*/
/*--NORMALIZING/RESET---*/ 
/*----------------------*/
html{
    font-size: 16px;
    color: #353232;
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
h2, caption{
    background-color: var(--h2-background);
    line-height: var(--h2-lineHeight);
    padding: 10px;
    text-align: center;
    font-family: 'Playfair Display', serif, Verdana, Georgia, Tahoma, sans-serif;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
}
/*----------------------*/
/*--VARIABLES-----------*/ 
/*----------------------*/
:root{
    /*--Border Color of element in focus--*/
    --borderfocus: black;

    /*--All h2--*/
    --h2-background: #F6D1D7;
    --h2-color: #353232;    
    --h2-lineHeight: 3rem;
    --h2-fontSize: 1rem;
    --h2-fontFamily: 'Playfair Display', serif;

    /*--Button products--*/
    --btn-hover: white;
    --btn-font: 1.2rem;
    
    /*--nav up--*/
    --nav-up-backgroundColor: #F6D1D7;
    --nav-up-height: 40px;
    --nav-up-fontSize: 1rem;
    --nav-up-lineHeight: 0.5rem;
    --nav-up-color: #353232;

    /*--nav-menu--*/
    --nav-menu-background: #F9F1F2;
    --nav-menu-height: 80px;
    --nav-menu-fontSize: 1rem;
    --nav-menu-lineHeight: 5rem;
    --nav-menu-color: #353232;

    /*--Hamburgare meny--*/
    --primary-color:#f6d1d7e1;
    --hamburger-overlay-color: #C4C4C4;
    --hamburger-overlay-color: #c4c4c4c0;
    --hamburger-bars-color: #353232;
    --hamburger-cross-color: #353232;
    --hamburger-menu-speed: 0.75s;
    --hamburger-menu-hover-color: white; 
	--hamburger-menu-text-color: red;

    /*--Carousel1--*/
    --carousel1-width: 100%;
    --carousel1-height: 500px;
    --numberOfImages: 4;
    --visibleImageDuration: 5s;
    --transitionDuration: 0.3s; /*1s*/
    --oneImageDuration: calc(var(--visibleImageDuration) + var(--transitionDuration)); /* 4s + 0.3s = 4.3s*/
    --carousel1Transition: calc(var(--oneImageDuration) * var(--numberOfImages)); /* 4.3s * 4 = 17.2s*/

    /*--Main background color--*/
    --main-backgroundColor: #F2F2F2;

    /*--Products--*/
    --proddescription-lineHeight: 30px;
    --proddetails-cont-backgroundColor: #C4C4C4;
    --proddetails-btn-padding: 1vw;    
    --proddetails-btn-backgroundColor: #F6D1D7;
    --proddetails-btn-color: #353232;
    --proddetails-btn-fontSize: 1.2rem;
    --proddetails-btn-hover-backgroundColor: white;
    --proddetails-btn-focus-color: #f73253;/*darker rose*/
    --proddetails-btn-active-color: #e94f69;

    /*--Footer--*/
    --footer123-backgroundColor: #C4C4C4;
    --footer-height: 30vh;
    /* --footer-height-cell-minHeight: 30vh; */
    --footer-a-p-fontSize: 1.5vw;
    --footer-lineHeight: 2vw;
    
    --footer-h2-color: #353232;
    --footer-h2-background: #F6D1D7;

    --footer-btn-fonts: 1.5rem;
    --footer-btn-background: #F6D1D7;
    --footer-btn-color: #353232;

    --footer-lineHeight-cell: 8vw;
    --footer-lineHeight-tablet: 5vw;
    --footer-lineHeight-desktop: 2.5vw;
}
/*----------------------*/
/*--WRAPPER-------------*/
/*----------------------*/
#wrapper{
    margin: 0 auto;
    padding: 0; /*Margin for the grid*/
    width: 100%; /*960px at @media query*/
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
    grid-template-areas: 
    "header         header          header"
    "main           main            main"
    "footer         footer          footer";
}
/*----------------------*/
/*--HEADER--------------*/ 
/*----------------------*/
.header{
    grid-area: header;
    height: 120px;
    padding: 0;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);

    position: sticky;
    top: 0;
    z-index: 3;
}
/*----------------------*/
/*--NAV-MENUs------------*/ 
/*-----------------------*/
/*--Nav-up-----*/
.nav-up{
    height: var(--nav-up-height);
    background-color: var(--nav-up-backgroundColor);
}
.ul-up{
    list-style: none;
}
.li-up{
    display: inline-block;
    padding-left: 30px;
}
.li-up a{
    text-decoration: none;
    color: #353232;
    font-size: 1rem;    
}
.li-up a:hover{
    color: var(--proddetails-btn-focus-color);
    font-weight: bold;
}
.li-up a:focus{
    color: var(--proddetails-btn-focus-color);
}
.li-up a:active{
    color: var(--proddetails-btn-active-color);
}
.li-up label[for="currency"]{
    font-size: var(--nav-up-fontSize);
}
.li-up button{
    cursor: pointer;
}
/*--Nav-menu-----*/
.nav-menu{
    background-color: var(--nav-menu-background);
    height: var(--nav-menu-height);
    font-size: var(--nav-menu-fontSize);
    
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.li-nav{
    display: inline-block;
    list-style: none;
    padding-left: 30px;
}
.li-nav a{
    text-decoration: none;
    color: var(--nav-menu-color);
    font-size: var(--nav-menu-fontSize);
    line-height: var(--nav-menu-lineHeight);
}
.li-nav a:hover{
    text-decoration: none;
}
.li-nav a:hover{
    font-weight: bold;
}
.li-nav a:focus{
    color: var(--proddetails-btn-focus-color);
    outline: 1px solid black;
}
.li-nav a:active{
    color: var(--proddetails-btn-active-color);
}
/*----------------------*/
/*--MAIN----------------*/ 
/*----------------------*/
.main{
    grid-area: main;

    margin: 0 auto;
    padding: 0; /*Margin for the grid*/
    width: 100%;
    
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
    grid-template-areas: 
        "article        article         article"
        "aside          aside           aside";
}
/*----------------------*/
/*--ARTICLE-------------*/ 
/*----------------------*/
.article{
    grid-area: article;

    background-color: var(--main-backgroundColor);
    margin: 0 auto;
    padding: 0; /*Margin for the grid*/
    width: 100%;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
    grid-template-areas: 
    "carousel1          carousel1           carousel1"
    "animation          animation           animation"
    "carousel2          carousel2           carousel2"
    "knowmore           knowmore            knowmore"
    "rings              rings               rings"
    "bracelets          bracelets           bracelets"
    "earrings           earrings            earrings"
    "necklaces          necklaces           necklaces"
    "video              video               video"
    "table-cont         table-cont          table-cont"
    "form               form                form"
    "aboutus            aboutus             aboutus";
}
/*----------------------*/
/*--CAROUSEL1-----------*/ 
/*----------------------*/
.carousel1{
    grid-area: carousel1;
    position: relative;
    width: var(--carousel1-width);
    height: var(--carousel1-height);
    overflow: hidden;
}
.carousel1 h2{
    display: none;
}
.img-carousel1{
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    /*---Animation---*/
    animation:
        fade /*animation-name*/
        var(--carousel1Transition) /*animation-delay = */ /*fixed: animation-duration*/
        linear /*animation-iteration-count*/ /*fixed: animation-timing-function*/
        infinite; /*animation-iteration-count*/
        object-fit: cover;
}
@keyframes fade{
    0%, 30%, 100%{
        opacity: 0;
    }
    5%, 25%{
        opacity: 1;
    }
}
.img-carousel1:first-child{
    animation-delay: 1s;
}
.img-carousel1:nth-child(2){
    animation-delay: var(--oneImageDuration);/*4s + 0.3s = 4.3s*/
}
.img-carousel1:nth-child(3){
    animation-delay: calc(var(--oneImageDuration) * 2);/*4.3s * 2 = 8.6s*/
}
.img-carousel1:nth-child(4){
    animation-delay: calc(var(--oneImageDuration) * 3);/*4.3 * 3 = 12.9*/
}
/*----------------------*/
/*--ANIMATION-----------*/ 
/*----------------------*/
.animation{
    grid-area: animation; 
    position: relative;
}
.ring{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
}
.ring img{
    display: block;
}
.ring img:first-child{/*prong*/
    position: absolute;
    left: 230px;
    top: 90px;
    width: 70px;
    display: none;
}
.ring img:nth-child(2){/*diamond*/
    position: absolute;
    top: 80px;
    left: 43%;
}
.ring img:last-child{/*ring*/
    margin-top: 100px;
}
.staricons img{
    filter: drop-shadow(7px 7px 4px #888888);
}
/*----------------------*/
/*--CAROUSEL2-----------*/ 
/*----------------------*/
.carousel2{
    grid-area: carousel2;
}
.gallery-cont{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}
.gallery-item{ /*<a> Element*/
    width: 100%;
    height: 100%;
    min-height: 225px; /*Björn*/

    max-width: 100vw;
    max-height: 100vh;
    margin: 5px;
    text-decoration: none;
    font-size: 2rem;
    color: black;
    text-shadow: 1px 1px 10px rgb(250, 246, 246);  

    display: flex;
    justify-content: center;
    align-items: center; 

    /*TRANSITION*/
    transition: all 0.5s;/*Transition must be applied to the element to be animated not to its container*/        
    background-size: 400% 400%;    
    position: relative; /*To position gallery-cover*/
}
.gallery-cover{ /*<div> background image*/
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    /* mix-blend-mode: screen; not necessary here*/
}
.gallery-item:hover{/*Luminosity*/
    box-shadow: 4px 4px 40px #131212;
    background-position: 100% 100%;
    background-image: linear-gradient(-45deg, #e9b4b428 0%,  #e9b4b4 25%,  #1e539e 50%,  #ff3083 75%, #7800a8 100%);
    background-image: -webkit-linear-gradient(-45deg, #e9b4b428 0%,  #e9b4b4 25%,  #1e539e 50%,  #ff3083 75%, #7800a8 100%);
    background-image: linear-gradient(135deg, #dfcbcb 0%,  #e9b4b4 25%,  #1e539e 50%,  #ff3083 75%, #7800a8 100%);
    background-image: -webkit-linear-gradient(135deg, #dfcbcb 0%,  #e9b4b4 25%,  #1e539e 50%,  #ff3083 75%, #7800a8 100%);

    
    
}
.gallery-cont .gallery-item h3{
    opacity: 1;
}
.gallery-cont .gallery-item h3:hover{
    opacity: 0;
    color: white;
    outline: 1px solid red;
}
.gallery-img1{/*<div> background image 1 */
    background-color: #F6D1D7;
    background-image: url(assets/images/carousel2-rings.webp);
    background-repeat: no-repeat;
    background-position: center;
    /*background: background attachment  background-box background-color background-image background-position background-repeat background-size*/
    /*background: background-color background-image background-repeat background-position*/
    /* background: #F6D1D7 url(assets/images/carousel2-rings.jpg) no-repeat center; */
}
.gallery-img2{/*<div> background image 2 */
    background: #F6D1D7 url(assets/images/carousel2-bracelets.webp) no-repeat center;
}
.gallery-img3{/*<div> background image 3 */
    background: #F6D1D7 url(assets/images/carousel2-earrings.webp) no-repeat center;
}
.gallery-img4{/*<div> background image 4 */
    background:#F6D1D7 url(assets/images/carousel2-necklaces.webp) no-repeat center;
}
/*----------------------*/
/*--KNOW MORE-----------*/ 
/*----------------------*/
.knowmore{
    grid-area: knowmore;
}
.knowmore a{
    width: 100%;
    height: 100%;
    display: block;

    display: flex;
    justify-content: center;
    align-items: center;
}
/*----------------------*/
/*--PRODUCTS------------*/ 
/*----------------------*/
.prod-cont{
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.prodimage-cont{
    position: relative;
}
.prodimage-cont img{
    width: 100%;
    height: 100%;
}
.prodtitle{
    position: absolute;
    bottom: 30px;
    left: 10px;
}
.prodprice{
    position: absolute;
    left: 10px;
    bottom: 10px;
}
.proddetails-cont{
    background-color: var(--proddetails-cont-backgroundColor);
    height: 160px;
    line-height: 30px;
    width: 100%;
}
.staricons-cont{
    margin-top: 5px;
}
.proddetails-cont p{
    margin-top: 5px;
    margin-bottom: 15px;
    line-height: 30px;
    padding-left: 10px;
}
.proddetails-cont a, .btn-send{
    text-decoration: none;
    margin-bottom: 10px;
    padding: var(--proddetails-btn-padding);
    color: var(--proddetails-btn-color);
    background-color: var(--proddetails-btn-backgroundColor);
    font-size: var(--proddetails-btn-fontSize);
    border-radius: 4px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.proddetails-cont a:hover, .btn-send:hover{
    background-color: var(--proddetails-btn-hover-backgroundColor);
}
.proddetails-cont a:focus, .btn-send:focus{
    color: var(--proddetails-btn-focus-color);
    outline: 2px solid var(--borderfocus);
}
.proddetails-cont a:active, .btn-send:active{
    color: var(--proddetails-btn-active-color);
}
.proddetails-btn-cont{
    display: flex;
    justify-content: center;
}
/*----------------------*/
/*--RINGS---------------*/ 
/*----------------------*/
.rings{
    grid-area: rings;
}
.rings-cont{
    margin: 0 auto;
    width: 100%; 
    
    display: grid;
    gap: 20px; /*Gutter*/
    padding: 0; /*Margin for the grid*/
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
    grid-template-areas:
        "ring1  ring2   ring3";
}
.ring1{
    grid-area: ring1;
}
.ring2{
    grid-area: ring2;
}
.ring3{
    grid-area: ring3;
}
/*----------------------*/
/*--BRACELETS-----------*/ 
/*----------------------*/
.bracelets{
    grid-area: bracelets;
}
.bracelets-cont{
    margin: 0 auto;
    width: 100%;

    display: grid;
    gap: 20px; /*Gutter*/
    padding: 0; /*Margin for the grid*/
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
    grid-template-areas:
        "bracelet1  bracelet2   bracelet3";
}
.bracelet1{
    grid-area: bracelet1;
}
.bracelet2{
    grid-area: bracelet2;
}
.bracelet3{
    grid-area: bracelet3;
}
/*----------------------*/
/*--EARRINGS------------*/ 
/*----------------------*/
.earrings{
    grid-area: earrings;
}
.earrings-cont{
    margin: 0 auto;
    width: 100%;
    
    display: grid;
    gap: 20px; /*Gutter*/
    padding: 0; /*Margin for the grid*/
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
    grid-template-areas:
        "earrings1   earrings2   earrings3";
}
.earring1{
    grid-area: earrings1;
}
.earring2{
    grid-area: earrings2;
}
.earring3{
    grid-area: earrings3;
}
/*----------------------*/
/*--NECKLACES-----------*/ 
/*----------------------*/
.necklaces{
    grid-area: necklaces;
}
.necklaces-cont{
    margin: 0 auto;
    width: 100%;
    
    display: grid;
    gap: 20px; /*Gutter*/
    padding: 0; /*Margin for the grid*/
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
    grid-template-areas:
        "necklace1  necklace2   necklace3";
}
.necklace1{
    grid-area: necklace1;
}
.necklace2{
    grid-area: necklace2;
}
.necklace3{
    grid-area: necklace3;
}
/*----------------------*/
/*--VIDEO---------------*/ 
/*----------------------*/
.video{
    grid-area: video;
}
.video-cont{
    margin: 1rem auto;
	width: 80%;
	height: calc(0.56 * 100vw);
}
iframe{
    width: 100%;
	height: calc(0.56 * 100vw);
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    border: 0;
}
/*----------------------*/
/*--TABLE---------------*/ 
/*----------------------*/
.table-cont{
    grid-area: table-cont;
    display: block;
}
.tabout-diamonds{
    margin-top: 10px;
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
}
/*----------------------*/
/*--FORM----------------*/ 
/*----------------------*/
.form{
    grid-area: form;    
}
.form-cont{
    line-height: 30px;
    padding: 0 10px;
}
.inputform, .selectform{
    border-color: transparent;
    line-height: 30px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    min-width: 50%;    
}
.btn-send{
    border-color: transparent;
    margin-left: 0;
    width: 50%;
    cursor: pointer;
    font-weight: bold;
}
.btn-send-cont{
    display: flex;
    justify-content: center;
}
.fieldset-data, .fieldset-meddelande{
    padding: 20px;
}
.fieldset-data input[type="text"], 
.fieldset-data input[type="email"],  
.fieldset-data input[type="tel"], 
.selectform{
    height: 2rem;
    width: 100%;
}
.fieldset-gender{
    padding: 5px;
}
textarea{
    width: calc(100% - 10px);
}
/*----------------------*/
/*--STORE / ASIDE ------*/ 
/*----------------------*/
.store{
    grid-area: aside;
}
.store-cont{/*Street view*/
    padding-top: 10px;

    display: flex;
    justify-content: center;
    align-items: center;
}
.map-cont, .store-street-cont{ /*Map view*/
    width: 40%;
    margin: 1%;
}   
/*----------------------*/
/*--ABOUT US------------*/ 
/*----------------------*/
.aboutus{
    grid-area: aboutus;
}
.aboutus-cont{
    margin-top: 50px;
    padding: 10px;

    display: flex;
    justify-content: center;
    align-items: center;
}
.aboutus-cont p{
    line-height: 1rem;
    text-align: center;
    font-size: 1rem;
}
.aboutus img{
    filter: drop-shadow(7px 7px 4px #888888);
}
/*----------------------*/
/*--FOOTER--------------*/ 
/*----------------------*/
.footer{
    grid-area: footer;

    font-size: 1vw;
    margin: 0 auto;

    display: grid;
    gap: 20px; /*Gutter*/
    padding: 0 10px; /*Margin for the grid*/
    width: 100%;

    grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
    grid-template-areas:
        "footer1    footer2     footer3";
}
.footer1, .footer2, .footer3{
    text-align: center;
    height: var(--footer-height);
    padding: 1rem;
    font-size: 1rem;
    background-color: var(--footer123-backgroundColor);
    text-align: center;
}
.footer1 a, .footer1 address, .footer1 p, .footer2 a, .footer3 a, .footer3 p{
    font-size: var(--footer-a-p-fontSize);
    line-height: var(--footer-lineHeight);
    color: var(--footer-h2-color);
}
.footer1 a[href^="mailto"], .footer1 a[href^="tel"], .footer2 a, .footer3 a{
    transition: all 400ms ease-in-out;
}
.footer1 a[href^="mailto"]:hover, .footer1 a[href^="tel"]:hover, .footer2 a:hover, .footer3 a:hover{
    background-color: var(--h2-background);
    border: 1px solid #f38295;
}
.footer1 a[href^="mailto"]:active, .footer1 a[href^="tel"]:active, .footer2 a:active, .footer3 a:active{
    color: var(--proddetails-btn-active-color);
}
.footer1 a[href^="mailto"]:active, .footer1 a[href^="tel"]:active, .footer2 a:active, .footer3 a:active{
    color: var(--proddetails-btn-focus-color);
}
.footer1 h2, .footer2 h2, .footer3 h2{
    line-height: 2rem;
    padding: 1rem;
    margin-bottom: 15px;
    color: var(--footer-h2-color);
    background-color: var(--footer-h2-background);
}
.footer1{
    grid-area: footer1;
}
.footer1 a[href^="mailto"]::before{
    content: '📧 ';
}
.footer1 a[href^="tel"]::before{
    content: '☎ ';
}
.footer1 > a:last-child{
    text-decoration: none;
    background-color: var(--footer-btn-background);
    color: var(--footer-btn-color);
    font-size: var(--footer-btn-fontSize);
    display: block;
    width: 70%;
    padding: 1rem;
    border-radius: 4px;
    margin: 10px auto 0 auto;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
}
.footer1 > a:last-child:hover{/*pseudoclass*/
    background-color: var(--proddetails-btn-hover-backgroundColor);
}
.footer1 > a:last-child:focus{/*pseudoclass*/
    color: var(--proddetails-btn-focus-color);
    outline: 2px solid var(--borderfocus);
}
.footer1 > a:last-child:active{/*pseudoclass*/
    color: var(--proddetails-btn-active-color);
}
.footer2{
    grid-area: footer2;
}
.footer3{
    grid-area: footer3;
}
.footer3 a{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 0;
}
/*----------------------*/
/*--MEDIA QUERIES-------*/ 
/*----------------------*/
@media (max-width: 500px) {
    .ring img:last-child{
        width: 100%;
        height: 100%;
    }
    .knowmore img{
        width: 90%;
        height: 57%;
    }
    #wrapper{
        margin: 0 auto;
        padding: 0;
        display: block;
        grid-template-columns: 1fr;
        grid-template-rows: minmax(1%, auto);
        grid-template-areas: 
            "header"
            "main"
            "footer";
    }
    .main{
        grid-template-columns: 1fr;
        grid-template-rows: minmax(1%, auto);
        grid-template-areas: 
            "article"
            "aside";
    }
    .article{
        grid-template-columns: 1fr;
        grid-template-rows: minmax(1%, auto);
        grid-template-areas: 
        "carousel1" 
        "animation"
        "carousel2" 
        "knowmore"
        "rings"
        "bracelets"
        "earrings"
        "necklaces"   
        "video"      
        "table-cont"       
        "form"
        "aboutus";
    }
    .gallery-cont{
        flex-direction: column;
    }
    .gallery-item{
        min-height: 300px;
    }
    .rings-cont{
        grid-template-columns: 1fr;
        grid-template-rows: minmax(1%, auto);
        grid-template-areas:
        "ring1"
        "ring2"
        "ring3";
    }
    .bracelets-cont{
        grid-template-columns: 1fr;
        grid-template-rows: minmax(1%, auto);
        grid-template-areas:
        "bracelet1"
        "bracelet2"
        "bracelet3";
    }
    .earrings-cont{
        grid-template-columns: 1fr;
        grid-template-rows: minmax(1%, auto);
        grid-template-areas:
        "earrings1"
        "earrings2"
        "earrings3";
    }
    .necklaces-cont{
        grid-template-columns: 1fr;
        grid-template-rows: minmax(1%, auto);
        grid-template-areas:
        "necklace1"
        "necklace2"
        "necklace3";
    }
    .footer{
        grid-template-columns: 1fr;
        grid-template-rows: minmax(1%, auto);
        grid-template-areas:
        "footer1"
        "footer2"
        "footer3";
    }
    .footer1, .footer2, .footer3{
        min-height: 300px;
        max-height: 300px;
    }
    .footer1 a, .footer1 address, .footer1 p, .footer2 a, .footer3 a, .footer3 p{
        font-size: 1rem;
        line-height: var(--footer-lineHeight-cell);
        /* outline: 3px solid green; */
        color: var(--footer-h2-color);        
    }
/*----------------------*/
/*--MODAL WINDOW--------*/ 
/*--HAMBURGUER MENU-----*/ 
/*----------------------*/
    .hamburger-bars, .hamburger-bars img, .hamburger-x, .hamburger-x img{
        display: block;
    }  
    #wrapper{
        position: relative;
    }
    .header{
        grid-area: header;

        background-color: var(--nav-menu-background);
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
        height: 90px;
    
        position: sticky;
        top: 0;
        z-index: 3;    
    }
    #modal{
        display: none;
        width: 100vw;
        height: 8000vh;
        background-color: #F9F1F2;
        
        position: absolute;
        top: 0;
        z-index: 3;
    }
    #modal:target{
        display: block;
    }
    #modal a{
        color: black;
        display: block;
        font-size: 30px;
        line-height: 40px;
        text-decoration: none;
        text-align: center;
    }
    #modal .nav-cont{
        position: sticky;
        top: 90px;
        left: 0;
        right: 0;
        z-index: 3;
    }
    .nav-up, .nav-menu{
        height: 100%;
    
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #modal .nav-up ul{
        padding: 0;    
        background-color: #F6D1D7;
    }
    #modal .nav-menu ul{
        background-color: #F9F1F2;
        padding: 0;    
    }
    .nav-up ul li, .nav-menu ul li{
        list-style: none;
        line-height: 50px;
    
        display: block;
    
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 0;    
    }
    .nav-up img{
        filter: drop-shadow(1px 1px 2px #706e6e);
        cursor: pointer;
    }    
    .hamburger-bars, .hamburger-bars img{
        position: fixed;
        top: 0;
        left: 0;
        z-index: 0;
    }
    .hamburger-bars img:first-child{ 
        width: 80px;
        transition: 0.7s ease;              
        display: block;
        top: 5px;
        filter: drop-shadow(7px 7px 4px #888888);
    }
    .hamburger-bars img:last-child{/*Logo landscape*/
        left: 25%;
        top: 8px;
        max-width: 70%;
    }
    .hamburger-bars img:first-child:hover{
        transform: rotate(180deg);
    }    
    .hamburger-x, .hamburger-x img{
        position: fixed;
        left: 0;
        z-index: 4;
        filter: drop-shadow(7px 7px 4px #a7a5a5);
    }
    .hamburger-x img{
        width: 80px;
        transition: 0.7s ease;
    }
    .hamburger-x img:hover{
        transform: rotate(90deg);
    }
}
@media (min-width: 501px) and (max-width: 959px) {
    #wrapper{
        margin: 0 auto;
        display: block;

        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto);
        grid-template-areas: 
            "header     header"
            "main       main"
            "footer     footer";
    }
    .main{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto);
        grid-template-areas: 
            "article    article"
            "aside      aside";
    }
    .article{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto);
        grid-template-areas: 
        "carousel1      carousel1" 
        "animation      animation"
        "carousel2      carousel2" 
        "knowmore       knowmore"
        "rings          rings"
        "bracelets      bracelets"
        "earrings       earrings"
        "necklaces      necklaces"   
        "video          video"      
        "table-cont     table-cont"       
        "form           form"
        "aboutus        aboutus";
    }
    .gallery-cont{
        flex-wrap: wrap;
        justify-content: center;
        min-height: 225px;
    }
    .gallery-item{
        height: calc(0.75 * 100vw);
    }
    .rings-cont{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto);
        grid-template-areas:
        "ring1  ring1"
        "ring2  ring3";
    }
    .bracelets-cont{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto);
        grid-template-areas:
        "bracelet1  bracelet1"
        "bracelet2  bracelet3";
    }
    .earrings-cont{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto);
        grid-template-areas:
        "earrings1  earrings1"
        "earrings2  earrings3";
    }
    .necklaces-cont{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto);
        grid-template-areas:
        "necklace1  necklace1"
        "necklace2  necklace3";
    }
    .footer{
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto);
        grid-template-areas:
        "footer1    footer1"
        "footer2    footer2"
        "footer3    footer3";
    }    
    .footer1, .footer2, .footer3{
        min-height: 400px;
        max-height: 800px;
    }
    .footer1 a, .footer1 address, .footer1 p, .footer2 a, .footer3 a, .footer3 p{
        font-size: 1rem;
        line-height: var(--footer-lineHeight-tablet);
        color: var(--footer-h2-color);        
    }
/*----------------------*/
/*--MODAL WINDOW--------*/ 
/*--HAMBURGUER MENU-----*/ 
/*----------------------*/
.hamburger-bars, .hamburger-bars img, .hamburger-x, .hamburger-x img{
    display: block;
}  
#wrapper{
    position: relative;
}
.header{
    grid-area: header;

    height: 90px;
    background-color: var(--nav-menu-background);
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);

    position: sticky;
    top: 0;
    z-index: 3;
}
#modal{
    display: none;
    width: 100vw;
    height: 8000vh;
    background-color: #F9F1F2;

    position: absolute;
    top: 0;
    z-index: 3;
}
#modal:target{
    display: block;
}
#modal a{
    color: black;
    display: block;
    font-size: 30px;
    line-height: 40px;
    text-decoration: none;
    text-align: center;
}
#modal .nav-cont{
    position: sticky;
    top: 90px;
    left: 0;
    right: 0;
    z-index: 3;
}
.nav-up, .nav-menu{
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}
#modal .nav-up ul{
    padding: 0;
    background-color: #F6D1D7;
}
#modal .nav-menu ul{
    background-color: #F9F1F2;
    padding: 0;
}
.nav-up ul li, .nav-menu ul li{
    list-style: none;
    line-height: 50px;

    display: block;

    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;    
}
.nav-up img{
    filter: drop-shadow(1px 1px 2px #706e6e);
    cursor: pointer;
}    
.hamburger-bars, .hamburger-bars img{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}
.hamburger-bars img:first-child{ 
    width: 80px;
    filter: drop-shadow(7px 7px 4px #888888);
    transition: 0.7s ease;      

    display: block;
    top: 5px;
}
.hamburger-bars img:last-child{/*Logo landscape*/
    left: 30%;
    top: 8px;
    max-width: 40%;
}
.hamburger-bars img:first-child:hover{
    transform: rotate(180deg);
}    
.hamburger-x, .hamburger-x img{
    position: fixed;
    left: 0;
    z-index: 4;
    filter: drop-shadow(7px 7px 4px #a7a5a5);
}
.hamburger-x img{
    width: 80px;
    transition: 0.7s ease;
}
.hamburger-x img:hover{
    transform: rotate(90deg);
}
}
@media (min-width: 960px) {
    .gallery-cont{
        justify-content: center;
    }
    .video-cont{
        max-height: 960px;
    }
    iframe{
        max-height: 960px;
    }
     #wrapper{
        width: 960px;
        margin: 0 auto;

        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
        grid-template-areas: 
        "header         header          header"
        "main           main            main"
        "footer         footer          footer";
    }
    .main{
        grid-template-columns: repeat(3, 1fr);        
        grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
        grid-template-areas: 
        "article        article         article"
        "aside          aside           aside";
    }
    .article{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
        grid-template-areas: 
        "carousel1          carousel1           carousel1"
        "animation          animation           animation"
        "carousel2          carousel2           carousel2"
        "knowmore           knowmore            knowmore"
        "rings              rings               rings"
        "bracelets          bracelets           bracelets"
        "earrings           earrings            earrings"
        "necklaces          necklaces           necklaces"
        "video              video               video"
        "table-cont         table-cont          table-cont"
        "form               form                form"
        "aboutus            aboutus             aboutus";
    }
    .rings-cont{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
        grid-template-areas:
        "ring1  ring2   ring3";
    }
    .bracelets-cont{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
        grid-template-areas:
        "bracelet1  bracelet2   bracelet3";
    }
    .earrings-cont{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
        grid-template-areas:
        "earrings1  earrings2  earrings3";
    }
    .necklaces-cont{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
        grid-template-areas:
        "necklace1  necklace2   necklace3";
    }
    .footer{
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: minmax(1%, auto) minmax(1%, auto) minmax(1%, auto);
        grid-template-areas:
        "footer1    footer2     footer3";
    }
    .footer1, .footer2, .footer3{
        min-height: 400px;
        max-height: 800px;
    }
    .footer1 a, .footer1 address, .footer1 p, .footer2 a, .footer3 a, .footer3 p{
        font-size: 1rem;
        line-height: var(--footer-lineHeight-desktop);
        color: var(--footer-h2-color);        
    }
    .footer-button{
        line-height: 1rem;
        max-height: 4rem;
    }    
}
@media (min-width: 1700px) {
    .proddetails-cont a{
        padding: 10px;
    }
    .footer1 a, .footer1 address, .footer1 p, .footer2 a, .footer3 a, .footer3 p{
        line-height: 1rem;    
    }
}
/*
@media (orientation: landscape) and (max-width: 375px){
    body h2{
        color: red;
    }
}
@media (orientation: portrait) {
    body h2{
        color: green;
    }
}
*/