.intro_forest {
	width: 100vw;
	position: fixed;
	overflow: hidden;
	z-index: 1;
	animation-name: fadein_screen_01;
	animation-delay: 2.3s;
	animation-duration: 8s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-fill-mode: both;
	opacity: 1;
	bottom: 0;
	background-image: url(https://hotelduchat.com/images/intro_1920x1080.png);
	background-size: cover;
	height: 50vw;
	left: 0;
	right: 0
}
.intro_forest img {
	width: 100%
}
.intro_main {
	width: -webkit-fill-available;
	max-width: 1100px;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	animation-name: fadein_screen_02;
	animation-delay: 2.7s;
	animation-duration: 7.5s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-fill-mode: both;
	transform: scale(.8);
	opacity: 0;
	margin-top: 10vw;
	background-size: contain
}
.intro_main .gif_img {
	margin: 0 auto
}
.intro_main_glass {
	width: 100%;
	max-width: 1100px;
	height: 100%;
	min-height: 500px;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	animation-name: fadein_screen_03;
	animation-delay: 2.4s;
	animation-duration: 6.7s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-fill-mode: both;
	background-size: contain;
	transform: scale(1);
	margin-top: 600px;
	opacity: 1;
	overflow: hidden
}
.intro_main_logo {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	animation-name: fadein_screen_04;
	animation-delay: 9.5s;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-fill-mode: both;
	background-size: contain;
	transform: scale(1);
	margin-top: 5vw
}
.intro_main img, .intro_main_glass img, .intro_main_logo img {
	width: 50%;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0
}
.skip_button {
	width: 120px;
	height: 30px;
	border: 1px solid #dec9c1;
	border-radius: 25px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	background: #fff;
	color: #856c61;
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10%;
	cursor: pointer;
	z-index: 1000
}
.skip_button:hover {
	border: .1em;
	background: #5f483d;
	color: #fff
}
.loading_logo {
	position: fixed;
	left: calc(50% - 28px);
	top: 45%;
	width: 57px;
	height: 57px;
	background: url(https://hotelduchat.com/images/intro-star-wh.png) no-repeat center;
	background-size: contain;
	background-repeat: no-repeat;
	animation-name: loading_logo;
	animation-delay: 0s;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-timing-function: ease-in-out;
	animation-direction: normal;
	animation-fill-mode: both
}
@media only screen and (max-width :1024px) {
header {
	padding: 0 0
}
.intro_forest {
	background-image: url(https://hotelduchat.com/images/intro_mobile_1080x1920.png);
	height: auto;
	top: 0
}
.intro_main {
	top: 5vw
}
.intro_main_logo {
	width: 80%;
	top: 0!important
}
.intro_main_glass {
	top: 110vw
}
.intro_main_glass img, .intro_main_logo img {
	width: 100%
}
.intro_main .gif_img {
	width: -webkit-fill-available;
	height: auto
}
.skip_button {
	position: fixed;
	bottom: 5%
}
}
@media only screen and (max-width :576px) {
.intro_main {
	top: 50vw;
	animation-name: fadein_screen_02_mobile
}
.intro_main_logo {
	width: 115%;
	margin-left: -8%;
	margin-top: 15%
}
.intro_main_glass {
	animation-name: fadein_screen_03_mobile;
	top: 100vw;
	position: absolute
}
}
@keyframes loading_logo {
0% {
transform:rotate(0);
opacity:1
}
30% {
transform:rotate(180deg);
opacity:1
}
79% {
transform:rotate(180deg);
opacity:1
}
80% {
opacity:0;
display:none
}
100% {
opacity:0;
display:none
}
}
@keyframes fadein_screen_01 {
0% {
transform:scale(1);
opacity:0
}
10% {
transform:scale(1);
opacity:1
}
99.9% {
transform:scale(2.5);
opacity:0
}
100% {
transform:scale(2.5);
opacity:1
}
}
@keyframes fadein_screen_02 {
0% {
transform:scale(.8);
top:0;
opacity:0
}
10% {
transform:scale(.8);
top:0;
opacity:1
}
85% {
transform:scale(1);
opacity:1;
top:-3vw
}
90% {
transform:scale(1);
opacity:1;
top:-3vw
}
100% {
transform:scale(1);
opacity:0;
top:-3vw
}
}
@keyframes fadein_screen_02_mobile {
0% {
transform:scale(.8);
top:20vw;
left:-3vw;
opacity:0
}
10% {
transform:scale(.8);
top:20vw;
left:-3vw;
opacity:1
}
85% {
transform:scale(1.1);
opacity:1;
top:-5vw;
left:0
}
90% {
transform:scale(1.1);
opacity:1;
top:-5vw;
left:0
}
100% {
transform:scale(1.1);
opacity:0;
top:-5vw;
left:0
}
}
@keyframes fadein_screen_03 {
0% {
transform:scale(1);
opacity:0;
margin-top:650px
}
15% {
transform:scale(1);
opacity:1;
margin-top:650px
}
78% {
transform:scale(1.2);
opacity:1;
margin-top:750px
}
100% {
transform:scale(1.2);
opacity:0;
margin-top:750px
}
}
@keyframes fadein_screen_03_mobile {
0% {
transform:scale(.8);
opacity:0;
margin-top:5vw
}
15% {
transform:scale(.8);
opacity:1;
margin-top:5vw
}
78% {
transform:scale(1.2);
opacity:1;
margin-top:45vw
}
100% {
transform:scale(1.2);
opacity:0;
margin-top:45vw
}
}
@keyframes fadein_screen_04 {
0% {
opacity:0
}
30% {
opacity:1
}
}