@charset "utf-8";
/* CSS Document */
body.home .masthead.solid {
	top:200px
}
.home-intro {
	height:100%;
	color:#fff;
	width:100%
}
.home-intro .boxes-wrap {
	position:absolute;
	max-width:72%;
	max-height:72%;
	width:100%;
	height:100%;
	top:45%;
	left:50%;
	transform:translateX(-50%) translateY(-55%)
}
.home-intro .anim-wrap {
	text-align:left;
	display:inline;
	height:100%
}
.home-intro .spacer-div {
	display:table-cell;
	vertical-align:middle
}
.home-intro .spacer {
	max-height:100%;
	max-width:100%;
	width:auto;
	display:inline;
	border:1px solid #90595a
}
.home-intro span {
	padding:20px;
	display:block;
	z-index:10
}
.home-intro .anim-box {
	width:100%;
	height:100%;
	background:#eaebec;
	left:0;
	top:0;
	bottom:0;
	right:0;
	animation-name:mainbox;
	transform-origin:left;
	z-index:10;
	position:absolute;
	overflow:hidden;
	transform:translateX(0)
}
.home-intro .boxes-wrap>div {
	overflow:hidden;
	background-size:cover;
	background-repeat:no-repeat
}
.home-intro .box-img {
	background-size:cover;
	background-repeat:no-repeat;
	background-position:50% 50%;
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:0;
	animation-name:fadein;
	animation-delay:1s;
animation-duration:.8s;
	trnsition-timing-function:cubic-bezier(0, 0, .15, 1);
	animation-fill-mode:forwards
}
.home-intro .box-left-bottom .box-img:after, .home-intro .box-left-top .box-img:after, .home-intro .box-right-bottom .box-img:after {
	content:'';
	width:100%;
	height:100%;
	position:absolute;
	display:block;
	background:rgba(255, 255, 255, .2);
	left:0;
	top:0
}
.home-intro .main-box {
	font-size:4.7vw;
	position:absolute;
	width:73%;
	height:100%;
	left:25%;
	top:0;
	animation-name:fadein;
	animation-delay:1s;
animation-duration:.9s;
	animation-fill-mode:forwards;
	transition-timing-function:cubic-bezier(0, 0, .15, 1);
	opacity:0
}
.home-intro .main-box .anim-box {
	animation-delay:1s;
animation-duration:.9s;
	animation-fill-mode:forwards;
	transition-timing-function:cubic-bezier(0, 0, .15, 1)
}
.home-intro .main-box span {
	line-height:85%;
	animation-name:fadein;
animation-duration:.8s;
	animation-delay:2s;
	animation-fill-mode:backwards;
	padding-top:55px;
	z-index:999;
	position:absolute
}

.home-intro .main-box span.caption1 {
margin-top:10%;
font-size:1.8vw;
left:5%;
}

.home-intro .main-box span.caption2 {
margin-top:15%;
font-size:1.7vw;
left:5%;
text-shadow: 1px 1px 2px #000000;
}


.home-intro .box-left-top {
	position:absolute;
	width:25%;
	height:42%;
	top:8%;
	left:0;
	transform-origin:left;
	animation-name:fadeinleft;
	animation-fill-mode:forwards;
	animation-delay:1s;
animation-duration:.8s;
	transition-timing-function:cubic-bezier(0, 0, .15, 1);
	opacity:0
}
.home-intro .box-left-top .anim-box {
	animation-fill-mode:forwards;
	animation-delay:1s;
animation-duration:.8s;
	transition-timing-function:cubic-bezier(0, 0, .15, 1)
}
.home-intro .box-left-bottom {
	position:absolute;
	width:20%;
	height:40%;
	top:50%;
	left:5%;
	transform-origin:left;
	animation-name:fadeinleft;
	animation-fill-mode:forwards;
	animation-delay:1s;
animation-duration:.8s;
	transition-timing-function:cubic-bezier(0, 0, .15, 1);
	opacity:0
}
.home-intro .box-left-bottom .anim-box {
	animation-fill-mode:forwards;
	animation-delay:1s;
animation-duration:.8s;
	transition-timing-function:cubic-bezier(0, 0, .15, 1)
}

