html, body {
height: 100%;
}

body {
background: #3e3e3e;
/*background-image: linear-gradient(-30deg, #111, #444, #111);*/
background-image: url(../img/bg.jpg);
background-size: cover;
background-attachment:fixed;
color: #eee;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
}

h1 { font-size: 2em; margin-top: 0}
h2, h3 {font-size: 1.7em; }
h4,h5,h6 { font-size: 1.2em;}


img { width: auto;}

a:link, a:visited {color: #fff;}
a:focus, a:active, a:hover {color: #d00;}

#main, 
#footer .inside {
max-width: 900px;
width: auto;
margin: auto;
}


/*header*/

#header {
border-bottom: 3px solid #ddd;
}

.hor-nav { 
border-bottom: 3px solid #ddd;
}

.hor-nav #nav {margin-bottom: 10px; }

#header, .hor-nav {
border-image: linear-gradient(90deg, #999, #fff, #999);
border-image-slice: 100%;
border-image-slice: 1;
}

#header .logo { margin: 30px auto 15px auto;  text-align: center; }

#header .logo img { 
max-width: 250px; 
margin:auto;
}

#header .mod_article {
width: 100%;
height: auto;
background: #111;
margin-top: 185px;
position: relative;
}

.header-image img, .mod_rocksolid_slider {display: block; max-width: 2200px; margin: auto;}

#header img { 
width: 100%;
height: auto;
}

#nav li ul { width: max-content; }

a.de_a, a.en_a, a.en, a.de {
width: 38px;
height: 25px;
float: left;
display:block;
}

a.cont {
width: 38px;
height: 25px;
display:block;
float:right;
}

.de_a {
background: url(../img/german.gif);
}

a.de:link,
a.de:visited {
background: url(../img/german.gif) 100%;
}

a.de:hover,
a.de:focus,
a.de:active {
background: url(../img/german.gif) 0%;
} 

.en_a {
background: url(../img/english.gif);
}

a.en:link,
a.en:visited {
background: url(../img/english.gif) 100%;
}

a.en:hover,
a.en:focus,
a.en:active {
background: url(../img/english.gif) 0%;
} 

a.en, a.en_a {
margin-left:10px;
}

a.cont:link,
a.cont:visited {
background: url(../img/mail.gif) 0%;
}

a.cont:hover,
a.cont:focus,
a.cont:active {
background: url(../img/mail.gif) 100%;
} 


/*main*/

#container {
padding-top: 2em;
}

#main {
width: 90%;
padding: 3% 5% 5% 5%;
float: none!important;
}

#main ul {
list-style-type: square;
}

.fb a {display: block; width: 35px; height: 35px; background-image: url(../img/fb.png); background-size: cover; padding: 0!important; margin: 1.5% 3%; }
.fb span {display: none;}

