@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');

*{
padding:0;
margin:0;
box-sizing:border-box;
}

/*///////header/////*/
header{
/*background-color:#76E9FF;*/
width:32%;
float:left;
}
h1{
font-family: 'Roboto', sans-serif;
font-size:36px;
text-align:center;
padding-top:70px;
padding-bottom:10px;
}
h1 span{
font-family: 'Roboto', sans-serif;
font-size:15px;
}
.logo{
color:#000;
text-decoration:none;
}

/*///////////////	nav	//////////////*/
nav ul {
padding:0 100px;
text-align:center;
}
nav ul li{
list-style-type:none;
padding:30px 0;
border-bottom:1px solid #000;
}
nav ul li li{
border-bottom:0;
}
nav ul li a{
text-decoration:none;
color:#000;
font-family: 'Roboto', sans-serif;
font-size:22px;
line-height:30px;
text-transform:uppercase;
}
nav ul li a#aktiv{
color:#9EA9AF;
}

/* socialicons */
#socialicons ,#socialicons li, #sosialicons li a{
padding:0;
margin:0;
}
#socialicons li{
 display:inline;
 margin:0 0.3em;
 }

/*///////////////	main	//////////////*/
main{
width:66%;
/*background-color:#ff0;*/
float:right;
margin-top:60px;
}
.main-index{
margin-top:0;
}
/*	////////// 	bilder work	 ///////////*/
.abstandoben{
margin-top:10px;
}
.abstandoben1{
margin-top:50px;
}
.abstandoben2{
margin-top:20px;
}
#work{
overflow:hidden;
}
.workdrittel{
width:33.33333333333333%;/*erhöht und class abstandoben= zweite Fotoreihe leicht nach unten versetzt*/
float:left;
}
.workdrittel:last-child{
margin-right:0;
}
.workdrittel ul{
list-style-type:none;
}
.workdrittel ul img{
width:100%;
}


/*	////////// 	footer	 ///////////*/
footer{
clear:both;
/*background-color:#f00;*/
padding:90px;
}
footer ul{
list-style-type:none;
}
footer li{
display:inline;
}
#footerliste {
/*background-color:#f00;*/
}
#footerliste li a{
text-decoration:none;
color:#000;
font-family: 'Roboto', sans-serif;
font-size:20px;
margin-left:10px;
}


/*	////////// 	Kontaktformular	 ///////////*/
address{
margin-left:30%;
font-style:normal;
margin-top:1em;
}
address a{
color:#929393;
}
#kontaktformular{
width:100%;
padding-right:3em;
}
#kontaktformular label{
	/*background-color:#f00;*/
	display:inline-block;
	margin-bottom:0.3em;
	font-family: 'Roboto', sans-serif;
	color:#929393;
	margin-top:30px;
	width:30%;
}
#kontaktformular p{
	margin-bottom:1.2em;
}
#kontaktformular input[type="text"],
#kontaktformular input[type="email"],
#kontaktformular textarea,
#kontaktformular select{
	width:70%;
	padding:0.625em;
	
	font-size:0.95em;
	border:0.0625em solid #ccc;
	background-color:rgba(0,0,0,0.1);/*eee*/
}
#kontaktformular input[type="text"]:focus,
#kontaktformular input[type="email"]:focus,
#kontaktformular textarea:focus,
#kontaktformular select:focus{
	border:0.0625em solid #333;/*ccc*/
	background-color:#929393;/*eee*/
	color:#fff;
}
#kontaktformular input[type="submit"],
#kontaktformular input[type="reset"]{
padding:1em 3em;
border:0.0625em solid #333;
background-color:#929393;
color:#fff;
font-size:0.95em;

		-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#kontaktformular input[type="submit"]{
margin-left:30%;
}
#kontaktformular input:hover[type="submit"],
#kontaktformular input:hover[type="reset"]{
     background-color:rgba(94, 215, 255, 0.5);
}
/*	    /Kontaktformular	*/



/* /////////////////	galerie artwork	 ////////*/
.galerie4{
list-style-type:none;
overflow:hidden;
}
.galerie4 li{
line-height:0;
width:32%; 
float:left;
margin:0 2% 2% 0;
}
.galerie4 li:nth-child(3n){
margin:0 0 2% 0; 
}
.galerie4 li img{
width:100%;
border:1px solid #AFB3A4;
}
.galerie4 figure{
border:1px solid #000;
position:relative;
overflow:hidden;
}


