/*
Theme Name: A&B Interiors
Theme URI: http://abinteriors.bostonpublishing.com
Description: A&B Interiors template
Author: Krafthaus
Author URI: http://krafthaus.com.au
Version: 1.0
*/

/* reset CSS */
/*
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
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;
}

/* end of reset */

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

@font-face {
    font-family: 'FuturaLight';
    src: url('font/futural-webfont.eot');
    src: url('font/futural-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/futural-webfont.woff') format('woff'),
         url('font/futural-webfont.ttf') format('truetype'),
         url('font/futural-webfont.svg#futura_lt_btlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BodoniMT-Italic';
    src: url('font/bod_i_0.eot');
    src: url('font/bod_i_0.eot?#iefix') format('embedded-opentype'),
             url('font/bod_i_0.woff') format('woff'),
             url('font/bod_i_0.ttf') format('truetype'),
             url('font/bod_i_0.svg#bod_i_0') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Champagne-Limousines-Regular';
    src: url('font/champagne_limousines-webfont.eot');
    src: url('font/champagne_limousines-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/champagne_limousines-webfont.woff') format('woff'),
         url('font/champagne_limousines-webfont.ttf') format('truetype'),
         url('font/champagne_limousines-webfont.svg#champagne__limousinesregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Champagne-Limousines-Bold';
    src: url('font/champagne_limousinesbold-webfont.eot');
    src: url('font/champagne_limousinesbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/champagne_limousinesbold-webfont.woff') format('woff'),
         url('font/champagne_limousinesbold-webfont.ttf') format('truetype'),
         url('font/champagne_limousinesbold-webfont.svg#champagne__limousinesbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'GothamLightRegular';
    src: url('font/gotham-light-webfont.eot');
    src: url('font/gotham-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/gotham-light-webfont.woff') format('woff'),
         url('font/gotham-light-webfont.ttf') format('truetype'),
         url('font/gotham-light-webfont.svg#GothamLightRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamBookRegular';
    src: url('font/gothambook.eot');
    src: url('font/gothambook.eot?#iefix') format('embedded-opentype'),
         url('font/gothambook.woff') format('woff'),
         url('font/gothambook.ttf') format('truetype'),
         url('font/gothambook.svg#GothamBookRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'gothic';
    src: url('font/gothic.eot');
    src: local('gothic'), url('font/gothic.woff') format('woff'), url('font/gothic.ttf') format('truetype');
}

/*
brainware:
We use the CSS hack for IE 7, using *, so don't remove that!
*/

body {
    height: 100%;
}

/* skeleton */
#skeletonbodycontainer {
    overflow: hidden;
    position: fixed;
}

#skeletonbodycontainer.isblogpost {
    overflow: auto !important;
    position: static !important;
}

#skeletonnavigation {
    /* brainware: display this via js */
    display: none;
    width: 16%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 7001;
    background-color:rgba(255,255,255,0.8);
}

#skeletonbottombar {
    /* brainware: display this via js */
    display: none;
    width: 100%;
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 6%;
    background-color:rgba(255,255,255,0.8);
    z-index: 7000;
}
/* end of skeleton */

/* content */
.captiontext, .captiontext2, .rightbutton-sub, .leftbutton-sub {
    /* brainware: display this via js */
    display: none;
}

.headerlogo {
    width: 80%;
    padding: 3% 10% 2% 10%;
}

.headerlogo img {
    width: 95%;
}

/* Dainwatya: Style for contact on menu section bar */
.contactcontainer {
    padding: 10% 10% 5% 10%;
    width: 80%;
    display: none;
}

.contactcontainer .section {
    margin-bottom: 4%;
}

.contactcontainer .section.last {
    margin-bottom: 0%;
}

.contactcontainer .section .label {
    font-family: 'Champagne-Limousines-Regular';
    font-weight: 600;
    text-transform: uppercase;
}

.contactcontainer .section .content {
    font-family: 'Champagne-Limousines-Bold';
    text-transform: uppercase;
}

.contactcontainer .section .content.limiter {
    width: 80%;
} 

.contactcontainer .section .content a {
    text-decoration: none;
    color: #000;
}

.contactcontainer .section .content .opening-time {
    margin-left: 2%;
}


.socialmedia {
    width: 100%;
    height: 6%;
    position: absolute;
    bottom: 0px;
    background: black;
}

.socialmedia ul {
    padding-left: 6%;
    padding-top: 4%;
}

.socialmedia ul li {
    display: inline;
    margin: 4% 0%;
}

.socialmedia ul li a {
    width: 40%;
}

.socialmedia ul li img {
    height: 53%;
}

.menucontainer {
    padding: 0% 0% 7% 10%;
    bottom: 5%;
    position: absolute;
    font-family: 'ACaslonPro-Italic';
    color: #000;
    width: 80%;
    display: none;
}

.menucontainer ul li {
    padding-top: 2.0%;
    width: 90%;
}

.menucontainer ul li.current div {
    border-bottom: 1px solid #000;
}

.menucontainer ul li.current-blog div {
    border-bottom: 1px solid #000;
}

.menucontainer ul li a {
    color: #000;
    text-decoration: none;
}

.menucontainer ul.submenu li {
    padding-top: 2%;
    width: 100%;
}

.submenu {
    padding-top: 3%;
    padding-bottom: 3%;
    display: none; /* will show it on the js code */
    font-size: 0.72em !important;
}

.rightbutton{
    position: absolute;
    right: 0px;
    top: 45%;
    color: #FFF;
    background-color: #000;
    font-family: "FuturaLight";
    width: 5.5%;
    height: 7.8%;
    z-index: 20;
}

.rightbutton a {
    text-decoration: none;
    color: #FFF;
}

.rightbutton:hover {
    cursor: pointer;
}

.rightbutton .middlewrapper{
    text-align: center;
}

.rightbutton-sub, .leftbutton-sub {
    position: fixed;
    right: 0px;
    top: 45%;
    color: #FFF;
    background-color: #000;
    font-family: "FuturaLight";
    width: 5.5%;
    height: 7.8%;
}

.rightbutton-sub a, .leftbutton-sub a {
    text-decoration: none;
    color: #FFF;
}

.rightbutton-sub:hover, .leftbutton-sub:hover {
    cursor: pointer;
}

.rightbutton-sub .middlewrapper, .leftbutton-sub .middlewrapper{
    text-align: center;
}

.leftbutton-sub{
    left : 16%;
}

.bottombartext {
    text-align: right;
    padding-right: 1%;
    font-family: 'FuturaLight';
    text-transform: uppercase;
}

.bottombartext span {
    font-family: 'BodoniMT-Italic';
    font-weight: bold;
    font-size: 1.2em;
}

.pagecontainer {
    background: #FFF;
    height: 100%;
    width: 100%;
    position: absolute;  
}

.pagecontainer.isblogpost {
    height: auto !important;
    /*position: static !important;*/
    margin-top: 2% !important;
}

.pagecontainer .page {
    height: 100%;
    width: 100%;
    overflow: hidden;
    /*-webkit-transform: translate3d(0,0,0);*/ /* Dainwatya: 2013-03-25 enable this will make subpage element moving on slide */
}

.pagecontainer .page.isblogpost {
    height: auto !important;
    /*overflow: auto !important;*/
}

.pagecontainer.hassubpage .page {
    position: absolute;
}

/* Style for Home page */
.home .home-title {
    position: absolute;
    width: 30%;
    top: 13%;
    left: 79%;
    font-family: 'ACaslonPro-Italic';
}

.home .textblock {
    width: 28%;
}

.home .watch-button {
    margin-top: 5%;
    margin-left: -2%;
    font-size: 0.5em;
    font-style: normal;
    font-family: 'gothic';
    text-transform: uppercase;
    background-color: #000;
    width: 48%;
}

.home .watch-button * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.home .button-link {
    display: block;
    text-decoration: none;
    height: 2.5em;
    color: #fff;
    padding: 4%;
}

.home .button-warp {
    display: table;
    width: 100%;
    height: 100%;
    background-image: url('images/watch_now.png');
    background-repeat: no-repeat;
    background-position: right center;
    -webkit-background-size: contain;
    background-size: contain;
}

.home .button-item {
    display: table-cell;
    vertical-align: middle;
}

.home .watch-button:hover .button-warp {
    color: #ff0062;
    background-image: url('images/watch_now_hover.png');
}

/*
.home .watch-button {
    margin-top: 5%;
    margin-left: -2%;
    font-size: 60%;
    font-style: normal;
    font-family: 'Champagne-Limousines-Bold';
    text-transform: uppercase;
    background-color: #000;
    width: 45%;
    padding: 1%;
}

.home .button-link {
    display: table;
    width: 100%;
    text-decoration: none;
    color: #fff;
}

.home .button-item {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.home .button-item img {
    width: auto;
    height: 80%;
    vertical-align: middle;
}

.home .button-item-img-hover {
    display: none;
}

.home .watch-button:hover .button-item-img-hover {
    display: table-cell;
}

.home .watch-button:hover .button-item-img {
    display: none;
}
*/

/* Style for Soft furnishing page */
.furnishing .captiontext {
    position: absolute;
    top: 10%;
    left: 26%;
    font-family: 'ACaslonPro-Italic';
    width: 50%;
}

.furnishing .captionbackground {
    background: white;
    width: 39%;
    top: 23%;
    position: absolute;
    left: 39%;
    padding: 2.2%;
}

.furnishing .captiontext2 {
    font-family: 'GothamLightRegular';
    line-height: 110%;
}

.furnishing .captiontext2 span {
    font-size: 1.3em;
    font-family: 'ACaslonPro-Italic';
}    

/* Style for Blinds & Shutters page */
.blinds .captiontext {
    margin-bottom: 3.5%;
    font-family: 'ACaslonPro-Italic';
    font-weight: 600;
}

.blinds .captiontext span {
    font-family: 'BodoniMT-Italic';
}

.blinds .captionbackground {
    background: white;
    width: 37%;
    bottom: 9.25%;
    position: absolute;
    left: 18.5%;
    padding: 2.2%;
}

.blinds .captiontext2 {
    font-family: 'GothamLightRegular';
    line-height: 110%;
}

.blinds .captiontext2 span {
    font-size: 1.3em;
    font-family: 'ACaslonPro-Italic';
}

.blinds .captionimage {
    margin-top: 3%;
}

.blinds .captionimage img {
    width: 30%;
    float: right
}

/* Style for External page */
.external .captionbackground {
    background: white;
    width: 37%;
    bottom: 9.25%;
    position: absolute;
    left: 18.5%;
    padding: 2.2%;
}

.external .captiontext {
    margin-bottom: 3.5%;
    font-family: 'ACaslonPro-Italic';
    font-weight: 600;
}

.external .captiontext2 {
    font-family: 'GothamLightRegular';
    line-height: 110%;
}

.external .captiontext2 span {
    font-size: 1.3em;
    font-family: 'ACaslonPro-Italic';
}

/* Style for Motorisation page */
.motorisation .captionbackground {
    background: white;
    width: 37%;
    bottom: 9.25%;
    position: absolute;
    left: 18.5%;
    padding: 2.2% 2.2% 0% 2.2%;    
}

.motorisation .captiontext {
    margin-bottom: 3.5%;
    font-family: 'ACaslonPro-Italic';
    font-weight: 600;
}

.motorisation .captiontext2 {
    font-family: 'GothamLightRegular';
    line-height: 110%;
}

.motorisation .captiontext2 span {
    font-size: 1.3em;
    font-family: 'ACaslonPro-Italic';
}

.motorisation .captionimage {
    margin-top: 2.5%;
    width: 100%;
}

.motorisation .captionimage .captiontext3 {
    font-family: 'GothamLightRegular';
    line-height: 110%;
    display: inline-block;
    vertical-align: top;
    width: 50%;
}

.motorisation .captionimage .captiontext3 a {
    text-decoration: none;
    font-weight: bold;
    color: inherit;
}

.motorisation .captionimage .captiontext3 a:hover {
    text-decoration: underline;
}

.motorisation .captionimage .imageposition {
    display: inline-block;
    width: 25%;
    float: right;
    margin-bottom: 4%;
}

.motorisation .captionimage .imageposition img {
    width: 100% !important;
    height: auto !important;
}

/* Style for Commercial page */
.commercial .captionbackground {
    background: white;
    width: 37%;
    bottom: 9.25%;
    position: absolute;
    right: 1.5%;
    padding: 2.2%;
}

.commercial .captiontext {
    margin-bottom: 3.5%;
    font-family: 'ACaslonPro-Italic';
    font-weight: 600;
}

.commercial .captiontext2 {
    font-family: 'GothamLightRegular';
    line-height: 110%;
}

.commercial .captiontext2 span {
    font-size: 1.3em;
    font-family: 'ACaslonPro-Italic';
}

/* Style for Enquiry page */
.enquiry .captionbackground {
    background-color: white;
    position: absolute;
    width: 38%;
    top: 30%;
    left: 18.5%;
    height: 60%;
    font-family: 'ACaslonPro-Italic';
}

.enquiry .captiontext {
    margin-left: 3%;
    margin-top: 4%;
    font-size: 1.0em;
}

.enquiry .enquire-form {
    width: 90%;
    margin-left: 3%;
    margin-top: 2%;
}

.enquiry .caption-by-line {
    border-bottom: 1px solid rgba(0,0,0,.2);
    padding : 0%;
}   

@-moz-document url-prefix() {
    .enquiry .captionbackground {
        height: 61%;
    }

    .enquiry .enquire-form {
        width: 47.5%;
    }     
}

.enquiry input, 
.enquiry textarea {
    padding: 0%;
    margin-left: 1%;
    font-family: 'ACaslonPro-Italic';
    font-weight: 400;
    font-size: 1.2em;
    -webkit-appearance: none;
    line-height: 120%;
}

.enquiry .enquire-form input[type=text] {
    width: 50%;
    border: none;
}

.enquiry .enquire-form textarea {
    width: 98%;
    border: none;
}

.enquiry .enquire-form .comment {
    width: 20%;
    padding-top: 1%;
}

.enquiry .enquiry-submit {
    padding: 2% 15% 0 2%;
    background-color: #eee3cf;
    width: 15%;
    height: 1.2em;
    position: absolute;
    bottom: 3%;
    left: 3% !important;
    border: 1px solid #f1e8d7;
    cursor: pointer;
}

/* Style for About Us page */
.aboutus .captionbackground {
    position: absolute;
    top: 48.75%;
    left: 32.8125%;
    height: 39%;
    width: 53.75%;
    background: white;
    padding: 2.2% 2.2% 0% 2.2%;    
}

.aboutus .captiontext {
    font-family: 'ACaslonPro-Italic';
    font-weight: 600;
}

.aboutus .captiontext2 {
    height: 75%;
    overflow: auto;
    font-family: 'GothamLightRegular';
    line-height: 110%;
}

.aboutus .captiontext2 p {
    margin-bottom: 10px;
    line-height: 110%;
}

/* Style for Testimonials page */

.testimonials-box {
    height: 80%;
    width: 44.375%;
    /* overflow: hidden; */
    opacity: 0;
    position: absolute;
    left: 39.375%;
    top: 6%;
}

.testimonials-title {
    padding-bottom: 2.083%;
    color: #000000;
    font-family: 'ACaslonPro-Italic';
    text-align: right;
}

.testimonials-item {
    background: #ffffff;
    margin-bottom: 1.25%;
    font-family: 'GothamLightRegular';
}

.testimonials-item-container {
    padding: 3.1667% 4.1667%;
}

.testimonials-item-title {
    font-family: 'ACaslonPro-Italic';
    margin-bottom: 1%;
}

.testimonials-item-text,
.testimonials-item-meta {
    margin-left: 3%
}

.testimonials-item-meta {
    display: block;
    font-family: 'ACaslonPro-Italic';
    margin-top: 2.083%;
}

.testimonials-item-meta:before {
    content: '~ ';
}

/*
.testimonials .captionbackground {
    position: absolute;
    bottom: 0;
    left: 18.5%;
    height: 90%;
    width: 40%;
    background: white;
    padding: 2.2% 2.2% 0% 2.2%;    
}

.testimonials .captiontext {
    margin-bottom: 3.5%;
    font-family: 'ACaslonPro-Italic';
    font-weight: 600;
}

.testimonials .captiontext2 {
    height: 75%;
    overflow: auto;
    font-family: 'GothamLightRegular';
    line-height: 110%;
}

.testimonials .captiontext2 p {
    margin-bottom: 10px;
}

.testimonials .captiontext2 blockquote {
    font-style: italic;
}

.testimonials .captiontext2 em {
    text-align: right;
    font-weight: bold;
}
*/

/* Style for Contact page */
.contact-page {
    -webkit-transform-style: flat;
    -webkit-transform: translate3d(0,0,0);
}

.contact-page .contact {
    background: white;
    width: 38%;
    top: 5%;
    position: absolute;
    left: 18.5%;
    padding: 1%;
    height : 80%;
    -webkit-transform-style: flat;
    -webkit-transform: translate3d(0,0,0);
}

.contact-page .contact .location {
    height: 55%;
}

.contact-page .contact .googlemapcanvas {
    height: 100%;
    -webkit-transform-style: flat;
    -webkit-transform: translate3d(0,0,0);
}

.contact-page .contact .googlemapcanvas iframe{
    width: 100%;
    height: 100%;
    position: relative;
}

#mapcontent .title {
    font-family: 'ACaslonPro-Italic';
    font-size: 2em;
}

