.main {
    height: 105%;
    background-color: #fff;
    z-index: 3
}

.main>.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    background-image: url('../img/main/background.jpg')
}

.main>.particles {
    width: 80%;
    height: 80vh;
    margin-top: 2vh;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../img/main/particles.png');
    z-index: 1
}

.main>.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    left: 27vh;
    top: -5%;
    z-index: 5
}

.main>.content>.logo {
    width: 75vh;
    height: 55vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../img/logo/logo.png')
}

.main>.content>h2 {
    color: rgba(0,0,0,.8);
    font-weight: 600;
    font-size: 3.5vh;
    margin-top: 2vh;
    text-align: center
}

.main>.content>.under {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 2vh
}

.main>.content>.under>a>button {
    font-family: Roboto;
    font-size: 1.85vh;
    font-weight: 300;
    color: #fff;
    border-radius: .5vh;
    border: none;
    outline: 0;
    background: var(--color-malinovka);
    padding: 1.3vh;
    padding-left: 3.75vh;
    padding-right: 3.75vh;
    transition: background 250ms ease,text-shadow 350ms ease
}

.main>.content>.under>a>button:hover {
    cursor: pointer;
    background: var(--color-malinovka-95);
    text-shadow: 0 0 .1vw rgba(255,255,255,.7)
}

.main>.content>.under>h3 {
    color: rgba(0,0,0,.8);
    font-weight: 400;
    font-size: 2vh;
    margin-left: 2.75vh;
    text-align: left;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center
}

.main>.content>.under>h3>.icon {
    width: 2vh;
    height: 2vh;
    margin-left: .35vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../img/icons/svg/user.svg')
}

.main>.content>.under>h3>span {
    font-weight: 600;
    color: var(--color-malinovka-95)
}

.main>.char {
    width: 50vh;
    height: 80vh;
    position: absolute;
    bottom: 0;
    left: 18%;
    z-index: 3;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom
}

.main>.car {
    width: 95vh;
    height: 70vh;
    position: absolute;
    bottom: 1%;
    left: 6%;
    z-index: 2;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom
}

