body {width: 100vw;height: 88vh;}

.holder {height: 100%;width: 100%;}
.wrapper {width: 100%;height: 100%;}
.layout {width: 100%;height: 100%;position: relative;display: flex;flex-flow: column nowrap;justify-content: center;align-items: center; overflow: hidden;}
.layout .c1 {max-width: 43.5rem;flex: 0 1 auto;transform: translateX(3rem);opacity: 0;transition: all 0.5s cubic-bezier(0, 0, 0, 1) 0.2s;width: 90vw;display: flex;justify-content: flex-start;align-items: center;}
.layout .c1 .mail {width: 22rem;justify-content: flex-end;}
.layout .c1 .mail a {}
.layout .c1 .mail a svg use {fill: #f8d200;}
.layout .c1 .mail a:hover svg use {fill: #fff;}
.layout .c1 .social {margin: 0 0 0 1rem;}
.layout .c1 .social a {}
.layout .c1 .social a svg {}
.layout .c1 .social a svg use {fill: #f8d200;}
.layout .c1 .social a + a {}
.layout .c1 .social a.youtube {}
.layout .c1 .social a:hover svg use { fill: #fff;}
.layout .c2 {max-width: 43.5rem;flex: 0 1 auto;transform: translateX(-3rem);opacity: 0;transition: all 0.5s cubic-bezier(0, 0, 0, 1) 0s;width: 90vw;}
.layout .c2 img {width: 100%;height: auto;display: block;}
.layout .c3 {max-width: 43.5rem;flex: 0 1 auto;transform: translateX(3rem);opacity: 0;transition: all 0.5s cubic-bezier(0, 0, 0, 1) 0.1s;width: 90vw;display: flex;flex-flow: row nwrap;align-items: center;}
.layout .c3 img {display: block;width: 19rem;height: auto;margin: 0 0 0 1rem;}
.layout .c3 .galleries {margin: 0 0 0 7rem;font-size: 2rem;font-weight: 300;width: 16.5rem;text-align: center;}
.layout .c3 .galleries a {text-decoration: none;color: #fff;}
.layout .c3 .galleries a:hover {color: #f8d200;}

body.loaded .c1 {transform: translateX(0); opacity: 1;}
body.loaded .c2 {transform: translateX(0); opacity: 1;}
body.loaded .c3 {transform: translateX(0); opacity: 1;}
body.loaded .c4 {transform: translateY(0); opacity: 1;}


@media (max-width: 1024px) {/**/
	html {font-size: 3vw;}
	.layout .c1 .mail {width: 14.5rem;}
    .layout .c1 .mail a {width: 7.5vw;height: 5vw;}
	.layout .c1 .social {margin: 0 0 0 2vw;}
	.layout .c1 .social a {width: 5vw;height: 5vw;}
	.layout .c1 .social a.youtube {width: 7.5vw;margin: 0 0 0 2vw;}
	.layout .c3 .galleries {margin: 0 0 0 3rem;}
	.layout .c3 img {width: 10rem;margin: 0;}
}