#mapcontent .address {
    font-family: 'GothamBookRegular';
}

.contact-page .contact-form {
    height: 40%;
    width: 95%;
    position: absolute;
    bottom: 2%;
    font-family: 'ACaslonPro-Italic';
    font-weight: 400;
    font-size: 1.2em;
}

.contact-page .contact-form .caption {
    text-transform: lowercase;
 }

.contact-page .contact-form .captionlist {
    position: relative;
    width: 100%;
}

.contact-page .contact-form .caption-by-line {
    margin-bottom: 1%;    
    font-weight: 400;
}

.contact-page .contact-form .caption-by-line.last {
    position: relative;    
}

.contact-page .contact-form .caption-by-line .caption-title {
    float: left;
    clear: left;    
    width: 19%;
}

.contact-page .contact-form .caption-by-line .content {
    font-family: 'GothamBookRegular';
    /*font-weight: 400;*/
    width: 90%;
}

.contact-page .contact-form .caption-by-line .opening {
    font-weight: bold;
    font-family: 'GothamBookRegular';
    width: 79%;
    position: absolute;
    left: 19.5%;
}
.contact-page .contact-form .caption-by-line .opening .opening-day {
    float: left;
    clear:left;
    width: 16%;
}


/* Style for Blog */
.blog-page {
    -webkit-transform-style: flat;
    -webkit-transform: translate3d(0,0,0);
}

