html, body, .main, .animate {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0;
	margin: 0;
	overflow: hidden;
}
div {
	position: absolute;
}
img {
	width: 100%;
	height: auto;
}
.bgclick {
	width: 100%;
	height: 100%;
	pointer-events: auto;
}
.learmoreCta, .VideoPoster, .close, .videoclose {
	pointer-events: auto;
}
.main {
	background: #202020;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.leftdiv {
	width: 50%;
	height: 100%;
	background-image: url('../images/carbg.jpg');
	background-size: cover;
	background-position: center;
}
.rightdiv {
	width: 50%;
	height: 100%;
	background: #102b4e;
	right: 0%;
}
.borderdiv {
	width: 95%;
	height: 95%;
	left: 50%;
	top: 49%;
	transform: translate(-50%, -50%);
}
.border {
	width: 100%;
	height: 100%;
	border: 5px solid #fff;
	z-index: 9;
	pointer-events: none;
}
.borderdiv img {
	width: 100%
}
.logo {
	width: 25%;
	left: 50%;
	transform: translateX(-50%);
	bottom: -3px;
}
.disclaimer {
	width: 8%;
	left: 1.5%;
	bottom: 2%;
}
.lefttextdiv {
	width: 50%;
	height: 100%;
}
.leftinner {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.lefttxt {
	width: 45%;
	position: absolute;
	top: -22%;
	transform: translateX(-50%);
	left: 50%;
}
.righttextdiv {
	width: 50%;
	height: 100%;
	right: 0%;
}
.righttxt {
	width: 55%;
	position: absolute;
	top: -22%;
	transform: translateX(-50%);
	left: 50%;
}
.videodiv {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.learmoreCta {
	width: 35%;
	position: absolute;
	bottom: 12%;
	transform: translateX(-50%);
	left: 50%;
}
.close,
.videoclose {
	width: 80px;
	height: 80px;
	top: 0px;
	right: 0px;
	position: absolute;
}
.close img,
.videoclose img {
	width: 25px;
	height: 28px;
	position: absolute;
	top: 25%;
    right: 40%;
}
.overlay {
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.84)
}
.thumb {
	opacity: 0;
	visibility: hidden;
}
.VideoPoster {
	pointer-events: auto;
	z-index: 9999;
}
.lefttxt {
	display: block;
}
.videoplayer div {
	line-height: 0;
}
.videoplayer .buffer_wrapper {}
.videoplayer .buffer_wrapper .buffer_indicator {}
.videoplayer .timer_wrapper {
	display: none;
}
.videoplayer .timer_wrapper .timer_duration {}
.videoplayer .timer_wrapper .timer_remaining {}
.videoplayer .timer_wrapper .timer_current {}
.videoplayer:hover .large_toggle_button {
	opacity: 1;
}
.videoplayer .large_toggle_button {
	background: url('../images/playBtn.png') no-repeat center;
	background-size: cover;
	display: block;
	width: 80px;
	height: 80px;
	top: 50%;
	left: 50%;
	margin-top: -40px;
	margin-left: -40px;
	opacity: 1;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
}
.videoplayer .large_toggle_button.playing,
.videoplayer .large_toggle_button.playing+.controls_wrapper {
	display: none;
}
.videoplayer .controls_wrapper {
	bottom: 0px;
	left: 0px;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	padding: 6px;
}
.videoplayer:hover .controls_wrapper {
	display: block !important;
}
.videoplayer .controls_wrapper>div {
	position: relative;
}
.toggle_button {
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 16px solid #FFF;
	position: relative;
	margin: 0px 8px;
}
.toggle_button.playing {
	box-sizing: border-box;
	width: 16px;
	height: 20px;
	border-top: 0 solid transparent;
	border-right: 6px solid #FFF;
	border-bottom: 0 solid transparent;
	border-left: 6px solid #FFF;
}
.videoplayer .volume_button {
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 12px solid #FFF;
	position: absolute !important;
	right: 90px;
	margin: 0px 8px;
}
.videoplayer .volume_button:before {
	transform: rotate(45deg);
	border-radius: 0 50px 0 0;
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	border-style: double;
	border-color: #fff;
	border-width: 7px 7px 0 0;
	left: 14px;
	top: -6px;
	transition: all 0.2s ease-out;
}
.videoplayer .volume_button:after {
	content: '';
	position: absolute;
	left: 0px;
	width: 6px;
	height: 8px;
	margin-top: -4px;
	background-color: #FFF;
}
.videoplayer .volume_button:hover:before {
	transform: scale(0.8) translate(-3px, 0) rotate(42deg);
}
.videoplayer .volume_button.muted:before {
	transform: scale(0.5) translate(-15px, 0) rotate(36deg);
	opacity: 0;
}
.videoplayer .progress_bar, .videoplayer .volume_bar {
	height: 10px;
	background-color: rgba(255, 255, 255, 0.5);
	margin: 5px 16px 5px 8px;
}
.videoplayer .progress_bar {
	width: 100px;
}
.videoplayer .volume_bar {
	float: right;
	width: 50px;
	height: 10px;
}
.videoplayer .progress_bar div, .videoplayer .volume_bar div {
	height: 10px;
	width: 100%;
}
.videoplayer .progress_current, .videoplayer .volume_current {
	background-color: #FFF;
}
.videoplayer .volume_current {
	transition: all .2s ease-out;
}

/* videoPlayer */
.vplayer {
    width: 100%;
    height: 100%;
}
.vplayer video {
    width: 55%;
    height: 67%;
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid white;
}
/* videoplayer */

@media only screen and (max-width: 600px) {
	.videoplayer .large_toggle_button {
		width: 50px;
		height: 50px;
		top: 58%;
		left: 53%;
	}
}
.closeAd {
	position: absolute;
	top: 0px;
	right: 0;
	padding: 10px 10px 20px 20px;
	z-index: 99999
}
@media only screen and (orientation:portrait) {
	.lefttxt {
		display: none;
	}
	.border {
		width: 96%;
		transform: translateX(-50%);
		left: 50%;
	}
	.leftdiv {
		width: 100%;
	}
	.videodiv {
		position: relative;
		top: 38%;
		transform: translateY(-50%);
	}
	.lefttextdiv {
		width: 100%;
	}
	.righttextdiv {
		width: 100%;
	}
	.logo {
		width: 53%;
	}
	.learmoreCta {
		width: 35%;
		bottom: 10%;
	}
	.close img, 
	.videoclose img {
		width: 18px;
		height: 20px;
		top: 25%;
		right: 19%;
	}
	.disclaimer {
		width: 28%;
		bottom: 16%;
		transform: translate(-50%);
		left: 50%;
	}
	.leftdiv {
		background-image: url('../images/carbgp.jpg');
	}
	.borderdiv {
		width: 100%;
		height: 97%;
	}
	.border {
		width: 96%;
		height: 100%;
		border: 5px solid #fff;
		z-index: 9;
		pointer-events: none;
	}
	.vplayer video {
		width: 85%;
		height: 36%;
	}
}
@media only screen and (max-width: 300px) and (orientation:portrait) {
	.vplayer video {
		width: 95%;
		height: 31%;
	}
}
/* Media to use when screen width is more than double the height */

@media screen and (min-aspect-ratio: 2/1) and (orientation: landscape) {
	.lefttxt {
		width: 35%;
		top: -12%;
	}
	.righttxt {
		width: 45%;
		top: -12%;
	}
	.learmoreCta {
		bottom: 7%;
	}
	.logo {
		width: 20%;
	}
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
	.close img, 
	.videoclose img {
		width: 18px;
		height: 20px;
		top: 22%;
		right: 15%;
	}
}
@media screen and (min-device-width: 846px) and (max-device-width: 846px) and (orientation: landscape),
	screen and (min-device-height: 412px) and (max-device-height: 412px) and (orientation: landscape) {
	.lefttxt, .righttxt {
		transform: scale(0.8)translateX(-60%);
		top: -19.5%;
	}
	.logo {
		transform: scale(0.8)translateX(-60%);
	}
	.learmoreCta {
		bottom: 7%;
	}
}
@media screen and (min-width: 768px) and (max-width: 768px) and (orientation: portrait),
	screen and (min-height: 1024px) and (max-height: 1024px) and (orientation: portrait) {
	.logo {
		width: 40%;
	}
	.learmoreCta {
		width: 25%;
		bottom: 7.5%;
	}
	.disclaimer {
		bottom: 12%;
		width: 22%;
	}
	.VideoPoster {
		margin-top: -3%;
	}
}
@media screen and (min-height: 768px) and (max-height: 768px) and (orientation: landscape),
	screen and (min-width: 1024px) and (max-width: 1024px)and (orientation: landscape) {
	.learmoreCta {
		bottom: 18%;
	}
	.lefttxt, .righttxt {
		top: -35%;
	}
}
@media screen and (max-width: 530px) and (orientation: landscape) {
	.vplayer video {
		width: 67%;
		height: 50%;
	}
}
@media screen and (max-width: 500px) and (orientation: landscape) {
	.vplayer video {
		width: 60%;
		height: 60%;
	}
}