/*------------------------------------*/
/*Additional Class*/
/*------------------------------------*/
/*Global Background*/
.bg-soft-yellow {background: #f1e9cd !important}
.bg-soft-light {background: #e8e2e2 !important}
.bg-medium-light {background: #F0F1F1 !important}
.w-70 {width: 70%!important;}
.w-65 {width: 65%!important;}
.mxm-2 {margin: 0 -5px}
.pt-6 {padding-top: 6rem!important;}
.py-6 {padding: 6rem 0!important;}
.py-7 {padding: 7rem 0!important;}
.pointer {cursor: pointer!important}
.font-xs { font-size: .675rem!important}
.font-sm { font-size: .775rem!important}
.font-md { font-size: .850rem!important}
.font-lg { font-size: 1rem!important}
.font-xl {font-size: 1.1rem!important;}
.font-weight-medium {font-weight: 500!important;}
.text-black {color: #111!important}
.text-orangered {color: orangered!important}
.over-hidden {overflow: hidden !important}
.full-index {z-index: 10!important}
.relative {position: relative !important}
.absolute {position: absolute !important}
.fixed {position: fixed !important}
.sticky-offset4 {
    top: 5rem!important;
    padding-top: 0;
    z-index: 10;
}
.imgCont {overflow: hidden}
.imgCont img {
    max-width: 100%;
    max-height: 100%;
}


.theme-btn{
    position: relative;
    display: inline-block;
    color: #fff!important;
    padding: 15px 1rem;
    text-align: center;
    cursor: pointer;
    -webkit-border-radius: 3px!important;
    -moz-border-radius: 3px!important;
    border-radius: 3px!important;
    z-index: 1;
    -webkit-font-smoothing: antialiased!important;
    outline-color: rgba(0,78,255,0.5);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /*box-shadow: 0 0 0 0.5px rgba(50,50,93,.17), 0 2px 5px 0 rgba(50,50,93,.1), 0 1px 1.5px 0 rgba(0,0,0,.07), 0 1px 2px 0 rgba(0,0,0,.08), 0 0 0 0 transparent!important;*/
    transition: all 500ms ease;
}
.navbar .theme-btn {
    padding: 0 .5rem!important;
}
.theme-btn-orange {
    /*background-color: #f59525;*/
    background: linear-gradient(to right, rgb(230, 59, 0), rgb(255, 165, 0));
    color: #fff!important;
}
.theme-btn-orange:hover {
    color: #fff!important;
}
.theme-btn-shopee {
    background-color: #fa5200;
    color: #000!important;
}
.theme-btn-shopee:hover {
    color: #fff!important;
}
.theme-btn-orange svg {
    fill: #fff;
    stroke: #fff;
}
.theme-btn-black {
    background-color: #1e1e2a;
    color: #fff!important;
}
.theme-btn-oxblood {
    background: linear-gradient(to right, rgb(0 0 0), rgb(38 11 62) 17%, rgb(0 0 0));
    color: #fff!important;
}
.theme-btn-white {
    background: -webkit-linear-gradient(0deg, #fff, #eee 50%);
    color: #333!important;
}
.theme-btn.theme-btn-white:hover {
    color: #fff!important;
}

.theme-btn b {
    font-size: 1.5rem;
    margin-right: .5rem;
    display: inline-block;
}
.theme-btn i{
    position: relative;
}
.theme-btn::before{
    position: absolute;
    content: '';
    background: #000000;
    width: 0;
    height: 100%;
    top: 0;
    right: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    z-index: -1;
    transition: all 500ms ease;
}
.theme-btn-black::before{
    background: #f59525;
}

.theme-btn:hover:before{
    width: 100%;
    left: 0;
}




html, body {
    height: 100%;
    min-height: 100vh;
    font-size: 15px;
}
a {
    text-decoration: none !important;
    cursor: pointer;
}

.container-fluid {
    /*max-width: 1320px;*/
    /*border-left: 1px solid red;*/
    /*border-right: 1px solid red;*/
}


/*Main*/
.main-content {
    height: auto;
    /*padding-top: 5.5rem;*/
    min-height: 565px;
}







/*Back To Shop*/
#back-to-top a {
    background-color: #f6f6f6 !important;
    width: 3.5rem;
    height: 3.5rem;
    line-height: 3.3rem;
    border: 2px solid #101010;
    overflow: hidden;
    z-index: 80;
    text-align: center;
    position: fixed;
    right: .5rem;
    bottom: -40%;
    border-radius: 5rem;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -webkit-transition: all .3s;
    transition: all .3s;
}
#back-to-top a:hover {
    background-color: #101010 !important;
    color: #fff;
}
#back-to-top .arrow-icon {
    fill: #101010;
    stroke: #101010;
    margin-top: 0;
    margin-left: 0;
    transform: rotate(-90deg);
    display: inline-block;
}
#back-to-top a:hover .arrow-icon {
    fill: #fff;
    stroke: #fff;
}
#back-to-top:hover a {
    color: #252a2e
}
#back-to-top a .fa {
    font-size: 40px;
    color: #fff;
    line-height: 100%;
    position: absolute;
    top: 3px;
    left: 12.1px
}
#back-to-top a span {
    font-size: 8px;
    font-weight: 400;
    line-height: 100%;
    position: absolute;
    bottom: 11px;
    left: 10.5px;
    text-transform: uppercase
}
#back-to-top.show a {
    bottom: .5rem;
}