.partner div {background: #333; margin-bottom: 20px; text-align: center; }
.partner ul {padding: 0; margin: 0; }
.partner li { list-style-type: none;  display: inline-block; width:  calc(25% - 92px); padding: 40px;  }
.partner li img {max-height: 130px; width: auto; }
.partner .ce_text p { background: #222; margin-top: 0; }
img.cntry {
max-width: 70px;
display: block;
margin: auto;
border: 1px solid #fff;
}


.overview  { text-align: center; max-width: 600px; margin: auto; margin-bottom: 3em; }
.overview li {list-style-type: none; display: inline-block;  }
.overview a {text-decoration: none; padding: 0 10px;  }

.reviews .ce_image, .reviews .ce_text { background: #222; text-align: center; margin: 2em auto;  }

.rsts-caption { left:auto!important; right: 30px; opacity: 0.6!important; }
.rsts-prev { left: calc(50% - 13px)!important; }
.rsts-next { left: calc(50% + 26px)!important; }

#shop-partner .ce_headline,
#shop-partner-en .ce_headline {
margin-bottom: 30px;
}

#shop-partner .table_logos img,
#shop-partner-en .table_logos img {
max-width: 130px;
max-height: 90px;
width: auto;
}


#lang_switch {width: 100%; text-align: center; background: #222; margin-bottom: 2px;}
.sprache {font-size: 0.8em; text-transform: uppercase; }
.sprache ul { padding: 0; list-style-type: none; }
.sprache a {color: #aaa; text-decoration: none; }
.sprache a:hover {color: #d00; }

.switch { 
  position: absolute;
  right: 20px;
  top: 20px;
z-index: 10000;
}
.switch ul { margin-bottom: 1em; font-size: 0.9em;  color: #999; }
.switch ul li { display: inline-block; padding: 0 0.3em; }
.switch ul li.lang-en { padding-left: 0; }
.switch ul li.lang-de {border-right: 1px solid #999; }
.switch ul li a, .switch ul li strong { display: block; padding: 0 0.3em; color: #999; text-decoration: none; }
.switch ul li a:hover { color: #fff;}

.table_logos {
background: #222;
width: 100%;
}

.t-left { text-align: left;}
.t-right {text-align: right;}
.t-center { text-align: center;}


#shop-partner td, #shop-partner-en td {
height: 110px;
}

#zubehoer .ce_image,
#accessoires .ce_image,
#upgrade .ce_image {
float: left;
margin: 0 50px 50px 0;
width: calc(33% - 50px);
text-align: center;
}

#zubehoer .ce_image figure,
#accessoires .ce_image figure {  }

#zubehoer .ce_image a:link img, 
#zubehoer .ce_image a:visited img, 
#accessoires .ce_image a:link img,
#accessoires .ce_image a:visited img { 
width: calc(100% - 10px);
border:5px solid #333;
}

#zubehoer .ce_image a:hover img, 
#zubehoer .ce_image a:focus img, 
#accessoires .ce_image a:hover img,
#accessoires .ce_image a:focus img {
width: calc(100% - 10px);
border:5px solid #ddd;
}


/*footer*/

#footer {
width: 100%;
background: #222;
float: left;
padding: 2em 0;
}

#footer .inside {
width:100%; display: block;
}


#footer_adresse {
text-align:center;
vertical-align:middle;
font-size: 0.9em;
color: #ccc;
width: 100%;
clear: both;
background: #000;
}

#footer ul {list-style-type:none; font-size: 0.9em;}

#footer li {display:block; }
#footer li.first {border: 0;}

#footer ul a, #footer ul strong.active {
display:inline-block; 
padding: 1.5% 3%;
}


#footer ul a:link, #footer ul a:visited {
color: #ddd;
text-decoration: none;
} 

#footer ul a:active, #footer ul a:focus, #footer ul a:hover, #footer ul span.active {
color: #d00;
text-decoration: none;
} 

.footer_logo img {max-width: 250px; height: auto; padding: 2em; width: calc(100% - 4em); }

/*GALLERY*/

#main .ce_gallery { margin-bottom: 4%; }

#main .ce_gallery > ul {
margin: auto;
list-style-type: none;
  text-align: center;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content: center;
}

#main .ce_gallery > ul.cols_3 { max-width: 675px; }
#main .ce_gallery ul li { float: none; }
#main .ce_gallery ul.cols_4 li  { width:22.5%; margin: 1.25%; }
#main .ce_gallery ul.cols_3 li  { width:30%; margin: 1.25%; }

#main .ce_gallery .caption
  {width:100% !important}

.gallery2 { margin-top: -4%; }


/*DOWNLOADS*/

#main .ce_downloads ul {
list-style-type: none;
padding: 0;
}

#main .ce_downloads .mime_icon,
#main .ce_download .mime_icon {
float: left;
margin-right: 10px;
}

/*Kontaktformular*/

.ce_form {margin: 2em auto;}

#contactform label {
    float: left;
    width: 150px;
    display: block;
    margin-bottom: 10px;
    clear: both;
}


#contactform .text, #contactform textarea, .submit_container {
    width: calc(100% - 180px);
    margin-bottom: 10px;
}

@media (max-width: 767px) {
#contactform label,#contactform .text, #contactform textarea, .submit_container { width: calc(100% - 26px);}
}


#contactform .dsgvo label {
clear:both;
max-width: 400px;
float: none;
display: initial;
width: 100%;
}

.widget {text-align: left;}

