@charset "UTF-8";

/* ------------ CONTENTS ------------ */






/* ------------ KV ------------ */
#enterance{
	position: relative;
	height: 100vh;
}
#enterance h1{
	position: absolute;
	top: 45%;
	left: 50%;
	width: 50vw;
	font-feature-settings: 'palt';
	font-size: 2vw;
	line-height: 1;
	text-indent: 0.15em;
	letter-spacing: 0.15em;
	transform: translateX(-50%) translateY(-50%);
}
#enterance h1 img{
	display: block;
	max-width: 50vw;
	margin: 0 auto;
	padding: 0.5em 0 1em 0;
	font-size: 5vw;
}
#enterance h1::after{
	display: none;
}


/* ------------ INTRODUCTION - IMAGE ------------ */
#introduction{
}
#introduction .image{
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	padding: 30px 0;
}
#introduction .image dl{
	position: relative;
	width: 33%;
}
#introduction .image dl dt{
	position: absolute;
	color: #fff;
	line-height: 1;
	font-size: 120px;
	font-weight: bold;
	z-index: 0;
}
#introduction .image dl dd{
	position: relative;
	line-height: 2.1;
	font-size: 1.2vw;
	font-weight: 700;
}

#introduction .image dl.d1{
	position: relative;
	top: 20px;
	text-align: right;
}
#introduction .image dl.d1 dt{
	top: -0.75em;
	right: -0.15em;
}

#introduction .image dl.d2{
	position: relative;
	top: -20px;
	text-align: left;
}
#introduction .image dl.d2 dt{
	bottom: -0.75em;
	left: -0.15em;
}


#introduction .image .center{
	width: 25%;
	width: 25%;
	height: 16vw;
	background: url(../img/top/intro.png) no-repeat 50% 50% / 28vw auto;
}
#introduction .image .center img{
	display: none;
	width: 30%;
	margin: 15px auto;
}
#introduction .image .center b{
	display: none;
	color: #006f7a;
	font-size: 14px;
	font-weight: 700;

}


/* ------------ INTRODUCTION - MESSAGE ------------ */
#introduction .message{
	margin: 120px 0 0 0;
	color: #000;
	line-height: 2;
	font-size: 1.65vw;
}
#introduction .message p{
	margin: 1.2em auto 0 auto;
}
#introduction .message p > span{
	display: block;
	margin: 0 auto;
}





/* ------------ SERVICE ------------ */
#service{
	margin: 20vw 0;
}

#service .service{
	position: relative;
	margin: 5vw auto;
}
#service .service .txt{
	text-align: left;
}
#service .service .txt h3{
	display: inline-block;
	width: max-content;
	font-size: 2.4vw;
	font-weight: 800;
	font-feature-settings: 'palt';
	letter-spacing: 0.05em;
}
#service .service .txt h3::after{
	content: "";
	display: block;
	position: relative;
	top: -0.65em;
	left: 0.3em;
	width: 100%;
	height: 12px;
	background: #fff;
	z-index: -1;
}
#service .service .txt h3 small{
	display: inline-block;
	margin-left: 1em;
	font-size: 50%;
}
#service .service .txt p{
	padding: 0.5em 0 1em 0;
	line-height: 2;
	font-size: 1.2vw;
	font-weight: bold;
}

#service .service .img{
	position: absolute;
	top: 0;
	left: 0;
}
#service .service .img li{
	display: block;
	position: absolute;
	background: rgba(0,0,0,0.3);
}

#service .service .img li:nth-child(1){
	width: 420px;
	max-width: 32vw;
	z-index: 3;
}
#service .service .img li:nth-child(2){
	width: 280px;
	max-width: 20vw;
	opacity: 0.9;
	z-index: 2;
}
#service .service .img li:nth-child(3){
	width: 160px;
	max-width: 12vw;
	opacity: 0.75;
	z-index: 1;
}
#service .service .img li img{
	display: block;
}


/* MARKETING */
#marketing{
}
#marketing .txt{
	padding: 22vw 0 12vw 12vw;
}
#marketing .img li:nth-child(1){ top: 3vw; left: 28vw; }
#marketing .img li:nth-child(2){ top: 20vw; left: 48vw; }
#marketing .img li:nth-child(3){ top: 0vw; left: 66vw; }

/* CREATIVE */
#creative{
}
#creative .txt{
	padding: 0vw 0 13vw 50vw;
}
#creative .img li:nth-child(1){ top: 0vw; left: 15vw; }
#creative .img li:nth-child(2){ top: 14vw; left: 5vw; }
#creative .img li:nth-child(3){ top: -5vw; left: 2vw; }

/* YOUNG LAB */
#younglab{
}
#younglab .txt{
	padding: 5vw 0 10vw 15vw;
}
#service .service .txt p strong{
	display: block;
	padding-bottom: 0.5em;
	line-height: 1;
	font-size: 130%;
}
#younglab .img li:nth-child(1){ top: 20vw; left: 28vw; }
#younglab .img li:nth-child(2){ top: 10vw; left: 50vw; }

#younglab .members{
	display: block;
	width: max-content;
	margin: 1em 0 2em 0;
	padding: 0.5em 1em !important;
	border: solid 4px #000;
}
#younglab .members strong{
	display: block;
	font-size: 20px;
}




/* ------------ SOLUTION ------------ */
#sulution{
	margin: 25vw 0;
}
#sulution a{
	display: block;
	position: relative;
	width: 600px;
	max-width: 60vw;
	margin: 0 auto;
	padding: 1vw 5vw;
	border: solid 0.3vw #fff;
	border-radius: 1vw;
}
#sulution .lm{
	position: absolute;
	bottom: 2vw;
	right: 7vw;
}




/* ------------ WORKS ------------ */
#works{
	position: relative;
	margin: 20vw 0 10vw 0;
}

#works a{
	display: block;
	height: 50vw;
}

