@charset "UTF-8";
/* +++ SK-interactive.com - 2018 +++ */
body {
	margin:0;
	padding:0;
	font-family:'Montserrat';
}
a.noy {
	text-decoration:none;
}
.start {
	background: #000 url('https://www.sk-interactive.com/bgsk2.jpg') center center no-repeat;
	width: 100%;
	height: 100%;
	background-size:cover;
}
.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  /*whatever width you want*/
}
.logo {
	background-image: url(logoskin.png);
	background-size: cover;
	width: 300px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
    -webkit-animation: bummer 2s;
    animation: bummer 2s;
    -webkit-transform: scale(0,0); 
    transform: scale(0,0);
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}
@-webkit-keyframes bummer {
    100% {
        -webkit-transform: scale(1,1); 
    }
}

@keyframes bummer {
    100% {
        transform: scale(1,1); 
    }
}
.start_text {
	padding-top:30px;
	font-size:16px;
	color:#CCC;
	text-align:center;
	text-shadow:1px 1px 1px #000;
}
.wedo {
	background-color:#F4F4F4;
}
.wedo_wrap {
	width:1000px;
	margin-left:auto;
	margin-right:auto;
}
.wedo_content h1 {
	text-align: center;
	font-size: 48px;
	font-weight: bold;
	color: #000;
	text-transform: uppercase;
	padding-top: 100px;
	padding-bottom: 100px;
	margin:0;
	text-shadow: 2px 2px 20px #CCC;
}
.wedo_content {
	font-size:20px;
}
.do h3 {
	text-align: left;
	font-size: 24px;
	font-weight: bold;
	color: #000;
	text-transform: uppercase;
	padding-top: 30px;
	padding-bottom: 30px;
	margin:0;
	text-shadow: 2px 2px 20px #CCC;
}
.do {
	background-color:#FFF;
	border-radius:120px;
	height:auto;
	padding-bottom:10px;
	text-align:left;
	width:100%;
	margin-bottom:100px;
	float:left;
	-webkit-box-shadow: 0px 5px 26px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 5px 26px -10px rgba(0,0,0,0.75);
	box-shadow: 0px 5px 26px -10px rgba(0,0,0,0.75);
	opacity:0.5;
	transition:0.3s all;
}
.do:hover {
	opacity:1.0;
	transition:0.3s all;
}
.do_text {
	padding:10px;
	font-size: 18px;
}
.do_webdesign:before {
	font-family: 'FontAwesome';
	content: "\f03e";
	font-size: 124px;
	margin-top: 25px;
	display: inline-block;
	margin-left: 30px;
	transition: 0.3s all;
	float: left;
	margin-bottom: 10px;
	margin-right: 40px;
	padding: 0;
}
.do_programmierung:before {
	font-family: 'FontAwesome';
	content: "\f121";
	font-size: 124px;
	margin-top: 20px;
	display: inline-block;
	margin-left: 30px;
	transition: 0.3s all;
	float: left;
	margin-bottom: 10px;
	margin-right: 40px;
	padding: 0;
}
.do_seo:before {
	font-family: 'FontAwesome';
	content: "\f0d4";
	font-size: 124px;
	margin-top: 25px;
	display: inline-block;
	margin-left: 30px;
	transition: 0.3s all;
	float: left;
	margin-bottom: 10px;
	margin-right: 40px;
	padding: 0;
}
.do_content:before {
	font-family: 'FontAwesome';
	content: "\f14b";
	font-size: 124px;
	margin-top: 20px;
	display: inline-block;
	margin-left: 30px;
	transition: 0.3s all;
	float: left;
	margin-bottom: 10px;
	margin-right: 40px;
	padding: 0;
}
.do_payment:before {
	font-family: 'FontAwesome';
	content: "\f07a";
	font-size: 124px;
	margin-top: 35px;
	display: inline-block;
	margin-left: 30px;
	transition: 0.3s all;
	float: left;
	margin-bottom: 10px;
	margin-right: 40px;
	padding: 0;
}
.wrap_fix {
	width:100%;
	overflow:hidden;
	background-color:#333;
}
.wrap_proj_head {
	width:1000px;
	margin-left:auto;
	margin-right:auto;
}
.wrap_proj_head h1 {
	text-align: center;
	font-size: 48px;
	font-weight: bold;
	color: #FFF;
	text-transform: uppercase;
	margin-top: 100px;
	margin-bottom: 40px;
	text-shadow: 2px 2px 20px #000;
}
.proj_head_text {
	text-align: center;
	font-size: 18px;
	color: #FFF;
	margin-bottom: 100px;
	text-shadow: 2px 2px 20px #000;
}
.wrap_proj {
	width:1000px;
	height:444px;
	margin-left:auto;
	margin-right:auto;
}
.leftbox {
	float: left;
	width: 50%;
	height:444px;
	position: relative;
	z-index: 100;
	transition:0.3s all;
	opacity:0.75;
}
.rightbox {
	float:right;
	width: 50%;
	height:444px;
	position: relative;
	z-index: 100;
	transition:0.3s all;
	opacity:0.75;
}
.leftbox:hover,
.rightbox:hover {
	opacity:1.0;
	transition:0.3s all;
}
.bgdark {
	background-color: #333;
}
.xgadget_old {
	float: right;
	width: 100%;
	background: url('https://www.sk-interactive.com/img/screen_v2_xgadget.jpg') no-repeat;
	height: 444px;
	background-size: 175%;
	margin-top:-444px;
	opacity:0.5;
}
.xgadget {
	float: right;
	width: 100%;
	background: url('https://www.sk-interactive.com/img/img_v2_xgadget.jpg') no-repeat;
	height: 444px;
	background-size: 100%;
	margin-top:-444px;
	background-position: 0px -35px;
}
.td_old {
	float: right;
	width: 100%;
	background: url('https://www.sk-interactive.com/img/screen_v2_td.jpg') no-repeat;
	height: 444px;
	background-size: 175%;
	margin-top:-444px;
	opacity:0.5;
}
.td {
	float: right;
	width: 100%;
	background: url('https://www.sk-interactive.com/img/img_v2_thumbnail.jpg') no-repeat;
	height: 444px;
	background-size: 100%;
	margin-top:-444px;
	background-position: 0px -35px;
}
.overlay_xgadget_old,
.overlay_td_old {
	width: 480px;
	background-color: #000;
	z-index: 100;
	position: absolute;
	height: 424px;
	background: rgba(42, 173, 219, 0.5);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	position: relative;
	transition:0.3s all;
	border: 10px solid #333;
}
.overlay_xgadget,
.overlay_td {
	width: 480px;
	background-color: #000;
	z-index: 100;
	position: absolute;
	height: 424px;
	background: rgba(42, 173, 219, 0);
	position: relative;
	transition:0.3s all;
	border: 10px solid #333;
}
.played_old {
	float: left;
	width: 100%;
	background: url('https://www.sk-interactive.com/img/screen_v2_4played.jpg') center center no-repeat;
	height: 444px;
	background-size: 175%;
	margin-top:-444px;
	opacity:0.5;
}
.played {
	float: left;
	width: 100%;
	background: url('https://www.sk-interactive.com/img/img_v2_4played.jpg') center center no-repeat;
	height: 444px;
	background-size: 100%;
	margin-top:-444px;
}
.cc {
	float: left;
	width: 100%;
	background: url('https://www.sk-interactive.com/img/img_v2_cc.jpg') center center no-repeat;
	height: 444px;
	background-size: 100%;
	margin-top:-444px;
}
.overlay_played_old {
	width: 480px;
	background-color: #000;
	z-index: 100;
	position: absolute;
	height: 424px;
	background: rgba(42, 173, 219, 0.5);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	position: relative;
	transition:0.3s all;
	border: 10px solid #333;
}
.overlay_played,
.overlay_cc {
	width: 480px;
	background-color: #000;
	z-index: 100;
	position: absolute;
	height: 424px;
	background: rgba(42, 173, 219, 0);
	position: relative;
	transition:0.3s all;
	border: 10px solid #333;
}
.overlay_xgadget:hover,
.overlay_td:hover,
.overlay_played:hover,
.overlay_cc:hover {
	background: rgba(42, 173, 219, 0.75);
	transition:0.3s all;
	border: 10px solid rgba(42, 173, 219, 0.75);
}
.clear {
	clear:both;
}
.spacer_box {
	padding:20px 50px;
}
.spacer_box h2 {
	font-size: 38px;
	font-weight: 300;
	margin-top: 30px;
	margin-bottom: 20px;
	text-transform: uppercase;
	color: #FFF;
	text-align: center;
}
.spacer_text {
	color: #777;
	padding-top: 50px;
	padding-bottom: 50px;
	text-shadow: 1px 1px 10px #000;
}
.parent_button {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 50px;
}
.yellow_button {
	padding:10px 20px;
	border-radius:25px;
	color:#FFF;
	font-weight:bold;
	text-transform: uppercase;
	float:left;
	border:2px solid #FFF;
	transition:0.2s all;
}
.yellow_button:hover {
	background-color:#FDDE49;
	border:2px solid #FDDE49;
	color:#333;
	transition:0.2s all;
	-webkit-box-shadow: 0px 4px 20px 5px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 4px 20px 5px rgba(0,0,0,0.75);
	box-shadow: 0px 4px 20px 5px rgba(0,0,0,0.75);
	cursor:pointer;
}
.after_proj {
	height:100px;
	width:100%;
	background-color:#333;
}
.fa_tv {

}
.overlay_xgadget:hover:before {
	font-family:'FontAwesome';
	content:"\f26c";
	font-size: 200px;
	margin-top: 105px;
	display: inline-block;
	margin-left: 135px;
	transition:0.3s all;
}
.overlay_played:hover:before {
	font-family:'FontAwesome';
	content:"\f11b";
	font-size: 200px;
	margin-top: 105px;
	display: inline-block;
	margin-left: 135px;
	transition:0.3s all;
}
.overlay_td:hover:before {
	font-family:'FontAwesome';
	content:"\f019";
	font-size: 200px;
	margin-top: 115px;
	display: inline-block;
	margin-left: 145px;
	transition:0.3s all;
}
.overlay_cc:hover:before {
	font-family:'FontAwesome';
	content:"\f002";
	font-size: 200px;
	margin-top: 105px;
	display: inline-block;
	margin-left: 135px;
	transition:0.3s all;
}

