/* MUSE GAME GLOBAL STYLE */
body { background:#fec19c; color:#fff; font-family: 'Montserrat', sans-serif; font-weight:500; }
body {
    background: #c1c4e7;
    background-image: url(../images/bg.jpg);
    background-size: 1650px;
    background-position: left top;
    background-repeat: no-repeat;
}
body main, body footer { z-index:2; }
body > div.main-div  { min-height:100vh; overflow:hidden; position: relative;}
body .container { position: relative;}


/* header */
.header { display:block; max-width:100%; margin:0px auto; padding:30px 0; }
.header img { display:block; max-width:80%; margin:0px auto; }
.header .muse-logo { width:245px; margin-bottom: 10px; }
.header .muse-game-logo { width:245px; margin-bottom: 30px; }
.header .game-logo { width:475px; }
strong { font-weight:800; }

.title, .wrap-title { font-weight:bold; text-align:center; font-size:24px; display:flex; flex-wrap:wrap; line-height: 1.3; margin:0 0 25px; flex-direction: column; align-items: center; }
.title span, .wrap-title span { font-weight:800; display:block; background:#686dae; padding:2Px 10px; color:#ffffff; }
.title span:first-child, .wrap-title span:first-child { padding-top:5px; }
.title span:last-child, .wrap-title span:last-child { padding-bottom:5px; }


.form-label { font-weight:bold; }
.form-control, .form-select {
	border:1px solid #ddd;
	padding:15px;
}
.form-check-input:checked {
	background-color: #ff2d6f;
	border-color: #ff2d6f;
}
.btn-primary {
	border-radius:100px;
	border:0;
	font-size:20px;
	font-weight: 800;
	padding:20px 35px;
	background:#686dae;
	color: #ffffff;
	transition: all ease-out 0.3s;
	text-transform: uppercase;
	text-decoration: none;
	display:inline-block;
	position: relative;
	overflow: hidden;
	outline:0;
	box-shadow: 0 0 0 10px rgb(255 255 255 / 16%);
}
.btn-primary.btn-small { font-size:16px; padding:15px 35px; }
.btn-primary:hover, .btn-primary:active {
	background:#686dae;
	background-size: 300%;
	box-shadow: 0 0 0 0 rgb(255 255 255 / 16%);
}
.btn-primary > span { z-index:2; display:block; position: relative; }
.btn-primary:after { transition:all ease-in 0.3s; width:100px; height:100px; background:#3b3678; border-radius: 100px; display:block; content:''; position: absolute; left:calc(50% - 50px); top:calc(50% - 50px); transform:scale(0);   }
.btn-primary:hover:after {transform:scale(3);   }
.btn-check:focus+.btn-primary, .btn-primary:focus {
	color: #fff;
	background-color: #686dae;
	border-color: #686dae;
	box-shadow: 0 0 0 0.25rem rgb(234 54 111 / 50%);
}
a { color:#fff; text-decoration: underline;}
a:hover { color:#fff; text-decoration: none; }



.wrapper { background:#fff; color:#222; padding:30px; margin-bottom:80px; border-radius:20px;  opacity:0; animation:appearFromBottom 0.6s 0.2s forwards; }
.wrapper a:not(.btn-primary) { color:#686dae; text-decoration: underline;}
.wrapper a:not(.btn-primary):hover { color:#686dae; text-decoration: none; }
.wrapper hr { margin:30px 0; }
.wrapper .wrap-title { font-size:20px; margin:-50px 0 30px; color:#222; font-weight:800;  opacity:0; animation:appearFromBottom 0.6s 0.6s forwards; }
.wrapper .title { font-size:20px; margin:0 0 20px; color:#686dae; font-weight:800; }
.wrapper .small-title { font-size:16px; margin:0 0 10px; color:#222; font-weight:800; }

.back-link { text-decoration: none; font-weight: bold; text-decoration: underline; display:block; margin:0 0 40px; }

.btn-secondary { border:2px solid #fff; background:none; color:#fff; padding:20px; border-radius:100px; text-transform: uppercase; font-weight: bold;    display: flex; align-items: center; }
.btn-secondary svg { margin-left:10px; }
.btn-secondary:hover { background:#d68e73; border:2px solid #d68e73; }

/* footer */
footer { font-size:14px; padding-bottom: 50px; padding-top:100px; }
footer nav { z-index:2; position: relative;}
footer nav ul { padding:0; list-style:none; display:flex; align-items: center; justify-content: center;}
footer nav ul li { margin:10px; }
footer nav ul a, footer nav ul span { opacity:0.8;text-decoration:none;  }
footer nav ul a:hover { opacity:1; }
footer:after { position:absolute; bottom:0; pointer-events: none; left:0; content:''; width:100%; height:100px; background:linear-gradient(to top,#686dae, rgba(212,133,93,0)); }
@media (max-width:992px) {
	.title { font-size:6vw; }
	footer nav ul { flex-direction: column;}
}



/* HOME */
#home { text-align: center; padding-top:50px; }
#home .title { position:relative; }
#home .home-logo {
    width: 500px;
    margin-bottom: 50px;
}
#home .title img:first-child { width:371px; max-width: 90%; opacity:0; animation:appearFromBottom 1s 0.2s forwards; }
#home .title img:last-child { width:307px; max-width: 90%; opacity:0; animation:appearFromBottom 1s 0.4s forwards; }
#home .btn { opacity:0;  animation:appearFromBottom 0.8s 1s forwards; }
#home-objects { position:absolute; width:1140px; max-width: 100%; margin:0 auto; padding-top:150%; top:150px; left: 50%; transform: translateX(-50%); }
#home-objects > div { display:block; position:absolute; top:0; animation:appear 2s forwards;  }
#home-objects > div > img { width:100%; animation:wavy 5s infinite; }
#home-objects > div:nth-child(1) { width:12.4%; left:23%; top:5% }
#home-objects > div:nth-child(2) { width:20.5%; right:18%; animation:appear4 2s forwards; }
#home-objects > div:nth-child(3) { width:21%; left:0; top:0; }
#home-objects > div:nth-child(4) { width:8.97%; left:10%; top:10%; }
#home-objects > div:nth-child(5) { width:7.31%; left:20%; top:20%; }
#home-objects > div:nth-child(6) { width:17.8%; right:0; animation:appear4 2s forwards; }
#home-objects > div:nth-child(7) { width:8.8%; right:10%; top:10%; animation:appear4 2s forwards;}
#home-objects > div:nth-child(8) { width:5.7%; right:20%; top:20%; animation:appear4 2s forwards;}
#home-objects > div:nth-child(1) > img { animation:wavyL 5s -2s infinite; }
#home-objects > div:nth-child(2) > img { animation:wavyR 5s -3s infinite; }
#home-objects > div:nth-child(3) > img { animation:wavyL 5s -1s infinite; }
#home-objects > div:nth-child(4) > img { animation:wavyL 5s -3s infinite; }
#home-objects > div:nth-child(5) > img { animation:wavyL 5s -2s infinite; }
#home-objects > div:nth-child(6) > img { animation:wavyR 5s -2s infinite; }
#home-objects > div:nth-child(7) > img { animation:wavyR 5s -3s infinite; }
#home-objects > div:nth-child(8) > img { animation:wavyR 5s -1s infinite; }

@keyframes wavyR {
	0% { transform:translateY(-10px); }
	50% { transform:translateY(10px) translateX(10px); }
	100% { transform:translateY(-10px); }
}
@keyframes wavyL {
	0% { transform:translateY(-10px); }
	50% { transform:translateY(10px) translateX(-10px); }
	100% { transform:translateY(-10px); }
}
@keyframes appearSlow {
	0% { opacity:0; }
	100% { opacity:1; }
}
@keyframes appearFromBottom {
	0% { opacity:0; transform:translateY(100%)}
	100% { opacity:1; transform:translateY(0)}
}
@keyframes appearFromRight {
	0% { opacity:1; transform:translateX(100%)}
	100% { opacity:1;transform:translateX(0); }
}
@keyframes appear {
	0% { opacity:0; top:0; left:50%; transform:scale(0)}
	100% { opacity:1; transform:scale(1)}
}
@keyframes appear4 {
	0% { opacity:0; top:0; right:50%; transform:scale(0)}
	100% { opacity:1; transform:scale(1)}
}
@media (max-width:768px) {
	#home { background-size:270%; padding-top:70vw; }
	#home-objects { top: 130px; }
}

/* candidate */
#list { margin-bottom:120px; overflow: hidden; padding-top:20px; margin-top:-20px;}
#list .col-md-3  { margin-bottom:50px; }
#list .col-md-3:nth-child(1) { transform:rotate(-1.5deg); }
#list .col-md-3:nth-child(2) { transform:rotate(1deg); }
#list .col-md-3:nth-child(3) { transform:rotate(-1deg); }
#list .col-md-3:nth-child(4) { transform:rotate(1.5deg); }
.candidate { transition:all ease-out 0.2s; background:#fff; color:#222; padding:15px; line-height: 1.3; box-shadow:10px 10px 10px #d1805833}
.candidate:hover { transform:scale(1.03); }
.candidate img { display:block; max-width:100%; }
.candidate .image { margin-bottom:10px; }
.candidate .name { font-weight:bold; margin-bottom:5px; }
.candidate .text { color:#959595; }
.candidate .more { color:#d68e73; font-weight:bold; display:block; }
.candidate .more:hover { text-decoration: underline;}
.candidate .btn { transition:all ease-out 0.2s;  display:block; width:140px; margin:20px auto -40px; color:#ffffff; padding:20px; border-radius:50px; font-weight:bold; background:linear-gradient(70deg, #d68e73, #d68e73 50%, #db9b83 51%, #d8947b) }
.candidate .btn:hover { transform:scale(1.2); }

/* push muse shopping 2 */
#page {
	background:  url(../images/logo-mds.png) no-repeat center 50px;
	background-size: 500px auto;
	padding-top:300px;
}

#push-muse-shopping-2 { width:930px; max-width:100%; margin:0 auto 60px; border:10px solid #fff; background:url(../images/muse-shopping-2.jpg) no-repeat 0 0; background-size:100%; }
#push-muse-shopping-2 > div { padding:70px 30px 70px 50%; text-align:center;     display: flex;
	align-items: center;
	flex-direction: column; }
@media (max-width:760px) {
	#push-muse-shopping-2 { background-size:250%;}
	#push-muse-shopping-2 > div { padding:100% 30px 30px;   }
	#page { background-size:70% auto; }
}

.modal { color:#111; }
.modal-title { font-weight: 800; padding: 5Px; color: #686dae;}





#game { background-size:800px; padding-top:150px; padding-bottom:50px; min-height:100vh; display:flex; flex-direction: column; align-items: center; justify-content: space-between;  }
#game > .row { max-width: 100%; width: 100%; }

.highlighted-title { opacity:0; animation:appearFromBottom 0.6s 0.2s forwards; line-height: 1.2; font-size:25px; background:url(../images/highlight.svg) no-repeat; background-size:100% 100%; font-weight:800; margin-bottom:15px; display: inline-block; padding: 20px 40px; width:500px; max-width: 100%;}
#clothing-categories { width:400px; max-width: 100%; opacity:0;  display:flex; flex-wrap: wrap; margin-bottom:15px; margin-right:20px;}
#clothing-categories.active { animation:appearFromBottom 0.6s 0.6s forwards; }
#clothing-categories > div:not(.tips) { position:relative;  width:calc(20% - 10px); margin:5px; }
#clothing-categories > div:not(.tips) > div { position:relative; transition:all ease-out 0.2s; background:rgba(255,255,255,0.6); border-radius:200px; width:100%; padding-top:100%; max-width: 100%;}
#clothing-categories > div:not(.tips) > div svg { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:75px; max-width: 100%; }
#clothing-categories > div:not(.tips) > div svg path { fill:#e7a97a; }
#clothing-categories > div:not(.tips) > div.active, #clothing-categories > div:not(.tips) > div:hover { cursor:pointer; background:rgba(255,255,255,1); ; }
#clothing-categories > div:not(.tips) > div.active svg path, #clothing-categories > div:not(.tips) > div:hover svg path { fill:#e28a6d; }

#dressing-head { width:100%; max-width: 100%;}
#dressing-head { display:flex; align-items: center; }
#game .btn-primary { font-size:16px; padding: 15px; width: 250px;}

#dressing .owl-item > div { width:195px; }
#dressing .owl-item > div img { display:block; width:100%; transition:all ease-out 0.2s; }

#dressing {position:relative; opacity:0; }
#dressing.active { animation:appearFromRight 0.6s 0s forwards; }
#dressing:before { content:''; display:block; position:absolute; width:100%; left:15px; height:8px; top:30px; background:#fff; }
#dressing .title { display: inline-block; text-align:left; background:url(../images/dressing-title.svg) no-repeat; z-index:2; position:relative; background-size:100% 100%; font-weight:bold; color:#e28a6d; padding:10px 30px; font-size:18px; margin-bottom:-5px; }
#dressing img:hover { cursor:pointer; transform:scale(1.05); }
#dressing .clothing { padding-top:20px; transition:all ease-out 0.5s; transform:translateX(300%); padding-bottom:15Px; }
#dressing .owl-item:nth-child(2) .clothing { transition-delay:0.1s; }
#dressing .owl-item:nth-child(3) .clothing { transition-delay:0.2s; }
#dressing .owl-item:nth-child(4) .clothing { transition-delay:0.3s; }
#dressing .owl-item:nth-child(5) .clothing { transition-delay:0.4s; }
#dressing.reset .clothing { transform:translateX(0%); }

#dressing .clothing.active:before { z-index:3; content:''; position:absolute; left:calc(50% - 15px); top:15px; width:38px; height:32px; background:url(../images/check.png) no-repeat; background-size:contain; }
#dressing .clothing.active:hover:before { z-index:3; content:''; position:absolute; left:calc(50% - 15px); top:15px; width:38px; height:32px; background:url(../images/remove.png) no-repeat; background-size:contain; }
#dressing .clothing:after { content:''; position:absolute; left:calc(50% - 2px); top:0; width:4px; height:50px; background:#fff; }
#dressing .clothing img{ z-index:2; position: relative; }

#model, .model { opacity:0; position:relative; width:580px; max-width: 100%; margin:50px auto ; }
#model.active, .owl-item.active .model { animation:appearSlow 1.6s 0.2s forwards;  }
#model > img, .model > img { position:absolute; top:0; left:0; width: 100%; display:block; left: 50%; transform: translateX(-50%);}
#model > img.silhouette, .model > img.silhouette { position:relative; z-index:0;  }
#model .theme-image {     position: absolute;
	top: -110px;
	left: calc(50% - 70px);
	width: 140px;
	z-index: 999;
}
#model .theme-image img { width:100%; display:block;  }

#theme-image-mobile { display:none; width:300px; max-width: 60%; }
#theme-image-mobile img { display:block; width:100%; }
@media (max-width:992px) {
	#theme-image-mobile { display:block; }
	#model .theme-image { display:none; }
}


#game .btn-primary { opacity:0;  animation:appearFromBottom 0.4s 0.8s forwards; }
#game .note { font-size:50px; color:#fff; background:#282457; padding:10px;  }
#game:after { position:absolute; bottom:0; pointer-events: none; left:0; content:''; width:100%; height:100px; background:linear-gradient(to top,#282457, rgba(212,133,93,0)); }
#game .owl-prev { position: absolute; left: 20px; top: 10px; transition:all ease-out 0.2s; outline:0;  }
#game .owl-next { position: absolute; right: 20px; top: 10px; transition:all ease-out 0.2s; outline:0; }
#game .owl-next:hover, #game .owl-prev:hover  { transform:scale(1.1); }
#game .owl-next.disabled, #game .owl-prev.disabled  { display:none; }

#game { background:url('../images/game-bg.jpg') no-repeat center 0 #282457; background-position:center -30px ; background-size:1680px; }
.game-logo { position:absolute; top:0; left:0; width:180px; max-width: 100%; }



.tips { transition:all ease-out 0.5s; opacity:0; pointer-events: none; z-index:2; position:absolute; padding:30px; width:280px; background:url('../images/tips.svg') no-repeat center 0; background-size:100% 100%; color:#282457; }
.tips p { font-weight:600; }
.tips.active { opacity:1; }
.tips .arrow { position:absolute; animation:bounce 1s infinite;  }
#clothing-categories .tips { top:calc(100% + 20px); }
#clothing-categories .tips .arrow { top: -30px; left: 20px; }
#clothing-categories .tips .arrow svg { transform: rotate(-140deg); }
@keyframes bounce {
	0% { transform:translateY(0px); }
	50% { transform:translateY(10px); }
	100% { transform:translateY(0px); }
}
@keyframes bounceH {
	0% { transform:translateX(0px); }
	50% { transform:translateX(10px); }
	100% { transform:translateX(0px); }
}


#dressing .tips { top:50px; right:100%; }
#dressing .tips .arrow { top: 20px; left: calc(100% - 45px); animation:bounceH 1s infinite; }
#dressing .tips .arrow svg { transform: rotate(-30deg); }

#game-form { margin:0 auto; transition:all ease-out 0.5s; opacity:0; padding:30px;  background:url('../images/tips.svg') no-repeat center 0; background-size:100% 100%; color:#282457; }
#game-form p { font-weight:600; }
#game-form p a:hover svg path { fill:#282457 }
#game-form.active { opacity:1; }



@media (max-width:992px) {
	#game { padding-top:100px; padding-bottom:200px;  background-position: center 0;}
	#game > .row { flex-direction: column-reverse;}
	#game-form { z-index:99; position:absolute; left:50%; transform:translateX(-50%); bottom:40px; }

	.highlighted-title { font-size:20px; }
	#clothing-categories > div:not(.tips)  { width:calc(20% - 10px); margin:5px; }
	#clothing-categories > div:not(.tips) svg { width:100%; }

	#clothing-categories { margin-right:0; }
	#dressing-head { flex-direction: column;}
	#dressing .tips { top:auto; left:50%; bottom:100%; transform: translateX(-50%);}
	#dressing .tips .arrow { top: calc(100% - 40px); left: calc(50% - 10px); animation:bounce 1s infinite; }
	#dressing .tips .arrow svg { transform:rotate(60deg); }
	#model { margin-top:0; }
	#model > img { width: 110%; }
	#dressing .owl-item > div { width:85Px; }
	#dressing .clothing:after { width:3Px; height:30px; }
}




/* game result */
#game-result { background:url('../images/game-bg.jpg') no-repeat center 0 #282457; background-position:center -30px ; background-size:1680px; padding:120px 0; min-height:100vh; display:flex; align-items: center; justify-content: space-between; }
#game-result-wrapper { width:460px; max-width: 100%; margin:0 auto; }
#game-result-wrapper > div { min-height:400px; width: 100%; background:url(../images/result.svg) no-repeat 0 0; background-size: 100% 100%; padding-left:37%; position:relative; color:#282457; }
#game-result-wrapper .title { background:#686dae; font-size:19px; color:#fff; padding:15px 20px; transform:translateY(-20px) rotate(-3deg); display:inline-block; }
#game-result-wrapper .experte { position:absolute; top: -10%; left: -17%; width: 45%; display: block;}
#game-result-wrapper .content { overflow:hidden; width:240px; max-width: 93%;}
#game-result-wrapper p { font-size:19px; color:#282457; font-weight: bold; }
#game-result-wrapper p .note { color:#686dae; width: 75px; display: inline-block; }
#game-result-wrapper hr { height:2Px; background:#dbdbdb; }
#game-result-wrapper .btn { margin-top:10px; margin-bottom:20px; padding:15px 20px;  }
#game-result-wrapper .link-restart { display:block; font-weight:bold; text-transform: uppercase; color:#282457; margin-bottom:50px; }
#game-result-wrapper .link-restart svg { margin-right:10px; }
#game-result-wrapper .link-restart:hover { color:#686dae; }
#gauge { width:32px; position:absolute; height:80%; left:25%; top:10%; z-index:99;  }
#gauge .bar { width:8px; left:calc(50% - 4px); position:absolute; height:100%; border-radius: 100px; background:#eee; display:block;  }
#gauge .bar span { width:8px; left:0; bottom:0; position:absolute; height:10px; border-radius: 100px; background:#686dae; display:block;  }
#gauge .circle { width:32px; height:32px; border-radius: 100px; background:#686dae; display:block; position:absolute; bottom:0; }
@media (max-width:992px) {
	#game-result { padding-top:180px; }
	#game-result-wrapper .title, #game-result-wrapper p { font-size:15px!important; }
	#game-result-wrapper p .note { width:58px }
	.btn-primary.btn-small, #game-result-wrapper .link-restart { font-size:14px; }
	#game-result-wrapper .experte { top:-3%; }
	#gauge { width:26px; }
	#gauge .circle { width:26px; height:26px; }
}

/* game-result anim */
#game-result-wrapper { opacity:0; transform:translateY(100%); transition:all ease-out 0.5s 0.1s; }
#game-result-wrapper .experte { opacity:0; transform:translateX(-100%); transition:all ease-out 0.5s 0.5s; }
#game-result-wrapper .title { opacity:0; transform:translateY(100%) rotate(0deg); transition:all ease-out 0.5s 0.6s; }
#game-result-wrapper .content > p:first-child { opacity:0; transform:translateY(100%) rotate(0deg); transition:all ease-out 0.5s 0.7s; }
#game-result-wrapper .content hr { opacity:0; transform:translateY(100%) rotate(0deg); transition:all ease-out 0.5s 4.7s; }
#game-result-wrapper .content hr + p { font-size:16px; opacity:0; transform:translateY(100%) rotate(0deg); transition:all ease-out 0.5s 5s; }
#game-result-wrapper .content hr + p + p { font-size:16px; opacity:0; transform:translateY(100%) rotate(0deg); transition:all ease-out 0.5s 5.1s; }
#game-result-wrapper .content hr + p + p a { color:#686dae; text-decoration: underline; }
#game-result-wrapper .content hr + p + p a:hover { color:#686dae; text-decoration: none; }
#game-result-wrapper .content .btn { opacity:0; transform:translateY(100%) rotate(0deg); transition:all ease-out 0.5s 5.2s; }
#game-result-wrapper .content .link-restart { opacity:0; transform:translateY(100%) rotate(0deg); transition:all ease-out 0.5s 5.5s; }
#game-result-wrapper.active { opacity:1; transform:translateY(0%); }
#game-result-wrapper.active .experte { opacity:1; transform:translateX(0%); }
#game-result-wrapper.active .title { opacity:1; transform:translateY(-20px) rotate(-3deg); }
#game-result-wrapper.active .content > p:first-child,
#game-result-wrapper.active .content > hr,
#game-result-wrapper.active .content > hr + p,
#game-result-wrapper.active .content > hr + p + p,
#game-result-wrapper.active .content > .btn,
#game-result-wrapper.active .content > .link-restart { opacity:1; transform:translateY(0); }




/* dashboard */
#dashboard { overflow:hidden; background:url('../images/game-bg.jpg') no-repeat center 0 #282457; background-position:center -30px ; background-size:1680px; padding:120px 0; min-height:100vh; display:flex; align-items: center; justify-content: space-between; }
#dashboard-clothings { transition:all ease-out 0.5s; opacity:0; transform:translateY(100%);  width:460px; max-width: 100%; margin:0 20px 0 auto; }
#dashboard-clothings > div { min-height:400px; width: 100%; background:url(../images/result.svg) no-repeat 0 0; background-size: 100% 100%; padding:30px 50px; position:relative; color:#282457; }
#dashboard-clothings p { font-weight:bold; }
#dashboard-clothings .owl-prev { position: absolute; left: 20px; top: 50%; transition:all ease-out 0.2s; outline:0;  }
#dashboard-clothings .owl-next { position: absolute; right: 20px; top: 50%; transition:all ease-out 0.2s; outline:0; }
#dashboard-clothings .owl-next:hover, #dashboard-clothings .owl-prev:hover  { transform:scale(1.1); }
#dashboard-clothings .owl-next.disabled, #dashboard-clothings .owl-prev.disabled  { display:none; }
#dashboard-clothings .note  { text-align: center; margin-top:-30px; }
#dashboard-clothings .note span { display:block; color:#999; }
#dashboard-clothings .note strong { font-weight: bold; font-size:22px; color:#686dae; }
#dashboard-clothings.active { opacity:1; transform:translateY(0); }
#dashboard-clothings .theme { color:#fff; line-height: 1.2; background:#686dae; display:block; width:250px; max-width: 80%; transform:rotate(-3deg); padding:5px 30px; text-align: center; margin:10px auto -20px; }
#dashboard-clothings .theme-image { max-width:80%; margin:0 auto -50px; }
#dashboard-clothings .theme-image img { width:100%; display:block; object-fit: contain; max-height: 100px }
#dashboard-clothings .theme span { text-transform:uppercase; font-size:12px; font-weight:bold; display:block; color:#fff; }
#dashboard-clothings .theme strong { font-size:14px; color:#ffffff; }

#ladder .title { transition:all ease-out 0.3s; opacity:0; transform:translateY(100%); border-bottom:2px solid #fff; padding-bottom:10px; text-align: left; display: block;    text-transform: uppercase; font-size: 20px; margin-bottom:5px; }
#ladder .table > div { transition:all ease-out 0.3s; opacity:0; transform:translateY(100%); display:flex; background:rgba(250,127,110,0.5); color:#fff; border-bottom:1px solid rgba(255,255,255,0.2); }
#ladder .table > div > div { padding:8Px 10px; }
#ladder .table > div > div:first-child { width:80px; text-align: center;}
#ladder .table > div > div:nth-child(2) { font-weight: bold; width:100%;}
#ladder .table > div > div:nth-child(3) { font-weight: bold; font-size:14px; }
#ladder .table .head, #ladder .table .head > div:nth-child(3) { background:none;  color:#fff; font-size:12px; text-transform: uppercase; font-weight: bold;}
#ladder .table .one { background:#c96657; color:#fff; }
#ladder .table .two { background:#e27869; }
#ladder .table .three { background:#686dae; }
#ladder .table .you { margin:0 -5px; background:#fff; color:#686dae; }
#real-game { transition:all ease-out 0.3s; opacity:0; transform:translateY(100%); }
#ladder.active .title, #ladder.active .table > div, #real-game.active { opacity:1; transform:translateY(0); }

#ladder .table > div:nth-child(1) { transition-delay:0.2s; }
#ladder .table > div:nth-child(2) { transition-delay:0.3s; }
#ladder .table > div:nth-child(3) { transition-delay:0.4s; }
#ladder .table > div:nth-child(4) { transition-delay:0.5s; }
#ladder .table > div:nth-child(5) { transition-delay:0.6s; }
#ladder .table > div:nth-child(6) { transition-delay:0.7s; }
#ladder .table > div:nth-child(7) { transition-delay:0.8s; }
#ladder .table > div:nth-child(8) { transition-delay:0.9s; }
#ladder .table > div:nth-child(9) { transition-delay:1s; }
#ladder .table > div:nth-child(10) { transition-delay:1.1s; }

#new-clothing { transition:all ease-out 0.5s 0.5s; opacity:0; transform:translateY(100%); font-weight:bold; width: 400px; max-width:100%; text-align:center; margin:10px 0 40Px; background:url(../images/result.svg) no-repeat 0 0; background-size: 100% 100%; padding:30px 50px; position:relative; color:#282457; }
#new-clothing.active { opacity:1; transform:translateY(0); }
#new-clothing .btn { animation:growBtn 2s infinite;}
@keyframes growBtn {
	0% { transform:scale(1); }
	50% { transform:scale(1.1); }
	100% { transform:scale(1); }
}

#themeModal { color:#282457 }
#themeModal .theme-image { margin:0px auto 10px; }
#themeModal .theme-image span { text-transform:uppercase; font-size:12px; font-weight:bold; display:block; color:#aaa!important; margin-bottom: 0px; z-index:2; position: relative;}
#themeModal .theme-image img { width:100%; display:block; max-width: 70%; margin:0 auto; }
#themeModal .theme { line-height: 1.2; background:#686dae; display:block; max-width: 80%; transform:rotate(-3deg); padding:20px 30px; text-align: center; margin:10px auto 30px; color:#ffffff; }
#themeModal .theme span { display:block; text-transform:uppercase; font-size:12px; font-weight:bold;  }
#themeModal .theme strong { font-size:20px;  }
#themeModal .modal-content { background:url(../images/result.svg) no-repeat 0 0; background-size: 100% 100%; padding:30px 50px; border:0; }

@media (max-width:992px) {
	#themeModal .modal-content { padding:30px 20px;}
}


/* GAME TIPS */
#game-tips { width:340px; max-width: 100%; margin:30px auto; }
#game-tips .title { position:relative;  z-index:4;  }
#game-tips .title > div:last-child { position:relative;  z-index:4; background:#686dae; font-size:19px; color:#fff; padding:15px 20px; transform:translateY(-20px) rotate(-3deg); display:inline-block; padding-left:25px; margin-bottom:0; }
#game-tips .icon { z-index:9; position: absolute; left: -20px; top: -10px; background:#686dae; width:75px; height:75px; border-radius:100px; display:flex; align-items: center; justify-content: center; }
#game-tips .wrapper { padding:50px 30px 30px; background:url(../images/tips-wrapper.svg) no-repeat ; background-size:100% 100%; margin-top:-30px; }
#game-tips p { color: #282457; font-weight: bold; }
/* anim */
#game-tips .icon { transform:scale(0); transition:all ease-out 0.3s ; }
#game-tips .title > div:last-child { opacity:0; transform-origin:0 0; transform:rotate(10deg); transition:all ease-out 0.3s 0.2s; }
#game-tips .wrapper { animation:none; opacity:0; transform:translateY(100%); transition:all ease-out 0.3s 0.4s; }
#game-tips.active .icon { transform:scale(1); }
#game-tips.active .title > div:last-child { opacity:1; transform:rotate(-3deg) }
#game-tips.active .wrapper { opacity:1; transform:translateY(0%) }

@media (min-width:992px) {
	#game-result .container { display:flex; justify-content: center;}
	#game-result .container > * { margin:0 30px;}
	#game-result .container > #game-tips { margin-top:100px; }
}


#mute-sound { position:absolute; right:15px; top:10px; width:40px; height:40px; display:flex; align-items: center; justify-content: center; }
#mute-sound .muted { display:block; }
#mute-sound .unmute { display:none; }
#mute-sound:hover .muted { display:none; }
#mute-sound:hover .unmute { display:block; }
#mute-sound.active .muted { display:none; }
#mute-sound.active .unmute { display:block; }
#mute-sound.active:hover .muted { display:block; }
#mute-sound.active:hover .unmute { display:none; }
#mute-sound.active:hover svg path, #mute-sound svg path { fill:#fff; }
#mute-sound:hover svg path, #mute-sound.active svg path { fill:#9a4142; }