.home-intro .text-box {
	font-size:2vw;
	position:absolute;
	width:100%;
	height:100%;
	left:0%;
	top:0%;
	background:rgba(0, 51, 0, 0.6);
	transform-origin:left;
	animation-name:textbox1;
	animation-fill-mode:forwards;
	animation-delay:1s;
animation-duration:.8s;
	transition-timing-function:cubic-bezier(0, 0, .15, 1);
	opacity:0
}
.home-intro .text-box span {
	animation-name:fadein;
animation-duration:.7s;
	animation-delay:3s;
	animation-fill-mode:backwards;
text-shadow: 1px 1px 2px #000000;
}


.home-intro .text-box-1 {
	font-size:2.7vw;
	position:absolute;
	width:25%;
	height:50%;
	left:25%;
	top:50%;
	background:rgba(0, 38, 38, 0.7);
	transform-origin:left;
	animation-name:textbox1;
	animation-fill-mode:forwards;
	animation-delay:1s;
animation-duration:.8s;
	transition-timing-function:cubic-bezier(0, 0, .15, 1);
	opacity:0
}
.home-intro .text-box-1 span {
	animation-name:fadein;
animation-duration:.7s;
	animation-delay:3s;
	animation-fill-mode:backwards;
text-shadow: 1px 1px 2px #000000;
}
.home-intro .text-box-2 {
	font-size:1.5vw;
	position:absolute;
	width:25%;
	height:50%;
	left:50%;
	top:69.666666666%;
	background:#FFCC00;
	transform-origin:left;
	animation-name:textbox2;
	animation-fill-mode:forwards;
	animation-delay:1s;
animation-duration:.8s;
	transition-timing-function:cubic-bezier(0, 0, .15, 1);
	opacity:0
}
.home-intro .text-box-2 span {
	animation-name:fadein;
animation-duration:.9s;
	animation-delay:3.8s;
	animation-fill-mode:backwards;
	padding-top:60px;
	
}
.home-intro .text-box-2 .chev-down {
	position:absolute;
	right: 20%;
	bottom:20px;
	width:49px;
	height:auto;
	cursor:pointer;
	animation-name:chevfade;
animation-duration:.5s;
	animation-delay:4.2s;
	animation-fill-mode:both
}
.home-intro .box-right-mid {
	position:absolute;
	width:25%;
	height:33.3333333%;
	top:33.3333333%;
	left:75%;
	background:rgba(0, 115, 207, .6);
	transform-origin:left;
	animation-name:boxrightmid;
	animation-fill-mode:forwards;
	opacity:0;
	animation-delay:1s;
animation-duration:.8s;
	transition-timing-function:cubic-bezier(0, 0, .15, 1);
	background-size:cover;
	background-repeat:no-repeat
}
.home-intro .box-right-bottom {
	position:absolute;
	width:23%;
	height:33.3333333%;
	bottom:0;
	left:75%;
	background:#e9acad;
	transform-origin:left;
	animation-name:fadein;
	animation-fill-mode:forwards;
	opacity:0;
	animation-delay:1s;
animation-duration:.8s;
	transition-timing-function:cubic-bezier(0, 0, .15, 1)
}
.home-intro .box-right-bottom .anim-box {
	animation-fill-mode:forwards;
	animation-delay:1s;
animation-duration:.8s;
	transition-timing-function:cubic-bezier(0, 0, .15, 1)
}
@media (max-width:1550px) {
.home-intro {
font-size:.9em
}
}
@media (max-width:1450px) {
.home-intro {
font-size:.86em
}
}
@media (max-width:1200px) {
.home-intro {
font-size:.76em
}
.home-intro span {
padding:20px 15px
}
}
@media (max-width:1100px) {
.home-intro {
font-size:.7em
}
}
@media (max-width:1000px) {
.home-intro {
font-size:.63em
}
}
@media (max-width:1100px) and (orientation:portrait) {
.home-intro .boxes-wrap {
max-height:50%;
max-width:90%
}
}
@media (max-width:1150px) and (orientation:landscape) {
.home-intro .boxes-wrap {
max-height:55%;
max-width:90%
}
.home-intro .text-box-2 span{
padding-top:10px !important;
}
}
@media (max-width:900px) and (orientation:landscape) {
.home-intro {
font-size:.59em
}
}
@media (max-width:800px) {
.home-intro {
font-size:.52em
}
}
@media (max-width:750px) and (orientation:portrait) {
.home-intro .boxes-wrap {
max-height:55%;
max-width:90%
}
}
@media (max-width:650px) {
.home-intro {
position:absolute;
padding:30px;
}

.home-intro .main-box, .home-intro .text-box-1, .home-intro .text-box-2, .home-intro .text-box  {
height:20%
}

.home-intro .main-box span.caption1 {
    margin-top: 10%;
    font-size: 3vw;
    left: 15%;
}
.home-intro .main-box span.caption2 {
margin-top:15%;
font-size:3vw;
left:15%;
text-shadow: 1px 1px 2px #000000;
}


.home-intro .box-left-bottom, .home-intro .box-left-top, .home-intro .box-right-bottom {
display:none
}
.home-intro .main-box, {
font-size:5.5vw;
}

.home-intro .text-box {
font-size:4vw;
}

.home-intro .text-box-2 {
font-size:3.5vw;
}

.home-intro .text-box-1{
font-size:4vw;
}

.home-intro .main-box span, .home-intro .text-box-1 span, .home-intro .text-box-2 span, .home-intro .text-box span {
display:block;
width:95%;
padding:20px;
line-height:1.2;
}
.home-intro .boxes-wrap {
top:5%;
left:auto;
transform:none;
width:95%;
max-width:none;
max-height:none
}
.home-intro .main-box {
left:0;
width:95%;
height:100%;
opacity:1;
position:relative
}
.home-intro .text-box-1 {
height:20%;
top:33.333333%;
width:95%;
left:0;
top:20%;
font-size:5 vw;
}
.home-intro .text-box-2 {
height:40%;
bottom:0;
width:95%;
left:0;
top:60%;
}

.home-intro .text-box {
height:20%;
bottom:0;
width:95%;
left:0
}
.home-intro .box-right-mid{
left:0;
top:40%;
width:95%;
height:20%;
}

.home-intro .box-right-mid .text-box{
left: 0;
top: 0;
width: 100%;
height: 100%;
}
}