#works h2{
	position: absolute;
	top: 50%;
	left: 50%;
	padding: 2vw 0 0 0;
	color: #fff;
	text-align: center;
	text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	font-size: 8vw;
	z-index: 1;
	transition: text-shadow 0.3s;
	transform: translateX(-50%) translateY(-50%);
}
#works a:hover h2{
	text-shadow: 0px 0px 3px rgba(0,0,0,0.5);
}
#works h2 small{
	text-indent: 0.1em;
	font-size: 1.75vw;
	letter-spacing: 0.1em;
}
#works h2 small::before, #works h2 small::after{
	background: #fff;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
}

#workThumbs{
	position: relative;
	left: 20px;
	width: 100vw;
	overflow: hidden;
}
#workThumbs .row{
	position: relative;
	width: 240vw;
	margin: 2vw 0;
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	will-change: transform;
}
#workThumbs .row .inner{
	display: flex;
}
#workThumbs .row img{
	width: 10vw;
	height: 14.138vw;
	margin-right: 2vw;}

#row1{
	-moz-animation: infinityLoopA 30s infinite linear 1s both;
	-webkit-animation: infinityLoopA 30s infinite linear 1s both;
	animation: infinityLoopA 30s infinite linear 1s both;
}
#row2{
	-moz-animation: infinityLoopB 30s infinite linear 1s both;
	-webkit-animation: infinityLoopB 30s infinite linear 1s both;
	animation: infinityLoopB 30s infinite linear 1s both;
}
#row3{
	-moz-animation: infinityLoopA 30s infinite linear 1s both;
	-webkit-animation: infinityLoopA 30s infinite linear 1s both;
	animation: infinityLoopA 30s infinite linear 1s both;
}
@keyframes infinityLoopA {
  from {
		-moz-transform: translateX(0vw) translate3d(0,0,0);
		transform: translateX(0vw);
	}
  to {
		-moz-transform: translateX(-50%) translate3d(0,0,0);
		transform: translateX(-50%);
	}
}
@keyframes infinityLoopB {
  from {
		-moz-transform: translateX(-50%) translate3d(0,0,0);
		transform: translateX(-50%);
	}
  to {
		-moz-transform: translateX(0vw) translate3d(0,0,0);
		transform: translateX(0vw);
	}
}




/*---------------------------------------------
  SmatrPhone/Tablet
---------------------------------------------*/
@media screen and (max-width:1000px) {
	#enterance h1{
		width: 100vw;
		margin: 0;
		font-size: 3.5vw;
	}
	#enterance h1 img{
		max-width: 90vw;
	}
	
	#introduction .message{
		margin: 10vw 0 0 0;
		font-size: 4vw;
		font-weight: bold;
	}
	
	
	/* ------------ INTRODUCTION - IMAGE ------------ */
	#introduction{

	}
	#introduction .image{
		position: relative;
		flex-direction: column;
		padding: 30px 0;
	}
	#introduction .image dl{
		width: 75vw;
	}
	#introduction .image dl dt{
		font-size: 16vw;
	}
	#introduction .image dl dd{
		font-size: 3.5vw;
	}

	#introduction .image dl.d1{
		top: 0;
		left: 0vw;
		text-align: left;
	}
	#introduction .image dl.d1 dt{
		top: -1vw;
		right: -1vw;
		width: 1.1em;
	}

	#introduction .image dl.d2{
		top: 0;
		right: 0vw;
		text-align: right;
	}
	#introduction .image dl.d2 dt{
		top: -1vw;
		left: -1vw;
		right: auto;
		bottom: auto;
		width: 1.1em;
	}


	#introduction .image .center{
		width: 80vw;
		height: 42vw;
		background: url(../img/top/introSP.png) no-repeat 50% 50% / 80vw auto;
	}
	#introduction .image .center img{
		display: none;
	}
	#introduction .image .center b{
		display: none;
	}
	#introduction .image .trigger{
		position: absolute;
		top: 20vh;
	}

	
	/* ------------ SERVICE ------------ */
	#service{
		margin: 20vw 0;
	}

	#service .service{
		margin: 5vh auto;
	}
	#service .service .txt h3{
		font-size: 5.5vw;
		font-weight: 800;
	}
	#service .service .txt p{
		padding: 0.5em 0 1em 0;
		font-size: 3.5vw;
	}
	#service .service .txt p br{
		display: none;
	}

	#service .service .img{
		height: 100%;
	}

	#service .service .img li:nth-child(1){
		max-width: none;
		width: 42vw;
		height: 24vw;
	}
	#service .service .img li:nth-child(2){
		max-width: none;
		width: 28vw;
		height: 16vw;
	}
	#service .service .img li:nth-child(3){
		max-width: none;
		width: 14vw;
		height: 8vw;
	}


	/* MARKETING */
	#marketing{
	}
	#marketing .txt{
		padding: 28vw 5vw 18vw 5vw;
	}
	#marketing .img li:nth-child(1){ top: 3vw; left: 30vw; }
	#marketing .img li:nth-child(2){ top: 20vw; left: 62vw; }
	#marketing .img li:nth-child(3){ top: 0vw; left: 80vw; }

	/* CREATIVE */
	#creative{
	}
	#creative .txt{
		padding: 24vw 5vw 5vw 5vw;
	}
	#creative .img li:nth-child(1){ top: -5vw; left: 7vw; }
	#creative .img li:nth-child(2){ top: 12vw; left: 62vw; }
	#creative .img li:nth-child(3){ top: -10vw; left: 46vw; }

	/* YOUNG LAB */
	#younglab{
	}
	#younglab .txt{
		padding: 5vw 5vw 30vw 5vw;
	}
	#younglab .img li:nth-child(1){ top: auto; bottom: 2vw; left: 20vw; }
	#younglab .img li:nth-child(2){ top: auto; bottom: 20vw; left: 60vw; }

	#younglab .members{
		display: block;
		width: max-content;
		margin: 1em 0 2em 0;
		padding: 0.5em 1em !important;
		border: solid 2px #000;
	}
	#younglab .members strong{
		display: block;
		font-size: 4.5vw;
		line-height: 1.5;
	}
	
	
	/* ------------ SOLUTION ------------ */
	#sulution {
		margin: 25vw 0;
	}
	#sulution a {
		width: 80vw;
		max-width: 80vw;
	}
	#sulution .lm {
		bottom: -1vw;
		right: 3vw;
	}
	
	
	/* ------------ WORKS ------------ */
	#works h2{
		top: 27.5vw;
		left: 50%;
		font-size: 16vw;
		transform: scale(1) translate(-50%, -50%);
	}
	#works h2 small{
		font-size: 4vw;
	}
	#workThumbs{
		left: 0;
	}
	#workThumbs .row img{
		height: auto;
		max-height: 14.1vw;
	}
}


