/* Fonts */
/* 06/06/19*/
/*comment*/


@font-face {
    font-family: 'VivaBeautiful';
    src: url("/repo/AWL/desktop/common/04-fonts/vivabeautiful-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal; 
 }

 #outerPageContainer {
    max-width: 100%;
    margin: 0 auto;
}
 
 /* Styles */ 

.TV__container{
max-width: 1200px;
margin: 0 auto;
background: #FFF;
}
.TV__container a{
	text-decoration: none;
	color: #FFF;
}
/*section{margin: 10vw 0;}*/

.TV__header{
  background-image: url(/repo/AWL/desktop/pages/freeformat/SS19/ShopTheAdvert/Week-16/02-images/190418_awl_shop_the_ad_hero_m.jpg);
  display: flex;
  height: 23em;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  background-position: top center;
  flex-direction:column;
  position: relative;
  justify-content: center;
  align-items: center;
}

.TV__headercontent{
	width: 100%;
background-color: rgba(255,255,255,0.7);
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
}

.TV__headertitle{font: 6vw/7vw 'GibsonRegular',Arial,'Helvetica Neue',Helvetica,sans-serif;text-transform: uppercase;text-indent: 32vw;padding: 0.5em 0 0 0;margin-bottom: -0.6em;color: #000;}
.TV__headertitle--font{font: 25vw/23vw "VivaBeautiful",Times,serif;display: block;text-transform: initial;text-indent: 0;color: #000;}
.TV__header--cta{
font: 5vw/10vw 'GibsonRegular',Arial,'Helvetica Neue',Helvetica,sans-serif;
display: block;
width: 90%;
padding: 1vw 0;
position: relative;
text-transform: uppercase;
letter-spacing: 0.1em; 
}
.TV__header--cta:after{
	content: ">";
	position: absolute;
	right: 1em;
}
.TV__header--ctaone{background: #9ee6d9;color: #000;margin: 0 auto 19vw auto;}

.TV__header--ctatwo{
background: #309e8b;
text-align: center;
margin: 0;
position: absolute;
bottom: 1em;
left: 5%;color: #FFF;display:  block;
}


.TV__container .hero-image img, .TV__container .hero-image span {
    transition: all 0.15s ease-in-out;
}


/*--------------------------
SECTION
------------------------------*/
.TV__outfits{
  width: 100%;
  position: relative;
}

.TV__outfitstitle{
font: 5vw/15vw 'GibsonRegular',Arial,'Helvetica Neue',Helvetica,sans-serif;
text-transform: uppercase;
text-align: center;
text-indent: -20vw;
}
.TV__outfitspara{
font: 5vw/6vw 'GibsonRegular',Arial,'Helvetica Neue',Helvetica,sans-serif;
text-align: center;
width: 90%;
margin: 30px auto;
letter-spacing: 0.1em;
}
.TV__outfitstitle--font{font: 20vw/10vw VivaBeautiful,"Times New Roman",serif;display: block;text-transform: initial;text-indent: 0;}
.TV__outfits--cta{
font: 5vw/10vw 'GibsonRegular',Arial,'Helvetica Neue',Helvetica,sans-serif;
display: block;
width: 90%;
padding: 1vw 0;
position: relative;
text-transform: uppercase;
letter-spacing: 0.1em; 
}
.TV__outfits--cta:after,
.TV__outfits--look:after{
	content: ">";
	position: absolute;
	right: 1em;
}
.TV__outfits--look{
  display: block;
  padding: 1em 0;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  background: #309e8b;
  font: 5vw/5vw 'GibsonRegular',Arial,'Helvetica Neue',Helvetica,sans-serif;
  margin-top: 1em;
  color: #FFF;
  position: absolute;
  bottom: 20px;
}

.slide-secondary .TV__outfits--look{
  opacity: 0
}
.slide-primary .TV__outfits--look{

  opacity: 1
}


/*--------------------------
SECTION
------------------------------*/
.TV__video{
  width: 100%;
  position: relative;
}

.TV__videotitle{
font: 5vw/15vw 'GibsonRegular',Arial,'Helvetica Neue',Helvetica,sans-serif;
text-transform: uppercase;
text-align: center;
text-indent: 31vw;
}
.TV__videopara{
font: 5vw/6vw 'GibsonRegular',Arial,'Helvetica Neue',Helvetica,sans-serif;
text-align: center;
width: 90%;
margin: 30px auto;
letter-spacing: 0.1em;
}
.TV__videotitle--font{
font: 20vw/10vw 'VivaBeautiful',"Times New Roman",serif;
display: block;
text-transform: initial;
text-indent: 0;
}
.TV__video--cta{
    font: 5vw/10vw 'GibsonRegular',Arial,'Helvetica Neue',Helvetica,sans-serif;
    display: block;
    width: 100%;
    padding: 1vw 0;
    position: relative;
    text-transform: uppercase;
    text-align: center;
    margin: 3% 0;
    letter-spacing: 0.1em;
}
.TV__video--cta:after{
	content: ">";
	position: absolute;
	right: 1em;	
}
.TV__video--ctapale{
background: #9ee6d9;
color: #000;
}
.TV__video--ctadark{
background:#309e8b;
color: #FFF;
}
.TV__video--links{
  margin: 5%;
  display:flex;
  flex-direction: column;
}

/*--------------------------
SECTION
------------------------------*/
.TV__BTS{
  width: 100%;
  position: relative;
}

.TV__BTStitle{font: 5vw/12vw 'GibsonRegular',Arial,'Helvetica Neue',Helvetica,sans-serif;text-transform: uppercase;text-align: center;color:  #000;text-indent: -1vw;}
.TV__BTSpara{font: 5vw/6vw 'GibsonRegular',Arial,'Helvetica Neue',Helvetica,sans-serif;text-align: center;width: 90%;margin: 30px auto;letter-spacing: 0.1em;color: #000;}


.TV__BTStitle--font{
font: 20vw/10vw 'VivaBeautiful',"Times New Roman",serif;
display: block;
text-transform: initial;
text-indent: 0;
padding-top: 9%;
padding-bottom: 9%;
}



.TV__BTSimg{
background-image: url(/repo/AWL/desktop/pages/freeformat/SS19/ShopTheAdvert/Week-16/02-images/190418_awl_behind_the_scenes_m.jpg);
height: 15em;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
background-position: top center;

}

.TV__BTSimg_2{
background-image: url(/repo/OXI/desktop/pages/freeformat/SS19/ShopTheAdvert/Week-23/02-images/week23_awl_behind_the_scenes_m.jpg);
height: 15em;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
background-position: top center;

}

.TV__BTS--cta{
font: 5vw/10vw 'GibsonRegular',Arial,'Helvetica Neue',Helvetica,sans-serif;
display: block;
width: 90%;
position: relative;
text-transform: uppercase;
padding: 1vw 0;
text-align: center;
margin:  5%;
letter-spacing: 0.1em; 
}
.TV__BTS--cta:after{
	content: ">";
	position: absolute;
	right: 1em;
}
.TV__BTS--ctadark{
background:#309e8b;
color: #FFF;
}


/*----------------------
VIDEO
---------------------------*/


.video-container {
position:relative;
padding-bottom:0vw;
width: 100%; 
max-width: 1100px;
max-height:700px;
overflow: auto;
border: none; 
margin: 0 auto;
}

.video-container iframe, .video-container object, .video-container embed {
position:absolute;
top:0;
left:0;
max-width: 1100px; 
width:100%; 
max-height:700px; 
height:100%; 
}
@media screen and (min-width:568px){/*ANYTHING ABOVE 768px */
.video-container {padding-bottom:0.3%;}
}
@media screen and (min-width:768px) {/*ANYTHING ABOVE 768px */
.video-container {
	padding-bottom:0.3%;
	}

	.TV__BTSimg{
background-image: url(/repo/AWL/desktop/pages/freeformat/SS19/ShopTheAdvert/Week-16/02-images/190418_awl_behind_the_scenes_m.jpg);
height: 15em;
background-size: contain;
background-repeat: no-repeat;
width: 49%;
background-position: top center;
display: inline-block;
}

.TV__BTSimg_2{
background-image: url(/repo/OXI/desktop/pages/freeformat/SS19/ShopTheAdvert/Week-23/02-images/week23_awl_behind_the_scenes_m.jpg);
height: 15em;
background-size: contain;
background-repeat: no-repeat;
width: 49%;
background-position: top center;
display: inline-block;
}



}
@media screen and (min-width:1200px){/*ANYTHING ABOVE 1200px */
  .video-container {  min-height: 619px; padding: 0;}
}


.TV__topborder, .TV__bottomborder{ display: none;}


.ShopTheLook{
	display: block;
	position: relative;
	height: auto;
	width: 100%;
	top: 0;
	padding-bottom:  111px;
	left: 0;
}


/*CTA colours*/

.cta.light-blue { 
  background-color:#c4d0ea;
}

.cta.dark-blue { 
  background-color:#4d6eb1;
}




.cta.pink { 
  background-color:#f49f92;
}

.cta.yellow { 
  background-color:#f4bd57;
}
    

    


/*--------------------
DESKTOP QUERIES
------------------------*/
@media screen and (min-width:568px){/*ANYTHING ABOVE 568px */
  .TV__header{height:640px;}
  .TV__outfitstitle,
  .TV__videotitle,
  .TV__BTStitle{font-size: 24px;line-height: 24px;}


 
  .TV__videotitle--font,
  .TV__BTStitle--font{font-size: 100px;line-height: 100px;margin-bottom: -33px;}
  
  .TV__outfitspara,
  .TV__videopara,
  .TV__BTSpara{font-size:22px;line-height: 30px;}

  .TV__header--cta,
  .TV__outfits--cta,
  .TV__video--cta,
  .TV__BTS--cta,
  .TV__outfits--look{font-size: 20px; }
  .TV__outfitstitle {text-indent: -17vw;}
  .TV__videotitle {text-indent: 19vw;}
  .TV__BTStitle {text-indent: -1vw;}




  .TV__outfitstitle--font {font-size: 100px;line-height: 100px; margin-bottom: 25px;}
 

}
@media screen and (min-width:768px){/*ANYTHING ABOVE 768px */
	
.ShopTheLook{
	display: none;
}
	.TV__outfits--look{
		position:relative;
		bottom: 0;
	}

/*Shop The Look Modal*/

h1.ampl-modal-title {
  padding: 20px 0 0;
}

h1.ampl-modal-title span {
  font-family: "VivaBeautiful", "GibsonRegular", Arial, Helvetica, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 50px;
}

h1.ampl-modal-title:before, h1.ampl-modal-title:after {
    margin: 0.65em 0 0;
}
.jdwModal-multibuy div#checkoutButtons {
    position: relative;
    left: 0;
    margin-top: 25px;
}

a#saveBtn {
  margin: 10px 0 0 0;
  padding: 8px 9px;
}

.TV__header{
  background-image: url(/repo/AWL/desktop/pages/freeformat/SS19/ShopTheAdvert/Week-16/02-images/190418_awl_shop_the_ad_hero.jpg);
  background-size: cover;
  height: 490px;
}
.TV__headercontent{
    top: 20%;
    width: 50%;
    height: 19em;
    left: auto;
    right: 43%;
}
.TV__headertitle{
    font-size: 23px;
    text-indent: 5.4em;
    line-height: 100px;
    margin-top: 7px;
    margin-bottom: 15px;
    padding: 0;
}
.TV__headertitle--font{
  font-size: 120px;
  line-height: 40px;
  margin-bottom: 0.1em;
}

.TV__header--cta, 
.TV__outfits--cta, 
.TV__video--cta, 
.TV__BTS--cta,
.TV__outfits--look{
    padding: 0;
    font-size: 18px;
    line-height: 50px;
}
.TV__BTS--cta{
  display: block;
  width: 374px;
  margin-left: auto;
  margin-right: auto; 
}

.TV__header--ctatwo{
    top: 18em;
    bottom: auto;
    right: 45.5%;
    width: 45%;
    left: auto;
}
.TV__BTSimg{
  height: 500px;
  background-image: url(/repo/AWL/desktop/pages/freeformat/SS19/ShopTheAdvert/Week-16/02-images/190418_awl_behind_the_scenes.jpg); 
}

.TV__BTSimg_2{
  height: 500px;
  background-image: url(/repo/OXI/desktop/pages/freeformat/SS19/ShopTheAdvert/Week-23/02-images/week23_awl_behind_the_scenes.jpg); 
}
.TV__video{
  margin-top: 25px;  
  margin-bottom: 100px;
}
.TV__outfits{
  margin-bottom: 25px; 
  margin-top: 120px;
}
.TV__outfitstitle {
    text-indent: -11vw;
}
.TV__videotitle {
    text-indent: 18vw;
}
.TV__BTS{
  margin-top: 75px;
  margin-bottom: 60px;
}
.TV__video--cta{
}
.TV__video--links{
  margin: 0;
  flex-direction: row;
}
.TV__video--linkspace{
 flex:1;
 margin: 2%;
}
.TV__video--linkspace:nth-child(1){
  margin-right:1em; 
}
/*----------------------
border hacks
-------------------*/
.TV__topborder, 
.TV__bottomborder{
  width: 90%;
  display: block;
  height: 25px;
  background-repeat: no-repeat;
  border: none;
  background-size: contain;
}
.TV__topborder{
  background-image: url(/repo/AWL/desktop/pages/freeformat/SS18/ShopTheAdvert/week19/02-images/top_line.png);}
.TV__bottomborder{
  background-image: url(/repo/AWL/desktop/pages/freeformat/SS18/ShopTheAdvert/week19/02-images/bottom_line.png);}

.TV__outfits .TV__bottomborder{
    margin-top: -45px;
    padding-bottom: 40px;
    }
.TV__BTS .TV__bottomborder{
    margin-top: 0px;
    padding-bottom: 40px;
    }

.TV__outfitstitle, 
.TV__BTStitle{
	margin: -90px;
    padding-bottom: 3%;
}
.TV__outfitstitle--font,
.TV__BTStitle--font{
  background: #FFF;
  width: 30%;
  display: block;
  margin-left: auto;
  margin-right: auto;  
}

.TV__BTStitle--font{
  padding-top: 2%;  
}
}


@media screen and (min-width:1000px){/*ANYTHING ABOVE 1000px */
.TV__header{height: 658px;}
.TV__headercontent {
    top: 23%;
    width: 47%;
    height: 350px;
    left: auto;
    right: 44%;
}
.TV__headertitle{margin-top: 1em;margin-bottom: 1em;}
.TV__header--cta{width: 382px;}
.TV__header--ctatwo {top: 23.1em;right: 48.8%;}

.TV__headertitle{font-size: 27px;line-height: 87px;}
.TV__headertitle--font{font-size: 161px;margin-top: 4%;}

.TV__BTS .TV__bottomborder{margin-top:50px }
.TV__video--links {
    margin: 0 auto;
    text-align: center;
    max-width: 800px;
}
.TV__video--linkspace{ margin:2em 0;  }
.TV__videotitle {
    text-indent: 15vw;
}
}

@media screen and (min-width:1200px){/*ANYTHING ABOVE 1200px */

.TV__header--ctatwo{right: 51.6%;}
.TV__topborder, .TV__bottomborder{width: 100%;}
.TV__outfits .TV__bottomborder{margin-top: -58px;}
.TV__videotitle{text-indent: 6em;margin-top: 50px;}
.TV__outfitstitle{text-indent: -4em}
.TV__BTStitle{text-indent:-2em}
.TV__BTS .TV__bottomborder{margin-top:0px} 
.TV__video--cta{ width: 382px; }
	
	
.TV__container{
      margin-left: -10%;
    width: 120%;
}

}



/* BACKGROUND TRANSITIONS */
/* Fade */
.hvr-fade {
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  background-color: #222;
  color: white;
}

.modalHotspot:hover .hvr-fade{
	background-color: #222;
  color: white;
}