/***--- MENU ---***/
#nav-ext, #nav-legal { display: none; }


/***--- HERO ---***/
#hero {
    background: url('../img/hero-bg.png') left bottom;
    background-attachment: fixed;
    background-size: 100% auto;
    padding: 0px;
    border: none;
}

#hero .inner {
    width: 90%;
    padding: 0;
    padding-top: 2vw;
}

/* background */
#hero .ocean { 
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height: 5%;
    background: #6ea833;

}
    #hero .wave {
        background: url(../img/grn-wave.svg) repeat-x; 
        position: absolute;
        top: -198px;
        width: 6400px;
        height: 198px;
        animation: wave 30s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
        transform: translate3d(0, 0, 0);
    }
    #hero .wave:nth-of-type(2) {
        top: -175px;
        animation: wave 30s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
        opacity: 1;
    }
    @keyframes wave {
        0% {
        margin-left: 0;
        }
        100% {
        margin-left: -1600px;
        }
    }
    @keyframes swell {
        0%, 100% {
        transform: translate3d(0,-25px,0);
        }
        50% {
        transform: translate3d(0,5px,0);
        }
    }

/* LEFT */

/* headings */
#hero .left .head {
    overflow: hidden;
    position: relative;
    margin-top: -4.5vw;
    width: 100%;
    font-size: 2.5vw;
    font-family: 'sol-700';
    float: left;
}
    #hero .left .head .text {
        font-family: 'sol-700';
    }
    #hero :is(.mhead,.msub) { 
        display: none;
    }
    #hero .head .cursor {
        margin-left: 0.1rem;
        width: 2px;
        background-color: #333333;
        display: inline-block;
        animation: blink 1s infinite;
    }
        @keyframes blink {
            0%  { background-color: #6ea833; }
            49% { background-color: #6ea833; }
            50% { background-color: transparent; }
            99% { background-color: transparent; }
            100%  { background-color: #6ea833; }
        }

#hero .sub-head {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 15px;
    font-size: 1.6vw;
    color: #777777;
    line-height: 1.4;
    float: left;
}

/* form */
#hero .hero-form {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 2vw;
    background: #ffffff;
    padding: .8vw;
    border-radius: 500px;
    float: left;
}
    #hero .hero-form input {
        position: relative;
        margin: 0;
        width: 72%;
        font-size: 1.4vw;
        border: none;
        padding: 1.7vw 1.5vw;
        border-radius: 0vw;
        border: none !important;
        float: left;
    }
        #hero .hero-form input:focus, #hero .hero-form input:hover {
            outline: none;
            border: none;
            box-shadow: none;
        }
    #hero .hero-form button {
        width: 28%;
        font-size: 1.4vw;
        padding: 1.7vw 0vw;
        border-radius: 500px;
        float: right; 
    }


/* RIGHT */
#hero .right {
    padding: 2vw;
}

    #hero .right img {
        overflow: hidden;
        position: relative;
        margin-top: -87.5%;
        width: 100%;
        float: left;
    }
        #hero .right img:nth-child(1) {
            margin-top: 0%;
        }
    #hero .img-01 {
        cursor: pointer;
        z-index: 5;
    }
    #hero .img-1 {
        z-index: 4;
    }
    #hero .img-2 {
        animation: hero-img-2 3s infinite;
        z-index: 3;
    }
        @keyframes hero-img-2 {
            0% { transform: translatey(0px); }
                50% {  transform: translatey(-15px); }
            100% { transform: translatey(0px); }
        }
    #hero .img-3 {
        animation: hero-img-3 4s infinite;
        z-index: 2;
    }
        @keyframes hero-img-3 {
            0% { transform: translatey(0px); }
                50% {  transform: translatey(-10px); }
            100% { transform: translatey(0px); }
        }
    #hero .img-4 {
        animation: hero-img-4 3s infinite linear;
        z-index: 1;
    }
        @keyframes hero-img-4 {
            0% { transform: translatex(0px); }
                50% {  transform: translatex(-10px); }
            100% { transform: translatex(0px); }
        }


