/* CSS Document */
/* CSS Document */
.main{ position: relative;}
.loading {
    background: rgba(255, 255, 255, 0);
    z-index: 999;
    position:absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: -5%;
}
.loading img{ width: 100%; height: auto;}

.loading,
.loading:before{
	border-radius: 100%;
	animation-duration: 4000ms;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
}

.loading:before {
	content: '';
	position:absolute;
    margin: auto;
    top: -5%;
    right: 0;
    bottom: 0;
    left: -5%;
	width:inherit; 
    height:inherit; 
	background: rgba(255, 255, 255, 0);
	animation-name: ring;
}

@keyframes ring {
	0% {	
        box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 1);
    } 100% {
		box-shadow: inset 0 0 0 0px rgba(255, 255, 255, 1);
	}
}

@keyframes ringSmall {
	0% {	
        box-shadow: inset 0 0 0 750px rgba(255, 255, 255, 1);
    } 100% {
		box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 1);
	}
}

.slide_spacer{ height:10%;}
.txt_slide_spacer{ height:12%;}

/*span#typed {
    color: #000 !important;
    transition: all 0.7s
}*/
#typed span {
    font-size: 3.0rem;
	font-weight:700;
	text-align: center;
    letter-spacing: 1.1rem;
    display: block;
    line-height: 60px;
    transition: all 0.7s;
	height: fit-content;

}
span#typed.one span{
    letter-spacing: 3.0rem;
}
/*span .word1{padding-right: 1.5vw;}*/
span#typed.one span.char6 {
    letter-spacing: 0px !important;
}
span#typed.two span.char5 {
    letter-spacing: 0px !important;
}
.rotating-text{
    z-index: 99;
	width:100%;
	height: 220px;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/*colorchange*/
@-webkit-keyframes colorchange {
    0% {
        color: #000;
    }
    100% {
        color: #fff;
    }
}
@keyframes colorchange {
    0% {
        color: #000;
    }
    100% {
        color: #fff;
    }
}



/* preloader */

#preloader {
/*	display: none;*/
    z-index: 999;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #fff;
}

.ch-item {
    position: relative;
    height: 100%;
    overflow: hidden;
}

.ch-item img {
    width: 100%;
    height: auto;
}

.ch-grid {
    width: 100%;
    height: 85vh;
    margin: 0px auto;
    position: relative;
}

.ch-info {
    /*position: absolute;*/
    z-index: 0;
    width: 100%;
    height: 95%;
    /*top: 90px;*/
    left: 0;
    overflow: visible;
}

.item {
    background: #fff;
    position: absolute;
    z-index: 99;
    transition: all 3s ease-in-out;
}

.ch-item1,
.ch-item2 {
    width: 100%;
    height: 0%;
}

.ch-item1 {
    top: 0px;
}

.ch-item2 {
    bottom: 0px;
}

.ch-item3,
.ch-item4 {
    height: 100%;
    width: 0%;
}

.ch-item3 {
    left: 0px;
}

.ch-item4 {
    right: 0px;
}

html,body{height: 100vh; width: 100vw;overflow: hidden; color:black; margin:0; padding:0;  }
.container {
	z-index:0; 
	background-color: #fff;
   	margin-right: auto;
   	margin-left: auto;
   	padding:0 5vw;
	height:100vh;
}	   

.tlt {
	position:fixed;
	left: 50%;
    transform: translateX(-50%);
}
.tlt.one{top: 30%}
.tlt.two{top: 45%}

.enter{
   margin:auto; 
   width:fit-content;
   z-index:99; 
   position:relative;
}
	
@keyframes MoveDel {
  0% {
	top: 30%;
	left: 50%;

  }
  100% {
	position:fixed;
	left: 50vw;
	bottom:1vh;	  
	transform: translate(-135%,55vh);
	
  }
}

@keyframes Shrink {
  100% {
	letter-spacing:1rem;	
  }
}

@keyframes MoveArt {
  0% {
	top: 45%;
	left: 50%;
  }
  100% {
	position:fixed;
	left: 50vw;
	bottom:1vh;	  
	transform: translate(-15%,40.02vh);	
  }
}
@media (max-width:500px) {

	#typed span { font-size: 2.0rem;}
}
@media (max-width:500px) {
	span#typed.one span{  letter-spacing: 1.2rem;}
	#typed span { font-size: 1.2rem;}
	.slide_spacer{ height:10%;}
	.txt_slide_spacer{ height:10%;}
	.slider { height: 60vh;}
	.tlt.one{top: 15%}
	.tlt.two{top: 30%}
	.slider-content img {
  		min-width: 450px;
		min-height:450px;
	}
	.loading:before {
		animation-name: ringSmall;
		border-radius: 0;
		top:-20%;
		left:-20%;
	}
}