.main>.line-wrapper {
    position: absolute;
    bottom: -8vh;
    width: 150%;
    height: 20vh;
    overflow: hidden;
    transform: rotate(-3deg);
    z-index: 4;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.main>.line-wrapper>.line {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -9vh;fa    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../img/main/line.png');
    transform: rotate(3.65deg)
}

.main2 {
    height: auto;
    background-color: #fff;
    z-index: 2
}

.main2>a {
    margin-top: 12vh
}

.main2>a button {
    outline: 0;
    background: var(--color-malinovka);
    border: none;
    border-radius: .75vh;
    padding: 2vh;
    padding-left: 5vh;
    padding-right: 5vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 600;
    font-size: 2.1vh;
    box-shadow: 0 0 5vh .35vh var(--color-malinovka-35);
    transition: box-shadow 350ms ease,text-shadow 350ms ease
}

.main2>a button:hover {
    cursor: pointer;
    box-shadow: 0 0 5vh .3vh var(--color-malinovka-40);
    text-shadow: 0 0 .1vw rgba(255,255,255,.7)
}

.main2>.effect {
    width: 35vh;
    height: 100%;
    position: absolute;
    z-index: 4;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.main2>.effect.one {
    left: 0;
    top: 0;
    background-position: top left;
    background-image: url('../img/main/circle-left.png')
}

.main2>.effect.two {
    right: 0;
    bottom: 0;
    background-position: bottom right;
    background-image: url('../img/main/circle-right.png')
}

.main2>.content {
    width: 100%;
    margin-top: 5vh;
    position: relative;
    z-index: 5
}

.main2>.content>.point {
    width: 85%;
    height: 17vw;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 2.75vw
}

.main2>.content>.point:first-child {
    margin-top: 0
}

.main2>.content>.point.one {
    background-image: url('../img/main/points/1.png');
    background-position: right;
    float: right
}

.main2>.content>.point.two {
    background-image: url('../img/main/points/2.png');
    background-position: left;
    height: 21vw;
    float: left
}

.main2>.content>.point.three {
    background-image: url('../img/main/points/3.png');
    background-position: right;
    float: right
}

.main2>.content>.point.four {
    background-image: url('../img/main/points/4.png');
    background-position: left;
    height: 21vw;
    float: left
}

.main2>.content>.point>.text-box {
    width: 41.5%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

.main2>.content>.point.one>.text-box {
    left: 3%
}

.main2>.content>.point.two>.text-box {
    right: -3.6%
}

.main2>.content>.point.three>.text-box {
    left: 4%
}

.main2>.content>.point.four>.text-box {
    right: -3.3%
}

.main2>.content>.point>.text-box>h2 {
    color: #fff;
    font-weight: 600;
    font-size: 2.1vw;
    text-align: center
}

.main2>.content>.point>h3 {
    color: rgba(0,0,0,.8);
    font-weight: 300;
    font-size: 1.2vw;
    position: absolute;
    text-align: left;
    width: 35%;
    line-height: 1.1
}

.main2>.content>.point.one>h3 {
    right: 18%
}

.main2>.content>.point.two>h3 {
    left: 18%
}

.main2>.content>.point.three>h3 {
    right: 18.5%
}

.main2>.content>.point.four>h3 {
    left: 18%
}

.main2>.content>.line {
    width: 100%;
    height: 15vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../img/main/line.png');
    transform: rotate(-.025deg);
    position: absolute;
    bottom: -12.5vh
}

@media screen and (orientation: portrait) {
    .main>.particles {
        display:none
    }

    .main>.car,.main>.char {
        display: none
    }

    .main>.content {
        left: 0;
        top: -6.5vh
    }

    .main2>.effect {
        display: none
    }

    .main2>.content {
        margin-top: 2.5vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center
    }

    .main2>.content>.point {
        width: 95%;
        height: auto;
        margin-top: 5vh;
        flex-direction: column;
        border-bottom: .15vh rgba(0,0,0,.05) solid;
        padding-bottom: 5vh
    }

    .main2>.content>.point:first-child {
        margin-top: 0
    }

    .main2>.content>.point:last-child {
        border-bottom: none;
        padding-bottom: 0
    }

    .main2>.content>.point.one {
        background-image: none
    }

    .main2>.content>.point.two {
        background-image: none;
        height: auto
    }

    .main2>.content>.point.three {
        background-image: none
    }

    .main2>.content>.point.four {
        background-image: none;
        height: auto
    }

    .main2>.content>.point>.text-box {
        width: auto;
        height: auto;
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center
    }

    .main2>.content>.point.one>.text-box {
        left: 0
    }

    .main2>.content>.point.two>.text-box {
        right: 0
    }

    .main2>.content>.point.three>.text-box {
        left: 0
    }

    .main2>.content>.point.four>.text-box {
        right: 0
    }

    .main2>.content>.point>.text-box {
        left: 0;
        right: 0
    }

    .main2>.content>.point>.text-box>h2 {
        color: #000;
        font-weight: 600;
        font-size: 3vh;
        text-align: center;
        position: relative
    }

    .main2>.content>.point>.text-box>h2:before {
        content: '';
        position: absolute;
        left: -1.5vh;
        top: 50%;
        width: .5vh;
        height: 2.5vh;
        margin-top: -1.25vh;
        background: var(--color-malinovka)
    }

    .main2>.content>.point>h3 {
        color: rgba(0,0,0,.8);
        font-weight: 300;
        font-size: 2vh;
        position: relative;
        text-align: center;
        width: 95%;
        line-height: 1.1;
        margin-top: 1.5vh
    }

    .main2>.content>.point.one>h3 {
        right: 0
    }

    .main2>.content>.point.two>h3 {
        left: 0
    }

    .main2>.content>.point.three>h3 {
        right: 0
    }

    .main2>.content>.point.four>h3 {
        left: 0
    }

    .main2>.content>.point>h3 {
        left: 0;
        right: 0
    }
}