/*! HTML5 Boilerplate v5.1.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
    height: 100%;
    padding: 0;
    margin: 0;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* TYPOGRAPHY ///////////////////////////////

HEADING
Light           300     normal  
Book            400     normal  
Book Italic     400     italic  
Semibold        600     normal  

PARAGRAPH
Light           300     normal   
Regular         400     normal  
Italic          400     italic  
Bold            700     normal  
Bold Italic     700     italic
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */

body {font-family: "rooney-sans",sans-serif;}

h1, h2, h3, nav ul li {font-family: "freight-display-pro",sans-serif; font-style: italic;}

h1 {
    margin: 0.4em 0px;
    color: #536770;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 2.5em;
    font-weight: 400;
}

h2 {
    margin: 0.4em 0px;
    color: #536770;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 2em;
    font-weight: 400;
}

p {
    font-family: "rooney-sans",sans-serif;
    font-size: 0.9em;
    line-height: 1.5em;
    margin: 1em 0 1.4em 0;
}

p a {
    color: #536770;
}

p a:hover {
    color: #536770;
    text-decoration: none;
}

.btn {
    color: #FFF;
    background-color: #536770;
    display: inline-block;
    padding: 10px 25px;
    border: 2px solid #536770;
    transition: all 0.3s ease-out 0.12s;
    -moz-transition: all 0.3s ease-out 0.12s ;
    -webkit-transition: all 0.3s ease-out 0.12s;
    -o-transition: all 0.3s ease-out 0.12s;
}

