/* Reset and base styles  */
* {
	padding: 0;
	margin: 0;
	border: none;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Links */

a, a:link, a:visited  {
    text-decoration: none;
}

a:hover  {
    text-decoration: none;
}

ul, ul li {
	list-style: none;
}

img {
	vertical-align: top;
}

img, svg {
	max-width: 100%;
	height: auto;
}

/* сверху обнуление стилей */

/* Стили стнаицы */

body {
    background-color: #282828;
}

.conteiner {
    padding: 10px;
    font-family: Roboto;
}

.nav {
    height: 40px;
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    background-color: #1D1D1D;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    height: 11px;
    width: auto;
}

.s_seti {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    height: 18px;
}

.color_link {
    text-decoration: none;
    color: #737373;
}

.icon-ss {
    font-size: 1.125em;
}

.number {
    font-size: 0.8em;
    font-weight: 500; 
    padding-right: 20px;
}

.color_link:hover {
    color: #BCE766;
}

/* Графитовый 2 #282828 */

.box-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 96vh;
    color: #EDEDED;
}

.box-1-2 {
    margin-top: -60px;
}

.zag-01 {
    text-align: center;
    text-transform: uppercase;
    font-size: 6.25em;
    font-weight: 700;
    line-height: 103%;
}

.zag-02 {
    text-align: left;
    font-size: 1.935em;
    font-weight: 400;
    color: #EDEDED;
}

.padding-1 {
    padding-bottom: 33px;
}

.podzag-01 {
    text-align: left;
    font-size: 1.935em;
    font-weight: 400;
    width: 750px;
    padding-left: 37px;
    padding-top: 35px;
}

/* О нас */

.po_centru {
    padding-left: calc(50% - 720px);
    padding-right: calc(50% - 720px);
}

.fon-darkgrey {
    background-color: #1D1D1D;
}

.box-2 {
    display: grid;
    grid-template-columns : 1fr 2fr;
    gap: 20px;
    padding-top: 150px;
    padding-bottom: 150px;
    color: #737373;
}

.figura-box {
    position: relative;
}

.figura-1 {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 36%;
    height: auto;
}

.box-2-2 {
    padding-right: 40px;
    padding-left: 10px;
}

.foto-office {
    padding-top: 150px;
    width: auto;
    height: auto;
}

.zag {
    font-size: 1.935em;
    font-weight: 400;
    padding-right: 10px;
}



/* Производство */

.box-3-proiz {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 100vh;
    color: #EDEDED;
}

