@charset "UTF-8";


/*************************************************************************

1. BASE
	1.1 Reset
	1.2 Fonts
	1.3 Accessibility Navigation & Hide
	1.4 Default Styles

2. LAYOUT
	2.1 Container
	2.2 Header
	2.3 Content
	2.4 Footer

3. PAGES
	3.1 Home page
	3.2 Sub page 1
	3.3 Sub page 2

4. MEDIA
	4.1 Print
	4.2 Handheld
	4.3 Lightbox

5. VIDEO
	5.1 Desktop

6. LIGHTBOX
	6.1 Lightbox Styles

7. RESPONSIVE
	7.1 Tablet (1024px)
	7.2 Mobile (768px)
	7.3 Mobile (500px)


*************************************************************************/


/* 1. BASE
--------------------------------------------------------------------------
========================================================================*/

/* 1.1 Reset
------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, input, textarea, table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	font-size: 100.01%;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}

h1, h2, h3, h4, h5, h6 { font-style:normal; font-weight:100; }

p {letter-spacing: 1px;}

blockquote, q { quotes: none; }
blockquote:before,
blockquote:after,
q:before,
q:after { content: ''; content: none; }
 
del { text-decoration: line-through; }
em { font-style: italic }
ins { text-decoration: underline; }

sub, sup { font-size: 60%; }
sub { vertical-align: -10%; }
sup { vertical-align: 20%; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }


/* 1.3 Fonts
------------------------------------------------------------------------*/

@font-face {
    font-family: 'MoreComp-Light';
    src: url('fonts/morecomp-light.eot');
    src: url('fonts/morecomp-light.eot?#iefix') format('embedded-opentype'),
         url('fonts/morecomp-light.woff') format('woff'),
         url('fonts/morecomp-light.ttf') format('truetype'),
         url('fonts/morecomp-light.svg#MoreComp-Light') format('svg');
    font-weight: 100;
    font-style: normal;
}


/* 1.3 Accessibility Navigation & Hide
------------------------------------------------------------------------*/

a:link,
a:visited { color: #5d837e; text-decoration: none; }
a:hover,
a.hover,
a:active,
a.active { color: #002123; text-decoration: none; }


/* 1.3 Default Styles
------------------------------------------------------------------------*/

* {
	/*font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	-o-font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	font-smooth: always;
	-moz-font-smooth: always;
	-o-font-smooth: always;
	-webkit-font-smooth: always;
	text-shadow: 0 0 1px rgba(0,0,0,0);*/
}

body {
	font: 13px/160% MoreComp-Light, "Times New Roman", Times, serif;
	color: #002123;
	overflow-y: hidden;
	/*
	-webkit-user-select: none;
    -webkit-text-size-adjust: none;
	*/
	animation-name: overflow;
  animation-duration: 1s;
	animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes overflow {
	from {overflow: visible;}
	to {overflow: hidden;}
}

h2 { font-size: 30px; line-height: 45px; margin-bottom: 12px; color: #D0E2DF;}
strong { text-transform: uppercase; font-weight: 100; }

.clear { clear: both; }
.f-left { float: left; }
.f-right { float: right; }
.t-left { text-align: left; }
.t-center { text-align: center; }
.t-right{ text-align: right; }


/* 2. LAYOUT
--------------------------------------------------------------------------
========================================================================*/


/* 2.1 Container
------------------------------------------------------------------------*/

#page { min-height: 100%;
min-width: 900px;
}

#strip {
	border-left: 22px solid #002123;
    width: 22px;
    height: 100%;
    overflow: visible;
    position: fixed;
    top: 0;
}


/* 2.2 Header
------------------------------------------------------------------------*/

#header-wrapper { padding: 18px 0 18px 47px; position: relative; z-index: 2; }
#header {}
#header > .inner { }

#logo-main { font-size: 30px; line-height:30px; height: 30px; overflow: hidden; margin-bottom:-5px; }
#logo-main a { color: #5d837e; }

ul#menu-main {
	color: #D0E2DF;
	height: 20px;
	padding-top:10px;
	overflow: hidden;
	text-transform: uppercase;
	letter-spacing:1px;
}
ul#menu-main > li {  float: left; display: inline-block; }
ul#menu-main > li > a { margin: 0 9px; }
ul#menu-main > li:first-child > a { margin-left: 0; }
ul#menu-main > li:last-child > a { margin-right: 0; }

div#header-mobile {
	display: none;
}

