/**
        viewport desktop

        copyright harold raduschewski
        www.radunet.de

*/

/** box sizing */
* {
        -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
          margin: 0;
          padding: 0;
          font-size: 18px;
          line-height: 1.4;
          word-wrap: break-word !important;
          font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

h1 {
        font-size: 40px;
          text-align: center;
}

h2, h3, h4, h5 {
        font-size: 30px;
          line-height: 34px;
         text-align: center;
}
.my_h2 {
        font-size: 20px;
          line-height: 22px;
         font-weight: bold;
         text-align: center;
}
.my_font{
        font-size: 1.2em;
        }
hr {
        border:none;
        border-top: 1px solid #ccc;
}

a {
        text-decoration: none;
}

a:hover {
        text-decoration: underline;
}

/** text align */
.text_align {
        text-align: center;
}

.align_justify {
        text-align: justify;
}

.align_left {
        text-align: left;
}


/** clear float */
.clearfix {
        clear:both;
}

/** begin layout */
header, nav, section, article, aside, footer {
        display: block;
}

/** all sections width 1024 px */
header, nav, main, footer {
        width:1024px;
        margin:auto;
}

/** header */
header {
        padding:20px 20px 10px 20px;
}

header a{
        text-decoration: none;
        font-size: 34px;
        font-weight: 900;
        color:#111;
}

/** logo header */
.logo_bild {
  display:block;	
  width:80px;
  height:80px;
  
}

.logo {
  display: block;
  font-size: 34px;
  xfont-weight:100;
  letter-spacing: -1px;
}

.logo span{
        font-weight:bold;
}

.slogan {
        font-size: 14px;
        margin-left:0px;
        font-weight:100;
}

/** nav top */
.nav_wrap {
}

/** main content */
main[role=content]{
        clear:both;
        padding:20px 30px 40px 30px;
}

/** footer */
footer {
        clear: both;
        padding:20px 30px 40px 30px;
        text-align: center;
}

footer[role=nav] a{
        padding:5px;
      /*  display: block; */
        font-size: 90%;
}
/** end layout */

/** big area */
.big_area {
        padding:40px;
        margin:1px 0 10px 0;
        text-align: center;
}

.big_area h1{
          font-size: 60px;
          text-align: center;
          text-align: center;
          font-size: 60px;
          line-height: 70px;
        color:#555;
}

/** form kontakt */
#frm_contact {
        padding:20px;
}

#frm_contact label{
        margin:20px 0 0 0;
        padding:0;
}

#frm_contact .InputBox {
        margin:5px 0 20px 0;
        padding:0;
        width:100%;
        padding:5px;
        border:none;
}

#frm_contact .input_error {
        color: red;
}

#frm_contact button {
        display:block;
        width:100%;
        border:none;
        padding:15px;
        cursor:pointer;
}

/** form anfrage */
#frm_anfrage {
        padding:20px;
}

#frm_anfrage label{
        margin:20px 0 0 0;
        padding:0;
        font-size: 90%;
}

#frm_anfrage .InputBox {
        margin:5px 0 20px 0;
        padding:0;
        width:100%;
        padding:5px;
        border:none;
}

#frm_anfrage .input_error {
        color: red;
}

#frm_anfrage button {
        display:block;
        width:100%;
        border:none;
        padding:15px;
        cursor:pointer;
}

/** message error */
.msg_error {
        width:50%;
        margin: auto;
        margin-top:50px;
        margin-bottom: 30%;
        padding:20px;
        text-align: center;
        font-size: 14px;
}

.msg_error h6{
        font-size: 24px;
        margin:0 0 5px 0;
        padding:0;
        border-bottom: 1px solid #333;
}

/** html tabelle */
table {
        width:100%;
}

table th{
        padding:20px;
        text-align: right;
        vertical-align: top;
        border-bottom: 1px solid #fff;
}

table td {
        padding:10px;
        text-align: right;
        border-bottom: 1px solid #fff;
}

 nowrap {
        text-align: right;
}

/* html table scrollable */
.table-scrollable {
  width: 100%;
  overflow-y: auto;
  margin: 10px 0 1em;
  padding-bottom: 10px;
}

.table-scrollable::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 20px;
}

.table-scrollable::-webkit-scrollbar-thumb {
  border-radius: 10px;
}

/** preisliste */
.pricelist_wrap {
        width:25%;
        float:left;
        padding:5px;
}

.pricelist {
        padding:5px 10px 10px 10px;
        text-align: center;
        border:2px solid #fff;
}

.pricelist span{
        font-weight: 900;
        font-size: 22px;
}

.pricelist ul{
        margin:0;
        padding:0;
}

.pricelist li{
        list-style: none;
        padding:9px 0 9px 0;
}


/** team */
.team{
        clear:both;
        margin-bottom: 10px;
        padding:20px;
}

.team span{
        float:left;
        display:block;
        border:1px solid green;
}

.team img{
        float:left;
        margin-right: 40px;
        border:1px solid #f2f2f2;
}