#fp-nav ul, .fp-slidesNav ul {
    background-color: #ffffff57!important;
    margin: 0;
    padding: 1rem 0!important;
    border-radius: 1rem;
}
#fp-nav ul li .fp-tooltip.fp-right {
    right: 30px!important;
}
#fp-nav ul li .fp-tooltip {
    top: -5px!important;
}

#fp-nav ul li a span, .fp-slidesNav ul li a span {
    background: #fff!important;

    /*height: 8px!important;*/
    /*width: 8px!important;*/
}
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {
    /*height: 20px!important;*/
    /*width: 20px!important;*/
    /*margin-left: -5px;*/
}
canvas {
    display: block;
    vertical-align: bottom;
}
#particles-js {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

#fp-nav {
    top: initial!important;
    bottom: -2rem!important;
}



#section5 {
    background: url("../img/bg-4.jpg") no-repeat center center transparent;
    background-size: cover;
}
#section3 {
    background: url("../img/bg-2.jpg") no-repeat center center transparent;
    background-size: cover;
}
.custom::before {
    content: '';
    background-color: rgba(0, 0, 0, 0.72);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
}
#section4,
#section2 {
    background: url("../img/bg-1.jpg") no-repeat center center transparent;
    background-size: cover;
}

#section2 .container-fluid {
    /*padding: 0 6rem 0 0;*/
    color: #fff;
}

#section2 .box {
    position: absolute;
    top: 50%;
    padding-left: 6rem;
    text-align: left;
}
#section2 .inner {
    min-height: 100vh;
    color: #101010!important;
    text-align: center;
    padding: 10rem 2rem 0!important;
    position: relative;
    z-index: 10;
}
#section2 .list:nth-of-type(2) {
    background-color: #ff8d20!important;
}
#section2 .list:nth-of-type(3) {
    background-color: #fff!important;
}
#section2 .list:nth-of-type(4) {
    background-color: #2a003e!important;
}
#section2 .list:nth-of-type(4) .inner {
    color: #fff!important;
}


#section2 .list .imgCont {
    margin: 0 auto;
    display: inline-block;
}
#section2 .list ul {
    font-size: .9rem;
    text-align: left
    /*display: none;*/
}
#section5 .box .title,
#section4 .box .title,
#section3 .box .title,
#section2 .box .title {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 2rem;
}






#section3 .list {
    background-color: #fff;
    color: #101010!important;
}

#section3 .list .imgCont {
    min-width: 14rem;
    min-height: 12rem;
}










.articles .card {
    background-color: transparent!important;
    width: 100%;
    color: #fff;
    position: relative;
    border: none!important;
    padding-bottom: 70%;
    outline: none!important;
    overflow: hidden!important;
    -webkit-border-radius: 0!important;
    -moz-border-radius: 0!important;
    border-radius: 0!important;
    transition: all 0.9s ease-out;
    display: inline-block;
}
.articles .card-header {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    /* -webkit-filter: grayscale(1); */
    /* filter: grayscale(1); */
    width: 100%;
    height: 100%;
    padding: 0!important;
    border-bottom: none!important;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-border-radius: 0!important;
    -moz-border-radius: 0!important;
    border-radius: 0!important;
    -webkit-transition: All .300s linear;
    -moz-transition: All .300s linear;
    -ms-transition: All .300s linear;
    -o-transition: All .300s linear;
    transition: All .300s linear;
}
.articles .card:hover .card-header {
    -webkit-filter: grayscale(0); /* Webkit */
    filter: initial; /* IE6-9 */
    filter: grayscale(0); /* W3C */
    -webkit-transform: scale(1.3);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}
