@font-face {
    font-display: swap;
    font-family: 'DDIN';
    src: url('../fonts/DDIN.eot');
    src: url('../fonts/DDIN.eot') format('embedded-opentype'),
         url('../fonts/DDIN.woff2') format('woff2'),
         url('../fonts/DDIN.woff') format('woff'),
         url('../fonts/DDIN.ttf') format('truetype'),
         url('../fonts/DDIN.svg#DDIN') format('svg');
}
@font-face {
    font-display: swap;
    font-family: 'DDINBold';
    src: url('../fonts/DDINBold.eot');
    src: url('../fonts/DDINBold.eot') format('embedded-opentype'),
         url('../fonts/DDINBold.woff2') format('woff2'),
         url('../fonts/DDINBold.woff') format('woff'),
         url('../fonts/DDINBold.ttf') format('truetype'),
         url('..fonts/DDINBold.svg#DDINBold') format('svg');
}
@font-face {
    font-display: swap;
    font-family: 'DDINItalic';
    src: url('../fonts/DDINItalic.eot');
    src: url('../fonts/DDINItalic.eot') format('embedded-opentype'),
         url('../fonts/DDINItalic.woff2') format('woff2'),
         url('../fonts/DDINItalic.woff') format('woff'),
         url('../fonts/DDINItalic.ttf') format('truetype'),
         url('../fonts/DDINItalic.svg#DDINItalic') format('svg');
}
body,html {
    background: #e3e9ec;
    font-family: DDIN;
    font-size:15px;
}
body,
html {
    margin: 0 auto!important;
    padding: 0!important;
    font-size: 14px!important;
    background: #eceff1;
    outline: none;
    font-family: DDIN;
}

:focus {
    outline: none!important
}
label{
    text-transform: uppercase !important;
    letter-spacing: 1px;
    font-size: 13px !important;
    color:#2b2b2b !important
}
strong {
    font-weight: 700!important
}

.container {
    width: 90% !important;
}

.card-panel {
    border-radius: 10px!important;
    box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .14)!important
}
.card{
    box-shadow: 0 0 18px rgba(0,0,0,.1);
    border-radius: 4px;
}
.btn{
    box-shadow: none !important;
    background: #377b0a !important;
    border-radius: 4px;
    letter-spacing: 1px;
    font-family: DDIN !important;
}
.btn:hover{
    background: #50a419 !important;
}
header {
    background: #fafafa;
    border-top: 4px solid #2e7d32;
    box-shadow: 0 3px 20px #d4d4d4
}

header nav {
    height: 45px!important;
    line-height: 45px!important;
    background: #2e7d32;
    box-shadow: none!important;
    border-radius: 5px 5px 0 0!important
}

header nav ul li ul.dropdown-content {
    box-shadow: none!important;
    top: 45px!important;
    width: 200px!important;
    padding: 10px;
    border-radius: 0 0 5px 5px
}

header nav ul li ul.dropdown-content li {
    background: #fff;
    min-height: 0!important;
    border-bottom: 1px solid #f3f3f3
}

header nav ul li ul.dropdown-content a {
    font-size: 14px!important;
    padding: 18px 16px!important;
    line-height: 0!important;
    color: #2e7d32
}

header nav i {
    height: 0!important;
    line-height: 0!important
}

header div.logo {
    padding: 10px 5px 25px;
}

header div.logo a {
    color: #272727
}

header div.logo span {
    width: 110px
}

header div.logo div.slogan {
    display: inline;
    margin: 0
}

header div.logo div.slogan h6 {
    background: #de0e0e;
    padding: 8px 15px;
    color: #fff;
    border-radius: 5px;
    margin: -40px 0 0
}

header div.logo h2 {
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0;
    margin: -55px 0 0 90px !important;
    font-family: DDINBold;
}

