* {
	margin: 0;
	padding: 0;
	vertical-align: top;
	  -webkit-box-sizing: border-box;
}

/* HOVER EFFECT */

ul.img-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

ul.img-list li{
	display: inline;
	position: relative;
	-moz-backface-visibility: hidden;	
}

ul.img-list li:hover{
	opacity: .5;
	-moz-backface-visibility: hidden;
	cursor: pointer;	
	transition: all 0.3s ease-in-out 0s;
}

#thumbnails img{
	text-align: left;
	width: 300px;
}


/*---------------------------*/

/* PRELOADER */
/*#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
/*    z-index:99; /* makes sure it stays on top */
/*}*/

/*#status {
    width:200px;
    height:200px;
    position:absolute;
    left:50%; 
    top:50%; 
    background-image:url(images/loading2.gif); 
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
/*}*/

/*******************MAIN********************/


#wrapper {
	width: 100%;
	position: relative;
	margin: auto;
}

#body {
	font-size: 100%;
	font-family: Raleway, Verdana;
	background-color: white;
	background-repeat: repeat-x;
	color: #3F3F3F;
	overflow: hidden;
}

.extraspace{
    width: 900px;
    max-width: 1200px;
	margin: 0 auto;
    /*background-color: #e0e0e0;*/
    background-color: white;
    text-align: center;
    margin-bottom: 2em;
    margin-top: 3em; /*war-1em*/
}

.extratext{
	color: #3f3f3f;
    font:1.8em;
    font-family: Source Sans Pro, Helvetica;
    padding:1em;
    clear: both;
    text-align: left;
    width: 80%;
    margin: auto;
    line-height: 1.7;
    font-weight: 300;
}

#titelbild{
	display: block;
	max-width: 1500px;
	text-align: center;
	margin: auto;
}

#titelbildmobile{
	display:none;
}

/**********MENU***********/

#logoplus{
	width: 100%;
	float: left;
	position: relative;
	max-width: 1200px;
	margin: auto;
	text-align: center;
}

#logo img{
	width: 15%;
	float: left;
}

#menu{
	padding-top: 7%;
	width: 100%;
}

.menunamen{
	text-decoration: none; 
	font-size: 1.3em; /*war1.3em*/
	display: inline;
}


#menu a:hover{
	color: #262626;
	transition: all 0.3s ease-in-out 0s;
}

#thumbnails{
	width: 95%;
	margin: auto;
	text-align: center;
	max-width: 1200px;
}

#thumbnails a {
	padding-right: 0%;
}


/* ---------------------------*/
/* ---------------------------*/
/* ---------------------------*/
/* ---------CONTENT-----------*/
/* ---------------------------*/
/* ---------------------------*/
/* ---------------------------*/
.gif{
	width: 100%;
}

.singlephoto{
	width: 100%;
	margin: 0 auto;
}


.slider{
	margin-top: -5em;
}

.critical{
	width: 16.6%;
	margin: 0 auto;
	text-align: center;
}

.askit{
	display: inline;
	margin: 0 auto;
	width: 32%;
}

.askit img{
	width: 39%;
	margin: 0 -2em;
}

.finderapp{
	display: inline;
	margin: 0 auto;
}

.finderapp img{
	width: 25%;
	float: left;
	margin: auto;
	text-align: center;
	padding-top: 3em;
	padding-bottom: 3em;
}


.headphone{
	width: 80%;
	float: left;
	padding-left: 10%;
	padding-bottom: 2em;
		}

/*für paralax*/


	#clouds		{position: absolute;}
	#mountains	{position: absolute; top: 290px;} 
	#cactus		{position: absolute; top: 220px;}
	#fahne 		{position: absolute; top: 100px; left:0;}
	#wrapper2	{position: relative; width: 100%; height: 680px; overflow: hidden; margin:auto;}

	#clouds		{position: absolute;}
	#houses		{position: absolute; top: -180px;}
	#boats		{position: absolute; top: 460px;}
	#ship		{position: absolute; top: 500px; left: 40px;}
	#fahne2 	{position: absolute; top: 200px; left:0;}
	#wrapper3	{position: relative; width: 100%; height: 680px; overflow: hidden; margin: auto; margin-bottom: -6em;}

