html,
body
{
  padding: 0;
  margin: 0;
  /*background-color: #2E4A56;*/
  -webkit-font-smoothing: antialiased !important;
}

.spacer {
	clear: both;
	padding-left:100%;
}

/*---------------------------------------Sample Site---------------------------------------*/
#sampleinhalte {
	width:60vw;
	height:auto;
	margin-top:5vh;
	margin-left:auto;
	margin-right:auto;
	color:#2E4A56;
    /*background: linear-gradient(195deg,  #3C5E6D 0%, #DCFF00 30%);*/
	background-color:#DCFF00;
    padding:1.5vh;
}

#sampleinhalte h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 3vh;
	font-weight: 400;
	margin:0;
}

#sampleinhalte h2 {
	font-family: 'Raleway', sans-serif;
	font-size:5vh;
	font-weight:200;
	margin:2.5vh 0 0 0;
}

#sampleinhalte p {
	font-family: 'Raleway', sans-serif;
	font-size: 1.8vh;
	line-height:3vh;
	font-weight:200;
}

.samplebg {
	min-width:100vw;
	min-height:100vh;
	background-repeat: no-repeat;
	background-size: cover !important;
	background-position: 50% 50% !important;
	margin-top:-5vh;
}

.samples {
	width:60vw;
	height:auto;
	margin-left:auto;
	margin-right:auto;
	background-color:#F2F2F2;
	padding:1.5vh;
}

.samples img {
	float:left;
}

.samples video {
	margin-left:auto;
	margin-right:auto;
}

/*---------------------------------------Mobil---------------------------------------*/
#mobileadvice {
    display:none;
    z-index:2000;
    position:fixed;
    width:100vw;
	height:100vh;
	text-align: center;
	color:#2E4A56;
    background-image: linear-gradient(0deg, #3C5E6D,#DCFF00);
}

#mobileadvice h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 20vw;
	font-weight: 700;
	margin:0;
}

#mobileadvice h2 {
	font-family: 'Raleway', sans-serif;
	font-size:8vw;
	font-weight:200;
	/*letter-spacing: 0.05em;*/
	margin:2% 0 0 0;
}

#mobileadvice h3 {
	font-family: 'Raleway', sans-serif;
	font-size:5vw;
	font-weight:200;
	margin:0;
}

#mobileadvice h4 {
	font-family: 'Raleway', sans-serif;
	font-size:5vw;
	font-weight:400;
	margin:0;
}


#mobileadvice img {
    height: 100%;
}


/*---------------------------------------Menu---------------------------------------*/
#menu {
	z-index:200;
	width:auto;
	height:auto;
	background-color:#DCFF00;
	margin-top:15vh;
	padding:1vh 0.5vw 1vh 1.5vw;
	position: fixed;
	font-family: 'Raleway', sans-serif;
	line-height: 2.5vh;
}

#menu a:link {
	color:#2E4A56;
	text-decoration: none;
}

#menu a:hover {
	 background-color:#00ffff;
}

#menu a:visited {
	 color:#2E4A56;
}

#menu a:active {
	 color:#ffffff;
}

.closebtn {
	z-index:200;
	width:auto;
	height:auto;
	padding: 0.5vw;
	background-color:#DCFF00;
	/*margin-top:5vh;*/
	position: fixed;
}

.closebtn img {
	width:3vw;
	height:auto;
}

/*---------------------------------------Intro---------------------------------------*/
#intro {
	/*margin-top:10vh;*/
	width:100vw;
	height:100vh;
    /*margin-top:0;*/
	text-align: center;
	color:#2E4A56;
    background-image: linear-gradient(90deg, #3C5E6D,#DCFF00);
    /*background: linear-gradient(90deg, rgba(0,255,255,1) 0%, rgba(60,94,109,1) 20%, rgba(60,94,109,1) 40%, rgba(220,255,0,1) 100%); */
}

#intro h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 12vw;
	font-weight: 700;
	margin:0;
}

