/* 
* Site Header v2 (Lifestyle Theme CSS) 
*/

/* Loads only on subpages if activated in the Customizer. */







/* = 4. Site header
------------------------------------- */

.site-title {
    text-overflow: ellipsis; /* ... */
    white-space: nowrap;
    position: absolute;
    top: 3px;
}

.site-title.st__min img { /* optional image logo */
    height: 60px;
}

.site-title a {
    font-size: 48px;
}






/* = 5. Main nav
------------------------------------- */

/* menu button on mobile */

.site-header nav {
    padding: 0 15%;
}

.toggle-menu { 
    display: none;
    position: absolute;
    top: 29px;
    right: 25px;
}

.toggle-menu svg {
    width: 20px;
    fill: #222;
}

body.rtl .toggle-menu { /* rtl */
    right: unset;
    left: 120px;
}

/* for 1024px or less */
@media screen and (max-width: 1024px) {

    .site-header nav {
        padding: 0 18%;
    }

}

/* for 768px or less */
@media screen and (max-width: 768px) {
    
    .site-header nav {
        padding: 0 20%;
    }
    
}

/* for 600px or less */
@media screen and (max-width: 600px) {
    
    .site-header nav {
        padding: 0;
    }
    
    .site-title {
        position: relative;
        top: unset;
    }
    
    .toggle-menu {
        display: block;
    }
    
    /* topbar search */
    
    .topbar-search {
        right: 75px;
    }
    
    /* topbar cart */

    .topbar-cart {
        right: 125px;
    }

    /* nav */
    
    .site-header nav { /* clears menu under logo */
        clear: both;
    }
    
}






.page-template-default header.section, /* woocommerce pages */
.archive header.section,
.search-results header.section {
    margin-bottom: 90px;
    text-align: center;
}

.page-template-default header.section h1,
.archive header.section h1,
.search-results header.section h1{ 
    font-size: 48px;
    font-weight: 700;
    text-transform: uppercase;
}

.page-template-default header.section p,
.archive header.section p {
    padding: 20px 30% 0 30%;
    font-size: 15px;
    color: #666;
    line-height: 26px;
}

/* for 1024px or less */
@media screen and (max-width: 1024px) {

    .page-template-default header.section p,
    .archive header.section p {
        padding: 20px 25% 0 25%;
        font-size: 15px;
        color: #666;
        line-height: 26px;
    }

}

/* for 768px or less */
@media screen and (max-width: 768px) {
    
    .page-template-default header.section p,
    .archive header.section p {
        padding: 20px 15% 0 15%;
    }
    
}

/* for 600px or less */
@media screen and (max-width: 600px) {
    

    
    .page-template-default header.section,
    .archive header.section {
        margin-bottom: 60px;
    }
    
    .page-template-default header.section h1,
    .archive header.section h1 {
        font-size: 40px;
    }
    
    .page-template-default header.section p,
    .archive header.section p {
        padding: 20px 5% 0 5%;
    }
    


    
}