* {margin: 0; font-family: 'Ubuntu', sans-serif;}
a {color: #002756; cursor: pointer;}
p {padding-bottom: 0.8em;}
html, body {width: 100%; height: 100%; color: #555; background: #fff;}
header {background: #002756;
-moz-box-shadow: 0px 0px 10px 0px #333;
-webkit-box-shadow:  0px 0px 10px 0px #333;
box-shadow: 0px 0px 10px 0px #333; position: fixed; z-index: 2;}
.osano-cm-info-dialog header {
    background: #fff;
    box-shadow: none;
}
#header ul {color: #fff;}
#header ul li {display: inline-block; font-weight: bold; border-right: 2px solid #fff; padding: 0 9px 0 2px;}
#header ul li:last-child {border: none;}
#line1 {width: 100%; height: 2px;
background: #6b6b6b;
background: -moz-linear-gradient(-45deg,  #6b6b6b 0%, #d1d1d1 21%, #6b6b6b 51%, #d1d1d1 80%, #6b6b6b 100%);
background: -webkit-linear-gradient(-45deg,  #6b6b6b 0%,#d1d1d1 21%,#6b6b6b 51%,#d1d1d1 80%,#6b6b6b 100%);
background: linear-gradient(135deg,  #6b6b6b 0%,#d1d1d1 21%,#6b6b6b 51%,#d1d1d1 80%,#6b6b6b 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b6b6b', endColorstr='#6b6b6b',GradientType=1 );
}
#line2 { width: 100%; height: 1px;
	background: #ffffff;
background: -moz-linear-gradient(left,  #ffffff 0%, #d1d1d1 50%, #ffffff 100%);
background: -webkit-linear-gradient(left,  #ffffff 0%,#d1d1d1 50%,#ffffff 100%);
background: linear-gradient(to right,  #ffffff 0%,#d1d1d1 50%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
}
#leistungen { width: 100%; background: #3E6594;}
#leistungen h1 { text-align: center; color: #fff; font-size: 2em;  padding: 1.5em;}
#service { display: flex; flex-wrap: wrap; justify-content: space-between; width: 1000px; margin: 2em auto 0;}
#service a {text-decoration: none;}
.service { width: 260px; height: 200px; display: flex; justify-content: center; align-items: center; margin-bottom: 100px; flex-wrap: wrap;}
.service span { transition: all 0.5s; font-size: 25px; font-family: Ubuntu; text-align: center; line-height: 32px; display: block; color: #B8DFEC;}
.service i::before { font-family: "Font Awesome 5 Free";  font-size: 120px;  display: block; margin-bottom: 15px; line-height: 1em; color: #B8DFEC; transition: all 0.5s;}
#service a:hover i::before {color: #fff; text-shadow: 3px 3px 3px #25456b; font-size: 150px; transition: all 0.5s;}
#service a:hover span {color: #fff; transition: all 0.5s;}
label:hover {background: rgba(255, 255, 255, 0.2) none repeat scroll 0 0;}
.expand input[type="checkbox"]:checked ~ label { background: rgba(255, 255, 255, 0.2);
	-webkit-transition: max-height 0.8s ease ;
	-moz-transition: max-height 0.8s ease ;
	transition: max-height 0.8s ease ;
}
#container {padding-top:52px;}
header {width: 100%; position: relative;}
#header {width: 1000px; margin: auto; display: flex; height: 80px; color:#fff; justify-content: space-between; align-items: center; background-position: 1px;  font-size: 1.3em; font-weight: bold; }

input#hamburg {  display: none;}
label.hamburg {
	color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    width: 100%;
    display: block;
    text-align: center;
    border-bottom: 1px solid;
    padding: 1em;
}
label.hamburg { display: none;}
nav { width: 100%; margin: auto; text-align: center;}
nav ul {list-style:none; padding: 0;}
nav ul li {display: inline-block;}
nav ul li a {color: #fff; text-decoration: none; padding: 1em 0.5em; display: block; font-size: 1.1em; }
nav ul li a:hover { background: #3E6594;transition: background linear 0.5s 0s;}
a.facebook {background: url("/img/facebook.png"); width: 25px;  height: 25px; display: inline-block; vertical-align: sub; background-repeat: no-repeat;}
a.facebook:hover { background: url("/img/facebook_hover.png");}



article { background: #fff /*url('../img/slider/background_left_2.png') no-repeat 0 bottom*/; color: #002756; width: 100%; }
#slider { height: 410px; width: 1000px; margin:auto; background: rgba(0, 0, 0, 0) url("../img/slider/smiley-spiegel.png") no-repeat scroll right center;
text-shadow: 3px 3px 0px #A7CDF9;
filter: dropshadow(color=#A7CDF9, offx=3, offy=3);}
#slidetext1 div, #slidetext2 div {font-size: 3em; font-family: 'Julius Sans One', sans-serif;}
#slidetext1, #slidetext2 {width: 1000px; overflow: hidden; height: 50%; }
.sleft { padding-top: 150px;}
.scenter { padding-left: 180px;}
main { width: 100%; padding-bottom: 10px;}
#whitedesign, #bluedesign {margin-bottom: 2px; margin-left: 4px; vertical-align: middle; display: inline-block; height: 10px; width: 10px; border-radius: 50%;}
#whitedesign { background: #fff; border: 2px solid #002756;}
#bluedesign {background: #002756; border: 2px solid #fff;}
h1 {padding: 0.5em 0;}
h2 {  font-size: 1.4em; font-weight: normal; padding: 0.5em 0;}
.impressum h2 { padding-top: 0;}
h3 {  padding: 0.5em 0;}
section { width: 1000px; margin: 1em auto 1.5em auto;}
.impressum { display: flex; justify-content: space-between; padding-bottom: 1em; padding-top: 2em;}
.readmore img {vertical-align: baseline;}
.readmore ul li {list-style: none; padding: 3px 0;}
.hinweis {  background: #eee; border: 1px dashed #bbb; padding: 1em; margin: 1em;  color: #777;}
.inline {display: inline-block; }
.openings {width: 160px; display: inline-block;}
.left {float: left;margin-bottom: 7px;} 
.right {float: right;}
.clearer {clear: both;}
.datum { color: #888; font-size: 0.8em; border-top: 1px solid #ccc; padding: 0;}
.fussnote { font-size: 0.8em; color: #777; background: #eee; padding: 1em;}
.parallax-gebraucht { background-image: url("../img/parallax_htc.jpg");}
.parallax-xperia { background-image: url("../img/parallax_xperia.jpg");}
.parallax-reparatur { background-image: url("../img/parallax_reparatur.jpg");}	
.parallax-vertrag {background-image: url("../img/parallax_vertrag2.jpg"); }
.parallax-elektronik {background-image: url("../img/parallax_elektronik.jpg");}
.parallax-empfang {background-image: url("../img/parallax_empfang.jpg");}	
.parallax-smarthome {background-image: url("../img/parallax_smarthome.jpg");}
div[class*="parallax-"] { height: 350px; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
.referenzen {display: flex;}
.referenzen img {  width: 95%; box-shadow: 3px 3px 0px 0px #ccc;}
.smartphone {  background: #e8eff7;  width: 100%;}
.smartphone .form-wrapper {margin: auto; width: 1000px;  padding: 2em 0;}
.smartphone form {
  background: #f6f8fb;
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
}
.smartphone form div {
  padding: 0.5em;
  flex-basis: 46%;
}
form div.full {
  flex-basis: 100%;
}
.smartphone label {
  display: block;
}
.smartphone input, .smartphone textarea, .smartphone select  {
  border: none;
  margin-top: 0.4em;
  border-bottom: 1px solid #a9c0db;
  border-right: 1px solid #a9c0db;
}
.smartphone input {height: 3em; width: 100%;}
.smartphone textarea{ height: 10em; width: 100%}
.smartphone select {background: #fff; height: 3em; padding: 1em;}
form div img { margin: 0.3em 0;}
.smartphone form .send {flex-basis: 100%;}
.smartphone .sendbutton {background: #002756; color: #fff; font-weight: bold; height: 4em;}
.form-error {padding: 1em; background: #f4dfdf; color: #b50f0f;}

iframe {width: 100%; height: 350px;}
footer { width:100%; padding: 3em 0;
	background: -moz-radial-gradient(center, ellipse cover,  #002756 52%, #000935 100%);
background: -webkit-radial-gradient(center, ellipse cover,  #002756 52%,#000935 100%);
background: radial-gradient(ellipse at center,  #002756 52%,#000935 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002756', endColorstr='#000935',GradientType=1 );
background-attachment: fixed;}
#footer {
    align-items: center;
    display: flex;
	flex-wrap: wrap;
    justify-content: space-evenly;
    margin: auto;
    padding: 1em 0;
    width: 1000px;
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 20%, rgba(255,255,255,0.4) 80%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 20%,rgba(255,255,255,0.4) 80%,rgba(255,255,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 20%,rgba(255,255,255,0.4) 80%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );

}
footer img { margin: 1em;}
/** Link-Effekte **/

.readmore li a {
	position: relative;
	display: inline-block;
	margin: 0px 4px;
	outline: none;
	text-decoration: none;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	overflow: hidden;
	padding: 0 4px;
	height: 1.2em;
	white-space: nowrap;
}

.readmore li a:hover,
.readmore li a:focus {
	outline: none;
}


.readmore li a span {
	position: relative;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.readmore li a span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	font-weight: 700;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.readmore li a:hover span,
.readmore li a:focus span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

/** SKY-Werbung **/
.skybanner { width: 100%; text-align: center; padding: 1em 0; font-size: 2em;}
.skybanner img {    vertical-align: bottom;}
.skytext { font-weight:bold; background-image: linear-gradient(to right,#f69139,#ed2224,#e81579,#2c3993,#048bcc);
 -webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
.xlarge {font-size: 3em;}
.skyverlauf { color: #fff; font-weight: bold; padding: 0.2em;	
	background: #ed2224;
background: -moz-linear-gradient(left, #f69139 0%, #ed2224 25%, #e81579 50%, #2c3993 75%, #048bcc 98%);
background: -webkit-linear-gradient(left, #f69139 0%,#ed2224 25%,#e81579 50%,#2c3993 75%,#048bcc 98%);
background: linear-gradient(to right, #f69139 0%,#ed2224 25%,#e81579 50%,#2c3993 75%,#048bcc 98%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f69139', endColorstr='#048bcc',GradientType=1 );}
.satkrue {
    background: #002756;
    color: #fff;
    font-weight: bold;
    font-size: 1.5em;
    padding: 1em;
    margin-top: 1em;
}
/** Nach Oben Button **/

.scrollicon{
 background: rgba(205, 205, 205, 0.5) url("../img/arrow.png") no-repeat scroll 0 0;
    border-radius: 50%;
    bottom: 58px;
    display: none;
    height: 48px;
    opacity: 0.5;
    position: fixed;
    right: 120px;
    text-align: center;
    text-decoration: none;
    width: 48px;
}
.scrollicon div{
    background: url("../img/arrow.png");
    height: 33px;
	width: 33px;
}
#slidetext1, #slidetext2
{
	position: relative;
}

#slidetext1 li, #slidetext2 li
{
	float: left;
	position: relative;
	display: inline-block;
	list-style: outside none none;
	width: 1000px;
}

#slidetext1 ul, #slidetext2 ul
{
	list-style: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 8000px;
	transition: left .3s linear;
	-moz-transition: left .3s linear;
	-o-transition: left .3s linear;
	-webkit-transition: left .3s linear;
	margin-left: -25px;
  color: #666;
}
/*** target hooks ****/

@-webkit-keyframes slide-animation1 {
	0% {opacity:0;}
	2% {opacity:1;}
	10% {left:0px; opacity:1;}
	12.5% {opacity:0.6;}
	15% {left:-1000px; opacity:1;}
	80% {left:-1000px; opacity:1;}
	82.5% {opacity:0.6;}
	88% {left:-9000px; opacity:0;} 
	100% {left:0px; opacity:0;}
}

#slidetext1 ul
{
	-webkit-animation: slide-animation1 30s infinite;
}

@-webkit-keyframes slide-animation2 {
	0% {opacity:0;}
	2% {opacity:1;}
	10% {left:0px; opacity:1;}
	12.5% {opacity:0.6;}
	15% {left:-1000px; opacity:1;}
	20% {left:-1000px; opacity:1;}
	22.5% {opacity:0.6;}
	25% {left:-2000px; opacity:1;}
	30% {left:-2000px; opacity:1;}
	32.5% {opacity:0.6;}
	35% {left:-3000px; opacity:1;}
	40% {left:-3000px; opacity:1;}
	42.5% {opacity:0.6;}
	45% {left:-4000px; opacity:1;}
	50% {left:-4000px; opacity:1;}
	52.5% {opacity:0.6;}
	55% {left:-5000px; opacity:1;}
	60% {left:-5000px; opacity:1;}
	62.5% {opacity:0.6;}
	65% {left:-6000px; opacity:1;}
	70% {left:-6000px; opacity:1;}
	72.5% {opacity:0.6;}
	75% {left:-7000px; opacity:1;}
	80% {left:-7000px; opacity:1;}
	82.5% {opacity:0.6;}
	88% {left:-9000px; opacity:0;} 
	100% {left:0px; opacity:0;}
}

#slidetext2 ul
{
	-webkit-animation: slide-animation2 30s infinite;
}
#angebot {text-align: left;}
#angebot h2 { font-size: 3em;  padding-bottom: 1em;}
#angebot p { font-size: 1.5em; text-shadow: none;}
#slider {background: none;}
/* WERTGARANTIE */
#slider.wertgarantie {
    height: 286px;
	width: 100%;
	background: #af6888;
	background: -moz-linear-gradient(top,  #af6888 3.8%,#659ad0 3.8%,#659ad0 11.4%,#c4d3eb 11.4%,#c4d3eb 70%,#C8DCEF 100%);
	background: -webkit-linear-gradient(top,  #af6888 3.8%,#659ad0 3.8%,#659ad0 11.4%,#c4d3eb 11.4%,#c4d3eb 70%,#C8DCEF 100%);
	background: linear-gradient(to bottom, #af6888 3.8%,#659ad0 3.8%,#659ad0 11.4%,#c4d3eb 11.4%,#c4d3eb 70%,#C8DCEF 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#af6888', endColorstr='#c4d3eb',GradientType=0 );
}

.wertgarantie #angebot {
    margin: auto;
    width: 1000px;
}

/* Urlaub */
#slider.urlaub {
	height: 286px;
	width: 100%;
	background: #3E6594;
	color: #fff;
	font-size:3em;
	display: flex; 
	justify-content: middle;
}
#slider #urlaub {    margin: auto;  width: 1000px; text-shadow: none; text-align: center; }
@media (max-width: 1300px){
	.scrollicon { border-radius: 0 0 50% 50%;
    bottom: 25px;
    position: relative;
    left: 0px;
    float: right;}
}

@media (max-width: 1005px) {
	#header, nav, #slider, main, footer, #footer, article.blog, #service {width: 100%;}
	section {width: 100%; padding: 0 1em; box-sizing: border-box;}
	#header {padding: 1em; box-sizing: border-box;}	
}

@media (max-width: 800px) {
	.impressum {flex-wrap: wrap;}
	.impressum > div {width: 50%; margin-top: 1em;}
	#slider {display: none;}
	div[class*="parallax-"]{
    height: 300px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	background-attachment: inherit;}
	nav.topmenu {  height: auto;  max-height:0;  overflow: hidden;  transition: all 0.5s;}
	label.hamburg { box-sizing: border-box; color: #fff; font-size: 1.2em; font-weight: bold; width: 100%; display: block; text-align: left; border-bottom: 1px solid; padding: 1em; }
	#hamburg:checked + .hamburg  + nav.topmenu {  max-height: 600px; }
	nav ul {text-align: left;}
	nav ul li {display: block; text-align:left; }
	nav ul li a { padding: 1em;}
	a.facebook {  margin: 1em; margin-left:1em;}
}
@media (max-width: 550px) {
	#service { justify-content: center;}
}
@media (max-width: 500px) {
	article.blog section {width:100%;}
	div.parallax-speicher {background-image: url("../img/blog_speicher.jpg");
	 height: 263px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	background-attachment: inherit;}
	#sideblog {display: block;}
	#sideblog article, #sideblog aside {width: 100%;}
	footer img {  margin: 1em;  width: auto;}
}
@media (max-width: 450px){
	.impressum > div {width:100%; padding: 0 1em;}
	#header img {width: 80%;}
	#header div {font-size: 90%;}
	nav li { display: block; border-top: 1px solid #2e445b; border-bottom: 1px solid #0a1f38; width: 100%;}
	nav ul li a { padding: 0.5em;}
	a.facebook {display: none;}
}