/***--- STATS ---***/
#stats {
    overflow: visible;
    margin-top: -2vw;
    background-color: #f0f0f0;
    border-top: 6px solid #f0f0f0;
    padding-bottom: 5vw;
    z-index: 20;
}
    #stats .inner {
        margin-top: -2vw;
        width: 60%;
        text-align: center;
        background: #ffffff;
        border-radius: 1.5vw;
        padding: 2vw;
    }
        #stats .inner .w-mixed .w-33 i {
            color: #6ea833;
            font-size: 2.2vw;
            padding-right: 5px;
        }
        #stats .inner .w-mixed .w-33 .counter {
            font-size: 2.2vw;
            font-family: 'sol-800';
        }
            #stats .inner .w-mixed .w-33 div:nth-child(2) {
                color: #999999;
                font-size: 1.4vw;
                padding-top: .5vw;
                text-transform: capitalize;
            }


/***--- HOW ---***/
#how .inner {
    padding-bottom: 6vw;
}
#how .inner .label, #how .inner .title {
    text-align: center;
}
#how .inner .title {
    padding-bottom: 1vw;
}
#how .inner .step {
    overflow: hidden;
    margin-top: 4vw;
    width: 100%;
    float: left;
}

    /* right */
    #how .step .s-right {
        float: right;
    }

    /* left */
    #how .step .s-left {
        float: left;
    }

    /* img */
    #how .step .img {
        background-color: #f0f0f0;
        border-radius: 1.5vw;
        padding: 5vw 5vw;
        transition: 0.4s;
    }
        #how .step .img:hover {
            padding: 3vw 2vw;
            cursor: pointer;
        }
        #how .step .img img {
            width: 100%;
            border-radius: 1vw;
        }

    /* text */
    #how .s-text {
        padding-right: 30px;
    }
    #how .step .num {
        overflow: hidden;
        position: relative;
        height: 4.5vw;
        width: 4.5vw;
        background: #6ea833;
        color: #ffffff;
        font-size: 1.7vw;
        text-align: center;
        font-family: 'sol-800';
        border-radius: 100%;
        padding-top: 1.2vw;
        float: left;
    }
    #how .step .text {
        overflow: hidden;
        position: relative;
        margin-top: 2.3vw;
        width: 100%;
        float: left;
    }
        #how .step .text span:nth-child(1) {
            font-family: 'sol-700';
            font-size: 1.4vw;
            text-transform: uppercase;
            display: block;
        }
        #how .step .text span:nth-child(2) {
            font-size: 1.5vw;
            line-height: 1.3;
            color: #999999;
            padding-top: 1vw;
            display: block;
        }
        #how .step .text span:nth-child(3) {
            position: relative;
            margin-top: 1.4vw;
            color: #6ea833;
            font-size: 1.2vw;
            border: 1px solid #6ea833;
            border-radius: 500px;
            text-transform: capitalize;
            padding: 1vw 1.5vw;
            transition: 0.4s;
            float: left;
        }
            #how .step .text span:nth-child(3):hover {
                background-color: #f9f9f9;
                cursor: pointer;
            }
        #how .step .text i {
            font-size: 1vw;
            padding-left: .3vw;
        }


/***--- BENEFITS ---***/
#benefit {
    background-color: #f0f0f0;
}
#benefit :is(.label, .title, .sub-text) {
    text-align: center;
}
#benefit .box-con {
    overflow: hidden;
    position: relative;
    margin-top: 2vw;
    padding: .5vw;
    float: left;
}
    #benefit .box {
        overflow: hidden;
        position: relative;
        margin-top: 1vw;
        background-color: #ffffff;
        border-radius: 1.5vw;
        padding: 2vw 1.5vw;
        float: left;
    }
        #benefit .box .ico {
            overflow: hidden;
            position: relative;
            height: 5.5vw;
            width: 5.5vw;
            background-color: #6ea833;
            text-align: center;
            border-radius: 100%;
            padding-top: 1.7vw;
            float: left;
        }
        #benefit .box i {
            color: #ffffff;
            font-size: 2vw;
        }
        #benefit .box .ico-head {
            overflow: hidden;
            position: relative;
            width: 100%;
            margin-top: 1.8vw;
            color: #333333;
            font-size: 1.2vw;
            font-family: 'sol-700';
            text-transform: uppercase;
            float: left;
        }
        #benefit .box .ico-sub {
            overflow: hidden;
            position: relative;
            width: 100%;
            margin-top: .9vw;
            font-size: 1.4vw;
            line-height: 1.4;
            color: #777;
            float: left;
        }
    #benefit .box2 {
        overflow: hidden;
        position: relative;
        margin-top: 1vw;
        background-color: #6ea833;
        color: #ffffff;
        border-radius: 1.5vw;
        padding: 2.2vw 1.5vw;
        float: left;
    }
        #benefit .box2 .ico-head {
            overflow: hidden;
            position: relative;
            width: 100%;
            font-size: 1.3vw;
            font-family: 'sol-500';
            text-transform: uppercase;
            float: left;
        }
        #benefit .box2 .ico-sub {
            overflow: hidden;
            position: relative;
            width: 100%;
            margin-top: 1.2vw;
            font-size: 1.4vw;
            line-height: 1.4;
            float: left;
        }
        #benefit .box2 button {
            margin-top: 1.7vw;
            text-transform: capitalize;
            border-radius: 500px;
        }


