@charset "utf-8";
body {padding: 0; margin: 0; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: 300; line-height: 1.4;}
a {text-decoration: none;}
a.white {color: #ffffff;}
a.white:hover {color: #d6ba6c;}

h1 {color: #d6ba6c;}

.schrott-ankauf {background-image: url(../img/schrott.jpg); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: center;}
.bauplanung {background-image: url(../img/bauplanung.jpg); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: center;}
.containerservice {background-image: url(../img/container.jpg); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: center;}
.demontage {background-image: url(../img/abriss.jpg); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: center;}
.contactbg {background-image: url(../img/contact.jpg); background-attachment: fixed; background-size: cover; background-repeat: no-repeat; background-position: center;}
header {width: calc(100% - 30px); padding: 15px; height: 120px; transition: .5s;}
header > span {font-family: 'Nothing You Could Do', cursive; font-size: 42px;}
.welcome {width: calc(100% - 100px); padding: 50px; background-color: #000000; color: #ffffff; font-weight: 300;}

container1 {height: 80vh; width: 100%; background-image: url(../img/schrott.jpg); background-attachment: fixed; background-size: cover; background-position: center; display: flex; transition: 1s;}
container2 {height: 80vh; width: 100%; background-image:url(../img/abriss.jpg); background-attachment: fixed; background-size: cover; background-position: center; display: flex; transition: 1s;}
container3 {height: 80vh; width: 100%; background-image:url(../img/bauplanung.jpg); background-attachment: fixed; background-size: cover; background-position: center; display: flex; transition: 1s;}
container4 {height: 80vh; width: 100%; background-image:url(../img/container.jpg); background-attachment: fixed; background-size: cover; background-position: center; display: flex; transition: 1s;}
container1.navi {height: 20vh;}
container2.navi {height: 20vh;}
container3.navi {height: 20vh;}
container4.navi {height: 20vh;}
.overlay {width: calc(100% - 20px); padding: 0 10px; height: 100%; background: rgba(0,0,0,0); transition: .5s; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer;}
.overlay.active {background: rgba(0,0,0,.6);}

.title {font-size: 78px; font-weight: 500; text-shadow: 0 0 5px #000; color: #fff; text-align: center; transition: 1s;}
.title.navi {font-size: 32px;}
.line {width: 0px; height: 3px; background-color: #ffffff; transition: .5s;}
.line.active {width: 500px;}
.line.off {display: none;}
.morebtn {font-size: 20px; color: #ffffff; transition: .5s; margin-top: 20px; padding: 15px 35px; border: 3px solid #ffffff; opacity: 0;}
.morebtn:hover {border: 3px solid #d6ba6c;}
.morebtn.active {opacity: 1;}
.morebtn.off {display: none;}

.conbtncont {width: 100%; display: flex; justify-content: center; align-items: center;}
.conbtn {font-size: 20px; color: #000000; transition: .5s; margin-top: 20px; padding: 15px 35px; border: 3px solid #000000; width: 150px; text-align: center;}
.conbtn:hover {border: 3px solid #d6ba6c;}

.navi-container {z-index: 20}
.navi-container.active {margin-bottom: 10vh; margin-top: 10vh; height: 80vh; position: fixed; width: 100%; top: 0; right: 0; transition: 1s;}
.navi-container.right {right: -100%;}
.navi-title {width: 100%; height: 10vh; background-color: #ffffff; position: fixed; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 500; top: -10vh; z-index: 99; transition: .5s}
.navi-title.show {top: 0;}
.nav-footer {width: calc(100% - 50px); padding: 0 25px; height: 10vh; background-color: #000000; position: fixed; display: flex; align-items: center; justify-content: space-between; font-size: 24px; color: #ffffff; font-weight: 300; bottom: -10vh; z-index: 99; transition: .5s}
.nav-footer > span {width: 30%; display: flex; justify-content: center;}
.nav-footer.show {bottom: 0;}

.content {display: flex; justify-content: space-between; margin: 100px 0;}
.pagetit {width: 50%; position: fixed; font-size: 64px; font-weight: 500; text-shadow: 0 0 5px #000; color: #fff; right: 0;}
.halfbox {width: calc(49% - 60px); padding: 30px;}
.halfbox.white {background-color: #ffffff;}
.halfbox.float-r {display: flex; justify-content: flex-end;}

.contact {width: 100%; padding: 50px 0; display: flex; align-items:stretch;}
.contact > .text {width: 70%; margin-right: 10px; display: flex; flex-direction: column;}
.contact > .summit {width: 46px; display: flex; justify-content: center; align-items: center; background-color: #d6ba6c; cursor: pointer;}
.contact > .summit:hover {background-color: #997B03;}
input[type="text"] {padding: 10px; width: calc(100% - 20px); margin-bottom: 10px; font: 100 20px Roboto;}
textarea {padding: 10px; max-width: calc(100% - 20px); min-width: calc(100% - 20px); min-height: 120px; max-height: 120px; font: 100 20px Roboto;}
.success {width: calc(100% - 50px); display: flex; align-items: center; margin-top: 50px; padding: 25px; border: 1px solid #000000;}

footer {width: calc(100% - 100px); padding: 25px 50px; background-color: #000000; color: #ffffff; display: flex; justify-content: space-between; font-size: 16px;}
footer > .section {width: 30%; display: flex; flex-direction: column; justify-content: center;}
footer > .section.right {text-align: right;}
footer > .section.left {align-items: flex-start;}
footer > .section.middle {align-items: center;}

/**Navi**/
.nav-cont {position: fixed; right: 30px; top: 30px; z-index: 100;}
#nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {width: 30px; height: 20px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer;}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {display: block; position: absolute; height: 3px; width: 100%; background-color: #d6ba6c; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
#nav-icon1 span:nth-child(1) {top: 0px;}

#nav-icon1 span:nth-child(2) {top: 9px;}

#nav-icon1 span:nth-child(3) {top: 18px;}

#nav-icon1.open span:nth-child(1) {top: 9px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}

#nav-icon1.open span:nth-child(2) {opacity: 0; left: -60px;}

#nav-icon1.open span:nth-child(3) {top: 9px; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg);}