#intro h2 {
	font-family: 'Raleway', sans-serif;
	font-size:4vw;
	font-weight:200;
	/*letter-spacing: 0.05em;*/
	margin:0;
}

#intro h3 {
	font-family: 'Raleway', sans-serif;
	font-size:1.6vw;
	font-weight:200;
	margin:0;
}

/*---------------------------------------Vita---------------------------------------*/
#vita {
	padding-top:10vh;
	display: block;
	width:100vw;
	/*min-height:100vh;*/
	text-align: center;
	color:#2E4A56;
	background-image: linear-gradient(90deg, #fff,rgba(0,50,50,0.2));
}

#vita h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 350%;
	font-weight: 700;
}
#vita h2 {
	font-family: 'Raleway', sans-serif;
	font-size: 200%;
	font-weight: 200;
}


.wrapvita{
    text-align: center;
    margin-top: 5vh;
    padding-bottom: 15vh;
}

button.accordion {
    /*background-color: #2E4A56;*/
    background: linear-gradient(90deg, #fff, rgba(0,255,255,0.6));
    color: #2E4A56;
    /*color: #fff;*/
    cursor: pointer;
    border: 0px;
    padding:1%;
    margin:0;
    width:60%;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: 200%;
    /*transition: color .4s, width .2s ease-out;*/
}

button:focus {
    outline:none;
}

button.accordion img {
    height: 3vh;
    /*-webkit-filter: brightness(1000%); 
    filter: brightness(1000%);*/
}

button.accordion:hover {
    background: linear-gradient(90deg, #3C5E6D,#00ffff);
    /*color: #2E4A56;*/
}

button.accordion:hover img {
    height: 3vh;
    /*-webkit-filter: brightness(100%); 
    filter: brightness(100%);*/
}

button.accordion.active {
    /*background-color: #00ffff;*/
    background: linear-gradient(90deg, #DCFF00,#00ffff);
    color: #2E4A56;
    width: 60%;
}

button.accordion.active img {
    image-orientation: 90deg;
    -webkit-filter: brightness(100%);
    filter: brightness(100%);
}


div.panel{
    padding:0;
    color:#000;
    max-height: 0;
    overflow: hidden;
    width: 60%;
    margin:0 auto;
    transition: max-height .2s ease-out;
}

.inhaltvita {
	/*background-color:#DCFF00;*/
    font-family: 'Raleway', sans-serif;
	font-weight:200;
    font-size:2vh;
	margin:0;
	text-align:center;
	color: #2E4A56;
	padding:0.2vw;
	line-height:1.4em;
	z-index:200;
    transition: font-size .2s ease-out;
	
	/*-webkit-transition-property: font-size;
    -webkit-transition-duration: 0.7s;
    -webkit-transition-timing-function: ease-out;
    transition-property: font-size;
    transition-duration: 0.7s;
    transition-timing-function: ease-out;*/
}

.inhaltvita:hover {
	background-color:#DCFF00;
	font-size:2.2vh;
    transition: font-size .2s ease-out;
}

.inhaltvitaplus {
    background-color:#00ffff;
    font-family: 'Raleway', sans-serif;
	font-weight:200;
    font-size:2vh;
	margin:0;
	text-align:center;
	color: #2E4A56;
	padding:0.2vw;
	line-height:1.4em;
	z-index:200;
}

.inhaltvitaplus:hover {
    background-color:#DCFF00;
    font-size:2.2vh;
}

.inhaltskills {
    padding: 0;
    margin: 0vh 0 15vh 0;
	min-height:25vh;
	text-align:center;
	color: #2E4A56;
	/*padding:0.2vw;*/
	line-height:1.5em;
	z-index:1000;
	font-family: 'Raleway', sans-serif;
	font-size: 1vw;
	font-weight: 700;
}

.inhaltskills td {
    vertical-align: top;
    padding-top: 2vh;
    /*padding-bottom: 2vh*/;
}

.inhaltskills td:hover  {
    background-color: #DCFF00;
    margin: 0 0 15vh 0;
    transition: margin .2s ease-out;
}

.inhaltskills td:hover img {
    height:13vh;
    transition: height .2s ease-out;
}

.inhaltskills td .more {
    visibility: visible;
    /*display: block;*/
    color:#fff;
    font-family: 'Raleway', sans-serif;
    font-size: 2.5vh;
    font-weight: 200;
    letter-spacing: 0.2em;
}

.inhaltskills td:hover .more{
    visibility: hidden;
    /*display:none;*/
}

.inhaltskills td .more img {
    height: 5vh;
    image-orientation: 90deg;
    -webkit-filter: brightness(1000%); 
    filter: brightness(1000%);
}


.inhaltskills td .textover {
    display:none;
    font-family: 'Raleway', sans-serif;
    font-size: 2vh;
    font-weight: 200;
}


.inhaltskills td:hover .textover{
    display: block;
}


/*.inhaltskills td:hover img{
    -webkit-filter: brightness(1) invert(0);
	filter: brightness(1) invert(0);
}*/


.skillbalken {
	padding-top:0;
}
.skillbalken img {
	height:10vh;
    margin-bottom: 2vh;
    transition: height .2s ease-out;
	/*-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);*/
}


.referenzen {
	/*min-width: 30vw;*/
	margin:4vh auto 7vh auto;
}

.referenzen img{
	/*max-width: 30vw;*/
    height:auto;
    width:95%;
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
    transition: width .2s ease-out;
}

.referenzen img:hover{
    height:auto;
    width:100%;
	-webkit-filter: brightness(1) invert(0);
	filter: brightness(1) invert(0);
    transition: width .2s ease-out;
}


.sprachen {
	width: 100%;
	margin:0;
	line-height:2.7vh;
    color: #2E4A56;
    font-family: 'Raleway', sans-serif;
	font-size: 2vh;
	font-weight: 700;
    /*font-family: 'Raleway', sans-serif;
    font-size: 2vh;
    font-weight: 200;*/

	-webkit-transition-property: background-color; filter, -webkit-filter;
    -webkit-transition-duration: 0.2s;
    -webkit-transition-timing-function: ease-out;
    transition-property: background-color; filter, -webkit-filter;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
}

.sprachen table, tr, th, td {
    border:none;
    border-style: none;
    border-collapse:collapse;
    margin:0px;
    padding: 0px;
}

.sprachen td {
    padding:0 2% 0 2%;
}

.sprachen tr:hover {
	background-color:#DCFF00;
    font-size: 2.2vh;
    transition: font-size .2s ease-out;
}

.sprachen td img{
    width:40%;
}

.sprachen tr:hover td img {
    width:45%;
    transition: width .2s ease-out;
}


/*---------------------------------------Kontakt---------------------------------------*/
#kontakt {
	padding-top:5vh;
	/*display: block;*/
	width:100vw;
	min-height:100vh;
    text-align: center;
	color:#2E4A56;
}

.kontakt_box {
    display: inline-block;
	width:60%;
	height:auto;
	margin:5vh auto 0 auto;
	color:#2E4A56;
	padding:1.5vh;
}

.adressfeld {
	height: 10vh;
	padding: 1vh 0 1vh 2vw;
	background: linear-gradient(90deg, #fff, rgba(0,255,255,0.6));
	margin:0;
	/*float:left;*/
    text-align: left;
	
}

button.sendfeld {
    /*background-color: #2E4A56;*/
    background:#DCFF00;
    color: #2E4A56;
    /*color: #fff;*/
    cursor: pointer;
    border: 0px;
    padding:0% 0 2% 0;
    margin:0;
    height: 10vh;
    width:100%;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: 200%;
}


.sendfeld {
	height: 10vh;
	padding: 1vh 0 1vh 2vw;
	background-color:#DCFF00;
	
	/*float:left;*/
}

button.sendfeld:hover {
    background: linear-gradient(90deg, #DCFF00, rgba(0,255,255,0.6));
    /*font-size: 3.5vh;*/
    transition: background .2s ease-out;
}


input[type=submit] {
       background:#DCFF00;
    color: #2E4A56;
    /*color: #fff;*/
    cursor: pointer;
    border: 0px;
    padding:0% 0 0% 0;
    margin:0;
    height: 10vh;
    width:100%;
    text-align: center;
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
    font-size: 200%;
}

input[type=submit]:hover{
    background: linear-gradient(90deg, #DCFF00, rgba(0,255,255,0.6));
    /*font-size: 3.5vh;*/
    transition: background .2s ease-out;
}


#kontakt h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 350%;
	font-weight: 700;
	margin:0;
}

#kontakt h2 {
	font-family: 'Montserrat', sans-serif;
	font-size:3vh;
	font-weight:400;
	margin:2.5vh 0 0 0;
}

#kontakt p {
	font-family: 'Raleway', sans-serif;
	font-size: 2.2vh;
	line-height:3vh;
	font-weight:200;
    text-align: center;
}

#kontakt a:link {
	color:#2E4A56;
	text-decoration: none;
}

/*#kontakt a:hover {
	 color:#00ffff;
}

#kontakt a:visited {
	 color:#2E4A56;
}

#kontakt a:active {
	 color:#00ffff;
}*/


/*---------------------------------------Projekte---------------------------------------*/

#projekte {
	padding-top:5vh;
	display: block;
	width:100vw;
	min-height:100vh;
	text-align: center;
	color:#fff;
	background: linear-gradient(90deg, #3C5E6D,#2E4A56);
}


#projekte h1 {
	font-family: 'Montserrat', sans-serif;
	font-size: 350%;
	font-weight: 700;
}
#projekte h2 {
	font-family: 'Raleway', sans-serif;
	font-size: 200%;
	font-weight: 200;
}