.btn:hover {background-color: #FFF; color: #536770;}

p a.btn {
    color: #FFF !important;
    background-color: #536770;
    display: inline-block;
    padding: 10px 25px !important;
    border: 2px solid #536770 !important;
    transition: all 0.3s ease-out 0.12s !important;
    -moz-transition: all 0.3s ease-out 0.12s !important;
    -webkit-transition: all 0.3s ease-out 0.12s !important;
    -o-transition: all 0.3s ease-out 0.12s !important;
    cursor: pointer;
}

p a.btn::after, p a.btn::before {height: 0 !important;}

p a.btn:hover {background-color: #FFF; color: #536770 !important;}
p a.btn:hover::after, p a.btn:hover::before {height: 0 !important;}

body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#innerBgV2 {
    background: url(/img/backgrounds/Traditional-country-house-2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#design-consultancy-interior-design {
    background: url(/img/backgrounds/Traditional-country-house-2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#design-consultancy-project-management {
    background: url(/img/backgrounds/Traditional-country-house-2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#portfolio {
    background-color: rgba(0, 0, 0, 0.6);
}

#products {
    background: url(/img/backgrounds/Traditional-country-house-2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#news {
    background: url(/img/backgrounds/DSC_0430.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#our-team {
    background: url(/img/backgrounds/Traditional-country-house-2.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#contact-us-frant {
    /*background-color: #eeeeee;*/
    background: url(/img/backgrounds/ensiorMap.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#contact-us-cuckfield {
    /*background-color: #dddddd;*/
    background: url(/img/backgrounds/ensiorMap.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#contact-us-eridge {
    /*background-color: #dddddd;*/
    background: url(/img/backgrounds/eridge_map2.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}


header {
    width: 100%;
    text-align: center;
    overflow: hidden;
    margin: 0;
    padding: 30px 0;
    background: rgba(255,255,255,0.26);
    background: -moz-linear-gradient(left, rgba(255,255,255,0.26) 0%, rgba(255,255,255,1) 21%, rgba(255,255,255,1) 79%, rgba(255,255,255,0.21) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0.26)), color-stop(21%, rgba(255,255,255,1)), color-stop(79%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0.21)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0.26) 0%, rgba(255,255,255,1) 21%, rgba(255,255,255,1) 79%, rgba(255,255,255,0.21) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0.26) 0%, rgba(255,255,255,1) 21%, rgba(255,255,255,1) 79%, rgba(255,255,255,0.21) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0.26) 0%, rgba(255,255,255,1) 21%, rgba(255,255,255,1) 79%, rgba(255,255,255,0.21) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0.26) 0%, rgba(255,255,255,1) 21%, rgba(255,255,255,1) 79%, rgba(255,255,255,0.21) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
    position: relative;
    z-index: 10;
    top: 0;
    transition:all 0.7s ease-in-out 0s;
    -moz-transition:all 0.7s ease-in-out 0s;
    -webkit-transition:all 0.7s ease-in-out 0s;
    -o-transition:all 0.7s ease-in-out 0s;
}

   header img {width: 660px; float: none; margin: 0 auto;}

section {
    width: 94%;
    margin: 0 auto;
    max-width: 1350px;
    overflow: hidden;
    position: relative;
}

article {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    padding: 0 30px 20px;
    width: 100%;
    overflow: hidden;
}

nav {
    background: rgba(92,110,120,0.26);
    background: -moz-linear-gradient(left, rgba(92,110,120,0.26) 0%, rgba(92,110,120,0.83) 21%, rgba(92,110,120,0.83) 79%, rgba(92,110,120,0.26) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(92,110,120,0.26)), color-stop(21%, rgba(92,110,120,0.83)), color-stop(79%, rgba(92,110,120,0.83)), color-stop(100%, rgba(92,110,120,0.26)));
    background: -webkit-linear-gradient(left, rgba(92,110,120,0.26) 0%, rgba(92,110,120,0.83) 21%, rgba(92,110,120,0.83) 79%, rgba(92,110,120,0.26) 100%);
    background: -o-linear-gradient(left, rgba(92,110,120,0.26) 0%, rgba(92,110,120,0.83) 21%, rgba(92,110,120,0.83) 79%, rgba(92,110,120,0.26) 100%);
    background: -ms-linear-gradient(left, rgba(92,110,120,0.26) 0%, rgba(92,110,120,0.83) 21%, rgba(92,110,120,0.83) 79%, rgba(92,110,120,0.26) 100%);
    background: linear-gradient(to right, rgba(92,110,120,0.26) 0%, rgba(92,110,120,0.83) 21%, rgba(92,110,120,0.73) 79%, rgba(92,110,120,0.26) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c6e78', endColorstr='#5c6e78', GradientType=1 );
    position: relative;
    z-index: 30;
    top: 0;
    transition:all 0.7s ease-in-out 0s;
    -moz-transition:all 0.7s ease-in-out 0s;
    -webkit-transition:all 0.7s ease-in-out 0s;
    -o-transition:all 0.7s ease-in-out 0s;
    height: 42px;
    padding: 1px 0;
}
    nav section {
        overflow: visible;
        position: initial;
    }

    nav ul {
        padding: 0;
        margin: 8px auto;
        list-style-type: none;
        width: 100%;
        text-align: center;
    }
        nav ul li {
            display: inline-block;
            margin: 0px 20px 0 0;
            font-size: 18px;
            font-weight: 100;
            letter-spacing: 1px;
            padding: 0 20px 0 0;
            height: 36px;
            position: relative;
        }

        /*nav ul li::after {
            display: block;
            position: absolute;
            right: 0;
            height: 10px;
            width: 1px;
            background-color: #FFF;
            content: " ";
            top: 0;
            bottom: 0;
            margin: auto;
        }*/

        /*nav ul li:nth-last-child(1)::after {display: none;}*/

            nav ul li a {
                color: #FFF; 
                text-decoration: none;
                display: block; 
                transition:all 0.4s ease-in-out 0s;
                -moz-transition:all 0.4s ease-in-out 0s;
                -webkit-transition:all 0.4s ease-in-out 0s;
                -o-transition:all 0.4s ease-in-out 0s;
            }
                nav ul li a:hover {color: #C8E9F1;}

        nav ul li ul {
            display: none;
            position: absolute;
            z-index: 30;
            /*background: rgba(255,255,255,0.8);*/
            /*background: rgba(92,110,120,0.16);*/
            background: rgba(104, 118, 126, 0.8);
            /*background: -moz-linear-gradient(left, rgba(92,110,120,0.16) 0%, rgba(92,110,120,0.53) 21%, rgba(92,110,120,0.53) 79%, rgba(92,110,120,0.16) 100%);
            background: -webkit-gradient(left top, right top, color-stop(0%, rgba(92,110,120,0.16)), color-stop(21%, rgba(92,110,120,0.53)), color-stop(79%, rgba(92,110,120,0.53)), color-stop(100%, rgba(92,110,120,0.16)));
            background: -webkit-linear-gradient(left, rgba(92,110,120,0.16) 0%, rgba(92,110,120,0.53) 21%, rgba(92,110,120,0.53) 79%, rgba(92,110,120,0.16) 100%);
            background: -o-linear-gradient(left, rgba(92,110,120,0.16) 0%, rgba(92,110,120,0.53) 21%, rgba(92,110,120,0.53) 79%, rgba(92,110,120,0.16) 100%);
            background: -ms-linear-gradient(left, rgba(92,110,120,0.16) 0%, rgba(92,110,120,0.53) 21%, rgba(92,110,120,0.53) 79%, rgba(92,110,120,0.16) 100%);
            background: linear-gradient(to right, rgba(92,110,120,0.16) 0%, rgba(92,110,120,0.53) 21%, rgba(92,110,120,0.53) 79%, rgba(92,110,120,0.16) 100%);*/
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c6e78', endColorstr='#5c6e78', GradientType=1 );
            top: 36px;
            width: 100%;
            left: 0;
            z-index: 20;
        }

        nav ul li:hover > ul {
            display: block;
            width: auto;
            margin-top: -1px;
        }

            nav ul li ul li {
                padding-top: 10px;
                display: block;
                padding-left: 10px;
                min-width: 240px;
                text-align: left;
                padding-right: 0;
            }
                nav ul li ul li a {
                    /*color: #222;*/
                    color: #fff;
                }

                nav ul li ul li a:hover {
                    /*color: #5c6e78;*/
                    color: #C8E9F1;
                }

/* Background Slider Styles */
.backgroundGallery {
    position: fixed;
    z-index: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    top: 0;
    left:0;
}
    .backgroundGallery .item {
        width: 100%;
        height: auto;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .backgroundGallery .item img {
        width: 100%;
        height: auto;
    }

.owl-dots {display: none;}

.owl-prev {
    position: fixed;
    top: 50%;
    left: 20px;
    color: transparent;
    background: url('/img/icons/prev.png') no-repeat 0 0 transparent;
    opacity: 0.6;
    width: 54px;
    height: 42px;
    transition:all 0.3s ease-in-out 0s;
    -moz-transition:all 0.3s ease-in-out 0s;
    -webkit-transition:all 0.3s ease-in-out 0s;
    -o-transition:all 0.3s ease-in-out 0s;
}

.owl-next {
    position: fixed;
    top: 50%;
    right: 20px;
    color: transparent;
    background: url('/img/icons/next.png') no-repeat 0 0 transparent;
    opacity: 0.6;
    width: 54px;
    height: 42px;
    transition:all 0.3s ease-in-out 0s;
    -moz-transition:all 0.3s ease-in-out 0s;
    -webkit-transition:all 0.3s ease-in-out 0s;
    -o-transition:all 0.3s ease-in-out 0s;

}

.owl-prev:hover, .owl-next:hover {opacity: 0.95;}

#AboutBox {
    background-color: #7C8A92;
    background-color: rgba(104, 118, 126, 0.8);
    color: #FFF;
    padding: 20px 20px 20px 25px;
    overflow: hidden;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 10%;
    margin: 0px auto;
    width: 94%;
    max-width: 1350px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    transition:all 0.7s ease-in-out 0s;
    -moz-transition:all 0.7s ease-in-out 0s;
    -webkit-transition:all 0.7s ease-in-out 0s;
    -o-transition:all 0.7s ease-in-out 0s;
}

div.caption{
    background-color: #7C8A92;
    background-color: rgba(104, 118, 126, 0.8);
    color: #FFF;
    padding: 20px 20px 20px 25px;
    width: 94%;
    max-width: 1350px;
    margin: 0 auto;
    position: absolute;
    bottom: 10%;
    overflow: hidden;
    z-index: 3; 
    left: 0;   
    right: 0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    min-height: 200px;
    display: none;
}
div.caption h2{
    color: #fff;
    font-size: 1em;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #FFF;
    font-size: 12px;
    cursor: pointer;
    transition:all 0.3s ease-in-out 0s;
    -moz-transition:all 0.3s ease-in-out 0s;
    -webkit-transition:all 0.3s ease-in-out 0s;
    -o-transition:all 0.3s ease-in-out 0s;
}

.close:hover {opacity: 0.5;}

.open {
    color: #333D42;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    position: fixed;
/*    bottom: -310px;
*/    background-color: rgba(255,255,255,0.9);
    margin: 0 auto;
    left:0;
    right: 0;
    width: 40px;
    padding: 10px 0px;
    box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.4);
    transition:all 0.7s ease-in-out 0s;
    -moz-transition:all 0.7s ease-in-out 0s;
    -webkit-transition:all 0.7s ease-in-out 0s;
    -o-transition:all 0.7s ease-in-out 0s;
}

.open:hover {text-decoration: underline; color: rgba(255,255,255,1);}

    #AboutBox{
        bottom: -323px;
    }

    #AboutBox h2 {
        font-size: 25px;
        letter-spacing: 0.03em;
        font-weight: 300;
        margin: 0;
        border-bottom: 1px solid rgba(255,255,255,0.7);
        padding-bottom: 6px;
        width: 140px;
        color: #FFF;
    }

    #AboutBox p {font-size: 0.8em; line-height: 1.7em; margin-bottom: 0;}

    ul.aboutList {
        font-size: 0.8em;
        line-height: 1.5em;
        margin: 1em 0 1.4em 0;
        margin: 0;
        padding: 0;
        list-style-type: none;
        width: 100%;
    }
        ul.aboutList li {
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            -o-box-sizing:border-box;
            margin: 15px 0px;
            text-align: left;
            width: 97%;
            float: right;
        }

        ul.aboutList li.floorplan {text-align: left;}
        ul.aboutList li.sofa {text-align: left;}

        ul.aboutList li img {width: 40px; margin-right: 20px; float: left;}

.half {
    width:50%;
    float: left;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    padding: 0 15px 0 0; 
}
.third {
    width:33.33%;
    float: left;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
}

footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    left:0;
    right: 0;
    background-color: #111;
    background-color: rgba(0,0,0,0.6);
    padding: 5px 0;
    z-index: 10;
    transition:all 0.7s ease-in-out 0s;
    -moz-transition:all 0.7s ease-in-out 0s;
    -webkit-transition:all 0.7s ease-in-out 0s;
    -o-transition:all 0.7s ease-in-out 0s;
}

.productFooter{
    position: absolute;
}

footer img {margin-right: 5px;}

footer .mapFoot {text-align: center;}

footer .mailFoot {text-align: right;}

.mailIcon {margin-left: 20px;}

    footer p {
        color: #EEE;
        margin: 0;
        font-size: 0.7em;
    }

    footer a {color: #EEE;}
    footer a:hover {text-decoration: none;}

#mobileNav {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(92, 110, 120, 0.95);
    left: 0;
    right: 0;
    bottom: -100%;
    color: #FFF;
    transition: all 0.7s ease-in-out 0s;
    -moz-transition: all 0.7s ease-in-out 0s;
    -webkit-transition: all 0.7s ease-in-out 0s;
    -o-transition: all 0.7s ease-in-out 0s;
}

    #mobileNav ul {
        width: 90%;
        text-align: left;
        list-style-type: none;
        padding: 0;
        margin: 20px auto;
    }

        #mobileNav ul li {
            margin: 25px 0px 20px;
            font-size: 1.5em;
            position: relative;
        }

            .underlineNav {
                border-bottom: 1px solid #FFF;
                padding-bottom: 20px;
                margin-top: 0 !important;
                text-transform: uppercase;
            }

            #closeNav {
                position: absolute;
                right: 0;
                top: 0;
                cursor: pointer;
            }

            #mobileNav ul li a {
                text-decoration: none;
                color: #FFF;
                font-weight: 100;
            }

        #mobileNav ul li ul{
            display: none;
            margin-left: 0;
            width: 100%;
            overflow: hidden;
            background-color: #fff;
            padding:15px 0;
        }

            #mobileNav ul li ul li{
                display: inline;
                float: left;
                font-size: 0.75em;
                padding: 0 10px;
                margin: 5px 0;
            }

            #mobileNav ul li ul li a{
                color: rgba(92, 110, 120, 0.95);
            }