.contact {
	color: #fff;
	background-color: #009cde;
	background-image: radial-gradient(circle farthest-side at center bottom,#009cde,#003087 125%);
	height: 350px;
	width: 100%;
}
.contact_wrap {
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	text-shadow: 1px 1px 2px #000;
}
.contact_text h2 {
	font-size: 43px;
	font-weight: bold;
	color: #FFF;
	margin: 0;
	padding-top: 90px;
	text-transform: uppercase;
	padding-bottom: 90px;
}
.contact_text {
	font-size: 26px;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	text-transform: uppercase;
}


.footer {
	height:180px;
	width:100%;
	border-top:2px solid #FFF;
	background-color:#F4F4F4;
}
.footer_wrap {
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow:1px 1px 1px #FFF;
}
.footer_left {
	float:left;
	padding-top: 30px;
	color: #AABDD0;
}
.footer_right {
	float:right;
	padding-top: 30px;
	color: #AABDD0;
}
a.footnol {
	text-decoration:none;
	color:#AABDD0;
}
a.footnol:hover {
	text-decoration:underline;
}


@media all and (max-width:1001px) {
	.wedo_wrap,
	.wrap_proj_head,
	.wrap_proj,
	.contact_wrap,
	.footer_wrap {
		width:100%;
	}
	
	.wedo_content h1 {
		font-size: 32px;
	}	
	
	
	.do {
		border-radius: 4px;
		width: 92%;
		margin-left: 4%;
		margin-right: 4%;
		opacity:1.0;
	}
	.do_webdesign:before,
	.do_programmierung:before,
	.do_seo:before,
	.do_content:before,
	.do_payment:before {	
		font-size: 60px;
		margin-top: 0;
		display: block;
		margin-left: auto;
		transition: 0.3s all;
		float: none;
		margin-bottom: 0px;
		margin-right: auto;
		padding: 0;
		width: 60px;
		position: relative;
	}

	
	.wrap_proj {
		padding-bottom:20px;
	}
	.spacer_box h2 {
		font-size: 28px;
	}
	
	.do h3 {
		font-size: 18px;
	}
	
	.wrap_proj_head h1 {
		font-size: 34px;
	}
	
	.p01,
	.p02,
	.p03 {
		display:none;
	}
	
	.leftbox,
	.rightbox {
		float: none;
		width: 100%;
		height:444px;
		opacity:1.0;
	}
	
	.spacer_text {
		font-size: 17px;
	}
	
	.contact_text h2 {
		font-size: 28px;
	}
	.contact_text {
		font-size: 20px;
	}	
	
	.footer_left {
		display:none;
	}
	
	.footer_right {
		padding-right:10px;
	}

}