.blog-page .captionbackground {
    left: 20%;
    top: 5%;
    position: relative;
    width: 55%;
    height: inherit;    
}

.blog-post-page .captionbackground {
    left: 20%;
    padding-top: 0.75%;
    position: relative;
    width: 55%;
}

.blog-page .blog-semi-full {
    width: 88% !important;
    height: 76%;   
}

.blog-post-page .blog-post-full {
    width: 88% !important;   
    padding-right: 2%;
    margin-bottom: 50%;
}

.blog-page .captiontext, .blog-post-page .captiontext {
    font-family: 'ACaslonPro-Italic';  
    margin-bottom: 2%;
}

.blog-page .blogverticalline {
    border-right: 1px solid #F1F1F1;
    height: 70%;
    position: absolute;
    left: 99.35%;
    top: 1.5%;
}

.blog-page .blogtopbutton {
    position: absolute;
    float: right;
    top: -3%;
    left: 98%;
    width: 100%;
    display: block;
}

.blog-page .blogbottombutton {
    position: absolute;
    float: right;
    bottom: 24.7%;
    left: 98%;
    width: 100%;
    display: block;
}

.blogtopbutton a,
.blogbottombutton a {
    font-size: normal;
    font-family: serif;
}

.blog-post-page .blogtopbutton {
    position: fixed;
    top: 2%;
    left: 74%;
    width: 100%;
    display: block;
}

