@font-face {
  font-family: 'roboto'; src: url('../files/fnt/Roboto-Thin.eot');
  src: url('../files/fnt/Roboto-Thin.eot?#iefix') format('embedded-opentype'), url('../files/fnt/Roboto-Thin.woff2') format('woff2'), url('../files/fnt/Roboto-Thin.woff') format('woff'), url('../files/fnt/Roboto-Thin.ttf')  format('truetype'), url('../files/fnt/Roboto-Thin.svg#roboto') format('svg'); }
@font-face {
  font-family: 'MonaKo'; src: url('../files/fnt/MonaKo.eot');
  src: url('../files/fnt/MonaKo.eot?#iefix') format('embedded-opentype'), url('../files/fnt/MonaKo.woff2') format('woff2'), url('../files/fnt/MonaKo.woff') format('woff'), url('../files/fnt/MonaKo.ttf')  format('truetype'), url('../files/fnt/MonaKo.svg#MonaKo') format('svg'); }
@font-face {
  font-family: 'icomoon'; src: url('../files/fnt/icomoon.eot');
  src: url('../files/fnt/icomoon.eot?#iefix') format('embedded-opentype'), url('../files/fnt/icomoon.woff2') format('woff2'), url('../files/fnt/icomoon.woff') format('woff'), url('../files/fnt/icomoon.ttf')  format('truetype'), url('../files/fnt/icomoon.svg#icomoon') format('svg'); }

*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
* { margin:0; padding:0; border: 0 none; }
html, body { width: 100%; background-color: transparent; color: #000; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; speak: none;  background-color: #333; }
body { font: 300 normal normal 100%/1.5 roboto, sans-serif; }
	@media (min-width: 480px) { body { font-size: 130%; } }
	@media (min-width: 800px) { body { font-size: 150%; } }
	@media (min-width: 1200px) { body { font-size: 170%; } }

a { color: #a8ae7e; text-decoration: none; }






/* -------------------------------- 
Menu trigger
-------------------------------- */
#mnu { position: absolute; z-index: 4; top: 16px; right: 36px; height: 52px; width: 52px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.5); -webkit-transition: background 0.2s; transition: background 0.2s; }
#mnu .tricon, #mnu .tricon::before, #mnu .tricon::after { position: absolute; background-color: #fff; border-radius: 2px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); }
#mnu:hover { background-color: black; }
#mnu .tricon { display: inline-block; width: 18px;  height: 2px; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-transition: -webkit-transform 0.3s, background-color 0.3s; transition: transform 0.3s, background-color 0.3s; }
#mnu .tricon::before, #mnu .tricon::after { content: ''; top: 0; right: 0; width: 100%; height: 100%; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; }
#mnu .tricon::before { -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); transform: translateY(-6px); }
#mnu .tricon::after { -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); }
#mnu.opened .tricon { background-color: rgba(255, 255, 255, 0); }
#mnu.opened .tricon::before, #mnu.opened .tricon::after { background-color: white; }
#mnu.opened .tricon::before { -webkit-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); }
#mnu.opened .tricon::after { -webkit-transform: translateY(0) rotate(-45deg); -ms-transform: translateY(0) rotate(-45deg); transform: translateY(0) rotate(-45deg); }
#mnu.naved .tricon { -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); }
#mnu.naved .tricon::after { -webkit-transform: translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5); -ms-transform: translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5); transform: translateX(5px) translateY(3px) rotate(-45deg) scaleX(0.5); }
#mnu.naved .tricon::before { -webkit-transform: translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5); -ms-transform: translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5); transform: translateX(5px) translateY(-3px) rotate(45deg) scaleX(0.5); }

@media (min-width: 1024px) {
	#mnu.naved .tricon { -webkit-transform: translateY(-50%) translateX(-50%) rotate(-90deg); -ms-transform: translateY(-50%) translateX(-50%) rotate(-90deg); transform: translateY(-50%) translateX(-50%) rotate(-90deg); }
	#mnu.naved .tricon::after { -webkit-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5); -ms-transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5); transform: translateX(-5px) translateY(3px) rotate(45deg) scaleX(0.5); }
	#mnu.naved .tricon::before { -webkit-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5); -ms-transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5); transform: translateX(-5px) translateY(-3px) rotate(-45deg) scaleX(0.5); } }
	
/* -------------------------------- 
Projects
-------------------------------- */
#workspace { position: relative; z-index: 2; overflow-x: hidden;  overflow-y: scroll;}
#workspace.opened { -webkit-overflow-scrolling: touch; } /* smooth scroll on iOS devices */

#home { position: relative; z-index: 2; height: 100%; width: 100%; }
#home.opened { pointer-events: none; }

.menu_li { display: block; height: 25%; width: 100%; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s; -webkit-transform: translateZ(1px); -ms-transform: translateZ(1px); transform: translateZ(1px); overflow: hidden; }
.menu_li.selected { opacity: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0s; transition: transform 0s; }
.menu_li.slide-out { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); }

.menu_a { height: 100%; width: 100%; opacity: 0; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; cursor: pointer; } 

.menu_a.img1 { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }
.menu_a.img2 { -webkit-transform: translateY(-25%); -ms-transform: translateY(-25%); transform: translateY(-25%); }
.menu_a.img3 { -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.menu_a.img4 { -webkit-transform: translateY(-75%); -ms-transform: translateY(-75%); transform: translateY(-75%); }

.loaded .menu_a { opacity: 1; }

	@media only screen and (min-width: 1024px) {
		.menu_li { display: inline-block; height: 100%; width: 25%; float: left; }
		.menu_li.selected { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }
		.menu_li.slide-out { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); }
		.menu_a { width: 400%; }/* width equal to window width */
		
		.menu_a.img1 { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); }
		.menu_a.img2 { -webkit-transform: translateX(-25%); -ms-transform: translateX(-25%); transform: translateX(-25%); }
		.menu_a.img3 { -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); }
		.menu_a.img4 { -webkit-transform: translateX(-75%); -ms-transform: translateX(-75%); transform: translateX(-75%); }
	}

	
	
