/* last changes: 19.12.2019 11:34:22 */

* {
	box-sizing:border-box;
}

html {
  overflow-y:scroll;
}

body {
	/* page bgcolor */
	background-color:#CACACA;
	/* default text color */
	color:#555555;
	margin:30px;
	opacity:1;
	min-width:290px;
}

/* prevent flash of unstyled text (FOUT) by using webfontloader */ 
.wf-loading body {
	visibility:hidden;
}

/* prevent display of text before images are loaded */
.preload {
	opacity:0;
}

#header {
	position:relative;
	height:120px;
	padding:0;
	font-style:italic;
}

#header h1 {
	display:inline-block;
	float:left;
	text-align:left;
	padding:0;
	margin:0;
	font-size:24px;
}

#header .menu {
	display:inline-block;
	float:right;
	font-size:24px;
	padding-left:20px;
}

/* color of links in header menu */
#header a, #header a:active, #header a:focus {
	color:#555555;
	text-decoration:none;
	outline:none;
}

/* mouseover color of links in header menu */
#header a:hover {
	color:white;
}

/* language switcher */
#lang {
	position:absolute;
	left:50%;
	top:10px;
	text-align:center;
	font-size:14px;
	font-style:normal;
	width:60px;
	margin-left:-30px;
}

#lang a {
	color:white;
	text-decoration:none;
}

#lang a:hover {
	color:white;
}

#main h1 {
	font-size:2em;
	line-height:0.75em;
	margin-top:0;
	padding-top:0;
}

#main a {
	/* color of links in text */
	color:white;
	text-decoration:none;
}

#main a:hover {
	/* mouseover color of links in text */
	color:white;
}

#footer {
	clear:both;
	padding-top:30px;
	text-align:center;
}

/* how text is formatted on mouseover over project photos on start page */
.info {
	display:inline-block;
	visibility:hidden;
	
	position:absolute;
	left:0;
	top:0 !important;
	width:100%;
	height:100%;
	z-index:2;
	
	padding:20px;
	color:#fff;
	background:rgba(0,0,0,0.7);
}

.info h1 {
	font-size:24px;
	font-weight:bold;
	padding:0;
	margin:0;
}

a:hover .info {
	visibility:visible;
}

/* responsive photo-grid */
.grid {
	clear:both;
	display:-ms-flexbox; /* IE10 */
	display:flex;
	-ms-flex-wrap:wrap; /* IE10 */
	flex-wrap:wrap;
	padding: 0;
}

/* create 3 equal columns that sit next to each other */
.column {
	-ms-flex:33.33%; /* IE10 */
	flex:33.33%;
	max-width:33.33%;
	padding:0 1px;
}

.column a {
	display:inline-block;
	position:relative;
	margin-bottom:2px;
	width:100%;
}

/* responsive layout - makes a 2-column-layout instead of 3 columns */
@media screen and (max-width:800px) {
	.column {
		-ms-flex:50%;
		flex:50%;
		max-width:50%;
	}
}

/* responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
	body {
		margin:15px;
	}
	.column {
		-ms-flex:100%;
		flex:100%;
		max-width:100%;
	}
	#header .menu {
		clear:both;
		display:block;
		float:none;
		padding-left:0;
	}
	#lang {
		text-align:right;
		left:auto;
		right:0px;
	}
}
	
.column img {
	vertical-align:middle;
	width:100%;
}

/* flexSlider */
.flexslider {
	border-width:0;
	border-radius:0;
	background:rgba(0, 0, 0, 0.8);
}

.flex-direction-nav a {
    text-shadow:none !important;
}

.flex-direction-nav a::before{
    text-shadow:none !important;
}

.flex-caption {
	margin:0;
    padding:2%;
    left:0;
    bottom:0;
    color:#fff;
    text-shadow:0 -1px 0 rgba(0,0,0,.3);
    font-size:14px;
    line-height:18px;
}

/* video */
video {
	width:100%;
    margin:0;
    padding:0;
}

/* for videos inside flexSlider */
.vidSrc, .vimeoSrc, .ytSrc {
	cursor:pointer;
}

/* force iframe (vimeo, youtube) to be 16:9 */
.fluidMedia {
    position:relative;
    padding-bottom:56.25%; /* proportion value for 16:9 (9/16 = 0.5625 or 56.25%) */
    height:0;
    overflow:hidden;
    margin:0 0 6px 0;
}

.fluidMedia iframe {
    position:absolute;
    top:0; 
    left:0;
    width:100%;
    height:100%;
    border:0px none;
}

/* implements alternative portrait layout */
@media screen and (min-width:600px) {
	.portrait .media{
		max-width:320px;
		float:left;
		margin-right:25px;
	}
}

/* contact form */
label {
	display:block;
}
input[type=email], 
input[type=text], 
textarea {
	width:400px;
	max-width:100%;
	background:none;
	border:1px solid #555555;
	color:#555555;
}
input[type=submit] {
	background:none;
	border:1px solid #555555;
	color:#555555;
}