@import url('https://fonts.googleapis.com/css2?family=Italiana&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');





*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html
{
    height: 100%;
    scroll-behavior: smooth;
}

#loader
{
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    flex-direction: column;
}
#content 
{
    display: none;
    height: 100%;
}

.font-outfit
{
    font-family: 'Outfit', sans-serif;
}
.font-italiana
{
    font-family: 'Italiana', serif;
}

body
{
    background-color: white;
    color: black;
    height: 100%;
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
    width: 100%;
}

p, a
{
    font-family: 'Outfit', sans-serif !important;
}
a, button, svg
{
    cursor: pointer !important;
}

/*small nav**/
#smNav .modal-header
{
    background-color: black;
}
#smNav .modal-body
{
    background-color: black;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
}
#smNav .modal-body a
{
    color: white;
    text-decoration: none;
    font-size: x-large;
    text-transform: uppercase;
    margin: 2vh;
    transition: .2s;
    font-family: 'Outfit', sans-serif;
}
#smNav .modal-body a:hover
{
    border-bottom: 2px solid white;
}

/*end small nav*/

/*search modal*/
#search .modal-header
{
    background-color: black;
}
#search .modal-body
{
    background-color: black;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
}
#search .modal-body .search-form
{
    flex-direction: column;
    justify-content: center;
    display: flex;
}
#search .modal-body .search-form .search-input
{
    background-color: transparent;
    border: none;
    border-bottom: 2px solid grey;
    margin: 10vh 0;
    width: 80vw;
    padding: 2vh 1vw;
    font-size: xx-large;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 2px;
    transition: .2s;
}
#search .modal-body .search-form .search-input::placeholder
{
    color: grey;
    text-align: center;
}
#search .modal-body .search-form .search-input:hover
{
    padding: 2vh 1vw;
    color: white;
    border-bottom: 2px solid white;
    outline: none;
}
#search .modal-body .search-form .search-input:focus
{
    padding: 2vh 1vw;
    border-bottom: 2px solid white;
    outline: none;
}
/*end search form*/