.articles .card-header::before {
    content: '';
    background: -webkit-linear-gradient(70deg, #000000, #0e000300 60%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    -webkit-transition: All .300s linear;
    -moz-transition: All .300s linear;
    -ms-transition: All .300s linear;
    -o-transition: All .300s linear;
    transition: All .300s linear;
    display: block;
}
.articles .card:hover .card-header::before {
    background-color: rgba(22, 19, 37, 0.33);
}
.articles .card-body {
    color: #fff;
    padding: 0 2rem 1rem;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}
.articles .card-body .card-title {
    font-size: 1.3rem;
    line-height: 1.2;
}
.articles .card-body .card-dates {
    font-size: .9rem;
}
.articles .card-body .card-tags .fa,
.articles .card-body .card-dates .fa {
    color: #f09125;
}
.articles  .card-tags {
    font-size: .9rem;
    color: #fff;
    left: .5rem;
    bottom: .5rem;
}
.articles  .card-tags i,
.articles  .card-tags span {
    left: .5rem;
    bottom: .5rem;
}







/*Contact Us*/
.contact {}
.contact {}
.contact .imgCont {width: 10rem}
.contact form {
    width: 100%;
}
.contact .globalForm .form-group input,
.contact .globalForm .form-group input:active,
.contact .globalForm .form-group input:focus,
.contact .globalForm .form-group textarea {
    background-color: #eee !important;
    padding-left: 1rem;
}
.contact .globalForm .form-group span {
    color: red;
}
.contact .globalForm .form-group label  {
    font-weight: 600;
}







#section1 {
    background: url("../img/bg-2.jpg") no-repeat center center transparent;
    background-size: cover;
}
#section1 .shape1 {
    background: linear-gradient(to right, rgb(0 0 0), rgb(38 11 62) 17%, rgb(0 0 0));
    width: 40%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: block;
}
#section1 .container-fluid {padding: 6rem 6rem}
#section1 .imgbg {
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 41rem;
    position: relative;
    left: -5rem;
}
#section1 .box {
    background-color: #ffffff3b!important;
    color: #fff;
}
#section1 .box .title {
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 2rem;
}
#section1 .box p {
    font-size: 1.3rem;
}



/*Footer*/
footer {
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    color: #fff;
}
footer .container-fluid {
    padding: 1rem 2rem;
}
footer .copyright {
    font-size: .8rem;
}
.office-address,
.office-time,
.phone-number,
.mail-address,
.gmaps {
    position: relative;
    padding-left: 2.3rem;
}
.office-address .fa,
.office-time .fa,
.phone-number .fa,
.mail-address .fa,
.gmaps i.fa {
    width: 1.5rem;
    text-align: center;
    position: absolute;
    top: 5px;
    left: 0;
}
footer a {
    /*font-size: 1rem;*/
    color: #fff;
}
footer a:hover {
    color: #fff;
}
footer .imgCont {
    width: 19rem;
}
footer .border-top {
    border-top-color: #100519!important;
}






/*Navbar*/
.navbar  {
    background-color: transparent!important;
    height: 5.5rem;
    color: #fff;
}
.navbar .navbar-brand {
    width: 15rem;
    height: 5.4rem;
    padding-left: 1rem;
}
.navbar .navbar-brand img {
    max-width: 100%;
    max-height: 100%;
}
.navbar-collapse .navbar-brand {
    display: none!important;
}
.navbar-toggler {
    background-color: red;
}
.navbar .navbar-nav {
    -webkit-flex-direction: row!important;
    -ms-flex-direction: row!important;
    -o-flex-direction: row!important;
    flex-direction: row!important;
}
.navbar .navbar-nav li {
    white-space: nowrap;
    margin-right: 1rem;
    display: inline-block;
}
.navbar .nav-link {
    font-size: .9rem;
    line-height: 1.2;
    font-weight: 700;
    color: #fff!important;
    position: relative;
    padding-right: 0!important;
    padding-left: 0!important;
}
.navbar .nav-link::after {
    content: '';
    width: 0;
    height: 1px;
    border-top: 3px solid #e18025;
    position: absolute;
    bottom: -.1rem;
    left: 0;
    -webkit-transition: All .15s linear;
    -moz-transition: All .15s linear;
    -ms-transition: All .15s linear;
    -o-transition: All .15s linear;
    transition: All .15s linear;
    display: inline-block;
}
.navbar .navbar-nav li.active a::after,
.navbar .navbar-nav li:hover a::after {
    width: 100%;
}



