/************************************/
/*           GENERAL STYLES         */
/************************************/

@media (max-width: 1920px) {
    html {
        font-size: 1vw!important;
    }
}

@media (max-width: 1600px) {
    html {
        font-size: 1.2vw!important;
    }
}

@media (max-width: 1250px) {
    html {
        font-size: 1.5vw!important;
    }
}

@media (max-width: 767px) {
    html {
        font-size: 2vw!important;
    }
}

@media (max-width: 600px) {
    html {
        font-size: 3vw!important;
    }
}

@media (max-width: 500px) {
    html {
        font-size: 3.7vw!important;
    }
}

.font--xlg { font-size: 40px; }
.font--lg { font-size: 25px; }
.font--md { font-size: 20px; }
.font--sm, body { font-size: 19px; }
.font--xsm { font-size: 15px; }

@media (max-width: 1920px) {
    .font--xlg { font-size: 2.1rem!important; }
    .font--lg { font-size: 1.3rem!important; }
    .font--md { font-size: 1.05rem!important; }
    .font--sm, body { font-size: .88rem!important; }
    .font--xsm { font-size: .7rem!important; }  
}

@media (max-width: 600px) {
    .font--lg { font-size: 1.7rem!important; }
    .font--md { font-size: 1.3rem!important; }
    .font--sm, body { font-size: 1rem!important; } 
    .font--xsm { font-size: .88rem!important; }  
}

