/*
 * MAIN CSS FOR THE DRESSER: http://www.thedresser.com.au
 * 
 * Author: Brigitte de Villiers
 * Version: 3
 *
 * Based on HTML5 Boilerplate v4.0.1
 * Credit and big thanks to Nicolas Gallagher, Jonathan Neal, Kroc Camen, and the H5BP dev community and team.
 */

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

html,
button,
input,
select,
textarea {
    color: rgb(140,138,137);
}

body {
    font-size: 1em;
    line-height: 1.4;
    font-family: DrescherGroteskBT-Book, sans;
    font-weight: normal;
    text-align: center;
    overflow-x: hidden;
    position: relative;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

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

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

a, a:visited {color: #3b3a39; text-decoration: none;}
a:hover {color: #bc000e;}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img { vertical-align: middle; }

/*
 * Remove default fieldset styles.
 */

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

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

textarea { resize: vertical; }

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

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

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

/*
 * Headers
 */

h1, h2 {position: relative; z-index: 9; color: #000; text-transform: uppercase; font-weight: normal; overflow: visible; font-family: DrescherGroteskBT-Light, sans; }

h1 {
    font-size: 3.6em; /* 72px */
    letter-spacing: 0.04166667em;
    line-height: 1.111; /* 80px */
    margin: 0.135em 0 0.27777777em 0; /* 20px; */
    padding: 0;
    overflow: visible;    
    width: 100%; /* required by jquery.fittext.js */
}

#customShoppingTours h1 {margin-bottom: 0;}

.tour h2 {font-size: 1.5em; letter-spacing: 0.08em; margin: 0.65em 0 0;}

strong {color: #000; font-weight: normal;}

p {z-index: 9; position: relative; margin: 1.5em auto 2em; width: 85%;}

blockquote {
    margin: 0 auto;
    font-family: DrescherGroteskBT-Light, sans;
    font-size: 1.9em;
    line-height: 1.1052631;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ==========================================================================
 * LAYOUT
   ========================================================================== */

#scrollPrompter {z-index: 10; position: fixed; right: 30px; top: 68%; width: 26px; height: 65px;}
.scrollPrompt {position: absolute; top: 0; left: 0; width: 26px; height: 26px; background-repeat: no-repeat; background-position: 0 0;}
#scrolldown1 {background-image: url(../img/scrolldown1.png);}
#scrolldown2 {top: 13px; background-image: url(../img/scrolldown2.png);}
#scrolldown3 {top: 26px; background-image: url(../img/scrolldown3.png);}

#vScrollContainer {
    position: relative;
    padding: 0 12px;    
    font-size: 1.25em; /* 20px */
    line-height: 1.2; 
    margin: 0 auto; 
    max-width: 940px;
}

.hScrollContainer {position: relative; min-height: 800px; }

footer {
    padding: 35px 0 30px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.6em; /* 12px */
    background: url(../img/hero-border.png) repeat-x 0 0;
}

footer p {margin: 0 auto 1em; line-height: 1.6;}
footer p span {white-space: nowrap;}


/* ==========================================================================
 * MAIN MENU
   ========================================================================== */

#menu {
    position: fixed;
    z-index: 10;
    top: 0; 
    right: 10px; 
    margin: 0;
    padding: 38px 0 0;
    width: 120px;
    font-size: 1em;
    line-height: 1.125;
    text-align: center;
    background: rgba(217,215,216, 0.9) url(../img/button.png) no-repeat center 15px ;
}

#menu:after {
    content:'';
    position: absolute;
    right: 0;    
    bottom: -60px;
    width: 0;
    height: 0;
    border-right: 120px solid rgba(217,215,216, 0.9);
    border-bottom: 60px solid transparent;
 }

.menuToggle {
    z-index: 11; 
    display: block;
    padding: 8px 0 0;
    margin: 0 auto;
    text-transform: uppercase; 
    font-size: 0.8em; 
    letter-spacing: 0.21em; 
    cursor: pointer;
}

.menuItems {
    position: relative; 
    margin: 0 auto;  
    width: 106px; 
    padding: 8px 0 1px; 
    height: 0; 
    overflow: hidden; 
}

.menuItems li {
    position: relative; 
    display: block; 
    border-bottom: 1px solid #fff; 
}

#menu a, #menu a:visited {
    z-index: 1;
    position: relative;
    display: block;
    text-decoration: none;
    color: #000;
    padding: 0.3333333em 0 0.2222222em; 
    border-bottom: 2px solid #fff;
    margin-bottom: 1px; 
}

#menu:hover .menuItems, #menu.expanded .menuItems {height: auto; padding-bottom: 15px;}


/* ==========================================================================
   SUB-SECTIONS
   ========================================================================== */

.page {position: relative; width: 100%; padding: 2em 0 0 0; text-align: center;}
.feature {position: relative;}
.dresser, .tourDresser {position: relative; width: 100%; min-height: 291px; margin: 0; }
.featureCopy {position: relative; z-index: 9; width: 85%; margin: 2.5em auto 1.5em; }
.tour .featureCopy {margin: 1em auto;}

.hero {
    z-index: 9;
     margin: 0 auto;
    width: 80%;
    box-sizing: border-box;
}

 .hero p {margin-bottom: 1.5em; width: 100%;}


/* ==========================================================================
   WELCOME
   ========================================================================== */

#welcome {margin-top: 0; min-height: 291px; }

.header {
    z-index: 9;
    position: absolute;
    top: 29%;
    right: 15.74468%; /* 410px at full size */
    margin: 0;
    width: 40.638298%; /* 382px at full size */
    max-width: 382px;
    font-size: 0.7em;
    line-height: 1;
    font-family: DrescherGroteskBT-Book, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.21em;
    color: #000;
    visibility: hidden;
}

.theDresserLogo {
    display: block;
    margin-top: 3.5%; /* % is based on WIDTH of element even though it's for the TOP value */
    width: 100%; 
    height: 58px;
    font-size: 1px;
    line-height: 1;
    font-family: sans-serif;
    background: url(../img/thedresser.png) scroll no-repeat 0 0;
    background-size: 100%;
}


/* ==========================================================================
   CUSTOM SHOPPING EXPERIENCES (aka custom shopping tours)
   ========================================================================== */

#customShoppingTours {position: relative; padding-top: 0.5em;}
.tour {position: absolute; top: 0; width: 100%; margin: 0 0 20px 0; }
.tourDresser {position: relative; bottom: 0; width: 100%; padding-top: 100px;}
.tour h2, .tour .featureCopy {visibility: hidden;}

.tourMenu {
    z-index: 9;
    position: absolute;
    margin: 0 auto;
    visibility: hidden;
    bottom: 35.5%;     
    width: 10.5em;
    padding: 0;
    box-sizing: border-box;
}

.tourMenu h2 {margin: 0; font-size: 1.1em; letter-spacing: 0.21em;}

.tourNext, .tourPrev {
    z-index: 11;
    position: absolute;
    top: 5px;
    display: block;
    width: 12px; 
    height: 12px; 
    background-image: url(../img/icons.png);
    background-repeat: no-repeat;
}

.tourPrev {
    left: 10px;
    background-position: 0 -50px;
}

.tourNext {
    right: 16px;
    background-position: -20px -50px;
}

.tourPrev:hover {background-position: 0 -67px;}
.tourNext:hover {background-position: -20px -67px;}

.tourMenu ul {position: relative; overflow: hidden; visibility: hidden; margin-top: 0.5em;}
.tourMenu:hover ul {visibility: visible;}
.tourMenu .activeSlide a {color: #000;}

.tourLink, .tourLink:visited {
    display: block;
    text-decoration: none;
    color: rgb(140,138,137);
}

#menu a:hover, .tourLink:hover {color: #bc000e;}


/* ==========================================================================
    ANIMATED IMAGES

    max height of dresses, except for dress1 is 800px
    800px is 84.21052% of 950px, which was the original dress height 
    ========================================================================== */

.dress, .tourDress {position: relative; bottom: 0; display: block; z-index: 0; left: -1000px; }
.tourDress {bottom: 20px; visibility: hidden;}
.prop, .tourProp  {z-index: 5; position: absolute; bottom: 20px; right: -3000px; visibility: hidden;}

/* DRESSER: WELCOME */
.dresser1 {margin-top: 0; }
#dress1 {width: 57.4468%;  max-width: 540px; xxxmin-width: 270px; min-width: 203px; } /* max: 850px tall, 540px wide, min: 40% = 216px wide; */
#prop1-1 {bottom: 4px; width: 65.10638%; max-width: 612px; xxxmin-width: 290px; min-width: 230px;}

/* DRESSER: PERSONAL STYLE SERVICES */
.dresser2 {padding-top: 75px;} /* because prop is lower than dress */
#dress2 {bottom: 57px; width: 50.42553%; max-width: 474px; xxxmin-width: 237px; min-width: 190px;}
#prop2-1 {bottom: 10px; width: 51.70212%; max-width: 486px; xxxmin-width: 243px; min-width: 194px;}

/* DRESSER: TOUR 1 */
.td1 {padding-top: 130px;}
#dress3 {width: 40.95744%; max-width: 385px; min-width: 193px;}
#prop3-1 {bottom: 28px; width: 39.89361%; max-width: 375px; min-width: 188px;}

/* DRESSER: TOUR 2 */
.td2 {padding-top: 200px;}
#dress4 {width: 36.91489%; max-width: 347px; min-width: 174px;}
#prop4-1 {bottom: 21px; width: 50.21276%; max-width: 472px; min-width: 236px;}
#prop4-2 {bottom: 21px; width: 22.23404%; max-width: 209px; min-width: 105px;}

/* DRESSER: TOUR 3 */
#dress5 {width: 44.04255%; max-width: 414px; min-width: 212px;}
#prop5-1 {bottom: 26px; width: 43.0851%; max-width: 405px; min-width: 203px;}
#prop5-2 {bottom: 25px; width: 25.10638%; max-width: 236px; min-width: 118px;}

/* DRESSER: TOUR 4 */
#dress6 {width: 47.4468%; max-width: 446px; min-width: 223px;}
#prop6-1 {bottom: 38px; width: 32.12765%; max-width: 302px; min-width: 151px;}
#prop6-2 {bottom: 36px; width: 47.65957%; max-width: 448px; min-width: 224px;}

/* DRESSER: TOUR 4 */
#dress7 {width: 57.12765%; max-width: 537px; min-width: 269px;}
#prop7-1 {bottom: 38px; width: 39.25531%; max-width: 369px; min-width: 185px;}
#prop7-2 {bottom: 50px; width: 32.02127%; max-width: 301px; min-width: 150px;}

/* DRESSER: PHILOSOPHY */
#dress8 {width: 49.46808%; max-width: 465px; min-width: 233px;}
#prop8-1 {bottom: 0; width: 33.51063%; max-width: 315px; min-width: 158px;}


/* ==========================================================================
   PHILOSOPHY & GIFT VOUCHER
   ========================================================================== */

q {position: relative; color: #000;}
q .qOpen, q .qClose {display: block; position: absolute; top: -0.2em; left: -5%; width: 0.237em; font-size: 3em; color: #ccc9c8; }
q .qClose {left: auto; right: -5%; padding: 0 0 0 0.1em;}

#philosophyHero {right: 8%; max-width: 480px; font-size: 1.1em; }
#chichi,  #quote1 {position: relative; visibility: hidden}
#philosophyHero dl, #philosophyHero dt, #philosophyHero dd {width: 100%;}
.phonetics {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 0.9em}
.defn {margin: 1em 0 2.5em;}
.defn strong {display: block; margin: 0 0 1em 0; color: rgb(140,138,137); }

#signature {
    position: relative;
    visibility: hidden;
    margin: 60px 0 40px;
    width: 100%;
    height: 207px;
    background: url(../img/sig.gif) no-repeat center center;
    background-size: 100%;
}

#styleStatement {z-index: 5; position: relative; max-width: 680px; visibility: hidden; }
#styleStatement .quote {position: relative; width: 90%; padding: 0 5%;}
#styleStatement .q {width: 100%; display: inline-block;}
#styleStatement .qOpen, #styleStatement .qClose {display: block; position: absolute; top: -0.125em; left: 2%; width: 0.237em; font-size: 3em; color: #ccc9c8; }
#styleStatement .qClose {top: auto; left: auto; bottom: -0.6em; right: 2%; padding: 0 0 0 0.1em;}

#giftVoucher, .lastSection { overflow: hidden; padding-bottom: 2em; background: url(../img/hero-border.png) repeat-x 0 bottom;}
#giftVoucher { padding-bottom: 1em;}

/* ==========================================================================
   CONTACT SECTION AND CONTACT FORM VIA MODAL OVERLAY
   ========================================================================== */

#contact {
    height: 310px;
    margin: 1.5em 0 0;
    padding: 30px 0 290px;
    background: url(../img/bg-contact.jpg) no-repeat 30px 95%;
}

.contactInfo {
    margin: 0 auto;
    width: 100%;
    max-width: 370px;
    font-size: 1.1em;
}

.contactInfo h1, #contactOverlay h1 {
    margin: 0;
    height: 43px;
    background: url(../img/thedresser-small.png) no-repeat center center;
    text-align: center;
}

.contactDetails {margin-top: 40px; color: #000;}
.contactDetails header {margin-bottom: 20px;}
.contactDetails h2 {
    letter-spacing: 0;
    font-family: DrescherGroteskBT-Book, sans;
    font-weight: normal;  
    text-transform: none;
}

 .contactDetails h2, .contactDetails p {
    margin: 0;
    font-size: 1em;
}

.contactDetails .phone {font-size: 0.85em; line-height: 1.37; }

.contactDetails p { width: 100%; font-family: DrescherGroteskBT-Light, sans;}

.social {clear: left; margin: 40px auto;}
.social li {display: inline-block;}
.social li:first-child {margin-right: 7px;}

.fb-link, .tw-link {
    display: block;
    width: 20px;
    height: 20px;
 }

.fb-link {background: url(../img/icons.png) no-repeat 0 0;}
.fb-link:hover {background-position: -25px 0;}
.tw-link {background:  url(../img/icons.png) no-repeat 0 -25px;}
.tw-link:hover {background-position: -25px -25px;}

#contactOverlay { font-size: 1.25em; background: url(../img/bg-overlay.jpg) no-repeat 30px bottom;}
#contactOverlay .contactOther {position: relative; }
#contactOverlay .contactDetails {margin: 30px auto 0;}
#contactOverlay .social {margin: 25px auto 5px;}
#contactForm {margin: 0 auto 30px; width: 98%; padding: 0 0 28px 0; background: url(../img/hero-border.png) repeat-x 0 bottom; }
#contactForm h2 {margin-bottom: 1em; font-size: 1.1em; letter-spacing: 0.21em;}
#contactForm div { margin: 0 auto 10px; text-align: left; width: 100%; }
#contactForm label {display: block; float: left; width: 18%; text-align: right; font-size: 0.9em; line-height: 1.1}
.status {display: block; float: right; width: 77%; padding-top: 5px; font-size: 0.9em; line-height: 1.1; color: #d80f26;}
#sendStatus {display: none;}

.txt, .txtarea {
    display: block;
    float: right;
    color: #676767;
    width: 75%;
    border: 1px dotted #ccc;
    padding: 5px 1%;
    font-size: 0.8em;
 }

.txtarea {
    resize: none;
    height: 120px;
}

.txt:focus,
.txtarea:focus {
    border-style: solid;
    border-color: #bababa;
    color: #444;
}

input.error,
textarea.error {
    border-color: #973d3d;
    border-style: solid;
    background: #f2d5d5;
    color: #a35959;
}

input.error:focus,
textarea.error:focus {
    border-color: #973d3d;
    color: #a35959;
}
.g-recaptcha.error > div {
    border: 1px solid #973d3d;
}
#send {
    clear: right;
    float: right;
    cursor: pointer;
    padding: 7px 11px 5px;
    border-radius: 5px;
    border: 0;
    background: rgb(190,187,185);
    color: #000;
    display: block;
    font-family: 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, sans;
    text-transform: uppercase;
    letter-spacing: 0.21em;
    font-size: 0.6em;
    line-height: 1;

}

#send:hover, #send:active {
    background: #000;
    color: #fff;
}



/* ==========================================================================
   GALLERIES - based on bootstrap-responsive grid
   ========================================================================== */

.gallery {margin: 1.25em 0;}

.thumbnails {
    float: left; 
    width: 100%; 
    *zoom: 1;
}

.thumbnails li {
    display: block;
    float: left;
    margin: 0 1.06382% 2.12765% 1.06382%; /* 20px at full parent width */
    width: 22.87234%; /* 215px at full parent width of 940px */
 }

.thumbnails li img {width: 100%; border: 1px solid rgb(217,216,216);}


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

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.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: h5bp.com/p
 */

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

/*
 * Hide visually and from screenreaders, 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;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

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

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    #vScrollContainer {height: 356px; }
    .page {padding-top: 1.25em;}

    #menu.expanded, #menu:hover {width: 170px; padding-left: 10px; padding-right: 10px;}
    #menu.expanded .menuItems, #menu:hover .menuItems {width: auto;}

    #menu.expanded:after, #menu:hover:after {
        bottom: -95px;
        border-right: 190px solid rgba(217,215,216, 0.9);
        border-bottom: 95px solid transparent;
    }

    #menu.collapsed {width: 100px; padding-left: 0; padding-right: 0;}
    #menu.collapsed:after  {
        bottom: -50px;
        border-right: 100px solid rgba(217,215,216, 0.9);
        border-bottom: 50px solid transparent;
    }

    #menu.collapsed .menuItems {padding: 4px 0 1px;}

    .gallery {padding: 0 12px;}
}


/* Smartphones and ipads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 1024px) {
    
    #wrapper, #vScrollContainer, .page, .dresser, .hScrollContainer { overflow-x: hidden; }
    #vScrollContainer {padding: 0;}
    .menuToggle {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: bold; padding-top: 6px;}
}

@media only screen and (min-width: 500px) {
    
    #menu { right: 20px; }
    .hScrollContainer {min-height: 900px; }
    .tourMenu {bottom: 50%;}
    .tourDresser, .td1, .td2 {padding-top: 50px;}
}

@media only screen and (min-width: 600px) {
    
    #welcome {min-height: 570px;}
    .header {font-size: 1em;}
    .theDresserLogo {margin-top: 5%;}
    
    .hScrollContainer {min-height: 950px; }
    .hero {position: absolute; right: 11%; top: 14%; margin-top: -11.5%; max-width: 14.5em;}
    #philosophyHero {right: -5%; margin-top: -13%; max-width: 360px; }
   
    .tourMenu {bottom: 54%; }
    #contact {padding: 0; background-position: 0 -3px; }
    .contactInfo {position: absolute; top: 30px; right: 5%; padding: 0; }

    #contactOverlay .contactOther {float: right; width: 60%; min-width: 400px;}

    .contactDetails header, .contactDetails p {
        color: #000;
        width: 35%;
        float: left;
        padding-right: 11%;
        font-family: DrescherGroteskBT-Light, sans;
    }

    .contactDetails p { width: 50%; padding-right: 0;}

}

@media only screen and (min-width: 700px) {
    .hero {margin-top: -5.5%; right: 15.5%;}
    #philosophyHero { right: -5%; margin-top: 0.75em; max-width: 400px; }
    #welcome {min-height: 700px; }
 }   

@media only screen and (min-width: 850px) {
    #welcome {min-height: 910px; }
    .hScrollContainer {min-height: 1050px; }
    .hero {right: 17%; margin-top: 0; max-width: 360px;}
    #philosophyHero { right: 2%; margin-top: 3.5em;  }
    .tourMenu {bottom: 59%; }
    #contact {background-position: 60px -3px; }
}

@media only screen and (min-width: 940px) {
     .header { top: 21.5%; font-size: 1.1em;}
    .theDresserLogo {margin-top: 5.2356%;}
    .hScrollContainer {min-height: 1050px; }
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        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 for images, or javascript/internal links
     */

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

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

    thead { display: table-header-group; /* h5bp.com/t */ }

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

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

    @page { margin: 0.5cm; }

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

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