.bg-gray {
    background-color: #707070;
}
.bg-dark {
    background-color: #070707;
}

html, body {
    background-color: #222;
    color: snow;
    font-family: 'Open Sans';font-size: 20px;
    margin: 0;
    padding: 0;
}

.home, .content {
    background-color: #070707;
    margin: 0 auto;
}

header {
    background-image: url("../img/head.png");
    background-size: cover;
    overflow: hidden;
    width: 100%;    
}

.lang-select {
    border: 1px solid #777;
    float: right;
    overflow: hidden;    
}

.lang-option {
    color: #777;
}

.lang-option-inactive {
    color: inherit;
    display: block;
    text-decoration: none;
}

.lang-option-inactive:hover {
    background-color: #373737;
}

header h1, header h2 {
    padding: 0;
}

header h1 {
    font-weight: normal;
}

header h2 {
    font-weight: bold;
}

.content-item {
    display: inline-block;
    border: 1px solid snow;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.3s;
    vertical-align: top;
}

.home-item:hover, .home-item:active,
.services-item:hover, .services-item:active {
    background-color: #373737;
}

.content-item h3 {
    text-transform: uppercase;
}

.contacts-item a {
    color: inherit;
    text-decoration: none;
}

footer {
    border-top: 1px solid #eee;
    bottom: 1px;
    margin: 0;    
    position: absolute;
    text-align: center;
}

footer h5, footer h6, footer h6 a {
    color: inherit;
    font-weight: normal;
    padding: 0;
    margin: 0;
    text-align: center;
    text-decoration: none;
}


@media (max-aspect-ratio: 5/8)  {
    .home {
        height: 100vh;
        position: relative;
        width: 100vw;
    }
    
    header {
        height: 30vw;
        margin-bottom: 2vw;
    }
    
    .lang-select {
        border-radius: 0.8vw;
        font-size: 2.5vw;
        height: 4vw;
        margin: 3vw 3.5vw;
    }

    .lang-select:hover, .lang-select:active {
        height: 12vw;
    }

    .lang-option {
        height: 3vw;
        margin: 0.2vw;
        padding: 0 2vw 1vw 2vw;
    }
    
    header h1 {
        font-size: 13.6vw;
        font-weight: normal;
        margin: 6vw 0 0 10vw;
    }
    
    header h2 {
        font-size: 6vw;
        margin: -3.5vw 0 0 11vw;
    }

    .home-item {
        border-radius: 1vh;
        font-size: 3vw;
        height: 15vh;
        margin: 2vh 0 0 8vw;
        padding-left: 2vw; 
        width: 75vw;
    }

    .home-item h3 {
        /*margin-block-start: 0.5em;*/
        margin-block-end: 0;
    }

    footer {
        width: 100%;
    }
    
    footer h5, footer h6, footer h6 a {
        font-size: 2vw;
        margin: 0.5vw 0 0 0;
    }
}

@media (max-aspect-ratio: 1/1) and (min-aspect-ratio: 5/8)  {
    .home {
        height: 100vh;
        position: relative;
        width: 100vw;
    }
    
    header {
        height: 30vw;
        margin-bottom: 2vh;
    }
    
    .lang-select {
        border-radius: 0.8vw;
        font-size: 2.5vw;
        height: 4vw;
        margin: 3vw 3.5vw;
    }

    .lang-select:hover {
        height: 12vw;
    }

    .lang-option {
        height: 3vw;
        margin: 0.2vw;
        padding: 0 2vw 1vw 2vw;
    }
    
    header h1 {
        font-size: 13.6vw;
        font-weight: normal;
        margin: 6vw 0 0 10vw;
    }
    
    header h2 {
        font-size: 6vw;
        margin: -3.5vw 0 0 11vw;
    }
    
    .home-item {
        border-radius: 3%;
        font-size: 2vw;
        height: 20vh;
        margin: 5vh 0 0 8vw;
        padding-left: 2vw;
        width: 35vw;
    }

    footer {
        width: 100%;
    }
            
    footer h5, footer h6, footer h6 a {
        font-size: 2vw;
        margin: 0.5vw 0 0 0;
    }
}

@media (min-aspect-ratio: 1/1) {
    .home, .content {
        min-height: 100vh;
        width: 150vh;
    }

    header {
        height: 41vh;
    }
    
    .lang-select {
        border-radius: 0.8vh;
        font-size: 2.5vh;
        height: 4vh;
        margin: 5vh 7vh;
    }

    .lang-select:hover {
        height: 12vh;
    }

    .lang-option {
        height: 3vh;
        margin: 0.2vh;
        padding: 0 2vh 1vh 2vh;
    }

    header h1 {
        font-size: 20vh;
        font-weight: normal;
        margin: 9vh 0 0 16.8vh;
    }
    
    header h2 {
        font-size: 7vh;
        letter-spacing: 1vh;
        margin: -5vh 0 0 18vh;
    }

    .content-item {
        border-radius: 3%;
        box-shadow: 0.5vh 0.7vh #222;
        font-size: 2.8vh;        
        margin: 8vh 0 0 5vh;
        padding: 0 1.5vh;        
    }

    .home-item {
        height: 35vh;
        width:  28vh;
    }

    .contacts-item, .services-item {
        height: 40vh;
        width:  39vh;
    }

    .content-item h3 {
        margin-block-start: 0.7em;
        margin-block-end: 0;
    }

    footer {
        display: inline-block;
        height: 4vh;
        padding: 1vh 0;
        margin: 0;
        width: 150vh;
    }

    footer h5, footer h6, footer h6 a {
        display: inline;
        font-size: 2vh;
        vertical-align: top;
    }

    footer h6 {
        margin-left: 3em;
    }
}