.widgets {
    background-color: #000;
    padding: 0 1rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 300000;
    display: none;
}


.modal .close {
    width: 2rem;
    height: 2rem;
    color: #fff!important;
    line-height: 1!important;
    text-shadow: none!important;
    text-align: center;
    outline: none!important;
    cursor: pointer;
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 55;
    -webkit-border-radius: 3rem;
    -moz-border-radius: 3rem;
    border-radius: 3rem;
    display: inline-block;
}
.modal .close,
.modal .close span {
    opacity: 1!important;
}
.modal .modal-dialog,
.modal .modal-content,
.modal .modal-body {
    background-color: transparent;
    height: calc(100vh - 4rem);
}
.modal .modal-body .imgCont {
    height: 100%;
}
.modal .modal-body .imgCont img {
    max-width: initial;
    max-height: initial;
    min-height: 100%;
}


/*Group Style*/
.event:before,
.timeline:before,
.comunity::before,
.comunity::after,
.sosmed a:before,
.sosmed a:after,
footer::before,
footer::after,
.theme-btn:before,
.regulation::before,
.regulation ul li::before,
.actionStep::before,
.commissions::after,
.commissions::before,
.how-to-join::before,
.payment-level::before,
.payment-level::after,
.benefits .bc::before,
.benefits  .head::before,
.actionStep .list::before,
.instruction-guide::before,
.instruction-guide::after,
.top-headline::after,
.how-to-join .ornament.type1::before,
.how-to-join .ornament.type2::before,
.how-to-join .ornament.type1::after,
.how-to-join .ornament.type2::after {
    content: '';
    display: block;
}

.comunity::before,
.payment-level::before,
.payment-level::after,
.regulation::before,
.commissions::before,
.commissions::after,
.instruction-guide::before,
.how-to-join .ornament.type1::after,
.how-to-join .ornament.type2::after {
    background-size: contain!important;
    -o-background-size: contain!important;
    -moz-background-size: contain!important;
    -webkit-background-size: contain!important;
}

footer::before {
    background-size: cover!important;
    -o-background-size: cover!important;
    -moz-background-size: cover!important;
    -webkit-background-size: cover!important;
}

footer::before,
footer::after,
.comunity::before,
.comunity::after,
.instruction-guide::before,
.instruction-guide::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/*Section Top Headline*/
.top-headline {
    height: calc(100vh - 3rem);
}
.top-headline .container-fluid,
.top-headline .container-fluid .row,
.top-headline .container-fluid .row .col-5 {
    height: inherit;
}
.top-headline .imgCont.first {
    width: calc(100vw / 2.3);
    height: calc(100vh - 7rem);
    position: relative;
    left: -13rem;
    bottom: -1rem;
    z-index: 4;
}
.top-headline .imgCont.first img {
    min-height: 100%;
}
.top-headline .box {
    padding-top: 0;
    position: absolute;
    z-index: 5;
    top: 50%;
    -webkit-transform: translateY(-65%);
    -moz-transform: translateY(-65%);
    -ms-transform: translateY(-65%);
    -o-transform: translateY(-65%);
    transform: translateY(-65%);
}
.top-headline .all {line-height: 1.1}
.top-headline .title {
    color: #f47500!important;
    font-size: 4rem!important;
    font-weight: 900!important;
    letter-spacing: -1px;
}
.top-headline .sub-title {font-size: 3rem!important;}
.top-headline .desc {
    font-size: 1.5rem!important;
    display: inline-block;
}
.top-headline .desc .price {
    font-size: 4.5rem!important;
    font-weight: 700;
    letter-spacing: -5px;
    position: relative;
    padding-left: 3rem;
    display: inline-block;
}
.top-headline .desc .price::before {
    content: 'UP TO';
    width: 2rem;
    color: #212529;
    font-size: 1.7rem!important;
    font-weight: 700;
    letter-spacing: .5px;
    position: absolute;
    top: .8rem;
    left: 0;
    display: inline-block;
}
.top-headline .desc .price small {
    color: #212529;
    letter-spacing: .5px;
    /*position: absolute;*/
    left: 0;
    bottom: -2.5rem;
}
.top-headline .desc .price i {
    font-style: normal;
}
.top-headline .desc .fir-text {
    font-weight: 700;
    position: absolute;
    width: 1rem;
    top: 3.3rem;
    display: block;
}
.top-headline .desc .sec-text {
    text-align: right;
    display: block;
}
.top-headline .theme-btn {
    font-size: 1.2rem;
}