#page { position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; }
.page_li{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; }
.page_li.selected { z-index: 1; opacity: 1; -webkit-transition: opacity 0s; transition: opacity 0s; }

.image { height: 100%; background: no-repeat; }

.img1 { background-color: #d50000; background-image: url("../files/img/1.jpg"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.img2 { background-color: #e81474; background-image: url("../files/img/2.jpg"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.img3 { background-color: #aa00ff; background-image: url("../files/img/3.jpg"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.img4 { background-color: #1c00ea; background-image: url("../files/img/4.jpg"); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }


.title { position: absolute; width: 100%; left: 0; color: #ffffff; -webkit-transition: all 0.6s 0.2s; transition: all 0.6s 0.2s; text-align: center; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.title::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 80px; height: 1px; background: #ffffff; -webkit-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; }
.menu_a:hover .title::after { -webkit-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); }
#page .title::after { -webkit-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-transition: -webkit-transform 0.3s 0.3s; transition: transform 0.3s 0.3s; }



.title h2 { text-indent: 0px; color: #fff; text-shadow: 1px 1px 1px #333; font: 700 normal normal 140%/1 roboto, sans-serif; text-align: center; font-family: 'roboto' !important; padding: 0 0 0 0; }
.title p { text-indent: 0px; color: #fff; text-shadow: 1px 1px 1px #333; font: 100 italic normal 100%/1.2 MonaKo, sans-serif; text-align: center; font-family: 'MonaKo' !important; padding: 5px 10px; opacity: .8; }
.text p { text-indent: 40px; color: #000; text-shadow: 1px 1px 1px #ccc; font: 400 normal normal 120%/1.5 roboto, sans-serif; text-align: justify; font-family: 'roboto' !important; width: 90%; max-width: 1000px; margin: 0 auto; }

.imgg {display: block;position: relative; width: 80%;max-width: 800px; height: auto; margin: 0 auto; padding: 50px 0; background: #ffffff;}

@media (min-width: 480px) { .title h2 { padding: 0 0 10px 0; } .title p { padding: 5px 10px; } .title::after { bottom: -10px; width: 80px; } }
@media (min-width: 800px) { .title h2 { padding: 0 0 10px 0; } .title p { padding: 5px 10px; } .title::after { bottom: -10px; width: 60px; } }
@media (min-width: 1024px) { .title h2 { padding: 0 0 20px 0; } .title p { padding: 10px 30px; } .title::after { bottom: -10px; width: 50px; } }
	



.img1 .title { top: 5%; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }
.img2 .title { top: 30%; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }
.img3 .title { top: 55%; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } 
.img4 .title { top: 80%; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }
.selected .title { top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

@media only screen and (min-width: 1024px) { 
	.title { width: 25%; }
	.img1 .title { top: 40%; -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } 
	.img2 .title { top: 40%; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } 
	.img3 .title { top: 40%; -webkit-transform: translateX(200%); -ms-transform: translateX(200%); transform: translateX(200%); }
	.img4 .title { top: 40%; -webkit-transform: translateX(300%); -ms-transform: translateX(300%); transform: translateX(300%); }
	.selected .title { top: 40%; -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); }
}



.selected .title::after { -webkit-transition: -webkit-transform 0.3s 0s;transition: transform 0.3s 0s;-webkit-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); }




.text { display: none; padding: 50px 0; background: #ffffff; }
.content-visible .text { display: block; }




#workspace .scroll { display: block; position: absolute; z-index: 2; bottom: 30px; left: 50%; width: 44px; height: 44px; cursor: pointer; border: none; background: url("../img/arrow.svg") no-repeat center center; visibility: hidden; -webkit-transform: translateX(-50%) scale(0); -ms-transform: translateX(-50%) scale(0); transform: translateX(-50%) scale(0); -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s; transition: transform 0.3s 0s, visibility 0s 0.3s; }
#workspace .scroll:focus { outline: none; }
#workspace.opened .scroll { visibility: visible; -webkit-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0s; transition: transform 0.4s 0s, visibility 0s 0s; -webkit-animation: cd-translate 1.2s 0.8s; -moz-animation: cd-translate 1.2s 0.8s; animation: cd-translate 1.2s 0.8s; -webkit-animation-iteration-count: 2; -moz-animation-iteration-count: 2; animation-iteration-count: 2; }
#workspace.opened .scroll:hover { -webkit-transform: translateX(-50%) scale(1.2); -ms-transform: translateX(-50%) scale(1.2); transform: translateX(-50%) scale(1.2); }

@-webkit-keyframes cd-translate {
  0% { -webkit-transform: translateX(-50%) scale(1); }
  50% { -webkit-transform: translateY(10px) translateX(-50%) scale(1); }
  100% { -webkit-transform: translateX(-50%) scale(1); }
}

@keyframes cd-translate {
  0% { -webkit-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); }
  50% { -webkit-transform: translateY(10px) translateX(-50%) scale(1); -ms-transform: translateY(10px) translateX(-50%) scale(1); transform: translateY(10px) translateX(-50%) scale(1); }
  100% { -webkit-transform: translateX(-50%) scale(1); -ms-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); }
}
/* -------------------------------- 
 Navigation
-------------------------------- */
#nav { position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; overflow: auto; text-align: center; opacity: 0; -webkit-transition: opacity 0.6s; transition: opacity 0.6s; }
#nav_ul { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); list-style-type: none; }
.nav_a { display: inline-block; padding: 10px 20px; -webkit-transition: background 0.2s; transition: background 0.2s; color: #fff; text-shadow: 1px 1px 1px #333; font: 700 normal normal 140%/1 roboto, sans-serif; text-align: center; font-family: 'roboto' !important;  }
.nav_a :hover { background-color: #a8ae7e; }
.label { position: relative; margin: 2.4em 0 2em; color: #a8ae7e; text-transform: uppercase; font-weight: 700; font-size: 1.2rem; letter-spacing: 1px; }
.label::after { content: ''; position: absolute; left: 50%; right: auto; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: -16px; height: 1px; width: 40px; background-color: currentColor; }  /* line below .label*/
#nav.naved { opacity: 1; }
#nav.nav-clickable { z-index: 3; }



	/* ================================= FOOTER ===================================== */
#footer { display: none; position: relative; float left; width: 100%; }
.cont_inn_foot  { position: relative; float: left; width: 90%; margin: 0 5%; padding: 5% 0 0 0; }
.copyright{ position: relative; float: left; width: 60%; text-align: left; color: #bbb; text-shadow: 1px 1px 1px #222; font: 100 italic normal 90%/1 roboto, sans-serif; font-family: 'roboto' !important; }
.design{ position: relative; float: right; width: 35%; text-align: right; color: #bbb; text-shadow: 1px 1px 1px #222; font: 100 italic normal 90%/1 roboto, sans-serif; font-family: 'roboto' !important; }
.lnk { border-bottom: dotted 1px #aaa; color: #bbb; text-decoration: none; text-shadow: 1px 1px 1px #222; }	
	

/* Clearfix by Nicolas Gallagher
   ========================================================================== */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }