/****************************
 * Container
 ****************************/
body, html { margin: 0 0; padding: 0; width: 100%; height: 100%;}
img { width: 100%; max-width: 100%;}
.container_dc { overflow: hidden; width: 300px; height: 600px; position: relative; /*background-image: url(img/bg.jpg); background-size: cover;*/}

#overlay {
	position: absolute; left: 0; top: 0; right: 0; bottom: 0;
	width: 100%; height: 100%; z-index: 200; opacity: 0;
}
.container_dc.mouseover #overlay {
	opacity: 1;
}

.upper_wrapper {
	overflow: hidden;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 10;
}

.upper_wrapper:before{
	content:''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%;
	opacity: 0; z-index: -1;
	-webkit-transition: all 2400ms ease;
	-moz-transition: all 2400ms ease;
	-ms-transition: all 2400ms ease;
	-o-transition: all 2400ms ease;
	transition: all 2400ms ease;
	opacity: 0;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e5e3de+0,c6bea6+100 */
	background: rgb(229,227,222);
	background: -moz-radial-gradient(center, ellipse cover,  rgba(229,227,222,1) 0%, rgba(198,190,166,1) 100%);
	background: -webkit-radial-gradient(center, ellipse cover,  rgba(229,227,222,1) 0%,rgba(198,190,166,1) 100%);
	background: radial-gradient(ellipse at center,  rgba(229,227,222,1) 0%,rgba(198,190,166,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e3de', endColorstr='#c6bea6',GradientType=1 );
}
.upper_wrapper:after {
	content:''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%;
	opacity: 0; z-index: 1;
	/* background: url(img/bg.jpg);*/
	background-size: cover;
	-webkit-transition: opacity 2400ms ease;
	-moz-transition: opacity 2400ms ease;
	-ms-transition: opacity 2400ms ease;
	-o-transition: opacity 2400ms ease;
	transition: opacity 2400ms ease;
}

.upper_wrapper.anim_in_after:after,
.upper_wrapper.anim_in_before:before {
	opacity: 1;
}
/*.upper_wrapper.anim_out_after:after,
.upper_wrapper.anim_out_before:before {
	opacity: 0;
}*/

/****************************
 * Animations
 ****************************/
.animated {
	-webkit-transition: all 600ms ease;
	-moz-transition: all 600ms ease;
	-ms-transition: all 600ms ease;
	-o-transition: all 600ms ease;
	transition: all 600ms ease;
}
.animated_large {
	-webkit-transition: all 1000ms ease;
	-moz-transition: all 1000ms ease;
	-ms-transition: all 1000ms ease;
	-o-transition: all 1000ms ease;
	transition: all 1000ms ease;
}
.animated_extra_large {
	-webkit-transition: all 1200ms ease;
	-moz-transition: all 1200ms ease;
	-ms-transition: all 1200ms ease;
	-o-transition: all 1200ms ease;
	transition: all 1200ms ease;
}
.eased {
	-webkit-transition: all 400ms ease-in;
	-moz-transition: all 400ms ease-in;
	-ms-transition: all 400ms ease-in;
	-o-transition: all 400ms ease-in;
	transition: all 400ms ease-in;
}
.clicktag { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 900; }

/****************************
 * Info Text
 ****************************/
.info_text {
	z-index: 50; position: absolute; width: 100%; height: 33.333%;
	opacity: 0; left: 100%; right: 0; top: 58%;
}
.info_text.anim_in { opacity: 1; left: 0; }
.info_text.anim_out { opacity: 0; left:-100%;}

.info_text.anim_end { opacity: 1 !important; left: 0 !important;}

/****************************
 * Icons
 ****************************/
.icon {
	z-index: 50; width: 100%; height: 66.666%; opacity: 0;
	left: 100%; top: 50%; position: absolute;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.icon.anim_in {opacity: 1; left: 0;}
.icon.anim_out {opacity: 0; left: -100%;}

.icon.clear {
	opacity: 0 !important; left: -100% !important;
}

/****************************
 * Logo Footer
 ****************************/
#logo {position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 25%;}
#close-button { position: absolute; top: 2%; right: 3.5%; width: 4%; height: 2%; cursor: pointer; text-align: center; z-index: 10000; background: url("close_wh.png") no-repeat top right; background-size: contain;}

/****************************
 * End Animation
 ****************************/
.info_text.clear {opacity: 1; left: 0;}
#info_text_01.clear {opacity: 0;}
.car.clear {opacity: 1;}

:focus {outline:none;}
::-moz-focus-inner {border:0;}