.blog-post-page .blogverticalline {
    border-right: 1px solid #F1F1F1;
    height: 70%;
    position: fixed;
    left: 74.5%;
    top: 7%;
}

.blog-post-page .blogbottombutton {
    position: fixed;
    float: right;
    bottom: 18%;
    left: 74%;
    width: 100%;
    height: 5%;
    display: block;
}

.blog-page .blogbottombutton a, .blog-post-page .blogtopbutton a, .blog-post-page .blogbottombutton a {
    text-decoration: none;
    color: #000000;
}

.blog-page .blog-item, .blog-post-page .blog-item {
    margin-bottom: 7%;
}
.blog-page .blog-item .blog-title, .blog-post-page .blog-item .blog-title {
    font-family: 'ACaslonPro-Italic';  
    float: left;
    position: relative;
    padding-top: 2px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 120%;
}

.blog-page .blog-date, .blog-post-page .blog-date {
    font-family: 'ACaslonPro-Italic';
    float: left;
    font-weight: 500;
    display: block;
    width: 100%;
    margin-bottom: 2%;
}

.blog-page .blog-content, .blog-post-page .blog-content {
    font-family: 'GothamLightRegular';
    margin-bottom: 30px;
    width: 100%;
    line-height: 120%;
    display: block;
}
.blog-page .blog-content span, .blog-post-page .blog-content span {
    font-family: 'ACaslonPro-Italic';
    font-weight: 600;
}