ul#menu-mobile {
	display:none;
}


/* 2.3 Content
------------------------------------------------------------------------*/

#content-wrapper { line-height: 20px; height: 507px;  position: relative; z-index: 1; }
#content > .inner { position: relative; }
#content.bg-color { background-color: #002123; color: #7A9995; height: 507px;}
#content.bg-color > .inner { padding: 50px 30px 30px 56px; }

#content p { margin-bottom: 12px; }
#content img { opacity: 0; }
#content { opacity: 0; }


#content-wrapper .column-wrapper.bg-color { background-color: #002123; }

.bg-color strong { color: #fff; font-weight: 100; }
.bg-color a { color: #7A9995; }
.bg-color a:hover,
.bg-color a.hover { color: #002123; }

#content .column-wrapper { display: inline-block; }
#content .column-wrapper .column { display: inline-block; float: left; width: 500px; padding-right: 35px; }
#content .column-wrapper .column:last-child { padding-right: 0; }


#slider { overflow: hidden; position: relative; z-index: 2; }
#slider-content { display: inline-block; position: relative; width: 300000px; left: 0; overflow:hidden; }
#slider-content > .slide { display: inline-block; float: left; border-left:1px solid #fff;}
#process #slider-content > .slide { border-left:none;}
#slider-content > .slide:first-child { border-left:none;}

#slider-nav { display: inline-block; width: 100%; letter-spacing:1px; }
#slider-nav #next-project { display: inline-block; float: right; margin-right: 30px; }
#slider-nav #next-project img { margin-left: 5px; }

#slider { margin-bottom: 25px; overflow: hidden; position: relative; z-index: 2; }
#slider-content { display: inline-block; position: relative; width: 30000px; left: 0; }
#slider-content > .slide { display: inline-block; float: left; }


.ui-loader { display: none; }




#mcs_container {  width: 100%; }
#mcs_container .customScrollBox { height: 322px; overflow:hidden; position: relative; }
#longtitle #mcs_container .customScrollBox {height: 283px;}
#mcs_container .customScrollBox .container { float: left; position: relative; width: 100%;}
#mcs_container .customScrollBox .content { float: left; display: inline-block; clear: both;}
#mcs_container .dragger_container{ float: left; height: 515px; position:relative; width: 0;  }
#mcs_container .dragger{ display: none; }
#mcs_container .dragger_pressed{ display: none; }
#mcs_container .scrollUpBtn,
#mcs_container .scrollDownBtn {
	background: url(../img/btn_scroller.png) no-repeat;
	height: 15px;
	margin-left: 95px;
	width: 236px;
}
#mcs_container .scrollUpBtn { background-position: 0 0; margin-bottom: 20px; }
#mcs_container .scrollDownBtn { background-position: 0 -15px; margin-top: 25px; }

#slider-caption-wrapper {
	position: absolute;
	right: 0;
	top: -10px;
	overflow: hidden;
	z-index: 3;
	width: 600px;
	display: block;
}

#mobile-caption-wrapper {
	display: none;
}

#slider-caption,
#slider-caption-vertical {  background-color: #002123; color: #7A9995; letter-spacing: 1px; }
#slider-caption { position: relative; right: -600px; width: 600px; z-index: 3; height:500px;}
#slider-caption > .inner { padding: 25px 90px 25px 80px; position: relative; z-index: 2;}
#slider-caption-vertical {
	color: #D0E2DF;
	text-transform: uppercase;
	transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	padding: 10px 22px 5px 10px;
	position: absolute;
	left: 0;
	top: 0;
	margin-left: 0;
	white-space: nowrap;
	z-index: 10;
}
#slider-caption-vertical span { display: inline-block; border-bottom: 1px solid #325550; padding-bottom: 7px; width: 100% !important; }
#slider-caption strong { color: #D0E2DF; font-weight:100; letter-spacing:1px;}
#slider-caption h2 { margin-bottom: 10px; line-height: 38px;}