/* /////////////////	galerie video	 ////////*/
.galerie5{
list-style-type:none;
overflow:hidden;
}
.galerie5 ul{
line-height:0;
width:60%; 
float:left;
margin:0 2% 2% 0;
}


/*////	 responsive iframes		////////*/
.iframebox { 
position: relative; 
padding-bottom: 57%;
height: 0; 
overflow: hidden; 
max-width: 100%; 
} 
.iframebox iframe{ 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; border:0;
}

/*    	/galerie artwork	 */



/*////////////////		experience		////////////////////*/
/*
.rowstation{
margin: 20px 0;
overflow: hidden;
}
.halbe {
    width: 50%;
    float: left;
}
.station {
    text-align: center;
    padding: 10px 0px;
    margin: 0 50px;
    border-bottom: 0.7px solid #888;
}

.station h4 {
    font-family: 'Lato',sans-serif;
    font-weight: 900;
    letter-spacing: 0.05em;
    font-size: 1em;
    color: #000;
}
.station h3 {
    font-family: 'Lato',sans-serif;
    font-weight: 900;
    letter-spacing: 0.05em;
    font-size: 1em;
    color: #888;
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.station {
    text-align: center;
}
.innerbox {
    color: #000;
}
.halbe {
    width: 50%;
    float: left;
}
.halbe2 {
    width: 50%;
    float: left;
    border-left: 1px solid #888;
}
*/
h2{
	margin-bottom:1em;
	
}

.station {

    text-align: center;
    padding: 2em 0px;
    margin: 0 50px;
    border-bottom: 0.7px solid #888;
}

.station h4 {
    font-family: 'Lato',sans-serif;
    font-weight: 900;
    letter-spacing: 0.05em;
    font-size: 1em;
    color: #000;
}
.station h3 {
    font-family: 'Lato',sans-serif;
    font-weight: 900;
    letter-spacing: 0.05em;
    font-size: 1em;
    color: #888;
}
/*////////////////		experience TEST		////////////////////*/
.innerbox{
margin-top:50px;
font-family: 'Roboto', sans-serif;
}
.zweidrittel1{
 width:26%;
 float:left;
 margin-right:2%;
 }
.zweidrittel{
 width:64%;
 float:right;
 margin-right:2%;
 border-left:1px solid #BAC1C4;
 margin-top:2%;
}
.zweidrittel:last-child{
 margin-right:0;
}
.zweidrittel .station{
float:right;
width:90%;
}
.twobuttons{
margin:94px;
display:inline-block;
text-decoration:none;
}
.button-menu{
list-style-type:none;
}
.twobuttons a{
text-decoration:none;
color:#BAC1C4;
}


/*	////////////	Breakpoint	/////////	 */
@media only screen and (max-width:980px){

nav ul {
    padding: 0 10px;
    text-align: center;
}
}
nav ul li a{
/*color:#f00;*/
}

/*	////////////	Breakpoint	/////////	 */
@media only screen and (max-width:768px){
header{
width:100%;
float:none;
margin-bottom:2em;
}
nav ul {
    padding: 0 15px;
    text-align: center;
}
nav ul li{
list-style-type:none;
padding:10px 0;
border-bottom:1px solid #000;
}
nav ul li a{
/*color:#f90;*/
}

/*	main	*/
main{
padding:1em;
width:100%;
float:none;
margin-top:0;
}
.main-index{
margin-top:0;
}
footer{
	text-align: center;
}
address{
margin-left:0;
}
}

/*	////////////	Breakpoint 	/////////	 */
@media only screen and (max-width:480px){
nav ul li a{
/*color:#f00;*/
}
/*	contact	*/
#kontaktformular label{
	display:block;
	width:100%;
}
#kontaktformular p{
	margin-bottom:1.2em;
}
#kontaktformular input[type="text"],
#kontaktformular input[type="email"],
#kontaktformular textarea,
#kontaktformular select{
	width:100%;
}
#kontaktformular input[type="submit"],
#kontaktformular input[type="reset"]{
	width:100%;
	margin:0 0 0.3em 0;
}
}