.blog-page .blog-content img, .blog-post-page .blog-content img {
    width: 48%;
    height: auto;
    padding-right: 0%;
    margin-right: 1%;
    float: left;
}

/* Dainwatya: 2013-03-28 Style for content */
.blog-page .blog-content p, .blog-post-page .blog-content p {
    line-height: 130%;
    padding-right: 2%;
}

.blog-page .blog-content b, .blog-page .blog-content i, .blog-post-page .blog-content b, .blog-post-page .blog-content i {
    font-family: 'ACaslonPro-Italic';
    font-weight: 600;
}

.page1 .page-error {
    background-color: #fff;
    border:#999 1px solid;
    background-color: #fff;
    padding: 1% 2%;
    margin: 3%;
    font-family: "Lucida Grande", Verdana, Sans-serif;
    font-size: 12px;
    color: #000;
    position: absolute;
    left: 15%;
    width: 50%;
}

.page1 .page-error h1 {
    font-weight: normal;
    color: #990000;
    margin: 0 0 4px 0;
}


/* Style for Brands page */
.pagebrands .brands {
    width: 100%;
    height: 100%;
    position: relative;
}

.pagebrands .brands img {
    width: auto;
    height: 85%;
    right: 11%;
    position: absolute;
    margin: 5% 0%;
}