#accordion {
	display: inline-block;
	height: 507px;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 2;
	top:-8px;
}
#accordion > .slide {
	border: 1px solid #fff;
	border-top: 0;
	border-bottom: 0;
	height: 507px;
	left: 0;
	overflow: hidden;
	padding-top: 8px;
	position: absolute;
	top: 0;
	width: 160px;
	z-index: 1;
}
#accordion > .slide:fist-child { border-left: 0; }
#accordion > .slide:last-child { border-right: 0; }
#accordion > .slide img { position: relative;}


.slide-caption {
	background-color: #002123;
	color: #D0E2DF;
	padding: 5px 20px 5px 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	position: absolute;
	right: 0;
	top: 0;
	white-space: nowrap;
	z-index: 100;
	display: none;
}



ul.pagination { display: inline-block; float: left; font-size: 14px; }

ul.pagination > li,
ul.pagination > li > a { display: inline-block; float: left; overflow: hidden; }
ul.pagination.square > li { margin-right: 1px; }
ul.pagination.square > li.arrow { margin: 0 0 0 8px; }
ul.pagination.square > li > a { background-color: #A3B9B6; height: 20px; width: 20px; }
ul.pagination.square > li > a:hover,
ul.pagination.square > li > a.hover,
ul.pagination.square > li > a.active { background-color: #002123; }
ul.pagination.square > li.arrow > a,
ul.pagination.square > li.arrow > a:hover { background-color: transparent; }

ul.pagination.number > li { margin-right: 8px; margin-top:-3px; }
ul.pagination.number > li.arrow a { margin-top: -1px; }
ul.pagination.number > li > a.active { color: #002123 !important; }



/* 2.4 Footer
------------------------------------------------------------------------*/

#footer-wrapper { padding: 40px 0 15px 50px; }
#footer {}
#footer > .inner {}



/* 3. PAGES
--------------------------------------------------------------------------
========================================================================*/


/* 3.1 Homepage
------------------------------------------------------------------------*/

#homepage {}

#homepage #content-wrapper { margin-left: 22px; padding-bottom: 25px; }


/* 3.2 Projects
------------------------------------------------------------------------*/

#projects {}


#projects #content-wrapper { padding-left: 50px; }

#projects #content #slider { margin-left: -28px; }



/* 3.3 Archive
------------------------------------------------------------------------*/

#archive {}

#archive #content-wrapper { line-height: 20px; padding-left: 50px; margin-bottom:-12px; overflow-y: hidden;}
#archive #content {}

#archive #content .column { width: 400px;line-height: 1.2px;}
@-moz-document url-prefix() {#archive #content .column  {line-height: 20px;}}
#archive #content .column p { display: inline-block; margin: 0; width: 100%; height: 125px; overflow: hidden;line-height: 20px; }

@-moz-document url-prefix() { #archive #content .column p { margin: 0 0 -6px 0; }}

#archive #content .column img.f-left { margin: 1px 12px 0 0; width: 124px; height: 124px; }


/* 3.4 Process
------------------------------------------------------------------------*/

#process {}

#process #content-wrapper { padding-left: 50px; }
#process #content { }
#process #content .column { width: 440px; }
#process #content img.intro { left: -28px; position: absolute; top: 0; }
#process #content #slider { margin-left: -28px; top: 0px;  }
#process #content #slider-content { color: #7A9995; background-color: #002123;   }
#process #content #slider-content .slide { padding: 0px 60px 0px 70px;  margin: 50px 0 50px 0; border-left:1px solid #3A6363; height:407px;}
#process #content #slider-content .slide:first-child { padding-left: 75px;}



/* 3.5 About
------------------------------------------------------------------------*/

#about {}

#about #content-wrapper { display: inline-block; width: 100%; }
#about #content { float: right; }
#about #content .column-wrapper { width: 925px; }
#about #content .column { width: 440px;}
#about #content .secondcolumn { width: 440px; float:right;}
#about #content .inner { padding-left:75px;}


/* 3.6 Contact
------------------------------------------------------------------------*/

#contact {}

#contact #content-wrapper { display: inline-block; width: 100%; }
#contact #content { float: right; }
#contact #content .inner { padding-left:75px; width: 925px;}
#contact #content .bottom { position:absolute; bottom:25px;}
#contact #content.bg-color .bottom a.contacta {color: #fff;}
#contact #content.bg-color .inner a:hover {opacity:50%; color:#7A9995;}




/* 4. MEDIA
--------------------------------------------------------------------------
========================================================================*/

/* 4.1 Screen 1280px
------------------------------------------------------------------------*/

@media screen and (min-width: 1200px) {

	#about #content-wrapper { display: block; padding-left: 200px; width: auto; }
	#about #content { float: none; }
	#contact #content-wrapper { display: block; padding-left: 200px; width: auto; }
	#contact #content { float: none; }

}


@media screen and (max-width: 1060px) {

	#about #content-wrapper { display: block; padding-left: 0px; margin-left: -28px; width: 1060px; }
	#about #content { float: none; }
	#contact #content-wrapper { display: block; padding-left: 0px; margin-left: -28px; width: 1060px; }
	#contact #content { float: none; }
	#process #content-wrapper { display: block; padding-left: 0px; width: 1060px;  }


}


/* 5. VIDEO PLAYER
--------------------------------------------------------------------------
========================================================================*/

/* 5.1 Desktop
------------------------------------------------------------------------*/

.video-project iframe{
	margin-left: -28px;
    position: absolute;
}

/*.video-project #slider-content > .slide:first-child {
    padding-left: 908px;
}*/

.video-project #slider-content {
	border-right: 900px solid #fff;
}


.video-project #content .inner {
    pointer-events:none;
}


/* 06/07/2016 */

#projects video{
    height: 510px;
    /*width: 927px;*/
    max-width: 100%;

    -webkit-background-size:cover;
   -moz-background-size:cover;
   -o-background-size:cover;
   background-size:cover;
}

#video2{
	border-right:1px solid #fff;
}

@media screen and (max-width: 1060px) {
    #slider-caption-wrapper{
        right: -600px;
        overflow: visible !important;
        -webkit-transition: right 1s cubic-bezier(0.215, 0.61, 0.355, 1);;
        transition: right 1s cubic-bezier(0.215, 0.61, 0.355, 1);;
    }
    #slider-caption-wrapper.open{ right: -45px ; }
    #slider-caption { position: relative; right: 0px !important; width: 600px; z-index: 3; height:500px;}
    #page{ overflow-x: hidden; position: relative; width: 100%; }
    #slider-caption-vertical{
        padding: 0;
        /*-webkit-transform: rotate(-90deg) translateZ(0);
        transform: rotate(-90deg) translateZ(0);*/

        -webkit-transform-origin: top left;
        transform-origin: top left;
    }

    #slider-caption-vertical span{
        margin: 10px 12px 5px 10px;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
				max-width: 85% !important;
    }
}