#navIcon {
    display: none;
    float: right;
    width: 116px;
    margin: 10px 0px 0px 10px;
}
    #navIcon img {width: 100%;}

.mobNo {display: block;}
.mobYes {display: none;}


/* INNER PAGER STYLES */

#inner {
    background-color: #FFF;
    margin-top: 30px;
    box-shadow: 0px 0px 6px -3px #222;
    -moz-box-shadow: 0px 0px 6px -3px #222;
    -webkit-box-shadow: 0px 0px 6px -3px #222;
    -o-box-shadow: 0px 0px 6px -3px #222;
}
    
    #inner p {
        font-size: 0.95em;
        color: #333;
        font-weight: 300;
    }

/* PRODUCT LIST */
ul#productList {
    list-style-type: none;
    padding: 0;
    margin: 30px 0;
    width: 100%;
}

    ul#productList li {
        display: inline-block;
        width: 24%;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        margin: 0;
        padding: 5px 20px;
        text-align: center;
    }
        ul#productList li img {width: 100%;}

        ul#productList li a {
            color: #444; 
            text-decoration: none; 
            padding: 5px 0px 9px 0;
            display: inline-block;
            font-size:1.1em; 
            letter-spacing: 1px;
            border:2px solid #FFF;
            cursor: pointer;
            text-align: center; 
            margin: 1em 0px 1.4em;
            position: relative;
            transition:all 0.5s ease-in-out 0.12s;
            -moz-transition:all 0.5s ease-in-out 0.12s;
            -webkit-transition:all 0.5s ease-in-out 0.12s;
            -o-transition:all 0.5s ease-in-out 0.12s;
        }

        ul#productList li a::before {
            display: block;
            content: " ";
            position: absolute;
            top: 0;
            width: 0;
            height: 2px;
            left: 0;
            right: 0;
            background-color: #536770;
            margin: 0 auto;
            transition:all 0.5s ease-in-out 0.12s;
            -moz-transition:all 0.5s ease-in-out 0.12s;
            -webkit-transition:all 0.5s ease-in-out 0.12s;
            -o-transition:all 0.5s ease-in-out 0.12s;
        }

        ul#productList li a::after {
            display: block;
            content: " ";
            position: absolute;
            bottom: 0;
            width: 0;
            height: 2px;
            left: 0;
            right: 0;
            background-color: #536770;
            margin: 0 auto;
            transition:all 0.5s ease-in-out 0.12s;
            -moz-transition:all 0.5s ease-in-out 0.12s;
            -webkit-transition:all 0.5s ease-in-out 0.12s;
            -o-transition:all 0.5s ease-in-out 0.12s;
        }

        ul#productList li a:hover::after, ul#productList li a:hover::before {
            width: 100%;          
        }

        .prodInfo {
            position: absolute;
            background-color: #FFF;
            background-color: rgba(255,255,255,0.95);
            left: 0;
            right: 0;
            bottom: -100%;
            width: 100%;
            max-width: 1350px;
            height: 100%;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            -o-box-sizing:border-box;
            padding: 0 30px;
            margin: 0 auto;
            text-align: left;
            z-index: 500;
            transition:all 0.7s ease-in-out 0s;
            -moz-transition:all 0.7s ease-in-out 0s;
            -webkit-transition:all 0.7s ease-in-out 0s;
            -o-transition:all 0.7s ease-in-out 0s;
            overflow: auto;
            box-shadow: 0px 0px 11px -10px rgb(34, 34, 34);
            -moz-box-shadow: 0px 0px 11px -10px rgb(34, 34, 34);
            -webkit-box-shadow: 0px 0px 11px -10px rgb(34, 34, 34);
            -o-box-shadow: 0px 0px 11px -10px rgb(34, 34, 34);
        }

        .slideUp {bottom: 0;}

        .hideProd {
            position: absolute;
            top: 10px;
            right: 12px;
            width: 20px;
            height: 20px;
            cursor: pointer;
        }

            .hideProd img {width: 100%;}

        .prodImage {
            width: 60%; 
            float: left;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            -o-box-sizing:border-box;
            padding: 20px 60px 40px 0;
        }
            .prodImage img {
                width: 100%;
                max-width: 650px;
            }

        .prodText {
            width: 40%; 
            float: left;
            box-sizing:border-box;
            -moz-box-sizing:border-box;
            -webkit-box-sizing:border-box;
            -o-box-sizing:border-box;
        }
            .prodText h3 {
                font-size: 1.4em;
                margin-bottom: 0;
                font-weight: 400;
            }

            .prodText p {margin-top: 5px;}

    .prodHelp {
        width: 100%;
        border-top:1px solid #5D6E78; 
        margin: 20px auto;
        padding-bottom: 20px;
        clear: both;
    }  

    .prodHelp h2 {
        color: #333;
        font-weight: 400;
        font-size: 2em;
        margin: 0.7em 0;
    }

    ul.img-list li{
        list-style-type: none;
        display: inline-block;
        width: 24%;
        box-styling: border-box;
        padding: 20px;
    }      