@media (max-width:450px) {
.home-intro {
padding:20px
}

.home-intro .main-box, .home-intro .text-box-1, .home-intro .text-box-2, .home-intro .text-box  {
font-size:7vw !important;
padding-top:6%;
font-weight:normal !important;
}


}


@keyframes mainbox {
from {
transform:translateX(0)
}
to {
	transform:translateX(100%)
}
}


@keyframes fadein {
from {
opacity:0
}
to {
	opacity:1
}
}


@keyframes fadeinleft {
from {
opacity:0
}
to {
	opacity:1
}
}


@keyframes chevfade {
from {
opacity:0;
transform:translateY(-60px)
}
to {
	opacity:.4;
	transform:translateY(0)
}
}


@keyframes textbox1 {
from {
opacity:0;
transform:scaleX(0)
}
to {
	opacity:1;
	transform:scaleX(100%)
}
}


@keyframes textbox2 {
from {
opacity:0;
transform:scaleX(0)
}
to {
	transform:scaleX(100%);
	opacity:1
}
}


@keyframes boxlefttop {
from {
opacity:0;
transform:scaleX(0)
}
to {
	opacity:1;
	transform:scaleX(100%)
}
}


@keyframes boxleftbottom {
from {
opacity:0;
transform:scaleX(0)
}
to {
	opacity:1;
	transform:scaleX(100%)
}
}


@keyframes boxrightmid {
from {
opacity:0;
transform:scaleX(0)
}
to {
	opacity:1;
	transform:scaleX(100%)
}
}