.video-project #content .inner {
    pointer-events: auto;
}

/* 6. Lightbox
--------------------------------------------------------------------------
========================================================================*/

/* 6.1 Lightbox Styles
------------------------------------------------------------------------*/

.fancybox-overlay {
	background:#012123;
}

.fancybox-opened .fancybox-skin {
	-webkit-box-shadow:none;
    -moz-box-shadow: none;
    box-shadow: none;
}


.caption {
	color: #aeb4b4;
	/*font-family:MoreComp-Light, "Times New Roman", Times, serif;
	font-size:13px;
	line-height:1.4em;*/
	font: 13px/160% MoreComp-Light, "Times New Roman", Times, serif;
}

.caption span {
	white-space: normal;
}

.caption-name {
	text-transform: uppercase;
	/*line-height:1.5em;
	font-size:15px;*/
}

.fancybox-title-float-wrap .child {
	background:transparent;
	text-shadow:none;
	font-weight: normal;
	display: block;
	margin-right:0;
}

.fancybox-title-float-wrap {
	top: 100%;
	left:0;
	right: 0;
}
.fancybox-skin {
	background: transparent;
}

.fancybox-nav:hover span {
	visibility: hidden;
}

.lwg-nav {
	color: #40595a;
    position: absolute;
    bottom: 20px;
    text-align: center;
    left: 50%;
    width:48px;
    margin-left:-24px;

}

.lwg-next, .lwg-prev {
	cursor:pointer;
	display: inline-block;
    margin: 0 8px;
    transition:all 200ms;
}

.lwg-prev {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 8px 5px 0;
	border-color: transparent #40595a transparent transparent;

}

.lwg-next {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 5px 0 5px 8px;
	border-color: transparent transparent transparent #40595a;
}


