@charset 'UTF-8';

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

html {
    font-size: 0.813em; /* 13px */
    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
    font-weight: 400;
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
    color: #333;
    line-height: 1.4em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: scroll;
}

body, h1, h2 {
    margin: 0;
}

a {
    color: #C3C3C3;
    text-decoration: none;
}

a:focus {
    outline: thin dotted;
}

a:active,
a:hover,
.ui-tabs-active a,
li.current a, 
.contact footer a,
.toplink {
    outline: 0;
    color: #333;
}

img, object, embed {
    max-width: 100%;
}

img {
    height: auto;
    border: 0;
}

/* typo */

h1, h2, h3, h4, h5, h6 {
    line-height: 1.6em;
}

h1 {
    font-size: 2em;

}

b,
strong {
    font-weight: bold;
}

small {
    font-size: 80%;
}

#sidebar a, #tabs ul li a {
    letter-spacing: 0.2em;
}

/* logo */

.logo, .start p {
    position: relative;
    text-align: center;
}

.logo img {
    padding-top: 60px;
    z-index: 9999;
    position: relative;
    background: #FFF;
}

.logoAlt {
    z-index: 1;
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    color: #FFF;
    text-transform: uppercase;
}

/* main */

#wrapper {
    position: relative;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}

.lt-ie9 #wrapper {width: 1024px;}

.home #main img {
    overflow: hidden;
    width: 90%;
}

#sidebar {
    float: left;
    width: 16%;
    margin: 180px 0 16px;
}

#sidebar ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}
#sidebar li {
    margin: 0 0 15px;
    padding: 0 0 0 20px;
}

#sidebar ul li a, #tabs ul li a {
    font-size: 1.4em;
}

/* main */

#main {
    padding: 40px 0 20px;
    float: left;
    width: 73%;
}

#main p, #main h2, #main h3 {
    font-size: 1.2em;
    max-width: 920px;
    line-height: 1.5em;
}

#main h2, #main h3 {
    font-weight: 700; 
    padding: 15px 0 0 0;
}

/* div */
.about #main p {
    text-align: justify;
}

.info #main img {
    padding: 2%;  
}
.info #main{
    margin: 120px 0 0 0; 
    position: relative; 
    min-height: 300px;
}

.info #main p, .info #main h2{
    text-align: center;
}

.info #main h2{
   font-size: 2em; 
   font-weight:400; 
   line-height: 0.8em;
}

.info #main p.credits {
    font-size: 90%;
    text-align: left;
    margin-left: 60%
}

/* category */
.category #main ul { padding:40px 0 0 0; }
.category #main ul li{
    width: 29%;
    list-style: none;
    float: left;
    position: relative;
    z-index: 0;
    margin: 0 2% 20px 0;
}

.category #main.twoCol ul li { margin: 0 4%; max-width: 307px; width: 42%; }
.category #main.twoCol ul li span, .category #main.twoCol ul li {max-width: 307px;}
.category #main.twoCol { margin: 0 0 0 4%; }
.category #main ul li span {
  text-align: center;
  margin: 40% 0 0 0;
  width: 100%;
  position: absolute;
  z-index: -1;
  line-height: 2em; 
  letter-spacing: 3px;
  font-size: 16px;
}

.category #main ul li{ min-height:300px; }

.category #main ul li img, .category #main ul li.plant img:hover, .category #main ul li.plant { 
    opacity: 1;
    transition: visibility 0s 0.2s, opacity 0.2s linear;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

.pieces #main ul > li:last-child, .category #main ul li.lChild {
margin-left: 31%;
} 

.category #main ul li img:hover{
    opacity: 0;
    transition: visibility 0s 0.2s, opacity 0.2s linear;
    filter: alpha(opacity=0); /* For IE8 and earlier */
}

/* tabs */

#tabs {
    float: left;
    width: 32%;
    margin: 120px 2% 20px;
}

#tabs h2 {
    font-size: 16px;
}

#tabs ul {
    width: 100%;
    padding: 0;
}

#tabs ul li {
    display: inline;
    list-style: none;
    padding: 0 10% 0 0;
}

#tabs .ui-widget-content {
    padding-top: 40px;
}

#tabs .ui-widget-content p {
    text-align: left;
}

#tabs dl {
    padding-right: 10%;
    font-size: 1.16em;
}

#tabs dl dt {
    min-width: 80%;
    line-height: 2em;
    float: left;
    text-align: left;
}

#tabs dl dd {
    line-height: 2em;
    text-align: right;
    
}

#tabs dl.total {
    font-weight: 700;
}

.videoContainer, .videoYoutube {
    width: 100%;
    height: 250px;
    max-height: 250px;
}

iframe {border: 0;}

/* footer */

footer {
    clear: both;
    margin: 10px 20px 20px;
    padding: 1em 0;
    color: #B5BCB4;
    text-align: right;
}

footer a {
    color: #B5BCB4;
}

footer a:hover {
    color: #333;
}

/* 360 slider */

.slider, .productContainer {
    overflow: auto;
    float: left;
    width: 45%;
    padding: 120px 0 20px;
}