.team h2{
        padding-top: 40px;
        text-align: left;
}

/** column row */
.row {
        margin:10px 0 20px 0;
        text-align: justify;
        padding:1px 30px 30px 30px;
}

.row:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

/** column 50% */
.col_50 {
        float:left;
        width:50%;
        padding-right: 20px;
        margin-top:10px;
}

.col_50_last {
        float:left;
        width:50%;
        padding-left: 20px;
        margin-top:10px;
}

.col_50 img, .col_50_last img{
        border:1px solid #ccc;
}

/** column 33% */
.col_33 {
        float:left;
        width:33.333%;
        padding-right: 40px;
        margin-top:10px;
}

.col_33_last {
        float:left;
        width:33.333%;
        xpadding-left: 20px;
        margin-top:10px;
}

/** column 25% */
.col_25 {
        float:left;
        width:25%;
        padding-right: 40px;
        margin-top:10px;
}

.col_25_last {
        float:left;
        width:25%;
        xpadding-left: 20px;
        margin-top:10px;
}

/** column 66% */
.col_66 {
        float:left;
        width:66.666%;
        padding-right: 40px;
        margin-top:10px;
}

.col_66_last {
        float:left;
        width:66.666%;
        xpadding-left: 20px;
        margin-top:10px;
}

/** column 75% */
.col_75 {
        float:left;
        width:75%;
        padding-right: 40px;
        margin-top:10px;
}

.col_75_last {
        float:left;
        width:75%;
        xpadding-left: 20px;
        margin-top:10px;
}

/** button call to action */
.call_to_action {
        display:block;
        width:90%;
        padding:20px;
        margin: auto;
        margin-top:30px;
        margin-bottom:20px;
        text-align: center;
        text-decoration: none;
}

.call_to_action:hover {
        text-decoration: none;
}

/** image width 100% */
.img_auto {
        width:100%;
        height: auto;
}
.my_img_auto_logo {
        width:50%;
        height: auto;
}

/** image banner top */
.img_banner_top {
        padding-bottom:5px;
        /*border-bottom:1px solid #ccc;*/
}


/** rs slider */
.rslides{
        width:auto !important;
        margin:10px 0px 10px 0px !important;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
}

.rslides_tabs {
  list-style: none;
  padding: 0;
  background: #ddd;
  font-size: 14px;
  list-style: none;
  padding: 7px 0;
  text-align: right;
  width: auto;
  margin:-20px -20px 0 -20px;
 }

.rslides_tabs li {
  display: inline;
  float: none;
  margin-right: 1px;
}

.rslides_tabs a {
  width: auto;
  line-height: 20px;
  padding: 9px 20px;
  height: auto;
  background: transparent;
  display: inline;
  text-decoration: none;
  color:#fff;
}

.rslides_tabs li:first-child {
  margin-left: 0;
}

.rslides_tabs .rslides_here a {
  background: #bbb;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}


/** sticky right */
.sticky_top_right {
        position: absolute;
        width:95%;
        max-width: 990px;
        opacity: 0.95;
        padding:15px 35px 0 0;
}

.sticky_top_right div{
        width:25%;
        min-width:200px;
        float:right;
        padding:15px;
}

.sticky_top_right div h3{
        padding:0;
        margin:0;
        font-size: 24px;
}

/** sticky left */
.sticky_top_left {
        position: absolute;
        width:95%;
        max-width: 990px;
        opacity: 0.95;
        padding:15px 0 0 15px;
}

.sticky_top_left div{
        width:25%;
        min-width:200px;
        padding:15px;
}

.sticky_top_left div h3{
        padding:0;
        margin:0;
        font-size: 24px;
}
/** image list right */
.image_list_right{
		margin:30px 0 30px 0;
        padding:0 0 30px 0;
        border-bottom:1px solid #ccc;
		
}  
.image_list_right_image {
        float:right;
        width:33%;
}
.image_list_right_image img{
	padding-left:30px;
}

.image_list_right_content {
        padding:0 20px 20px 40px;
        float:right;
        width:50%;
}

.image_list_right_content {
        text-align:left;
}

.image_list_right_content h2 {
        text-align:left;
        margin:0;
        padding:0;
}

/** image list left */
.image_list_left {
        margin:30px 0 30px 0;
        padding:0 0 30px 0;
        border-bottom:1px solid #ccc;
}

.image_list_left_image {
        float:left;
        width:33%;
}

.image_list_left_image img{}

.image_list_left_content {
        padding:0 20px 20px 40px;
        float:left;
        width:66%;
}

.image_list_left_content {
        text-align:left;
}

.image_list_left_content h2 {
        text-align:left;
        margin:0;
        padding:0;
}

/** box adress */
.box_address {
        padding:20px;
        text-align: center;
        margin:0 0 20px 0;
}

/** container (google maps) */
.responsiveContainer {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
}

.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/** foto gallery */
.fotos div{width:33.33%;float:left;}
.fotos img{width:100%;height:auto;padding:3px 6px 3px 6px;}