﻿.LeftMenuAbout {
    /*  position: fixed;
    height: 100vh;*/
    background-color: #e1ccfd;
}

.AboutPresentation {
    width: 100%;
    min-height: 700px;
    background: rgb(66,180,0);
    background: linear-gradient(90deg, rgba(189,211,238,1) 0%, rgba(199,182,226,1) 50%);
}

.LeftMenu {
    min-height: 700px;
}

.SectionContainer {
    padding-right: 55px;
    padding-left: 55px;
}

.PageTitle {
    font-weight: 700;
    color: #4A4A4A;
    font-size: 44px;
    line-height: 66px;
}

.SectionTitle {
    font-weight: 700;
    color: #4A4A4A;
    font-size: 35px;
    line-height: 51px;
}

    .SectionTitle.Section1 {
        padding-top: 35px;
        padding-bottom: 10px;
    }

    .SectionTitle.Section2 {
        padding-bottom: 60px;
    }

    .SectionTitle.Circle {
        color: #FFF;
        font-weight: 400;
        line-height: 30px;
        padding-bottom: 10px;
    }

    .SectionTitle.Section4 {
        padding-bottom: 25px;
    }

.SectionSubTitle {
    color: #4A4A4A;
    font-size: 22px;
    line-height: 30px;
}

    .SectionSubTitle.Section1 {
        padding-bottom: 30px;
    }

    .SectionSubTitle.Circle {
        color: #FFF;
        font-weight: 400;
    }

    .SectionSubTitle.Section3 {
        font-size: 44px;
        line-height: 66px;
        color: #FFF;
    }

.SectionDesc {
    color: #4A4A4A;
    font-size: 15px;
    line-height: 27px;
}

    .SectionDesc.Desc1 {
        max-width: 496px;
        padding-bottom: 40px;
    }

    .SectionDesc.Desc2 {
        max-width: 496px;
    }

    .SectionDesc.Desc3 {
        max-width: 496px;
    }

    .SectionDesc.Section3 {
        font-size: 22px;
        color: #FFF;
        line-height: 30px;
    }

    .SectionDesc.Section4 {
        padding-bottom: 30px;
    }

.Section1Circle {
    position: absolute;
    top: -180px;
    left: 0;
    width: 360px;
    height: 360px;
    background-color: #CE73AC;
    border-radius: 50%;
}

.Section1CircleInner {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
}

.More {
    padding-left: 65px;
    padding-top: 15px;
    float: left;
    line-height: 19px;
    font-weight: 700;
    font-size: 13px;
    color: #FFF;
    cursor: pointer;
}