.lwg-prev:hover {
	border-color:transparent #aeb4b4 transparent transparent;
}

.lwg-next:hover {
	border-color:transparent transparent transparent #aeb4b4 ;
}

@media(max-height:400px) {
	.lwg-nav {
		display: none;
	}
}

/* 7. RESPONSIVE STYLES
--------------------------------------------------------------------------
========================================================================*/

/* 7.1 Tablet (1024px)
------------------------------------------------------------------------*/
@media only screen and (max-width: 1023px) {

	body {
		overflow: visible;
		width: 100%;
		animation-name: none;
	}
	
	#strip {
		border-top: 22px solid #002123;
    	height: 22px;
    	width: 100%;
    	position: absolute;
		left: -22px;
	}

	#page {
		overflow: visible;
		min-width: initial;
	}

	#header-wrapper {
		padding: 62px 0 38px 40px !important;
	}

	ul#menu-main, #logo-main {
		display: none;
	}

	div#header-mobile {
		display: block;
		display: flex;
		width: 100%;
		position: relative;
		z-index: 100;
	}

	div#menu-icon {
		cursor: pointer;
		position: absolute;
		text-align: right;
		top: 5px;
		right: 40px;
	}

	div#menu-icon span {
		display: block;
		background-color: rgb(93, 131, 126);
		width: 25px;
		height: 2px;
		transition: all .4s ease-in-out;
	}

	div#menu-icon #middle {
		margin: 5px 0px;
	}

	div#menu-icon .top-transformed {
		transform: translate3d(0,7px,0) rotate(45deg);
		-moz-transform: translate3d(0,7px,0) rotate(45deg);
		-o-transform: translate3d(0,7px,0) rotate(45deg);
		-webkit-transform: translate3d(0,7px,0) rotate(45deg);
	}

	div#menu-icon .middle-transformed {
		width: 0;
	}

	div#menu-icon .bottom-transformed {
		transform: translate3d(0,-7px,0) rotate(-45deg);
		-moz-transform: translate3d(0,-7px,0) rotate(-45deg);
		-o-transform: translate3d(0,-7px,0) rotate(-45deg);
		-webkit-transform: translate3d(0,-7px,0) rotate(-45deg);
	}

  #logo-mobile {
	  color: rgb(93, 131, 126);
		font-size: 30px;
		line-height: 30px;
		height: 30px;
  }

	#logo-mobile a {
		color: rgb(93, 131, 126) !important;
	}

	ul#menu-mobile {
		display: block;
	}

	ul#menu-mobile {
    position: fixed;
    background: rgb(0,33,35);
		height: 0;
		width: 100%;
		z-index: 10;
		top: 0;
		right: 0;
		overflow-y: hidden;
		transition: all .4s ease-in-out;
  }

	ul#menu-mobile.open {
    height: 100%;
  }

	ul#menu-mobile li {
		opacity: 0;
		font-size: 20px;
		margin: 10px 0 10px 40px;
		transition: opacity 0.4s ease-in-out;
	}

	ul#menu-mobile li:first-of-type {
		margin-top: 200px;
		overflow: hidden;
	}

	ul#menu-mobile li a {
		color: rgb(93, 131, 126) !important;
	}

	/* Homepage --------------------------------------------------------- */

	#homepage #content-wrapper {
		margin-left: 0;
		height: 100%;
	}

	#accordion {
		display: block;
		overflow: visible;
		height: initial;
		top: 0;
	}

	#accordion > .slide {
		padding-top: 0;
		width: 50% !important;
		height: 150px;
		border: 0;
		border-bottom: 1px solid #ffffff;
		box-sizing: border-box;
	}

	#accordion > .slide:last-of-type {
		border-bottom: none;
	}

	#accordion > .slide:nth-of-type(odd) {
		border-right: 1px solid #ffffff;
	}

	#accordion > .slide img {
		transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		margin-top: -180px;
		margin-left: 174px;
		height: 510px;
	}

	#accordion > .slide .slide-caption {
		display: block !important;
		right: 0 !important;
		top: 0 !important;
		transform: none;
		-moz-transform: none;
		-o-transform: none;
		-webkit-transform: none;
		font-size: 90.01%;
		padding: 0;
		overflow: hidden;
		height: 0;
		animation-name: fade-in;
		animation-duration: 1.5s;
		animation-delay: 3s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	@keyframes fade-in {
  	from {height: 0; padding: 0; overflow: hidden;}
  	to {height: initial; padding: 7px 20px 5px 10px; overflow: visible;}
  }

	#accordion > .slide:first-child {
		top: 0;
		left: 0 !important;
		border-right: 1px solid #ffffff;
	}
  #accordion > .slide:nth-child(2) {
		top: 0;
		left: 50% !important;
	}
	#accordion > .slide:nth-child(3) {
		top: 150px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(4) {
		top: 150px;
		left: 50% !important;
	}
	#accordion > .slide:nth-child(5) {
		top: 300px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(6) {
		top: 300px;
		left: 50% !important;
	}
	#accordion > .slide:nth-child(7) {
		top: 450px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(8) {
		top: 450px;
		left: 50% !important;
	}
	#accordion > .slide:nth-child(9) {
		top: 600px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(10) {
		top: 600px;
		left: 50% !important;
	}
	#accordion > .slide:nth-child(11) {
		top: 750px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(12) {
		top: 750px;
		left: 50% !important;
	}
	#accordion > .slide:nth-child(13) {
		top: 900px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(14) {
		top: 900px;
		left: 50% !important;
	}
	#accordion > .slide:nth-child(15) {
		top: 1050px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(16) {
		top: 1050px;
		left: 50% !important;
	}
	#accordion > .slide:nth-child(17) {
		top: 1200px;
		left: 0 !important;
		border-bottom: none;
	}
	#accordion > .slide:nth-child(18) {
		top: 1200px;
		left: 50% !important;
	}

	/* Projects --------------------------------------------------------- */

	#projects #page {
		overflow-x: visible;
	}

	#projects #content-wrapper {
		padding-left: 0;
	}

	#projects #content #slider {
		margin-left: 0;
	}

	#footer-wrapper {
		padding: 20px 0 15px 40px;
	}

	#slider-nav #next-project {
		margin-right: 40px;
	}

	#slider-caption-wrapper {
		display: none;
	}

	#mobile-caption-wrapper {
		display: block;
		padding: 0 40px 73px 40px;
	}

	#mobile-caption h2 {
		margin-bottom: 10px;
		line-height: 38px;
		color: rgb(93, 131, 126);
	}

	#mobile-caption strong {
		font-weight: 100;
		letter-spacing: 1px;
		color: rgb(93, 131, 126);
	}

	#mobile-caption p {
		margin-bottom: 12px;
		color: rgb(0,33,35) !important;
	}

	ul.pagination.square > li.arrow img, #slider-nav #next-project img {
		opacity: 0.4 !important;
	}

	#slider-nav {
		display: block;
	}

	ul.pagination {
		display: block;
		float: none;
	}

	#slider-nav #next-project {
		color: rgb(93, 131, 126);
		display: block;
		float: none;
		position: absolute;
		bottom: 35px;
	}

	ul.pagination.square > li.arrow {
		display: block;
		float: none;
		padding: 0 0 0 8px;
	}

	#footer-wrapper {
		padding-top: 42px !important;
		padding-bottom: 32px !important;
	}

	#projects #header-wrapper {
		padding-bottom: 38px !important;
	}

	ul.pagination.square > li.arrow img, #slider-nav #next-project img {
		opacity: 0.4 !important;
	}

	#slider-nav #next-project {
		color: rgb(93, 131, 126);
	}

	/* About --------------------------------------------------------- */

  	#about #content-wrapper {
		margin-left: 0;
		width: 100%;
	}

	#about #content .column-wrapper {
		width: 100%;
		display: block;
	}

	#about #content .column-wrapper .column {
		padding-right: 0;
		width: initial;
		float: none;
		display: block;
	}

	#about #content .secondcolumn {
		width: initial;
		float: none;
	}

	#about #content .inner {
		padding-left: 40px;
	}

	#about #content.bg-color {
		height: initial;
		background-color: initial;
		color: rgb(0,33,35);
	}

	#about #content.bg-color > .inner {
		padding: 0 40px 28px 40px;
	}

	#about #content h2 {
		color: rgb(93, 131, 126);
	}

	#about #content .column-wrapper .column p, #about #content .column-wrapper .secondcolumn p, #process #content .column-wrapper p {
		padding-right: 220px;
	}


	/* Contact --------------------------------------------------------- */

	#contact #content .inner {
		width: initial;
		padding-left: 40px;
	}
	
	#contact #content .bottom {
    	position: fixed;
    	bottom: 5px;
	}

	#contact #content.bg-color > .inner {
		padding: 0 40px 28px 40px;
	}

	#contact #content.bg-color {
		height: initial;
		background-color: initial;
		color: rgb(0,33,35);
	}

	#contact #content.bg-color strong {
		color: rgb(93, 131, 126);
	}

	#contact #content.bg-color a {
		color: rgb(0,33,35) !important;
	}
	
	#contact #content.bg-color .bottom a {
		color: rgb(93, 131, 126) !important;
	}

	#contact #content-wrapper {
		margin-left: 0;
		width: 100%;
	}

	#contact #content h2 {
		color: rgb(93, 131, 126);
	}

	/* Process --------------------------------------------------------- */

	#process #page {
		overflow-x: hidden;
	}

	#process #content #slider-content {
		background-color: initial;
		color: rgb(0,33,35);
	}

	#process h2 {
		color: rgb(93, 131, 126);
	}

	#process #content #slider-content .slide {
		border-left: 1px solid #D0E2DF;
	}

	#process #content .column-wrapper .column {
		display: block;
		float: none;
		padding-right: 0;
	}

	#process #slider-content > .slide {
		display: block;
		float: none;
	}

	#process #content #slider-content .slide:first-child {
		padding-left: 40px;
		margin-top: 0;
	}

	#process #content #slider-content .slide {
		padding: 0px 40px 0px 40px;
		margin: 30px 0 0 0;
		border-left: none;
		height: initial;
	}

	#process #content .column-wrapper {
		border-bottom: 1px solid #D0E2DF;
		padding-bottom: 20px;
	}

	#process #content .column {
		width: initial;
	}

	#process #footer-wrapper {
		display: none;
	}

	#process #content-wrapper {
		height: initial;
		pointer-events: none;
		width: 100%;
	}

	#process #content #slider {
		margin-left: 0;
	}

	#process #content #slider-content {
		left: 0 !important;
		width: initial !important;
	}

	#process #content .column-wrapper p {
		padding-right: 120px;
	}

	/* Archive --------------------------------------------------------- */

	#archive #content-wrapper {
		padding-left: 40px;
		height: calc(100vh - 230px);
	}

	#archive #footer-wrapper {
		padding-left: 40px;
		padding-right: 40px;
	}

	#archive #content .column p {
		height: calc(25vh - 57.5px);
		font-size: 90.01%;
		line-height: 19px;
		max-width: 90%;
	}

	#archive #content .column img.f-left {
		height: calc(25vh - 57.5px);
		width: calc(25vh - 57.5px);
	}

	#archive ul.pagination.number > li {
		margin-right: 15px;
		margin-top: 5px;
	}

}

