@import url(fonts/stylesheet.css);
@import url(styles/jquery-ui.min.css);
@import url(styles/hamburger.css);

/*
Theme Name: Werkstatt für Gestaltung
Author: M Wohlleber
Author URI: http://maxwohlleber.de

-------------------------------------------------------------- */
/* ALLGEMEIN
-------------------------------------------------------------- */

*{
	font-family: 'droid_sans_monoregular', mono;
	box-sizing: border-box;
}

::-moz-selection {
  background: #F0F1E0; 
}

::selection {
  background: #F0F1E0; 
}
::-moz-selection {
  background: #F0F1E0; 
}

a {
   outline: 0;
}

a:hover, a:active, a:focus {
	outline: 0;
}

/*-------------------------------------------------------------- */
/* HEADER
-------------------------------------------------------------- */

.headline{
	width: 100%;
	background: #ede2dc;
	height: 80px;
	position: relative;
}

.headline img{
	height: 62px;
	margin-top: 9px;
	left: 0px;
	position: absolute;
}

div.navi{
	margin-right: 60px;
	text-align: right;
	width: 90%;
	border: 0px solid red;
	height: 100%;
	float: right;
}

div.navi ul{
	margin: 0;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-ms-justify-content: flex-end;
	-webkit-box-pack: end;
	    -ms-flex-pack: end;
	        justify-content: flex-end;
	list-style: none;
	
	-webkit-transition: all .5s;
	
	transition: all .5s;
}

div.navi ul li{
	margin-left: 40px;
	line-height: 45px;
	overflow: hidden;
	-webkit-transition: all .5s;
	transition: all .5s;
	margin-top: 17px;
}

div.navi ul li:hover > ul.children{
	display: block;
	}

div.navi ul li a{
	color: #92979c;
	text-decoration: none;
	font-size: 15px;	
	-webkit-transition: color 0.5s;	
	transition: color 0.5s; 
}

div.navi ul li a:hover{
	color: black;
}


div.navi ul li.current_page_parent a{
	color: black;
}

div.navi ul li.current_page_item a{
	color: #5b6673;
}

div.navi ul li.current_page_parent ul.children a{
	color: #5F6062;
	font-size: 13px;
	-webkit-transition: color .3s;
	transition: color .3s;
}

div.navi ul li.current_page_parent ul.children a:hover{
	color: black;
}

div.navi ul li.current_page_parent ul.children .current_page_item a{
	color: #727A83;
}

/* Animation Headline Website Switch */

.pageSwitcher{
	position: absolute;
	height: 80px;
	width: 130px;
	margin-left: 60px
}

.pageSwitcher img[alt="wfg-logo"]{
	display: block;
	margin-left: 17px;
	
}

.pageSwitcher img[alt="wfg-logo"]{
	-webkit-transition: .8s ease-in-out;
	transition: .8s ease-in-out;
	opacity: 0;
}

.pageSwitcher .moveIt{ /* IE 9 */
 -webkit-transform: translate(40px,0px); /* Safari */
 transform: translate(40px,0px);
    opacity: 1!important;
}

/* Unterpunkt */

div.navi ul.children{
	display: none;
	background: #F0F1E0;
	margin-top: -12px;
	position: absolute;
	text-align: left;
	z-index: 99999;
	padding: 10px;
	margin-left: -10px;
}

div.navi ul.children li{
	line-height: 25px;
	margin-left: 0px;
	
}

div.navi ul.children li a{
	font-size: 13px;
	}




/* Mobile Navigation */

.hamburger{
	border: 0px;
	position: absolute;
	right: 0px;
	top: 13px;
	display: none;
}

button:focus {outline:0;}





/* Infoseite */

.nomargin.col{
	margin: 0px;
}

.fullsizeimage, .fullsizeslider, .focusedslider{
	width: 100%;
	height: 100%;
	height: calc(100% - 80px);
	height: -webkit-calc(100% - 80px);
	height: -moz-calc(100vh - 80px);
	background: #f6f6f6;
	-webkit-transition: .5s filter linear;
	transition: .5s filter linear;
	-webkit-transition: .5s -webkit-filter linear;
	-moz-transition: .5s -moz-filter linear;
	-ms-transition: .5s -ms-filter linear;
	-o-transition: .5s -o-filter linear;
}

.closebtn{
	position: absolute;
	right: 70px;
	top: 15px;
	font-size: 25px;
	cursor: pointer;
	-webkit-transition: color .3s;
	transition: color .3s;
	z-index: 200;
}

.closebtn:hover{
	color: #c41111;
}

.linkbox .catLink{
	/*display: block;
	max-width: 300px;*/
	margin-right: 20px;
	color: black;
	-webkit-transition: color .3s;
	transition: color .3s;
	text-decoration: none;
}

.linkbox .catLink:hover{
	color: #c41111;
}

.linkbox{
	margin-bottom: 15px;
}