.projekteinhalte {
	width: 60%;
	min-height:72vh;
	margin: auto;
	/*border:0.1vw solid;
	border-color:#2E4A56;*/
}

.wrapper { 
	width:20vw; 
	height:24vh; 
	float:left; 
	overflow:hidden;

} 

.wrapper img { 
	width:auto; 
	height:24vw;
	margin-left:auto;
	margin-right:auto;
	border:0.1vw solid;border-color:#2E4A56;
	
	
	-webkit-transition:transform 700ms;  
	transition:transform 700ms;
} 

.content { 
	width:22vw; 
	height:24vw;
	margin-left:-1vw;
	background: rgba(255, 255, 0, 0);
	position:relative;
	margin-top:-25vw;
	
	-webkit-transition:all 700ms;  
	transition:all 700ms;
} 

.wrapper:hover .content { 
	background: rgba(220, 255, 0, 0.7);
	/*-webkit-transform:translateY(-32vh); 
	transform:translateY(-32vh); */
} 

.text_area { 
	color:#2E4A56; 
	width:22vw; 
	text-align:center; 
	position:absolute; 
	margin-top:12vh;
	font-family: 'Montserrat', sans-serif;
	font-size: 2vh;
	font-weight:700; 
	cursor:pointer;
	display:none; 
}

.text_area a:link {
	color:#2E4A56;
	text-decoration: none;
}

.text_area a:hover {
	 color:#00ffff;
    text-decoration: none;
}

.text_area a:visited {
	 color:#2E4A56;
    text-decoration: none;
}

.text_area a:active {
	 color:#00ffff;
    text-decoration: none;
}


.wrapper:hover .text_area { 
	display:block; 
} 
.wrapper:hover img { 
	-webkit-transform:scale(1.3);  
	transform:scale(1.3); 
}







@media all and (max-width: 680px), all and (max-height: 600px){

  #mobileadvice{
    display:block;
    text-align:center;
  }
    
    #menu{
        display:none;
    }
    
    #intro{
        display:none;
    }
    
    #vita{
        display:none;
    }
    
    #projekte{
        display:none;
    }
    
    #kontakt{
        display:none;
    }

  #desktops {
    display:none;
  }

  body,html {
    height:100vh !important;
  }
}