header div.logo h5 {
    font-size: 15px;
    padding: 0;
    margin: 0;
    margin: 0 0 0 90px!important;
}
.reguler{
    background: #2b2bb7 !important;
    color: white !important;
}
.jalur{
    margin:0 0 20px 0;
    background: #ffbebe;
    display: block;
    padding:10px 0;
}
.jalur h6{
    padding:0;
    margin: 0;
    text-transform: uppercase;
    font-family: DDINBold;
}
.kelas{
    padding: 0 !important;
    margin: 0 !important;
    letter-spacing: 1px;
}
section.slider {
    height: 300px;
    background: #0065d1
}

section.slider img {
    width: auto!important
}

section.slider div.kontrol-slider {
    position: relative;
    margin: -300px 0 0
}

section.slider div.kontrol-slider a {
    display: inline-block;
    color: #fff;
    padding: 5px 20px
}

section.slider div.kontrol-slider a.prev {
    position: absolute;
    left: 0
}

section.slider div.kontrol-slider a.next {
    position: absolute;
    right: 0
}

section div.bg {
    position: absolute;
    left: 0;
    right: 0
}

section div.berita {
    background: #fff;
    padding: 0!important;
    height: 300px;
    border-radius: 10px;
    margin-top: -30px;
    z-index: 9999;
    position: relative;
    box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .14)
}

section div.berita span {
    border-radius: 10px 10px 0 0;
    padding: 15px 25px;
    border-bottom: 1px solid #e2e2e2;
    display: block
}

section div.berita span i {
    display: block;
    float: left;
    padding: 10px 20px 0 0;
    color: #2e7d32;
    width: 50px;
    height: 50px
}

section div.berita h4 {
    font-size: 20px;
    padding: 10px 0;
    margin: 0
}

section div.berita h3 {
    font-size: 25px;
    padding: 0 0 10px;
    margin: 0;
    font-weight: 700
}

section div.berita div.row div.col {
    padding: 40px
}

section div.berita div.row div.col img {
    border-radius: 10px;
    width: 165px
}

section div.berita div.row div.col h2 {
    font-size: 15px;
    margin: -100px 0 0;
    padding: 0 0 0 180px;
    line-height: 20px!important
}

section div.berita div.row div.col h2 a {
    color: #272727
}

section div.berita div.carousel {
    height: 200px!important
}

section div.berita div.carousel .indicators .indicator-item.active {
    background: #2e7d32!important
}

section div.berita div.carousel .indicators .indicator-item {
    background: #CECED0!important
}

section div.berita div.carousel.carousel-slider .carousel-item {
    margin-top: 85px
}

section div.berita div.carousel.carousel-slider .carousel-item.active {
    margin-top: 85px
}

section div.berita div.kontrol {
    display: inline-block
}

section div.berita div.kontrol a {
    padding: 5px 10px;
    background: #fff;
    display: inline-block;
    border-radius: 20px;
    box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .14);
    top: 0;
    margin: 150px 0 0;
    color: #2e7d32
}

section div.berita div.kontrol a.next {
    right: 0;
    position: absolute;
    margin-right: -15px
}

section div.info {
    background: #fff;
    margin: 40px 0!important;
    padding: 35px 20px
}

section div.info h3 {
    font-size: 30px;
    padding: 0;
    margin: 0;
    text-transform: uppercase
}

section div.info h3 i {
    color: #e64e28
}

section div.info p {
    padding: 0;
    margin: 0
}

section div.info a {
    box-shadow: none!important;
    border-radius: 5px;
    background: #2e7d32
}

section div.berita div.kontrol a.prev {
    position: absolute;
    margin-left: -15px
}

section h4 {
    font-size: 18px;
    font-weight: 700;
    padding: 0;
    text-transform: uppercase;
    font-family: DDINBold;
    letter-spacing: 1px;
    margin:0 0 20px 0;
}

section h4 i.fa-info-circle {
    color: #2e7d32
}

section h4 i.fa-calendar {
    color: #e64e28
}

section h4 i.fa-signing {
    color: #2835e6
}

section div.kolom-event {
    border-bottom: 1px solid #CECED0;
    padding: 0 0 10px;
    margin: 0 0 10px;
    height: 80px
}