.brand
{
    font-family: 'Italiana', serif;
    text-transform: uppercase;
}
.all-nav
{
    z-index: 9 !important;
}
.nav 
{
    color: white;
    padding: 3vh 3vw;
}
.nav > .right svg
{
    padding: 0 1vw;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.nav .toggler
{
    visibility: hidden;
}

.second-nav
{
    display: flex !important;
    justify-content: center !important;
}
.second-nav a
{
    color: white !important;
    text-decoration: none;
    padding: 2vh 2vw;
    margin: 2vh 0;
    text-shadow: 1px 1px 2px black, -1px -1px 2px black;
    text-transform: uppercase;
    font-family: 'Belleza', sans-serif;
}
.second-nav a:hover
{
    color: white;
    padding: 1.5vh 2vw;
    margin: 2vh 0;
    border-bottom: 3px solid white;
}


@media screen and (max-width: 992px) 
{
    .toggler
    {
        visibility: visible !important;
        padding-left: 3vw;
    }  
    .second-nav
    {
        display: none !important;
    } 
}

.white-button
{
    padding: 2vh 3vw;
    color: black !important;
    font-size: bold !important;
    background-color: white;
    text-decoration: none;
    outline: none;
    border: none;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    transition: .2s ease;
}
.white-button:hover
{
    padding: 2vh 3vw;
    color: white !important;
    background-color: black;
    border: 1px solid white;
}

.black-button
{
    padding: 2vh 3vw;
    color: white !important;
    font-size: bold !important;
    background-color: black;
    text-decoration: none;
    outline: none;
    border: none;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    transition: .2s ease;
}
.black-button:hover
{
    padding: 2vh 3vw;
    color: black !important;
    background-color: white;
    border: 1px solid black;
}

.img-desc-name
{
    color: white;
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}
/*parallax view*/  
  .parallax 
  {

    /* Full height */
    height: 100%; 
  
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position:35% 35%;
    background-repeat: no-repeat;
    background-size: cover;

    max-width: 100%;
    width: 100%;

  }

  .parallax h2
  {
    text-transform: uppercase;

  }
.parallax-one
{
    /* The image used */
    background-image: url('images/pic3.jpg');
    height:100% !important; 
    background-repeat:no-repeat;
}

.parallax-two
{
    /* The image used */
    background-image: url('images/pic14.jpg');
    height:100% !important;  
    background-repeat: no-repeat; 
}
.parallax-three-one
{  
    /* The image used */
    background-image: url('images/pic15.jpg');
    height:100% !important; 
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: 30%;
    width: 30%;
}
.parallax-three-two
{  
    /* The image used */
    background-image: url('images/pic7.jpg');
    height:100%;
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: 20% 15%;
    width: 70%;
}
@media screen and (max-width: 600px)
{
    .parallax-three-one
    {
        display: none ;
    }
    .parallax-three-two
    {
        width: 100% !important;
        
    }
}



.parallax-six
{
     /* The image used */
     background-image: url('images/pic17.jpg');
     height:100%;
     background-position: 30% 25%;
     max-width: 100%;
}

@media screen and (max-width: 600px)
{
    .parallax-six
    {
        background-position: center;
    }
}


.parallax-four-one
{  
    /* The image used */
    background-image: url('images/pic13.jpg');
    height:100% !important; 
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: 30%;
    width: 70%;
}
.parallax-four-two
{  
    /* The image used */
    background-image: url('images/pic10.jpg');
    height:100% !important; 
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: 30%;
    width: 30%;
}

@media screen and (max-width: 520px)
{
    .parallax-four-two
    {
        display: none;
    }
    .parallax-four-one
    {
        width: 100% !important;
    }
}


.parallax-five
{
    /* The image used */
    background-image: url('images/pic1.jpg');
    height: 100%;
    background-size: cover; 
    background-repeat: no-repeat;  
    background-position: 30% 25%; 
}

.parallax-desc-one
{
    padding-top: 25%;
}
@media screen and (max-width: 992px)
{
    .parallax-desc-one
    {
        padding-top: 40%;
    }
}
@media screen and (max-width: 600px)
{
    .parallax-desc-one
    {
        padding-top: 48%;
    }
}
@media screen and (max-width: 400px)
{
    .parallax-desc-one
    {
        padding-top: 80%;
    }
}


footer
{
    background-color: black;
    color: white;
    padding: 10vh ;
    height: auto;
}

footer h4
{
    color: white;
    font-family: 'Outfit', cursive;
    font-size: 100%;
    font-weight: bold;
    border-bottom: 2px solid white;
}
footer a
{
    color: #dbd9d9;
    text-decoration: none;
}
footer a:hover
{
    color: #e9e9e9;
    text-decoration: underline;
}

/*shopping bag*/
.shopping-bag-box
{
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 10 !important;
    top: 0;
    right: 0;
    overflow-x: hidden;
    transition: .3s;
    
}
.shopping-bag 
{
    padding-top: 60px;
    background-color: white;
    width: 50%;
}
.empty-box
{
    width: 50% !important;
    background-color: black;
}

@media screen and (max-width: 650px) 
{
    .empty-box h1
    {
        font-size: 22px !important;
    }
}
@media screen and (max-width: 460px) 
{
    .empty-box h1
    {
        font-size: 18px !important;
    }
}
@media screen and (max-width: 380px) 
{
    .empty-box h1
    {
        font-size: 15px !important;
    }
}
@media screen and (max-width: 320px) 
{
    .empty-box h1
    {
        font-size: 12px !important;
    }
}

  
@media screen and (max-height: 450px) 
{
    .shopping-bag 
    {
        padding-top: 15px;
    }
    .shopping-bag a 
    {
        font-size: 18px;
    }
}