/*All-rights-reserved, 2019 | VIDEOOWIDE | SOCIOWIDE
Created by Bayu Tara Wijaya
Email: contact@mastara.net
*/

/*TextCharacter*/
body{font-family: 'Montserrat', sans-serif;color:#495057;font-weight:500;}
.f-bai{font-family: 'Montserrat', sans-serif;}

/*componen*/
section{padding:100px 0px;}
#main{padding-top:50px;}
#disclamer{padding:40px 0px;}
.container{
    width: 1200px;   
    max-width: 95%;
}
/*background*/
.bg-main{background:linear-gradient(0deg, #000000 10%, #00000036 50%, #000000f2 100%),url(../img/bg1.jpg) no-repeat top center;background-size:cover;}
.bg-step{background:#eee;}
.bg-why{background:linear-gradient(45deg, #020324c9, #0014ffc9), url(../img/bg_whyy.jpg) no-repeat top center;background-size:cover;}
.bg-testimoni{background:linear-gradient(304deg, #0b1a3c, #020112);}
.bg-sales1{background:#f8faff;}
.bg-sales2{background: url(../img/ilustrasi2.jpg) no-repeat top center;background-size:cover;}
.bg-sales3{background:linear-gradient(60deg, #ffffffa6 5%, #ffffff70 20%, #ffffff47 100%), url(../img/bg-sales1.jpg) no-repeat center center;background-size:cover;}
.bg-sales4{background:linear-gradient(304deg, #000000c7, #000000e8), url(../img/bg-benefit.jpg) no-repeat center center;background-size:cover;}
.bg-introduce{background:linear-gradient(180deg, #00000091, transparent), url(../img/bg-intro.jpg) top center no-repeat;background-size:cover}
.bg-introduce2{background:linear-gradient(45deg, #ffffff96, #ffffffc2), url(../img/557.jpg) no-repeat center center;background-size:cover}
.bg-introduce3{background:linear-gradient(126deg,#100e0c 0%, #0a0401 100%);}
.bg-how{background:linear-gradient(45deg, black, transparent),url(../img/embo.jpg) no-repeat bottom center;background-size:cover;background-attachment:fixed;}
.bg-fitur{background:linear-gradient(180deg, #00000091, transparent), url(../img/bg-intro.jpg) top center no-repeat;background-size:cover;}
.bg-demo{background:#060613;}
.bg-preview{background:#384ae7 url(../img/wave.png) no-repeat center center;background-size:cover;}
.bg-section_modul{background:linear-gradient(60deg, #ffffff29 5%, #ffffff36 20%, #ffffff96 100%), url(../img/bg3.jpg) no-repeat center center;background-size:cover;}
.bg-section_modul-2{background:#202638 url(../img/bg2-01.jpg) no-repeat center center;background-size:cover;}
.bg-modul{background:#090a18;}
.bg-modul-2{background:#0a1116;}
.bg-md{padding:60px 0px; background:linear-gradient(34deg, #dd282000 0%, #ff0841eb 60%),url(../img/bg2.jpg) no-repeat bottom center;background-size:cover;}
.bg-inves{background:#e95e27}
.bg-bonus{background:linear-gradient(60deg, #ffffffa6 5%, #ffffff70 20%, #ffffffdb 100%), url(../img/bg3.jpg) no-repeat bottom center;background-size:cover;background-attachment:fixed;}
.bg-bonus2{background:linear-gradient(60deg, #ffffffa6 5%, #ffffff70 20%, #ffffffdb 100%), url(../img/bg-sales1-01.jpg) no-repeat top center;background-size:cover;background-attachment:fixed;}
.bg-m-2{border-radius: 15px;background: #1c2a36;box-shadow: 10px 10px 10px #04040485;}
.bg-beli{background: linear-gradient(90deg, #000000fc 0%, #0000008a 50%, #000000eb 100%), url(../img/6221798.jpg) no-repeat top center;background-size:cover;}
.bg-jv{background:linear-gradient(45deg, #000000c9, #1a1400eb), url(../img/bg-jv.jpg) no-repeat top center;background-size:cover;}
.bg-element{background:#f3f3f3;}
.bg-matter{padding:30px 0px;background:linear-gradient(20deg, #37b9cf 0%, #471bb6 100%);}
/*.bg-split{background:linear-gradient(20deg, #03c8f6 0%, #1a0082 100%);}*/
.bg-split{padding:60px 0px;background:linear-gradient(34deg, #007bff00 0%, #1e004000 60%),url(../img/bg-main3.jpg) no-repeat top center;background-size:cover;}
.bg-investasi{background:linear-gradient(34deg, #007bff00 0%, #1e004000 60%),url(../img/bg-main3.jpg) no-repeat top center;background-size:cover;}
.bg-black{background:#000;}
/*bg-element*/
.rounded-circle-icon{background:#f4fcfd;padding: 10px;box-shadow:-7px 7px 7px #0e19191c;}
.rounded-box{padding:5px 25px !important;display: inline-block;}

.module-para{background:linear-gradient(45deg, #93f535 0%, #00ff71 80%);border-radius:15px;display:inline-block;}
.module-more{border:1px solid #2e2e2e;border-radius:15px;display:inline-block;color:#2e2e2e;}
.module-more:hover{opacity:0.5;}

.step-text{background:#ffd42e;border-radius:15px;box-shadow:2px 4px 6px #33333352;border:3px solid #fff;}
.step-text-flip{background:#ffbb40;border-radius:15px;position: relative;z-index: 800;}
.step-vid{margin-left: -7%;margin-top: 10%;}
.step-vid-flip{margin-left: 7%;margin-top: 10%;position: relative;z-index: 1000;}
/*text-color*/
.color-head{color:#eee;}
.color-head-dark{color:#fff000;}/* #e33514 #e61d02*/
.color-subhead{color:#ddd;}
.color-body{color:#495057;}
.color-body-light{color:#dcdcdc;}
.color-spot{color:#ff000b;}/*ffa707*/
.color-black{color:#000;}
.text-card{color:#f75b00;}
.text-card:hover{color:#ce0025 !important;}
.rubah-warna{    -webkit-text-fill-color: transparent;
    animation: hue 60s infinite linear;-webkit-background-clip: text;
    background-clip: text;color: #007bff;
    background-image: linear-gradient(92deg, #007bff 0%,#23e950 100%);}

.gradient-text{background:-webkit-linear-gradient(20deg, #f00 20%, #df0015 100%);-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
/*text-componen*/
.text-shadow{text-shadow:2px 2px 3px #00000036;}

/*point list*/
.items li{    background: url(../img/check_brush.png) no-repeat left top;
    padding: 0px 0px 1px 35px;
    list-style: none;
    opacity: 1;
    margin-bottom: -5;
    text-align: left;
    /*font-weight: 300;*/
    margin-left: -42px;}
.items-check li{background: url(../img/check_.png) no-repeat left top;font-weight: 500;margin-bottom: -5px;}
.fak li{    background: url(../img/chat.png) no-repeat left top;
    padding: 0px 0px 1px 45px;
    list-style: none;
    opacity: 1;
    margin-bottom: -10px;
    text-align: left;
    font-weight: 300;
    margin-left: 0;}
.items-select{font-weight:700;color:#fff;text-shadow:0px 2px 5px #333;}
.items-text{color:#eee;font-weight:300;margin-bottom:0.5%;}
.items2 li {
    background: url(../img/check.png) no-repeat left center;
    list-style: none;
    margin-left: -8%;
    padding: 0px 0px 0px 32px;
}
.module-list{
    background: #eee url(../img/6068294.jpg) no-repeat bottom center;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #ffff0075;
    cursor: pointer;
    background-size: cover;
	padding: 0.2em;
}
.n-mod-list{
	float: left;
    background: linear-gradient(45deg, #d3d3d3, #ffffff);
    padding: 5px 10px;
    border-radius: 10px;
    color: #72252d;
    font-size: x-large;
    margin: 0px 10px 0px 5px;
    /*box-shadow: 0px 0px 5px #007bff;*/
}
.module-list:hover{
	background:#fff;
}

.module-list:hover .n-mod-list{
	/*background:#eb1069;*/
	box-shadow:0px 0px 5px #686868
}
.mod-text{
	color:#f00;	
}
.module-list:hover .mod-text{
	color:#7a00ff;	
}
.tooltip-inner {
    background-color: #00cc00;
}
/*.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #00cc00 !important;
}*/
.tooltip .bs-tooltip-left .arrow:before {
    border-right-color: #00cc00 !important;
}
.tooltip .bs-tooltip-bottom .arrow:before {
    border-right-color: #00cc00 !important;
}
.tooltip .bs-tooltip-top .arrow:before {
    border-right-color: #00cc00 !important;
}

.info {
    padding: 70px 15px 30px;
    border-radius: 15px;
    max-width: 360px;
    margin: 0 auto;
    border: 1px solid #212529;
}

.catalog-list{   margin-right: 32px;
    padding: 12px 4px;
    overflow-y: scroll;
    background: #fff;
    border: 4px solid #fff;
    border-radius: 12px;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    box-shadow: 0 30px 40px #0062cc21 !important;
    -moz-box-shadow: 0 30px 40px #0062cc21 !important;
    -webkit-box-shadow: 0 30px 40px #0062cc21 !important;
    -o-box-shadow: 0 30px 40px rgba(85,29,226,.1) !important;
	}
.catalog{
	top: 100px;
    z-index: 800;
	}
.category-item{
	position: relative;
    opacity: .7;
}
.num-item{
	position: absolute;
    top: -2px;
    left: -2px;
    width: 26px;
    height: 26px;
    line-height: 27px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    background-color: #0003;
    border-radius: 50%;
    color: #212529;
}
.num-item.active{
	background-color: #007bff;
	color:#fff;
}

.text-category{
	font-size: 15px;
    margin-left: 36px;
    font-weight: 600;
    line-height: 1.3em;
	color:#222;
}
.list-group-item:hover .text-category{
	color:#4ea4ff
}
.text-category.active{
	color:#0066d3;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
	border: none;
    border-bottom: 1px dashed #70707020;
	
}
.list-group-item.active {
    z-index: 2;
    color: #222;
    background: linear-gradient(45deg, #007bff33, transparent);
    border-color: #fff0;
}
.num-category{	
    font-size: 10px;
    float: right;
    background: #9b9b9b;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    color: #fff;
}
.textmodule-num{
	font-size: small;
    color: #676767;
    padding-left: 10px;
    font-weight: 500;
}
.list-group-item:hover .num-category{
	background: #4ea4ff;
}
.text-category.active .num-category{
	background: #007bff;
}
.hr-module{
	    width: 100%;
    display: inline-block;
    margin-top: 40px;
	border-top-color: coral;
}

.isi-module{
	scroll-margin-top: 100px !important;
}

a.youtube p {
   /* Replace with your desired color */
  text-decoration:none !important;
  padding-left:10px;
  margin-top: -3px;
  font-weight: 500;
  font-size: 0.9rem;
}
a.youtube{
	color: #939393;
	text-decoration:none !important;
}
a.youtube:hover{
	color: #ffc107;
    text-decoration: none !important;
    text-shadow: 0px 0px 5px #ffc107;
}

/* POP UP MODUL */
   .m-body-p .main-btn {
    font-size: 20px;
}
   .main-btn{background:#f7c02a; line-height:44px;font-size: 30px;text-transform: capitalize; display: inline-block;padding:18px 20px 18px 20px;max-width: 566px;width: 100%; color: #fff!important; transition: 0.2s ease all; border:3px solid #f7c02a; line-height: 1;}
.main-btn span {
    font-size: 14px;
    display: block;
    line-height: 1;
    padding-top: 4px;
}
/*Modal Css*/
.banner-popup {background: rgba(0,0,0,0.7);}
.banner-popup .modal-dialog{max-width: 800px;    -webkit-animation: popin .3s;animation: popin .3s;}
.m-header-part{background-color:#f00; text-align: center; padding:1rem; text-align: center;}

.m-header-part p{display: block; color: #fff; margin-top: 0.5rem;  margin-bottom: 0px; font-size: 18px;}
.m-header-part p span{color:#fcc13d;}
.banner-popup .modal-body{padding: 0px;}
.m-body-p{background-color:#ffffff; padding:0rem 1rem;}

.m-logo img{max-width: 250px;}
.m-body-p .main-btn {font-size: 20px;}
.banner-popup  .close{    position: absolute;top:-13px;z-index: 99;background: #000;opacity: 1;width: 32px;height: 32px;line-height: 32px;border-radius: 50%; right: -13px; color: #fff;}
.banner-popup  .close:hover{opacity: 1;}
.modal-content{width:800px;}

/*TIMER*/
.times{padding: 17px 10px 0px 10px;text-align:center;font-size:23pt;line-height:18pt;color:#fff;border-radius: 50%;margin:5px;background:#2e343af2;font-weight: 500;width: 70px;height: 70px;box-shadow: 0px 5px 15px #000000c4;}
.smalltext{font-size:10px;font-weight:400;color:#eee;}

.milliseconds {
   font-size: 0.5em !important;
    line-height: 0px;
    color: #ffc107;
}
.tm-milliseconds{
	/*width: 80px;*/
    /*padding: 10px 4px 0px 4px;*/
}
.countdown.expired { 
  color: red;
  font-size: 20px; 
}

/*tombol*/
.btn-exp{border-radius: 50px;padding:15px 40px;box-shadow:-7px 7px 7px #0e19191c;color:#fff;background:linear-gradient(45deg, #ff000b 0%, #ff000b 80%);background-size:cover;}
.btn-exp:hover{box-shadow:2px 2px 5px #0e191936;color:#eee;background:url(../img/efek_tombol.png) no-repeat right bottom, linear-gradient(90deg, #ff000b 0%, #c70009 70%);background-size:cover;}
.btn-animasi{-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
	}
	
.btn-animasi:hover{-webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
	}
	
/*Video*/
.play{opacity:0.7;box-shadow:0px 0px 80px #000000b8;border-radius:100%;}
.play:hover{opacity:0.8;box-shadow:0px 0px 50px #0000004a;}
.player{padding-top: 100%;margin-left: 10%;}
.thumb{border: 4px solid #fff;border-radius: 8px;filter:drop-shadow(2px 4px 6px #33333352);}
.thumb-color{border-color:#4f5c86;}
.video{position:relative;padding-bottom:56.25%;margin:30px 0px 30px 0px;height:0;background:none;border-radius:10px;}
.video iframe{background:#1e515c;border:5px solid #4b8996;position:relative;top:0;left:0;width:100%;height:100%;}
.video img{position:relative;top:0;left:0;}
.border-video{border:3px solid #ffffff;max-width:100%;box-shadow:6px 9px 30px -6px #6e1903d9;border-radius:10px;background:#8281e6;}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align:center;
}
.thumb-koko {
    bottom: -100%;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    height: auto;
    position: absolute;
    right: 0;
    top: -100%;
}
.thumb-video-asix {
    border: 1px solid #ffc107;
    border-radius: 0px;
    width: 298px;
    border-radius: 10px;
    filter: brightness(1);
}
.myVideo{
	cursor:pointer;
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
	-webkit-transform: scale(.97);
    -moz-transform: scale(.97);
    -ms-transform: scale(.97);
    -o-transform: scale(.97);
    transform: scale(.97);
}
.myVideo:hover{
	-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
	
	border-radius:10px;
	border:3px solid #ffffff;
	filter:brightness(1);
	box-shadow: 1px 1px 10px #0062cc40;
}
.myAudio{
	position:fixed;
	display:none;
}
.img-silang {
    margin-top: -66px;
    margin-bottom: 20px;
    margin-left: 5px;
    width: 40px;
    height: auto;
	opacity:0.9;
}

.img-tengah{margin-top: -1%;
    margin-left: -9%;
    filter: drop-shadow(2px 4px 10px #3336);
    position: absolute;
    width: 250px;}
.img-mod{
	border-radius:15px;
	box-shadow: 5px 5px 7px #007bff59;
    border: 0.2px solid #007bff57;
}
/*TESTIMONI*/
.testimonial{margin-bottom:10px;}
.testimonial-section{width:100%;height:auto;padding:15px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:10px;position:relative;background:#0b2440;color:#eee;box-shadow:6px 6px 0px #2668e39e;}
.testimonial-section:after{top:100%;left:50px;border:solid transparent;content:" ";position:absolute;border-top-color:#00ff3a;border-width:15px;margin-left:-15px;}
.testimonial-section-right{width:100%;height:auto;padding:15px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:0px;position:relative;background:#fadbfff0;}
.testimonial-section-right:after{top:100%;right:50px;border:solid transparent;content:" ";position:absolute;border-top-color:#fadbfff0;border-width:15px;margin-left:-15px;}
.testimonial-desc{margin-top:20px;text-align:left;padding-left:15px;}
.testimonial-desc img{box-shadow:0px 0px 40px #3333331f;border-radius:150px;height:80px;padding:0px;width:80px;display:inline-block;vertical-align:top;}
.testimonial-writer{display:inline-block;vertical-align:middle;padding-left:10px;padding-top:15px;}
.testimonial-writer-name{font-weight:bold;color:#e6e6e6;}
.testimonial-writer-designation{font-size:85%;color:#b4fd02;}
.testimonial-writer-company{font-size:85%;}



/*animasi*/
.grow{-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    opacity: 0.9;
	width:80%;
	}
	
.grow:hover{-webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
	filter:hue-rotate(50deg) drop-shadow(2px 2px 15px #333);
    opacity: 1;}
.animated {-webkit-animation-duration: 1s;animation-duration: 1.;-webkit-animation-fill-mode: both;animation-fill-mode: both;animation: mymove 2s infinite;}




@media screen and (max-width:768px){
	.d-md-block {
		display: block!important;
	}

	.pr-md-0 {
		padding-right: 0!important;
	}
	.mb-3 {
		margin-bottom: 1rem!important;
	}
	.d-none {
		display: none!important;
	}
	.pl-md-0 {
		padding-left: 0!important;
	}
	.thumb-video-asix{
		width: 190px;
	}
}

@media screen and (max-width:480px){
	.color-responsive{color:#fff;}
	.display-4 {
    font-size: xx-large;}
	
	.step-vid{margin-left: 0%;}
	.step-vid-flip{margin-left: 0%;}
	.thumb-video-asix{
		width: 120px;
	}
}