/* Fonts */

@font-face {
  font-family: 'LibreBaskerville';
  src: url(/repo/VLD/desktop/common/05-fonts/BaskervilleBTW01-Roman.eot);
  src: url(/repo/VLD/desktop/common/05-fonts/BaskervilleBTW01-Roman.eot?#iefix) format('embedded-opentype'), url(/repo/VLD/desktop/common/05-fonts/BaskervilleBTW01-Roman.woff) format('woff'), url(/repo/VLD/desktop/common/05-fonts/BaskervilleBTW01-Roman.ttf) format('truetype'), url(/repo/VLD/desktop/common/05-fonts/BaskervilleBTW01-Roman.svg#) format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Container */

#hpContainer {
	border: none;
	margin: 0 auto;
	padding: 0;
	width: 1000px;
	font-family: 'open_sansregular';
}

/* Intro */

#hpIntro {
	clear: both;
	padding: 30px 0 30px;
	text-align: center;
	width: 100%;
}

#hpIntro h1,
#hpIntro p {
	color: #999;
	font-size: 11px;
	line-height: 14px;
	margin: 0 0 5px;
	padding: 0;
}

#hpIntro h1 {
	padding-bottom: 5px;
	font-weight: normal;
}

#hpIntro strong {
	font-weight: normal;
}

/* Slides */

#hpSlides {
	height: 490px;
	margin: 30px 0 5px;
	position: relative;
	width: 100%;
}

.hpPager {
	left: 5px;
	position: absolute;
	top: 8px;
	z-index: 5;
}

.hpPager a {
	background: url(/repo/VLD/desktop/common/cycle/02-images/Pager.png) no-repeat;
	display: block;
	float: left;
	font-size: 0;
	height: 16px;
	margin-left: 5px;
	width: 16px;
}

.hpPager .activeSlide {
	background-image: url(/repo/VLD/desktop/common/cycle/02-images/PagerActive.png);
}

.hpControl {
	cursor: pointer;
	height: 100%;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 32px;
	z-index: 5;
}

.hpPrev {
	background: url(/repo/VLD/desktop/common/cycle/02-images/Prev.png) center center no-repeat;
	left: 10px;
}

.hpNext {
	background: url(/repo/VLD/desktop/common/cycle/02-images/Next.png) center center no-repeat;
	right: 10px;
}

.hpSlide {
	height: 100%;
	width: 100%;
}

.hpSlide a {
	cursor: pointer;
	display: block;
	height: 100%;
	text-decoration: none;
}

.hpSlide a:hover h3, a.cta2:hover {
	text-decoration: underline;
}

.hpSlide .hpContent {
	position: absolute;
}		
.hpSlide h1,
.hpSlide h2,
.hpSlide h3{
	color: #000 !important;
}
.hpSlide h1{ 
	margin: 0px 0px 2rem;

}
.hpSlide h1 span{
	color: #000;
}
.hpSlide h1 .hpStyle1 {
	font: 72px/72px 'open_sanslight';
	text-transform: uppercase;
	color: #000;
	text-indent: -9999px;
	background: url("/repo/VLD/desktop/pages/homepage/standard/2016/Week34/02-images/Style.png") no-repeat;
	font-size: 0;
	height: 132px;
	width: 173px;
	display: block;
}

.hpSlide h1 .hpStyle2 {
	display: block;
	letter-spacing: 5px;
	font: 46px/46px 'open_sanslight';
	text-transform: uppercase;
}

.hpSlide h1 .hpStyle3 {
    display: block;
    letter-spacing: -3px;
    font-weight: bold;
    font: 62px/62px 'open_sansextrabold';
    text-transform: uppercase;
}


.hpSlide h3, .hpSlide a.cta2 {
	font: 16px/16px 'open_sanslight';
	text-transform: uppercase;
	padding: 12px;
	text-decoration: none !important;
	width: 133px;
}
.hpSlide h3 {
	border: 1px solid #000;
}
.hpSlide a.cta2 {
position: absolute;
height: 0px;
top: 352px;
left: 72%;
padding: 0;
}
.hpSlide h3:hover, .hpSlide a.cta2:hover{
	background: #FFF;
	text-decoration: none;
	  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;

}