/* Single page style */
.page-single {
    background-color: #fff;
}

.page-single .page-single-container {
    position: absolute;
    left: 24%;    
    width: 70%;
    height: 85%;
    top: 9%;
}

.ab-blinds .page-single .page-single-container {
    /*left: 23%;*/
}

.page-single .captiontext {
    font-family: 'ACaslonPro-Italic';
    width: 35%;
}

.page-single .captiontext2 {
    width: 35%;
    font-family: 'GothamLightRegular';
    padding: 3% 0%;
    line-height: 110%;
}

    .page-single .captiontext2 span {
        font-family: 'ACaslonPro-Italic';
        font-size: 1.3em;
    }

.page-single .captionimage {
    width: 60%;
}

    .page-single .captionimage img {
        width: 100%;
    }

    .page-single .imageframe {
        position: relative;
    }

    .page-single .imageframe .left {
        float: left;
        width: 65%;
    }

    .page-single .imageframe .right {
        float: right;
        width: 35%;
    }

    .page-single .imageframe .captionimage.last-vertical {
        display: inline-block;
        width: 48% !important;
        margin: 0% 0.5%;
    }

    .page-single .imageframe .captionimage.last-horizontal {
        width: 100%;
    } 

    .page-single .imageframe .captionimage.last-horizontal.first {
        margin-bottom: 1.75%;
    }

/* end of content */

/* default wrapper for all content */
.centerwrapper {
    margin-right: auto;
    margin-left: auto;
}

.tablewrapper {
    display: table;
    *position: relative;
}

.middlewrapper {
    display: table-cell;
    vertical-align: middle;
    *position: absolute;
    *top: 50%;
    *left: 50%;
}

.middlewrapper img {
    *position: relative;
    *top: -50%;
}

.fullheight {
    height: 100%;
}

.fullwidth {
    width: 100%;
}

.rightalign {
    text-align: right;
}

.centeralign {
    text-align: center;
}

.clear {
    clear: both;
}

.hr {
    width: 100%;
    border-top: 1px solid #DDD;
    padding-top: 20px;
    margin-top: 20px;
}

.leftcol {
    width: 49%;
    float: left;
}

.rightcol {
    width: 49%;
    float: right;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.top {
    top: 20px;
}

.bottom {
    bottom: 20px;
}

.left {
    left: 20px;
}

.right {
    right: 20px;
}

.uppercase {
    text-transform: uppercase;
}
/* end of wrapper */

/* another effect */
.boxshadow {
    -webkit-box-shadow: 0px 0px 10px 2px #666;
       -moz-box-shadow: 0px 0px 10px 2px #666;
            box-shadow: 0px 0px 10px 2px #666;
}

.boxshadow-bottom {
    -webkit-box-shadow: 0 8px 6px -4px #666;
       -moz-box-shadow: 0 8px 6px -4px #666;
            box-shadow: 0 8px 6px -4px #666;
}

.innershadow {
    -webkit-box-shadow: inset 0px 0px 6px black;
       -moz-box-shadow: inset 0px 0px 6px black;
            box-shadow: inset 0px 0px 6px black;
}

.removeshadow {
    -webkit-box-shadow: none;
        -moz-box-shadow: none;
            box-shadow: none;
}

.rotate180 {
    -webkit-transform:rotate(180deg);
       -moz-transform:rotate(180deg);
}

/* end of effect */

/* debug */
.debug1 {
    border: 1px solid #F00;
}

.debug2 {
    border: 1px solid #0f0;
}

.debugA {
    background: rgba(255,0,0,1);
}

.debugB {
    background: rgba(0,255,0,1);
}
/* end of debug */

/* msg info for ipad */
#msgLoverlay {
    width: 100%;
    height: 100%;
    background-color: #333;
    background-position: fixed;
    position: fixed;
    z-index: 666999;
    top: 0px;
    left: 0px;
}

#msgInfo {
    font-family: "FuturaLight";
    width: 100%;
    position: absolute;
    top: 40%;
    color: #FFF;
    text-align: center;
    font-size: 24px;
}

.menucontaineripad {
    position: fixed;
    z-index: 999999;
    bottom: 50px;
    left: 10px;
    display: none;
}


#loader-resize-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000000;
    opacity: 0.8;
    display: none;
    z-index: 9999;
}

#loader-resize-container .image-loader {
    width: 3em;
    height: 3em;
    top: 0; bottom: 0; left: 0; right: 0;
    margin: auto;
    position: absolute;
}
#loader-resize-container .image-loader img {
    width: 100%;
}

/* iPad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    #skeletonnavigation {
        width: 17%;
        /*position: relative;*/
    }

    .leftbutton-sub {
        left: 17%;
    }

    .menucontaineripad {
        display: block;
    }
}

