/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
body {
    font-family: 'Open Sans', sans-serif;
    margin:0;
    font-size: 18px;
    line-height: 1.7;
    /*color: #424242;*/
    /*text-size-adjust: 100%;*/
}


.flex {
    display: flex;
}

.row {
    flex-direction: row;
}

.column {
    flex-direction: column;
}

.center {
    align-items: center;
    justify-content: center;
}

#header-top {
    background-color: #020036;
    padding: 0px 140px;
    height: 52px;
    align-items: center;
    justify-content: flex-end;
}

#header-top span {
    color: white;
}

#header-top .phone {
    background-image: url("img/icons/Sarar_Icon_Anruf_white.svg");
    height: 28px;
    background-size: cover;
    width: 28px;
    background-position: center;
    margin-right: 10px;
}

#phone-header {
    color: white;
    text-decoration: none;
}

#header-top .image {
    background-image: url("img/");
    height: auto;
    background-size: cover;
    width: 50%;
    background-position: center;
}

#logo {
    background-image: url("img/logo.svg");
    height: 56px;
    background-size: cover;
    width: 122px;
    background-position: center;
}

#header-nav {
    justify-content: space-between;
    algin-items: center;
    height: 94px;
    padding: 0px 140px;
    align-items: center;
}

header ul {
    list-style: none;
}
header nav {
}

header a {
    text-transform: uppercase;
    color: black;
    text-decoration: none;
}




header li {
    margin-left: 47px;
    font-size: 20px;
    letter-spacing: 0.4px;
}

#hamburger {
    display: none;
}

#hamburger span,
#hamburger span::before,
#hamburger span::after {
    display: block;
    width: 33px;
    height: 4px;
    background-color: #020036;
    outline: 1px solid transparent;
}


#hamburger span::before,
#hamburger span::after {
    /*position:absolute;*/
    content:""
}
#hamburger span::before {
    transform: translate(0px,8px);
}
#hamburger span::after {
    transform: translate(0px,-12px);
}

#hero-image {
    height: 576px;
    background-size: cover;
    background-image: url("img/copper.jpg");
}

h1 {
    font-size: 50px;
    margin-top: 0px;
    text-align: center;
}

h2 {
    font-size: 35px;

    margin-bottom: 0px;
    margin-top: 60px;
}

h3 {
    font-size: 35px;
    text-align: center;
}

#contact {
    font-size: 35px;
    font-weight: bold;
    margin-bottom: 35px;
}

#contact a {
    text-decoration: none;
    color: black;
}

#head-text a {
    text-decoration: none;
    color: black;
}

#contact .phone {
    background-image: url("img/icons/Sarar_Icon_Anruf.svg");
    height: 43px;
    background-size: cover;
    width: 43px;
    background-position: center;
    margin-right: 15px;
    margin-left: 15px;
}

h4 {
    font-size:22px;
}

#headline h2::after {
    content: "";
    width: 92px;
    height: 10px;
    background-color: rgb(110,30,11);
    margin-top: 50px;
}

#head-text p {
    max-width: 1100px;
    font-size: 22px;
    line-height: 1.6;
}

#leistungen p {
    font-size: 18px;
}


#head-text ul {
    max-width: 1100px;
    font-size: 22px;
    line-height: 1.6;
}


#head-text .phone {
    background-image: url("img/icons/Sarar_Icon_Anruf.svg");
    height: 38px;
    background-size: cover;
    width: 38px;
    background-position: center;
    margin-right: 10px;
}

#head-text-center p {
    text-align: center;
    font-size: 22px;
    line-height: 1.6;
}

#leistungen {
    margin-top: 132px;
}

#leistungen h3 {

}

h3::after {
    content: "";
    width: 92px;
    height: 5px;
    background-color: rgb(110,30,11);
    margin-top: 30px;
    display: block;
}

.row-six {
    padding: 0px 140px;
    justify-content: space-between;
}

.iconGroup {
    text-align: center;
}

#leistungen-six .row-six:nth-child(2) {
    margin-top: 80px;
}

#Schrottabholung .image {
    background-image: url("img/icons/Sarar_Icon_Van2_lug.svg");
    height: 59px;
    background-size: cover;
    width: 132px;
    background-position: center;
}

#kfz-verwertung .image {
    background-image: url("img/icons/Sarar_Icon_Car_lug.svg");
    height: 60px;
    background-size: cover;
    width: 76px;
    background-position: center;
}

#demontage .image {
    background-image: url("img/icons/Sarar_Logog_Wrench_lug.svg");
    height: 60px;
    background-size: cover;
    width: 64px;
    background-position: center;
}

#entruempelung .image {
    background-image: url("img/icons/Sarar_Icon_House.svg");
    height: 70px;
    background-size: cover;
    width: 70px;
    background-position: center;
}

#entruempelung h4, #entruempelung p {
    /*transform: translate(0px, 11px);*/
}

#container-service .image {
    background-image: url("img/icons/Sarar_Icon_Container_Lug.svg");
    height: 40px;
    background-size: cover;
    width: 110px;
    background-position: center;
}
#container-service h4, #container-service p {
    transform: translate(0px, 15px);
}

#altmetall-ankauf .image {
    background-image: url("img/icons/Sarar_Icon_Ankauf_lug.svg");
    height: 65px;
    background-size: cover;
    width: 85px;
    background-position: center;
}

.iconGroup p {
    margin-top: 14px;
    width: 400px;
}

#ueber {
    background-color: #F4F5F5;
    margin-top: 150px;
    padding: 80px 140px 160px 140px;
}

#image1 {
    background-image: url("img/sarar_van.jpg");
    height: 456px;
    background-size: cover;
    width: 674px;
    background-position: center;
}

