/**
* CSS
* @version 1.0
* @author Ozhan Binici
*/


@import url("/fonts/FashionFetish.css");

body {
	width: 100%;
	height: auto;
	padding: 0px;
	margin: 0px;
	background-color:transparent;
	background: transparent;
	overflow-x:hidden;
	-webkit-overflow-scrolling: touch;
	-webkit-font-smoothing: antialiased;
	font-size:15px;
	line-height:20px;
	color:#1D1E1C;
	font-family: "Fashion Fetish", Helvetica, Arial, sans-serif;

}

::selection {
	background: #CCCCCC;
}

.container {
	position:relative;
	display:block;
	height:auto;
	margin:0 auto;
	padding:0 3.33em;
	max-width:none;
}

.container:after {
	clear:both;
	display:block;
	content:" ";
}

header .container{
	padding: 1em 3.33em 1em 3.33em;
}
#fixed-header .container {
	padding: 1em 3.33em 0.5em 3.33em;
}

#fixed-header {
	position:fixed;
	top: 0px;
	left: 0px;
	z-index:100;
	background-color:rgba(255,255,255,0.9);
	width:100%;
	height: auto;
	top:-150px;
}

#fixed-header #logo {
	margin-top:-9.4em;
}

#fixed-header .menu-trigger {
	margin-top:0px;
}

header {
	position: absolute;
	width: 100%;
	height: auto;
	top: 0px;
	left: 0px;
	z-index:2;
}

#logo {
	display: block;
	height: auto;
	width:100%;
	max-width:10em;
	position:relative;
	float:none;
	background-color:#FFF;
	padding:1em;
	margin:0 auto;
}

#fixed-header #logo {
	float:left;
	background-color:transparent;
	padding:1em;
	margin-left:-1em;
}

#logo svg{
	display:block;
	height:auto;
}



nav {
	position:relative;
	display:block;
	float:none;
	margin:0 auto;
	margin-top:1em;
}

nav#menu {
	margin-bottom:1.15em;
	padding-right:0.25em;
	margin-top:1.4em;
}

#fixed-header nav {
	float:right;
	margin-top:0px;
	margin-bottom:0px;
	padding-right:0px;
}

nav ul {
	position:relative;
	display:block;
	text-align:center;
}
nav ul:before,
nav ul:after {
	content:"";
	display:block;
	clear:both;
}

nav ul li {
	position:relative;
	display:inline-block;
	padding:0px 2em;
}

nav ul li:last-child {
	padding-right:0px;
}

nav ul li:first-child {
	padding-left:0px;
}

nav ul li a {
	font-weight: 700;
	font-style: normal;
	font-size:0.9em;
	line-height:2em;
	color:#1D1E1C;
	cursor:pointer;
	padding: 2px 10px;
	display:block;
	opacity:0.5;
	
	transition-property: opacity;
	transition-duration: 0.3s;
	transition-delay: 0s;
	transition-timing-function: linear;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-transform:translate3d(0,0,0);
}
nav ul li a.selected,
nav ul li a:hover {
	opacity:1;
}

#lang-menu {
	position:absolute;
	top:7px;
	right:calc(3.33em - 10px);
}

#lang-menu ul li {
	padding:0px;
}

#lang-menu ul li a.active {
	border-bottom:2px solid #1d1e1c;
	pointer-events:none;
}

#lang-menu ul li a.inactive {
	pointer-events:none;
}

#fixed-header nav ul li:last-child a {
	padding-right:0px;
}

#social-media {
	position:absolute;
	top:7px;
	left:calc(3.33em - 0px);
}

#social-media li {
	position:relative;
	margin-right:1em;
	float:left;
	display:block;
	line-height:24px;
	color:#8e8e8d;
	
	font-weight: 700;
	font-style: normal;
	font-size:0.9em;
	line-height:2em;
	padding:0px;
}

#social-media li a{
	position:relative;
	display:block;
	width:2em;
	height:2em;
	padding:0px;
	opacity:1;
}

#social-media li a.inactive {
	pointer-events:none;
}

#social-media li a svg {
	width:100%;
	height:100%;
	display:block;
}

