.landing-steam-wrapper,
.landing-steam-wrapper *,
.landing-steam-wrapper *::before,
.landing-steam-wrapper *::after {outline:none; box-sizing:border-box; font-family:MetronicPro, sans-serif; font-weight:normal; letter-spacing:0}

.landing-steam-wrapper {background:#FFFFFF; position:relative; overflow:hidden; width:100%; padding:0 0 32px 0}

@media (max-width:1219px) {
    .landing-steam-wrapper {padding:0 0 66px 0}
}

.landing-steam-container {margin:0 auto; width:100%; max-width:1220px}

@media (max-width:1219px) {
    .landing-steam-container {padding:0 10px}
}

.landing-steam-welcome {height:527px; display:flex; align-items:center; background:url(../img/landing-steam-welcome.jpg) no-repeat center; background-size:cover; position:relative}
.landing-steam-welcome-title {font-weight:600; font-size:36px; line-height:1.2em; color:#FFFFFF; max-width:428px}
.landing-steam-welcome-text {margin:20px 0 0 0; font-size:20px; line-height:1.5em; color:#FFFFFF; max-width:293px}
.landing-steam-welcome-link {display:flex; margin:36px 0 0 0}
.landing-steam-welcome-link a {display:block; padding:15px 20px; font-size:18px; line-height:1em; color:#01426A; text-decoration:none; background:#FFFFFF; border-radius:5px; transition:background 0.2s, color 0.2s; text-align:center}
@media (min-width:1220px) {
    .landing-steam-welcome-link a:hover {background:#01426A; color:#FFFFFF}
}

@media (max-width:1219px) {
    .landing-steam-welcome {height:578px; padding:20px 0 0 0; align-items:stretch; background-image:url(../img/landing-steam-welcome-mobile.jpg)}
    .landing-steam-welcome-title {max-width:300px; margin:0 auto; font-size:24px; line-height:1.2em; text-align:center}
    .landing-steam-welcome-text {max-width:240px; margin:10px auto 0 auto; text-align:center; font-size:16px; line-height:1.5em}
    .landing-steam-welcome-link {margin:0; position:absolute; left:10px; bottom:18px; right:10px; white-space:nowrap; display:block}
}

.landing-steam-title {font-weight:600; font-size:36px; line-height:1.2em; color:#01426A; text-align:center}
.landing-steam-anonce {margin:20px 0 0 0; font-size:18px; line-height:1.5em; color:#01426A; text-align:center}

@media (max-width:1219px) {
    .landing-steam-title {font-size:24px; line-height:1.2em}
    .landing-steam-title br {display:none}
    .landing-steam-anonce {font-size:16px; line-height:1.5em}
    .landing-steam-anonce br {display:none}
}

.landing-steam-prefs {padding:80px 0; background:url(../img/landing-steam-prefs.jpg) no-repeat center; background-size:cover; box-shadow:0px 20px 40px rgba(0, 0, 0, 0.1), 0px 8px 0px rgba(0, 0, 0, 0.1)}
.landing-steam-prefs-list {margin:34px -30px 0 -30px; display:flex}
.landing-steam-prefs-item {min-width:calc(33.33% - 60px); max-width:calc(33.33% - 60px); margin:0 30px; display:flex; flex-direction:column; align-items:center; text-align:center; font-size:24px; line-height:1.2em; color:#01426A; cursor:pointer}
.landing-steam-prefs-item-photo {order:1; display:flex; justify-content:center; margin:20px 0 0 0}
.landing-steam-prefs-item-photo img {display:block; width:360px; border-radius:50%; box-shadow:5px 0px 20px rgba(0, 0, 0, 0.6); transition:box-shadow 0.2s}
@media (min-width:1220px) {
    .landing-steam-prefs-item:hover .landing-steam-prefs-item-photo img {box-shadow:10px 0px 40px rgba(0, 0, 0, 0.6)}
}
.landing-steam-prefs-item-title {order:0; opacity:0; transition:opacity 0.2s; font-weight:600}
@media (min-width:1220px) {
    .landing-steam-prefs-item:hover .landing-steam-prefs-item-title {opacity:1}
}
.landing-steam-prefs-item-text {order:2; margin:20px 0 0 0; opacity:0; transition:opacity 0.2s; font-weight:600}
@media (min-width:1220px) {
    .landing-steam-prefs-item:hover .landing-steam-prefs-item-text {opacity:1}
}

@media (max-width:1219px) {
    .landing-steam-prefs-list {margin:-20px -10px 0 -10px}
    .landing-steam-prefs-item {margin:0; min-width:0; max-width:none; display:block; font-size:20px; line-height:1.2em}
    .landing-steam-prefs-item-photo {order:0; margin:0; padding:40px 0 0 0}
    .landing-steam-prefs-item-photo img {width:240px; box-shadow:10px 0px 40px rgba(0, 0, 0, 0.6)}
    .landing-steam-prefs-item-title {margin:20px 0 0 0; opacity:1}
    .landing-steam-prefs-item-text {margin:0; opacity:1}
    .landing-steam-prefs-list .slick-prev,
    .landing-steam-prefs-list .slick-next {min-width:24px; max-width:24px; width:24px; height:24px; position:absolute; top:148px; margin:0; display:flex; align-items:center; justify-content:center; border:none; border-radius:0; padding:0; outline:none; -webkit-appearance:none; cursor:pointer; background:transparent; transform:none; opacity:1}
    .landing-steam-prefs-list .slick-prev {left:10px}
    .landing-steam-prefs-list .slick-next {right:10px}
    .landing-steam-prefs-list .slick-prev svg,
    .landing-steam-prefs-list .slick-next svg {display:block; width:24px; height:24px; fill:#01426A}
    .landing-steam-prefs-list ul.slick-dots {display:flex; position:relative; margin:20px 0 0 0; padding:0; list-style:none; align-items:center; justify-content:center}
    .landing-steam-prefs-list ul.slick-dots li {display:block; margin:0 0 0 10px; width:auto}
    .landing-steam-prefs-list ul.slick-dots li.slick-active {width:auto}
    .landing-steam-prefs-list ul.slick-dots li:first-child {margin:0}
    .landing-steam-prefs-list ul.slick-dots li button {display:block; width:4px; height:4px; border-radius:2px; border:none; background:rgba(1, 66, 106, 0.5); margin:0; padding:0; outline:none; -webkit-appearance:none; cursor:pointer; font-size:0; line-height:0; text-indent:100px; transition:width 0.2s, background 0.2s}
    .landing-steam-prefs-list ul.slick-dots li.slick-active button {width:50px; background:#01426A}
}

.landing-steam-compare {margin:100px 0 0 0}
.landing-steam-compare-menu {margin:40px 0 0 0; display:flex}
.landing-steam-compare-menu-sep {min-width:1px; max-width:1px; height:88px; background:rgba(71, 70, 70, 0.2)}
.landing-steam-compare-menu-item {flex:1; display:flex; align-items:center; justify-content:center; flex-direction:column; color:rgba(71, 70, 70, 0.5); transition:color 0.2s; text-decoration:none}
@media (min-width:1220px) {
    .landing-steam-compare-menu-item:hover {color:#01426A; text-decoration:none}
}
.landing-steam-compare-menu-item.active {color:#01426A}
.landing-steam-compare-menu-item-back {position:absolute; left:-9999px; top:-9999px}
.landing-steam-compare-menu-item-front {position:absolute; left:-9999px; top:-9999px}
.landing-steam-compare-menu-item-icon {display:flex; justify-content:center}
.landing-steam-compare-menu-item-icon svg {display:block; width:60px; height:60px; fill:#A3A3A3; transition:fill 0.2s}
@media (min-width:1220px) {
    .landing-steam-compare-menu-item:hover .landing-steam-compare-menu-item-icon svg {fill:#01426A}
}
.landing-steam-compare-menu-item.active .landing-steam-compare-menu-item-icon svg {fill:#01426A}
.landing-steam-compare-menu-item-title {margin:5px 0 0 0; text-align:center; font-weight:normal; font-size:18px; line-height:1.3em}
.landing-steam-compare-menu-item-title br {display:none}
.landing-steam-compare-container {margin:40px 0 0 0; position:relative}
.landing-steam-compare-wrapper {position:relative; height:550px; border-radius:12px; overflow:hidden}
.landing-steam-compare-inner {position:absolute; left:0; top:0; right:0; bottom:0}
.landing-steam-compare-back {position:absolute; left:0; top:0; width:100%; bottom:0; overflow:hidden}
.landing-steam-compare-back-inner {position:absolute; left:0; top:0; width:1220px; bottom:0; background:no-repeat center; background-size:cover}
.landing-steam-compare-front {position:absolute; right:0; top:0; width:100%; bottom:0; overflow:hidden}
.landing-steam-compare-front-inner {position:absolute; right:0; top:0; width:1220px; bottom:0; background:no-repeat center; background-size:cover}
.landing-steam-compare-sep {position:absolute; left:0; top:0; width:1px; bottom:0; background:#FFFFFF; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none}
.landing-steam-compare-sep-inner {position:absolute; left:50%; top:50%; width:51px; height:18px; margin:-9px 0 0 -25.5px; background:url(../img/landing-steam-compare-sep-arrows.svg) no-repeat; background-size:100%}
.landing-steam-compare-hints {position:absolute; left:20px; top:20px; right:20px; display:flex; justify-content:space-between; pointer-events:none}
.landing-steam-compare-hint {font-weight:600; font-size:20px; line-height:1.2em; color:#FFFFFF}
.landing-steam-compare-hint+.landing-steam-compare-hint {text-align:right}

@media (max-width:1219px) {
    .landing-steam-compare {margin:60px 0 0 0}
    .landing-steam-compare-menu {margin:20px -10px 0 -10px}
    .landing-steam-compare-menu-sep {display:none}
    .landing-steam-compare-menu-item-title {font-size:16px; line-height:1.3em}
    .landing-steam-compare-menu-item-title br {display:block}
    .landing-steam-compare-container {margin:20px -10px 0 -10px}
    .landing-steam-compare-wrapper {height:auto; border-radius:0}
    .landing-steam-compare-inner {position:relative; top:auto; bottom:auto; height:266px; right:auto; width:590px; margin-left:-295px; left:50%}
    .landing-steam-compare-back-inner {width:590px}
    .landing-steam-compare-front-inner {width:590px}
    .landing-steam-compare-sep-inner {width:74px; height:26px; margin:-18px 0 0 -37px; background-image:url(../img/landing-steam-compare-sep-arrows-mobile.svg)}
    .landing-steam-compare-hints {position:relative; left:auto; top:auto; right:auto; margin:10px 10px 0 10px}
    .landing-steam-compare-hint {font-size:12px; line-height:1.2em; color:#01426A}
}

.landing-steam-catalogue {margin:100px 0 0 0}
.landing-steam-catalogue-list {margin:40px -10px 0 -10px; position:relative}
.landing-steam-catalogue-list .swiper-slide {min-width:33.33%; max-width:33.33%}
.landing-steam-catalogue-item {display:block; margin:0 10px; background:#FFFFFF; border:1px solid #D9D9D9; border-radius:12px; padding:40px 10px 10px 10px; text-decoration:none; text-align:center}
.landing-steam-catalogue-preview {height:269px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden}
.landing-steam-catalogue-preview img {max-width:100%; max-height:100%; width:auto; height:auto}
.landing-steam-catalogue-title {margin:20px 0 0 0; color:#041C32; font-size:18px; line-height:1.5em}
.landing-steam-catalogue-btn {margin:20px 0 0 0}
.landing-steam-catalogue-btn span {display:flex; justify-content:center; padding:15px 0; font-size:18px; line-height:1em; color:#FFFFFF; text-decoration:none; background:#01426A; border-radius:5px; transition:background 0.2s}
@media (min-width:1220px) {
    .landing-steam-catalogue-item:hover .landing-steam-catalogue-btn span {background:#00314E}
}
.landing-steam-catalogue-list .swiper-button-prev,
.landing-steam-catalogue-list .swiper-button-next {min-width:36px; max-width:36px; width:36px; height:36px; position:absolute; top:50%; margin:-18px 0 0 0; display:block; border:none; border-radius:0; padding:0; outline:none; -webkit-appearance:none; cursor:pointer; background:none; transform:none; opacity:1}
.landing-steam-catalogue-list .swiper-button-prev::after,
.landing-steam-catalogue-list .swiper-button-next::after {display:none}
.landing-steam-catalogue-list .swiper-button-prev {left:-46px}
.landing-steam-catalogue-list .swiper-button-next {right:-46px}
.landing-steam-catalogue-list .swiper-button-prev svg,
.landing-steam-catalogue-list .swiper-button-next svg {display:block; width:36px; height:36px; fill:#01426A; transition:fill 0.2s}
@media (min-width:1220px) {
    .landing-steam-catalogue-list .swiper-button-prev:hover svg,
    .landing-steam-catalogue-list .swiper-button-next:hover svg {fill:#00314E}
}
.landing-steam-catalogue-list .swiper-pagination {display:flex; position:absolute; margin:0; width:auto; left:0; top:auto; right:0; bottom:-44px; align-items:center; justify-content:center}
.landing-steam-catalogue-list .swiper-pagination .swiper-pagination-bullet {display:block; min-width:4px; max-width:4px; height:4px; background:rgba(1, 66, 106, 0.5); opacity:1; margin:0 0 0 10px; border-radius:2px; cursor:default; position:relative; transition:min-width 0.2s, max-width 0.2s, background 0.2s}
.landing-steam-catalogue-list .swiper-pagination .swiper-pagination-bullet:first-child {margin:0}
.landing-steam-catalogue-list .swiper-pagination .swiper-pagination-bullet.active {min-width:50px; max-width:50px; background:#01426A}

@media (max-width:1219px) {
    .landing-steam-catalogue {margin:60px 0 0 0}
    .landing-steam-catalogue-list {max-width:300px; margin:20px auto 0 auto}
    .landing-steam-catalogue-list .swiper-slide {min-width:0; max-width:none}
    .landing-steam-catalogue-item {margin:0; padding:10px}
    .landing-steam-catalogue-preview {height:228px}
    .landing-steam-catalogue-title {margin:10px 0 0 0; font-size:16px; line-height:1.5em}
    .landing-steam-catalogue-btn {margin:10px 0 0 0}
    .landing-steam-catalogue-ctrl {margin:20px 0 0 0; display:flex; justify-content:space-between; align-items:center}
    .landing-steam-catalogue-list .swiper-button-prev,
    .landing-steam-catalogue-list .swiper-button-next {position:relative; left:auto; top:auto; bottom:auto; right:auto; margin:0}
    .landing-steam-catalogue-list .swiper-pagination {position:relative; left:auto; bottom:auto; right:auto}
    .landing-steam-catalogue-list .swiper-pagination .swiper-pagination-bullet {display:none}
    .landing-steam-catalogue-list .swiper-pagination .swiper-pagination-bullet.prev {display:block}
    .landing-steam-catalogue-list .swiper-pagination .swiper-pagination-bullet.prev-mini {display:block; transform:scale(0.5)}
    .landing-steam-catalogue-list .swiper-pagination .swiper-pagination-bullet.active {display:block}
    .landing-steam-catalogue-list .swiper-pagination .swiper-pagination-bullet.next {display:block}
    .landing-steam-catalogue-list .swiper-pagination .swiper-pagination-bullet.next-mini {display:block; transform:scale(0.5)}
}

.landing-steam-catalogue-list-all {margin:84px 0 0 0; display:flex; justify-content:center}
.landing-steam-catalogue-list-all a {display:flex; width:209px; height:48px; align-items:center; justify-content:center; border:1px solid #01426A; border-radius:5px; font-weight:normal; font-size:18px; line-height:1em; color:#01426A; text-decoration:none; transition:background 0.2s, color 0.2s}
@media (min-width:1220px) {
    .landing-steam-catalogue-list-all a:hover {background:#01426A; color:#FFFFFF}
}

@media (max-width:1219px) {
    .landing-steam-catalogue-list-all {margin:20px 0 0 0; display:block}
    .landing-steam-catalogue-list-all a {width:100%}
}

.swiper {-moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none}