.container { margin: 0 auto; width: 1280px; position: relative; } @media (min-width: 1720px) { .container { width: 1720px; } } @media (max-width: 1304.98px) { .container { width: 1120px; max-width: 88vw; } } @media (max-width: 991.98px) { .container { width: 640px; max-width: 100vw; } } @media (max-width: 767.98px) { .container { margin: 0 16px; width: auto; } } :root { --color-primary: #FF613A; --color-white: #FFFFFF; --color-black: #000000; --color-black2: #272424; --color-grey: #F1F1F1; --color-grey2: #7A7979; --color-orange: #FF613A; --box-shadow-primary: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), 0 -1px 10px 0 rgba(198, 199, 203, 0.20); text-align: center; color: var(--color-black2); } html, body { max-width: 100vw; //overflow-x: hidden; max-height: initial; } body { height: 100%; position: relative; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 700; } h1, .h1 { font-size: 44px; line-height: 52px; @media (min-width: 1720px) { font-size: 48px; line-height: 52px; } } h2, .h2 { font-size: 24px; line-height: 36px; margin-bottom: 10px; @media (min-width: 1720px) { font-size: 28px; margin-bottom: 20px; } } h3, .h3 { font-size: 20px; line-height: 28px; margin-bottom: 12px; @media (max-width: 1304.98px) { margin-bottom: 13px; } } h4, .h4 { font-size: 18px; line-height: 26px; margin-bottom: 20px; } p { line-height: 22px; margin-bottom: 20px; @media (min-width: 1720px) { font-size: 20px; line-height: 26px; } @media (max-width: 991.98px) { margin-bottom: 18px; } @media (max-width: 479.98px) { margin-bottom: 14px; } } b { font-weight: 500; @media (max-width: 991.98px) { font-size: 16px; line-height: 22px; } } .btn { display: inline-flex; text-decoration: none; color: black; line-height: 22px; border-radius: 10px; padding: 20px 76px 18px; justify-content: center; align-items: center; margin: 0 3px; letter-spacing: 0.2px; font-size: 18px; } .btn--primary { background: var(--color-primary); color: var(--color-white); } .title { font-size: 44px; font-weight: 700; line-height: 52px; margin-bottom: 13px; margin-left: auto; margin-right: auto; @media (min-width: 1720px) { font-size: 48px; margin-bottom: 22px; } @media (max-width: 1304.98px) { margin-bottom: 20px; } @media (max-width: 991.98px) { font-size: 32px; line-height: 38.73px; } @media (max-width: 767.98px) { margin-bottom: 14px; } } .subtitle { margin-bottom: 81px; line-height: 22px; @media (min-width: 1720px) { font-size: 20px; margin-bottom: 105px; } @media (max-width: 1304.98px) { margin-bottom: 71px; } } .hide { display: none; &__xxl { display: inline-flex; @media (min-width: 1720px) { display: none; } } &__md { @media (max-width: 991.98px) { display: none; } } &__xs { @media (max-width: 479.98px) { display: none; } } } .show { &__xxl { display: none; @media (min-width: 1720px) { display: block; } } &__md { display: none; @media (max-width: 991.98px) { display: initial; } } &__xs { @media (min-width: 480px) { display: none; } } } .br { &--xxl { @media (min-width: 1440px) { display: none; } } &--md { @media (max-width: 991.98px) { display: none; } } &--sm { @media (max-width: 767.98px) { display: none; } } } .is-container.wrapper_main { overflow-x: hidden; > .container { padding-top: 129px; @media (max-width: 1304.98px) { padding-top: 126px; } @media (max-width: 991.98px) { padding-top: 85px; } @media (max-width: 767.98px) { padding-top: 57px; } } @media (min-width: 1440px) { max-width: initial; } & > .container { position: relative; left: 15px; @media (min-width: 1720px) { left: 17px; } @media (max-width: 767.98px) { left: 0; } } }