#social-media li a svg circle {
	fill:#b0b0b0;
	transition-property: fill;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}

#social-media li a svg path {
	fill:#FFFFFF;
	transition-property: fill;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}

#social-media li a.facebook:hover svg circle {
	fill:#4267b2;
}

#social-media li a.twitter:hover svg circle {
	/*fill:#1DA1F2;*/
	fill:#000000;
	
}

#social-media li a.instagram:hover svg circle {
	fill:#416f94;
}

#social-media li a.youtube:hover svg circle {
	fill:#FF0000;
}

#social-media li a.vimeo:hover svg circle {
	fill:#00adef;
}


#social-media li a.linkedin:hover svg circle {
	fill:#0077b5;
}


#social-media li a:hover svg path {
	fill:#FFF;
}


footer {
	position:relative;
	width:100%;
	height:auto;
	display:block;
	color:#1D1E1C;
	padding-top:0px;
	font-size:0.8em;
}

footer strong {
	font-weight:700;
}

footer ul {
	text-align:center;
	width:100%;
	display:block;
	padding-top:1.25em;
	padding-bottom:1em;
}

footer li {
	position:relative;
	display:inline-block;
	padding: 0 10px;
	font-size:0.8em;
	line-height:2em;
	text-align:center;
	width:100%;
}

footer ul:after {
	content:" ";
	display:block;
	clear:both;
}

footer li a {
	font-weight:400;
	color:#1D1E1C;
	text-decoration:none;
	border-bottom:1px solid transparent;
}

footer li a:hover,
footer li a.selected {
	border-bottom:1px solid #1D1E1C;
}










#content {
	height: auto;
	position: relative;
	display: block;
	background-color:transparent;
	background: transparent;
	padding-top:18.2em;
}

#content .image {
	position:relative;
	display:block;
	width:100%;
	padding:2em;
	border:1px solid #1D1E1C;
}

#content .container.projects {
	padding:0;
	width:calc(100% - 4em);
	margin-left:2em;
	margin-top:-1.33em;
	position:relative;
	display:block;
}

#content .project {
	position:relative;
	float:left;
	display:block;
	width:100%;
	padding:1em;
	opacity:0;
	-webkit-opacity:0;
	animation:opacity-anim-project 0.5s ease forwards 0.75s;
}

#content .project .image-holder img {
	display:none;
	width:100%;
}

#content .project.ex-pad {
	padding:1.33em;
}

@keyframes opacity-anim-project {
	to {
		opacity:1;
	}
}

#content .project .inner {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	border:1px solid #1D1E1C;
}

#content .no-border .project .inner {
	border:0px;
}

#content .project:hover .inner {
	border-color:#1d1e1c;
}

#content .project .image-holder {
	position:absolute;
	z-index:-1;
	top:1.33em;
	left:1.33em;
	display:block;
	width:calc(100% - 2.66em);
	height:calc(100% - 2.66em);
	padding:0px;
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
	
}

#content .no-border .project .image-holder {
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}






#content .grid-sizer {
	width:1%;
}

#content .project.w-1 {
	width:25%;
}
#content .project.w-2 {
	width:50%;
}
#content .project.w-3 {
	width:75%;
}
#content .project.w-4 {
	width:100%;
}

#content .project.h-1 {
	height:20vw;
}
#content .project.h-2 {
	height:40vw;
}
#content .project.h-3 {
	height:60vw;
}
#content .project.h-4 {
	height:80vw;
}


#content .project img {
	width:100%;
	height:auto;
}


#content .project .name {
	position:absolute;
	top:1.33em;
	left:1.33em;
	margin-left:0px;
	text-align:center;
	width:calc(100% - 2.66em);
	height:calc(100% - 2.66em);
	color:#1D1E1C;
	background-color:transparent;
	text-align:center;
	line-height:1.8em;
	font-weight:700;
	font-size:1em;
	opacity:0;
	z-index:2;
	
	
}

#content .project.animate .name {
	transition-property: opacity;
	transition-duration: 0.3s;
	transition-delay: 0s;
	transition-timing-function: linear;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0);
}