/* CONTACT PAGE */

#wideWrapper {
    overflow: hidden;
    height: 66%;
    padding: 30px 0px;
}
#googlemaps { 
  height: 100%; 
  width: 100%; 
  position:absolute; 
  top: 0; 
  left: 0; 
  z-index: 0;
}

#contactInner {
    background-color: #FFF;
    margin: 0;
    box-shadow: 0px 0px 6px -3px #222;
    -moz-box-shadow: 0px 0px 6px -3px #222;
    -webkit-box-shadow: 0px 0px 6px -3px #222;
    -o-box-shadow: 0px 0px 6px -3px #222;
    width: 400px;
    float: left;
    height: 100%;
    z-index: 15;
    left: -400px;
    transition:all 0.7s ease-in-out 0s;
    -moz-transition:all 0.7s ease-in-out 0s;
    -webkit-transition:all 0.7s ease-in-out 0s;
    -o-transition:all 0.7s ease-in-out 0s;
    overflow: auto;
}

#contactAddress {
    background-color: #FFF;
    margin: 0;
    box-shadow: 0px 0px 6px -3px #222;
    -moz-box-shadow: 0px 0px 6px -3px #222;
    -webkit-box-shadow: 0px 0px 6px -3px #222;
    -o-box-shadow: 0px 0px 6px -3px #222;
    width: 400px;
    float: left;
    height: 100%;
    z-index: 20;
    overflow: auto;
}

    #contactAddress p {font-size: 0.85em;}