.foto-proiz {
    padding-top: 70px;
    width: auto;
    height: auto;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.grid-3 {
    display: grid;
    grid-template-columns : 1fr 1fr 1fr;
    gap: 20px;
}

.box-3-2 {
    width: 100%;
}

.foto-size {
    width: 100%;
    margin-bottom: 43px;
}

.podzag-02 {
    width: 100%;
    font-size: 1.25em;
    font-weight: 400;
    color: #737373;
}

.zag-proiz {
    font-size: 1.5em;
    font-weight: 400;
    color: #EDEDED;
}

.catalog {
    padding-top: 70px;
}

.grid-3-catalog {
    display: grid;
    gap: 10px;
    padding-top: 70px;
    padding-bottom: 150px;
    
    grid-template-areas: 
    "A B C"
    "A D E";
}

.grid-box-a {
    grid-area: A;
}

.grid-foto {
    height: 100%;
    width: auto;
}

.grid-box-b {
    grid-area: B;
}

.grid-box-c {
    grid-area: C;
}

.grid-box-d {
    grid-area: D;
}

.grid-box-e {
    grid-area: E;
    align-content : end;
}

.grid-3-catalog-2 {
    display: grid;
    gap: 10px;
    padding-top: 70px;
    padding-bottom: 150px;
    
    grid-template-areas: 
    "A B C"
    "D B E";
}

.grid-box-a2 {
    grid-area: A;
}

.grid-box-b2 {
    grid-area: B;
}

.grid-box-c2 {
    grid-area: C;
}

.grid-box-d2 {
    grid-area: D;
}

.grid-box-e2 {
    grid-area: E;
    align-content : end;
}

.link-catalog {
    display: block;
    overflow: hidden;
}


.link-catalog img {
    position: relative;
    width: 100%;
    filter: opacity(85%);
}

.link-catalog img:hover {
    transform: scale(1.05);
    filter: none;
    transition: 1s;
}

.ellipse {
    border-radius: 50%;
}

.skewed {
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

/* Люксы */

.grid-2-lux {
    display: grid;
    gap: 10px;
    padding-top: 70px;
    padding-bottom: 150px;
    grid-template-areas: 
    "A A B B B B"
    "C C C D D D"
    "E E E E F F"
    "G G H H H H"
    "I I I I J J";
}

.grid-lux-box-A {
    grid-area: A;
}

.grid-lux-box-B {
    grid-area: B;
}

.grid-lux-box-C {
    grid-area: C;
}

.grid-lux-box-D {
    grid-area: D;
}

.grid-lux-box-E {
    grid-area: E;
}

.grid-lux-box-F {
    grid-area: F;
}

.grid-lux-box-G {
    grid-area: G;
}

.grid-lux-box-H {
    grid-area: H;
}

.grid-lux-box-I {
    grid-area: I;
}

.grid-lux-box-J {
    grid-area: J;
    align-content : end;
}

.podzag-03 {
    color: #EDEDED;
    text-align: left;
    font-size: 1.5em;
    font-weight: 400;
}

.grid-4 {
    display: grid;
    grid-template-columns : 1fr 1fr 1fr 1fr;
    gap: 10px;
    padding-top: 70px;
    padding-bottom: 150px;
}

.footer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 110px;
}

.footer-2 {
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.footer-3 {
    display: block;
    padding-bottom: 13px;
    padding-right: 80px;
}

.logo-2 {
    width: 162px;
    height: auto;
    padding-bottom: 20px;
    margin-right: 70px;
}

.logo-3 {
    width: 106px;
    height: auto;
    padding-bottom: 20px;
    position: relative;
    top: -5px;
}

.podzag-04 {
    width: 100%;
    font-size: 1.935em;
    font-weight: 400;
    color: #ededed;
    padding-bottom: 2px;
}


/* 1240 */

@media (max-width: 1240px) {
    
    .po_centru {
        max-width: 100%;
    }
    
    .grid-2-lux {
        padding-bottom: 100px;
    }
    
    .grid-3-catalog {
        padding-bottom: 100px;
    }
    
    .grid-3 {
        gap: 10px;
    }
    
    .zag {
        font-size: 1.75em;
    }
    
    .box-3-proiz {
        height: auto;
        padding-top: 100px;
        padding-bottom: 100px;
    }
    
}

/* 1180 */

@media (max-width: 1180px) {
    
    .box-2-2 {
        padding-right: 10px;
    }
    
    .zag-proiz {
        font-size: 1.25em;
    }
    
    .zag {
        font-size: 1.5em;
    }
    
}

/* 980 */

@media (max-width: 980px) {
    
    
    .zag-01 {
        font-size: 6em;
        line-height: 120%;
        text-align: left;
    }
    
    .podzag-01 {
        padding-left: 0px;
        width: auto;
    }
    
    .box-1-2 {
        width: 80%;
    }
    
    .foto-office {
        padding-top: 10px;
    }
    
    .box-2 {
        padding-top: 100px;
    }
    
    .grid-3 {
        display: block; 
        padding: 10px;
    }
    
    .box-3-2 {
        padding-bottom: 70px;
    }
    
    .podzag-02 {
        width: auto;
        font-size: 1.5em;
    }
    
    .grid-3-catalog {
        grid-template-areas: 
        "A B"
        "A C"
        "D E";
    }
    
    .grid-3-catalog-2 {
        grid-template-areas: 
        "A B"
        "C B"
        "D E";
    }
    
    .grid-2-lux {
        display: block;
    }
    
    .lux-hookah {
        padding-bottom: 10px;
    }
    
    .grid-lux-box-C {
        width: 70%;
        height: auto;
        margin-left: 30%;
        margin-bottom: -6%;
    }
    
    .grid-lux-box-D {
        width: 70%;
        height: auto;
    }
    
    .none-2 {
        display: none;
    }
    
    .grid-4 {
        grid-template-columns: 1fr 1fr 1fr;
    }
    
    .none {
        display: none;
    }
    
    .link-black-box {
        display: block;
        text-align: center;
        width: 50%;
        height: auto;
    }
    
    .podzag-04 {
        font-size: 1.5em;
    }
    
    .logo-2 {
        width: 145px;
        margin-right: 50px;
    }
    
    .logo-3 {
        width: 104px;
        padding-bottom: 15px;
    }
    
}

/* 850 */

@media (max-width: 850px) {
    
    .zag-01 {
        font-size: 5em;
    }
    
}

/* 780 */

@media (max-width: 780px) {
    
    .podzag-01 {
        font-size: 1.5em;
        width: 100%;
        padding-top: 17px;
    }
    
    .box-2 {
        display: block;
    }
    
    .zag-02 {
        padding-left: 10px;
    }
    
    .foto-office {
        text-align: center;
    }
    
    .zag {
        padding-top: 60px;
        padding-left: 10px;
    }
    
    .box-3-proiz {
        padding-bottom: 0px;
    }
    
    .grid-3-catalog {
        gap: 5px;
    }
    
    .grid-4 {
        gap: 5px;
    }
    
    .footer-3 {
        padding-bottom: 16px;
        padding-right: 50px;
    }
    
}

/* 708 */

@media (max-width: 708px) {
    
    .zag-01 {
        font-size: 4em;
    }

}

@media (max-width: 660px) {
    
    .zag-01 {
        font-size: 3.5em;
    }
    
    .box-3-proiz {
        padding-bottom: 50px;
    }
    
    .footer-2 {
        display: block;
    }
    
    .footer-3 {
        padding-right: 0px;
        padding-bottom: 85px;
    }
    
    .logo-3 {
        position: relative;
        top: -33px;
    }
    
}

@media (max-width: 480px) {
    
    .s_seti {
        width: auto;
    }
    
    .icon-ss {
        font-size: 1em;
    }
    
    .number {
        font-size: 0.8em;
    }
    
    .icon-ss:not(:last-child) {
        padding-right: 10px;
    }
    
    .zag {
        font-size: 1em;
    }
    
    .zag-01 {
        font-size: 2.25em;
    }
    
    .podzag-01 {
        font-size: 1.125em;
    }
    
    .box-2 {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    
    .zag-proiz {
        font-size: 1.25em;
    }
    
    .podzag-02 {
        font-size: 1em;
    }
    
    .logo-2 {
        width: 120px;
        margin-right: 40px;
    }
    
    .logo-3 {
        width: 72px;
        top: -13px;
    }
    
    .podzag-03 {
        font-size: 1em;
    }
    
}

@media (max-width: 400px) {
    
    .icon-ss:not(:last-child) {
        padding-right: 5px;
    }
    
    .podzag-02 {
        padding: 0px 20px;
    }
    
    
}

@media (max-width: 360px) {
    
    
    .zag-01 {
        font-size: 2em;
    }
    
    .podzag-01 {
        font-size: 1em;
    }
    
    .icon-ss {
        font-size: 0.8em;
    }
    
    .icon-ss:not(:last-child) {
        padding-right: 5px;
    }
    
    .logo {
        height: 9px;
    }
    
    .zag-02 {
        font-size: 2em;
    }
    
}