/***--- WHY ---***/
#why :is(.label, .title, .sub-text) {
    text-align: center;
}

#why .why-sec {
    overflow: hidden;
    position: relative;
    margin-top: 5vw;
    width: 100%;
    float: left;
}
    #why .why-sec .title {
        margin-top: 0px;
        font-size: 1.4vw;
        text-align: left;
        padding-bottom: .3vw;
    }

#why .point-bg {
    background: #f0f0f0;
    border-radius: 2vw;
    padding: 3vw;
}
#why .point-con {
    overflow: hidden;
    position: relative;
    margin-top: 1.5vw;
    width: 100%;
    float: left;
}
    #why .point-con .point {
        overflow: hidden;
        position: relative;
        margin-top: 1.2vw;
        width: 100%;
        background: #ffffff;
        border-radius: 1vw;
        padding: 1.8vw 2vw;
        float: left;
    }
        #why .point-con .point:nth-child(1) {
            margin-top: 0px;
        }
    #why .point-con .point .point-title {
        overflow: hidden;
        position: relative;
        width: 100%;
        cursor: pointer;
        float: left;
    }
        #why .point-con .point .point-title i {
            position: relative;
            color: #6ea833;
            font-size: 1.6vw;
            padding-top: .1vw;
            float: left;
        }
        #why .point-con .point .point-title .ico::after {
            overflow: hidden;
            position: relative;
            margin-top: .2vw;
            content: '\f067';
            font-family: FontAwesome;
            font-size: 1.3vw;
            float: right;
        }
            .point-con .open::after {
                content: "\f068" !important;
            }
    #why .point-con .point .point-title .text {
        overflow: hidden;
        position: relative;
        margin: 0;
        margin-top: .15vw;
        font-size: 1.3vw;
        font-family: 'sol-400';
        text-transform: capitalize;
        padding-left: 1.2vw;
    }
        #why .point-con .point .point-desc {
            overflow: hidden;
            position: relative;
            margin-top: 1.3vw;
            color: #666666;
            font-size: 1.3vw;
            line-height: 1.4;
            float: left;
            display: none;
        }
            #why .point-con .point .point-desc span {
                display: block;
                padding-bottom: 1vw;
            }
            #why .point-con .point .point-desc div {
                font-size: .8vw;
                color: #333333;
                text-transform: capitalize;
            }
            #why .point-con .point .point-desc a {
                color: #6ea833;
            }

    #why .button {
        overflow: hidden;
        position: relative;
        margin-top: 4vw;
        width: 100%;
        text-align: center;
        float: left;
    }
        #why .button button {
            width: 30%;
            font-size: 1.3vw;
            text-transform: capitalize;
            border-radius: 500px;
            padding: 1.8vw 0vw;
        }
        #why .button i {
            font-size: 1.15vw;
            padding-left: .5vw;
        }