.fadeIn {visibility: visible !important; opacity:1 !important;}

#contactForm {
    width: 100%;
    margin: 0 0 30px 0;
}
    #contactForm input {
        width: 100%;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        border: 1px solid #536770;
        margin: 0 0 30px 0;
        height: 40px;
        padding: 2px 8px;
        color: #444;
        font-size: 0.85em;
    }

    #contactForm textarea {
        width: 100%;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        border: 1px solid #536770;
        margin: 0 0 30px 0;
        height: 200px;
        padding: 5px 8px;
        color: #444;
        font-size: 0.85em;
    }

    .closeForm {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

    .closeForm img {width: 100%;}

.moxieContent img {}
/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

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

    .mobNo {display: none !important;}
    .mobYes {display: block;}

    .mobileLogo {float: left; width: 120px; margin-top: 3px;}

    nav {display: none;}

    #navIcon {display: block; cursor: pointer;}

    nav ul {display: none;}

    header{
        background-color: #fff;
    }

}

@media screen and (max-width: 850px) {
    .backgroundGallery {
        position: relative;
        height: 34%;
        overflow: hidden;
        margin-bottom: 30px;
    }


    #AboutBox {
        position: relative;
        bottom: auto;
        top: 0px;
        background-color: #7C8A92;
        box-shadow: none;
        margin-top: 20px;
    }

    .close {display: none;}

    .half {
        width: 100%;
        padding: 0px 0 10px 0;
        margin: 0 0 10px 0;
    }

    .owl-prev, .owl-next {position: absolute;}

    ul.aboutList li {
        margin: 15px 0px 20px 0;
        width: 100%;
    }

    footer {
        position: relative;
        margin: 30px 0 0 0;
    }

    ul#productList li a {font-size: 1em;}
}