/* Dainwatya: */
/* Special case if user have computer/laptop with 1024x768 screen resolution */
/* Screen width from 1000px - 1024px */
@media screen and (min-width: 1000px) and (max-width: 1024px){
    .pagebrands .brands img {
        height: 78%;
        right: 8%;
    }

    .page-single .page-single-container {
        top: 7%;
    }

    .page-single .captiontext2 {
        padding: 2% 0%;
    }

    .page-single .captionimage.vertical {
        width: 45% !important;
    }        
}

/*Dainwatya: Screen width from 1025px - 1260px */
@media screen and (min-width: 1025px) and (max-width: 1260px){
    .pagebrands .brands img {
        height: 78%;
        right: 8%;
    }

    .page8 .captionbackground {
        width: 40%;
    }

    .page8 .caption-by-line {
        font-size: 15.5px !important;
    }

    .page-single .page-single-container {
        top: 8%;
    }

    .page-single .captiontext2 {
        padding: 2% 0%;
    }

    .page-single .captionimage.vertical {
        width: 48% !important;
    }
}

/* Dainwatya: Screen width from 1261px - 1280px and screen height from 800px */
@media screen and (min-width: 1261px) and (max-width: 1280px) and (min-height: 800px){
    .page8 .captionbackground {
        top: 35%;
        height: 56%;
    }     

    .page8 .caption-by-line {
        font-size: 16px !important;
    }

    .pagebrands .brands img{
        height: 77%;
    }
}

/* Dainwatya: Screen width from 1261px - 1280px with maximum height 799px */
@media screen and (min-width: 1261px) and (max-width: 1349px) and (max-height: 799px){
    .page8 .captionbackground {
        top: 26%;
        height: 66%;
    }  

    .page8 .caption-by-line {
        font-size: 16px !important;
    }

    .page-single .captiontext2 {
        padding: 1% 0%;
    }

    .page-single .captionimage.vertical {
        width: 38% !important;
    }    
}

/* Dainwatya: Screen width from 1350px - 1366px and max height 767px */
@media screen and (min-width: 1350px) and (max-width: 1366px) and (max-height: 767px){
    .page8 .captionbackground { 
        top: 22%;
        height: 70%;        
    }   

    .page-single .page-single-container {
        top: 7%;
    } 

    .page-single .captiontext2 {
        padding: 0.75% 0%;
    }

    .page-single .captionimage.vertical {
        width: 37% !important;
    }

    .pagebrands .brands img{
        height: 85%;
        right: 12%;
    }    
}

/* Dainwatya: Screen width from 1367px - 1440px */
@media screen and (min-width: 1367px) and (max-width: 1440px){
    .page-single .page-single-container {
        top: 7%;
    }    

    .page-single .captiontext2 {
        padding: 2% 0%;
    }

    .page-single .captionimage.vertical {
        width: 40% !important;
    }
}

/* Dainwatya: Screen width from 1441px - 1589px */
@media screen and (min-width: 1441px) and (max-width: 1589px){
    .pagebrands .brands img {
        height: 78%;
        right: 8%;
    } 

    .page-single .page-single-container {
        top: 7%;
    }    

    .page-single .captiontext2 {
        padding: 2% 0%;
    }

    .page-single .captionimage.vertical {
        width: 40% !important;
    }   
}

/* Dainwatya: Screen width from 1580px - 1600px and max-height 820px */
@media screen and (min-width: 1580px) and (max-width: 1600px) and (max-height: 820px){
    .pagebrands .brands img{
        margin: 3% 0%;
        height: 85%;
        right: 11%;        
    }

    .page8 .captionbackground {
        top: 26%;
        height: 66%;
    }

    .page-single .captionimage.vertical {
        width: 35% !important;
    }           
}

/* Dainwatya: Screen width from 1590px - 1669px and height from 980px - 990px */
@media screen and (min-width: 1590px) and (max-width: 1669px) and (min-height: 980px) and (max-height: 990px){
    .pagebrands .brands img{
        height: 78%;
        right: 8%;
    }   
}

/* Dainwatya: Screen width from 1590px - 1669px and height from 991px - 1199px */
@media screen and (min-width: 1590px) and (max-width: 1669px) and (min-height: 991px) and (max-height: 1199px){
    .pagebrands .brands img {
        height: 76%;
        right: 6%;
    }

    .page-single .captionimage.vertical {
        width: 48% !important;
    }
} 


