.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.w-header {
    width: 100%;
    border-bottom: 1rem solid var(--light);
}

.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: var(--container-length);
    margin: 0 auto;
    padding: 0 80rem;
}

.header .logo {
    width: 192rem;
    height: 40rem;
    background-image: url(../images/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.header .button-light {
    padding-left: 22rem;
    padding-right: 22rem;
}

.header .menu {
    display: flex;
    flex: 1 0 auto;
    justify-content: center;
}

.header .link {
    margin: 0 20rem;
    color: var(--dark);
    font-size: 15rem;
    font-weight: 500;
    letter-spacing: 0.15rem;
    padding: 31.5rem 13rem;
    border-bottom: 1rem solid transparent;
    transition: color 0.4s, border-color 0.4s;
}

.header .link:hover {
    color: var(--blue);
}

.header .link:hover {
    border-color: var(--dark);
}

.w-banner {
    width: 100%;
}

.banner {
    display: flex;
    flex-direction: column;
    margin: 20rem auto 0 auto;
    width: var(--container-length);
    height: 611rem;
    background-image: url(../images/banner.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.banner .title {
    margin-top: auto;
    width: 100%;
    color: var(--white);
    font-size: 49rem;
    font-weight: 700;
    letter-spacing: 0.49rem;
    text-align: center;
}

.banner .about {
    width: 100%;
    margin-top: 31rem;
    color: var(--about);
    text-align: center;
    font-size: 15rem;
    font-weight: 500;
    letter-spacing: 0.15rem;
}

.banner .information {
    display: flex;
    margin: 115rem 0 35rem 0;
    justify-content: center;
    flex-direction: row;
}

.banner .box {
    margin: 0 15rem;
    width: 300rem;
    padding: 22rem 20rem;
    border-radius: var(--border-radius-middle);
    border: 1rem solid var(--border-banner);
    background: var(--back-banner);
    backdrop-filter: blur(2rem);
    color: var(--white);
    font-size: 18rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.18rem;
}

.w-footer {
    width: 100%;
    background-color: var(--dark);
    border-radius: 10rem 10rem 0 0;
}

.footer {
    display: flex;
    flex-direction: column;
    width: var(--container-length);
    margin: 0 auto;
    padding: 43rem 80rem 0 80rem;
}

.footer .copyright {
    margin-top: 20rem;
    display: flex;
    align-items: center;
    width: 100%;
    border-top: 1rem solid var(--copyright-line);
    padding: 15rem 0;
}

.footer .ripe {
    display: block;
}

.footer .ripe:hover {
    opacity: 0.8;
}

.footer .email {
    color: var(--about);
    border-radius: var(--border-radius-light);
    background-color: var(--back-email);
    padding: 7.5rem 18rem;
    font-size: 12rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.12rem;
}

.footer .text {
    text-align: center;
    flex: 1 0 auto;
    opacity: 0.5;
    color: var(--white);
    font-size: 12rem;
    font-weight: 400;
    line-height: normal;
}

.footer .top {
    display: flex;
    align-items: flex-start;
}

.footer .payments {
    margin-left: auto;
    padding: 0 16rem 12rem 16rem;
    border-radius: var(--border-radius-light);
    background-color: var(--backing);
}

.footer .title {
    margin: 12rem 0 13rem 0;
    font-size: 17rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.17rem;
    color: var(--white);
}

.footer .more {
    margin-left: auto;
    background-color: var(--dark);
    border-radius: var(--border-radius-light);
    padding: 4rem;
    color: var(--about);
    font-size: 10rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.1rem;
}

.footer .head {
    display: flex;
    align-items: center;
}

.footer .list {
    display: grid;
    gap: 8rem 12rem;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.footer .list img {
    width: 121rem;
    height: 46rem;
}

.footer .about {
    display: flex;
    flex-direction: column;
}

.footer .logo {
    margin-bottom: 20rem;
    width: 192rem;
    height: 40rem;
}

.footer .comp {
    color: var(--about);
    font-size: 12rem;
    font-weight: 400;
}

.footer .comp span {
    color: var(--white);
    font-size: 12rem;
    font-weight: 400;
}

.footer .links {
    display: flex;
    flex-direction: row;
    flex: 1 0 auto;
    justify-content: space-evenly;
}

.footer .link {
    display: block;
    margin-bottom: 10rem;
    color: var(--about);
    font-size: 14rem;
    font-weight: 400;
    letter-spacing: 0.14rem;
}

.footer .link:hover {
    opacity: 0.8;
}

.footer .group {
    display: flex;
    flex-direction: column;
}

.w-partners {
    width: 100%;
}

.partners {
    overflow: hidden;
    padding: 90rem 0;
    margin: 0 auto;
    width: var(--container-length);
}

.partners .arrows {
    display: flex;
    flex-direction: row;
    margin-left: auto;
}

.partners .left,
.partners .right {
    cursor: pointer;
    width: 49rem;
    height: 49rem;
}

.partners .left:hover,
.partners .right:hover {
    opacity: 0.8;
}

.partners .active {
    opacity: 0.4 !important;
    cursor: default;
}

.partners .right {
    margin-left: 10rem;
    transform: scale(-1);
}

.partners .list {
    margin-top: 30rem;
    display: flex;
}

.partners .list a {
    display: block;
    margin-right: 30rem;
}

.partners .list a img {
    width: 298rem;
    height: 143rem;
}

.partners .list a:hover {
    opacity: 0.8;
}

.partners .list a:last-child {
    margin-right: 0 !important;
}

.partners .w-padding {
    padding: 0 80rem;
}

.w-benefit {
    width: 100%;
    background-color: var(--back-sub);
}

.benefit {
    display: flex;
    flex-direction: column;
    width: var(--container-length);
    margin: 0 auto;
    padding: 68rem 80rem;
}

.benefit .list {
    display: grid;
    gap: 0 30rem;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 30rem;
}

.benefit .box {
    padding: 35rem;
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-middle);
    background-color: var(--white);
    transition: transform 1s;
}

.benefit .box:hover {
    box-shadow: 0 4rem 15rem 0 rgba(0, 0, 0, 0.05);
    transform: translateY(-10rem);
}

.benefit .title {
    margin-top: 25rem;
    color: var(--dark);
    font-size: 28rem;
    font-weight: 700;
    letter-spacing: 0.28rem;
}

.benefit .about {
    margin-top: 21rem;
    color: var(--dark);
    font-size: 15rem;
    font-weight: 400;
    letter-spacing: 0.15rem;
}

.benefit .icon {
    border-radius: var(--border-radius-light);
    margin-right: auto;
    padding: 11rem;
    background-color: var(--back-sub);
}

.benefit svg {
    width: 55rem;
    height: 55rem;
}

.w-config {
    width: 100%;
}

.config {
    padding: 90rem 80rem;
    margin: 0 auto;
    width: var(--container-length);
}

.config .information {
    display: flex;
    margin-top: 30rem;
}

.config .padding {
    position: relative;
    border-radius: var(--border-radius-middle);
    padding: 30rem 28rem;
    display: flex;
    flex-direction: column;
}

.config .more {
    width: 57.5%;
    margin-left: auto;
    background: var(--gradient);
}

.config .more .button-light {
    margin-top: auto;
    margin-right: auto;
}

.config .more .h1 {
    position: relative;
    z-index: 2;
}

.config .more .back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-image: url(../images/back-more.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.config .more .about {
    position: relative;
    z-index: 2;
}

.config .rent {
    background-color: var(--blue);
    width: 40.3%;
}

.config .rent .h1 span {
    color: var(--white);
}

.config .lines {
    margin: 26rem 0 46rem 0;
}

.config .line {
    padding: 11rem 0;
    text-align: center;
    margin-bottom: 10rem;
    border-radius: var(--border-radius-middle);
    border: 1rem solid var(--brd);
    background: var(--back-email);
    color: var(--white);
    font-size: 15rem;
    font-weight: 400;
    letter-spacing: 0.15rem;
}

.config .line:last-child {
    margin-bottom: 0;
}

.config .about {
    margin-top: 23rem;
    color: var(--dark);
    font-size: 15rem;
    font-weight: 400;
    letter-spacing: 0.15rem;
}

.config .buttons {
    display: flex;
}

.config .padding .button-light {
    position: relative;
    z-index: 2;
    padding-left: 43rem;
    padding-right: 43rem;
}

.config .buttons .button-light {
    margin-right: 11rem;
}

.config .buttons .email {
    background: var(--back-email);
    border-radius: var(--border-radius-middle);
    padding: 12.5rem 0;
    color: var(--white);
    text-align: center;
    font-size: 15rem;
    font-weight: 500;
    letter-spacing: 0.15rem;
    flex: 1 0 auto;
}

.config .ov {
    margin-left: auto;
}

.config .checkboxes {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.config .checkbox {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    margin-right: 35rem;
}

.config .checkbox:hover {
    opacity: 0.85;
}

.config .checkbox:last-child {
    margin-right: 0;
}

.config .checkbox .text {
    margin-left: 5rem;
    color: var(--dark);
    font-size: 15rem;
    font-weight: 500;
    letter-spacing: 0.15rem;
}

.config .checkbox .box {
    width: 19rem;
    height: 19rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAyMCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMC43ODc1OTgiIHk9IjAuNSIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iNC41IiBmaWxsPSJ3aGl0ZSIgc3Ryb2tlPSIjQUZEQUU4Ii8+Cjwvc3ZnPgo=");
}

.config .checkbox .active {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxOSAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjE5IiBoZWlnaHQ9IjE5IiByeD0iNSIgZmlsbD0iIzE4MUIyMSIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE0LjA1NzIgNy4xNTM3N0MxNC4yNjIzIDcuMzU4NzkgMTQuMjYyMyA3LjY5MTIxIDE0LjA1NzIgNy44OTYyM0w4LjkzNzEyIDEyLjc5ODRDOC43MzIxMyAxMy4wMDM0IDguMzk5NzcgMTMuMDAzNCA4LjE5NDc0IDEyLjc5ODRMNS4xNTM4NSA5Ljc1ODUxQzQuOTQ4NzggOS41NTM1MyA0Ljk0ODcxIDkuMjIxMTEgNS4xNTM2OSA5LjAxNjA1QzUuMzU4NjcgOC44MTA5OCA1LjY5MTA4IDguODEwOTEgNS44OTYxNSA5LjAxNTg5TDguNTY1ODEgMTEuNjg0N0wxMy4zMTQ3IDcuMTUzNzdDMTMuNTE5OCA2Ljk0ODc0IDEzLjg1MjIgNi45NDg3NCAxNC4wNTcyIDcuMTUzNzdaIiBmaWxsPSIjRkFGQUZBIi8+Cjwvc3ZnPgo=");
}

.config .list {
    position: relative;
    margin-top: 25rem;
    overflow: hidden;
}

.config .list .arrow {    
    display: block;
    cursor: pointer;
    position: absolute;
    background: var(--shadow);
    width: 104rem;
    height: 100%;
    z-index: 2;
    top: 0;
    cursor: pointer;
}

.config .list .arrow:hover {
    opacity: 0.8;
}

.config .list .arrow img {
    width: 69rem;
    height: 69rem;
    position: absolute;
    top: calc(50% - 34.5rem);
    left: calc(50% - 34.5rem);
}

.config .list .arrow.right {
    right: 0;
}

.config .list .arrow.left {
    left: 0;
    transform: scale(-1);
}

.config .list .arrow.active {
    display: none;
}

.config .flex {
    font-size: 0;
    white-space: nowrap;
}

.config .point {
    display: inline-block;
    border-radius: var(--border-radius-middle);
    background-color: var(--back-sub);
    width: 298rem;
    margin-right: 30rem;
}

.config .point:last-child {
    margin-right: 0;
}

.config .point .head {
    padding: 20rem 25rem;
    border-bottom: 1rem solid var(--light);
}

.config .point .name {
    color: var(--dark);
    font-size: 24rem;
    font-weight: 700;
}

.config .point .price {
    margin-top: 5rem;
    color: var(--blue);
    font-size: 18rem;
    font-weight: 400;
}

.config .point {
    padding: 18rem 14rem 20rem 14rem;
}

.config .point .mark {
    display: flex;
    border-radius: var(--border-radius-middle);
    background-color: var(--about);
    margin-top: 12rem;
    padding: 11rem 11rem;
}

.config .point .mark:last-child {
    margin-top: 0;
}

.config .point .default {
    color: var(--dark);
    font-size: 15rem;
    font-weight: 400;
}

.config .point .light {
    margin-top: 6rem;
    color: var(--back-banner);
    font-size: 11rem;
    font-weight: 400;
}

.config .point .grey {
    color: var(--dark);
    font-size: 15rem;
    font-weight: 400;
    opacity: 0.6;
}

.config .point .mark.column {
    flex-direction: column;
}

.config .point .mark.row .default {
    margin-left: auto;
}

.config .point .double {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.config .point .double .mark {
    width: 48%;
    justify-content: center;
}

.config .point .double  .default {
    font-size: 14rem;
    line-height: 15rem;
}

.config .point .order {
    display: block;
    margin-top: 20rem;
    width: 100%;
    padding: 17rem 0;
    color: var(--blue);
    border: 1rem solid var(--order-brd);
    background-color:  var(--order);
    font-size: 15rem;
    font-weight: 500;
    letter-spacing: 0.15rem;
    border-radius: var(--border-radius-middle);
    text-align: center;
    transition: color 0.4s, background-color 0.4s;
}

.config .point .order:hover {
    border-color: var(--blue);
    color: var(--white);
    background-color: var(--blue);
}

.noselect > * {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}