@font-face {
    font-family: 'Marist_Beta_110220';
    src: url('/assets/fonts/Marist_Beta_110220-BoldItalic.eot');
    src: url('/assets/fonts/Marist_Beta_110220-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Marist_Beta_110220-BoldItalic.woff2') format('woff2'),
        url('/assets/fonts/Marist_Beta_110220-BoldItalic.woff') format('woff'),
        url('/assets/fonts/Marist_Beta_110220-BoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Marist_Beta_110220';
    src: url('/assets/fonts/Marist_Beta_110220-Black.eot');
    src: url('/assets/fonts/Marist_Beta_110220-Black.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Marist_Beta_110220-Black.woff2') format('woff2'),
        url('/assets/fonts/Marist_Beta_110220-Black.woff') format('woff'),
        url('/assets/fonts/Marist_Beta_110220-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Marist_Beta_110220-Roman';
    src: url('/assets/fonts/Marist_Beta_110220-Roman.eot');
    src: url('/assets/fonts/Marist_Beta_110220-Roman.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Marist_Beta_110220-Roman.woff2') format('woff2'),
        url('/assets/fonts/Marist_Beta_110220-Roman.woff') format('woff'),
        url('/assets/fonts/Marist_Beta_110220-Roman.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Marist_Beta_110220';
    src: url('/assets/fonts/Marist_Beta_110220-MediumItalic.eot');
    src: url('/assets/fonts/Marist_Beta_110220-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Marist_Beta_110220-MediumItalic.woff2') format('woff2'),
        url('/assets/fonts/Marist_Beta_110220-MediumItalic.woff') format('woff'),
        url('/assets/fonts/Marist_Beta_110220-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Marist_Beta_110220 Book';
    src: url('/assets/fonts/Marist_Beta_110220-Book.eot');
    src: url('/assets/fonts/Marist_Beta_110220-Book.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Marist_Beta_110220-Book.woff2') format('woff2'),
        url('/assets/fonts/Marist_Beta_110220-Book.woff') format('woff'),
        url('/assets/fonts/Marist_Beta_110220-Book.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Marist_Beta_110220';
    src: url('/assets/fonts/Marist_Beta_110220-Bold.eot');
    src: url('/assets/fonts/Marist_Beta_110220-Bold.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Marist_Beta_110220-Bold.woff2') format('woff2'),
        url('/assets/fonts/Marist_Beta_110220-Bold.woff') format('woff'),
        url('/assets/fonts/Marist_Beta_110220-Bold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Marist_Beta_110220 Demi';
    src: url('/assets/fonts/Marist_Beta_110220-DemiItalic.eot');
    src: url('/assets/fonts/Marist_Beta_110220-DemiItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Marist_Beta_110220-DemiItalic.woff2') format('woff2'),
        url('/assets/fonts/Marist_Beta_110220-DemiItalic.woff') format('woff'),
        url('/assets/fonts/Marist_Beta_110220-DemiItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Marist_Beta_110220-Roman';
    src: url('/assets/fonts/Marist_Beta_110220-Italic.eot');
    src: url('/assets/fonts/Marist_Beta_110220-Italic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Marist_Beta_110220-Italic.woff2') format('woff2'),
        url('/assets/fonts/Marist_Beta_110220-Italic.woff') format('woff'),
        url('/assets/fonts/Marist_Beta_110220-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Marist_Beta_110220-Roman';
    src: url('/assets/fonts/Marist_Beta_110220-Demi.eot');
    src: url('/assets/fonts/Marist_Beta_110220-Demi.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Marist_Beta_110220-Demi.woff2') format('woff2'),
        url('/assets/fonts/Marist_Beta_110220-Demi.woff') format('woff'),
        url('/assets/fonts/Marist_Beta_110220-Demi.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Marist_Beta_110220';
    src: url('/assets/fonts/Marist_Beta_110220-BlackItalic.eot');
    src: url('/assets/fonts/Marist_Beta_110220-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Marist_Beta_110220-BlackItalic.woff2') format('woff2'),
        url('/assets/fonts/Marist_Beta_110220-BlackItalic.woff') format('woff'),
        url('/assets/fonts/Marist_Beta_110220-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Marist_Beta_110220 Book';
    src: url('/assets/fonts/Marist_Beta_110220-BookItalic.eot');
    src: url('/assets/fonts/Marist_Beta_110220-BookItalic.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Marist_Beta_110220-BookItalic.woff2') format('woff2'),
        url('/assets/fonts/Marist_Beta_110220-BookItalic.woff') format('woff'),
        url('/assets/fonts/Marist_Beta_110220-BookItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Marist_Beta_110220';
    src: url('/assets/fonts/Marist_Beta_110220-Medium.eot');
    src: url('/assets/fonts/Marist_Beta_110220-Medium.eot?#iefix') format('embedded-opentype'),
        url('/assets/fonts/Marist_Beta_110220-Medium.woff2') format('woff2'),
        url('/assets/fonts/Marist_Beta_110220-Medium.woff') format('woff'),
        url('/assets/fonts/Marist_Beta_110220-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/***** CSS Reset *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body, html{
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: white;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a{
    color: inherit;
    text-decoration: none;
}
ul, li{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

button,
input,
optgroup,
select,
textarea{
    border:none;
    background-image:none;
    background-color:transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}


/*************************************************************/
/*                       Core Styles                         */
/*************************************************************/

.upper{ text-transform: uppercase; }
.caps{ text-transform: capitalize; }
.low{ text-transform: lowercase; }
.underline{ border-bottom: solid 1px black; }

.hidden{ opacity: 0 !important; pointer-events: none !important; }
.box{ box-sizing: border-box; }
.button{ cursor: pointer; }

.elp{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a:hover { color: #FE5000; }

a:focus, button:focus {outline: 0;}

/*************************************************************/
/*                        Typesetting                        */
/*************************************************************/

.s1{
    font-family: Marist_Beta_110220-Roman;
    font-size: 26px;
}
.i, em{ font-style: italic; }

/*************************************************************/
/*                   Margins and Padding                     */
/*************************************************************/

.p-a{ padding: 2.5rem; }
.p-t{ padding-top: 2.5rem; }
.p-b{ padding-bottom: 2.5rem; }
.p-l{ padding-left: 2.5rem; }
.p-r{ padding-right: 2.5rem; }

.p-a-h{ padding: .6rem; }
.p-t-h{ padding-top: .6rem; }
.p-b-h{ padding-bottom: .6rem; }
.p-l-h{ padding-left: .6rem; }
.p-r-h{ padding-right: .6rem; }

.p-a-2{ padding: 2.5rem; }
.p-t-2{ padding-top: 1.8rem; }
.p-b-2{ padding-bottom: 2.5rem; }
.p-l-2{ padding-left: 2.5rem; }
.p-r-2{ padding-right: 2.5rem; }

.p-a-3{ padding: 3rem; }
.p-t-3{ padding-top: 3rem; }
.p-b-3{ padding-bottom: 3rem; }
.p-l-3{ padding-left: 3rem; }
.p-r-3{ padding-right: 3rem; }

.p-a-4{ padding: 4rem; }
.p-t-4{ padding-top: 4rem; }
.p-b-4{ padding-bottom: 4rem; }
.p-l-4{ padding-left: 4rem; }
.p-r-4{ padding-right: 4rem; }


.m-a{ margin: 2.5rem; }
.m-t{ margin-top: 2.5rem; }
.m-b{ margin-bottom: 2.5rem; }
.m-l{ margin-left: 2.5rem; }
.m-r{ margin-right: 2.5rem; }

    .m-a-h{ margin: .85rem; }
    .m-t-h{ margin-top: .85rem; }
    .m-b-h{ margin-bottom: .85rem; }
    .m-l-h{ margin-left: .85rem; }
    .m-r-h{ margin-right: .85rem; }

        .m-a-q{ margin: .45rem; }
        .m-t-q{ margin-top: .45rem; }
        .m-b-q{ margin-bottom: .45rem; }
        .m-l-q{ margin-left: .45rem; }
        .m-r-q{ margin-right: .45rem; }

.m-a-2{ margin: 3.75rem; }
.m-t-2{ margin-top: 3.75rem; }
.m-b-2{ margin-bottom: 3.75rem; }
.m-l-2{ margin-left: 3.75rem; }
.m-r-2{ margin-right: 3.75rem; }

.m-a-3{ margin: 3rem; }
.m-t-3{ margin-top: 3rem; }
.m-b-3{ margin-bottom: 3rem; }
.m-l-3{ margin-left: 3rem; }
.m-r-3{ margin-right: 3rem; }

.m-a-4{ margin: 5rem; }
.m-t-4{ margin-top: 5rem; }
.m-b-4{ margin-bottom: 5rem; }
.m-l-4{ margin-left: 5rem; }
.m-r-4{ margin-right: 5rem; }

/*************************************************************/
/*                           Core                            */
/*************************************************************/

*[p='info'] #info-wrapper{ display: flex; }
*[p='info'] #shop-wrapper{ display: none; }

*[p='shop'] #info-wrapper{ display: none; }
*[p='shop'] #shop-wrapper{ display: block; }

#header-wrapper{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    z-index: 300;
}
    #header-wrapper a{
        display: block;
        width: auto;
        height: auto;
        pointer-events: all;
    }
    #header-wrapper a svg{ width: 15rem; }

    *[p='info'] #header-wrapper svg{ fill: white; }
    *[p='shop'] #header-wrapper svg{ fill: black; }

#info-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    background-color: black;
}
    #description-parent{
        position: absolute;
        top: 0;
        left: 0;
        color: white;
        width: 100%;
        height: 100%;
        overflow: scroll;
    }
        #description-parent .inner-parent{
            height: auto;
            padding-top: 7.5rem;
            padding-bottom: 5rem;
            margin: 0 auto;
            width: 100%;
            max-width: 50rem;
        }
            .inner-parent p{ margin-bottom: 1.75rem; }
            .inner-parent p:last-child{ margin-bottom: 0rem; }


    *[p='info'] #navbar-parent{
        background: rgb(0,0,0);
        background: linear-gradient(0deg, rgba(0,0,0,.8) 40%, rgba(0,0,0,0) 100%);
        color: white;
    }
    *[p='shop'] #navbar-parent{ color: black; }


#shop-wrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
    #carousel-parent{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 50;
    }
        .swiper-wrapper{
            position: relative;
            width: 100%;
            height: 100%;
            -webkit-overflow-scrolling: touch;
            -webkit-backface-visibility: hidden;
            -webkit-transform-style: flat;
            -webkit-perspective: 1200px;
            -moz-backface-visibility: hidden;
            backface-visibility: hidden;
        }

            .swiper-slide{
                display: flex;
                align-items: center;
                justify-content: center;
                width: auto;
                height: auto;
                text-align: center;
                overflow: hidden;
                -webkit-transform: translateZ(0);
                -webkit-backface-visibility: hidden;
                background-color: white;
            }



    .swiper {
        width: 100%;
        height: 100%;
    }

      .swiper-slide {
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        background-color: white;
      }

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        user-drag: none;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-drag: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

.swiper-button-next,
.swiper-button-prev{
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    margin: 0;
}

.swiper-button-next:focus,
.swiper-button-prev:focus {
    border-color: none;
    outline: 0;
    box-shadow: none !important;
}


.swiper-button-next{ right: 0; cursor: e-resize; }
.swiper-button-next:after{ content: ''; }

.swiper-button-prev{ left: 0; cursor: w-resize; }
.swiper-button-prev:after{ content: ''; }


    #navbar-parent{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        pointer-events: none;
        z-index: 100;
    }

        #navbar-parent .caption.active { display: flex; }
        #navbar-parent .caption.p-a { padding: 2.2rem 2.5rem; }
        #navbar-parent .caption{
            position: relative;
            display: none;
            align-content: center;
            width: 100%;
            height: auto;
            bottom: 0;
        }

            .caption .column{
                position: relative;
                display: flex;
                align-items: center;
                height: 100%;
            }
                *[p='shop'] #product{ justify-content: flex-start; width: 100%; }

                *[p='shop'] #cta{ justify-content: flex-end; width: auto; }
                *[p='info'] #cta{ justify-content: flex-end; width: 100%; }

                    .column .counter.m-r,
                    .column .description.m-r,
                    .column .enquire.m-r{ margin-right: 2.2rem; }

                    .column .enquire,
                    .column .shop,
                    .column .info{ pointer-events: all; }

                    .column .counter{
                        display: flex;
                        justify-content: flex-end;
                        min-width: 2.25rem;
                    }
                        .counter .current{ min-width: .9rem; }
                        .counter .total{ }

                    .column .description{}
                    .column .specifications{}



/*************************************************************/
/*                       Responsiveness                      */
/*************************************************************/

@media only screen and (max-width: 768px)  {

    #header-wrapper a svg{ width: 100%; max-width: 160px }
    
    .swiper-button-next,  
    .swiper-button-prev{
        display: none;
    }
    .s1{ font-size: 20px; line-height: 115%; }
    .p-a{ padding: 1.5rem; }

    #navbar-parent .caption.p-a,
    .p-a{ padding: 1.5rem; }

    .m-t-2{ margin-top: 3rem; }

    *[p='info'] #cta{ justify-content: flex-start; }
    .counter .current{ min-width: auto; }

    .slick-prev, .slick-next{ display: none !important; }

    #navbar-parent .caption{ flex-wrap: wrap; height: auto; }
    .caption #product{ margin-bottom: 1rem; }

    #product, #cta{ justify-content: flex-start; width: 100%; }

    .caption .column { flex-wrap: wrap; justify-content: flex-start;  }

    .column .counter{ justify-content: flex-start; width: 100%; }
    .column .description{ width: 100%; }

    .column .counter.m-r,
    .column .description.m-r{ margin-right: 0rem; }
    .column .enquire.m-r{ margin-right: 1.5rem; }

    #description-parent .inner-parent{ max-width: 35rem; }
}

@media only screen and (min-width: 768px) and (max-width: 1440px) {
    .s1{ font-size: 23px; line-height: 115%; }
    .p-a{ padding: 2rem; }

    #navbar-parent .caption.p-a,
    .p-a{ padding: 2rem; }

    .m-t-2{ margin-top: 3rem; }

    *[p='info'] #cta{ justify-content: flex-start; }
    .counter .current{ min-width: auto; }

    .slick-prev, .slick-next{ display: none !important; }

    #navbar-parent .caption{ flex-wrap: wrap; height: auto; }
    .caption #product{ margin-bottom: 1rem; }

    #product, #cta{ justify-content: flex-start; width: 100%; }

    .caption .column { flex-wrap: wrap; justify-content: flex-start;  }

    .column .counter{ justify-content: flex-start; width: 100%; }
    .column .description{ width: 100%; }

    .column .counter.m-r,
    .column .description.m-r{ margin-right: 0rem; }
    .column .enquire.m-r{ margin-right: 1.5rem; }

    #description-parent .inner-parent{ max-width: 35rem; }
}


@media only screen and (min-width: 1440px) and (max-width: 1600px) {
}

@media only screen and (min-width: 1600px) {
}