@media screen and (max-width: 800px) {
    #contactAddress, #contactInner {width: 50%;}

    article img{
        width: 100%;
        height: auto;
    }

}

@media screen and (max-width: 768px) {
    header {background-color: #FFF;}

        header img {width: 100%;}

    nav {background-color: #7C8A92;}

    ul#productList li {width: 32.8%;}

    #wideWrapper {padding: 8.5% 0; height: 72%;}

}

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

    body {padding:67px 0 0 0px; }

    header {
        padding: 15px 0px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        box-shadow: 1px 0px 1px 1px rgba(0,0,0,0.4);
        z-index: 400;
    }
    .backgroundGallery {height: 490px;}
    .backgroundGallery .item {height: 480px;}
    .backgroundGallery .item img {width: auto;height: 480px;}

    /*.mobNo {display: none !important;}
    .mobYes {display: block;}

    .mobileLogo {float: left; width: 120px; margin-top: 3px;}
    
    nav {display: none;}

    #navIcon {display: block; cursor: pointer;}

    nav ul {display: none;}*/

    /*.js div#preloader {
        background-size: 300px;
    }*/

    .owl-prev, .owl-next {
        width: 36px;
        background-size: 32px;
    }

    ul.aboutList li, ul.aboutList li.sofa {
        text-align: center;
        font-size: 1.2em;
        line-height: 1.6em;
        margin: 50px 0px;
        font-weight: 100;
    }

        ul.aboutList li img {
            display: block;
            margin: 0 auto 20px auto;
            width: 80px;
            float: none;
        }

        .third {
            width: 100%;
            margin: 10px 0 15px 0;
            text-align: center;
        }

        footer .mailFoot {
            text-align: center;
        }

        #AboutBox h2 {
            font-size: 40px;
            width: 100%;
            text-align: left;
        }

        #AboutBox p {
            font-size: 1em;
        }

    ul#productList li {width: 49.4%;}

    .prodImage {
        padding: 20px 0px;
        width: 100%;
    }

    .prodText {width: 100%;}

    .hideProd {
        top: 28px;
        right: 20px;
        width: 30px;
        height: 30px;
    }

    .prodInfo {z-index: 700;}

    #googlemaps {height: 280px; min-height: 280px !important; position: relative;}

    #wideWrapper {
        padding: 0;
        height: auto !important;
        margin-top: 40px;
    }

    #contactAddress {
        width: 94%;
        margin: 0 auto;
        float: none;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        height: auto;
    }

    #contactInner {
        width: 94%;
        margin: 0 auto;
        float: none;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        height: auto;
        position: relative;
        left: auto;
    }

    .moxieContent img{
        max-width: 100%!important;
        float: none!important;
        display: block;
        margin: 0 auto!important;
    }

    ul.img-list{
        padding-left: 0;
    }

    ul.img-list li{
        width: 45%;
        padding: 2%;
    }

    ul.img-list li img{
        width: 100%;
    }

}

@media screen and (max-height: 768px) {
    #wideWrapper {height: 588px;}

    #googlemaps {min-height: 840px;}
}

@media screen and (max-height: 400px) {

.mobNo {display: none !important;}
    .mobYes {display: block;}

    header .mobYes {max-width: 180px;}

#googlemaps {height: 180px; position: relative;}

    #wideWrapper {
        padding: 0;
        height: auto;
    }

    #contactAddress {
        width: 94%;
        margin: 0 auto;
        float: none;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        height: auto;
    }

    #contactInner {
        width: 94%;
        margin: 0 auto;
        float: none;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -o-box-sizing:border-box;
        height: auto;
        position: relative;
        left: auto;
    }
}

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

    ul#productList li {width: 100%;}

    .moxieContent h1{
        font-size: 2.1em;
    }

    ul.img-list li img{
        height: 150px;
    }

}

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

    #mobileNav ul li{
        font-size: 1.1em;
    }

    article h1{
        font-size: 1.8em;
    }

}

@media screen and (max-width: 320px) and (max-height: 450px) {

    #mobileNav ul li{
        font-size: 1em;
        margin: 15px 0;
    }

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}