input[type="checkbox"] {
float: left;
margin: 5px 10px 0 0;
}

.checkbox_container label {
    display: initial;
}

.widget-checkbox .mandatory {border: 0;}

button.submit {
   font-size: 1.2em; 
padding: 5px 12px; 
   border: 1px solid silver;
   background-image: linear-gradient(to top, gainsboro 0%, white 90%);
   border-radius: 20px;
    margin: 3% 0 0 30%;
display: block;
}

input, textarea {
padding: 5px 12px; 
   border: 1px solid silver;
   background-image: linear-gradient(to top, gainsboro 0%, white 90%);
   border-radius: 5px;
}

/*VIDEO*/

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin-top: 30px;
}
 

.video-container iframe, .video-container object, .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media (min-width: 800px) {
#reviews .ce_text, 
#reviews_en .ce_text {width: 70%;}
}

#reviews .ce_text.last {margin-bottom: 30px}

#reviews .ce_image h2  	{font-size: 1.1em; margin: 1em 0 1em 0;}
#reviews .ce_text h2 	{font-size: 1.1em; margin: 2em 0 -1em 0;}



/*SONSTIGES*/

.red {color: #d00;}

.feld {
padding: 0.5% 2%;
border: 1px solid #aaa;
}

.lfloat {float: left;}

.datatxt {font-size: 0.8em;  text-align: left;}

.news { background: #fff;
color: #333;
text-align: center;
font-weight: bold; 
}

.news a {color: #333; }

.scrollicon {
    background-image:url("../img/top.png");
    text-align: center;
    position:fixed;
    bottom:2%;
    right:2%;
    display:none;
    opacity:0.5;
    cursor: pointer;
    text-decoration: none;
    width:67px;
    height:57px;
}

@media (max-width: 767px) {
h1 { font-size: 1.6em; }
h2, h3 {font-size: 1.3em; }
.showdesktop {display: none;}
.hor-nav {position: static; height: auto;}
#header .mod_article {margin-top: 0; position: static;}
#header .logo {margin: 0 auto; width: calc(100% - 160px); }
#header .logo img {max-width: 170px; width: 100%; display: inline; margin-top: 20px;}
.switch { right: 10px;  top: 0; }
.hor-nav #nav {  margin-bottom: 0;}
.partner li { width:  calc(33.33% - 92px); }
#footer .t-right, #footer .t-left {text-align: center; }
#footer ul {margin: 2em 0;}
#footer ul a, #footer ul strong.active {  padding: 0.5% 3%; }
}

@media (max-width: 600px) {
.partner li { width:  calc(50% - 92px); }
#zubehoer .ce_image,
#upgrade .ce_image,
#accessoires .ce_image {width: calc(50% - 30px); margin: 0 30px 30px 0;}
#main .ce_gallery li  {
width:45% !important;
margin:2.5%!important;
}
}

@media (max-width: 350px) {
.partner li { width:  calc(100% - 120px); }
}

@media (min-width: 768px) {
.showmobile {display: none;}
.b33 {width: 33.33%; float: left; }
}

@media (min-width: 2000px) {
#header .header2380 { 
background: url(../header-blur/2380.jpg) center center;
background-size: 100% auto;
}
#header .header2380t { 
background: url(../header-blur/2380T.jpg) center center;
background-size: cover;
}
#header .headerdani_basic { 
background: url(../header-blur/dani-basic.jpg) center center;
background-size: cover;
}
#header .headerdani_extreme { 
background: url(../header-blur/dani-extreme.jpg) center center;
background-size: cover;
}
#header .headertelegonos { 
background: url(../header-blur/telegonos.jpg) center center;
background-size: cover;
}
#header .headertiny { 
background: url(../header-blur/tiny.jpg) center center;
background-size: cover;
}

#header .header-dani-box { 
background: url(../header-blur/dani--box.jpg) center center;
background-size: cover;
}

#header .header-dicodes-no-6 { 
background: url(../header-blur/dicodes--no-6.jpg) center center;
background-size: cover;
}

#header .header-dani25 { 
background: url(../header-blur/dani25.jpg) center center;
background-size: cover;
}
}