#content .project .name:before {
	content:" ";
	display:block;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	z-index:1;
	background-color:rgba(255,255,255,0.7);
}
#content .project:hover .name {
	opacity:1;
}

#content .project .name span {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	z-index:2;
	width:100%;
}

/*
#content .project:hover .num {
	opacity:1;
}
*/
#content .project .num,
#content .image .num {
	position:absolute;
	bottom:-1.25em;
	left:50%;
	margin-left:0px;
	width:2.2em;
	height:2.2em;
	border-radius:1.1em;
	background-color:#1D1E1C;
	color:#FFF;
	text-align:center;
	line-height:1.8em;
	font-weight:700;
	font-size:1em;
	padding-top:0.35em;
	transform:translate(-50%, 0);
	-webkit-transform:translate(-50%, 0);
	z-index:3;
}




#content .image img {
	width:100%;
	height:auto;
}

#content .image img.mobile {
	display:none;
}

#content .badge {
	position:relative;
	text-align:center;
	width:100%;
	max-width:40em;
	padding:2em 0 1.8em 0;
	margin:0 auto;
	min-height:272px;
}

#content .badge.solo {
	max-width:60em;
	min-height:auto;
	margin-bottom:1.33em;
}

#content h2 {
	font-size:1.6em;
	line-height:1.5em;
	margin-bottom:0.6em;
	margin-top:0.5em;
}


#content p {
	font-size:0.8em;
	line-height:2em;
	margin-bottom:1em;
}

#content ul.kunye {
	position:absolute;
	display:block;
	width:260px;
	text-align:left;
	padding-top:6.1em;
	top:0px;
	left:calc(23.83em - 50vw);
}



#content ul.kunye li {
	display:block;
	padding:0 0 0 2em;
	font-size:1em;
	line-height:2em;
	margin-bottom:0em;
}

#content sup {
	line-height:0.6em;
}

#content ul.kunye li svg {
	position:relative;
	display:block;
	float:left;
	width:30px;
	height:24px;
	padding-right:10px;
	padding-top:2px;
	padding-bottom:2px;
	border-right:1px solid #1D1E1C;
	box-sizing:border-box;
}

#content ul.kunye li a {
	color:inherit;
	font-size:0.7em;
	font-weight:400;
	position:relative;
	float:left;
	line-height:16px;
	padding-top:6px;
	padding-left:10px;
}

#content ul.kunye li:after {
	content:" ";
	clear:both;
	display:block;
}

#content ul.kunye li a:hover {
	text-decoration:underline;
}

#content ul.kunye li a {
	pointer-events:none;
}

#content ul.services {
	position:absolute;
	display:block;
	width:200px;
	text-align:right;
	padding-top:6.1em;
	top:0px;
	right:calc(23.83em - 50vw);
}

#content .projects-header ul.services {
	margin-bottom:0px;
}

#content ul.services li {
	display:block;
	padding:0 2em 0 0;
	font-size:1em;
	font-weight:700;
	line-height:2em;
	margin-bottom:0em;
}

#content ul.services li a {
	display:block;
	color:inherit;
	font-size:0.7em;
	font-weight:400;
	opacity:0.3;
	line-height:16px;
	padding-top:6px;
	padding-bottom:2px;
	
	transition-property: opacity;
	transition-duration: 0.3s;
	transition-delay: 0s;
	transition-timing-function: linear;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-transform:translate3d(0,0,0);
	
}

#content ul.services li a {
	pointer-events:none;
}


#content ul.services li a.active {
	opacity:1;
}

#content ul.services li a:hover {
	text-decoration:underline;
}


#content .projects-header ul.services li a:hover,
#content .projects-header ul.services li a.active {
	text-decoration:none;
	opacity:1;
}


#content ul.images {
	position:relative;
	display:block;
	width:calc(100% + 6.66em);
	margin-left:-3.33em;
}

#content ul.images:after {
	content:" ";
	display:block;
	clear:both;
}

#content ul.images li {
	height:auto;
	position:relative;
	display:block;
	float:left;
	padding:3.33em;
}

#content ul.images .full {
	width:100%;
}

#content ul.images .half {
	width:50%;
}

#content ul.images .two-same-height {
	width:50%;
}