section div.kolom-event:last-child {
    border-bottom: none
}

section div.kolom-event div {
    width: 80px;
    height: 65px;
    float: left;
    border: 2px solid #e64e28;
    border-radius: 5px;
    margin: 0 10px 0 0;
    color: #272727
}

section div.kolom-event div h3 {
    padding: 0;
    margin: 3px 0 0;
    font-size: 30px
}

section div.kolom-event div h4 {
    padding: 0;
    margin: 0
}

section div.kolom-event p {
    padding: 0;
    margin: 10px 0 0;
    font-weight: 700
}

section div.kolom {
    border-bottom: 1px solid #CECED0;
    padding: 0 0 10px;
    margin: 0 0 10px;
    height: 60px
}

section div.kolom img {
    border-radius: 5px;
    float: left;
    margin: 0 10px 0 0
}

section div h5 {
    font-size: 14px;
    padding: 0;
    margin: 0;
    display: inline
}

section div h5 a {
    color: #272727
}

section div h5 a p {
    padding: 0;
    margin: 0
}
.pilihan a{
    margin:10px 0;
}
.pilihan h2{
    font-size:20px;
    font-weight: bold;
    padding: 0;
    margin: 0;
}

footer {
    padding: 20px 0 5px;
    background: #cfd8dc
}

footer div.container div {
    font-weight: 700;
    padding: 0 0 10px
}

footer ul {
    padding-left: 0;
    margin: 0
}

footer ul li {
    list-style: none;
    padding: 5px 0
}

footer ul li a {
    color: #616161;
    padding: 5px 0;
    font-size: 14px;
    font-weight: 400
}

footer h4 {
    font-size: 24px;
    font-weight: 700;
    padding: 0 0 10px;
    margin: 0;
    text-transform: uppercase
}

footer h5 {
    font-size: 14px;
    padding: 0 0 5px;
    margin: 0;
    color: #616161
}

footer span {
    display: block;
    margin: 10px 0 0
}

footer span h6.phone {
    font-size: 20px;
    padding: 0;
    margin: 0;
    color: #2e7d32
}

footer span h6.email {
    font-size: 13px;
    padding: 0;
    margin: 0;
    color: #616161
}

footer div.copyright {
    background: #b4c0c5;
    margin: 0 0 -20px
}

.sukses {
    background: #079637;
    color: #fff;
    font-size: 14px!important;
    display: block;
    padding: 10px!important;
    border-radius: 5px
}

.error {
    background: #cf1515;
    color: #fff;
    font-size: 14px!important;
    display: block;
    padding: 10px!important;
    border-radius: 5px
}

.error p {
    padding: 0!important;
    margin: 0!important
}

.error p::before {
    content: '- '
}

section div.ppdb {
    background: #fff;
    box-shadow: 0 1px 7px 0 rgba(0, 0, 0, .14);
    border-radius: 10px;
    padding: 10px 50px;
    margin: 20px 0 0;
    border: 1px solid #CECED0
}


section div.ppdb2 div.card div.card-content span.card-title {
    color: #08500b;
    font-size: 20px!important;
    margin: 0!important
}

section div.ppdb2 p {
    border-bottom: 1px dashed #616161;
    padding: 7px 0!important;
    font-size: 13px!important;
    color: #292929!important
}

section div.ppdb2 p:last-child {
    border-bottom: none
}

section div.ppdb2 p strong {
    font-weight: 400!important;
    font-size: 15px!important;
    color: #08500b
}

.prestasi-btn {
    margin: 22px 0 0
}

section div.ppdb b {
    padding: 5px 10px;
    margin: 0 0 15px;
    display: inline-block;
    background: #2e7d32;
    border-radius: 0 20px 20px 0;
    color: #fff;
    font-weight: 400
}

section div.ppdb b.wali {
    padding: 5px 10px;
    margin: 0 0 15px;
    display: inline-block;
    background: #e2720a;
    border-radius: 0 20px 20px 0;
    color: #fff;
    font-weight: 400
}

