@charset "utf-8";
/*! normalize.css v3.0.0 | MIT License | git.io/normalize */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

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

/* =============================================================================
    Viessmann
  =========================================================================== */

/* =============================================================================
    General
   ========================================================================== */
html{
  font-family: Arial, sans-serif;
  font-size: 0.813em;
}
h1, h2,.h1, .h2{
  font-size: 1.438em;
  font-weight: bold;
  margin: 0 0 14px;
  line-height: 1.2em;
}
h3{
  font-size: 1em;
  font-weight: bold;
  margin: 0 0 14px;
  line-height: 1em;
}
.big-font{
  font-size: 2.308em;
  line-height: 1.1em;
}
.small-font{
  font-size: 0.923em;
  line-height: 1.5;
  font-style: italic;
}
a{
  color: #000;
  text-decoration: underline;
}
a:hover{
  color: #e32534;
}
ul{
  padding: 0;
  margin:0 0 14px 0;
  list-style: none;
}
p{margin:0 0 14px;}
img{
  vertical-align: bottom;
  max-width:100%;
  height: auto;
}
hr {
  margin: 16px 0;
  height: 1px;
  border: none;
  background-color: #a7a7a7;
}
.page-wrapper{
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
}
.btn {
  color: #fff !important /* firefox fix */;
  display: inline-block;
  height: 30px;
  padding: 6px 8px 0 8px;
  border-radius: 2px;
  text-align: center;
  text-decoration: none;
  background-image: url(../img/button_bg.png);
  background-repeat: repeat-x;
}
.btn:hover {
  color: #fff;
  background-color: #e32534;
  background-image: none;
}

.col-4, .col-6, .col-12{
  padding: 0 10px;
  float: left;
  width: 100%;
}
.col-4{width: 50%;}
.col-4:nth-child(2n+1){clear: left;}
.clearfix:before,
.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}

/*OffCanvas Layout
---------------------------------------------------------*/
#responsive-container{
  background-color: #e32534;
  height: 40px;
  width: 100%;
  cursor: pointer;
}
#responsive-menu-wrapper{
  position: absolute;
  left: 50%;
  top: -7px;
  margin-left: -12.5px;
  transition: 0.4s;
}
#responsive-menu{
  display: inline-block;
  cursor: pointer;
  z-index: 2;
  margin-top: 10px;
  margin-left: 10px;
}
#responsive-menu-wrapper.move-menu{
  left:10px;
  transition: 0.7s;
}
#responsive-menu span:nth-child(1),
#responsive-menu span:nth-child(2),
#responsive-menu span:nth-child(3){
  width: 35px;
  height: 4px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.7s;
  display: block;
}
#responsive-menu.active span:nth-child(1){
  -webkit-transform: rotate(-48deg) translate(-7px,5px) ;
  transform: rotate(-48deg) translate(-7px,5px);

}
#responsive-menu.active span:nth-child(2){opacity: 0;}
#responsive-menu.active span:nth-child(3){
  -webkit-transform: rotate(49deg) translate(-9px, -6.87px) ;
    transform: rotate(49deg) translate(-9px, -6.87px);
}


/* =============================================================================
    Header
   ========================================================================== */
header {padding: 0 10px 0;}
.logo img{width: 130px;}
.meo-logo{
  position: absolute;
  top: 15px;
  left: 10px;
}
.viessmann-logo{
  display: block;
  margin: 60px 0 20px;
}
.text-right{text-align: right;}
header .banner {
  height: 200px;
  border: 1px solid #d8d8d8;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100%;
}
.emergency-wrapper{
  position: relative;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.emergency-wrapper *{
  color: #fff;
}
.emergency-contact{
  margin: -1px 0 25px;
  background-color: rgba(230, 66, 79, 0.8);
  padding: 10px 10px;
}
.phone a{
  text-decoration: none;
}
.phone a:hover{
  color: #fff;
}
#nav-header-container{
  width: 80%;
  height: 100%;
  position: fixed;
  left: -80%;
  top: 0;
  -webkit-transition: left .5s ease-in-out;
  transition: left .5s ease-in-out;
}
#nav-header-container.oncanvas{
  left: 0;
}
#canvascontainer{
  left: 0;
  width: 100%;
  position: relative;
  -webkit-transition: left .5s ease-in-out;
  transition: left .5s ease-in-out;
}
#canvascontainer.movePage{
  left: 80%;
  position: fixed;
}
nav{
  background-image: url(../img/nav_background.png);
  background-repeat: repeat;
  background-size: cover;
  height: 100%;
}
nav a{
  color: #fff;
  display: block;
  padding: 20px 10px;
  width: 100%;
  text-decoration: none;
}
nav a:hover,
nav a.active {
  background-color: #e32534;
  color: #fff;
}
/* =============================================================================
    Content
   ========================================================================== */