#content ul.images #two11,
#content ul.images #two21,
#content ul.images #two31,
#content ul.images #two41 {
	clear:both;
}


#content ul.images .max {
	width:100%;
	padding:3.33em 0;
}

#content ul.images img {
	width:100%;
	height:auto;
}

#content ul.images .border img {
	border:0.2em solid #1D1E1C;
	padding:3.33em;
}

#content ul.images .border .caption {
	position:absolute;
	bottom:2.6em;
	left:50%;
	transform:translateX(-50%);
	width:auto;
	height:2.5em;
	border-radius:1.25em;
	background-color:#1D1E1C;
	color:#FFF;
	text-align:center;
	line-height:2em;
	font-weight:700;
	font-size:0.9em;
	padding:0.4em 1em 0 1em;
}



a.menu-toggle {
	display:block;
	position:relative;
	border:0px;
	pointer-events:auto;
	background-color:transparent;
	width: 90px;
	height: 24px;
	margin: 0px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	cursor: pointer;
	font-size:20px;
	line-height:30px;
	font-weight:normal;
}

.menu-toggle span {
	display: block;
	position: absolute;
	height: 3px;
	width: 20px;
	background: #1D1E1C;
	border-radius: 0px;
	opacity: 1;
	left: 70px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

.menu-toggle span:nth-child(1) {
	top: 3px;
}

.menu-toggle span:nth-child(2), .menu-toggle span:nth-child(3) {
	top: 10px;
}

.menu-toggle span:nth-child(3) {
	opacity:0;
}

.menu-toggle span:nth-child(4) {
	top: 17px;
}

.menu-toggle.open span:nth-child(1) {
	top: 10px;
	width: 0%;
	left: 80px;
}

.menu-toggle.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.menu-toggle.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	opacity:1;
}

.menu-toggle.open span:nth-child(4) {
	top: 10px;
	width: 0%;
	left: 80px;
}

.menu-toggle.toggled-on, .menu-toggle.toggled-on:hover, .menu-toggle.toggled-on:focus {
	background-color:transparent;
}
.menu-toggle.toggled-on:focus {
	outline: none;
}


header .inner.toggled-on #menu {
	display:block;
}
.menu-trigger{
	position:relative;
	width: 90px;
	height: 24px;
	
	display:none;
	margin:1.5em auto;
}

#fixed-header .menu-trigger{
	position:absolute;
	top:1em;
	right:1em;
	margin:0px;
}
.menu-open #menu{
	height:auto;
}

#fixed-header #social-media,
#fixed-header #lang-menu {
	display:none;
}

#content .cycle .project {
	width:100%;
	height:100%;
	padding:0px;
}
#content .cycle .inner {
	width:100%;
	height:calc(100vh - 331px);
	border:1px solid #1d1e1c;
	padding:0;
	
	
}


#content .cycle.mobile {
	display:none;
}
#content .cycle .cycle-inner {
	padding:0;
	width:100%;
	height:100%;
}

#content .cycle .project .num {
	bottom:0.75em;
}

.cycle .arrow {
	position:absolute;
	z-index:100;
	top:50%;
	margin-top:-1em;
	width:2em;
	height:2em;
}

.cycle .arrow.left {
	left:1em;
}

.cycle .arrow.right {
	right:1em;
}

body.animate header,
body.animate #content,
body.animate footer {
	opacity:0;
	-webkit-opacity:0;
	pointer-events:none;
	animation:opacity-anim 1s ease forwards 4s;
}

#animation {
	display:none;
	width:300px;
	max-width:50vw;
	padding:20px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	animation:opacity-anim2 1s ease forwards 4s;
	pointer-events:none;
}

#animation #line-1 {
	fill:transparent;
	stroke-dasharray:2350;
	stroke-dashoffset:2350;
	animation:line-anim1 2s ease forwards 0.25s;
}

#animation #line-2 {
	stroke-dasharray:2350;
	stroke-dashoffset:2350;
	animation:line-anim2 2s ease forwards 0.25s;
}

#animation .dinamika {
	opacity:0;
	animation:opacity-anim 1s ease forwards 1.75s;
}

