/* General Demo Style */
@font-face {
    font-family: 'TexGyrAdv_reg';
    src: url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-regular-webfont.eot');
    src: url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-regular-webfont.woff') format('woff'),
         url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-regular-webfont.ttf') format('truetype'),
         url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-regular-webfont.svg#texgyreadventorregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'TexGyrAdv_ital';
    src: url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-italic-webfont.eot');
    src: url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-italic-webfont.woff') format('woff'),
         url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-italic-webfont.ttf') format('truetype'),
         url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-italic-webfont.svg#texgyreadventoritalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TexGyrAdv_bold_ital';
    src: url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-bolditalic-webfont.eot');
    src: url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-bolditalic-webfont.woff') format('woff'),
         url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-bolditalic-webfont.ttf') format('truetype'),
         url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-bolditalic-webfont.svg#texgyreadventorbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'TexGyrAdv_bold';
    src: url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-bold-webfont.eot');
    src: url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-bold-webfont.woff') format('woff'),
         url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-bold-webfont.ttf') format('truetype'),
         url('/wcsstore/images/GarnetHill/_media/_assets/fonts/texgyreadventor-bold-webfont.svg#texgyreadventorbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Style Common*/

.view {
   width: 330px;
   height: 337px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   cursor: default;
}
.view .mask, .view .content {
    bottom: 4px;
    height: 331px;
    left: 3px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 312px;
}
.view .mask2  {
    height: 328px;
    left: 3px;
    overflow: hidden;
    position: absolute;
    top: 5px;
    width: 312px;
}

.view img {
   display: block;
   position: relative;
}

.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 12px;
   padding: 5px;
   background: rgba(0, 0, 0, 0.4);
   margin: 10px 0 0 0;
   }
.view .mask2 h2 {
   font-family: 'TexGyrAdv_reg';
   color:#000;
   font-weight:normal;
   text-align: center;
   position: relative;
   font-size: 50px;
   line-height:1.1em;
   padding: 5px;
   background: none;
}

.mask2 { 
	width: 322px;
	background: rgba(255, 255, 255,.8);
	color:rgba(0, 0, 0, 1);
	padding-top: 20px;
	}
	
.mask2:hover {
	background: rgba(255, 255, 255,1);
	color:rgba(0, 0, 0,1);
	}

.view p {
   font-family:Arial, sans-serif;
   font-size: 12px;
   position: relative;
   color: #fff;
   text-align: center;
}
.view a.info {
   display: inline-block;
   font-family: 'TexGyrAdv_ital';
   text-decoration:none;
   letter-spacing: -.05em;
   font-size:24px;
   background: none;
   color: #000;
   text-transform: uppercase;
   z-index:200;
}
.view a.info:hover {
   xbackground:#cfcfcf;
}

/* Style specific */

.view-fifth img {
   -webkit-transition: all .6s ease-out;
   -moz-transition: all .6s ease-out;
   -o-transition: all .6s ease-out;
   -ms-transition: all .6s ease-out;
   transition: all .6s ease-out;

}
.view-fifth .mask2 {
   -webkit-transform: translateZ(0) translatey(350px);
   -moz-transform: translateZ(0) translatey(350px);
   -o-transform: translateZ(0) translatey(350px);
   -ms-transform: translateZ(0) translatey(350px);
   transform: translateZ(0) translatey(350px);
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0.0;
   -webkit-transition: all .375s ease-out;
   -moz-transition: all .375s ease-out;
   -o-transition: all .375s ease-out;
   -ms-transition: all .375s ease-out;
   transition: all .375s ease-out;
}
.view-fifth h2 {
   background: rgba(255, 255, 255, 0.8);
   color: #000;
 }
.view-fifth p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   /*opacity: 0.0;*/
   color: #333;
   -webkit-transition: all 1.0s linear;
   -moz-transition: all 1.0s linear;
   -o-transition: all 1.0s linear;
   -ms-transition: all 1.0s linear;
   transition: all 1.0s linear;
}

.view-fifth:hover .mask2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=95)";
   filter: alpha(opacity=95);
   opacity: .95;
   -webkit-transform: translateZ(0) translatey(270px);
   -moz-transform: translateZ(0) translatey(270px);
   -o-transform:translateZ(0)  translatey(270px);
   -ms-transform: translateZ(0) translatey(270px);
   transform: translateZ(0) translatey(270px);
}
.view-fifth:hover img {
   /* For hover effect between two different images on a slide,
   * Reactivate this section, and add:
   * style="background:url('images/xxx-1.jpg') no-repeat no-repeat; height:375px;"
   * to the top most div with the class="ca-item view view-fifth"
   * 
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   */
   -webkit-transform: translateZ(0) translateX(-282px) translateY(-50) scale(0.77, 0.77);
   -moz-transform: translateZ(0) translateX(-282px) translateY(-50) scale(0.77, 0.77);
   -o-transform: translateZ(0) translateX(-282px) translateY(-50) scale(0.77, 0.77);
   -ms-transform: translateZ(0) translateX(-282px) translateY(-50) scale(0.77, 0.77);
   transform: translateZ(0) translateX(-282px) translateY(-50) scale(0.77, 0.77);
}
.view-fifth:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}

.hp-rollover-copy {
	font-family: "Avenir LT Std","Avenir",Arial,Helvetica,sans-serif!important;
   	font-size: 20px!important;
	padding: 0!important;
}

.hp-cta-copy {
	width: 320px!important;
	height: 40px!important;
	background: #ffffff!important;
	font-size: 18px!important;
	opacity: 1!important;
}

.main-img {position:relative;left:-4px;}