body {
	margin:0;
	padding:0;
}

#adArea {
	position:relative;
	width:100%;
	height:100%;
	background: #fff;
	overflow:hidden;
}

#maincontain {
	position:absolute;
	left: 0px;
	right:0px;
	margin: auto;
	top:0;
	width: 85%;
	height: 100%;
	z-index:8;
	cursor:pointer;
}

#vidcontain {
	position:absolute;
	bottom:0;
	width: 85%;
	min-width:1280px;
	right:0;
	height: 100%;
	z-index:2;
}

.fgImg {
	position:absolute;
	background-size: contain;
	background-repeat:no-repeat;
	background-position:left top;
}

#titleImg1 {
	width:535px; /*307px;*/
	height:97px; /*46px;*/
	left: 5%;
	top: 5%;
	margin-top: 7%;
}

#subtitle {
	width: 524px;/*482px;*/
	height:89px;
	left: 5%;
	top: 5%;
	margin-top: 17%;
}

#button {
	position: absolute;
	width: 220px; /*248px;*/
	height: 49px;  /*51px;*/
	left: 5%;
	top: 5%;
	margin-top: 26.5%;
	background-color: #f7c12f;
	z-index:10;
}

#buttonText, #buttonTextOn {
	position:absolute;
	width:100%;
	height:100%;
	background-position: center center;
}

.vidElement {
	position:absolute;
	bottom:2%;
	right:0;
	z-index: 4;
	min-width: 0;
	height: 100vh;
	width: calc(100vh * 2);
	max-width: 100vw;
	min-height:0;
	max-height: calc(100vw * 0.5);
}

#featImg { 
	opacity:0;
	z-index:5;
}

#mobileVideo { width:0; }


@media (min-width: 1281px) {
	#titleImg1 { 
		margin-top:90px;
		max-width: 535px;
	}
	#subtitle {
		margin-top:220px;
		max-width:524px;
	}
	#button {
		margin-top:340px;
		max-width:220px;
	}
	.vidElement {
		width: 100%;
		min-width: 1152px;
		max-width: calc(70vh * 2);
		height: auto;
		min-height: 576px;
		max-height: 70vh;
	}
}



/* landscape */

@media (min-width: 601px) and (max-height: 576px) {
	.vidElement { 
		height: 100vh;
		width: calc(100vh * 2);
		max-width: 100vw;
		max-height: calc(100vw * 0.5);
		min-width:0;
		min-height:0;
	}
}


@media (max-width: 1280px) {
	#maincontain, #vidcontain { width: 100%; }
	#vidcontain { min-width:initial; }
}

@media (max-width: 1280px) and (orientation: landscape) {
	#titleImg1 {
		width: 42%;/*24%;*/
	}
	#subtitle {
		width: 41%;
	}
	#button {
		width: 18vw;
		height: 4.5vw;
	}
}

/* mobile Landscape */

@media (orientation:landscape) and (max-width: 760px)  {
	#titleImg1 {
		width: 49%;/*28%;*/
	}
	#subtitle {
		width: 48%;
		height:120px;
		margin-top: 18%;
	}
	#button {
		margin-top: 29.5%;
		width: 20vw;
		height: 5vw;
	}
	.vidElement {
		min-width: 0;
		right:0;
		height: 100%;
		width: auto;
	}
	#mobileVideo { width:100px; }
}

@media (orientation:landscape) and (max-width: 592px) {
	#titleImg1 {
		width:290px;
		top:59px;
		margin-top:0;
	}
	#subtitle {
		width:290px;
		top:124px;
		margin-top:0;
	}
	#button {
		width: 118px;
		height:30px;
		top:190px;
		margin-top:0;
	}
}

@media (max-width: 1280px) and (min-aspect-ratio: 21/9), (min-width: 1281px) and (max-height: 549px) {

	#titleImg1 {
		width: 100%;
		height: 17.7%;
		top: 21.5%;
		margin-top:0;
		left: calc(15vw - 23.3vh);
	}
	#subtitle {
		width: 100%;
		height: 16.2%;
		top: 45%;
		margin-top: 0;
		left: calc(15vw - 23.3vh);
	}
	#button {
		width: 41vh;
		height: 11vh;
		top: 67%;
		margin-top:0;
		left: calc(15vw - 23.3vh);
	}
}

