@charset "UTF-8";
/* CSS Document */


/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */



/* GENERAL */
/* ----------------------------------------- */

html, body {
height: 100%;

}

#main{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4.6em;
}



/* HEADER */
/* ----------------------------------------- */


#header{
background-color: #020202;
color: #fdfcfc;
}

#top-nav{
text-align: right;
padding-bottom: .2em;
}

      #top-nav ul{
      list-style-type: none;
      margin: 0px;
      padding: 0px;
      }

      #top-nav li{
      list-style-type: none;
      margin: 0px;
      padding: 0px;
      display: inline;
      border-right: 1px solid #818181;
      padding-right: .5em;
      padding-left: .3em;
      }
      #top-nav li a{
      color: #b2b2b2;
      text-decoration: none;
      font-size: .8em;
      }
      .menu-item-10{
      border-right: none !important;
      }

#logo a{
color: #fdfcfc;
text-decoration: none;
}
      #logo h1{
      line-height: .9em;
      color: #fdfcfc;
      font-family: 'warnock_probold';
      }
      #logo h2{
      font-size: 1.14em;
      letter-spacing: .2em;
      color: #fdfcfc;
      font-family: 'warnock_probold';
      padding-left: .4em;
      line-height: 1em;
      padding-top:.3em;
      }



#navigation{
padding-top: 2.4em;
padding-bottom: 1em;
}

      #navigation ul{
      list-style-type: none;
      margin: 0px;
      padding: 0px;
      float: right;
      }

      #navigation li{
      font-family:"Times New Roman", Times, serif;
      list-style-type: none;
      margin: 0px;
      padding: 0px;
      display: inline;
      padding-left: 1em;
      }
      #navigation li a{
      color: #fdfcfc;
      text-decoration: none;
      font-size: 1.1em;
      }
      #navigation li a:hover{
      padding-bottom: .1em;
      border-bottom: 2px solid #e8c838;
      }
      #navigation .current-menu-item a{
      padding-bottom: .1em;
      border-bottom: 2px solid #e8c838;
      }

      #navigation li:first-child{
      padding-left: 0em;
      }



/* BANNER */
/* ----------------------------------------- */


#banner-container{
background-image:url(../images/pattern-bg.png);
background-repeat:repeat-x;
background-color: #181818;

}



#banner{
background-image:url(../images/banner.png);
background-repeat:no-repeat;
background-position: top right;
position: relative;

}

      

#intro{
padding-top: 12em;
padding-bottom: 5.5em;
overflow:hidden;
}

      #intro h1{
      color: #fdfcfc;
      font-size: 5.8em;
      font-weight: bold;
      line-height: 1.2em;
      filter: dropshadow(color=#000000, offx=1, offy=1);
      filter: shadow(color=#000000,direction=135,strength=5);
      -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=5)";
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
      text-shadow: 1px 1px 1px #000000;
      filter: dropshadow(color=#000000, offx=1, offy=1);
      font-family: 'warnock_probold';
      }
      #intro h2{
      color: #fdfcfc;
      text-transform: uppercase;
      font-size: 2.6em;
      font-style:italic;
      line-height: 1.4em;
      filter: dropshadow(color=#000000, offx=1, offy=1);
      filter: shadow(color=#000000,direction=135,strength=5);
      -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=5)";
      text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
      text-shadow: 1px 1px 1px #000000;
      filter: dropshadow(color=#000000, offx=1, offy=1);
      }


#image{
}


#new{
position: absolute;
right: 1em;
background-image:url(../images/circle.png);
background-repeat:no-repeat;
background-position: left top;
width: 86px;
height: 63px;
padding-top: 16px;
padding-bottom: 6px;
float: right;
text-align: center;
margin-top: 1em;
}

      #new a{
      text-decoration: none;
      }


      #new:hover{
      cursor: pointer;