#content{
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.max-width-440{
  max-width: 440px;
}
.alert-box{
  border: 3px solid #e11425;
  padding: 18px;
}
.alert-box ol,
.wartung-box ol{
  font-weight: bold;
}
.alert-box h3,
.wartung-box h3{
  margin: 0;
  padding: 0;
}
.alert-box h3,
.alert-box em{
  color: #e11425;
  font-style: normal;
}
.wartung-box{
  border: 3px solid #9e9e9e;
  padding: 18px;
}
/* -----------------------------------------------------------------------------
    Content > Emergency Form
   -------------------------------------------------------------------------- */

.success-box {
  color: #fff;
  background-color: #9e9e9e;
  font-weight: bold;
  padding: 10px;
  margin: 20px 0 18px 0;
}
.error-box {
  color: #fff;
  background-color: #e11425;
  font-weight: bold;
  padding: 10px;
  margin: 20px 0 18px 0;
}
.field-error{
  border: 1px solid #e11425 !important;
}
.required{color: #e11425;}
.control {margin: 0 0 20px 0;}
.emergency-form {
  border: 3px solid #e11425;
  padding: 19px 0;
}
.dsg{
  font-weight: normal;
  font-size: 12px;
}
input[type="text"],
input[type="email"],
input[type="tel"] {
  border: 1px solid #9e9e9e;
  padding: 4px;
  width: 100%;
}
button.btn{
  border: none;
  padding-top: 0;
  margin:0 0 14px;
}
select {
  border: 1px solid #9e9e9e;
  padding: 4px;
}
input.short {
  width: 100%;
}
textarea {
  border: 1px solid #9e9e9e;
  width: 100%;
  height: 174px;
}
label {
  display: block;
  font-weight: bold;
  margin: 0 0 8px 0;
}
label.inline {
  display: inline;
}
.privacy{
  float: left;
  margin: 0 0 14px;
  width: 304px;
}
/* -----------------------------------------------------------------------------
    Content > Über uns
   -------------------------------------------------------------------------- */

.about-icon-container {
  position: relative;
  margin: 0 0 20px 0;
}
.about-icon-container > h2 {
  position: absolute;
  margin: 0;
  bottom: 0;
  left: 115px;
}
.about-icon {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-image: url(../img/pages/about-icons.png);
}
.about-icon.icon-quality {
  background-position: 0 0;
}
.about-icon.icon-progress {
  background-position: -100px 0;
}
.about-icon.icon-efficiency {
  background-position: -200px 0;
}
.about-icon.icon-dependable {
  background-position: -300px 0;
}
.about-icon.icon-fairness {
  background-position: -400px 0;
}
.about-icon.icon-ecologic {
  background-position: -500px 0;
}

/* -----------------------------------------------------------------------------
    Content > Leistungen
   -------------------------------------------------------------------------- */

.advantage-box {
  border: 3px solid #e11425;
  padding: 0 10px;
  margin: 0 0 14px;
}
.service-list {
  margin: 12px 0;
  padding: 0 0 0 16px;
}
.service-list > li {
  color: #e11425;
  list-style-type: disc;
}
.service-list > li > span {
  color: #000;
}
.service-icon-container {
  position: relative;
  margin: 0 0 20px 0;
}
.service-icon-container > h2 {
  position: absolute;
  margin: 0;
  bottom: 0;
  left: 115px;
}
.service-icon {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-image: url(../img/pages/oil-gas-solar.png);
}
.service-icon.icon-gas {
  background-position: -170px 0;
}
.service-icon.icon-oil {
  background-position: -17px 0;
}
.service-icon.icon-solar {
  background-position: -312px 0;
}
.more-details {
  display: none;
  padding: 20px 0 0 0;
}

/* =============================================================================
    Footer
   ========================================================================== */

footer {
  margin-top: 30px;
  font-size: 12px;
  line-height: 1.5em;
  color: #fff;
  background-color: #2d2d2d;
}
.footer-wrapper{
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
footer a,
footer a:visited {
  color: #fff;
  text-decoration: none;
}
footer a:hover {
  color: #e11425;
}
footer em {
  color: #e11425;
  font-style: normal;
}
.footer-list{padding:30px 0 15px 0;}
.footer-list ul{list-style-type: none;}
.footer-list > li {
  vertical-align: top;
  display: inline-block;
  width: 200px;
  margin-right: 30px;
}
.footer-list > li:last-child {margin-right: 0;}
footer .imprint-link {
  float: right;
	margin-left:20px;
}

/* =============================================================================
    Extra Classes
  */
.no-padding{padding: 0;}
.position-relative{position: relative;}
.display-block{display: block;}
.no-bold{font-weight: initial;}
.no-margin{margin: 0;}

/* =============================================================================
    Utility
  */

@media(min-width: 680px){
  .col-6{width: 50%;}
  .col-6.short-control-col{
    width: 100%;
  }
  .col-6:nth-child(2n+1){clear: left;}
}