/*---------------------------------------------
  Bigger Screens
---------------------------------------------*/
@media screen and (min-width:1200px) {
	#service .service{
		width: 1060px;
		margin: 3vw auto;
	}
	#service .service .txt h3{
		font-size: 42px;
	}
	#service .service .txt p{
		font-size: 20px;
	}
	
	#service .service .img li:nth-child(1){
		max-width: 420px;
	}
	#service .service .img li:nth-child(2){
		max-width: 280px;
	}
	#service .service .img li:nth-child(3){
		max-width: 160px;
	}
	
	/* MARKETING */
	#marketing{
	}
	#marketing .txt{
		padding: 280px 0 200px 120px;
	}
	#marketing .img li:nth-child(1){ top: 50px; left: 310px; }
	#marketing .img li:nth-child(2){ top: 270px; left: 610px; }
	#marketing .img li:nth-child(3){ top: 20px; left: 840px; }

	/* CREATIVE */
	#creative{
	}
	#creative .txt{
		padding: 0 0 120px 540px;
	}
	#creative .img li:nth-child(1){ top: 10px; left: 80px; }
	#creative .img li:nth-child(2){ top: 220px; left: -10px; }
	#creative .img li:nth-child(3){ top: -100px; left: 40px; }

	/* YOUNG LAB */
	#younglab{
	}
	#younglab .txt{
		padding: 100px 0 200px 160px;
	}
	#younglab .img li:nth-child(1){ top: 340px; left: 320px; }
	#younglab .img li:nth-child(2){ top: 210px; left: 630px; }
}








/*---------------------------------------------
  INTRO
---------------------------------------------*/
.introON #globalNavigation, .introON #contents{
	opacity: 0;
}
.introON #globalNavigation.on{
	opacity: 1;
}
.introON #globalNavigation dt, .introON #globalNavigation dd, .introON #globalNavigation #menu{
	opacity: 0;
	transform: translateY(2vw);
	transition: opacity 0.2s ease,  transform 0.3s ease-out;
}
.introON #globalNavigation.on dt, .introON #globalNavigation.on dd, .introON #globalNavigation.on #menu{
	opacity: 1;
	transform: translateY(0);
}
.introON #globalNavigation.on dl div dd:nth-child(1){ transition-delay: 0.1s; }
.introON #globalNavigation.on dl div dd:nth-child(2){ transition-delay: 0.2s; }
.introON #globalNavigation.on dl div dd:nth-child(3){ transition-delay: 0.3s; }
.introON #globalNavigation.on dl div dd:nth-child(4){ transition-delay: 0.4s; }
.introON #globalNavigation.on dl div dd:nth-child(5){ transition-delay: 0.5s; }
.introON #globalNavigation.on dl div dd:nth-child(6){ transition-delay: 0.6s; }
.introON #globalNavigation.on dl div dd:nth-child(7){ transition-delay: 0.7s; }
.introON #globalNavigation.on dl div dd:nth-child(8){ transition-delay: 0.8s; }
.introON #globalNavigation.on dl div dd:nth-child(9){ transition-delay: 0.9s; }


.introON #contents.on{
	opacity: 1;
}
.introON #contents #enterance h1 span{
	opacity: 0 !important;
	transform: translateY(50px) !important;
}
.introON #contents.on #enterance h1 span{
	opacity: 1 !important;
	transform: translateY(0) !important;
}
.introON #contents #enterance h1 img{
	opacity: 0 !important;
	transform: translateY(50px) !important;
	transition-delay: 0.2s !important;
}
.introON #contents.on #enterance h1 img{
	opacity: 1 !important;
	transform: translateY(0) !important;
}



#BG svg#polygons{
	opacity: 0;
	transform: translate(-50%, -50%) scale(1.5);
	transform-origin: 50% 50%;
	transition: 2.0s ease-in-out;
}
#BG svg#polygons.on{
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}


#intro{
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: -2;
}
#intro .inner{
	position: absolute;
	width: 100%;
	height: 100%;
}

#introInner{
	top: 0vw;
	left: 0vw;
	/*transform: rotate(14.5deg);*/
	transition: 2s ease-in-out;
}

#introImg{
	position: absolute;
	top: calc(50vh - 1920px);
	left: calc(50vw - 1920px);
	margin: auto;
	width: 3840px;
	height: 3840px;
	max-width: none;
	opacity: 1;
	transform: scale(1);
	transition: transform 4s ease-in, opacity 1.5s ease-in 0.5s;
}


#theIntro{
	transform: scale(1);
	transform-origin: 50.0% 50.0%;
}
#theIntroInner{
	transform: translate(-9200px, 10300px) rotate(14.5deg);
	transform-origin: 50.0% 50.0%;
}

#theWords, #theGirl{
	transform: scale(22);
	transform-origin: 50.0% 50.0%;
}

#skipIntro{
	display: block;
	position: fixed;
	bottom: 3vw;
	right: 3vw;
	padding: 0.5em 1.5em 0.75em 1.5em;
	background: rgba(255,255,255,0.3);
	border-radius: 50px;
	color: #000;
	font-size: 11px;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: 0.3s ease;
	z-index: 999;
}
#skipIntro::after{
	content: "";
	display: block;
	position: absolute;
	bottom: 0.65em;
	left: 15%;
	width: 0%;
	height: 1px;
	background: rgba(0,0,0,0);
	transition: 0.3s ease;
}
#skipIntro:hover{
	background: rgba(255,255,255,0.01);
}
#skipIntro:hover::after{
	width: 70%;
	background: rgba(0,0,0,0.5);
}

