@charset "UTF-8";

::-webkit-scrollbar { 
		display						: none; 
}



@media all and (orientation:landscape) {
	html, body {
		margin						: 0;
		padding						: 0;
		border						: 0;
		background					: #000000;
		width 						: 2048px;
		height 						: 1382px;
		overflow 					: hidden;
	}

	#background {
		position					: absolute;
		float						: left;
		display 					: block;
		background-image			: url(../images/landscape/background.jpg);
		top 						: 0px;
		left 						: 0px;
		width 						: 2048px;
		height 						: 1382px;
	}
	
	#lightboxVideo {
		position					: absolute;
		float						: left;
		display						: none;
		top							: 0px;
		left						: 0px;
		width						: 2048px;
		height						: 1382px;
		background-color			: rgba(0,0,0,0.7);
		z-index						: 200;
	}
	
	#ytplayer {
		position					: absolute;
		float						: left;
		display						: block;
		top							: 280px;
		left						: 370px;	
	}
	
	#closeVideo {
		color						: #ffffff;
		position					: absolute;
		display						: block;
		float						: left;
		top							: 230px;
		left						: 1630px;
		display 					: block;
		color						: #ffffff;
		font-family					: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size					: 20px;
		z-index						: 201;
		width						: 34px;
		height						: 30px;
		border-radius				: 18px;
		border-color				: #ffffff;
		border-width				: 2px;
		border-style				: solid;
		text-align					: center;
		padding-top					: 3px;
		cursor						: pointer;
	}
	
	#carHolder {
		position					: absolute;
		float						: left;
		top 						: 450px;
		left 						: 0px;
		display 					: block;
		width 						: 2048px;
		height 						: 700px;	
	}
	
	#newCar {
		position					: absolute;
		float						: left;
		top 						: 0px;
		left 						: 0px;
		display 					: block;
		background-image			: url(../images/landscape/newPeugeout.jpg);
		background-size				: 2048px 700px;
		width 						: 2048px;
		height 						: 700px;
		-webkit-clip-path			: polygon(0px 0px,2020px 0px,1700px 700px,0px 700px);	
		transition					: -webkit-clip-path 2s ease;
		-webkit-transition			: -webkit-clip-path 2s ease;
		transition-delay			: 1s;
		-webkit-transition-delay	: 1s;
	}
	
	#newCar.startPos {
		-webkit-clip-path			: polygon(0px 0px,1460px 0px,1140px 700px,0px 700px);	
	}
	
	
	
	#oldCar {
		position					: absolute;
		float						: left;
		top 						: 450px;
		left 						: 0px;
		display 					: block;
		background-image			: url(../images/landscape/oldPeugeout.jpg);
		background-size				: 2048px 700px;
		width 						: 2048px;
		height 						: 700px;		
	}
	
	#legendLogo {
		position					: absolute;
		float						: left;
		top 						: 46px;
		left 						: 66px;
		display 					: block;
		background-image			: url(../images/landscape/legend-return.png);
		background-size				: 395px 261px;
		width 						: 395px;
		height 						: 261px;
	}
	
	#strapline {
		position					: absolute;
		float						: left;
		top 						: 1312px;
		left 						: 80px;
		display 					: block;
		background-image			: url(../images/newPeugoutCopy.png);
		background-size				: 524px 23px;
		width 						: 524px;
		height 						: 24px;		
	}
	
	#peugeotLogo {
		position					: absolute;
		float						: left;
		top 						: 1219px;
		left 						: 1825px;
		display 					: block;
		background-image			: url(../images/peugeot-logo.png);
		background-size				: 163px 115px;
		width 						: 163px;
		height 						: 116px;		
	}
	
	#tcBut {
		position					: absolute;
		float						: left;
		top 						: 1353px;
		left 						: 80px;
		display 					: block;
		background-image			: url(../images/tcButton.png);
		background-size				: 114px 29px;
		background-repeat			: none;
		width 						: 114px;
		height 						: 29px;
		cursor						: pointer;
		
	}
	
	#termsHolder {
		position					: absolute;
		float						: left;
		top 						: 1240px;
		left 						: 80px;
		display 					: block;
		height 						: 142px;
		overflow					: hidden;
		z-index						: 100;
		cursor						: pointer;
	}
	
	#termsContent {
		position					: relative;
		float						: left;
		top 						: 144px;
		left 						: 0px;
		display 					: block;
		opacity						: 1;
		-webkit-opacity				: 1; 
		background-color			: #000000;
		width 						: 800px;
		height 						: 125px;
		padding						: 40px 50px 20px 20px;
		color						: #e2e2e2;
		border-radius				: 30px;
		border-color				: #ffffff;
		border-width				: 2px;
		border-style				: solid;
		cursor						: pointer;
		font-family					: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		line-height					: 25px;
		transition					: top 1s ease;
		-webkit-transition			: top 1s ease;
	}
	
	#termsContent.show {
		top 						: 0px;	
	}
	
	#termsclose {
		position					: relative;
		float						: left;
		top 						: -105px;
		left 						: 800px;
		display 					: block;
		color						: #ffffff;
		font-family					: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size					: 20px;
		width						: 34px;
		height						: 30px;
		border-radius				: 18px;
		border-color				: #ffffff;
		border-width				: 2px;
		border-style				: solid;
		text-align					: center;
		padding-top					: 3px;
		cursor						: pointer;
	}
	
	#sliderHolder {
		position					: absolute;
		float						: left;
		top 						: 632px;
		left 						: 200px;
		display 					: block;
		width 						: 1600px;
		height 						: 16px;		
	}
	
	#slider {
		position					: relative;
		float						: left;
		left 						: 1198px;
		display 					: block;
		cursor						: pointer;
		background-image			: url(../images/slider.png);
		background-repeat			: no-repeat;
		background-size				: 403px 60px;
		background-position			: bottom;
		width 						: 403px;
		height 						: 560px;	
		transition					: left 2s ease;
		-webkit-transition			: left 2s ease;
		transition-delay			: 1.5s;
		-webkit-transition-delay	: 1.5s;
	}
	
	#slider.startPos {
		left 						: 780px;	
	}
	
	#dividerSlash {
		position					: absolute;
		float						: left;
		top 						: 450px;
		left 						: 1140px;		
		display 					: none;
		background-image			: url(../images/dividerLine.png);
		background-size				: 323px 703px;
		width 						: 323px;
		height 						: 703px;
	}
	
	
	#hotspot1 {
		position					: absolute;
		float						: left;
		top 						: 386px;
		left 						: 1478px;
		display 					: none;
		width 						: 550px;
		height 						: 48px;
		overflow					: hidden;
		cursor						: pointer;
		transition					: transform 1s, top 1s ease;
		-webkit-transition			: -webkit-transform 1s, top 1s ease;
		-webkit-transform			: translate3d(0px,0px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,0px,0px);
		
	}
	
	#hotspot1.open {
		-webkit-transform			: translate3d(0px,-90px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,-90px,0px);
		height 						: 220px;
	}
	
	#hotspot2 {
		position					: absolute;
		float						: left;
		top 						: 362px;
		left 						: 1102px;
		display 					: none;
		width 						: 550px;
		height 						: 48px;
		overflow					: hidden;
		cursor						: pointer;
		transition					: transform 1s;
		-webkit-transition			: -webkit-transform 1s;
		-webkit-transform			: translate3d(0px,0px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,0px,0px);
	}
	
	#hotspot2.open {
		-webkit-transform			: translate3d(0px,-75px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,-75px,0px);
		height 						: 200px;
	}
	
	#hotspot3 {
		position					: absolute;
		float						: left;
		top 						: 415px;
		left 						: 700px;
		display 					: none;
		width 						: 550px;
		height 						: 48px;
		overflow					: hidden;
		cursor						: pointer;
		transition					: transform 1s, top 1s ease;
		-webkit-transition			: -webkit-transform 1s, top 1s ease;
		-webkit-transform			: translate3d(0px,0px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,0px,0px);
	}
	
	#hotspot3.open {
		-webkit-transform			: translate3d(0px,-108px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,-108px,0px);
		height 						: 200px;
	}
	
	#hotspot4 {
		position					: absolute;
		float						: left;
		top 						: 505px;
		left 						: 490px;
		display 					: none;
		width 						: 550px;
		height 						: 48px;
		overflow					: hidden;
		cursor						: pointer;
		transition					: transform 1s, top 1s ease;
		-webkit-transition			: -webkit-transform 1s, top 1s ease;
		-webkit-transform			: translate3d(0px,0px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,0px,0px);
	}
	
	#hotspot4.open {
		-webkit-transform			: translate3d(0px,-148px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,-148px,0px);
		height 						: 200px;
	}
	
	#xButton {
		position					: relative;
		float						: left;
		top 						: 0px;
		left 						: 0px;
		display 					: block;
		background-image			: url(../images/hotSpotButtonOpen.png);
		background-repeat			: no-repeat;
		background-size				: 46px 46px;
		width 						: 48px;
		height 						: 48px;
	}
	
	#xButton.open {
		background-image			: url(../images/hotSpotButtonClosed.png);
	}
	
	#hotSpotHeading {
		color						: #e2e2e2;
		font-family					: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size					: 30px;
		font-weight					: bold;
		position					: relative;
		float						: left;
		top 						: 6px;
		left 						: 20px;
		display 					: block;
		width 						: 460px;
		height 						: 46px;
	}
	
	#hotSpotCopy {
		opacity						: 0;
		color						: #e2e2e2;
		font-family					: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size					: 26px;
		font-style					: normal;
		position					: relative;
		float						: left;
		top 						: 10px;
		left 						: 18px;
		width 						: 385px;
		height 						: 46px;
		transition					: transform .5s, opacity .5s ease;
		-webkit-transition			: -webkit-transform .5s, opacity .5s ease;
	}
	
	#hotSpotCopy.open {
		opacity						: 1;
	}
	
	#cta {
		position					: absolute;
		float						: left;
		top							: 350px;
		left 						: 66px;
		display 					: block;
		background-image			: url(../images/landscape/watchCTA.png);
		background-repeat			: no-repeat;
		background-size				: 357px 63px;
		width 						: 357px;
		height 						: 63px;	
		cursor						: pointer;	
	}
	
	#cta2 {
		position					: absolute;
		float						: left;
		top							: 430px;
		left 						: 66px;
		display 					: block;
		background-image			: url(../images/landscape/discoverCTA.png);
		background-repeat			: no-repeat;
		background-size				: 357px 63px;
		width 						: 357px;
		height 						: 63px;		
	}

	
}