/* Slide 1 */

#hpSlide1 {
	background: url("/repo/VLD/desktop/pages/homepage/standard/2016/Week34/02-images/sprite.jpg") no-repeat;
}

#hpSlide1 .hpContent {
	left: 69%;
	top: 47px;
	width: 357px;
}

/* Slide 2 

#hpSlide2 {
	background: url(/repo/VLD/desktop/pages/homepage/standard/2015/1504/150402/02-images/Sprite.jpg) 0 -500px no-repeat;
}

#hpSlide2 .hpContent {
	left: 40px;
	top: 40px;
	width: 280px;
}

*/

/* Brands */

#hpBrands {
	height: 69px;
	margin-bottom: 3px;
	padding: 0;
	position: relative;
	width: 100%;
}

#hpBrands .controls {
	width: 100%;
}

#hpBrands .controls a {
	background-image: url(/repo/VLD/desktop/pages/homepage/standard/2015/1509/150904/02-images/Brands.gif);
	background-repeat: no-repeat;
	border: 1px solid #666;
	float: left;
	height: 55px;
	position: absolute;
	top: 6px;
	width: 44px;
	z-index: 1000;
}

#hpBrands .prev-slide {
	background-position: -2px -24px;
	left: 0;
}

#hpBrands .prev-slide:hover {
	background-position: -2px -23px;
}

#hpBrands .next-slide {
	background-position: -36px -24px;
	right: 0;
}

#hpBrands .next-slide:hover {
	background-position: -36px -23px;
}

#hpBrandsCarousel {
	height: 100%;
	left: 50px;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 900px;
}

#hpBrandsCarousel ul {
	height: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 600px;
}

#hpBrandsCarousel li {
	background-image: url(/repo/VLD/desktop/pages/homepage/standard/2015/1509/150904/02-images/Brands.gif);
	background-repeat: no-repeat;
	float: left;
	height: 100%;
	margin: 0 10px;
}

#hpBrandsCarousel li a {
	display: block;
	height: 100%;
}
#hpBrandsCarousel .ugg {
	background-position: -100px -16px;
	width: 111px;
}
#hpBrandsCarousel .converse {
	background-position: -210px -16px;
	width: 171px;
}
#hpBrandsCarousel .vans {
	background-position: -381px -16px;
	width: 103px;
}
#hpBrandsCarousel .michaelkors {
	background-position: -484px -16px;
	width: 116px;
}
#hpBrandsCarousel .nike {
	background-position: -600px -16px;
	width: 118px;
}
#hpBrandsCarousel .hunter {
	background-position: -718px -16px;
	width: 142px;
}
#hpBrandsCarousel .timberland {
	background-position: -860px -16px;
	width: 161px;
}
#hpBrandsCarousel .clarks {
	background-position: -1021px -16px;
	width: 125px;
}
#hpBrandsCarousel .frenchconnection {
	background-position: -1146px -16px;
	width: 145px;
}
#hpBrandsCarousel .adidas {
	background-position: -1296px -16px;
	width: 105px;
}
#hpBrandsCarousel .lacoste {
	background-position: -1405px -16px;
	width: 121px;
}
#hpBrandsCarousel .newbalance {
	background-position: -1526px -16px;
	width: 143px;
}
#hpBrandsCarousel .moda {
	background-position: -1669px -16px;
	width: 148px;
}
#hpBrandsCarousel .schuh {
	background-position: -1825px -16px;
	width: 112px;
}
#hpBrandsCarousel .solediva {
	background-position: -1940px -16px;
	width: 92px;
}
#hpBrandsCarousel .skechers {
	background-position: -2032px -16px;
	width: 127px;
}
#hpBrandsCarousel .armani {
	background-position: -2159px -16px;
	width: 110px;
}
#hpBrandsCarousel .lipsy {
	background-position: -2269px -16px;
	width: 138px;
}
#hpBrandsCarousel .drmartens {
	background-position: -2407px -16px;
	width: 138px;
}