.slider .threesixty {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

.slider .threesixty .spinner {
    top:30%;
    position: absolute;
    width: 90%;
    max-width: 580px;
    height: 30px;
    border: 1px solid #999;
    border-width: 0 1px;
    margin: 0 5%;
}

.slider .threesixty .spinner span {
    display: block;
    position: relative;
    font-family: Arial, "MS Trebuchet", sans-serif;
    font-size: 12px;
    color: #666;
    text-align: center;
}

.slider .threesixty .threesixty_images {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

.slider .threesixty .threesixty_images img {
    overflow: auto;
    position: absolute;
    top: 0;
    max-width: 70%;
    margin:0 15%;
}

.productImg, .product360Fallback{ 
    max-width: 70%;
    margin:0 15%;
}

.slider .threesixty .threesixty_images img.current-image {
    visibility: visible;
    width: 100%;
}

.slider .threesixty .threesixty_images img.previous-image {
    visibility: hidden;
    width: 0;
}

.product360Fallback {
    visibility: hidden;
}

.no-js .product360Fallback {
    visibility: visible;
}

.no-js .slider .threesixty .spinner,
.no-js .slider .threesixty .threesixty_images {
    display: none;
}
.contact p {padding-top: 20px;}
.contact span {
    font-size: 1.2em;
    letter-spacing: 1px;
}

.contact span em {
 padding: 0 2%;
}

.contact img{
  margin: 0 28%;
  text-align: center;
}

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

    .slider, .productContainer {
        float: left;
    }

    #tabs ul li {
        padding: 0 7% 0 0;
    }

    #tabs {
        width: 30%;
    }

    .slider .threesixty .spinner {
        width: 90%;
        margin:0 5%;
    }

    .videoYoutube {
        height: 200px;
        max-height: 360px;
    }

}

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

    .logo {
        margin: 0 auto 25px;
        padding: 0 2%; 
    }
    .slider,.productContainer {
        width: 75%;
    }
    .slider .threesixty, .slider, .productContainer {
        float: none;
        clear: both;
        margin: 0 auto;
        padding: 30px 0 35px;
    }

    #tabs .ui-widget-content p, #tabs dl, #tabs table {
        padding: 10px 5%;
    }

    .slider .threesixty .spinner {
        width: 90%;
        margin: 0 5%;
        padding: 0;
    }
    .category #main,.category #main.twoCol {
        width: 70%;
        margin: 0 15%;
    }

    .category #main ul li, .category #main.twoCol ul li{
        width: 49%;
        max-width: 49%;
        margin: 0 0.5%;
    }
    
    .productImg,.product360Fallback{ 
        max-width: 60%;
        margin:0 20%;
    }
    
    .slider .threesixty .threesixty_images img {
    position: absolute;
    top: 0;
    height: auto;
    max-width: 60%;
    margin:0 20%;
    }

    #sidebar, #tabs, #tabs ul li, #tabs h2, #main, #sidebar li,
    #main ul, #sidebar ul li a, #tabs ul, .category #main ul, .info #main p.credits, .info #main {
        position: relative;
        clear: both;
        width: 100%;
        text-align: center;
        padding: 0;
        margin: 0 0 20px 0;
    }

    #main p, #main h2{
        width: 90%;
        padding: 0 5%;
    }
    
       .videoYoutube {
        height: 320px;
    }
    
    .contact footer, .about footer, .collection footer {
        position: relative;
        bottom: 0; 
        right: 0;
    }
    
    footer, #main h2, .contact footer {
        text-align: center;
        padding-top: 20px;
    }
    
    #tabs ul li { 
        display:block; 
    }
    
    .pieces #main ul > li:last-child, .category #main ul li.lChild {
        margin-left: 0;
    }
    #tabs .ui-widget-content p.cText { text-align: center; }
    #tabs .ui-widget-content p {
    width: 80%;
    padding: 0 10%;
    }
    #tabs .ui-widget-content img{
    text-align: center;
    width: 46%;
    padding:0 27%;
    max-width: 260px;
    }
    .contact img{
    margin: 0 30px; 
    width: 60%;
    }
}

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

    .category #main ul li, .category #main ul li a span, .category #main.twoCol ul li, 
    .category #main.twoCol ul li a span, .category #main.twoCol ul li img, 
    .info #main p.credits, .info #main {
        clear: both;
        position: relative;
        width: 100%;
        max-width: 100%;
        letter-spacing: 0;
        padding: 15px 0 0 0;
    }

    .category #main ul li img, .category #main ul li img:hover {
        opacity: 1;
        transition: visibility 0s 0.2s, opacity 0.2s linear;
        filter: alpha(opacity=100); /* For IE8 and earlier */
    }
 
    .productImg, .product360Fallback{ 
    max-width: 90%;
    margin:0 5%;
    }

    .slider .threesixty .threesixty_images img {
    position: absolute;
    top: 0;
    height: auto;
    max-width: 100%;
    margin:0;
    }

    .videoYoutube{
        min-height: 400px;
        height: 400px;
    }

    a:active,
    a:hover,
    .ui-tabs-active a {
        color: #CCC;
    }
    
    li.current a{
        color: #666;
    }
    
    #tabs .ui-widget-content p {
    text-align: left;
    width: 90%;
    padding: 0 5%;
    }

    #tabs .ui-widget-content img{
    width: 80%;
    padding: 0 10%;
    }

}