/*About*/
.about {background-color: #f1f2f4
}
.about::after {
    content: "";
    background: url(../img/bg-section-top-outside.svg) no-repeat 50% 100%;
    background-size: contain;
    width: 100%;
    height: 30px;
    position: absolute;
    top: -30px;
    right: 0;
    display: block;
}
.about p {
    font-size: 1.3rem;
}


/*Service*/
.service {}
.service .list {
    background: linear-gradient(to right, rgb(0 0 0), rgb(38 11 62) 17%, rgb(0 0 0));
    color: #fff!important;
}

/*=========================================*/
/*Plugins Custom*/
/*=========================================*/
/*Sosmed*/
.sosmed {
    height: 3px;
    line-height: 3px;
    margin-top: -6px;
}
.sosmed a {
    background: #1d1d1d;
    width: 3.5rem;
    height: 3.5rem;
    padding: 2px;
    margin-right: 5px;
    text-align: center;
    overflow: hidden;
    text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display: inline-block;
}
.sosmed a:before,
.sosmed a:after {
    font-family: FontAwesome;
    font-size: 2rem;
    line-height: 1.8;
    color: #fff;
    display: block;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.sosmed a.facebook {background: #3b5998}
.sosmed a.youtube {background: #e62117}
.sosmed a.gplus {background: #db4437}
.sosmed a.twitter {background: #00aced}
.sosmed a.linkedin {background: #1c79b3}
.sosmed a.instagram {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f9a33e+0,9a37b6+100 */
    background: rgb(249,163,62); /* Old browsers */
    background: -moz-linear-gradient(-45deg,  rgba(249,163,62,1) 0%, rgba(154,55,182,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  rgba(249,163,62,1) 0%,rgba(154,55,182,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  rgba(249,163,62,1) 0%,rgba(154,55,182,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9a33e', endColorstr='#9a37b6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.sosmed a:after {color: #fff}
.sosmed a.facebook:before,
.sosmed a.facebook:after {content: '\f09a'}
.sosmed a.youtube:before,
.sosmed a.youtube:after {content: '\f167'}
.sosmed a.gplus:before,
.sosmed a.gplus:after {content: '\f0d5'}
.sosmed a.twitter:before,
.sosmed a.twitter:after {content: '\f099'}
.sosmed a.instagram:before,
.sosmed a.instagram:after {content: '\f16d'}
.sosmed a.linkedin:before,
.sosmed a.linkedin:after {content: '\f0e1'}

.sosmed a:hover:before {margin-top: -3.1rem}
.sosmed a:hover:after {margin-top: -12px}



@keyframes hide{
    0%{ opacity: 1; z-index: 9;  }
    99% { opacity: 0; top:-100px;  }
    100% {  opacity: 0; top:-100px; z-index: 0;   }
}

@keyframes show{
    0%{ opacity: 0 ;  }
    100% { opacity: 1;transform: none; }
}


/*Responsive Desktop*/
@media screen and (max-width: 1700px) {

}
@media screen and (max-width: 1400px) {

}
@media screen and (max-width: 1390px) {

}
@media screen and (max-width: 1290px) {

}
@media screen and (max-width: 1000px) {

}
@media all and (max-width: 900px) {

}
@media screen and (max-width: 768px) {

}
@media all and (max-width: 600px) {

}
@media all and (max-width: 400px) {

}