.ArrowCircle {
    position: absolute;
    top: 3px;
    left: -22px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #FFF;
    cursor: pointer;
    background-image: url('../../images/ArrowLeftWhite.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 10px 9px;
}

.AboutSection2 {
    padding-top: 60px;
    padding-bottom: 95px;
}

.Section2Picture {
    height: 508px;
}

.smallTitle {
    color: #4A4A4A;
    font-size: 15px;
    line-height: 27px;
    padding-left: 31px;
    position: relative;
}

    .smallTitle.Active {
        font-size: 16px;
        font-weight: 700;
        line-height: 26px;
    }

.CircleNumber {
    position: absolute;
    top: -8px;
    right: -65px;
    width: 45px;
    height: 45px;
    border: 1px solid transparent;
    border-radius: 50%;
    background-color: #F0F5F8;
}

.AbsoCircle {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
    top: 5px;
    border: 1px solid transparent;
    border-radius: 50%;
}

.buttonPlus {
    position: relative;
    width: 18px;
    height: 20px;
}

    .buttonPlus::before, .buttonPlus::after {
        content: "";
        position: absolute;
        background-color: #4A4A4A;
        transition: transform 0.25s ease-out;
    }

    /* Vertical line */
    .buttonPlus::before {
        right: 50%;
        width: 1px;
        height: 66%;
        margin-right: -1px;
        top: 3px;
    }

    /* horizontal line */
    .buttonPlus::after {
        top: 50%;
        right: 3px;
        width: 66%;
        height: 1px;
        margin-top: -1px;
    }

.buttonPlus1 {
    cursor: pointer;
}

    .buttonPlus1::before {
        transform: rotate(90deg);
    }

    .buttonPlus1::after {
        transform: rotate(180deg);
    }

.buttonPlus1 {
    cursor: pointer;
}

    .buttonPlus1::before {
        transform: rotate(90deg);
    }

    .buttonPlus1::after {
        transform: rotate(180deg);
    }

.AboutSection3 {
    padding-top: 35px;
    padding-bottom: 50px;
    background-color: #CE73AC;
}

.Section3Div {
    width: 33.33%;
    padding-right: 20px;
}

    .Section3Div:first-child {
        padding-right: 0;
    }

.AboutSection4 {
    padding-top: 60px;
    padding-bottom: 100px;
}

    .AboutSection4 .mainButton {
       /* display: block;*/
        margin: auto;
        min-width: 114px;
    }

.Section4Circle {
    padding: 100px 30px;
    border-radius: 50%;
    background-color: rgba(0, 150, 209,0.3);
    width: 435px;
    height: 435px;
    margin-top: 50px;
}

.Section4Circle2 {
    padding: 100px 30px;
    border-radius: 50%;
    width: 480px;
    height: 490px;
    position: absolute;
    top: 0;
    left: 50%;
    -moz-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

.absoAnim1 {
    position: absolute;
    bottom: 0;
}

@media all and (max-width: 840px) {
    .AboutPresentation {
        min-height: 600px;
    }

    .SectionDesc.Desc1 {
        max-width: 100%;
        padding-bottom: 0;
    }

    .SectionDesc.Desc2 {
        max-width: 100%;
    }

    .SectionDesc.Desc3 {
        max-width: 100%;
    }

    .SectionDesc.Section2 {
        padding-right: 65px;
    }

    .SectionDesc.Section3 {
        font-size: 18px;
    }

    .SectionSubTitle.Section3 {
        font-size: 36px;
        line-height: 40px;
    }

    .Section1Circle {
        position: relative;
        top: 0;
        left: 0 !important;
        width: 100%;
        height: 100%;
        border-radius: 0;
        position: relative;
        min-width: 320px;
        max-width: 1310px;
        padding: 0 15px;
    }

    .Section1CircleInner {
        position: relative;
        top: 0;
        left: 0;
        -moz-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        padding: 40px 0;
    }

    .AboutSection2 {
        padding-top: 0;
        padding-bottom: 50px;
    }

    .SectionContainer {
        padding-right: 0;
        padding-left: 0;
    }

    .PageTitle {
        font-size: 36px;
    }

    .SectionTitle {
        font-size: 28px;
    }

        .SectionTitle.Section1 {
            padding-top: 0;
            padding-bottom: 0;
        }

        .SectionTitle.Section2 {
            padding-top: 40px;
            padding-bottom: 40px;
        }

    .AboutSection3 {
        padding-top: 30px;
        padding-bottom: 35px;
    }

    .CircleNumber {
        right: 0;
    }

    .smallTitle {
        padding-right: 65px;
    }

    .Section2Img {
        margin: auto;
    }

    .AboutSection4 {
        padding-top: 40px;
        padding-bottom: 50px;
        background-color: rgba(0, 150, 209,0.3);
    }

    .Section4Circle {
        border-radius: 0;
        width: 100%;
        height: 100%;
        margin-top: 0;
        background-color: transparent;
        padding: 0;
    }

    .More {
        float: none;
        text-align: center;
        padding-left: 0;
        margin: auto;
        width: 40px;
    }
}

@media all and (max-width: 480px) {
    .PageTitle {
        font-size: 28px;
    }

    .SectionTitle {
        font-size: 24px;
    }

        .SectionTitle.Section2 {
            padding-top: 25px;
        }

    .SectionSubTitle {
        font-size: 20px;
    }

        .SectionSubTitle.Section3 {
            font-size: 28px;
        }

    .Section1CircleInner {
        padding: 30px 0;
    }

    .AboutPresentation {
        min-height: 700px;
    }

    .AboutSection4 {
        padding-top: 25px;
    }
}

@media all and (max-width: 400px) {
    .AboutPresentation {
        min-height: 900px;
    }

    .AboutSection4 .PageTitle {
        font-size: 26px;
    }
}