@media all and (orientation:portrait) {
	html, body {
		margin						: 0;
		padding						: 0;
		border						: 0;
		background					: #000000;
		width 						: 1536px;
		height 						: 1890px;
		overflow 					: hidden;
	}

	#background {
		position					: absolute;
		float						: left;
		display 					: block;
		background-image			: url(../images/portrait/background-port.jpg);		
		top 						: 0px;
		left 						: 0px;
		width 						: 1536px;
		height 						: 1890px;
	}
	
	#lightboxVideo {
		position					: absolute;
		float						: left;
		display						: none;
		top							: 0px;
		left						: 0px;
		width						: 1536px;
		height						: 1890px;
		background-color			: rgba(0,0,0,0.7);
		z-index						: 200;
	}
	
	#ytplayer {
		position					: absolute;
		float						: left;
		display						: block;
		top							: 380px;
		left						: 115px;	
	}
	
	#closeVideo {
		color						: #ffffff;
		position					: absolute;
		display						: block;
		float						: left;
		top							: 330px;
		left						: 1380px;
		display 					: block;
		color						: #ffffff;
		font-family					: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size					: 20px;
		z-index						: 201;
		width						: 34px;
		height						: 30px;
		border-radius				: 18px;
		border-color				: #ffffff;
		border-width				: 2px;
		border-style				: solid;
		text-align					: center;
		padding-top					: 3px;
		cursor						: pointer;
	}
	
	#carHolder {
		position					: absolute;
		float						: left;
		top 						: 660px;
		left 						: 0px;
		display 					: block;
		width 						: 1536px;
		height 						: 750px;	
	}
	
	#newCar {
		position					: absolute;
		float						: left;
		top 						: 0px;
		left 						: 0px;
		display 					: block;
		background-image			: url(../images/portrait/newPeugeot-port.jpg);
		background-size				: 1536px 750px;
		width 						: 1536px;
		height 						: 750px;
		-webkit-clip-path			: polygon(0px 0px,2020px 0px,1700px 700px,0px 700px);
		transition					: -webkit-clip-path 2s ease;
		-webkit-transition			: -webkit-clip-path 2s ease;
		transition-delay			: 1s;
		-webkit-transition-delay	: 1s;
	}
	
	#newCar.startPos {
		-webkit-clip-path			: polygon(0px 0px,1170px 0px,850px 700px,0px 700px);	
	}
	
	
	
	#oldCar {
		position					: absolute;
		float						: left;
		top 						: 660px;
		left 						: 0px;
		display 					: block;
		background-image			: url(../images/portrait/oldPeugeout-port.jpg);
		background-size				: 1536px 750px;
		width 						: 1536px;
		height 						: 750px;		
	}
	
	#legendLogo {
		position					: absolute;
		float						: left;
		top 						: 56px;
		left 						: 66px;
		display 					: block;
		background-image			: url(../images/portrait/legend-return-port.png);
		background-size				: 408px 270px;
		width 						: 408px;
		height 						: 270px;
	}
	
	#strapline {
		position					: absolute;
		float						: left;
		top 						: 1798px;
		left 						: 80px;
		display 					: block;
		background-image			: url(../images/newPeugoutCopy.png);
		background-size				: 524px 23px;
		width 						: 524px;
		height 						: 24px;		
	}
	
	#peugeotLogo {
		position					: absolute;
		float						: left;
		top 						: 1706px;
		left 						: 1307px;
		display 					: block;
		background-image			: url(../images/peugeot-logo.png);
		background-size				: 163px 115px;
		width 						: 163px;
		height 						: 116px;		
	}
	
	#tcBut {
		position					: absolute;
		float						: left;
		top 						: 1861px;
		left 						: 80px;
		display 					: block;
		background-image			: url(../images/tcButton.png);
		background-size				: 114px 29px;
		background-repeat			: none;
		width 						: 114px;
		height 						: 29px;
		z-index:					: 101;
		cursor						: pointer;
	}
	
	#termsHolder {
		position					: absolute;
		float						: left;
		top 						: 1747px;
		left 						: 80px;
		display 					: block;
		height 						: 142px;
		overflow					: hidden;
		z-index						: 100;
		cursor						: pointer;
	}
	
	#termsContent {
		position					: relative;
		float						: left;
		top 						: 144px;
		left 						: 0px;
		display 					: block;
		opacity						: 1;
		-webkit-opacity				: 1; 
		background-color			: #000000;
		width 						: 800px;
		height 						: 125px;
		padding						: 40px 50px 20px 20px;
		color						: #e2e2e2;
		border-radius				: 30px;
		border-color				: #ffffff;
		border-width				: 2px;
		border-style				: solid;
		cursor						: pointer;
		font-family					: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		line-height					: 25px;
		transition					: top 1s ease;
		-webkit-transition			: top 1s ease;
	}
	
	#termsContent.show {
		top 						: 0px;	
	}
	
	#termsclose {
		position					: relative;
		float						: left;
		top 						: -105px;
		left 						: 800px;
		display 					: block;
		color						: #ffffff;
		font-family					: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size					: 20px;
		width						: 34px;
		height						: 30px;
		border-radius				: 18px;
		border-color				: #ffffff;
		border-width				: 2px;
		border-style				: solid;
		text-align					: center;
		padding-top					: 3px;
		cursor						: pointer;
	}
	
	#sliderHolder {
		position					: absolute;
		float						: left;
		top 						: 950px;
		left 						: 150px;
		display 					: block;
		width 						: 1200px;
		height 						: 16px;	
	}
	
	#slider {
		position					: relative;
		float						: left;
		left 						: 850px;
		display 					: block;
		cursor						: pointer;
		background-image			: url(../images/slider.png);
		background-repeat			: no-repeat;
		background-size				: 403px 60px;
		background-position			: bottom;
		width 						: 403px;
		height 						: 560px;	
		transition					: left 2s ease;
		-webkit-transition			: left 2s ease;
		transition-delay			: 1.5s;
		-webkit-transition-delay	: 1.5s;
	}
	
	#slider.startPos {
		left 						: 500px;	
	}
	
	#dividerSlash {
		position					: absolute;
		float						: left;
		top 						: 670px;
		left 						: 845px;		
		display 					: none;
		background-image			: url(../images/dividerLine.png);
		background-size				: 323px 703px;
		width 						: 323px;
		height 						: 703px;
	}
	
	#hotspot1 {
		position					: absolute;
		float						: left;
		top 						: 640px;
		left 						: 980px;
		display 					: none;
		width 						: 550px;
		height 						: 48px;
		overflow					: hidden;
		cursor						: pointer;
		transition					: transform 1s, top 1s ease;
		-webkit-transition			: -webkit-transform 1s, top 1s ease;
		-webkit-transform			: translate3d(0px,0px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,0px,0px);
		
	}
	
	#hotspot1.open {
		-webkit-transform			: translate3d(0px,-90px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,-90px,0px);
		height 						: 220px;
	}
	
	#hotspot2 {
		position					: absolute;
		float						: left;
		top 						: 642px;
		left 						: 702px;
		display 					: none;
		width 						: 550px;
		height 						: 48px;
		overflow					: hidden;
		cursor						: pointer;
		transition					: transform 1s, top 1s ease;
		-webkit-transition			: -webkit-transform 1s, top 1s ease;
		-webkit-transform			: translate3d(0px,0px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,0px,0px);
	}
	
	#hotspot2.open {
		-webkit-transform			: translate3d(0px,-75px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,-75px,0px);
		height 						: 200px;
	}
	
	#hotspot3 {
		position					: absolute;
		float						: left;
		top 						: 715px;
		left 						: 400px;
		display 					: none;
		width 						: 550px;
		height 						: 48px;
		overflow					: hidden;
		cursor						: pointer;
		transition					: transform 1s, top 1s ease;
		-webkit-transition			: -webkit-transform 1s, top 1s ease;
		-webkit-transform			: translate3d(0px,0px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,0px,0px);
	}
	
	#hotspot3.open {
		-webkit-transform			: translate3d(0px,-108px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,-108px,0px);
		height 						: 200px;
	}
	
	#hotspot4 {
		position					: absolute;
		float						: left;
		top 						: 785px;
		left 						: 150px;
		display 					: none;
		width 						: 550px;
		height 						: 48px;
		overflow					: hidden;
		cursor						: pointer;
		transition					: transform 1s, top 1s ease;
		-webkit-transition			: -webkit-transform 1s, top 1s ease;
		-webkit-transform			: translate3d(0px,0px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,0px,0px);
	}
	
	#hotspot4.open {
		-webkit-transform			: translate3d(0px,-148px,0px); /* Chrome, Safari, Opera */
   		transform					: translate3d(0px,-148px,0px);
		height 						: 200px;
	}
	
	#xButton {
		position					: relative;
		float						: left;
		top 						: 0px;
		left 						: 0px;
		display 					: block;
		background-image			: url(../images/hotSpotButtonOpen.png);
		background-repeat			: no-repeat;
		background-size				: 46px 46px;
		width 						: 48px;
		height 						: 48px;
	}
	
	#xButton.open {
		background-image			: url(../images/hotSpotButtonClosed.png);
	}
	
	#hotSpotHeading {
		color						: #e2e2e2;
		font-family					: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size					: 30px;
		font-weight					: bold;
		position					: relative;
		float						: left;
		top 						: 6px;
		left 						: 20px;
		display 					: block;
		width 						: 460px;
		height 						: 46px;
	}
	
	#hotSpotCopy {
		opacity						: 0;
		color						: #e2e2e2;
		font-family					: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size					: 26px;
		font-style					: normal;
		position					: relative;
		float						: left;
		top 						: 10px;
		left 						: 18px;
		width 						: 385px;
		height 						: 46px;
		transition					: transform .5s, opacity .5s ease;
		-webkit-transition			: -webkit-transform .5s, opacity .5s ease;
	}
	
	#hotSpotCopy.open {
		opacity						: 1;
	}
	
	#cta {
		position					: absolute;
		float						: left;
		top							: 398px;
		left 						: 60px;
		display 					: block;
		background-image			: url(../images/portrait/watchCTA-port.png);
		background-repeat			: no-repeat;
		background-size				: 323px 58px;
		width 						: 323px;
		height 						: 58px;	
		cursor						: pointer;	
	}
	
	#cta2 {
		position					: absolute;
		float						: left;
		top							: 476px;
		left 						: 60px;
		display 					: block;
		background-image			: url(../images/portrait/discoverCTA-port.png);
		background-repeat			: no-repeat;
		background-size				: 323px 58px;
		width 						: 323px;
		height 						: 58px;		
	}
}