@import url("reset.css");

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

/* raleway-200 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/raleway-v29-latin-200.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v29-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v29-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/raleway-v29-latin-200.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/raleway-v29-latin-200.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/raleway-v29-latin-200.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-300 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v29-latin-300.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v29-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v29-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/raleway-v29-latin-300.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/raleway-v29-latin-300.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/raleway-v29-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-regular - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/raleway-v29-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v29-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v29-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/raleway-v29-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/raleway-v29-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/raleway-v29-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}

/* raleway-600 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/raleway-v29-latin-600.eot'); /* IE9 Compat Modes */
  src: url('../fonts/raleway-v29-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v29-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/raleway-v29-latin-600.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
       url('../fonts/raleway-v29-latin-600.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
       url('../fonts/raleway-v29-latin-600.svg#Raleway') format('svg'); /* Legacy iOS */
}


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

html {overflow-x: hidden; background-color: #f4f4f4;}
body {font-family: 'Raleway'}
p {font-size: 15px; font-weight: 300; line-height: 24px; margin-bottom: 15px; color: #1c1c1c;}
a {color: #000; text-decoration: none; cursor: pointer;}
h1 {font-size: 35px; line-height: 40px; line-height: 45px; margin-bottom: 40px; text-align: justify; text-align-last: center; color: #dcdcdc; text-transform: uppercase;}
h2 {font-size: 50px; line-height: 55px; margin-bottom: 20px; text-transform: uppercase; font-weight: 200; letter-spacing: 5px}
h3 {font-size: 30px; line-height: 35px; font-weight: 200; color: #1c1c1c;}
h4 {font-size: 16px;}
strong {font-weight: 500; font-weight: 600;}


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

.logo {position: fixed; z-index: 999; width: 205px; height: auto; margin: 0 auto; top: -2px; border: 2px solid #666666; left: 50%; transform: translate(-50%);}

nav {position: fixed; background: #1c1c1c; width: 100%; z-index: 101; top: 0; text-align: center; z-index: 100; margin: 0 auto; border-bottom: 2px solid #666666}
nav ul {margin-left: 84px}
nav ul li {display: inline-block; text-transform: uppercase; border-right: 2px solid #666666; padding: 20px 20px}
nav ul li:nth-of-type(1) {border-left: 2px solid #666666;}
nav ul li:nth-of-type(4) {border-left: 2px solid #666666;}
nav ul li a {text-decoration: none; font-size: 16px; color: #dcdcdc; transition: 0.5s;}
nav ul li a:hover {color: #666666}
.empty {width: 195px; padding: 0;}

.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: #1c1c1c; padding: 16px 21px 21px 19px; border: 2px solid #666666;}
.burger-nav b {transition: all .4s ease-in-out; float: left; margin-left: 0; font-family: 'Roboto'; font-style: normal; color: #dcdcdc}
.burger-nav-anim {background: none;}
.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: #1c1c1c; 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; width: 35px; z-index: 9999; left: 2.5px; transition: 0.5s;}
aside img:hover {-ms-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2);}

.phone {top: 40vh;}
.mail {top: 45vh;}

.left {width: 40px; height: 100vh; position: fixed; left: 0; top: 0; z-index: 999; border-right: 2px solid #666666;}
.right {width: 40px; height: 100vh; position: fixed; right: 0; top: 0; z-index: 999; border-left: 2px solid #666666}

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

.subnav {position: fixed; bottom: 0; color: #fff; z-index: 999; transition: 0.5s; width: 100%; text-align: right;}
.subnav a {font-family: 'Open Sans'; color: #fff; padding: 8px 15px; font-size: 13px; background-color: #1c1c1c; margin-left: 20px; line-height: 23px; border: 2px solid #666666}
.subnav a:nth-of-type(2) {margin-right: 40px;}
.subnav a:hover {background-color: #666666;}


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

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

#stoerer {position: absolute; text-align: center; top: 35vh; padding: 0 30%}

#job-stoerer {position: absolute; left: 40px; bottom: 10vh; background-color: #666666; padding: 20px 30px;}
#job-stoerer h2 {font-size: 20px; line-height: 26px; color: #dcdcdc; letter-spacing: 3px}
#job-stoerer .btn {font-size: 14px;}
#job-stoerer .btn:hover {background-color: #1c1c1c}


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

html {scroll-behavior: smooth;}
.content {display: flex; width: 80%; margin-left: 10%;}
.flex {display: flex;}
.col {width: 100%;}
.col:nth-of-type(2) {margin-left: 10%;}

.center {width: 50%; margin-left: 25%; text-align: justify; text-align-last: center; padding: 180px 0;}

.btn {color: #dcdcdc; border: 1px solid #dcdcdc; padding: 5px 25px; transition: 0.5s; border-radius: 30px}
.btn:hover {background-color: #6d6d6d;}
::-moz-selection {background: #4a4a4a; color: #dcdcdc;}
::selection {background: #4a4a4a; color: #dcdcdc;}


/*-----------ÜBER UNS-----------*/

#ueberuns {padding: 40px 0;}
.slideshow-container {position: relative; margin: auto;}
.slideshow-container .prev, .slideshow-container .next {cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px;
  margin-top: -22px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;}

.next {right: 0; border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {background-color: rgba(0,0,0,0.8);}
.active, .dot:hover {background-color: #717171;}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

.line-top {width: 100%; border-bottom: 2px solid #666666;}
.line-bottom {width: 100%; border-top: 2px solid #666666;}


/*-----------LEISTUNGEN-----------*/

#leistungen {background-color: #1c1c1c}
#leistungen h2, #leistungen p {color: #dcdcdc;}
#leistungen h3 {font-size: 22px; color: #dcdcdc}
#leistungen p {text-align: justify}

#leistungen .bild {background: url("../images/architektur-kueche.jpg") no-repeat; height: auto; width: 50%; background-size: cover; background-position: center top; position: relative;}

.text {width: 40%; padding: 500px 5% 100px; position: relative;}
.bogen {width: 350px; height: auto; position: absolute; top: 0; right: 40px;}


/*-----------KONTAKTIEREN-----------*/

#kontaktieren {width: calc(100% - 85px); margin-left: 40px; position: relative; border-top: 2px solid #666666; margin-top: 50px; padding: 100px 0;}
#kontaktieren h2 {text-align: center;}
#kontaktieren p {text-align: justify; margin-bottom: 0;}
#kontaktieren a {text-decoration: underline;}
#kontaktieren .center {width: 60%; margin-left: 20%; padding: 20px 0;}


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

.puffer {background: url("../images/kueche-moebel.jpg") no-repeat; height: 500px; width: calc(100% - 82px); background-size: cover; background-position: center top; position: relative; margin: 0 41px; border-bottom: 2px solid #666666; border-top: 2px solid #666666}


/*-----------PROJEKTE-----------*/

#projekte {width: calc(100% - 82px); margin-left: 41px; border-bottom: 2px solid #666666;}
#projekte h2 {text-align: center; margin-bottom: 0;}
#projekte h3 {margin-bottom: 15px;}
#projekte p {text-align: justify}
.ueberschrift {padding: 30px 0; border-bottom: 2px solid #666666}

.projekt {width: 33.3%; padding: 40px;}
.projekt:nth-of-type(2) {border-left: 2px solid #666666; border-right: 2px solid #666666;}

.entwurf {background: url("../images/entwurf.jpg") no-repeat; width: 100%; height: 500px; background-position: center; background-size: cover; border: 2px solid #666666; margin-bottom: 20px;}

.herstellung {background: url("../images/herstellung.jpg") no-repeat; width: 100%; height: 500px; background-position: center; background-size: cover; border: 2px solid #666666; margin-bottom: 20px;}

.fertigstellung {background: url("../images/fertigstellung.jpg") no-repeat; width: 100%; height: 500px; background-position: center; background-size: cover; border: 2px solid #666666; margin-bottom: 20px;}


/*-----------KONTAKT-----------*/

#kontakt {background-color: #1c1c1c}
#kontakt h2, #kontakt p, #kontakt a {color: #dcdcdc;}
#kontakt a {text-decoration: underline;}

#kontakt .bild {background: url("../images/paul-schad-kontakt.jpg") no-repeat; height: auto; width: 50%; background-size: cover; background-position: center top; position: relative;}

.text {width: 40%; padding: 500px 5% 100px; position: relative;}
#kontakt .bogen {width: 350px; height: auto; position: absolute; top: 0; right: 0;}


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

footer {padding: 120px 0; border-top: 2px solid #666666;}
footer a {text-decoration: underline;}

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

.popup-style {margin: 2rem 0; width: 70%; min-height: 20px; padding: 80px 10%; background-color: #1c1c1c; border: 2px solid #666666;   -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 h2 {font-size: 30px; line-height: 40px; margin-bottom: 10px; color: #dcdcdc}
.popup-style h3 {font-size: 20px; margin-bottom: 20px; color: #dcdcdc;}
.popup-style p {color: #dcdcdc; text-align: left;}
.popup-style .btn {background-color: #dcdcdc; color: #1c1c1c; font-weight: 400;}
.popup-style .btn:hover {background-color: #c1bdb0; color: #1c1c1c; font-weight: 400;}


button {margin: 0; padding: 0; background: none; border: none; color: #666666; font-weight: 800; font-size: 20px;}
.close-popup {transition: all 1s ease; cursor: pointer; position: fixed; top: 20px; right: 22px}
.close-popup i {transition: all 1s ease; font-size: 2rem; color: #dcdcdc}
.close-popup:hover i {color: #020D1A}


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

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

@media screen and (max-width: 1100px) {
    h1 {font-size: 30px;}
    .logo {left: 40px; transform: none; width: 150px;}
    main {text-align: center;}
    header {height: 85vh;}
    nav {background: none; box-shadow: 0 0 0;}
    nav ul{display: none;}
    .navi {display: block;}
    
    #stoerer {top: 20vh; padding: 0 20%}
    
    .flex {display: block;}
    .text { width: 80%; padding: 200px 10% 70px;}
    .bogen, #kontakt .bogen {width: 200px;}
    #leistungen .bild {width: 100%; height: 500px; background-position: bottom;}
    
    .projekt {width: 100%; padding: 0;}
    #projekte p {padding: 0 10% 50px}
    .projekt:nth-of-type(2) {border: none;}
    .entwurf, .herstellung, .fertigstellung {border: none; height: 400px;}
    
    footer {text-align: left;}
    
}

@media screen and (max-width: 900px) {
    #kontaktieren .ellipse {border: none;}
    #kontaktieren h2 {padding: 0 5%}
    
    footer .content {display: block; text-align: center;}
    footer .content .col:nth-of-type(2) {margin-left: 0;}
}

@media screen and (max-width: 700px) {
    h1 {font-size: 20px; line-height: 26px;}
    h2 {font-size: 40px; line-height: 45px;}
    header {height: 70vh;}
    .center {padding: 100px 0;}
    
    .text { width: 70%; padding: 100px 15% 70px;}
    .bogen {display: none;}
}

@media screen and (max-width: 500px) {
    h2 {font-size: 23px; line-height: 28px;}
    .left, .right {width: 20px;}
    #projekte {margin-left: 21px; width: calc(100% - 42px);}
    .logo {left: 20px; width: 120px;}
    .subnav a:nth-of-type(2) {margin-right: 20px;}
    
    aside img {background-color: #1c1c1c; left: 0; border: 2px solid #666666;}
    
    #kontaktieren .center {width: 90%; margin-left: 5%;}
}