/*ende*/

.video{
	width: 900px;
	max-width: 1200px;
	height: auto 	!important;
	margin: 0 auto;
	padding-bottom: 1em;
}

canvas{
	width: 90%;
	max-width: 1000px;
	margin: auto;
	text-align: center;
}

.misc{
	width: 33.3%;
	float: left;
}

/* ---------------------------*/
/* ---------------------------*/
/* ---------------------------*/
/* ---------ELEMENTS----------*/
/* ---------------------------*/
/* ---------------------------*/
/* ---------------------------*/

h3{
	color: #262626;
}

h4{
	font-family: Source Sans Pro, Helvetica;
	text-transform: uppercase;
	float: left;
	width: 12%;
	margin-left: 4%;
	margin-right: 4%;
	font-weight: normal;
}

a { 
	text-decoration: none; 
	font-family: Source Sans Pro, Verdana;
	font-weight: 800;
	font-size: 1.1em;
	color: #62605F;
	padding-right: 1%;
}

li:active{
	color:#0186A2;
	padding-top: 1em;
	padding-bottom: 0.6em;
}


#menu ul {
	list-style: none outside none;
	display: inline;
}

#menu li {
	margin: 7%;
	display: inline;
}

ul{
	list-style: none;
	text-decoration: none;
}

li{
	list-style: none;
	text-decoration: none;
}

.clear{
	clear: both;
}

.fill
{
    display:inline-block;
    width:300px;
    height:300px;
    line-height:0px;
    font-size:0px;
    margin: -2px;
}



/* ---------------------------*/
/* ---------------------------*/
/* ---------------------------*/
/* ---------CONTENT-----------*/
/* ---------------------------*/
/* ---------------------------*/
/* ---------------------------*/

#skills{
	margin-top: -20em;
}

#ueberschrift{
	font-size: 1.7em;
	text-align: center;
	margin: auto;
	font-family: Source Sans Pro, Helvetica;
	font-weight: bold;
	padding-top: 6em;
}

#process {
	max-width: 1200px;
	width: 95%;
	margin: auto;
	text-align: center;
}

#process img{
	float: left;
	width: 12%;
	margin: 4%;
	margin-bottom: 1em;
}

#process_text{
	max-width: 1200px;
	width: 95%;
	margin: auto;
	text-align: center;
}

#about_scroll{
	clear: both;
}

#ina {
	width: 100%;
	text-align: center;
	margin: auto;
	padding-top: 5em;
}

#ina img {
	width: 30%;
	max-width: 300px;
}

#likes{
	margin: auto;
	text-align: center;
	padding-top: 5em;
}

#likes img{
	margin: auto;
	text-align: center;
	max-width: 42px;
}

#vorstellungstext {
	font-family: Source Sans Pro, Helvetica;
	font-size: 1.3em;
	padding-left: 15em;
	padding-right: 15em;
	padding-top: 2em;
	padding-bottom: 2em;
	text-align: center;
	color:#3F3F3F;
	font-weight: 300;
}

#hallo{
	font-weight: bold;
	font-size: 1.7em;
}

#vorstellungstext a{
	font-weight: normal;
	color: #62605F;
	padding: 0;
	margin: auto;
	font-weight: bold;
}

#vorstellungstext a:hover{
	color: #37abdd;
}



/*     für contact seite     */

#contactinfo {
	font-family: Source Sans Pro, Raleway, Helvetica;
	font-size: 1.3em;
	padding-top: 2em;
	padding-bottom: 1em;
	text-align: center;
	/*background-color: #e0e0e0;*/
	width: 100%;
}

		#copyright{
			font-size: 0.6em;
			margin: auto;
			text-align: center;
			width: 100%;	
		}

		#copyright2 {
			font-size: 0.6em;
			margin: auto;
			text-align: center;
			width: 100%;	
			
		}

#socialmedia{
	width: 100%;
	margin: auto;
	text-align: center;
}

		div#socialmedia a{
			padding: 8px !important;
		}



		#socialmedia img{
			width: 20px;
			margin: auto;
			text-align: center;
		}