@media (min-width: 1281px) and (max-height: 549px) {
	#titleImg1 {
		left: 5%;
	}
	#subtitle {
		left: 5%;
	}
	#button {
		left: 5%;
	}
}

@media (min-width: 761px) and (min-aspect-ratio: 18/6) and (max-width:1280px), (min-width: 1281px) and (min-aspect-ratio: 19/5) {
	#titleImg1 {
		width: 100%;
		height: 23%;
		top: 21.5%;
		margin-top:0;
	}
	#subtitle {
		width: 100%;
		height: 21%;
		top: 50%;
		margin-top: 0;
	}
	#button {
		width: 49vh;
		height: 11.5vh;
		top: 78%;
		margin-top:0;
	}
}

@media (max-width: 592px) and (min-aspect-ratio: 12/7) {

	#titleImg1 {
		width: 100%;
		height: 17.6%;
		top: 20.0%;
		margin-top:0;
	}
	#subtitle {
		width: 100%;
		height: 16.0%;
		top: 42%;
		margin-top: 0;
	}
	#button {
		width: 41vh;
		height: 10vh;
		top: 64%;
		margin-top:0;
	}
}

@media (max-width: 440px) and (min-aspect-ratio: 26/16) {
	#titleImg1 {
		width: 100%;
		height: 19.3%;
		top: 21.5%;
		margin-top:0;
	}
	#subtitle {
		width: 100%;
		height: 17.6%;
		top: 45.5%;
		margin-top: 0;
	}
	#button {
		width: 44vh;
		height: 11vh;
		top: 70%;
		margin-top:0;
	}
}

@media (max-width: 360px) and (min-aspect-ratio: 6/5) {
	#titleImg1 {
		width: 100%;
		height: 17.5%;
		top: 19%;
		margin-top:0;
	}
	#subtitle {
		width: 100%;
		height: 15.7%;
		top: 41%;
		margin-top: 0;
	}
	#button {
		width: 39vh;
		height: 10vh;
		top: 63%;
		margin-top:0;
	}
}


/* make copy larger on mobile landscape */
@media (max-width: 760px) and (min-aspect-ratio: 5/2) {
	#titleImg1 {
		height: 24.0%;
		top: 21.5%;
	}
	#subtitle {
		height: 22%;
		top: 50.5%;
	}
	#button {
		width: 56vh;
		height: 14vh;
		top: 80%;
	}
}


/* portrait */
@media (orientation: portrait) {
	#titleImg1 { 
		top: 140px; 
		margin-top:0;
	}
	#subtitle {
		top: 266px;
		margin-top:0;
	}
	#button {
		top:398px;
		margin-top:0;
	}
}

@media (orientation: portrait) and (max-width:960px) {
	#subtitle {
		top: 274px;
		margin-top:0;
	}
	#button {
		top:396px;
		margin-top:0;
	}

}

/* mobile portrait */

@media (orientation:portrait) and (max-width: 600px)  {
	#titleImg1 { 
		width: 89%;/*51%;*/
		top: 5%;
		margin-top: 15%;
	}
	#subtitle {
		width: 89%;
		top: 5%;
		margin-top: 36%;
	}
	#button {
		width: 36vw;
		height:8.3vw;
		top: 5%;
		margin-top: 57%;
	}
	#vidcontain {
		width:100%;
	}
	.vidElement {
		bottom:3%;
		width: 100vw;
		height: 100vw;
		max-height: 100vw;
	}
	#mobileVideo { width: 100px; }
}


/* weird gray-area on mobile */
@media (orientation: portrait) and (max-width: 600px) and (min-aspect-ratio: 15/19) {
	#subtitle { display: none; }
	#button { margin-top: 36%; }
}