/* Boxes */

.hpCol {
	float: left;
	width: 33.333333%;
}

.hpBox {
	background: url("/repo/VLD/desktop/pages/homepage/standard/2016/Week34/02-images/sprite.jpg") no-repeat;
	border: 1px solid #ccc;
	display: block;
	height: 330px;
}

.hpBox a {
	cursor: pointer;
	display: block;
	height: 100%;
	position: relative;
	text-decoration: none !important;
}
/*--------------------------------
NEW BOX COVER
------------------------------------*/

.hpBox a > span {
    text-align: center;
    margin: 5%;
    display: none;
  padding: 1%;
     -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
  }
.hpBox a h3{
      	color: #fff;
	display: none;
	font-family: 'open_sanslight';
	font-weight: normal;
	line-height: 20px;
	padding:0;
	position: absolute;
	text-align: center;
	top: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
  }
.hpBox a:hover h3{
    display:  block;

  }
   .hpBox h3 span{
	display: block;
  }

.hpBox h3 .hpStyle1 {
	padding-top: 40%;
	display: block;
	font-size: 36px;
	line-height: 36px;
	opacity: 1;
	text-transform: uppercase;
}

.hpBox h3 .hpStyle2 {		
	display: block;
	font-size: 14px;
	font-weight: normal;
	line-height: 20px;
	opacity: 1;
	padding: 15px 0;	
	font: 14px 'open_sanslight';
	text-decoration: none;
	text-transform: uppercase;
}


/* -----------------------------
Radial Out
---------------------------------- */
/* Fade */

.hpBox a h3{
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hpBox a h3:hover, .hpBox a h3:focus, .hpBox a h3:active {
  background-color: #222;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";  /* IE 8 */
  filter: alpha(opacity=90); /* IE 5-7 */
  -moz-opacity: 0.9;  /* Netscape */
  -khtml-opacity: 0.9;  /* Safari 1.x */
  opacity: 0.9;  /* Good browsers */
  color: white;
}


/* Column 1 */

/* BOX 1  */
#hpBox1 {
	background-position: 0px -500px;
}

#hpBox1 h3 {
	left:0;
	text-align: center;
	width: 100%;
}
#hpBox1 h3 .LiveText1 {
	font: 30px/30px 'open_sansregular';
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
}
#hpBox1 h3 .LiveText2 {
	font: 30px/30px 'open_sanslight';
	text-transform: uppercase;
}
/* BOX 2  */
#hpBox2 {
    background-position: 0px 100%;
display: block;
position: relative;
}

#hpProductsCarousel {
	margin-top: 20px;
	width: 100%;
}

.hpProduct {
	text-align: center;
	width: 100%;
}

.hpProduct img {
	border: 1px solid #ccc;
	height: 240px;
}

.hpProductControl {
	cursor: pointer;
	position: absolute;
	top: 50px;
	z-index: 10;
}

.hpProductNext {
	right: 0;
}

.hpProductPrev {
	left: 0;
}

/* Column 2 */

.hpCol2 {
	height: 663px;
}

.hpCol2 .hpBox {
	border: 0;
	height: 100%;
}

.hpCol2 h4 {
	top: 280px;
}

#hpBox3 {
	background-position:-333px -500px;
}

/* Column 3 */

#hpBox4 {
	background-position: -669px -500px;
}

#hpBox5 {
	background-position: -669px -834px;
	border-top: 0;
}


@media only screen and (max-width: 1024px){
	#topSearch {display:block;}
	#searchCon {display: none;}
	.hpBox a h3 {
    background: url(/repo/VLD/desktop/pages/homepage/standard/2015/1509/150930/02-images/transparency.png);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}
}