background-position: left -85px;
}



      #new h4{
      color: #000;
      font-size: 1.2em;
      line-height: 1.1em;
      -webkit-transform: rotate(340deg);
      -moz-transform: rotate(340deg);
      -o-transform: rotate(340deg);
      writing-mode: lr-tb;
      transform:rotate(340deg);
      -ms-transform:rotate(340deg); /* IE 9 */
      -moz-transform:rotate(340deg); /* Firefox */
      -webkit-transform:rotate(340deg); /* Safari and Chrome */
      -o-transform:rotate(340deg); /* Opera */
}



/* HOME CONTENT */
/* ----------------------------------------- */


#home-buttons{
background-image:url(../images/home-bg.png);
background-repeat:repeat-x;
background-position: top left;
border-top: 3px solid #000;
}

#home-buttons .fourcol{
margin-top: 3em;
border-bottom: 4px solid #000;
margin-bottom: 3em;
padding-bottom: 1em;
}

.home-link{
min-height: 10.5em;
}


     #home-buttons .fourcol .home-title{
     text-transform: uppercase;
     font-style:italic;
     line-height: 1.8em;
     font-size: 1.7em;
     font-family:"Times New Roman", Times, serif;
     }


     #home-buttons .fourcol a{
     color: #111111;
     font-style:italic;
     text-decoration:none;
     margin-top:.4em;
     display:block;
     }
     #home-buttons .fourcol a:hover{
     text-decoration: underline;
     }

     #home-buttons .fourcol a .yellow{
     color: #feba01;
     }

     #home-buttons .fourcol .home-link{
     display: block;
     overflow: hidden;
     padding: 6px;

     }
     #home-buttons .fourcol ul{
     padding-bottom: .4em;
     }
     .fourcol li a{
     font-style:normal !important;
     }

/* PAGE CONTENT */
/* ----------------------------------------- */
#content{
background-image:url(../images/content-bg.jpg);
background-repeat:repeat-x;
min-height: 400px;
padding-top: 2em;
padding-bottom: 1em;
}


#content a:hover{
text-decoration: underline;

}

h1.collection{
border-bottom: 3px solid #000;
margin-bottom:1em;
text-transform: uppercase;
font-size: 2em;
padding-bottom: .5em;
}

h1.collection.collection--has-description {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: .1em;
}

.collection__description {
  padding-bottom: 1em;
  border-bottom: 3px solid #000;
  margin-bottom:1em;
}

.collection__description p {
  line-height: 1.6em;
}

#right{
margin-top: 4em;

}

#full h2{
text-transform: uppercase;
font-style: italic;
}

#full a:hover h2{
text-decoration: underline;
}


#full img{
border: 4px solid #d2d1d1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#full img:hover{
border: 4px solid #5a5a5a;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


.img-right{
border: 4px solid #d2d1d1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.hover-large img + img{
display: none;
}

.swatches{
margin-left: -.7%;
}
       .swatches li{
       list-style-type: none;
       margin: 0px;
       padding: 0px;
       float: left;
       margin: 0 .6% 4% .7%;
       width: 140px;
       }

       .swatches.no-titles li {
        margin-bottom: 0.6%;
       }

       .swatches li.first {
        clear: left;
       }

       .swatch-large img{
       border: 4px solid #d2d1d1;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
       }

       .swatches img{
       border: 4px solid #d2d1d1;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
       }


              .swatches img:hover{
              border: 4px solid #5a5a5a;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
              }

              .swatches a:hover h3{
                     color: #000;
              }

      .swatches h3{
      text-transform: uppercase;
      font-style:italic;
      font-size: .9em;
      font-family:"Times New Roman", Times, serif;
      font-weight: bold;
      }

#pagination{
clear: both;
padding-bottom: 1em;
padding-top: 1em;


}
      #pagination a{
      font-size: 1.2em;
      padding: 5px;
      text-decoration: none;
      }
      #pagination .current{
      text-decoration: underline;
      font-size: 1.2em;
      padding: 5px;
      }


/* FOOTER*/
/* ----------------------------------------- */

#footer{
background-color: #000;
background-image:url(../images/footer-pattern.png);
background-repeat:repeat-x;
background-position: top left;
padding-top: 2.6em;
padding-bottom: .5em;
color: #fdfcfc;
}

