@charset "utf-8";
/* CSS Document */

html {
	padding:0px;
	margin:0px;
}

body{
	margin: 0px;
	padding: 0px;
	font-family: 'Roboto', sans-serif;
	font-size:18px;
	color:#333;
}

img{
	width:100%;
}

.header{
	margin-bottom: 100px;
}

.header img{
	width:100%;
	height:100vh;
	object-fit: cover;
	object-position: top center;
}

.header .text{
	position:absolute;
	bottom:100px;
	left:60px;
	color:#fff;	
	text-shadow: 0 0 0.2em #333;
	line-height:90px;
}

.header p{
	font-size: 80px;
	margin: 0px;
}

.header span{
	font-size: 80px;
	margin: 0px;
	font-weight: normal;
	_color:#e95d0f;
	
}

.bottom {
    width:100%;
    bottom:50px;
    position:absolute;
    text-align:center;
}

a.bottom-btn {
    padding:10px 20px;
    background-color:rgba(0,0,0,.5);
    border:1px solid #fff;
    color:#fff;
}

a.bottom-btn:hover, a.bottom-btn:active, a.bottom-btn:focus {
    text-decoration:none;
    color:#fff;
}

body h2{
	font-size: 70px;
	margin-top:0px;
}

body h3{
	font-size: 30px;
	color:#999;
	
}

.wrapper{
	padding-left: 14%;
	padding-right: 14%;
	margin-bottom:100px;
}

#portfolio{
	text-align: justify;
}

#referenzen{
	margin-top:100px;
	margin-bottom:100px;
}

#skills{
	margin-top:100px;
}

#referenzen h2, #referenzen h3, #skills h2, #skills h3{
	text-align: center;
}

#referenzen h3, #skills h3{
	margin-bottom: 50px;
}

.profil-img{
	border-radius: 800px;
	overflow:hidden;
	border:10px solid #fff;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(153,153,153,1);
	-moz-box-shadow: 0px 0px 10px 0px rgba(153,153,153,1);
	box-shadow: 0px 0px 10px 0px rgba(153,153,153,1);
	margin-top:5px;
}

.profil-img img{
	border-radius: 800px;
	border:1px solid #ddd;
}

#referenzen .item{
	margin-top:15px;
	margin-bottom:15px;
	overflow:hidden;
}

#referenzen .item img{
	
}

#referenzen .ref{
	background-color:rgba(51, 51, 51, 0.9);
	position:absolute;
	top:0px;
	left:15px;
	right:15px;
	bottom:0px;
	padding-top:23%;
	text-align:center;
	font-size:25px;
	color:#fff;
	margin-top:0%;
	
	-webkit-transition: all .8s ease-in-out;
  	-moz-transition: all .8s ease-in-out;
  	-ms-transition: all .8s ease-in-out;
  	-o-transition: all .8s ease-in-out;
  	transition: all .8s ease-in-out;
}

#referenzen .item:hover .ref{
	margin-top:41%;	
}

#referenzen p{
	opacity:0;
	position: absolute;
	bottom: -5px;
	left:30px;
	text-align: center;
	font-size: 18px;
	color:#fff;
}

#referenzen .item:hover p{
	opacity:1;
	-webkit-transition: all .8s ease-out;
  	-moz-transition: all .8s ease-out ;
  	-ms-transition: all .8s ease-out ;
  	-o-transition: all .8s ease-out ;
  	transition: all .8s ease-out ;
	transition-delay: .8s;
	-webkit-transition-delay: .8s;
	-moz-transition-delay: .8s;
	-ms-transition-delay: .8s;
	-o-transition-delay: .8s;
}

#kontakt{
	padding-top:50px;
	padding-bottom: 50px;
	background-color: #999;
	text-align:center;
	font-size:18px;
}

#kontakt a{
	color:#333;
}

.contao{
	padding-bottom: 20px;
	background-color:#f47c00;
}

/*.skill img{
	opacity:1;
}

.skill img:hover{
	opacity:.3;
	-webkit-transition: opacity .3s ease-in-out;
  	-moz-transition: opacity .3s ease-in-out ;
  	-ms-transition: opacity .3s ease-in-out ;
  	-o-transition: opacity .3s ease-in-out ;
  	transition: opacity .3s ease-in-out ;
}

.skill, .counter{
	cursor:pointer;
}*/

.counter{
	width:100%;
	position: absolute;
	top:0px;
	left:0px;
	bottom:0px;
	right:0px;
	font-size:70px;
	text-align: center;
	opacity:0;
	font-weight:bold;
	-webkit-transition: opacity .3s ease-in-out;
  	-moz-transition: opacity .3s ease-in-out ;
  	-ms-transition: opacity .3s ease-in-out ;
  	-o-transition: opacity .3s ease-in-out ;
  	transition: opacity .3s ease-in-out ;
}

.contao-skills .counter{
	background-color:#faba62;
	color:#f07d0a;
	padding-top:70px;
}

.schulung-skills .counter{
	background-color:#75be79;
	color:#fff;
	padding-top:140px;
}