.move1 #theIntroInner{
	transform: translate(-9150px, 11970px) rotate(6.5deg);
	transition: transform 2.3s ease-in-out;
}
.move2 #theIntroInner{
	transform: translate(-7950px, 11900px) rotate(0deg);
	transition: transform 2.2s ease-in-out;
}

.move3 #theGirl{
	transform: scale(0.3);
	transition: transform 5.0s cubic-bezier(0.3,0.1, 0.5,1) 0s;
	transform-origin: 50.0% 50.0%;
}
.move3 #theWords{
	opacity: 0;
	transform: scale(0.3);
	transition: transform 5.0s cubic-bezier(0.3,0.1, 0.5,1) 0s, opacity 3.0s ease 0.2s;
	transform-origin: 50.0% 50.0%;
}
.ff.move3 #theWords{
	transition: transform 5.0s cubic-bezier(0.3,0.1, 0.5,1) 0s, opacity 1.5s ease 0s;
}
.move3 #theIntroInner{
	transform: translate(0px, 0px);
	transition: transform 5.0s cubic-bezier(0.3,0.1, 0.5,1);
}

.move3 #theGirl polygon.eyeP{
	transition: transform 5.0s cubic-bezier(0.3,0.1, 0.5,1) 0s, fill 1.5s ease-in 0.3s;
}
.move3 .eyeP158{fill:#b17f67;}
.move3 .eyeP159{fill:#997e73;}
.move3 .eyeP160{fill:#835f5b;}
.move3 .eyeP161{fill:#634e4b;}
.move3 .eyeP162{fill:#604c49;}
.move3 .eyeP163{fill:#a59893;}
.move3 .eyeP164{fill:#b8b3b1;}
.move3 .eyeP165{fill:#cbc1bc;}
.move3 .eyeP166{fill:#b38e8a;}
.move3 .eyeP167{fill:#c88f79;}
.move3 .eyeP172{fill:#d59f8b;}
.move3 .eyeP173{fill:#d1a195;}
.move3 .eyeP174{fill:#597f80;}
.move3 .eyeP175{fill:#77b3b2;}
.move3 .eyeP176{fill:#302e2c;}
.move3 .eyeP177{fill:#382e2d;}
.move3 .eyeP178{fill:#63544a;}
.move3 .eyeP179{fill:#62544b;}
.move3 .eyeP180{fill:#654f4b;}
.move3 .eyeP181{fill:#68524d;}
.move3 .eyeP182{fill:#231d1d;}
.move3 .eyeP183{fill:#2f272d;}
.move3 .eyeP184{fill:#37353a;}
.move3 .eyeP185{fill:#344746;}
.move3 .eyeP186{fill:#3b4c51;}
.move3 .eyeP187{fill:#cd9b86;}
.move3 .eyeP188{fill:#b78968;}
.move3 .eyeP191{fill:#a88063;}
.move3 .eyeP192{fill:#a79c94;}
.move3 .eyeP193{fill:#433337;}
.move3 .eyeP194{fill:#482f32;}
.move3 .eyeP195{fill:#3a2f28;}
.move3 .eyeP196{fill:#1d1615;}
.move3 .eyeP197{fill:#292530;}
.move3 .eyeP198{fill:#554842;}
.move3 .eyeP199{fill:#564841;}
.move3 .eyeP200{fill:#5f4b42;}
.move3 .eyeP201{fill:#262220;}
.move3 .eyeP202{fill:#37302d;}
.move3 .eyeP203{fill:#8e827c;}
.move3 .eyeP204{fill:#936957;}
.move3 .eyeP205{fill:#544039;}
.move3 .eyeP206{fill:#5b4e48;}
.move3 .eyeP207{fill:#CE9582;}
.move3 .eyeP208{fill:#C69483;}
.move3 .eyeP209{fill:#C9967F;}
.move3 .eyeP210{fill:#CC927D;}

.move3 .colorA{fill:#ffd20a;}
.move3 .colorB{fill:#0a9696;}

.move4 #introImg{
	filter: blur(50px);
	transition: 1.0s ease 0s;
}
.ff.move4 #introImg{
	filter: blur(30px);
	transition: 0.5s ease 0.1s;
}
.move4 #theGirl{
	opacity: 0;
	transform: scale(0.31);
	transform-origin: 50.0% 50.0%;
	transition: opacity 2.5s ease-in 0s, transform 2.5s ease-in 0.1s;
}
.ff.move4 #theGirl{
	transition: opacity 0.5s ease 0s, transform 0.5s ease 0s;
}
/*
.move4 .bye{
	display: none;
}
.move4 .BG{
	display: block;
	opacity: 0.75;
}
*/

#theWords .mainTXT path, #theWords .subTXT path{
	display: none;
}
#theWords .mainTXT path.on, #theWords .subTXT path.on{
	display: block;
}
#theWords .subTXT path{
	opacity: 0.65;
}

	/*
#theGirl polygon{
	transform-origin: 50% 50%;
}
#theGirl polygon.bye{
	opacity: 0;
	transform: scale(1.5);
	transition: 5s;
}

#theGirl polygon.BG{
	transform: scale(1);
	transition: 3.5s ease;
}
#theGirl polygon.polyA{
	fill:#ffd20a;
}
#theGirl polygon.polyB{
	fill:#0a9696;
}
	*/


#copy{
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	width:100%;
	height: 5vw;
	margin: auto;
	padding-bottom: 10vw;
	color: #0098a0;
	text-align: center;
	line-height: 5vw;
	font-size: 5.25vw;
	font-weight: bold;
	z-index: 10;
}
.move3 #copy{
	display: block;
}
#copy.off{
	opacity: 0;
	transition: 2s ease;
}
#copy span{
	opacity: 0;
	transition: 0.2s ease;
}
#copy span.on{
	opacity: 1;
	transition: 0s;
}

@media screen and (max-width:1000px) {
	#copy{
		width: 100vw;
		height: 16vw;
		padding-bottom: 20vw;
		line-height: 8vw;
		font-size: 6.75vw;
	}
}
@media screen and (max-width:800px) {
	#copy{
		height: 20vw;
		padding-bottom: 22vw;
		line-height: 10vw;
		font-size: 8.25vw;
	}
}


.st0{fill:#F9DFCA;}
.st1{fill:#826D63;}
.st2{fill:#83624C;}
.st3{fill:#FAD0C0;}
.st4{fill:#C7D17B;}
.st5{fill:#D19374;}
.st6{fill:#CE9A80;}
.st7{fill:#EEC5AA;}
.st8{fill:#59433D;}
.st9{fill:#FFE7E1;}
.st10{fill:#FCD2C0;}
.st11{fill:#EFC7A8;}
.st12{fill:#293754;}
.st13{fill:#443941;}
.st14{fill:#473A41;}
.st15{fill:#E09894;}
.st16{fill:#CC827A;}
.st17{fill:#BA8374;}
.st18{fill:#B4C1C1;}
.st19{fill:#3C9C80;}
.st20{fill:#4FA47B;}
.st21{fill:#3B9E82;}
.st22{fill:#95B756;}
.st23{fill:#7BAE5F;}
.st24{fill:#ACB832;}
.st25{fill:#D89279;}
.st26{fill:#D18A71;}
.st27{fill:#22262B;}
.st28{fill:#E3E5DC;}
.st29{fill:#4F5358;}
.st30{fill:#27445B;}
.st31{fill:#BAC1C6;}
.st32{fill:#AAB8C1;}
.st33{fill:#414A65;}
.st34{fill:#D8D5CA;}
.st35{fill:#FFDDD4;}
.st36{fill:#E5E9D7;}
.st37{fill:#E9E5CD;}
.st38{fill:#3E4033;}
.st39{fill:#C4CCC7;}
.st40{fill:#1D313E;}
.st41{fill:#2A3E49;}
.st42{fill:#E2938D;}
.st43{fill:#F4A6A6;}
.st44{fill:#E8EDED;}
.st45{fill:#3A3139;}
.st46{fill:#F2EEE7;}
.st47{fill:#4F4026;}
.st48{fill:#DADFD0;}
.st49{fill:#453F49;}
.st50{fill:#DD9B85;}
.st51{fill:#EAB998;}
.st52{fill:#3D323D;}
.st53{fill:#353427;}
.st54{fill:#AEB7B6;}
.st55{fill:#795B40;}
.st56{fill:#7C5F4B;}
.st57{fill:#FFDCCA;}
.st58{fill:#563D41;}
.st59{fill:#684947;}
.st60{fill:#5E4140;}
.st61{fill:#87A3AA;}
.st62{fill:#EAEEEF;}
.st63{fill:#222D39;}
.st64{fill:#1C3544;}
.st65{fill:#EFEAE1;}
.st66{fill:#8C6D64;}
.st67{fill:#A57A67;}
.st68{fill:#F4BFA8;}
.st69{fill:#F4C2B3;}
.st70{fill:#F7CCBF;}
.st71{fill:#F2C3A3;}
.st72{fill:#EDBAA4;}
.st73{fill:#D39E90;}
.st74{fill:#87C8CE;}
.st75{fill:#7eaba4;}
.st76{fill:#DBAB93;}
.st77{fill:#A3806C;}
.st78{fill:#C99893;}
.st79{fill:#172F37;}
.st80{fill:#072934;}
.st81{fill:#543E48;}
.st82{fill:#493A46;}
.st83{fill:#FFDDD7;}
.st84{fill:#FFD7C7;}
.st85{fill:#FFE0D4;}
.st86{fill:#FFE7DE;}
.st87{fill:#163A4D;}
.st88{fill:#D3976E;}
.st89{fill:#D1977D;}
.st90{fill:#B2695F;}
.st91{fill:#EDB99F;}
.st92{fill:#E5B3A1;}
.st93{fill:#564240;}
.st94{fill:#DB9C79;}
.st95{fill:#D8826F;}
.st96{fill:#7C5E66;}
.st97{fill:#8E6B6B;}
.st98{fill:#CC9679;}
.st99{fill:#C17672;}
.st100{fill:#D38072;}
.st101{fill:#664D56;}
.st102{fill:#7C5C62;}
.st103{fill:#B26F6F;}
.st104{fill:#774F4F;}
.st105{fill:#9E534F;}
.st106{fill:#513C42;}
.st107{fill:#C68973;}
.st108{fill:#CC8775;}
.st109{fill:#FFE5D2;}
.st110{fill:#4B4653;}
.st111{fill:#A57A64;}
.st112{fill:#F9DCC7;}
.st113{fill:#664242;}
.st114{fill:#544040;}
.st115{fill:#54413F;}
.st116{fill:#644742;}
.st117{fill:#6D4E4A;}
.st118{fill:#634642;}
.st119{fill:#825259;}
.st120{fill:#9E6770;}
.st121{fill:#E2DDDC;}
.st122{fill:#D6C9C8;}
.st123{fill:#E59995;}
.st124{fill:#D8A88D;}
.st125{fill:#E5C5B3;}
.st126{fill:#EAC1B0;}
.st127{fill:#B57B67;}
.st128{fill:#EDB996;}
.st129{fill:#E2AB96;}
.st130{fill:#D3D8D0;}
.st131{fill:#845D4D;}
.st132{fill:#865E4E;}
.st133{fill:#4E4556;}
.st134{fill:#4F3C42;}
.st135{fill:#493A44;}
.st136{fill:#FFEDDE;}
.st137{fill:#FFE3DC;}
.st138{fill:#435051;}
.st139{fill:#F4F4F2;}
.st140{fill:#4F4754;}
.st141{fill:#2D1F28;}
.st142{fill:#D8A48B;}
.st143{fill:#77575B;}
.st144{fill:#6B474B;}
.st145{fill:#C48776;}
.st146{fill:#EFAF8F;}
.st147{fill:#F2B797;}
.st148{fill:#C8BF22;}
.st149{fill:#FFE783;}
.st150{fill:#6CB087;}
.st151{fill:#E8B18B;}
.st152{fill:#E2A379;}
.st153{fill:#FFD521;}
.st154{fill:#F3C4A4;}
.st155{fill:#D8A27D;}
.st156{fill:#825C4C;}
.st157{fill:#BDD2D1;}
.st158{fill:#EAC0AD;}
.st159{fill:#EDB39D;}
.st160{fill:#6B4F4C;}
.st161{fill:#563D45;}
.st162{fill:#FFDFCF;}
.st163{fill:#F9D3C0;}
.st164{fill:#F9D2C0;}
.st165{fill:#F7DACB;}
.st166{fill:#FFD1B8;}
.st167{fill:#FFC9B6;}
.st168{fill:#F4A99D;}
.st169{fill:#42373E;}
.st170{fill:#5E4044;}
.st171{fill:#68444D;}
.st172{fill:#815B4C;}
.st173{fill:#735147;}
.st174{fill:#80654B;}
.st175{fill:#e5c923;}
.st176{fill:#6bb5a0;}
.st177{fill:#CED0D1;}
.st178{fill:#1C4456;}
.st179{fill:#382629;}
.st180{fill:#89675B;}
.st181{fill:#29223A;}
.st182{fill:#1C2226;}
.st183{fill:#FFDCD7;}
.st184{fill:#DDB097;}
.st185{fill:#C99081;}
.st186{fill:#594149;}
.st187{fill:#4C3C45;}
.st188{fill:#4F3A42;}
.st189{fill:#E5AE89;}
.st190{fill:#E5B28F;}
.st191{fill:#BEC140;}
.st192{fill:#EABB9B;}
.st193{fill:#212528;}
.st194{fill:#29262B;}
.st195{fill:#CC9787;}
.st196{fill:#F7D1C1;}
.st197{fill:#F9D7C5;}
.st198{fill:#F9DFCD;}
.st199{fill:#1D2A2F;}
.st200{fill:#7D9695;}
.st201{fill:#19262B;}
.st202{fill:#FFDED7;}
.st203{fill:#FFDAD2;}
.st204{fill:#FFE3DE;}
.st205{fill:#F9B0AC;}
.st206{fill:#F2BDAD;}
.st207{fill:#E2A39A;}
.st208{fill:#E5B5AA;}
.st209{fill:#BC7D79;}
.st210{fill:#E5A498;}
.st211{fill:#F9D0C5;}
.st212{fill:#F9E0D2;}
.st213{fill:#785449;}
.st214{fill:#A8785C;}
.st215{fill:#EDC4A9;}
.st216{fill:#FFE1D9;}
.st217{fill:#54483E;}
.st218{fill:#604D44;}
.st219{fill:#30202A;}
.st220{fill:#FFE4D2;}
.st221{fill:#FFEDE1;}
.st222{fill:#87A2AD;}
.st223{fill:#323D3B;}
.st224{fill:#D89D93;}
.st225{fill:#EAAB8F;}
.st226{fill:#D8977D;}
.st227{fill:#50ABA4;}
.st228{fill:#3D2D37;}
.st229{fill:#6A4A44;}
.st230{fill:#B17E64;}
.st231{fill:#332238;}
.st232{fill:#31213D;}
.st233{fill:#B77E6E;}
.st234{fill:#D39188;}
.st235{fill:#DD957C;}
.st236{fill:#483A40;}
.st237{fill:#5D5860;}
.st238{fill:#232F33;}
.st239{fill:#2C1A23;}
.st240{fill:#332D33;}
.st241{fill:#233437;}
.st242{fill:#2C2832;}
.st243{fill:#393337;}
.st244{fill:#D39871;}
.st245{fill:#E5A67C;}
.st246{fill:#E5A088;}
.st247{fill:#D89D8B;}
.st248{fill:#E8B6A3;}
.st249{fill:#F2BBA2;}
.st250{fill:#C68D7F;}
.st251{fill:#513F46;}
.st252{fill:#D8CCCA;}
.st253{fill:#CE836B;}
.st254{fill:#282E33;}
.st255{fill:#334249;}
.st256{fill:#F5F0E3;}
.st257{fill:#133444;}
.st258{fill:#E8A77C;}
.st259{fill:#D38E79;}
.st260{fill:#E0B394;}
.st261{fill:#493933;}
.st262{fill:#604245;}
.st263{fill:#E2A888;}
.st264{fill:#D89B8D;}
.st265{fill:#EAAD8C;}
.st266{fill:#E2B79F;}
.st267{fill:#F9BBAA;}
.st268{fill:#FAC8B0;}
.st269{fill:#FCC8B1;}
.st270{fill:#875F4E;}
.st271{fill:#F9C8BB;}
.st272{fill:#4DA278;}
.st273{fill:#45A38B;}
.st274{fill:#ABBC49;}
.st275{fill:#A9C88C;}
.st276{fill:#E5A393;}
.st277{fill:#DDA187;}
.st278{fill:#CE9786;}
.st279{fill:#E5B8AA;}
.st280{fill:#35252E;}
.st281{fill:#282D49;}
.st282{fill:#7E594B;}
.st283{fill:#6B4A4A;}
.st284{fill:#60454C;}
.st285{fill:#EAE5E4;}
.st286{fill:#FCCAB6;}
.st287{fill:#F9C5B4;}
.st288{fill:#D1986D;}
.st289{fill:#3D3636;}
.st290{fill:#8C605E;}
.st291{fill:#5B3B3B;}
.st292{fill:#332933;}
.st293{fill:#E5C0A8;}
.st294{fill:#F99D8F;}
.st295{fill:#AF6268;}
.st296{fill:#996E7C;}
.st297{fill:#F49076;}
.st298{fill:#EA8A7A;}
.st299{fill:#E2D6D3;}
.st300{fill:#E5DFDC;}
.st301{fill:#3D3F3B;}
.st302{fill:#FBFAF7;}
.st303{fill:#B7B3BE;}
.st304{fill:#FFE6E1;}
.st305{fill:#FFE8DE;}
.st306{fill:#EFB5A0;}
.st307{fill:#F7BFB0;}
.st308{fill:#F9BB9B;}
.st309{fill:#E8E3E2;}
.st310{fill:#D8A387;}
.st311{fill:#FFDACC;}
.st312{fill:#FFD8CA;}
.st313{fill:#E8A98E;}
.st314{fill:#EAB89D;}
.st315{fill:#EFBCAB;}
.st316{fill:#EFB39E;}
.st317{fill:#E8B0A3;}
.st318{fill:#F4B1A2;}
.st319{fill:#D89487;}
.st320{fill:#FFD9D2;}
.st321{fill:#E2AB9C;}
.st322{fill:#DDA694;}
.st323{fill:#D39271;}
.st324{fill:#28263A;}
.st325{fill:#7B5C42;}
.st326{fill:#F4B89D;}
.st327{fill:#DDA27A;}
.st328{fill:#6A4B44;}
.st329{fill:#DBA38D;}
.st330{fill:#E2A696;}
.st331{fill:#F2C2AA;}
.st332{fill:#b5bc5b;}
.st333{fill:#8C695E;}
.st334{fill:#634A42;}
.st335{fill:#49403E;}
.st336{fill:#563D3E;}
.st337{fill:#FECE00;}
.st338{fill:#E8E5DD;}
.st339{fill:#FFF1E1;}
.st340{fill:#FDF4EC;}
.st341{fill:#7F777F;}
.st342{fill:#7F6E6E;}
.st343{fill:#473A40;}
.st344{fill:#FCB6AC;}
.st345{fill:#BF7179;}
.st346{fill:#996761;}
.st347{fill:#302029;}
.st348{fill:#4F3B3C;}
.st349{fill:#DB9289;}
.st350{fill:#D38B75;}
.st351{fill:#AD7761;}
.st352{fill:#C18B7A;}
.st353{fill:#936B5F;}
.st354{fill:#EAEFEF;}
.st355{fill:#EFC2A3;}
.st356{fill:#F2C7A7;}
.st357{fill:#FFE1DC;}
.st358{fill:#BCD089;}
.st359{fill:#6B524F;}
.st360{fill:#7C5851;}
.st361{fill:#87675C;}
.st362{fill:#513F4A;}
.st363{fill:#594148;}
.st364{fill:#513D48;}
.st365{fill:#DD9797;}
.st366{fill:#234860;}
.st367{fill:#254B62;}
.st368{fill:#1E3A3F;}
.st369{fill:#6E5644;}
.st370{fill:#755B4A;}
.st371{fill:#664E3C;}
.st372{fill:#BDAEA4;}
.st373{fill:#E2BBB3;}
.st374{fill:#F7C6AE;}
.st375{fill:#472F31;}
.st376{fill:#60454D;}
.st377{fill:#3A2F28;}
.st378{fill:#46322D;}
.st379{fill:#C2BAB6;}
.st380{fill:#5E5251;}
.st381{fill:#AA9E99;}
.st382{fill:#99756D;}
.st383{fill:#876E68;}
.st384{fill:#77615E;}
.st385{fill:#7C6B62;}
.st386{fill:#AD9584;}
.st387{fill:#F4D7C0;}
.st388{fill:#445B62;}
.st389{fill:#F4CCB0;}
.st390{fill:#F2C5AD;}
.st391{fill:#C69993;}
.st392{fill:#B29E97;}
.st393{fill:#4F443F;}
.st394{fill:#BDB6AD;}
.st395{fill:#78B2B2;}
.st396{fill:#302E2B;}
.st397{fill:#382E2D;}
.st398{fill:#5E504D;}
.st399{fill:#664F44;}
.st400{fill:#897062;}
.st401{fill:#4F413A;}
.st402{fill:#8A726A;}
.st403{fill:#886356;}
.st404{fill:#966F67;}
.st405{fill:#5A8080;}
.st406{fill:#3F4F4F;}
.st407{fill:#3F3C41;}
.st408{fill:#53827D;}
.st409{fill:#35262B;}
.st410{fill:#30272D;}
.st411{fill:#231D1D;}
.st412{fill:#50ABA4;}
.st413{fill:#73BAA8;}
.st414{fill:#58B2BA;}
.st415{fill:#95C7AE;}
.st416{fill:#45AAB2;}
.st417{fill:#FFE577;}
.st418{fill:#018B96;}
.st419{fill:#20968A;}
.st420{fill:#EAD934;}
.st421{fill:#FF00FF;}
.st422{fill:#6AD5D8;}
.st423{fill:#FFF2BD;}
.st424{fill:#7FC6A6;}
.st425{fill:#4DAAA2;}
.st426{fill:#74C198;}
.st427{fill:#67BA9E;}
.st428{fill:#85C8CE;}
.st429{fill:#D1E29C;}
.st430{fill:#A6D9DA;}



/* SMALL SCREENS */
@media screen and (max-width:1200px) {
	#theIntroInner{ transform: translate(-8363px, 9363px) rotate(14.5deg); }
	.move1 #theIntroInner{ transform: translate(-8317px, 10881px) rotate(6.5deg); }
	.move2 #theIntroInner{ transform: translate(-7227px, 10817px) rotate(0deg); }
	.move3 #theIntroInner{ transform: translate(0px, 0px); }

	#theWords, #theGirl{ transform: scale(20); }
	.move3 #theGirl{ transform: scale(0.35); }
	.move3 #theWords{ transform: scale(0.35); }
	.move4 #theGirl{ transform: scale(0.4); }
}
@media screen and (max-width:1100px) {
	#theIntroInner{ transform: translate(-7944px, 8894px) rotate(14.5deg); }
	.move1 #theIntroInner{ transform: translate(-7901px, 10336px) rotate(6.5deg); }
	.move2 #theIntroInner{ transform: translate(-6865px, 10275px) rotate(0deg); }
	.move3 #theIntroInner{ transform: translate(0px, 0px); }

	#theWords, #theGirl{ transform: scale(19); }
	.move3 #theGirl{ transform: scale(0.35); }
	.move3 #theWords{ transform: scale(0.35); }
	.move4 #theGirl{ transform: scale(0.4); }
}
@media screen and (max-width:1000px) {
	#theIntroInner{ transform: translate(-7130px, 7983px) rotate(14.5deg); }
	.move1 #theIntroInner{ transform: translate(-7091px, 9277px) rotate(6.5deg); }
	.move2 #theIntroInner{ transform: translate(-6161px, 9222px) rotate(0deg); }
	.move3 #theIntroInner{ transform: translate(0px, 0px); }

	#theWords, #theGirl{ transform: scale(17); }
	.move3 #theGirl{ transform: scale(0.35); }
	.move3 #theWords{ transform: scale(0.35); }
	.move4 #theGirl{ transform: scale(0.4); }
}
@media screen and (max-width:900px) {
	#theIntroInner{ transform: translate(-6690px, 7490px) rotate(14.5deg); }
	.move1 #theIntroInner{ transform: translate(-6654px, 8705px) rotate(6.5deg); }
	.move2 #theIntroInner{ transform: translate(-5782px, 8654px) rotate(0deg); }
	.move3 #theIntroInner{ transform: translate(0px, 0px); }

	#theWords, #theGirl{ transform: scale(16); }
	.move3 #theGirl{ transform: scale(0.35); }
	.move3 #theWords{ transform: scale(0.35); }
	.move4 #theGirl{ transform: scale(0.4); }
}
@media screen and (max-width:800px) {
	#theIntroInner{ transform: translate(-5430px, 6080px) rotate(14.5deg); }
	.move1 #theIntroInner{ transform: translate(-5400px, 7065px) rotate(6.5deg); }
	.move2 #theIntroInner{ transform: translate(-4690px, 7020px) rotate(0deg); }
	.move3 #theIntroInner{ transform: translate(0px, 0px); }

	#theWords, #theGirl{ transform: scale(13); }
	.move3 #theGirl{ transform: scale(0.35); }
	.move3 #theWords{ transform: scale(0.35); }
	.move4 #theGirl{ transform: scale(0.4); }
}
@media screen and (max-width:700px) {
	#theIntroInner{ transform: translate(-5015px, 5614px) rotate(14.5deg); }
	.move1 #theIntroInner{ transform: translate(-4987px, 6524px) rotate(6.5deg); }
	.move2 #theIntroInner{ transform: translate(-4333px, 6485px) rotate(0deg); }
	.move3 #theIntroInner{ transform: translate(0px, 0px); }

	#theWords, #theGirl{ transform: scale(12); }
	.move3 #theGirl{ transform: scale(0.35); }
	.move3 #theWords{ transform: scale(0.35); }
	.move4 #theGirl{ transform: scale(0.4); }
}
@media screen and (max-width:600px) {
	#theIntroInner{ transform: translate(-4600px, 5150px) rotate(14.5deg); }
	.move1 #theIntroInner{ transform: translate(-4575px, 5985px) rotate(6.5deg); }
	.move2 #theIntroInner{ transform: translate(-3975px, 5950px) rotate(0deg); }
	.move3 #theIntroInner{ transform: translate(0px, 0px); }

	#theWords, #theGirl{ transform: scale(11); }
	.move3 #theGirl{ transform: scale(0.35); }
	.move3 #theWords{ transform: scale(0.35); }
	.move4 #theGirl{ transform: scale(0.4); }
}
@media screen and (max-width:500px) {
	#theIntroInner{ transform: translate(-3344px, 3744px) rotate(14.5deg); }
	.move1 #theIntroInner{ transform: translate(-3326px, 4351px) rotate(6.5deg); }
	.move2 #theIntroInner{ transform: translate(-2890px, 4326px) rotate(0deg); }
	.move3 #theIntroInner{ transform: translate(0px, 0px); }

	#theWords, #theGirl{ transform: scale(8); }
	.move3 #theGirl{ transform: scale(0.2); }
	.move3 #theWords{ transform: scale(0.2); }
	.move4 #theGirl{ transform: scale(0.25); }
}
@media screen and (max-width:450px) {
	#theIntroInner{ transform: translate(-2926px, 3275px) rotate(14.5deg); }
	.move1 #theIntroInner{ transform: translate(-2910px, 3806px) rotate(6.5deg); }
	.move2 #theIntroInner{ transform: translate(-2528px, 3784px) rotate(0deg); }
	.move3 #theIntroInner{ transform: translate(0px, 0px); }

	#theWords, #theGirl{ transform: scale(7); }
	.move3 #theGirl{ transform: scale(0.2); }
	.move3 #theWords{ transform: scale(0.2); }
	.move4 #theGirl{ transform: scale(0.25); }
}
@media screen and (max-width:400px) {
	#theIntroInner{ transform: translate(-2507px, 2807px) rotate(14.5deg); }
	.move1 #theIntroInner{ transform: translate(-2493px, 3262px) rotate(6.5deg); }
	.move2 #theIntroInner{ transform: translate(-2166px, 3243px) rotate(0deg); }
	.move3 #theIntroInner{ transform: translate(0px, 0px); }

	#theWords, #theGirl{ transform: scale(6); }
	.move3 #theGirl{ transform: scale(0.175); }
	.move3 #theWords{ transform: scale(0.175); }
	.move4 #theGirl{ transform: scale(0.2); }
}