/* 7.2 Mobile (768px)
------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {

	/* Homepage --------------------------------------------------------- */

	#homepage #content-wrapper {
		margin-left: 0;
		height: 100%;
	}

	#accordion {
		display: block;
		overflow: visible;
		height: 2000px;
		top: 0;
	}

	#accordion > .slide {
		padding-top: 0;
		left: 0 !important;
		width: 100% !important;
		height: 149px;
		border: 0;
		border-bottom: 1px solid #ffffff;
		box-sizing: initial;
		border-right: none;
	}

	#accordion > .slide:last-of-type {
		border-bottom: none;
	}

	#accordion > .slide img {
		transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		margin-top: -337px;
		margin-left: 262px;
		height: 768px;
	}

	#accordion > .slide .slide-caption {
		display: block !important;
		right: 0 !important;
		top: 0 !important;
		transform: none;
		-moz-transform: none;
		-o-transform: none;
		-webkit-transform: none;
		padding: 0;
		overflow: hidden;
		height: 0;
		animation-name: fade-in;
		animation-duration: 1s;
		animation-delay: 3s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	@keyframes fade-in {
		from {height: 0; padding: 0; overflow: hidden;}
		to {height: initial; padding: 7px 20px 5px 10px; overflow: visible;}
	}

	#accordion > .slide:nth-of-type(odd) {
		border-right: none;
	}

	#accordion > .slide:first-child {
		top: 0;
		left: 0 !important;
		border-right: none;
	}
	#accordion > .slide:nth-child(2) {
		top: 150px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(3) {
		top: 300px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(4) {
		top: 450px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(5) {
		top: 600px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(6) {
		top: 750px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(7) {
		top: 900px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(8) {
		top: 1050px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(9) {
		top: 1200px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(10) {
		top: 1350px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(11) {
		top: 1500px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(12) {
		top: 1650px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(13) {
		top: 1800px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(14) {
		top: 1950px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(15) {
		top: 2100px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(16) {
		top: 2250px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(17) {
		top: 2400px;
		left: 0 !important;
	}
	#accordion > .slide:nth-child(18) {
		top: 2550px;
		left: 0 !important;
	}

	/* Projects --------------------------------------------------------- */

	#projects #page {
		overflow-x: visible;
	}

	#projects #content-wrapper {
		padding-left: 0;
		height: 260px;
	}
	
	#projects #slider-content img, #projects #slider-content video {
		height: 260px;
	}
	
	#video2{
		border-right:none;
	}
	
	#projects #content #slider {
		margin-left: 0;
	}

	#footer-wrapper {
		padding: 20px 0 15px 40px;
	}

	#slider-nav #next-project {
		margin-right: 40px;
	}

	#slider-caption-wrapper {
		display: none;
	}

	#mobile-caption-wrapper {
		display: block;
		padding: 0 40px 73px 40px;
	}

	#mobile-caption h2 {
		margin-bottom: 10px;
		line-height: 38px;
		color: rgb(93, 131, 126);
	}

	#mobile-caption strong {
		font-weight: 100;
		letter-spacing: 1px;
		color: rgb(93, 131, 126);
	}

	#mobile-caption p {
		margin-bottom: 12px;
		color: rgb(0,33,35) !important;
	}

	ul.pagination.square > li.arrow img, #slider-nav #next-project img {
		opacity: 0.4 !important;
	}

	#slider-nav {
		display: block;
	}

	ul.pagination {
		display: block;
		float: none;
	}

	#slider-nav #next-project {
		color: rgb(93, 131, 126);
		display: block;
		float: none;
		position: absolute;
		bottom: 35px;
	}

	ul.pagination.square > li.arrow {
		display: block;
		float: none;
		padding: 0 0 0 8px;
	}

	#footer-wrapper {
		padding-top: 42px !important;
		padding-bottom: 32px !important;
	}

	#projects #header-wrapper {
		padding-bottom: 38px !important;
	}

	/* About --------------------------------------------------------- */

	#about #content .column-wrapper .column p, #about #content .column-wrapper .secondcolumn p, #mobile-description-content p {
		padding-right: 120px;
	}

	/* Archive --------------------------------------------------------- */

	#archive #content .column p {
		height: calc(25vh - 57.5px);
		font-size: 80.01%;
		line-height: 19px;
		max-width: 80%;
		box-sizing: border-box;
	}

	#archive #header-wrapper {
		padding-bottom: 38px !important;
	}

	#archive ul.pagination.number > li {
		margin-right: 10px;
		margin-top: 0px;
	}

	#archive #content-wrapper {
		padding-left: 40px;
		height: calc(100vh - 230px);
	}

	#archive #footer-wrapper {
		padding-left: 40px;
		padding-right: 40px;
	}

	#archive #content .column img.f-left {
		height: calc(25vh - 57.5px);
		width: calc(25vh - 57.5px);
	}

}

/* 7.3 Mobile (600px)
------------------------------------------------------------------------*/
@media only screen and (max-width: 600px)  {

	#about #content .column-wrapper .column p, #about #content .column-wrapper .secondcolumn p, #mobile-description-content p, #process #content .column-wrapper p {
		padding-right: 0;
	}

}

/* 7.4 Mobile (500px)
------------------------------------------------------------------------*/
@media only screen and (max-width: 500px) {

	#accordion > .slide img {
		transform: rotate(90deg);
		-moz-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		margin-top: -180px;
		margin-left: 173px;
		height: initial;
	}

	#accordion > .slide .slide-caption {
		font-size: 75.01%;
	}

}