/* ================================================================ *\
	#Reset
\* ================================================================ */

* { padding: 0; margin: 0; outline: 0; }

/* ================================================================ *\
	#Base
\* ================================================================ */

article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section { display: block; }

html,
body { height: 100%; width: 100%; overflow: hidden; }

html { overflow: hidden; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { background: #fff; font-family: 'MuseoSans', sans-serif; font-size: 10px; line-height: 1.67; color: #888; font-weight: 300; -webkit-font-smoothing: antialiased; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

img { border: 0; vertical-align: middle; }
strong { font-weight: bold; }
small { font-size: 80%; }

button,
input,
select,
textarea { font-family: inherit; font-size: inherit; color: inherit; -webkit-font-smoothing: antialiased; }

button,
input[type="button"],
input[type="reset"],
input[type="submit"] { cursor: pointer; }

button::-moz-focus-inner,
input::-moz-focus-inner { padding: 0; border: 0; }

button { overflow: visible; }
textarea { overflow: auto; resize: none; }


table { border-collapse: collapse; border-spacing: 0; }
th,
td { padding: 0; }

p, ul, ol { padding-bottom: 1.67em; }

h1 { font-weight: 100; font-size: 6em; padding-bottom: 0.5em; line-height: 1.2; }

h3 { font-weight: 100; font-size: 2.4em; line-height: 1.4; }

h4 { font-weight: 700; font-size: 1.8em; }

h5 { font-weight: 700; font-size: 1.5em; padding-bottom: 2.27em; }

::selection { color: #fff; background: #0db14b; }
::-moz-selection { color: #fff; background: #0db14b; }

/* ================================================================ *\
	#Helpers
\* ================================================================ */

.alignleft { float: left; }
.alignright { float: right; }
.hidden { display: none; visibility: hidden; }

.clearfix:after { display: table; content: ' '; clear: both; }

[class^='sprite-'] { display: inline-block; border: none; text-align: center; vertical-align: middle; font-size: 0; line-height: 0; text-indent: -4000px; }


/* ===========================
	#Modules
============================ */

/* === Logo === */
.logo { position: absolute; }
.side-logo { top: 28px; left: 48px; z-index: 3; }
.main-logo { top: 50%; left: 48px; margin-top: -50px; z-index: 3; }

/* === Gallery === */
.gallery { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; }
.gallery-items { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden; }

.gallery-control-button { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; background: transparent; border: 0 none; }
.gallery-prev { left: 0; cursor: url(images/gallery-arrow-prev.png), auto; }
.gallery-next { right: 0; cursor: url(images/gallery-arrow-next.png), auto; }
.gallery-prev:active { cursor: url(images/gallery-arrow-prev-active.png), auto; }
.gallery-next:active { cursor: url(images/gallery-arrow-next-active.png), auto; }

.gallery-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; opacity: 0;
	-webkit-background-size: cover;
	        background-size: cover;
	
	-webkit-transition: 500ms;
	     -o-transition: 500ms;
	        transition: 500ms;
}

.gallery-item.current { opacity: 1; z-index: 2; }

.gallery-zooming .gallery-item.current {
	-webkit-transition: 20000ms -webkit-transform, 500ms opacity;
	     -o-transition: 20000ms -o-transform, 500ms opacity;
	        transition: 20000ms transform, 500ms opacity;

	-webkit-transform: scale(1.25);
	    -ms-transform: scale(1.25);
	     -o-transform: scale(1.25);
	        transform: scale(1.25);

}


/* === Copyrights === */
.copyrights { font-size: 1.2em; font-weight: 300; }
.copyrights small { font-size: 1em; color: #0db14b; }


/* === Side Content === */
.side-content { position: absolute; top: 0; height: 100%; padding: 12px 0; right: 0; z-index: 4; background: #fff;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;

	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	     -o-transform: translateX(100%);
	        transform: translateX(100%);
	
	-webkit-transition: 300ms;
	     -o-transition: 300ms;
	        transition: 300ms;
}

.side-content-panel { height: 100%; position: relative; min-width: 240px; background: #fff; display: inline-block;
	-webkit-transition: 300ms;
	     -o-transition: 300ms;
	        transition: 300ms;
}


.side-content-visible .side-content {
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
}



/* === Side Content Toggle === */
.action-block-button { width: 100px; height: 100px; background: #fff; color: #000; border: 0 none; overflow: hidden;
	-webkit-transition: 300ms;
	     -o-transition: 300ms;
	        transition: 300ms;
}
.side-content-toggle { position: absolute; top: 50%; right: 100%; margin-top: -50px; }
.menu-icon { position: absolute; top: 50%; left: 50%; width: 24px; height: 20px; margin: -10px 0 0 -12px;
	-webkit-transition: 250ms;
	     -o-transition: 250ms;
	        transition: 250ms;
}
.menu-icon i { position: absolute; left: 0; width: 100%; height: 4px; background: #000; border-radius: 2px;
	-webkit-transition: background 300ms, 400ms cubic-bezier(0.680, -1, 0.265, 2);
	     -o-transition: background 300ms, 400ms cubic-bezier(0.680, -1, 0.265, 2);
	        transition: background 300ms, 400ms cubic-bezier(0.680, -1, 0.265, 2);
}
.menu-icon i:first-child { top: 2px; margin-top: -2px; }
.menu-icon i:first-child + i { top: 50%; margin-top: -2px; }
.menu-icon i:last-child { bottom: 2px; margin-bottom: -2px; }


/* === Side Content Toggle States === */
.action-block-button:hover { background: #0db14b; color: #fff; }
.action-block-button:hover .menu-icon { height: 12px; margin-top: -6px; }
.action-block-button:hover i { background: #fff; }


.side-content-toggle:hover .menu-icon i:first-child {
	-webkit-transform: translateY(-6px);
	    -ms-transform: translateY(-6px);
	     -o-transform: translateY(-6px);
	        transform: translateY(-6px);
}
.side-content-toggle:hover .menu-icon i:last-child {
	-webkit-transform: translateY(6px);
	    -ms-transform: translateY(6px);
	     -o-transform: translateY(6px);
	        transform: translateY(6px);
}

.action-block-button:hover .menu-icon-close i,
.side-content-visible .side-content-toggle:hover .menu-icon i { width: 30px; margin-left: -3px; }

.menu-icon-close i:first-child,
.side-content-visible .side-content-toggle .menu-icon i:first-child { top: 50%;
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}
.menu-icon-close i:first-child + i,
.side-content-visible .side-content-toggle .menu-icon i:first-child + i { opacity: 0;
	-webkit-transform: translateX(50%);
	    -ms-transform: translateX(50%);
	     -o-transform: translateX(50%);
	        transform: translateX(50%);
}
.menu-icon-close i:last-child,
.side-content-visible .side-content-toggle .menu-icon i:last-child { bottom: 50%;
	-webkit-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}


/* === Nav === */
.nav-holder { height: 100%; overflow: hidden; }
.nav { width: 100%; height: 100%; display: table; text-align: center; font-weight: 100;
	-webkit-transition: 400ms;
	     -o-transition: 400ms;
	        transition: 400ms;
}
.nav ul { display: table-cell; vertical-align: middle; list-style: none outside none; padding: 0; }
.nav li { padding: 8px 0; }
.nav a { display: block; padding: 5px 0; font-size: 2.4em; color: #aaa;
	-webkit-transition: 250ms;
	     -o-transition: 250ms;
	        transition: 250ms;
}
.nav a:hover,
.nav .current a { color: #0db14b; text-decoration: none; }


/* === Side Content Main === */
.side-content-panel-main { width: 400px; height: 100%; border-top: 100px solid transparent; position: absolute; top: 0; left: 0;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;

	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	     -o-transform: translateX(100%);
	        transform: translateX(100%);

	-webkit-transition: 500ms;
	     -o-transition: 500ms;
	        transition: 500ms;
}
.side-content-panel-main-inner { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 50px; max-height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}



/* === Article === */
.article-head h1 { color: #0db14b; }
.article-body { font-size: 1.5em; }


/* === Side Content Additional === */
.side-contact { width: 242px; position: absolute; top: 12px; bottom: 12px; right: 12px; z-index: 3; background: #0db14b; color: #fff;
	-webkit-transform: translateX(50%);
	    -ms-transform: translateX(50%);
	     -o-transform: translateX(50%);
	        transform: translateX(50%);

	-webkit-transition: 300ms;
	     -o-transition: 300ms;
	        transition: 300ms;
}

.contact { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 36px 0 46px; max-height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.contact-head { padding-bottom: 3.4em; }
.contact-body { font-size: 1.4em; }

.contact-phones { list-style: none outside none; padding-bottom: 2.4em; }
.contact-phones li { padding-bottom: 1px; }
.contact-phones strong { float: left; min-width: 24px; }

.contact-address { padding-bottom: 2.4em; }

.contact-links { list-style: none outside none; padding-bottom: 40px; }
.contact-links li { padding: 0 10px 0 0; display: inline-block; }


/* === Project Categories === */
.project-categories { list-style: none outside none; padding-bottom: 10px; }
.project-categories li { padding-bottom: 24px; }
.project-categories a { height: 54px; border: 3px solid; font-size: 1.2em; line-height: 54px; text-align: center; display: block; color: #bbb; font-weight: 700; text-transform: uppercase;
	-webkit-transition: 200ms;
	     -o-transition: 200ms;
	        transition: 200ms;
}
.project-categories .current a,
.project-categories a:hover { background: #0db14b; border-color: #0db14b; color: #fff; text-decoration: none; }

/* === Map === */
.map { position: absolute; top: 12px; left: 12px; right: 12px; bottom: 12px; z-index: 0; overflow: hidden; opacity: 0;
	-webkit-transition: 600ms;
	     -o-transition: 600ms;
	        transition: 600ms;
}
.map iframe { width: 100%; height: 100%;
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);

	-webkit-transition: 600ms;
	     -o-transition: 600ms;
	        transition: 600ms;
}

.map-close { position: absolute; top: 0; right: 0; z-index: 2;
	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	     -o-transform: translateX(100%);
	        transform: translateX(100%);

	-webkit-transition: 600ms;
	     -o-transition: 600ms;
	        transition: 600ms;
}


/* === Projects === */
.projects-list-holder { position: absolute; top: 0; left: 0; right: 0; bottom: -12px; -webkit-transform: translate3d(0,0,0); }
.projects-list { position: absolute; top: 0; left: 0; right: 0; height: 100%;
	-webkit-transition: 300ms;
	     -o-transition: 300ms;
	        transition: 300ms;
}
.projects-page .projects-list { right: 400px; }
.project.unnecessary { opacity: 0; visibility: hidden; z-index: 1; }

.project.adding-in {
	-webkit-transition: none;
	     -o-transition: none;
	        transition: none;
}
.project { height: 25%; position: absolute; z-index: 3; top: 0; left: 0; right: 0; cursor: pointer; will-change: transform, height;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;

	-webkit-transition: 600ms;
	     -o-transition: 600ms;
	        transition: 600ms;
}

.project .gallery { z-index: 1;
	-webkit-transition: 200ms;
	     -o-transition: 200ms;
	        transition: 200ms;
	
	-webkit-transform-origin: left center;
	   -moz-transform-origin: left center;
	    -ms-transform-origin: left center;
	     -o-transform-origin: left center;
	        transform-origin: left center;
}
.project[style*="(0%)"],
.project[style*="(100%)"],
.project[style*="(200%)"],
.project[style*="(300%)"] { z-index: 4; }


.project:hover .gallery {
	-webkit-transform: scale(1.1);
	    -ms-transform: scale(1.1);
	     -o-transform: scale(1.1);
	        transform: scale(1.1);
}
.project:hover .project-small-title span { opacity: 0; }
.project:hover .project-small-title span + span { opacity: 1; }

.project-expanded:hover .gallery {
	-webkit-transform: none;
	    -ms-transform: none;
	     -o-transform: none;
	        transform: none;
}

.projects-expanded .projects-list { right: 0; }
.project .gallery-control-button { display: none; }
.project-expanded { cursor: default; z-index: 9; }
.project-expanded .gallery-control-button { display: block; }

.project-inner { position: relative; overflow: hidden; height: 100%; border-bottom: 12px solid #fff; background: #fff url(images/preloader.gif) no-repeat center center; 
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;

	-webkit-transition: 600ms;
	     -o-transition: 600ms;
	        transition: 600ms;
}

.project-inner .gallery { background: none; }

.projects-logo { position: absolute; top: 28px; right: 192px; z-index: 10; opacity: 0; visibility: visible;
	-webkit-transition: 600ms;
	     -o-transition: 600ms;
	        transition: 600ms;
}

.projects-expanded .projects-logo { opacity: 1; visibility: visible; }

.project-content { position: absolute; bottom: 0; right: 0; z-index: 2; color: #fff; text-align: right; padding-bottom: 32px; opacity: 0;
	-webkit-transition: 600ms;
	     -o-transition: 600ms;
	        transition: 600ms;
}

.project-small-title { position: absolute; z-index: 3; top: 50%; left: 0; text-transform: uppercase; color: #fff; padding-left: 50px; margin-top: -.8em;
	-webkit-transition: 600ms;
	     -o-transition: 600ms;
	        transition: 600ms;
}
.project-small-title span {
	-webkit-transition: 600ms;
	     -o-transition: 600ms;
	        transition: 600ms;
}
.project-small-title span + span { position: absolute; top: 0; left: 0; opacity: 0; width: 100%; font-weight: 900; padding-left: 50px; }
.projects-expanded .project-small-title { opacity: 0;
	-webkit-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
	     -o-transform: translateX(-100%);
	        transform: translateX(-100%);
}

.project-expanded .project-content { opacity: 1; }
.project-content-head { padding-bottom: 1em; }
.project-content-head h1 { display: inline-block ; padding: 0 50px; opacity: 0;
	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	     -o-transform: translateX(100%);
	        transform: translateX(100%);

	-webkit-transition: 800ms 800ms;
	     -o-transition: 800ms 800ms;
	        transition: 800ms 800ms;
}

.project-content-body { font-size: 1.5em; }
.project-details { list-style: none outside none; display: inline-block; padding: 0; }
.project-details li { padding: 0 50px 7px; opacity: 0;
	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	     -o-transform: translateX(100%);
	        transform: translateX(100%);

	-webkit-transition: 800ms 1200ms;
	     -o-transition: 800ms 1200ms;
	        transition: 800ms 1200ms;
}
.project-details li:nth-child(2) {
	-webkit-transition: 800ms 1600ms;
	     -o-transition: 800ms 1600ms;
	        transition: 800ms 1600ms;
}
.project-details strong { display: block; }

.project .gallery { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.project-close { position: absolute; top: 0; right: 0; z-index: 2;
	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	     -o-transform: translateX(100%);
	        transform: translateX(100%);
	-webkit-transition: 300ms, -webkit-transform 400ms 600ms;
	     -o-transition: 300ms, -o-transform 400ms 600ms;
	        transition: 300ms, transform 400ms 600ms;
}

.project-expanded .project-close {
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
}

.project-expanded .project-content-head h1,
.project-expanded .project-details li { opacity: 1;
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
}
.projects-expanded .project-inner { height: 400%; }

.project-expanded.unnecessary { opacity: 1; visibility: visible; }


.projects-expanded .side-content-toggle,
.projects-expanded .side-content {
	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	     -o-transform: translateX(100%);
	        transform: translateX(100%);
}


/* ===========================
	#Page states
============================ */

.contact-page .wrapper {
	-webkit-transform: translateX(-254px);
	    -ms-transform: translateX(-254px);
	     -o-transform: translateX(-254px);
	        transform: translateX(-254px);
}
.contact-page .side-contact {
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
}


.projects-page .side-content-panel,
.about-page .side-content-panel { min-width: 400px; }

.projects-page .nav,
.about-page .nav {
	-webkit-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
	     -o-transform: translateX(-100%);
	        transform: translateX(-100%);
}

.projects-page #projects-content,
.about-page #about-content {
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
}



.map-visible .side-contact {
	-webkit-transform: translateX(100%);
	    -ms-transform: translateX(100%);
	     -o-transform: translateX(100%);
	        transform: translateX(100%);

	-webkit-transition: 600ms;
	     -o-transition: 600ms;
	        transition: 600ms;

}
.map-visible .footer {
	-webkit-transform: translateY(100%);
	    -ms-transform: translateY(100%);
	     -o-transform: translateY(100%);
	        transform: translateY(100%);
	
	-webkit-transition: 600ms;
	     -o-transition: 600ms;
	        transition: 600ms;
}

.map-visible .wrapper {
	-webkit-transform: translateX(-100%);
	    -ms-transform: translateX(-100%);
	     -o-transform: translateX(-100%);
	        transform: translateX(-100%);

	-webkit-transition: 800ms;
	     -o-transition: 800ms;
	        transition: 800ms;
}

.map-visible .map { opacity: 1;
	-webkit-transition: 800ms 600ms;
	     -o-transition: 800ms 600ms;
	        transition: 800ms 600ms;
}

.map-visible iframe {
	-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
	
	-webkit-transition: 1200ms 600ms;
	     -o-transition: 1200ms 600ms;
	        transition: 1200ms 600ms;
}
.map-visible .map-close {
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
	
	-webkit-transition: 300ms, -webkit-transform 300ms 1200ms;
	     -o-transition: 300ms, -o-transform 300ms 1200ms;
	        transition: 300ms, transform 300ms 1200ms;
}


.map-hiding .footer,
.map-hiding .wrapper,
.map-hiding .side-contact {
	-webkit-transition: 800ms;
	     -o-transition: 800ms;
	        transition: 800ms;
}

/* ===========================
	#Main Style
============================ */

body { border: 12px solid #fff; overflow: hidden;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
body:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: 12px; background: #fff; }

.wrapper { height: 100%; position: relative; z-index: 4; overflow: hidden;
	-webkit-transition: 300ms;
	     -o-transition: 300ms;
	        transition: 300ms;
}
.pages { height: 100%; position: relative;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.page { height: 100%; opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; width: 100%;
	-webkit-transition: 800ms;
	     -o-transition: 800ms;
	        transition: 800ms;
}
.page-current { opacity: 1; visibility: visible; }

.content { height: 100%; }

.footer { position: fixed; bottom: 0; left: 0; z-index: 5; color: #fff; padding: 0 24px 20px; }


.preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99; background: #fff url(images/preloader.gif) no-repeat center center;
	-webkit-transition: 1000ms;
	     -o-transition: 1000ms;
	        transition: 1000ms;
}

.loaded .preloader { opacity: 0; visibility: hidden; } 


.projects-list:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff url(images/preloader.gif) no-repeat center center; z-index: 99; opacity: 0; visibility: hidden;

	-webkit-transition: 600ms;
	     -o-transition: 600ms;
	        transition: 600ms;
}

.projects-loading .projects-list:after { opacity: 1; visibility: visible; }



.side-content-toggle { margin-right: -100px;
	-webkit-transition: 300ms, margin 300ms 1200ms;
	     -o-transition: 300ms, margin 300ms 1200ms;
	        transition: 300ms, margin 300ms 1200ms;

}

.main-logo {
	-webkit-transform: translateX(-400px);
	    -ms-transform: translateX(-400px);
	     -o-transform: translateX(-400px);
	        transform: translateX(-400px);

	-webkit-transition: -webkit-transform 400ms 800ms, opacity 300ms;
	     -o-transition: -o-transform 400ms 800ms, opacity 300ms;
	        transition: transform 400ms 800ms, opacity 300ms;
}

.loaded .side-content-toggle { margin-right: 0; }
.loaded .main-logo {
	-webkit-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
}

.contact-page .main-logo { opacity: 0; }


@media (max-width: 1024px) {

	.side-contact { opacity: 0; visibility: hidden;
		-webkit-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}

	.contact-page .side-contact { opacity: 1; visibility: visible; }
}

@media (max-width: 1023px) {

	.wrapper { overflow: hidden; width: 100%; }

	.action-block-button { width: 75px; height: 75px; }
	.side-content-toggle { position: fixed; top: 0; right: 0; z-index: 8; margin: 0; }

	.side-logo { top: 0; }
	.home-page .side-logo { opacity: 0; }

	.side-content-panel { min-width: 215px; }


	.pages {
		-webkit-transition: 300ms;
		     -o-transition: 300ms;
		        transition: 300ms;
	}

	.footer { text-align: center; right: 0; }
	.footer small { display: block; }

	.action-block-button:hover { background: #fff; color: #000; }
	.action-block-button:hover i { background: #000; }

	.side-content-visible .footer { text-align: left; }


	.side-content-visible .pages {
		-webkit-transform: translateX(-215px);
		    -ms-transform: translateX(-215px);
		     -o-transform: translateX(-215px);
		        transform: translateX(-215px);
	}

	.side-contact { z-index: 6;	}

	.contact-page .wrapper {
		-webkit-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}

	.map-visible .wrapper { opacity: 0; visibility: hidden;
		-webkit-transform: translateX(-100%);
		    -ms-transform: translateX(-100%);
		     -o-transform: translateX(-100%);
		        transform: translateX(-100%);
	}
	.map-visible .side-contact { opacity: 0; visibility: hidden; }

	.map-visible .side-content-toggle { opacity: 0; visibility: hidden; }

	.main-logo { left: 0; width: 100%; text-align: center; margin-top: -70px; }

	.projects-page .projects-list { right: 0; }

	.projects-list-page .side-content {
		-webkit-transform: translateX(100%);
		    -ms-transform: translateX(100%);
		     -o-transform: translateX(100%);
		        transform: translateX(100%);
	}
	.projects-list-page .pages {
		-webkit-transform: translateX(0);
		    -ms-transform: translateX(0);
		     -o-transform: translateX(0);
		        transform: translateX(0);
	}

	.project-close { top: -12px; right: -12px; }

	.wrapper.home-page,
	.wrapper.home-page .pages,
	.wrapper.home-page .page { height: 100%; overflow: hidden; }

	.wrapper.home-page ~ .footer { position: fixed; }


	.main-logo { opacity: 0; }

	.home-page .main-logo { opacity: 1; }

	.project:hover .project-small-title span { opacity: 1; }
	.project-small-title span + span { display: none; }

}

@media (max-width: 767px) {
	html { overflow: auto; }
	body { overflow: visible; }

	h1 { font-size: 4em; }

	.main-logo { opacity: 1; }

	.wrapper,
	.pages { height: auto; overflow: visible; }

	.page { position: relative; display: none; }
	.page-current { display: block; }

	.content:after { content: ''; display: block; padding-top: 100%; }

	.nav-holder { position: fixed; top: 0; right: 0; height: 100%; background: #fff; z-index: 9; width: 190px; opacity: 0; visibility: hidden;
		-webkit-transition: 300ms;
		     -o-transition: 300ms;
		        transition: 300ms;
	}

	.side-content-visible .nav-holder { opacity: 1; visibility: visible; }

	.side-content-visible .side-content,
	.side-content { position: static; height: auto;
		-webkit-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}
	.side-content-visible .pages {
		-webkit-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}

	.side-content-panel-main { position: static; border: 0 none; width: auto; display: none;
		-webkit-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}

	.side-content-panel { display: block; }

	.article-head { padding-top: 10px; }
	.article-head h1 { font-size: 4.6em; }

	.side-logo { display: none; }

	.side-contact { position: relative; z-index: 1; width: auto; background: transparent; color: #888;
		-webkit-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}

	.projects-page .nav,
	.about-page .nav {
		-webkit-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	} 

	.contact { position: static; padding: 0 24px; margin-top: -18px; }
	.contact h3 { color: #0db14b; font-size: 4.6em; }

	.projects-page .side-content-panel, .about-page .side-content-panel { min-width: 0; }

	.side-content-panel-main-inner { position: static; padding: 0 12px; }

	.about-page #about-content,
	.projects-page #projects-content { display: block; }

	.footer { position: static; }

	.map { position: fixed; }

	.projects-list-holder { position: fixed; top: 12px; right: 12px; bottom: 0; left: 12px; }

	.projects-list-page .side-content { display: none; }

	.project-content { text-align: left; padding-bottom: 10px; width: 100%; }

	.project-content-head h1 { padding-left: 25px; padding-right: 25px; }
	.project-details li { padding-left: 25px; padding-right: 25px; }

	.projects-logo { right: auto; left: 25px; }

	.project-small-title { padding-left: 12px; }

	.main-logo { margin-top: 0; }
	.main-logo i { position: absolute; top: 50%; left: 50%;
		-webkit-transform: translate(-50%, -50%) scale(.5);
		    -ms-transform: translate(-50%, -50%) scale(.5);
		     -o-transform: translate(-50%, -50%) scale(.5);
		        transform: translate(-50%, -50%) scale(.5);
	}

	.side-contact { display: none; }
	.contact-page .side-contact { display: block; }
	.contact-page .main-logo { opacity: 1; }

	.projects-list-page .pages {
		-webkit-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
	}

	.projects-list-holder { display: none; }
	.projects-list-page .projects-list-holder { display: block; overflow: hidden; }

	.side-content-visible .footer { display: none; }

	.footer { color: #000; }
	.home-page ~ .footer { color: #fff; }
}