From 3fa2f328a51e9c8cee05c52bc0c50aa738e4a865 Mon Sep 17 00:00:00 2001 From: Andrii-Moshenskyi Date: Fri, 22 Jan 2021 15:11:18 +0200 Subject: Fix the bug of styling lists --- sass/main.sass | 16 +- site/css/main.css | 1457 +++++++++++++++++++++++++++++++---------------------- 2 files changed, 850 insertions(+), 623 deletions(-) diff --git a/sass/main.sass b/sass/main.sass index ece16ef..7c5ba66 100644 --- a/sass/main.sass +++ b/sass/main.sass @@ -70,23 +70,25 @@ div.container +resp(esm) margin: 9px 0 ul + list-style: none +resp(sm) padding-left: 25px +resp(esm) padding-left: 15px li - list-style: none - display: flex - align-items: center - margin: 12px 0 + padding-left: 25px + margin: 16px 0 line-height: 150% +resp(esm) font-size: 14px - margin: 10px 0 + margin: 13px 0 &:before - margin-top: 4px - margin-right: 10px + position: absolute + margin-top: 1px + margin-left: -25px content: url('../img/global/list-element.svg') + +resp(esm) + margin-top: 2px a color: $dark-orange &:hover diff --git a/site/css/main.css b/site/css/main.css index 67dbe75..458b9b6 100644 --- a/site/css/main.css +++ b/site/css/main.css @@ -1,229 +1,304 @@ body { font-family: sans-serif; margin: 0; - color: #18191C; } + color: #18191C; +} h1, h2, h3, h4, h5, p, ul, li { - margin: 0; } + margin: 0; +} h1 { font-weight: 800; font-size: 45px; line-height: 120%; letter-spacing: 0.02em; - color: #18191C; } - @media only screen and (max-width: 767px) { - h1 { - font-size: 32px; } } - @media only screen and (max-width: 575px) { - h1 { - font-size: 28px; } } + color: #18191C; +} +@media only screen and (max-width: 767px) { + h1 { + font-size: 32px; + } +} +@media only screen and (max-width: 575px) { + h1 { + font-size: 28px; + } +} h2 { font-weight: 800; font-size: 32px; - line-height: 140%; } - @media only screen and (max-width: 767px) { - h2 { - font-size: 21px; } } + line-height: 140%; +} +@media only screen and (max-width: 767px) { + h2 { + font-size: 21px; + } +} p { font-weight: normal; line-height: 180%; font-size: 16px; - color: #18191C; } - @media only screen and (max-width: 575px) { - p { - font-size: 14px; } } - @supports ((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) { - p { - text-align: justify; - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; } } + color: #18191C; +} +@media only screen and (max-width: 575px) { + p { + font-size: 14px; + } +} +@supports ((-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto)) { + p { + text-align: justify; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; + } +} pre, code, sample { white-space: pre-wrap; -webkit-hyphens: none; -ms-hyphens: none; - hyphens: none; } + hyphens: none; +} div.container { max-width: 1340px; margin: 0 auto; padding-left: 15px; - padding-right: 15px; } - div.container.small { - max-width: 1000px; } + padding-right: 15px; +} +div.container.small { + max-width: 1000px; +} #content { padding-top: 60px; - padding-bottom: 50px; } - @media only screen and (max-width: 767px) { - #content { - padding-top: 40px; - padding-bottom: 20px; } } - @media only screen and (max-width: 575px) { - #content { - padding-top: 30px; } } + padding-bottom: 50px; +} +@media only screen and (max-width: 767px) { + #content { + padding-top: 40px; + padding-bottom: 20px; + } +} +@media only screen and (max-width: 575px) { + #content { + padding-top: 30px; + } +} +#content h1 { + margin-bottom: 25px; +} +@media only screen and (max-width: 575px) { #content h1 { - margin-bottom: 25px; } - @media only screen and (max-width: 575px) { - #content h1 { - margin-bottom: 15px; } } + margin-bottom: 15px; + } +} +#content h2 { + margin-top: 25px; + margin-bottom: 20px; +} +@media only screen and (max-width: 575px) { #content h2 { - margin-top: 25px; - margin-bottom: 20px; } - @media only screen and (max-width: 575px) { - #content h2 { - margin-top: 20px; - margin-bottom: 15px; } } + margin-top: 20px; + margin-bottom: 15px; + } +} +#content p { + margin: 15px 0; +} +@media only screen and (max-width: 575px) { #content p { - margin: 15px 0; } - @media only screen and (max-width: 575px) { - #content p { - margin: 9px 0; } } - @media only screen and (max-width: 767px) { - #content ul { - padding-left: 25px; } } - @media only screen and (max-width: 575px) { - #content ul { - padding-left: 15px; } } + margin: 9px 0; + } +} +#content ul { + list-style: none; +} +@media only screen and (max-width: 767px) { + #content ul { + padding-left: 25px; + } +} +@media only screen and (max-width: 575px) { + #content ul { + padding-left: 15px; + } +} +#content ul li { + padding-left: 25px; + margin: 16px 0; + line-height: 150%; +} +@media only screen and (max-width: 575px) { #content ul li { - list-style: none; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - margin: 12px 0; - line-height: 150%; } - @media only screen and (max-width: 575px) { - #content ul li { - font-size: 14px; - margin: 10px 0; } } - #content ul li:before { - margin-top: 4px; - margin-right: 10px; - content: url("../img/global/list-element.svg"); } - #content a { - color: #FD8F01; } - #content a:hover { - text-decoration: none; } + font-size: 14px; + margin: 13px 0; + } +} +#content ul li:before { + position: absolute; + margin-top: 1px; + margin-left: -25px; + content: url("../img/global/list-element.svg"); +} +@media only screen and (max-width: 575px) { + #content ul li:before { + margin-top: 2px; + } +} +#content a { + color: #FD8F01; +} +#content a:hover { + text-decoration: none; +} header { background: #ffffff; -webkit-box-shadow: 0px 5px 20px rgba(0, 56, 79, 0.07); box-shadow: 0px 5px 20px rgba(0, 56, 79, 0.07); padding: 20px 0; - position: relative; } - @media only screen and (max-width: 991px) { - header { - padding: 15px 0; - position: -webkit-sticky; - position: sticky; - top: 0; - z-index: 2; } } - @media only screen and (max-width: 575px) { - header { - padding: 10px 0; } } + position: relative; +} +@media only screen and (max-width: 991px) { + header { + padding: 15px 0; + position: -webkit-sticky; + position: sticky; + top: 0; + z-index: 2; + } +} +@media only screen and (max-width: 575px) { + header { + padding: 10px 0; + } +} +header div.header__inner { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} +@media only screen and (max-width: 767px) { header div.header__inner { + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + } +} +header div.header__inner div.header__logo-side { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +header div.header__inner div.header__logo-side a.header__logo { + display: inherit; + margin-right: 30px; +} +@media only screen and (max-width: 1199px) { + header div.header__inner div.header__logo-side a.header__logo { + margin-right: 16px; + } +} +header div.header__inner div.header__logo-side div.header__text { + font-weight: 500; + font-size: 16px; + line-height: 25px; +} +@media only screen and (max-width: 767px) { + header div.header__inner div.header__logo-side div.header__text { + display: none; + } +} +header div.header__inner div.header__logo-side div.header__text p { + font-size: 16px; + color: #ACACAD; + text-align: left; +} +@media only screen and (max-width: 991px) { + header div.header__inner div.header__logo-side div.header__text p { + display: none; + } +} +header div.header__inner div.header__links-side { + display: grid; + grid-template-columns: 1fr auto auto auto; + grid-gap: 31px; + justify-items: center; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +@media only screen and (max-width: 1199px) { + header div.header__inner div.header__links-side { + grid-gap: 20px; + text-align: center; + } +} +@media only screen and (max-width: 767px) { + header div.header__inner div.header__links-side { + display: none; + } +} +header div.header__inner div.header__links-side a { + font-weight: 600; + font-size: 15px; + line-height: 14px; + text-transform: uppercase; + text-decoration: none; + color: #18191C; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; +} +@media only screen and (max-width: 1199px) { + header div.header__inner div.header__links-side a { + font-size: 14px; + } +} +header div.header__inner div.header__links-side a:hover { + color: #FFBE12; +} +header div.header__inner div.header__mobile-menu__buttons { + height: 100%; + width: 30px; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + display: none; +} +@media only screen and (max-width: 767px) { + header div.header__inner div.header__mobile-menu__buttons { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; } - @media only screen and (max-width: 767px) { - header div.header__inner { - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } } - header div.header__inner div.header__logo-side { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - header div.header__inner div.header__logo-side a.header__logo { - display: inherit; - margin-right: 30px; } - @media only screen and (max-width: 1199px) { - header div.header__inner div.header__logo-side a.header__logo { - margin-right: 16px; } } - header div.header__inner div.header__logo-side div.header__text { - font-weight: 500; - font-size: 16px; - line-height: 25px; } - @media only screen and (max-width: 767px) { - header div.header__inner div.header__logo-side div.header__text { - display: none; } } - header div.header__inner div.header__logo-side div.header__text p { - font-size: 16px; - color: #ACACAD; - text-align: left; } - @media only screen and (max-width: 991px) { - header div.header__inner div.header__logo-side div.header__text p { - display: none; } } - header div.header__inner div.header__links-side { - display: grid; - grid-template-columns: 1fr auto auto auto; - grid-gap: 31px; - justify-items: center; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - @media only screen and (max-width: 1199px) { - header div.header__inner div.header__links-side { - grid-gap: 20px; - text-align: center; } } - @media only screen and (max-width: 767px) { - header div.header__inner div.header__links-side { - display: none; } } - header div.header__inner div.header__links-side a { - font-weight: 600; - font-size: 15px; - line-height: 14px; - text-transform: uppercase; - text-decoration: none; - color: #18191C; - -webkit-transition: 0.3s; - -o-transition: 0.3s; - transition: 0.3s; } - @media only screen and (max-width: 1199px) { - header div.header__inner div.header__links-side a { - font-size: 14px; } } - header div.header__inner div.header__links-side a:hover { - color: #FFBE12; } - header div.header__inner div.header__mobile-menu__buttons { - height: 100%; - width: 30px; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - display: none; } - @media only screen and (max-width: 767px) { - header div.header__inner div.header__mobile-menu__buttons { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } } - header div.header__inner div.header__mobile-menu__buttons img { - cursor: pointer; - display: none; } - header div.header__inner div.header__mobile-menu__buttons img.active { - display: block; } + } +} +header div.header__inner div.header__mobile-menu__buttons img { + cursor: pointer; + display: none; +} +header div.header__inner div.header__mobile-menu__buttons img.active { + display: block; +} nav#mobile-menu { z-index: 1; @@ -233,23 +308,28 @@ nav#mobile-menu { position: fixed; left: 100%; background-color: #ffffff; - padding: 70px 15px; } - @media only screen and (max-width: 575px) { - nav#mobile-menu { - padding: 60px 15px; } } - nav#mobile-menu a { - display: block; - text-transform: uppercase; - color: #18191C; - text-decoration: none; - padding: 15px 0; - font-weight: 600; - -webkit-transition: 0.3s; - -o-transition: 0.3s; - transition: 0.3s; - border-bottom: 1px solid #e0e0e0; } - nav#mobile-menu a:hover { - color: #FFBE12; } + padding: 70px 15px; +} +@media only screen and (max-width: 575px) { + nav#mobile-menu { + padding: 60px 15px; + } +} +nav#mobile-menu a { + display: block; + text-transform: uppercase; + color: #18191C; + text-decoration: none; + padding: 15px 0; + font-weight: 600; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; + border-bottom: 1px solid #e0e0e0; +} +nav#mobile-menu a:hover { + color: #FFBE12; +} section.banner { background-image: url("/img/front-page/banner/banner-bg.svg"); @@ -257,236 +337,313 @@ section.banner { background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; - padding: 77px 0 87px; } - @media only screen and (max-width: 767px) { - section.banner { - background-image: url("/img/front-page/banner/banner-bg-sm.svg"); - padding: 45px 0 0; } } - @media only screen and (max-width: 767px) { - section.banner div.sm-none { - padding: 0; } } + padding: 77px 0 87px; +} +@media only screen and (max-width: 767px) { + section.banner { + background-image: url("/img/front-page/banner/banner-bg-sm.svg"); + padding: 45px 0 0; + } +} +@media only screen and (max-width: 767px) { + section.banner div.sm-none { + padding: 0; + } +} +section.banner div.banner__text-button { + max-width: 50%; +} +@media only screen and (max-width: 991px) { section.banner div.banner__text-button { - max-width: 50%; } - @media only screen and (max-width: 991px) { - section.banner div.banner__text-button { - max-width: 60%; } } - @media only screen and (max-width: 767px) { - section.banner div.banner__text-button { - margin-bottom: 23px; - max-width: 100%; } } - section.banner div.banner__text-button h1 { - padding-bottom: 57px; } - @media only screen and (max-width: 767px) { - section.banner div.banner__text-button h1 { - text-align: center; - padding-bottom: 51%; - padding-left: 20px; - padding-right: 20px; } } - @media only screen and (max-width: 767px) { - section.banner div.banner__text-button div.banner__btn_container { - background-color: #ffffff; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - padding-left: 20px; - padding-right: 20px; } } - section.banner div.banner__text-button div.banner__btn_container a { - max-width: 311px; - width: 100%; - height: 58px; - background: #18191C; - border: 1px solid #18191C; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - margin-top: 23px; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - font-weight: 700; - font-size: 16px; - line-height: 15px; - color: #ffffff; - text-decoration: none; - -webkit-transition: 0.3s; - -o-transition: 0.3s; - transition: 0.3s; } - @media only screen and (max-width: 767px) { - section.banner div.banner__text-button div.banner__btn_container a { - height: 38px; - font-size: 14px; } } - section.banner div.banner__text-button div.banner__btn_container a:hover { - background: #ffffff; - color: #18191C; } + max-width: 60%; + } +} +@media only screen and (max-width: 767px) { + section.banner div.banner__text-button { + margin-bottom: 23px; + max-width: 100%; + } +} +section.banner div.banner__text-button h1 { + padding-bottom: 57px; +} +@media only screen and (max-width: 767px) { + section.banner div.banner__text-button h1 { + text-align: center; + padding-bottom: 51%; + padding-left: 20px; + padding-right: 20px; + } +} +@media only screen and (max-width: 767px) { + section.banner div.banner__text-button div.banner__btn_container { + background-color: #ffffff; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding-left: 20px; + padding-right: 20px; + } +} +section.banner div.banner__text-button div.banner__btn_container a { + max-width: 311px; + width: 100%; + height: 58px; + background: #18191C; + border: 1px solid #18191C; + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + margin-top: 23px; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + font-weight: 700; + font-size: 16px; + line-height: 15px; + color: #ffffff; + text-decoration: none; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; +} +@media only screen and (max-width: 767px) { + section.banner div.banner__text-button div.banner__btn_container a { + height: 38px; + font-size: 14px; + } +} +section.banner div.banner__text-button div.banner__btn_container a:hover { + background: #ffffff; + color: #18191C; +} section.main-text { max-width: 884px; margin-left: auto; margin-right: auto; padding: 143px 0; - text-align: center; } - @media only screen and (max-width: 1199px) { - section.main-text { - padding: 143px 0; } } - @media only screen and (max-width: 991px) { - section.main-text { - padding: 90px 0; } } - @media only screen and (max-width: 767px) { - section.main-text { - padding: 0 0 55px; } } + text-align: center; +} +@media only screen and (max-width: 1199px) { + section.main-text { + padding: 143px 0; + } +} +@media only screen and (max-width: 991px) { + section.main-text { + padding: 90px 0; + } +} +@media only screen and (max-width: 767px) { + section.main-text { + padding: 0 0 55px; + } +} +section.main-text p { + font-size: 18px; +} +@media only screen and (max-width: 767px) { + section.main-text p { + font-size: 16px; + } +} +@media only screen and (max-width: 575px) { section.main-text p { - font-size: 18px; } - @media only screen and (max-width: 767px) { - section.main-text p { - font-size: 16px; } } - @media only screen and (max-width: 575px) { - section.main-text p { - font-size: 14px; } } + font-size: 14px; + } +} section.inform-columns div.inform-column__inner { display: grid; grid-template-columns: 1fr 1fr; - grid-gap: 23px 30px; } - @media only screen and (max-width: 1199px) { - section.inform-columns div.inform-column__inner { - grid-gap: 20px; } } - @media only screen and (max-width: 1199px) and (max-width: 767px) { - section.inform-columns div.inform-column__inner { - grid-template-columns: 1fr; } } + grid-gap: 23px 30px; +} +@media only screen and (max-width: 1199px) { + section.inform-columns div.inform-column__inner { + grid-gap: 20px; + } +} +@media only screen and (max-width: 1199px) and (max-width: 767px) { + section.inform-columns div.inform-column__inner { + grid-template-columns: 1fr; + } +} +section.inform-columns div.inform-column__inner div.inform-column__item { + background: #F3F4F4; + display: grid; + grid-template-rows: auto 1fr auto; + grid-gap: 40px; + padding: 48px 54px 59px; +} +@media only screen and (max-width: 991px) { + section.inform-columns div.inform-column__inner div.inform-column__item { + grid-gap: 25px; + padding: 30px 25px; + } +} +@media only screen and (max-width: 767px) { section.inform-columns div.inform-column__inner div.inform-column__item { - background: #F3F4F4; - display: grid; - grid-template-rows: auto 1fr auto; - grid-gap: 40px; - padding: 48px 54px 59px; } - @media only screen and (max-width: 991px) { - section.inform-columns div.inform-column__inner div.inform-column__item { - grid-gap: 25px; - padding: 30px 25px; } } - @media only screen and (max-width: 767px) { - section.inform-columns div.inform-column__inner div.inform-column__item { - padding: 30px 24px 40px; - grid-gap: 15px; - grid-template-rows: auto 1fr 65px; } } - section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__icon { - padding-right: 19px; } - section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__title h3 { - font-weight: bold; - font-size: 28px; - line-height: 150%; - letter-spacing: 0.02em; - color: #000000; } - @media only screen and (max-width: 767px) { - section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__title h3 { - font-size: 21px; } } - section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p { - text-align: left; - margin-bottom: 29px; - font-size: 16px; } - @media only screen and (max-width: 991px) { - section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p { - margin-bottom: 20px; } } - section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p:last-child { - margin-bottom: 10px; } - @media only screen and (max-width: 767px) { - section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p:last-child { - margin-bottom: 0; } } - @media only screen and (max-width: 767px) { - section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p { - line-height: 180%; - font-size: 14px; - margin-bottom: 25px; } } - @media only screen and (max-width: 767px) { - section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button { - -webkit-align-self: end; - -ms-flex-item-align: end; - align-self: end; } } - section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn { - max-width: 291px; - padding: 10px; - min-height: 38px; - color: #18191C !important; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - text-align: center; - background: #FFBE12; - border: 1px solid #FFBE12; - font-weight: 700; - font-size: 16px; - color: #18191C; - text-decoration: none; - -webkit-transition: 0.3s; - -o-transition: 0.3s; - transition: 0.3s; - line-height: 1.5; } - @media only screen and (max-width: 767px) { - section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn { - min-height: 28px; - font-size: 14px; } } - section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn:hover { - background: #ffffff; } + padding: 30px 24px 40px; + grid-gap: 15px; + grid-template-rows: auto 1fr 65px; + } +} +section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__icon { + padding-right: 19px; +} +section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__title h3 { + font-weight: bold; + font-size: 28px; + line-height: 150%; + letter-spacing: 0.02em; + color: #000000; +} +@media only screen and (max-width: 767px) { + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__header div.inform-column__title h3 { + font-size: 21px; + } +} +section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p { + text-align: left; + margin-bottom: 29px; + font-size: 16px; +} +@media only screen and (max-width: 991px) { + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p { + margin-bottom: 20px; + } +} +section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p:last-child { + margin-bottom: 10px; +} +@media only screen and (max-width: 767px) { + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p:last-child { + margin-bottom: 0; + } +} +@media only screen and (max-width: 767px) { + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__data p { + line-height: 180%; + font-size: 14px; + margin-bottom: 25px; + } +} +@media only screen and (max-width: 767px) { + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button { + -webkit-align-self: end; + -ms-flex-item-align: end; + align-self: end; + } +} +section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn { + max-width: 291px; + padding: 10px; + min-height: 38px; + color: #18191C !important; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + text-align: center; + background: #FFBE12; + border: 1px solid #FFBE12; + font-weight: 700; + font-size: 16px; + color: #18191C; + text-decoration: none; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; + line-height: 1.5; +} +@media only screen and (max-width: 767px) { + section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn { + min-height: 28px; + font-size: 14px; + } +} +section.inform-columns div.inform-column__inner div.inform-column__item div.inform-column__button a.inform-column__btn:hover { + background: #ffffff; +} .bottom-text__inner { padding: 138px 0 182px; max-width: 657px; margin-left: auto; text-align: center; - margin-right: auto; } - @media only screen and (max-width: 1199px) { - .bottom-text__inner { - padding: 138px 250px 182px; } } - @media only screen and (max-width: 991px) { - .bottom-text__inner { - padding: 90px 50px 126px; } } - @media only screen and (max-width: 767px) { - .bottom-text__inner { - padding: 56px 50px 64px; } } - @media only screen and (max-width: 575px) { - .bottom-text__inner { - padding: 56px 20px 64px; } } + margin-right: auto; +} +@media only screen and (max-width: 1199px) { + .bottom-text__inner { + padding: 138px 250px 182px; + } +} +@media only screen and (max-width: 991px) { + .bottom-text__inner { + padding: 90px 50px 126px; + } +} +@media only screen and (max-width: 767px) { + .bottom-text__inner { + padding: 56px 50px 64px; + } +} +@media only screen and (max-width: 575px) { + .bottom-text__inner { + padding: 56px 20px 64px; + } +} +.bottom-text__inner h2 { + padding-bottom: 25px; +} +@media only screen and (max-width: 767px) { .bottom-text__inner h2 { - padding-bottom: 25px; } - @media only screen and (max-width: 767px) { - .bottom-text__inner h2 { - padding-bottom: 0; } } + padding-bottom: 0; + } +} +.bottom-text__inner p { + font-size: 18px; +} +@media only screen and (max-width: 767px) { + .bottom-text__inner p { + font-size: 16px; + } +} +@media only screen and (max-width: 575px) { .bottom-text__inner p { - font-size: 18px; } - @media only screen and (max-width: 767px) { - .bottom-text__inner p { - font-size: 16px; } } - @media only screen and (max-width: 575px) { - .bottom-text__inner p { - font-size: 14px; } } + font-size: 14px; + } +} footer div.footer__inner div.footer__logo-society { display: grid; @@ -495,35 +652,42 @@ footer div.footer__inner div.footer__logo-society { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; - align-items: center; } - @media only screen and (max-width: 767px) { - footer div.footer__inner div.footer__logo-society { - display: none; } } - footer div.footer__inner div.footer__logo-society div.footer__hr { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; } - footer div.footer__inner div.footer__logo-society div.footer__hr img { - margin-bottom: 10px; - width: 100%; } - @media only screen and (max-width: 991px) { - footer div.footer__inner div.footer__logo-society div.footer__hr img { - border-bottom: 1px solid #E0DFDF; } } - footer div.footer__inner div.footer__logo-society div.footer__socials { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; - padding-left: 6px; } - + align-items: center; +} +@media only screen and (max-width: 767px) { + footer div.footer__inner div.footer__logo-society { + display: none; + } +} +footer div.footer__inner div.footer__logo-society div.footer__hr { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; +} +footer div.footer__inner div.footer__logo-society div.footer__hr img { + margin-bottom: 10px; + width: 100%; +} +@media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__logo-society div.footer__hr img { + border-bottom: 1px solid #E0DFDF; + } +} +footer div.footer__inner div.footer__logo-society div.footer__socials { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + padding-left: 6px; +} footer div.footer__inner div.footer__links-trustpilot { display: -webkit-box; display: -webkit-flex; @@ -533,90 +697,128 @@ footer div.footer__inner div.footer__links-trustpilot { -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - margin-top: 36px; } - @media only screen and (max-width: 767px) { - footer div.footer__inner div.footer__links-trustpilot { - display: none; } } + margin-top: 36px; +} +@media only screen and (max-width: 767px) { + footer div.footer__inner div.footer__links-trustpilot { + display: none; + } +} +footer div.footer__inner div.footer__links-trustpilot div.footer__links { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} +@media only screen and (max-width: 991px) { footer div.footer__inner div.footer__links-trustpilot div.footer__links { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - @media only screen and (max-width: 991px) { - footer div.footer__inner div.footer__links-trustpilot div.footer__links { - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } } - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column { - display: grid; - grid-template-rows: auto 1fr; - margin-right: 48px; } - @media only screen and (max-width: 1199px) { - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column { - margin-right: 28px; } } - @media only screen and (max-width: 991px) { - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column { - margin: 0 0 30px; - grid-template-rows: 34px 1fr; } } - @media only screen and (max-width: 1199px) { - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(1) { - width: 16%; } } - @media only screen and (max-width: 991px) { - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(1) { - width: 40%; } } - @media only screen and (max-width: 1199px) { - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(2) { - width: 18%; } } - @media only screen and (max-width: 991px) { - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(2) { - width: 60%; } } - @media only screen and (max-width: 1199px) { - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(3) { - width: 20%; } } - @media only screen and (max-width: 991px) { - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(3) { - width: 40%; } } - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) { - margin-right: 0; } - @media only screen and (max-width: 1199px) { - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) { - width: 32%; } } - @media only screen and (max-width: 991px) { - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) { - width: 60%; } } - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column h3 { - font-weight: 600; - font-size: 18px; - padding: 0 0 17px 0; - color: #18191C; } - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul { - padding-left: 0; - list-style: none; } - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li { - padding: 5px 0; } - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a { - list-style: none; - font-weight: normal; - font-size: 16px; - line-height: 1.7; - color: #747577; - text-decoration: none; } - @media only screen and (max-width: 991px) { - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a { - font-size: 14px; } } - footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a:hover { - color: #FFBE12; - text-decoration: underline; } + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } +} +footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column { + display: grid; + grid-template-rows: auto 1fr; + margin-right: 48px; +} +@media only screen and (max-width: 1199px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column { + margin-right: 28px; + } +} +@media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column { + margin: 0 0 30px; + grid-template-rows: 34px 1fr; + } +} +@media only screen and (max-width: 1199px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(1) { + width: 16%; + } +} +@media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(1) { + width: 40%; + } +} +@media only screen and (max-width: 1199px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(2) { + width: 18%; + } +} +@media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(2) { + width: 60%; + } +} +@media only screen and (max-width: 1199px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(3) { + width: 20%; + } +} +@media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(3) { + width: 40%; + } +} +footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) { + margin-right: 0; +} +@media only screen and (max-width: 1199px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) { + width: 32%; + } +} +@media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column:nth-child(4) { + width: 60%; + } +} +footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column h3 { + font-weight: 600; + font-size: 18px; + padding: 0 0 17px 0; + color: #18191C; +} +footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul { + padding-left: 0; + list-style: none; +} +footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li { + padding: 5px 0; +} +footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a { + list-style: none; + font-weight: normal; + font-size: 16px; + line-height: 1.7; + color: #747577; + text-decoration: none; +} +@media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a { + font-size: 14px; + } +} +footer div.footer__inner div.footer__links-trustpilot div.footer__links div.footer__column ul li a:hover { + color: #FFBE12; + text-decoration: underline; +} +footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot { + justify-self: end; + border-left: 1px solid #E0DFDF; + padding-left: 33px; +} +@media only screen and (max-width: 1199px) { footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot { - justify-self: end; - border-left: 1px solid #E0DFDF; - padding-left: 33px; } - @media only screen and (max-width: 1199px) { - footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot { - padding-left: 10px; } } - footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot div#tp-widget-wrapper { - margin: 0; } - + padding-left: 10px; + } +} +footer div.footer__inner div.footer__links-trustpilot div.footer__trustpilot div#tp-widget-wrapper { + margin: 0; +} footer div.footer__inner div.footer__developer { border-top: 1px solid #E0DFDF; display: -webkit-box; @@ -632,105 +834,128 @@ footer div.footer__inner div.footer__developer { -ms-flex-align: center; align-items: center; padding: 40px 0; - margin-top: 37px; } - @media only screen and (max-width: 767px) { - footer div.footer__inner div.footer__developer { - display: none; } } - footer div.footer__inner div.footer__developer div.footer__hosted { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - footer div.footer__inner div.footer__developer div.footer__hosted p { - font-weight: normal; - font-size: 13px; - line-height: 16px; - color: #ACACAD; - padding-right: 16px; } - @media only screen and (max-width: 991px) { - footer div.footer__inner div.footer__developer div.footer__hosted p { - padding-right: 8px; - display: none; } } - footer div.footer__inner div.footer__developer div.footer__rights { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; } - footer div.footer__inner div.footer__developer div.footer__rights p, footer div.footer__inner div.footer__developer div.footer__rights a { - font-weight: normal; - font-size: 15px; - line-height: 150%; - text-decoration: none; - color: #ACACAD; - padding-right: 30px; } - @media only screen and (max-width: 991px) { - footer div.footer__inner div.footer__developer div.footer__rights p, footer div.footer__inner div.footer__developer div.footer__rights a { - font-size: 14px; - padding-right: 22px; } } - footer div.footer__inner div.footer__developer div.footer__rights a:hover { - text-decoration: underline; - color: #FFBE12; } - + margin-top: 37px; +} +@media only screen and (max-width: 767px) { + footer div.footer__inner div.footer__developer { + display: none; + } +} +footer div.footer__inner div.footer__developer div.footer__hosted { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +footer div.footer__inner div.footer__developer div.footer__hosted p { + font-weight: normal; + font-size: 13px; + line-height: 16px; + color: #ACACAD; + padding-right: 16px; +} +@media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__developer div.footer__hosted p { + padding-right: 8px; + display: none; + } +} +footer div.footer__inner div.footer__developer div.footer__rights { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} +footer div.footer__inner div.footer__developer div.footer__rights p, footer div.footer__inner div.footer__developer div.footer__rights a { + font-weight: normal; + font-size: 15px; + line-height: 150%; + text-decoration: none; + color: #ACACAD; + padding-right: 30px; +} +@media only screen and (max-width: 991px) { + footer div.footer__inner div.footer__developer div.footer__rights p, footer div.footer__inner div.footer__developer div.footer__rights a { + font-size: 14px; + padding-right: 22px; + } +} +footer div.footer__inner div.footer__developer div.footer__rights a:hover { + text-decoration: underline; + color: #FFBE12; +} footer div.footer__inner div.footer__sm { - display: none; } - @media only screen and (max-width: 767px) { - footer div.footer__inner div.footer__sm { - display: block; } } - footer div.footer__inner div.footer__sm div.footer__sm__contant { - border-top: 1px solid #ACACAD; - padding: 32px 0 23px; } - footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__logos { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-align: center; - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; } - footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__society { - max-width: 200px; - margin: 24px auto 17px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; } - footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer p, footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer a { - font-weight: normal; - font-size: 13px; - line-height: 16px; - color: #747577; - opacity: 0.5; } - footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - margin-bottom: 19px; } - footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a { - text-decoration: none; - -webkit-transition: 0.3s; - -o-transition: 0.3s; - transition: 0.3s; } - footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a:hover { - text-decoration: underline; } - footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a:first-child { - margin-right: 20px; } - footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__rights { - text-align: center; } + display: none; +} +@media only screen and (max-width: 767px) { + footer div.footer__inner div.footer__sm { + display: block; + } +} +footer div.footer__inner div.footer__sm div.footer__sm__contant { + border-top: 1px solid #ACACAD; + padding: 32px 0 23px; +} +footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__logos { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; +} +footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__society { + max-width: 200px; + margin: 24px auto 17px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; +} +footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer p, footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer a { + font-weight: normal; + font-size: 13px; + line-height: 16px; + color: #747577; + opacity: 0.5; +} +footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + margin-bottom: 19px; +} +footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a { + text-decoration: none; + -webkit-transition: 0.3s; + -o-transition: 0.3s; + transition: 0.3s; +} +footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a:hover { + text-decoration: underline; +} +footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__privacy-policy a:first-child { + margin-right: 20px; +} +footer div.footer__inner div.footer__sm div.footer__sm__contant div.footer__sm__developer div.footer__sm__rights { + text-align: center; +} \ No newline at end of file -- cgit v1.2.3