section div.ppdb div.divider {
    margin: 25px 0 35px;
    border: 1px dashed #565656;
    background: none!important
}

.sorot {
    background: #f9fff9;
    border-radius: 10px;
    padding: 0;
    font-family:DDIN !important;
    text-transform: none !important;
}

.sorot label {
    color: #9e0d0d !important;
}

section div.garis {
    height: 5px;
    background: #b4c0c5;
    border-radius: 5px;
    margin: 0 0 10px
}

section div.garis span {
    background: #eceff1;
    margin: -40px 0 0;
    display: inline-block
}

section div.garis i {
    padding: 0 10px;
    color: #b4c0c5;
    font-family: DDIN;
    font-size: 30px;
    font-weight: 700
}

section div.garis i span {
    display: block;
    font-size: 13px;
    margin: 5px 0 0;
    font-family: DDIN;
}

section div.garis i.siswa {
    color: #2e7d32
}

.form-btn {
    background: #f7f7f7;
    padding: 20px 15px!important;
    margin: 0 -3.55rem!important;
    border-top: 1px solid #d0d0d0
}

select {
    height: 35px!important
}

.ppdb-btn {
    box-shadow: none!important;
    border-radius: 30px;
    background: #2e7d32
}

.ppdb-btn2 {
    box-shadow: none!important;
    border-radius: 30px;
    background: #cfa23f
}

.ppdb-btn-kembali {
    box-shadow: none!important;
    border-radius: 30px;
    background: #565656
}

.ppdb-btn-kembali-2 {
    box-shadow: none!important;
    border-radius: 30px;
    background: none;
    color: #272727
}

.input-field .prefix {
    font-size: 1.5rem!important
}

input:not([type]),
input[type=text]:not(.browser-default),
input[type=password]:not(.browser-default),
input[type=email]:not(.browser-default),
input[type=url]:not(.browser-default),
input[type=time]:not(.browser-default),
input[type=date]:not(.browser-default),
input[type=datetime]:not(.browser-default),
input[type=datetime-local]:not(.browser-default),
input[type=tel]:not(.browser-default),
input[type=number]:not(.browser-default),
input[type=search]:not(.browser-default),
textarea.materialize-textarea {
    border: 2px solid #e6e6e6 !important;
    height: 2.2rem!important;
    border-radius: 4px!important;
    text-indent: 10px!important;
    background: #fbfbfb !important
}

select {
    border: 2px solid #e6e6e6 !important;
    height: 2.5rem!important;
    border-radius: 4px !important;
    background: #fbfbfb !important
}

input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="email"]:disabled,
select:disabled {
    background: #dedede !important;
}

.input-field {
    margin-bottom: 0!important;
    margin-top: 4px!important
}

.input-field>label {
    position: unset!important
}

::-webkit-input-placeholder {
    color: #292929;
    font-size: 14px!important
}

::-moz-placeholder {
    color: #292929;
    font-size: 14px!important
}

:-ms-input-placeholder {
    color: #292929;
    font-size: 14px!important
}

:-moz-placeholder {
    color: #292929;
    font-size: 14px!important
}

.modal-small {
    width: 25%!important
}

a.unduh {
    display: block;
    background: #2e7d32;
    padding: 20px;
    color: #fff;
    border-radius: 10px;
    margin: 40px 0 10px
}

a.unduh h4 {
    padding: 0;
    margin: 0;
    font-weight: 400;
    font-size: 30px
}

a.unduh i.fa {
    margin: -50px 0 0
}
#loading-statistik{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
}
#loading-statistik h3{
    position: absolute;
    color: white;
    left: 50%;
    top: 50%;
    text-align: center;
    transform: translateX(-50%);
    transform: translateY(-50%);
    padding:0 !important;
    margin: 0 !important
}
        
@media only screen and (max-width: 992px) {
    .modal-small {
        width: 80%!important
    }
}