html { scroll-behavior: smooth;}
body{ font-size: 15px; color: #222; font-family: 'Signika', sans-serif;}
*{margin: 0; padding: 0}
.clear{ clear: both; display: block}
.error{ border-color:#F00!important}
p{ line-height: 24px; font-size: 16px;}
a{ -webkit-column-rule: #000; -moz-column-rule: #000; -o-column-rule: #000; column-rule: #000; color: #000; font-weight: 500}
a:hover{ text-decoration: none; color: #000;}
ul{ list-style-type: none}


h1,h4{ color: #142B96}

.inline-link{ color: #fff; background: #354DDF; padding: 0 5px; border-radius: 5px;}
.inline-link:hover{ background: #BFC8FF}

.container-fluid{ margin: 0; padding: 0}

.container{ max-width: 100%; padding: 0; margin: 0}
.container h3{ font-size: 23px;}
.container h3 span{ background: #F54845; padding: 10px 25px}

.navigation{ max-width: 1280px; width: 100%; margin: 0 auto}

.nav-link{ font-size: 16px; font-weight: 400; color: #222!important; padding-right: 1rem!important; padding-left: 1rem!important;}

.about{ padding: 100px 0; max-width: 1280px; width: 100%; margin: 0 auto}
.mv{ padding: 0px 0; max-width: 1280px; width: 100%; margin: 0 auto}

.services-list{ position: relative;}
.services-list a{ position: absolute; bottom: 15px; left: 25px; right:25px; font-size: 20px; color: #fff; }


.about ul{ list-style-image: url("../images/point.png"); margin-left: 20px;}

.price-category{ background: #051631; color: #fff; border-radius: 5px; margin-bottom: 15px; padding: 10px; text-align: center}
.price-card{ background: #fff; border: 1px inset #215ACD; border-radius: 8px; box-shadow: 0px 0px 5px 0px rgba(158,155,155,0.5); -webkit-box-shadow: 0px 0px 5px 0px rgba(158,155,155,0.5); -moz-box-shadow: 0px 0px 5px 0px rgba(158,155,155,0.5);}
.price-card ul{ margin-bottom: 0; margin-top: 15px}
.price-card ul li{ margin-bottom: 5px;}


footer{ background: #EAEAF2;}
footer .f-inner{ padding: 80px 0;}
footer h3{ background: #F54845; color: #fff!important; float: left; padding: 10px 50px;}
footer a{ font-size: 22px; font-weight: 600}
footer .f-strip{ width: 100%; background: #3C3C64; text-align: center; padding: 20px 0}
footer .f-strip h6{ font-size: 11px; color: #9191AF; margin: 0; letter-spacing: .5px}

.btn{ padding: 5px 25px}
.btn-clear{background-color: #BDBDBD; color: #ffffff}
.btn-clear:hover{background-color: #505051; color: #ffffff}
.btn-send{background-color: #50B78A; color: #ffffff}
.btn-send:hover{background-color: #3E946F; color: #ffffff}




/* Custom accordion Start*/
.cardMateri {
    background-color: #F1F6E3;
    border-radius: 8px;
    -webkit-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.21);
    -moz-box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.21);
    box-shadow: 4px 4px 8px 0px rgba(0,0,0,0.21);
}

#accordion h4{ font-size: 16px; margin-bottom: 1px;}

#accordion .panel{
    border: 1px solid #22235b;
    border-radius: 3px;
    box-shadow: none;
	margin-bottom: 5px;
}

#accordion .panel-heading{
    padding: 0;
    border: none;
    border-radius: 3px;
}

#accordion .panel-title a {
    display: block;
    padding: 12px 15px;
    background: #fff;
    font-weight: 400;
    color: #3335AB;
    text-decoration: none;
    box-shadow: 0 0 10px rgba(0,0,0,.05);
    position: relative;
    transition: all 0.5s ease 0s;
}

#accordion .panel-title a.collapsed{
    box-shadow: none;
    color: #252664;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(43,59,93,0.30);
}

#accordion .panel-title a:before,
#accordion .panel-title a.collapsed:before{
    content: url("../images/down.png");
    width: 25px;
    height: 25px;
    line-height: 28px;
    font-weight: 900;
    color: #16AB50;
    text-align: center;
    position: absolute;
    top: 8px;
    right: 15px;
    transform: rotate(180deg);
    transition: all 0.3s ease 0s;
}

#accordion .panel-title a.collapsed:before{
    color: #676767;
    transform: rotate(0);
}

#accordion .panel-title a:after{
    content: "";
    width: 1px;
    height: 100%;
    background: #ececec;
    position: absolute;
    top: 0;
    right: 55px;
}

#accordion .panel-body{
    border: none;
    font-size: 15px;
    color: #615f5f;
    background-color: #fff;
    line-height: 27px;
}

#accordion .panel-body .isiMateri {
    padding: 15px 25px 25px 25px;
    margin-bottom: 10px;
}

/*dekstop*/
/*@media screen and (min-width: 1024px) {
    .paddingLuar, .cardMateri {
        padding: 3rem;
    }
    .judulUtama {
        font-size: 32px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 1.5rem;
    }
    .isiMateri p:nth-child(1) {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 1rem;
        
    }
    .isiMateri p:nth-child(2) {
        font-size: 15px;
        text-align: justify;
    }
    #accordion .panel-title a {
        font-size: 19px;
    }
    #accordion .panel-title a:before,
    #accordion .panel-title a.collapsed:before {
        font-size: 16px;
    }
}*/

/*tablet*/
/*@media screen and (min-width: 768px) and (max-width: 1023px) {
    .paddingLuar, .cardMateri {
        padding: 2rem;
    }
    .judulUtama {
        font-size: 25px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 1rem;
    }
    .isiMateri p:nth-child(1) {
        font-size: 21px;
        font-weight: 700;
        margin-bottom: 0.75rem;
        text-align: center;
    }
    .isiMateri p:nth-child(2) {
        font-size: 14px;
        text-align: justify;
    }
    #accordion .panel-title a {
        font-size: 16px;
    }
    #accordion .panel-title a:before,
    #accordion .panel-title a.collapsed:before {
        font-size: 13px;
    }
}*/

/*HP*/ 
/*@media screen and (max-width: 767px){
    .paddingLuar, .cardMateri {
        padding: 1rem;
    }
    .judulUtama {
        font-size: 20px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 1rem;
    }
    .isiMateri p:nth-child(1) {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 0.5rem;
        text-align: center;
    }
    .isiMateri p:nth-child(2) {
        font-size: 12px;
        text-align: justify;
    }
    #accordion .panel-title a {
        font-size: 13px;
    }
    #accordion .panel-title a:before,
    #accordion .panel-title a.collapsed:before {
        font-size: 11px;
    }
}*/





/* Custom Radio Button Start*/

.radiotextsty {
  font-size: 16px;
}

.radiotextsty label{ padding: 0 10px}

.customradio {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.customradio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 22px;
  width: 22px;
  background-color: white;
  border-radius: 50%;
  border:1px solid #BEBEBE;
}

/* On mouse-over, add a grey background color */
.customradio:hover input ~ .checkmark {
  background-color: transparent;
}

/* When the radio button is checked, add a blue background */
.customradio input:checked ~ .checkmark {
  background-color: white;
  border:1px solid #BEBEBE;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.customradio input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.customradio .checkmark:after {
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #3E3DB9;
}

/* Custom Radio Button End*/


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