/***--- DEMO ---***/
#demo {
    background-color: #f0f0f0;
    padding: 0px;
    padding-bottom: 1.5vw;
}
#demo :is(.label, .title, .sub-text ) {
    text-align: center;
}

    /* arrow */
    #demo .arrows {
        overflow: hidden;
        position: relative;
        margin-top: 3vw;
        width: 100%;
        text-align: center;
        float: left;
    }
        #demo .arrows i {
            height: 4vw;
            width: 4vw;
            background-color: #333333;
            color: #ffffff;
            font-size: 1.6vw;
            text-align: center;
            border-radius: 100%;
            padding-top: 1.2vw;
            transition: 0.4s;
            display: inline-block;
        }
            #demo .arrows i:hover {
                background-color: #6ea833;
                cursor: pointer;
            }
        #demo .arrows i:nth-child(2) {
            margin-left: .6vw;
        }

    /* posts */
    #demo .demo-slider {
        overflow: hidden;
        position: relative;
        margin: 0 auto;
        margin-top: 3vw;
        width: 100%;
    }
        #demo .post {
            overflow: hidden;
            position: relative;
            background-color: #ffffff;
            border-radius: 1.5vw;
            padding: 1.5vw;
            padding-bottom: 2vw;
            float: left;
        }
            #demo .post img {
                overflow: hidden;
                position: relative;
                margin-bottom: 1.5vw;
                width: 100%;
                border-radius: 1.5vw;
                text-align: center;
                float: left;
            }
            #demo .post .ico {
                overflow: hidden;
                position: relative;
                height: 5.5vw;
                width: 5.5vw;
                background-color: #6ea833;
                text-align: center;
                border-radius: 500px;
                padding-top: 1.7vw;
                float: left;
            }
            #demo .post i {
                color: #ffffff;
                font-size: 2.2vw;
            }
            #demo .post .cat {
                overflow: hidden;
                margin: 0;
                padding-left: 1.1vw;
            }
                #demo .post .cat div:nth-child(1) {
                    overflow: hidden;
                    position: relative;
                    width: 100%;
                    margin-top: 1.5vw;
                    font-size: 1.4vw;
                    font-family: 'sol-400';
                    text-transform: capitalize;
                    float: left;
                }
                #demo .post .cat div:nth-child(2) {
                    overflow: hidden;
                    position: relative;
                    color: #6ea833;
                    font-size: 1.2vw;
                    float: left;
                }
            #demo .post .txt {
                overflow: hidden;
                position: relative;
                width: 100%;
                margin-top: 1.2vw;
                color: #777777;
                font-size: 1.3vw;
                line-height: 1.3;
                padding-bottom: .6vw;
                float: left;
            }


/***--- JOIN ---***/
#join {
    background-color: #6ea833;
    padding-bottom: 1vw;
}
#join .inner {
    text-align: center;
}
    #join .inner-con {
        overflow: hidden;
        position: relative;
        margin: 0 auto;
        width: 100%;
        color: #ffffff;
    }
        #join .title {
            margin-top: 0px;
            color: #ffffff;
       
        }   
        #join .sub-text {
            color: #ffffff;
        }

/* bg images */
#join .bg {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
}
    #join .bg div {
        overflow: hidden;
        position: absolute;
        height: 120%;
        background-repeat: no-repeat;
    }
        #join .bg .bg-1 {
            left: 0;
            width: 21%;
            background-image: url('../img/test-img-1.png');
            background-size: auto 110%;
            background-position: right top;
            animation: bg-move-1 4s infinite;
        }
            @keyframes bg-move-1 {
                0% { transform: translatey(0px); }
                    50% {  transform: translatey(-15px); }
                100% { transform: translatey(0px); }
            }
        #join .bg .bg-2 {
            left: 0;
            width: 21%;
            background-image: url('../img/test-img-2.png');
            background-size: auto 110%;
            background-position: right top;
            animation: bg-move-2 3s infinite;
        } 
            @keyframes bg-move-2 {
                0% { transform: translatey(0px); }
                    50% {  transform: translatey(25px); }
                100% { transform: translatey(0px); }
            }
        #join .bg .bg-3 {
            right: 0;
            width: 21%;
            background-image: url('../img/test-img-1.png');
            background-size: auto 110%;
            background-position: left top;
            animation: bg-move-1 4s infinite;
        }
        #join .bg .bg-4 {
            right: 0;
            width: 21%;
            background-image: url('../img/test-img-2.png');
            background-size: auto 110%;
            background-position: left top;
            animation: bg-move-2 3s infinite;
        }

/* form */
#join .join-form {
    overflow: hidden;
    position: relative;
    margin-top: 2vw;
    width: 60%;
    background-color: #ffffff;
    border-radius: 500px;
    padding: .8vw;
    display: inline-block;
}
    #join .join-form input {
        position: relative;
        margin: 0;
        width: 73%;
        font-size: 1.4vw;
        border: none;
        padding: 1.7vw 1.5vw;
        border-radius: 0vw;
        border: none !important;
        float: left;
    }
        #join .join-form input:focus, #join .join-form input:hover {
            outline: none;
            border: none;
            box-shadow: none;
        }
    #join .join-form button {
        width: 27%;
        font-size: 1.4vw;
        border-radius: 500px;
        padding: 1.7vw 0vw;
        float: right; 
    }









        