body.animate #animation {
	display:block;
}

#animation svg {
	position:relative;
	display:block;
	max-width:100%;
}

@keyframes line-anim1 {
	to {
		stroke-dashoffset:4700;
	}
}
@keyframes line-anim2 {
	to {
		stroke-dashoffset:0;
	}
}
@keyframes opacity-anim {
	to {
		opacity:1;
		pointer-events:auto;
	}
}

@keyframes opacity-anim2 {
	to {
		opacity:0;
	}
}


.narrow, .narrow2, .narrow3 {
	max-width:1000px;
	width:100%;
	position:relative;
	display:block;
	margin:0 auto;
}

.narrow2 {
	max-width:1118px;
}

.narrow3 {
	margin-top:40px;
	margin-bottom:20px;
}

.narrow3:first-child {
	margin-top:0px;
}

.narrow:after,
.narrow2:after,
.narrow3:after {
	content:' ';
	display:block;
	clear:both;
}

.narrow img,
.narrow2 img,
.narrow3 img {
	position:relative;
	display:block;
	width:100%;
}
.left,
.right {
	width:50%;
	position:relative;
	display:block;
	float:left;
}

.narrow2 .right {
	float:right;
}

.center {
	width:100%;
	position:relative;
	display:block;
	float:none;
	text-align:center;
	margin-bottom:40px;
}

.center p {
	max-width:755px;
	width:100%;
	margin-left:auto;
	margin-right:auto;
}

.left {
	padding-right:30px;
	text-align:right;
}

.narrow3 .left {
	text-align:left;
}

.right {
	padding-left:30px;
}

.left p a,
.right p a,
.center p a {
	color:#000000;
}

.left p a:hover,
.right p a:hover {
	text-decoration:underline;
}

#map {
	width:100%;
	margin-top:40px;
	height:470px; 
	position:relative;
	display:block;
}


#map img { 
	max-width: inherit;
	position:absolute;
}

img.desktop-only {
	display:block;
}

img.mobile-only {
	display:none;
}

@media (max-width:1150px){
	#content .badge {
		max-width:100%;
	}
	#content .badge p {
		max-width:40em;
		margin-left:auto;
		margin-right:auto;
	}
	#content ul.kunye,
	#content ul.services {
		position:relative;
		display:block;
		text-align:center;
		top:auto;
		left:auto;
		right:auto;
		width:100%;
		padding-top:2em;
	}
	
	#content ul.kunye li,
	#content ul.services li {
		display:inline-block;
	}
	
	#content ul.kunye li svg {
		border-right:0px;
	}
	
	#content ul.kunye li a {
		padding-left:0px;
	}
}
/*
@media (max-width:1475px){
	footer li:nth-child(2) {
		display:none;
	}
}

@media (max-width:760px){
	footer li:nth-child(2) {
		display:block;
	}
	
	footer li {
		display:block;
		width:100%;
		text-align:center;
	}
}


@media (max-width:1000px){

	
	
	nav#menu {
		font-size:0.9em;
	}
	
	.container {
		padding:0 1em;
	}
	header .container,
	#fixed-header .container {
		padding:1em;
	}
	
	
	#logo {
		max-width:8em;
		padding:0px 1em;
	}
	#lang-menu {
		top:0px;
		font-size:0.9em;
		right:1em;
	}
	
	#social-media {
		top:0px;
		font-size:0.9em;
		left:1em;
	}
	
	#fixed-header #logo {
		margin-top:-8.8em;
		max-width:10em;
	}
	
	#content {
		padding-top:11.75em;
	}
	
	footer {
		font-size:0.9em;
	}
	
	#content .container.projects {
		margin-top:-0.5em;
	}
	
	.menu-open #content {
		padding-top:28em;
	}
	#content .image {
		padding:1em;
		border:0.1em solid #1D1E1C;
	}
	
	#content ul.images {
		width:calc(100% + 2em);
		margin-left:-1em;
	}
	#content ul.images li {
		padding:1em;
	}
	#content ul.images .max {
		padding:1em 0;
	}
	
	#content ul.images .border img {
		padding:1em;
	}
	
	#content .container.projects {
		width:calc(100% - 1em);
		margin-left:0.5em;
	}
	
	#content .project {
		padding:0.5em;
	}
	#content .project .inner {
		border:0.1em solid #8e8e8d
	}
	#content .project .image-holder {
		top:0.5em;
		left:0.5em;
		width:calc(100% - 1em);
		height:calc(100% - 1em);
	}
	
	#content a.project:hover .image-holder {
	    -webkit-box-shadow: inset 0px 0px 0px 0.5em #FFF;
	    -moz-box-shadow: inset 0px 0px 0px 0.5em #FFF;
	    box-shadow: inset 0px 0px 0px 0.5em #FFF;
	}
	
	#content .project .num {
		font-size:0.8em;
		height:2em;
		padding: 0 0.75em;
		padding-top:0.4em;
		line-height:1.6em;
		bottom:-1em;
	}
	
	#content .cycle .inner {
		height:calc(100vh - 12.5em);
		border:0.1em solid #8e8e8d;
	}
}


@media (max-width:780px){
	#social-media li:nth-child(2){
		clear:left;
	}
}
*/