#copyright{
font-size: .9em;
color: #aaaaaa;
background-color: #000;
}

#copyright a{
color: #aaaaaa;
text-decoration: none;
}
#copyright a:hover{
text-decoration: underline;
}



#footer .fourcol{
background-color: #000;
}

.push {
min-height: 4em;
}

/* FORMS*/
/* ----------------------------------------- */

.gform_wrapper .left_label .gfield_label{
font-weight: normal !important;
}

.gform_button{
background-color: #000;
border: none;
color: #fff;
text-transform: uppercase;
padding: .5em 1em;
font-family:"Times New Roman", Times, serif;
font-size: 1.4em !important;
cursor: pointer;
}


/* ============================= */
/* ! Layouts for smaller screens   */
/* ============================= */

@media handheld, only screen and (max-width: 1160px) {

   #intro{
padding-top: 8em;
padding-bottom: 6em;
}

  #home-buttons .threecol h2{
     font-size: 1.4em;
     font-weight: bold;
     line-height: 1.9em;
}

#home-buttons .threecol p{
font-size: 1.1em;
}

#home-buttons .threecol{
min-height: 10em;
}


}



@media handheld, only screen and (max-width: 1050px) {
#intro{
padding-top: 7em;
padding-bottom: 4em;
}

     #home-buttons .threecol .home-title{
     font-size: 1.2em;
     font-weight: bold;
     line-height: 1.3em;
}

#home-buttons .threecol p{
font-size: .95em;
}

#home-buttons .threecol li{
font-size: .8em;
line-height: 1.8em;}

#home-buttons .threecol ul{
padding-bottom: 2em;}



#home-buttons .threecol{
min-height: 10em;
}

      #navigation li{
      padding-left: .5em;
      }

}


/* ============================= */
/* ! Layout for ipad   */
/* ============================= */

/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

    #intro h1{
      font-family:"Times New Roman", Times, serif;
      line-height:.9em;
     padding-bottom: .4em;
     
}
}


@media handheld, only screen and (max-width: 767px) {


#logo{
padding-top: 1em;
}


     #navigation ul{
      float: left;
      padding-bottom: 1em;
      }



      #intro h2{
      color: #fdfcfc;
      font-size: 1.6em;
      }
#new h4{
font-size: 1.1em;
}

      #top-nav li a{
      font-size: .6em;
      }


       .swatches li{
       list-style-type: none;
       margin: 0px;
       padding: 0px;
       float: left;
       margin: 0 5% 2% 5%;
       width: 125px;

       }

}


/* ============================= */
/* ! Layout for mobile  */
/* ============================= */


@media handheld, only screen and (max-width: 480px) {


#logo h1{
font-size: 2.3em;

}
#logo h2{
font-size: .89em;
}

#intro{
padding-top:3.8em;
padding-bottom: 2em;
}

      #intro h1{
       font-size: 5.4em;
      font-family:"Times New Roman", Times, serif;
      line-height:.9em;
padding-bottom: .4em;}


      #navigation li a{
background-color: #282828;
float: left;
clear: both;
padding: 10px 0px 10px 10px;
width: 460px;
margin-bottom: 2px;
cursor: pointer;
display:block;
      }
      #navigation li a:hover{
background-color: #3b3b3b;
      }

     #navigation li a:hover{
border: none;
float: left;
clear: both;
padding: 10px 0px 10px 10px;
width: 460px;
margin-bottom: 2px;
cursor: pointer;
display:block;
      }

 #navigation li a:first-child{
      padding-left: 10px;
      }
      #navigation .current-menu-item a{
      background-color: #3b3b3b;
      border-bottom: none;
float: left;
clear: both;
padding: 10px 0px 10px 10px;
width: 460px;
margin-bottom: 2px;
cursor: pointer;
display:block;
      }

#new{
margin-top: 0em;
}


       .swatches li{
       margin: 0% 3% 4% 3%;
       width: 120px;
       }

}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}