/*** ----- BREAKPOINTS ----- ***/

/* Tablet */
@media screen and (min-device-width: 650px)
and (max-device-width: 1024px) {





}

/* Mobile */
@media screen and (max-width: 750px) {


    /** HERO **/
    #hero :is(.ocean, .inner .right ) {
        display: none;
    }
    #hero {
        background-image: none;
        background-color: #f0f0f0;
    }
    #hero .inner .left{
        overflow: hidden;
        position: relative;
        width: 100%;
        padding: 40px 5px;
        padding-bottom: 75px;
        float: left;
    }

        /* heading */
        #hero .left :is(.head, .sub-head) { 
            display: none;
        }
        #hero .mhead { 
            overflow: hidden;
            position: relative;
            margin-top: 0px;
            font-size: 45px;
            color: #333333;
            font-family: 'sol-800';
            line-height: 1.1;
            text-transform: capitalize;
            padding-bottom: 5px;
            display: block;
        }
            #hero .mhead span {
                font-size: 45px;
                color: #6ea833;
                font-family: 'sol-400';
                
            }
        #hero .msub {
            overflow: hidden;
            position: relative;
            width: 100%;
            margin-top: 10px;
            font-size: 25px;
            color: #777777;
            text-align: left;
            line-height: 1.4;
            float: left;
            display: block;
        }

        /* form */
        #hero .hero-form {
            margin-top: 30px;
            padding: 10px;
            border-radius: 15px;
        }
        #hero .hero-form input {
            width: 57%;
            font-size: 18px;
            padding: 18.5px 15px;
        }
        #hero .hero-form button {
            width: 43%;
            font-size: 16px;
            padding: 20px 0px;
        }

    /** STATS **/
    #stats {
        margin-top: 0px;
        background-color: #6ea833;
        border-top: 0px;
        padding-bottom: 60px;
    }
    #stats .inner {
        margin-top: -30px;
        width: 95%;
        border-radius: 15px;
        padding: 24px 12px;
    }
    #stats .inner .w-mixed .w-33 i {
        font-size: 30px;
        padding-right: 0px;
        display: block;
    }
    #stats .inner .w-mixed .w-33 .counter {
        font-size: 25px;
        padding-top: 8px;
        display: block;
    }
    #stats .inner .w-mixed .w-33 div:nth-child(2) {
        color: #999999;
        font-size: 15px;
        padding-top: 2px;
    }

    /** HOW **/
    #how .inner {
        padding-bottom: 80px;
    }
    #how .w-mixed {
        width: 100%;
        margin-left: 0px;
        float: left;
    }
    #how .inner .label, #how .inner .title {
        text-align: center;
    }
    #how .inner .title {
        padding-bottom: 30px;
    }
    #how .inner .step {
        overflow: hidden;
        position: relative;
        margin-top: 30px;
        width: 100%;
        float: left;
    }
    
        /* right */
        #how .step .s-right {
            float: left;
        }

        /* img */
        #how .step .img {
            margin-top: 25px;
            border-radius: 20px;
            padding: 20px;
        }
            #how .step .img:hover {
                padding: 13px 10px;
            }
        #how .step .img img {
            border-radius: 15px;
        }

        /* text */
        #how .s-text {
            padding: 0px !important;
        }
        #how .step .num {
            font-size: 25px;
            border-radius: 15px;
            padding: 12px 27px;
        }
        #how .step .text {
            margin-top: 20px;
        }
            #how .step .text span:nth-child(1) {
                font-size: 20px;
            }
            #how .step .text span:nth-child(2) {
                font-size: 20px;
                padding-top: 10px;
            }
            #how .step .text span:nth-child(3) {
                margin-top: 20px;
                font-size: 17px;
                padding: 15px 25px;
            }
        #how .step .text i {
            font-size: 13px;
            padding-left: 5px;
        }

    /** BENEFITS **/
    #benefit {
        padding-bottom: 40px;
    }

        /* list */
        #benefit .box-con {
            margin-top: 20px;
            padding: 0px;
        }
        #benefit .box {
            margin-top: 20px;
            margin-left: 0px;
            width: 100%;
            border-radius: 15px;
            padding: 40px 25px;
        }
        #benefit .box .ico {
            width: 80px;
            padding: 20px 0px;
            border-radius: 15px;
        }
        #benefit .box i {
            font-size: 30px;
        }
        #benefit .box .ico-head {
            margin-top: 25px;
            font-size: 19px;
        }
        #benefit .box .ico-sub {
            margin-top: 8px;
            font-size: 20px;
            line-height: 1.2;
        }

        /* list: LAST BOX */
        #benefit .box2 {
            margin-top: 20px;
            margin-left: 0px;
            width: 100%;
            border-radius: 15px;
            padding: 30px 25px;
        }
        #benefit .box2 .ico-head {
            font-size: 20px;
        }
        #benefit .box2 .ico-sub {
            margin-top: 15px;
            font-size: 20px;
            line-height: 1.2;
        } 
        #benefit .box2 button {
            margin-top: 25px;
        }

    /** WHY **/
    #why {
        padding-bottom: 40px;
    }

        /* sections */
        #why .why-sec {
            margin-top: 40px;
        }
            #why .why-sec:nth-last-of-type(2) {
                margin-top: 50px;
            }
        #why .why-sec .mtitle {
            font-size: 23px;
            text-align: left;
        }
        #why .why-sec .msub {
            margin-top: 5px;
            font-size: 20px;
            text-align: left;
            padding-bottom: 15px;
        }

        /* points */
        #why .point-bg {
            margin-top: 15px;
            border-radius: 15px;
            padding: 25px 20px;
        }
        #why .point-con {
            margin-top: 8px;
        }
        #why .point-con .point {
            margin-top: 15px;
            border-radius: 10px;
            padding: 20px 15px;
        }
        #why .point-con .point .point-title i {
            font-size: 18px;
            padding-top: 2px;
        }
        #why .point-con .point .point-title .ico::after {
            display: none;
        }
        #why .point-con .point .point-title .text {
            margin-top: .5px;
            font-size: 18px;
            padding-left: 9px;
        }
        #why .point-con .point .point-desc {
            margin-top: 15px;
            font-size: 19px;
            line-height: 1.3;
        }
        #why .point-con .point .point-desc span {
            padding-bottom: 20px;
        }
        #why .point-con .point .point-desc div {
            font-size: 15px;
        }

        /* button */
        #why .button {
            margin-top: 30px;
        }
        #why .button button {
            width: 100%;
            font-size: 18px;
            border-radius: 15px;
            padding: 25px 20px;
        }
        #why .button i {
            font-size: 15px;
            padding-left: 7px;
        }

    /** DEMO **/
    #demo {
        padding-bottom: 50px;
    }

        /* arrow */
        #demo .arrows {
            display: none;
        }
        
        /* posts */
        #demo .demo-slider {
            margin-top: 30px;
        }
        #demo .post {
            border-radius: 20px;
            padding: 25px;
            padding-bottom: 30px;
        }
        #demo .post img {
            margin-bottom: 20px;
            border-radius: 15px;
        }
        #demo .post .ico {
            width: 70px;
            border-radius: 15px;
            padding: 20px 0px;
        }
        #demo .post i {
            font-size: 25px;
        }
        #demo .post .cat {
            padding-left: 15px;
        }
            #demo .post .cat div:nth-of-type(1) {
                margin-top: 12px;
                font-size: 12px;
            }
            #demo .post .cat div:nth-of-type(2) {
                font-size: 17px;
            }
        #demo .post .txt {
            margin-top: 15px;
            font-size: 13px;
        }

    /** JOIN **/
    #join .inner {
        padding-bottom: 70px;
    }  

    /* text */
    #join .mtitle {
        color: #ffffff;
        font-family: 'sol-700';
    }
    #join .msub {
        color: #ffffff;
    }

    /* form */
    #join .join-form {
        margin-top: 30px;
        width: 100%;
        border-radius: 15px;
        padding: 10px;
    }
    #join .join-form input {
        width: 57%;
        font-size: 18px;
        padding: 18.5px 15px;
    }
    #join .join-form button {
        width: 43%;
        font-size: 16px;
        padding: 20px 0px;
    }


}