/* Dainwatya: Screen width from 1670px - 1899px and height from 830px - 930px */
@media screen and (min-width: 1670px) and (max-width: 1899px) and (min-height: 830px) and (max-height: 960px){
    .page-single .page-single-container {
        top: 8%;
    }    

    .page-single .captiontext2 {
        padding: 2% 0%;
    }

    .page-single .captionimage.vertical {
        width: 40% !important;
    }    

    .pagebrands .brands img{
        height: 84%;
        right: 8%;
        margin: 4% 0%;
    }
}

/* Dainwatya: Screen width from 1900px - 2500px with maximum height 960px */
@media screen and (min-width: 1900px) and (max-width: 2500px) and (max-height: 960px){
    .page8 .captionbackground {
        top: 26%;
        height: 66%;
    } 

    .page-single .page-single-container {
        top: 7%;
    }    

    .page-single .captiontext2 {
        padding: 2% 0%;
    }

    .page-single .captionimage.vertical {
        width: 37% !important;
    }
}

/* Dainwatya: Screen width from 1900px - 2500px with minimum height 961px */
@media screen and (min-width: 1900px) and (max-width: 2500px) and (min-height: 961px){
    .page-single .page-single-container {
        top: 8%;
    }    

    .page-single .captiontext2 {
        padding: 2% 0%;
    }

    .page-single .captionimage.vertical {
        width: 41% !important;
    }
}

/* Dainwatya: Screen width more than 2500px */
@media screen and (min-width: 2500px){
    .page-single .page-single-container {
        top: 8%;
    }    

    .page-single .captiontext2 {
        padding: 1% 0%;
    }

    .page-single .captionimage.vertical {
        width: 37% !important;
    }
}

/* Dainwatya: Style for fullscreen */
/*-----------------------------------------------------------------------*/
/* Dainwatya: Screen width 1280px and height 768px */
@media screen and (width: 1280px) and (height: 768px){
    .page-single .captiontext2 {
        padding: 2% 0%;
    }    
    
    .page-single .captionimage.vertical {
        width: 42% !important;
    }
}

/* Dainwatya: Screen width 1280px and height 800px */
@media screen and (width: 1280px) and (height: 800px){
    .page-single .captionimage.vertical {
        width: 45% !important;
    }
}

/* Dainwatya: Screen width 1280px and height 1024px */
@media screen and (width: 1280px) and (height: 1024px){
    .pagebrands .brands img{
        height: 68%;
        right: 3%;
    }
}

/* Dainwatya: Screen width 1366px and height 768px */
@media screen and (width: 1366px) and (height: 768px){
    .page-single .captiontext2 {
        padding: 2% 0%;
    }

    .page-single .captionimage.vertical {
        width: 40% !important;
    }    

    .pagebrands .brands img{
        margin: 4% 0%;
    }
}

/* Dainwatya: Screen width 1440px and height 900px */
@media screen and (width: 1440px) and (height: 900px){
    .pagebrands .brands img{
        height: 80%;
        right: 7%;
    }    

    .page-single .page-single-container {
        top: 9%;
    }    
    
    .page-single .captiontext2 {
        padding: 3% 0%;
    }

    .page-single .captionimage.vertical {
        width: 45% !important;
    }
}

/* Dainwatya: Screen width 1600px and height 900px */
@media screen and (width: 1600px) and (height: 900px){
    .pagebrands .brands img {
        right: 8%;
        margin: 4% 0%;
    }

    .page-single .captionimage.vertical {
        width: 40% !important;
    }       
}

/* Dainwatya: Screen width 1600px and height 1200px */
@media screen and (width: 1600px) and (height: 1200px){
    .pagebrands .brands img{
        height: 68%;
        right: 6%;
    }
}

/* Dainwatya: Screen width 1680px and height 1050px */
@media screen and (width: 1680px) and (height: 1050px){
    .pagebrands .brands img{
        height: 83%;
        right: 5%;
        margin: 4% 0%;
    }

    .page-single .captionimage.vertical {
        width: 45% !important;
    }
}

/* Dainwatya: Screen width 1920px and 1080px */
@media screen and (width: 1920px) and (height: 1080px){
    .pagebrands .brands img {
        height: 83%;
        right: 8%;
        margin: 4% 0%;
    }

    .page-single .captionimage.vertical {
        width: 41.5% !important;
    }
}

/* Dainwatya: Screen width 1920px and height 1200px */
@media screen and (width: 1920px) and (height: 1200px){
    .pagebrands .brands img{
        height: 78%;
        right: 8%;
        margin: 4% 0%;
    }
    
    .page-single .captionimage.vertical {
        width: 45% !important;
    }
}

/* Screen width 2500px and height 1440px */
@media screen and (width: 2560px) and (height: 1440px){  
    .page-single .captiontext2 {
        padding: 2% 0%;
    }

    .page-single .captionimage.vertical {
        width: 40% !important;
    }
}