/* CSS Document */
.start-box { position: fixed; top:0; width: 100%; height: 100vh; background: #fff; z-index: 102; display: flex; flex-direction:column; flex-wrap: nowrap; justify-content: center; align-items: center;
animation-name: startend; animation-duration: 2s; animation-delay: 2s; animation-fill-mode: both; animation-timing-function: ease-out;}
.start-bg { position: fixed; top:0; width: 150%; height: 100vh; z-index: 103; background: #9e2024; animation-name:startbg; animation-duration: 2s; animation-fill-mode: both; animation-timing-function: ease-in-out;}
.start-logo-0-box { position: fixed; top:0; width: 100%; height: 100vh; z-index: 104; display: flex; flex-direction:column; flex-wrap: nowrap; justify-content: center; align-items: center;
animation-name: startlogobox; animation-duration: 1.5s; animation-delay: 0s; animation-fill-mode: both; animation-timing-function: ease;}
.start-logo-0-box > img { width: 200px;}
.start-box > div { opacity: 0; position: relative; line-height: 0;}
.start-box > div:nth-of-type(1) {animation-name: startlogo; animation-duration: 1.5s; animation-delay: 2s; animation-fill-mode: both; animation-timing-function: ease-in;}
.start-box > div:nth-of-type(1) img {width: 200px;}
.start-box > div:nth-of-type(2) {animation-name: startname; animation-duration: 1.5s; animation-delay: 2s; animation-fill-mode: both; animation-timing-function: ease-in;}
.start-box > div:nth-of-type(2) img {width: 150px;}
.start-logo { margin-bottom: 15px;}

.car-box { position: absolute; width: 100%; top:calc(50% - 52px); left: 0;}
.car-animate { position: absolute; z-index: 100; animation-name:car; animation-delay: 3.5s; animation-iteration-count: infinite; animation-duration: 15s; animation-timing-function: ease-in-out; right: -300px;}
.car-animate img { width:300px !important; height: auto !important; max-width: inherit !important;}

@keyframes startbg {
  from {
    left: -150%;
  }
  to {
    left: 100%;
  }
}
@keyframes startlogobox {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0; visibility: hidden;
  }
}
@keyframes startlogo {
  from {
	  opacity: 0;
	  top: -30px;
  }
  to {
	  opacity: 1;
	  top: 0;
  }
}
@keyframes startname {
  from {
	  opacity: 0;
	  bottom: -50px;
  }
  to {
	  opacity: 1;
	  bottom: 0;
  }
}
@keyframes startend {
  from {
	  opacity: 1;
  }
  to {
	  opacity: 0; visibility: hidden;
  }
}

@keyframes car {
  from {
	  right: -300px;
  }
  to {
	  right:120%;
  }
}


@media only screen and (max-width: 1320px) {
	.start-logo-0-box { animation-duration: 1s;}
	.car-animate { animation-duration: 12s;}
}

@media only screen and (max-width: 768px) {
	.car-animate { animation-duration: 9s;}
	
}
@media only screen and (max-width: 640px) {
	.car-animate { animation-duration: 9s;}
	.car-animate img { width: 200px !important;}
	.car-box { top:calc(50% - 40px);}

}
@media only screen and (max-width: 570px) {
	
}

@media only screen and (max-width: 414px) {
	.car-animate { animation-duration: 7s;}
	
}

@media only screen and (max-width: 320px) {

}