@import url("reset.css");

/*-----------FONTS-----------*/

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-v19-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-v19-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v19-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v19-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v19-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v19-latin-300.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v19-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v19-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v19-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v19-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v19-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v19-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v19-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto-v19-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v19-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v19-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v19-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v19-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

/*-----------FONTGESTALTUNG-----------*/

body {font-family: 'Roboto'}
p {font-size: 15px; line-height: 26px; font-weight: 300; margin-bottom: 15px; color: #5f5f5f;}
a {color: #000; text-decoration: none; cursor: pointer;}
h1 {font-size: 28px; line-height: 35px; color: #c74731; text-transform: uppercase; margin-bottom: 10px; font-weight: 500;}
h1 b {font-weight: 300}
h2 {font-size: 28px; line-height: 35px; margin: 0 5% 10px; font-weight: 500; text-transform: uppercase; color: #c74731; text-align: center;}
h2 span {font-weight: 300}
h3 {font-size: 18px; line-height: 24px; text-align: center; margin: 0 10% 50px; color: #5f5f5f}
h4 {font-size: 18px; font-weight: 500; margin-bottom: 10px; text-transform: uppercase; color: #c74731}
li {font-size: 14px; list-style: disc;}
strong {font-weight: 500; font-weight: 600;}
span {color: #c74731; font-weight: 400;}


/*-----------NAVI-----------*/

.logo {position: fixed; width: 200px; height: auto; top: 10px; left: 10%; z-index: 999;}
nav {position: fixed; background: #fff; width: 90%; margin: 0 5%; z-index: 101; top: 0; text-align: right; padding: 35px 0; z-index: 100; border-radius: 0 0 40px 40px}
nav ul {margin-right: 5%;}
nav ul li {display: inline-block; margin: 0 2%; text-transform: uppercase;}
nav ul li a {text-decoration: none; font-size: 14px; color: #2e2e2e; text-transform: uppercase;}
nav ul li a:hover {color: #c74731}

.tel {position: absolute; left: 350px; font-size: 14px; color: #c74731; top: 37px; text-decoration: underline;}

.navi {display: none;}
.burger-nav {position: fixed; right: 0; top: -6px; color: #fff; z-index: 9999; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 40px; cursor: pointer; transition: all .4s ease-in-out; background-color: #c74731; padding: 16px 21px 21px 19px; border-radius: 20px 0 0 0;}
.burger-nav b {transition: all .4s ease-in-out; float: left; margin-left: 0; font-family: 'Roboto'; font-style: normal;}
.burger-nav-anim {top: -5px; color: #fff;}
.burger-nav-anim b:first-of-type {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.burger-nav-anim b:nth-of-type(2) {opacity: 0;}
.burger-nav-anim b:last-of-type {-webkit-transform: rotate(-45deg); transform: rotate(-45deg); margin-left: -80%;}

.full-screen-nav {position: fixed; z-index: 9998; width: 100%; height: 100vh; background: #c74731; display: table; visibility: hidden; transition: all .4s ease-in-out; opacity: 0;}
.full-screen-nav ul {text-align: center; display: table-cell; vertical-align: middle; width: 100%;}
.full-screen-nav ul li a {padding: 20px; display: block; font-size: 30px; color: #fff; transition: all .4s ease-in-out; text-decoration: none; text-transform: uppercase;}
.fadeIn {opacity: 1 !important; visibility: visible !important;}
.fadeUp {opacity: 1 !important; margin-top: 0 !important;}


/*-----------ASIDE-----------*/

aside img {position: fixed; background-color: #c74731; width: 40px; z-index: 999; left: 10px; transition: 0.5s; border-radius: 10px;}
aside img:hover {background-color: #961600;}
.phone {top: 300px;}
.mail {top: 350px;}
.maps {top: 400px;}


/*-----------SUBNAV-----------*/

.subnav {position: fixed; bottom: 0; color: #fff; z-index: 999; transition: 0.5s; width: 100%; text-align: right;}
.subnav a {color: #fff; padding: 8px 15px; font-size: 13px; background-color: #c74731; margin-left: 20px; line-height: 23px; border-radius: 10px 10px 0 0}
.subnav a:nth-of-type(2) {margin-right: 5%;}
.subnav a:hover {background-color: #961600;}


/*-----------HEADER-----------*/

header {background: url("../images/header.jpg") no-repeat; height: 100vh; width: 100%; background-size: cover; background-attachment: fixed; background-position: bottom center; position: relative; border-radius: 0 0 150px 150px;}

.mieten {position: absolute; right: 10%; bottom: 15vh;}
.mieten img {width: 150px; height: auto;}

#stoerer {position: absolute; left: 10%; bottom: 20vh; background: rgba(255,255,255,0.9); padding: 40px 50px; width: 600px; border-radius: 30px;}


/*-----------AUFBAU-----------*/

html {scroll-behavior: smooth;}
.content {display: flex; width: 80%; margin-left: 10%;}
.col {width: 33%;}
.col:nth-of-type(2) {margin: 0 5%;}
.center {width: 80%; margin-left: 10%; text-align: center;}
.flex {display: flex;}

.btn {background-color: #c74731; color: #fff; padding: 5px 30px; transition: 0.5s; border-radius: 10px}
.btn:hover {background-color: #961600}
::-moz-selection {background: #e79587; color: #fff;}
::selection {background: #e79587; color: #fff;}


/*-----------TROCKNUNGSLIGA-----------*/

#home {padding-top: 100px}
#home .center {width: 60%; margin-left: 20%;}

#trocknungsliga {padding: 100px 0 200px;}
#trocknungsliga .content {margin-bottom: 50px;}
#trocknungsliga .center h3 {margin-bottom: 20px;}

.bauheizer1 {background: url("../images/bauheizer.jpg") no-repeat; height: 250px; width: 100%; background-size: cover; background-position: center; position: relative; margin-bottom: 30px; border-radius: 30px;}
.bauheizer2 {background: url("../images/bauheizer2.jpg") no-repeat; height: 250px; width: 100%; background-size: cover; background-position: center; position: relative; margin-bottom: 30px; border-radius: 30px;}

.raumlufttrockner1 {background: url("../images/raumlufttrockner.jpg") no-repeat; height: 250px; width: 100%; background-size: cover; background-position: center; position: relative; margin-bottom: 30px; border-radius: 30px;}
.raumlufttrockner2 {background: url("../images/raumlufttrockner2.jpg") no-repeat; height: 250px; width: 100%; background-size: cover; background-position: center; position: relative; margin-bottom: 30px; border-radius: 30px;}

.ventilatoren1 {background: url("../images/ventilatoren.jpg") no-repeat; height: 250px; width: 100%; background-size: cover; background-position: center; position: relative; margin-bottom: 30px; border-radius: 30px;}
.ventilatoren2 {background: url("../images/ventilatoren2.jpg") no-repeat; height: 250px; width: 100%; background-size: cover; background-position: center; position: relative; margin-bottom: 30px; border-radius: 30px;}

#slide {margin: 80px 0 -300px; z-index: 999;}


/*-----------BEREICH2-----------*/

#expertenrat {padding: 400px 0 150px; background-color: #c74731}
#expertenrat h2 {margin-bottom: 50px;}
#expertenrat p, #expertenrat h2, #expertenrat h2 span, #expertenrat h4 {color: #fff;}
.trockenheitsgarantie {background: url("../images/trockenheits-garantie.jpg") no-repeat; height: 250px; width: 100%; background-size: cover; background-position: center; position: relative; margin-bottom: 30px; border-radius: 30px; border: 7px solid #fff;}
.kf {width: 100%; height: 600px;}


/*-----------PUFFER-----------*/

.puffer {background: url("../images/schimmel-messen.jpg") no-repeat; height: 600px; width: 100%; background-size: cover; background-attachment: fixed; background-position: center top; position: relative; border-radius: 0 0 150px 150px;}


/*-----------FOOTER-----------*/

footer {padding: 160px 0;}
footer .content {margin-top: 50px;}


/*-----------IMPRESSUM-----------*/

#impressum {padding: 150px 0; background-color: #c74731}
#impressum h2 {margin-bottom: 50px;}
#impressum h2, #impressum span, #impressum h4, #impressum p, #impressum a {color: #fff;}
#impressum a {text-decoration: underline;}

/*-----------POPUP-----------*/

.popup-style {margin: 2rem 0; width: 80%; min-height: 20px; padding: 2rem 1rem; background-color: #fff; border: 1px solid #e3e3e3; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05); transform: scale(1);}

.popup-style a {color: #1B5D84}
.popup-style a:hover {opacity: 0.8; text-decoration: none}
.popup-style h3 {color: #c74731; font-size: 20px; text-transform: uppercase; font-weight: 600; margin: 40px 0 20px; text-align: left;}
.popup-style p {color: #000; text-align: left;}
button {margin: 0; padding: 0; background: none; border: none}
.close-popup {transition: all 1s ease; cursor: pointer; position: fixed; top: 0.5rem; right: 0.5rem}
.close-popup i {transition: all 1s ease; font-size: 2rem; color: #020D1A}
.close-popup:hover i {color: #020D1A}


table {margin-right: 20px;}
.tg  {border-collapse: collapse; border-spacing: 0;}
.tg td {font-family: Arial, sans-serif; font-size: 14px; padding: 10px 5px; border-style: solid; border-width: 1px; overflow: hidden;  word-break: normal;}
.tg th {font-family: Arial, sans-serif; font-size: 14px; font-weight: normal; padding: 10px 5px; border-style: solid; border-width: 1px; overflow: hidden; word-break: normal;}
.tg .tg-0ord {text-align: right}
.tg .tg-cxkv {background-color: #ffffff}

.popup-style .flex {margin-bottom: 20px;}
.table-img {width: 150px; height: auto;}


/*-----------RESPONSIVE-----------*/

@media screen and (max-width: 1366px) {
    header, .puffer {background-attachment: scroll;}
}

@media screen and (max-width: 1300px) {
    h1 {font-size: 25px; line-height: 30px;}
    h1 b {font-size: 25px;}
    #stoerer {width: 400px;}
    .tel {display: none;}
    
    .logo {position: absolute; background-color: #fff; left: 0; top: 0; padding: 10px 20px; border-radius: 0 0 20px 0;}
    header {height: 85vh;}
    nav {background: none; box-shadow: 0 0 0;}
    nav ul{display: none;}
    .navi {display: block;}
    
    .puffer {height: 300px; background-position: bottom}
    .mieten {right: 5%; bottom: -50px;}
    .mieten img {width: 100px;}
}

@media screen and (max-width: 700px) {
    main {text-align: center;}
    .content {display: block;}
    .col {width: 80%; margin-left: 10%;}
    .col:nth-of-type(2) {margin: 50px 10%;}    
}

@media screen and (max-width: 500px) {
    h1 {font-size: 16px; line-height: 24px;}
    h1 b {font-size: 16px;}
    #stoerer p {line-height: 20px;}
    #stoerer {padding: 30px; width: 250px; left: 15%;}
    
    aside img {width: 40px;}
}