#image2 {
    background-image: url("img/iron.jpg");
    height: 456px;
    background-size: cover;
    width: 674px;
    width: 674px;
    background-position: center;
    margin-top: 50px;
}

.split div {
    width: 50%;
}

.split div:nth-child(1) {
     margin-right: 77px;
    /*padding-top: 50px;*/
 }

.split > div:nth-child(2) {
    margin-left: 77px;
}

.padding-top-50 {
    padding-top: 50px;
}

.bold {
    font-weight: bold;
}

footer {
    height: 77px;
    background-color: #020036;
    padding: 0px 140px;
    color: white;
    justify-content: flex-end;
    align-items: center;
}

footer ul {
    padding: 0;
}

footer li {
    list-style: none ;
}

footer li:nth-child(2){
    margin-left: 58px;
}

@media screen and (max-width: 1100px) {
    #hamburger {
        display: none;
    }

    header ul.row {
        flex-direction: column;
        /*margin-top: 50px;*/
        align-items: flex-end;
    }

    #header-nav a {
        margin-top: 10px;
    }

    #header-nav a:first-child {
        margin-top: 0px;
    }

    header #header-nav {
        height: 140px;
    }
}

@media screen and (max-width: 1550px) {
    .row-six {
        padding: 0;
    }

    .split {
        flex-direction: column;
    }

    .split div {
        width: 100%
    }

    #ueber {
        padding: 30px 25px 0px 25px;
    }

    .split > div {
        margin: 0;
    }

    .split > div:nth-child(2) {
        margin-left: 0;
        justify-content: center;
        display: flex;
        flex-direction: row;
    }

    #image1, #image2 {
        width: 50%;
        height: 350px;
        margin-top: 40px;
        padding-top: 0;
    }

    #image1 {
        margin-right: 30px;
    }
}

@media screen and (max-width: 1200px) {
   .row-six {
        flex-direction: column;
    }

    #leistungen-six .row-six:nth-child(2) {
        margin-top: 0px;
    }

    .iconGroup {
        margin-top: 70px;
    }

    #head-text {
        padding: 0px 30px;
    }

    #header-top, #header-nav {
        padding: 0px 30px;
    }

    #hero-image {
        height: 450px;
    }

    h2 {
        font-size: 63px;
    }

    h1 {
        font-size: 45px;
    }

    /*fix flexbox bug*/
    #leistungen .flex {
        display: block;
    }

    #leistungen p {
        width: auto;
    }

    #leistungen .image{
        margin-left: auto;
        margin-right: auto;
    }

    #phone-head-text {

    }

    h3::after {
        margin-left: auto;
        margin-right: auto;
    }

    /*fix font size of navigation only on android without disabling flexbox*/
    @supports not (-webkit-touch-callout: none) {
        header a {
            font-size: 45px;   }

        header #header-nav {
            height: 240px;
        }

        #phone-head-text .phone {
           /* margin-left: auto;
            margin-right: auto; */
        }

        .headline.flex.center {
            display: block;
            text-align: center;
        }

        #contact .flex {
            display: flex;
            font-size: 55px;
        }

        footer.flex {
            font-size: 40px;
            display: flex;
            justify-content: center;
        }

        #ueber h3 {
            font-size: 50px;
        }

        #header-top {
            height: 85px;
        }

        .phone-head-text.flex {
            display: flex;
        }

        phone-head-text a {
            font-size: 45px;
        }

        #head-text a {
            font-size: 45px;
        }

        .impressum-padding#head-text a {
            font-size: 22px;
            word-wrap: break-word;
        }
    }

}

@media screen and (max-width: 800px) {
    .split > div:nth-child(2) {
        flex-direction: column;
    }

    #image1, #image2 {
        width: 100%;
    }

    #hero-image {
        height: 300px;
    }

    h2 {
        font-size: 45px;
    }

    h1 {
        font-size: 34px;
    }

   /* body, #head-text p {
        font-size: 16px;
    } */

    #head-text p, #head-text ul {
        font-size: 20px;
    }

    #leistungen {
        margin-top: 100px;
    }

    footer {
        justify-content: center;
    }

}


@media screen and (max-width: 900px) {
    #hero-image {
        height: 300px;
    }
}

@media screen and (max-width: 950px) {
    #head-text p, #headtext ul, header li, #header-top, #leistungen-six p  {
        font-size: 20px;
    }
}

@media screen and (max-width: 600px) {
    #leistungen {
        margin-top: 80px;
    }
}

@media screen and (max-width: 900px) {
    #image1, #image2 {
        height: 280px;
    }
}

footer a:visited {
    color: white;
    text-decoration: none;
}

footer a {
    color: white;
    text-decoration: none;
}

#footer-impressum {
    margin-top: 389px;
}

.impressum-padding {
    padding: 0px 400px;
}

#head-text.impressum-padding {
    margin-bottom: 60px;
}

.impressum-padding h3 {
    font-size: 30px;
    text-align: left;
}

.impressum-padding h3:after {
    display:none
}

.impressum-padding#head-text a {
    text-decoration: underline;
}

/*fix font size on ios*/
@supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */

    body, #head-text p, header, header li, #leistungen p {
        font-size: xx-large;
        -webkit-text-size-adjust: 130%;
    }

    header a {
        font-size: 28px;   }

    header #header-nav {
        height: 240px;
    }

    h4 {
        font-size: 30px;
    }

    .impressum-padding#head-text a {
        /*font-size: 22px;*/
        word-wrap: break-word;
    }

    .impressum-padding #head-text ul {
        font-size: auto;
    }

    footer {
        justify-content: center;
    }
}