@media (max-width:800px){
	.left,
	.right {
		width:100%;
		padding:0px;
	}
	
	.right img {
		margin-bottom:40px;
	}
	.left img {
		margin-bottom:20px;
	}
	.left {
		text-align:center;
	}
	
	.narrow2 .left {
		text-align:left;
	}
	
	.narrow3:first-child .right {
		margin-bottom:40px;
	}
	
	#map {
		height:calc(100vw - 30px);
	}
	
}
@media (max-width:640px){
	#content .cycle {
		display:none;
	}
	#content .cycle.mobile {
		display:block;
	}
	
	#fixed-header nav#menu {
		margin-top:6px;
		font-size:0.75em;
	}
	
	#fixed-header nav ul li {
		padding:0px;
	}
	
	#fixed-header nav ul li a {
		padding:2px 5px;
	}
	
	#fixed-header nav ul li:first-child a {
		padding-left:0px;
	}
	
	
	nav#menu {
		font-size:0.9em;
		margin-bottom:0px;
	}
	
	.container {
		padding:0 1em;
	}
	header .container,
	#fixed-header .container {
		padding:1em;
	}
	
	
	#logo {
		max-width:8em;
		padding:0px 1em 0.3em 1em;
	}
	#lang-menu {
		top:0px;
		font-size:0.9em;
		right:1em;
	}
	
	#social-media {
		top:0px;
		font-size:0.9em;
		left:1em;
	}
	
	#fixed-header #logo {
		margin-top:-8.8em;
		max-width:10em;
	}
	
	#content {
		padding-top:11.75em;
	}
	/*
	footer {
		font-size:0.9em;
	}*/
	
	#content .container.projects {
		margin-top:-0.5em;
	}
	
	.menu-open #content {
		padding-top:28em;
	}
	#content .image {
		padding:1em;
		/*border:0.1em solid #1D1E1C;*/
	}
	
	#content ul.images {
		width:calc(100% + 2em);
		margin-left:-1em;
	}
	#content ul.images li {
		padding:1em;
	}
	#content ul.images .max {
		padding:1em 0;
	}
	
	#content ul.images .border img {
		padding:1em;
	}
	
	#content .container.projects {
		width:calc(100% - 1em);
		margin-left:0.5em;
	}
	
	#content .project {
		padding:0.5em;
	}
	
	#content .badge.solo {
		padding:0.5em 0 0.3em 0;
		margin-bottom:0.5em;
	}
	
	
	
	
	
	
	
	#content .image {
		padding:10px;
	}
	
	#content .image img {
		display:none;
	}

	#content .image img.mobile {
		display:block;
	}
	
	#content ul.images .border img {
		padding:0px;
	}
	#content ul.images .border .caption {
		bottom:0px;
	}
	
	#content ul.images .half {
		width:100%;
	}
	#content ul.images .two-same-height {
		width:100% !important;
	}
	
	#content .projects.main .project {
		width:100% !important;
		margin-bottom:1em;
	}
	
	#content .project .name {
		font-size:0.8em;
		white-space: nowrap; 
		opacity:1;
		bottom:1.33em;
		top:auto;
		height:2.5em;
	}
	
	#content .projects.main .project .inner {
		padding:0.9em;
	}
	
	nav ul li {
		padding:0px 0.75em
	}
	
	#social-media li:first-child {
		display:none;
	}
	#social-media li {
		margin-bottom:0.75em;
		margin-right:0.75em;
		float:none;
	}
	
	#lang-menu ul li {
		display:block;
	}
	footer li {
		padding:0px;
	}
	
	#social-media li:nth-child(4) {
		clear:left;
	}
	
	#content .project.w-1 {
		width:100%;
	}
	#content .project.w-2 {
		width:100%;
	}
	#content .project.w-3 {
		width:100%;
	}
	#content .project.w-4 {
		width:100%;
	}
	/*
	#content .project.h-1 {
		height:50vw;
	}
	#content .project.h-2 {
		height:100vw;
	}
	#content .project.h-3 {
		height:60vw;
	}
	#content .project.h-4 {
		height:80vw;
	}
	*/
	#content .project.h-1,
	#content .project.h-2,
	#content .project.h-3,
	#content .project.h-4 {
		height:auto;
	}
	
	#content {
		padding-top:13em;
	}
	
	
	#fixed-header #logo {
		margin-top:-9.3em;
		padding-bottom:0.2em;
	}
	
	#fixed-header #social-media,
	#fixed-header #lang-menu {
		display:none;
	}
	
	.menu-open #fixed-header #menu {
		float:none;
		margin-top:4em;
		margin-bottom:1em;
	}
	
	.menu-open  #fixed-header nav#lang-menu ul li:last-child a {
		padding-right:10px;
	}
	
	.menu-open #fixed-header #social-media,
	.menu-open #fixed-header #lang-menu {
		display:block;
		float:none;
		margin-top:1em;
	}
	
	.menu-open #fixed-header {
		text-align:center;
	}
	
	.menu-open #fixed-header #social-media {
		display:inline-block;
	}
	
	#social-media li:last-child {
		margin-right:0px;
	}
	
	/*
	#content .project .num {
		bottom:-2.75em;
		opacity:1;
	}
	*/
	
	#content .projects.main .project {
		/*margin-bottom:1.5em;*/
		margin-bottom:0px;
	}
	
	/*#content .cycle .inner {
		height:calc(100vh - 236px);
	}*/
		
		#content .cycle .inner {
				height:calc(100vw - 30px);
			}
	
	#content .cycle a.project .image-holder {
		-webkit-box-shadow: inset 0px 0px 0px 0.5em #FFF;
		    -moz-box-shadow: inset 0px 0px 0px 0.5em #FFF;
		    box-shadow: inset 0px 0px 0px 0.5em #FFF;
	}
	
	#content .cycle .project .num {
		display:block;
		bottom:0.5em;
	}
	/*
	#content .project .image-holder {
		width:calc(100% - 1.33em);
		height:calc(100% - 1.33em);
		left:0.66em;
		top:0.66em;
	}
	*/
	
	img.desktop-only {
		display:none;
	}

	img.mobile-only {
		display:block;
	}
	
	#lang-menu ul li a.active {
		border-bottom:0px;
		opacity:1;
	}
	
	#content ul.kunye li {
		padding:0.3em 0.5em;
	}
	
	#content ul.services li {
		display:block;
		float:left;
		width:50%;
		padding-right:0px;
	}
	
	#content ul.services:after {
		content:" ";
		display:block;
		clear:both;
	}
	
	#content .project .image-holder {
		position:relative;
		background:transparent !important;
		height:auto;
	}
	#content .project .image-holder img {
		display:block;
	}
	
	#content .liste .project .image-holder {
		top:auto;
		left:auto;
		width:100%;
		padding:6px;
	}
	
	#content .liste .project .num {
		-webkit-text-size-adjust: none;
	}
	
	#content .border .project .image-holder {
		top:0px;
		left:0px;
		width:100%;
		padding:6px;
	}
	
	#content .cycle .border .project .image-holder {
		padding:10px;
	}
}