.html-skills .counter{
	background-color:#f29987;
	color:#e54d26;
	padding-top:150px;
}

.css-skills .counter{
	background-color:#5b89c7;
	color:#3055a3;
	padding-top:150px;
}

.php-skills .counter{
	background-color:#adbbe0;
	color:#232732;
	padding-top:90px;
}

.schnell-skills .counter{
	background-color:#8097cd;
	color:#1f2861;
	padding-top:100px;
}

.host-skills .counter{
	background-color:#f6aa78;
	color:#c76315;
	padding-top:135px;
}

.resp-skills .counter{
	background-color:#76be7c;
	color:#374049;
	padding-top:135px;
}

.js-skills .counter{
	background-color:#ebd54c;
	color:#000;
	padding-top:100px;
}

.seo-skills .counter{
	background-color:#ee7469;
	color:#9f1916;
	padding-top:135px;
}

.skill:hover .counter{
	opacity:1;
}

.css{
	background-color: #5593ce;
	padding-top:41%;
}

.js{
	background-color: #55ce82;
	padding-top:41%;
}

.html{
	background-color: #8555ce;
	padding-top:20%;
}

@media only screen and (max-width : 1300px) {
	.header p, .header span, body h2{
		font-size:55px;
	}
	
	.header .text{
		bottom:auto;
		top:380px;
		left:60px;
		line-height:65px;
	}

	.contao-skills .counter{
		padding-top:30px;
	}

	.schulung-skills .counter{
		padding-top:80px;
	}

	.html-skills .counter{
		padding-top:80px;
	}

	.css-skills .counter{
		padding-top:80px;
	}

	.php-skills .counter{
		padding-top:40px;
	}

	.schnell-skills .counter{
		padding-top:45px;
	}

	.host-skills .counter{
		padding-top:75px;
	}

	.resp-skills .counter{
		padding-top:75px;
	}

	.js-skills .counter{
		padding-top:45px;
	}

	.seo-skills .counter{
		padding-top:75px;
	}
}

@media only screen and (max-width : 1024px) {
	
	.header p, .header span, body h2{
		font-size:50px;
	}
		
	.header .text{
		bottom:auto;
		top:220px;
		left:30px;
		line-height:60px;
	}
	
}
	
@media only screen and (max-width : 1200px) {
	.header img{
		height:auto;
	}
	
	.bottom-btn{
		display:none;
	}
	
	.header .text{
		bottom:auto;
		top:290px;
		left:60px;
	}
}

@media only screen and (max-width : 950px) {
	body .header{
		margin-bottom:40px;
	}
	
	body .header .text{
		top:180px;
		left: 15px;
	}
	
	body .profil-img{
		margin-left:4%;
		margin-right:4%;
	}
	
	body .wrapper{
		padding-left: 4%;
		padding-right: 4%;
	}
	
	body h2{
		font-size:40px;
	}
	
	body #referenzen h3, body #skills h3{
		font-size:20px;
		padding: 0px 15px;
		margin-top:10px;
		margin-bottom:20px;
	}
	
	body .contao-skills .counter{
		padding-top:50px;
	}

	body .schulung-skills .counter{
		padding-top:110px;
	}

	body .html-skills .counter{
		padding-top:110px;
	}

	body .css-skills .counter{
		padding-top:110px;
	}

	body .php-skills .counter{
		padding-top:60px;
	}

	body .schnell-skills .counter{
		padding-top:70px;
	}

	body .host-skills .counter{
		padding-top:95px;
	}

	body .resp-skills .counter{
		padding-top:95px;
	}

	body .js-skills .counter{
		padding-top:70px;
	}

	body .seo-skills .counter{
		padding-top:95px;
	}
	
	body #referenzen .item:hover .ref{
		margin-top:40%;	
	}
}

@media only screen and (max-width : 620px) {
	body .header .text{
		line-height:25px;
	}
	
	.header p, .header span{
		font-size:20px;
	}
	
	body #referenzen p{
		font-size:14px;
	}
	
	body #referenzen .ref{
		font-size:18px;
	}
	
	body #referenzen .item:hover .ref{
		margin-top:40%;	
	}
}

@media only screen and (max-width : 500px) {
	body .header .text{
		top:70px;
	}
	
	body .counter{
		font-size:35px;
	}
	
	body .contao-skills .counter{
		padding-top:25px;
	}

	body .schulung-skills .counter{
		padding-top:45px;
	}

	body .html-skills .counter{
		padding-top:45px;
	}

	body .css-skills .counter{
		padding-top:45px;
	}

	body .php-skills .counter{
		padding-top:27px;
	}

	body .schnell-skills .counter{
		padding-top:32px;
	}

	body .host-skills .counter{
		padding-top:40px;
	}

	body .resp-skills .counter{
		padding-top:40px;
	}

	body .js-skills .counter{
		padding-top:32px;
	}

	body .seo-skills .counter{
		padding-top:40px;
	}
	
	body #referenzen .item:hover .ref{
		margin-top:38%;	
	}
	
	body #referenzen .item .ref{
		padding-top:20%;
	}
}