.buzzword{
	display: none;
	font-size: 35px;
	letter-spacing: 35px;
	margin: 0px 30px 0px 30px;
	padding-top: 80px;
}

.buzzword.top-right{
	position: absolute;
	text-align: right;
	right: 0px;
}

.buzzword.bottom-right{
	position: absolute;
	bottom: 80px;
	text-align: right;
	right: 0px;
}

.buzzword.bottom-left{
	position: absolute;
	bottom: 80px;
}

.buzzword.middle-right{
	position: absolute;
	text-align: right;
	top: 45%;
	right: 0px;
}

.infobox{
	display: none;
	position: absolute;
	background: rgba(255, 255, 255, 0.75);
	cursor: ns-resize;
	width: 100%;
}

.infobox .textbox{
	width: 60%;
	margin-left: 90px;
	margin-top: -18px;
	z-index: 60;
	position: relative;
}

.infobox .textbox p{
	margin: 0px 0px 15px 0px;
	color: #1d1d1d;
}

.infobox .textbox a{
	color: #666666;
	-webkit-transition: color .3s;
	transition: color .3s;
	text-decoration: none;
}

.infobox .textbox a:hover{
	color: #727A83;
}

.catname{
	color: white;
	opacity: .85;
	z-index: 50;
	position: relative;
}

.catname h1{
	margin: 0px 0px 0px 20px;
	padding: 0px;
	font-size: 60px;
	letter-spacing: 8px;
}


/* SLIDESHOW */

.fullsizeslider .element, .focusedslider .element{
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
}

.fullsizeslider .element, .focusedslider .element{
	background-size: contain;
	background-repeat: no-repeat;
}

.description h2{
	color: #d4dedf;
	font-size: 50px;
}

.description p{
	margin: -15px 00px 15px 30px;
	color: #1d1d1d;
	background: rgba(255, 255, 255, 0.75)
}

.description{
	position: absolute;
}

.description.top-left{
	left: 30px;
	top: 60px;
}

.description.top-right{
	right: 30px;
	top: 60px;
}

.description.bottom-right{
	bottom: 80px;
	right: 30px;
}

.description.bottom-left{
	bottom: 80px;
	left: 30px;
}

/* Timing */

.owl-theme .owl-controls{
	position: absolute;
	top: 0px;
}

.owl-theme .owl-controls .owl-nav [class*=owl-]{
	color:#fff;
	font-size:14px;
	margin:5px;
	padding:4px 7px;
	background:#d6d6d6;
	display:inline-block;
	cursor:pointer;
}

.owl-theme .owl-controls /*.owl-nav [class*=owl-]*/:hover{
	background:#869791;
	color:#fff;
	text-decoration:none
}

.owl-theme .owl-controls .owl-nav .disabled{
	opacity:.5;
	cursor:default
}

.owl-theme .owl-dots .owl-dot{
	display:inline-block;
	zoom:1;
	*display:inline
}

.owl-theme .owl-dots .owl-dot span{
	width: 20px;
	height: 5px;
	margin: 0px;
	background: #BCBEC0;
	display:block;
	-webkit-backface-visibility:visible;
	-webkit-transition:opacity 200ms ease;
	transition:opacity 200ms ease;
}

.owl-theme .owl-dots .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span{
	background: #727A83;/*#9b9b9b*/
}

.owl-nav{
	display: block;
	position: absolute;
	z-index: 9999;
	background: none!important;
}

.owl-controls .owl-prev{
	left: 20px;
	background: none!important;
}

.owl-controls .owl-next{
	right: 20px;
	background: none!important;
}

.slidenav{
	z-index: 99999;
	position: absolute;
	cursor: pointer;
	color: rgba(176, 176, 176, 0.3);
	font-size: 60px;
	top: 50%;
	-webkit-transition: color .5s;
	transition: color .5s;
	/*text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15);*/
}

.slidenav:hover{
	color: #d5d5d5;
}

.prevslide{
	position: absolute;
	left: 5px;
}

.nextslide{
	position: absolute;
	right: 5px;
}

/* ÜBER MICH */

.competences{
	position: absolute;
	text-align: right;
	right: 30px;
	top: 50px;
	text-transform: uppercase;
	letter-spacing: 22px;
	font-size: 33px;
	line-height: 100px;
	color: #727A83;
	display: none;
}

.infobox.uebermich{
	background: rgba(16, 37, 38, 0.85);
	overflow: scroll;
	height: 250px;
	color: white;
}

.infobox.uebermich .textbox{
	width: 60%;
	margin-top: -19px;
}

.infobox.uebermich .textbox p{
	color: white;
	letter-spacing: 5px;
}

.infobox.uebermich .textbox p br{
  content: "";
  margin: 2em;
  display: block;
  font-size: 70%;
}



/* KONTAKT */

.infobox.kontakt{
	height: 400px;
	overflow: scroll;
}

.impressumText{
	margin-top: 30px;
}