.color--brand *, .color--brand { color: #c88e81!important; }
.color--ascent *, .color--ascent { color: #e8bda5!important; }
.color--dark *, .color--dark { color: #576667!important; }
.color--white *, .color--white { color: #fff!important; }
.color--black *, .color--black { color: #000!important; }
.color--light *, .color--light { color: #f0f4f2!important; }
.color--light-green *, .color--light-green { color: #a5c9b5!important; }

.bg--brand { background-color: #c88e81; }
.bg--ascent { background-color: #e8bda5; }
.bg--dark { background-color: #576667; }
.bg--light { background-color: #f0f4f2; }
.bg--white { background-color: #fff; }
.bg--black { background-color: #000; }
.bg--grey { background-color: #f9f9f9; }
.bg--light-grey { background-color: #fdfdfd; }
.bg--light-green { background-color: #a5c9b5; }
.bg--light-accent { background-color: #faf2ed; }
.bg--dark-green {background-color: #4f5e5f;}
.bg--pattern {
    background: url(/wp-content/themes/woodmart-child/images/pattern.jpg);
    background-repeat: repeat;
}

.weight--100 { font-weight: 100; }
.weight--300 { font-weight: 300; }
.weight--400 { font-weight: 400; }
.weight--500 { font-weight: 500; }
.weight--600 { font-weight: 600; }
.weight--700 { font-weight: 700; }
.weight--900 { font-weight: 900; }

.spacing--3 { letter-spacing: .3em;}
.spacing--2 { letter-spacing: .2em;}
.spacing--1 { letter-spacing: .1em;}

.font--subtitle { font-family: "Neutraface Text Greek Demi"; }
.font--title { font-family: "Charter"; } 

section {
    width: 100%;
    position: relative;
}

.row {
    margin-right: 0!important;
    margin-left: 0!important;
}

.section--boxed,
body.page-template-default .main-page-wrapper .container,
body[class*="page-template-"]:not(.page-template-default).wrapper-full-width-content .footer-container .container,
body.wrapper-full-width-content .footer-container .container,
.main-page-wrapper .container,
.wrapper-full-width-content .single-product-page .container {
    max-width: 1250px;
    margin: 0 auto;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}


.whb-main-header .container,
body.wrapper-full-width-content .whb-main-header .container {
    max-width: 1500px;
    margin: 0 auto;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

@media (max-width: 1560px) and (min-width: 768px) {
    .section--boxed,
    body.page-template-default .main-page-wrapper .container,
    .whb-main-header .container,
    body.wrapper-full-width-content .whb-main-header .container,
    body[class*="page-template-"]:not(.page-template-default).wrapper-full-width-content .footer-container .container,
    body.wrapper-full-width-content .footer-container .container {
        padding-right: 30px;
        padding-left: 30px;
    }
}

body[class*="page-template-"]:not(.page-template-default).wrapper-full-width-content .main-page-wrapper .container {
    width: 100%;
    padding: 0;
}

body .main-page-wrapper { padding-top: 0; }

.overflow--hidden { overflow: hidden; }
.overflow--visible { overflow: visible; }
.overflow--auto { overflow: auto; }
.overflowY--scroll { overflow-y: scroll; }

.text--center { text-align: center; }
.text--left { text-align: left; }
.text--right { text-align: right; }

.clickable { cursor: pointer; }

.p--relative { position: relative; }
.p--absolute { position: absolute; }
.p--fixed { position: fixed; }

.zindex--1 { z-index: 1; }
.zindex--2 { z-index: 2; }
.zindex--3 { z-index: 3; }
.zindex--4 { z-index: 4; }
.zindex--5 { z-index: 5; }

.max--400 { max-width: 400px;}
.max--500 { max-width: 500px;}
.max--600 { max-width: 600px;}
.max--700 { max-width: 700px;}
.max--800 { max-width: 800px;}
.max--900 { max-width: 900px;}
.max--1000 { max-width: 1000px;}
.max--1100 { max-width: 1100px;}
.max--1200 { max-width: 1200px;}
.max--1300 { max-width: 1300px;}
.max--1400 { max-width: 1400px;}
.max--1500 { max-width: 1500px;}

.max--400,
.max--500,
.max--600,
.max--700,
.max--800,
.max--900,
.max--1000,
.max--1100,
.max--1200,
.max--1300,
.max--1400,
.max--1500 { margin-right: auto; margin-left: auto; }

/* MARGINS */
.mb--sm { margin-bottom: 15px; }
.mb--md { margin-bottom: 25px; }
.mb--lg { margin-bottom: 50px; }
.mb--xlg { margin-bottom: 150px; }

.mt--sm { margin-top: 15px; }
.mt--md { margin-top: 25px; }
.mt--lg { margin-top: 50px; }
.mt--xlg { margin-top: 150px; }

.ml--sm { margin-left: 15px; }
.ml--md { margin-left: 25px; }
.ml--lg { margin-left: 50px; }
.mr--xlg { margin-left: 150px; }

.mr--sm { margin-right: 15px; }
.mr--md { margin-right: 25px; }
.mr--lg { margin-right: 50px; }
.mr--xlg { margin-right: 150px; }

/* PADDINGS */
.pb--sm { padding-bottom: 15px; }
.pb--md { padding-bottom: 25px; }
.pb--lg { padding-bottom: 50px; }
.pb--xlg { padding-bottom: 150px; }

.pt--sm { padding-top: 15px; }
.pt--md { padding-top: 25px; }
.pt--lg { padding-top: 50px; }
.pt--xlg { padding-top: 150px; }

.pl--sm { padding-left: 15px; }
.pl--md { padding-left: 25px; }
.pl--lg { padding-left: 50px; }
.pl--lg { padding-left: 150px; }

.pr--sm { padding-right: 15px; }
.pr--md { padding-right: 25px; }
.pr--lg { padding-right: 50px; }
.pr--lg { padding-right: 150px; }

.p--sm { padding: 15px; }
.p--md { padding: 25px; }
.p--lg { padding: 50px; }
.p--xlg { padding: 150px; }

@media (max-width: 1920px) {
    /* MARGINS */
    .mb--xsm { margin-bottom: .40rem; }
    .mb--sm { margin-bottom: .75rem; }
    .mb--md { margin-bottom: 1.25rem; }
    .mb--lg { margin-bottom: 2.5rem; }
    .mb--xlg { margin-bottom: 5rem; }

    .mt--sm { margin-top: .75rem; }
    .mt--md { margin-top: 1.25rem; }
    .mt--lg { margin-top: 2.5rem; }
    .mt--xlg { margin-top: 5rem; }

    .ml--sm { margin-left: .75rem; }
    .ml--md { margin-left: 1.25rem; }
    .ml--lg { margin-left: 2.5rem; }
    .mr--xlg { margin-right: 5rem; }

    .mr--sm { margin-right: .75rem; }
    .mr--md { margin-right: 1.25rem; }
    .mr--lg { margin-right: 2.5rem; }
    .mr--xlg { margin-right: 5rem; }

    /* PADDINGS */
    .pb--sm { padding-bottom: .75rem; }
    .pb--md { padding-bottom: 1.25rem; }
    .pb--lg { padding-bottom: 2.5rem; }
    .pb--xlg { padding-bottom: 5rem; }

    .pt--sm { padding-top: .75rem; }
    .pt--md { padding-top: 1.25rem; }
    .pt--lg { padding-top: 2.5rem; }
    .pt--xlg { padding-top: 5rem; }

    .pl--sm { padding-left: .75rem; }
    .pl--md { padding-left: 1.25rem; }
    .pl--lg { padding-left: 2.5rem; }
    .pl--lg { padding-left: 5rem; }

    .pr--sm { padding-right: .75rem; }
    .pr--md { padding-right: 1.25rem; }
    .pr--lg { padding-right: 2.5rem; }
    .pr--lg { padding-right: 5rem; }

    .p--sm { padding: .75rem; }
    .p--md { padding: 1.25rem; }
    .p--lg { padding: 2.5rem; }
    .p--xlg { padding: 5rem; }
}

.mb--none {
    margin-bottom: 0!important;
}

/************************************/
/*             COLS DESIGN          */
/************************************/
.cols,
.cols--ul,
.cols--ut,
.cols--um,
.cols--l,
.cols--t { display: flex; justify-content: space-between; }

.cols--wrap { flex-wrap: wrap; }

.align--start { align-items: flex-start; }
.align--end { align-items: flex-end; }
.align--center { align-items: center; }

.justify--start { justify-content: flex-start; }
.justify--end { justify-content: flex-end; }
.justify--center { justify-content: center; }

.row--reverse { flex-direction: row-reverse; }

.col--5 { width: 5%; }
.col--10 { width: 10%; }
.col--15 { width: 15%; }
.col--20 { width: 20%; }
.col--25 { width: 25%; }
.col--30 { width: 30%; }
.col--33 { width: 33.3333333%; }
.col--35 { width: 35%; }
.col--40 { width: 40%; }
.col--45 { width: 45%; }
.col--50 { width: 50%; }
.col--55 { width: 55%; }
.col--60 { width: 60%; }
.col--65 { width: 65%; }
.col--70 { width: 70%; }
.col--75 { width: 75%; }
.col--80 { width: 80%; }
.col--85 { width: 85%; }
.col--90 { width: 90%; }
.col--100 { width: 100%; }

/************************************/
/*            MEDIA QUERIES         */
/************************************/

@media (min-width: 768px) {
    .p--sticky {
        position: sticky;
        top: 80px;
        z-index: 2;
    }

    body[class*="page-template-"]:not(.page-template-default) .website-wrapper,
    body[class*="single-"] .website-wrapper {
        overflow: initial;
    }

    .um-text--center { text-align: center; }
    .um-text--left { text-align: left; }
    .um-text--right { text-align: right; }

    .um-flex--reverse { flex-direction: row-reverse; }

    .um-pr--md { padding-right: 25px; }
    .um-pb--xlg { padding-bottom: 100px; padding-bottom: 5rem; }
    .um-pt--xlg { padding-top: 100px; padding-top: 5rem; }
    .um-pr--lg { padding-right: 50px; padding-right: 2.5rem; }
    .um-pl--lg { padding-left: 50px; padding-left: 2.5rem; }
    .um-p--lg { padding: 50px; padding: 2.5rem; }
    .um-p--xlg { padding: 100px; padding: 5rem; }

    
    .um-mt--xlg { margin-top: 100px; margin-top: 5rem; }
}

@media (max-width: 1250px) {
    .cols--ul {
        display: block;
    }

    .cols--ul > [class*="col--"] {
        width: 100%;
    }
}

@media (max-width: 920px) {
    .cols--ut {
        display: block;
    }

    .cols--ut>[class*="col--"] {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .cols--um {
        display: block;
    }

    .cols--um>[class*="col--"] {
        width: 100%;
    }
}

@media (max-width: 1250px) {
    .l--hidden { display: none; }

    .l-cols--wrap { flex-wrap: wrap; }
    .l-align--start { align-items: flex-start; }
    .l-align--end { align-items: flex-end; }
    .l-align--center { align-items: center; }

    .l-justify--start { justify-content: flex-start; }
    .l-justify--end { justify-content: flex-end; }
    .l-justify--center { justify-content: center; }
 
    .l-col--5 { width: 5%; }
    .l-col--10 { width: 10%; }
    .l-col--15 { width: 15%; }
    .l-col--20 { width: 20%; }
    .l-col--25 { width: 25%; }
    .l-col--30 { width: 30%; }
    .l-col--33 { width: 33.3333333%; }
    .l-col--35 { width: 35%; }
    .l-col--40 { width: 40%; }
    .l-col--45 { width: 45%; }
    .l-col--50 { width: 50%; }
    .l-col--55 { width: 55%; }
    .l-col--60 { width: 60%; }
    .l-col--65 { width: 65%; }
    .l-col--70 { width: 70%; }
    .l-col--75 { width: 75%; }
    .l-col--80 { width: 80%; }
    .l-col--85 { width: 85%; }
    .l-col--90 { width: 90%; }
    .l-col--100 { width: 100%; }

    .l-text--center { text-align: center; }
    .l-text--left { text-align: left; }
    .l-text--right { text-align: right; }

    .l-mb--sm { margin-bottom: 15px; }
    .l-mt--sm { margin-top: 15px; }
    .l-mb--md { margin-bottom: 30px; }
    .l-mt--md { margin-top: 30px; }
}

@media (max-width: 920px) and (min-width: 768px) {
    .t--hidden { display: none; }

    .t-cols--wrap { flex-wrap: wrap; }
    .t-align--start { align-items: flex-start; }
    .t-align--end { align-items: flex-end; }
    .t-align--center { align-items: center; }

    .t-justify--start { justify-content: flex-start; }
    .t-justify--end { justify-content: flex-end; }
    .t-justify--center { justify-content: center; }

    .t-col--5 { width: 5%; }
    .t-col--10 { width: 10%; }
    .t-col--15 { width: 15%; }
    .t-col--20 { width: 20%; }
    .t-col--25 { width: 25%; }
    .t-col--30 { width: 30%; }
    .t-col--33 { width: 33.3333333%; }
    .t-col--35 { width: 35%; }
    .t-col--40 { width: 40%; }
    .t-col--45 { width: 45%; }
    .t-col--50 { width: 50%; }
    .t-col--55 { width: 55%; }
    .t-col--60 { width: 60%; }
    .t-col--65 { width: 65%; }
    .t-col--70 { width: 70%; }
    .t-col--75 { width: 75%; }
    .t-col--80 { width: 80%; }
    .t-col--85 { width: 85%; }
    .t-col--90 { width: 90%; }
    .t-col--100 { width: 100%; }

    .t-text--center { text-align: center; }
    .t-text--left { text-align: left; }
    .t-text--right { text-align: right; }

    .t-mb--sm { margin-bottom: 15px; }
    .t-mt--sm { margin-top: 15px; }
    .t-mb--md { margin-bottom: 30px; }
    .t-mt--md { margin-top: 30px; }
}

@media (max-width: 767px) {
    .m--hidden { display: none!important; }

    .m-cols--wrap { flex-wrap: wrap; }
    .m-align--start { align-items: flex-start; }
    .m-align--end { align-items: flex-end; }
    .m-align--center { align-items: center; }

    .m-justify--start { justify-content: flex-start; }
    .m-justify--end { justify-content: flex-end; }
    .m-justify--center { justify-content: center; }

    .m-col--5 { width: 5%; }
    .m-col--10 { width: 10%; }
    .m-col--15 { width: 15%; }
    .m-col--20 { width: 20%; }
    .m-col--25 { width: 25%; }
    .m-col--30 { width: 30%; }
    .m-col--33 { width: 33.3333333%; }
    .m-col--35 { width: 35%; }
    .m-col--40 { width: 40%; }
    .m-col--45 { width: 45%; }
    .m-col--50 { width: 50%; }
    .m-col--55 { width: 55%; }
    .m-col--60 { width: 60%; }
    .m-col--65 { width: 65%; }
    .m-col--70 { width: 70%; }
    .m-col--75 { width: 75%; }
    .m-col--80 { width: 80%; }
    .m-col--85 { width: 85%; }
    .m-col--90 { width: 90%; }
    .m-col--100 { width: 100%; }

    .m-text--center { text-align: center; }
    .m-text--left { text-align: left; }
    .m-text--right { text-align: right; }

    .m-mb--sm { margin-bottom: 15px; }
    .m-mt--sm { margin-top: 15px; }
    .m-mb--md { margin-bottom: 30px; }
    .m-mt--md { margin-top: 30px; }

    .whb-main-header .container,
    body.wrapper-full-width-content .whb-main-header .container {
        padding-right: 30px;
        padding-left: 30px;
    }

    .section--boxed {
        padding-right: 30px!important;
        padding-left: 30px!important;
    }

    .cols--um > [class*="col--"]:not(.m-no-margin):not(:last-of-type):not([class*="-item"]) {
        margin-bottom: 30px!important;
    }

    .cols--um > .m-no-margin + [class*="col--"] {
        margin-top: 0!important;
    }

    /*.pt--xlg { padding-top: 30px; }
    .pb--xlg { padding-bottom: 30px; }
    .p--xlg { padding: 30px; }
    .mb--xlg { margin-bottom: 30px; }
    .mt--xlg { margin-top: 30px; }*/

    .site-logo { padding-left: 25px; }

    .woodmart-burger-icon { margin-right: 15px; }

    .m--full { width: calc(100% + 60px)!important; transform: translateX(-30px); }
}

.mt--none {
    margin-top: 0!important;
}