body{
    padding: 0;
    margin: 0;
}
#container{
    width:100%;
    height: 100vh;
}
img#pic-car-care, img#pic-glass-care{
    width: 40vw;
    height: 50vh;
}
#header{
    width: 100%;
    height: 100px;
    position: relative;
    float: left;
}
.logo{
    float: left;
    padding-top: 30px;
    padding-left: 45px;
}
.group{
    float: right;
    padding-top: 43px;
    padding-right: 70px;
}


#middle{
    width: 100%;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    position: relative;
    height: auto;
    float: left;
    align-items: center;
}
.main-text{
    font-family: 'Gotham';
    font-weight: 1200;
    font-style: normal;
    font-size: 34px;
    line-height: 1.1em;
    letter-spacing: -2px;
    margin-left: auto;
    margin-right: auto;
}
.row{
    display: flex;
}
.content{
    flex: 50%;
    height: 500px;
    width: 490px;
    margin-top: -6vh;
    mix-blend-mode: multiply;
}
#pic-car-care{
    height: 500px;
    width: 490px;
}
#pic-glass-care{
    height: 500px;
    width: 490px;
}
.button{
    padding-top:14px;
    font-family: 'Gotham';
    font-weight: 500;
    font-style: normal;
    font-size: 14px;
    text-decoration: none;
    mix-blend-mode: multiply;
    margin-left: auto;
    margin-right: auto;
    flex: 50%;
    color: white;
    background: black;
    width: 242px;
    height: 34px;
    border-radius: 10px;
    margin-top: -6vh;
}
a{
    text-decoration: none;
}
a:hover .button{
    background: #FC0000;
}



#footer{
    width: 100%;
    position: fixed;
    float: left;
    bottom: 0;
}
#footer p{
    font-family: 'Gotham';
    font-weight: 300;
    font-style: normal;
    font-size: 10pt;
    padding: 20px;
    float: left;
    position: relative;
    color: #919191;
}

@media (min-width: 0px) and (min-height: 0px){
    img#pic-car-care, img#pic-glass-care{
        width: 70vw;
        max-width: 100vw;
        height: auto;
    }
    #header{
        width: 100%;
        height: 70px;
        position: relative;
        float: left;
    }
    .row{
        flex-direction: column;
        margin-left: auto;
        margin-right: auto;
    }
    .logo{
        float: left;
        padding-top: 10px;
        padding-left: 20px;
    }
    .group{
        float: right;
        padding-top: 23px;
        padding-right: 30px;
    }
    
    .main-text{
        font-family: 'Gotham';
        font-weight: 1200;
        font-style: normal;
        font-size: 6vw;
        line-height: 1.1em;
        letter-spacing: -2px;
        max-width: 70vw;
        margin-left: 20px;
    }
    #middle{
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        text-align: left;
        justify-content: center;
        position: relative;
        height: auto;
        float: left;
        align-items: center;
    }
    #footer{
        max-width: 100%;
        position: relative;
        float: left;
        bottom: 0;
        margin-top: 100px;
    }
    a{
        margin-top: -100px;
    }
    .content{
        flex-flow: row wrap;
        flex: 100%;
        height: auto;
        margin-top: 10px;
        width: auto;
        max-width: 100%;
        text-align: center;
        mix-blend-mode: multiply;
        margin-left: auto;
        margin-right: auto;
    }
    .button{
        padding-top:12px;
        font-family: 'Gotham';
        font-weight: 500;
        font-style: normal;
        font-size: 14px;
        text-decoration: none;
        mix-blend-mode: multiply;
        margin-left: auto;
        margin-right: auto;
        flex: 100%;
        color: white;
        background: black;
        width: 126%;
        margin-left: -13%;
        max-width: 126%;
        height: 28px;
        border-radius: 10px;
        margin-top: 0;
    }
}



@media (min-width: 920px) and (min-height: 0px){
    img#pic-car-care, img#pic-glass-care{
        width: 30vw;
        height: auto;
    }
    .logo{
        float: left;
        padding-top: 30px;
        padding-left: 45px;
    }
    #header{
        width: 100%;
        height: 100px;
        position: relative;
        float: left;
    }
    .group{
        float: right;
        padding-top: 43px;
        padding-right: 70px;
    }
    
    .row{
        flex-direction: initial;
        display: flex;
    }
    #middle{
        width: 100%;
        margin: 0 auto;
        text-align: center;
        justify-content: center;
        position: relative;
        height: auto;
        float: left;
        align-items: center;
    }
    .main-text{
        font-family: 'Gotham';
        font-weight: 1200;
        font-style: normal;
        font-size: 34px;
        line-height: 1.1em;
        letter-spacing: -2px;
        margin-left: auto;
        margin-right: auto;
    }
    #footer{
        width: 100%;
        position: relative;
        float: left;
        bottom: 0;
        margin-top: 100px;
    }
    .content{
        flex-flow: initial;
        flex: 50%;

        max-height: auto;
        mix-blend-mode: multiply;

    }
    .button{
        padding-top:16px;
        font-family: 'Gotham';
        font-weight: 500;
        font-style: normal;
        font-size: 14px;
        text-decoration: none;
        mix-blend-mode: multiply;
        margin-left: auto;
        margin-right: auto;
        flex: 50%;
        color: white;
        background: black;
        width: 242px;
        height: 33px;
        border-radius: 10px;
        margin-top: 0;
    }
}

@media (min-width: 920px) and (min-height: 768px){
    img#pic-car-care, img#pic-glass-care{
        width: 32vw;
        height: auto;
    }
    .row{
        flex-direction: initial;
        display: flex;
    }
    #header{
        width: 100%;
        height: 100px;
        position: relative;
        float: left;
    }
    .logo{
        float: left;
        padding-top: 30px;
        padding-left: 45px;
    }
    .group{
        float: right;
        padding-top: 43px;
        padding-right: 70px;
    }
    
    #middle{
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
        justify-content: center;
        position: relative;
        max-height: auto;
        float: left;
        align-items: center;
    }
    .main-text{
        font-family: 'Gotham';
        font-weight: 1200;
        font-style: normal;
        font-size: 34px;
        line-height: 1.1em;
        letter-spacing: -2px;
        margin-left: auto;
        margin-right: auto;
    }
    #footer{
        width: 100%;
        position: fixed;
        float: left;
        bottom: 0;
    }
    .content{
        flex-flow: initial;
        flex: 50%;
        margin:0 auto;
        margin-top: 6vw;
        height: auto;

        mix-blend-mode: multiply;

    }
    .button{
        padding-top:16px;
        font-family: 'Gotham';
        font-weight: 500;
        font-style: normal;
        font-size: 14px;
        text-decoration: none;
        mix-blend-mode: multiply;
        margin-left: auto;
        margin-right: auto;
        flex: 50%;
        color: white;
        background: black;
        width: 242px;
        height: 33px;
        border-radius: 10px;
        margin-top: 0;
    }
}
@media (min-width: 1800px) and (min-height: 768px){
    .content{
        flex-flow: initial;
        flex: 50%;
        margin:0 auto;
        margin-top: 4vw;
        height: auto;

        mix-blend-mode: multiply;

    }
}