a.scrolldown{
	cursor: pointer;
	-webkit-transition: color .3s;
	transition: color .3s;
}

a.scrolldown:hover{
	color: #c41111;
}


#videoWorldExpands{
	width: 100%;
}


/* BLURRED */

.fullsizeimage.blurred, .fullsizeslider.blurred, .focusedslider.blurred{
	-webkit-filter: blur(11px);
	        filter: blur(11px);
}


.ifportrait{
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(242, 243, 227, 0.95);
	z-index: 99999999;
}

.ifportrait .closebtn{
	right: 13px;
}

.turndevice{
	width: 100%;
	text-align: center;
	padding-top: 100px;
	line-height: 28px;
}

.turndevice span{
	font-size: 45px;
}

/** DSGVO 2018 **/

.smalltext{
	max-width: 700px;
	overflow: scroll;;
	height: 100%;
	margin: 0 auto;
	color: #e5e5e5;
}

.smalltext div{
	margin-top: 60px;
	margin-bottom: 60px;
}

.smalltext div h1{
	font-size: 28px;
	color: #f9f9f9;
	margin-bottom: 35px;
}

.smalltext div h2{
	font-size: 22px;
	margin-bottom: 15px;
	color: #f9f9f9;
	margin-top: 60px;
}

.smalltext div h3{
	font-size: 17px;
	margin-top: 30px;
	text-decoration: underline;
}

.smalltext div p strong{
	color: #ebebeb;
}

.smalltext div a{
	color: #f29d00;
	text-decoration: none;
}



/* MOBILE PHONE */

@media only screen and (max-device-width: 670px) { /* eigentlich 480 */

	.hamburger{
		display: block;
	}
		
	.menu{
		display: none;
		width: 100%;
		position: absolute;
		background: #F0F1E0;
		right: 0px;
		top: 80px;
		z-index: 88888;
		padding-bottom: 20px;
		border-top: 4px solid #d2d5ce;
	}
	
	div.navi ul{
		display: block;
	}
	
	div.navi ul li{
		margin-left: 0px;
		line-height: 33px;
		text-align: center;
	}
	
	div.navi ul li a{
		font-size: 22px;
	}
	
	div.navi ul.children{
		display: none;
		background: none;
		position: relative;
		margin-left: 0px;
	}

	.pageSwitcher{
		margin-left: 10px;
	}
	.slidenav{
		display: none;
	}
	
	/* Info Pages */
	
	.infobox{
		bottom: 0px!important;
	}
	
	.infobox .textbox{
		box-sizing: border-box;
		margin: 0px;
		padding: 0px 15px 0px 15px;
		width: 100%;
	}
	.infobox .textbox p{
		font-size: 12px;
		margin: 0px 0px 10px 0px;
	}
	.catname h1{
		font-size: 38px;
		margin: 0px 0px 0px 5px;
	}
	.closebtn{
		right: 7px;
	}
	.linkbox{
		font-size: 12px;
		margin-bottom: 10px;
	}
	.linkbox .catLink{
		margin-right: 10px;
	}
	.buzzword{
		font-size: 20px;
		letter-spacing: 15px;
	}
	.buzzword.middle-right{
		top: 7%;
	}
	.buzzword.bottom-left{
		top: 119px;
	}
	
	/* Über mich */
	
	.competences{
		right: 0px;
		letter-spacing: 11px;
		font-size: 25px;
		line-height: 58px;
	}
	.infobox.uebermich .textbox{
		width: 93%;
	}
	.infobox.uebermich .textbox p{
		letter-spacing: 2px;
	}
	
	
}


@media only screen and (max-device-width: 670px) and (orientation: portrait){
	.ifportrait{
		display: block;
	}
}

@media only screen and (max-device-width: 670px) and (orientation: landscape){
	.ifportrait{
		display: none;
	}
	
	.headline{
		height: 50px;
		z-index: 99999;
	}
	
	.fullsizeimage, .fullsizeslider, .focusedslider{
		height: calc(100% - 50px);
	}
	
	.headline img{
		height: 40px;
		margin-top: 5px;
	}
	
	.hamburger{
		top: 0px;
	}
	
	.menu{
		top: 50px;
	}
	
}

/* iPads (portrait) ----------- */
   @media only screen 
   and (min-device-width : 768px) 
   and (max-device-width : 1024px) 
   and (orientation : portrait) {
   
   .pageSwitcher{
	    margin-left: 10px;
   }
   
   div.navi ul li{
	   margin-left: 20px;
   }
   
   div.navi{
	   margin-right: 20px;
   }
   
   div.navi ul li a{
	   letter-spacing: -1px;
   }
   
}

/* iPads (landscape) ----------- */
   @media only screen 
   and (min-device-width : 768px) 
   and (max-device-width : 1024px) 
   and (orientation : landscape) {
   /* Styles */
   
   .pageSwitcher{
	   margin-left: 34px;
   }
   
}