.main-img {
    position: relative;	
    background-color: #111111;
}

.main-img .shape {
    background-color: rgba(0,0,0,0.6);
    height: 100%;
    position: absolute;
    top: 0;
    display: inline-block;
    width: 100%;
}

.img-slide {
    width: 100%;
    height: auto;
}

.text-main-img {	position: absolute;	bottom: 15px;	left: 0;	width: 100%;
}

.text-main-img h1 {
    color: #fff;
    /* text-shadow: 1px 1px 10px #222222; */
    text-shadow: 13px 9px 8px rgba(12,5,3,0.83);
    font-size: 48px;
}

.blue-sea {
     color: rgba(38, 181, 198, 1.0)!important;
     font-weight: 800;
}

section.content {
    background-color: #ffffff;
    font-family: "GolosText", Helvetica, Arial, serif;
    font-size: 14px;
}

section.content .filter_education {
    display: inline-block;
}

section.content .text-intro{
    margin-top: 30px;
	margin-bottom: 10px;
}

section.content .teks-title {
    padding: 40px 0 10px 0;
    font-family: "GolosText-Bold", Helvetica, Arial, serif;
    font-size: 16px;
    color: #000;
}

section.content .floatoneline {
    float: left;
    display: flex;
}

section.content .floatoneline .btn-filter {
    padding: 5px 30px;
    margin: 5px 10px 5px 0;
    border: 1px solid #26b5c6;
    border-radius: 100px;
    cursor: pointer;
}

section.content .floatoneline a.btn-filter {
    color: #3a3c39;
    font-family: "GolosText", Helvetica, Arial, serif;
}


section.content .btn-filter.active{
    background-color: #26b5c6;
    color: #ffffff !important;
}

section.content a.btn-filter:hover,a.btn-filter:active,a.btn-filter:focus {
    background-color: #26b5c6;
    color: #ffffff!important;
}

section.content .scheme {
    margin: 20px 0;
    padding: 15px;
    background-color: #e9f7f8;
    height: 50px;
}

section.content .teks {
    color: #27b4c6;
    font-size: 16px;
    float: left;
    display: flex;
}

section.content .option-choose {
    float: left;
    display: flex;
}

section.content .checkbox {
    padding-left: 30px;
    position: relative;
}

.checkbox label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 15px;
    margin-bottom: 0rem;
}

.checkbox input[type="checkbox"], .checkbox input[type="radio"] {
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    position: absolute;
    left: 18px;
    top: 3px;
}

section.content .option-choose label {
    display: inline-block;
    font-family: "GolosText", Helvetica, Arial, serif;
    font-size: 16px;
}

.checkbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    margin-left: -15px;
    border: 1px solid #27b4c6;
    background-color: transparent;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.checkbox label::after {
    width: 20px;
    height: 20px;
    font-size: 14px;
    margin-left: -15px;
}

.checkbox-warning input[type="checkbox"]:checked + label::before, .checkbox-warning input[type="radio"]:checked + label::before {
    background-color: #24b4cf;
    border-color: #24b4cf;
}


.checkbox input[type="checkbox"]:checked + label::after, .checkbox input[type="radio"]:checked + label::after {
    font-family: "FontAwesome";
    content: "\f00c";
    position: absolute;
    left: 0px;
    margin-left: -12px;
    top: 0;
}

.checkbox-warning input[type="checkbox"]:checked + label::after, .checkbox-warning input[type="radio"]:checked + label::after {
    color: #fff;
}


section.content .group {
    display: block;
    width: 100%;
    /* height: 430px; */
    background-color: #ffffff;
    border:1px solid #e2e2e2;
}

section.content .layer {
    display: block;
    background-color: rgba(255,255,255,0.0);
    height: 185px;
    overflow: hidden;
}

section.content .imgEvent {
    width: 100%;
    /* height: 100%; */
    position: relative;
    top: 0;
    margin-top: 0;
}

section.content .title-event-group {
    background-color: rgba(255,255,255,0.0);
    margin: 0;
    margin-top: 15px;
    padding: 10px 15px;
    font-family: "GolosText-Medium", Helvetica, Arial, serif;
    font-size: 16px;
    color: rgba(38, 181, 198, 1.0);
    text-align: center;
    line-height: 18.0px;
	min-height: 92px;
}

section.content .title-event-group a.readmore{
    font-size: 16px;
}

section.content .desc-event-group {
    background-color: rgba(255,255,255,0.0);
    height: auto;
    padding: 15px;
    margin: 0;
    font-family: "GolosText", Helvetica, Arial, serif;
    font-size: 16.0px;
    color: rgba(54, 58, 54, 1.0);
    text-align: center;
    line-height: 18.0px;
}
section.content .desc-event-group p{	min-height: 90px;}
section.content a.readmore {
    color: rgba(38, 181, 198, 1.0);
}

section.content .col-1-cstm {
    -ms-flex: 0 0 5.000%;
    flex: 0 0 5.000%;
    max-width: 5.000%;
}

section.content .col-3-cstm {
    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;
}


section.content .count-viewed {
    padding: 15px;
    text-align: center;
}


section.content .count-viewed .teks {
    font-family: "GolosText", Helvetica, Arial, serif;
    font-size: 16px;
    color: rgba(54, 58, 54, 1.0);
    line-height: 18.0px;
    float: none;
    display: block;
}

section.content .count-viewed .btn-load {
    font-family: "GolosText-Bold", Helvetica, Arial, serif;
    font-size: 19px;
    color: rgba(54, 58, 54, 1.0);
    line-height: 18px;
    background-color: #ebebeb;
    display: inline-block;
    padding: 15px 120px;
    border-radius: 100px;
    cursor: pointer;
    margin: 15px 0;
}

section.content .pd-set{
    padding:30px 0;
}

section.content .desktop-992{
    display: block;
}

section.content .mobile-992 {
    display: none;
}

.img-thumbnail {
    padding: 0rem;
    border: 0px solid;
    border-radius: 0rem;
    /* opacity: 0.6; */
}

.raikan-content .text-intro a{
	color: rgba(38, 181, 198) !important;
}
.raikan-content a.custom-button {
    background-color: #363b35;
    color: #fdd901 !important;
    padding: 10px 15px;
    border-radius: 5px;
    display: inline-block;
}
section.raikan-content .title-event-group{
	min-height: 0;
	height: 58px;
	overflow: hidden;
}
section.raikan-content .desc-event-group{
	min-height: 0;
	height: 125px;
	overflow: hidden;
}
a.top-link, a.top-link:active, a.top-link:link, a.top-link:visited, a.top-link:hover{
	color: #27b4c6;
	text-decoration: underline;
}

/* MOBILE VIEW */
@media screen and (min-width: 992px) and (max-width: 1199px){
    section.content .floatoneline .btn-filter {
        padding: 5px 22px;
        margin: 5px 10px 5px 0;
        border: 1px solid #26b5c6;
        border-radius: 100px;
        cursor: pointer;
        font-size: 12px;
    }
}

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

    section.content .group {
        /* height: 300px; */
    }

    section.content .layer {
        display: block;
        background-color: rgba(255,255,255,0.0);
        height: 110px;
        overflow: hidden;
    }

    section.content .imgEvent {
        width: 100%;
        height: 100%;
        position: relative;
        top: 0;
        margin-top: 0;
        object-fit: cover;
    }

    section.content .title-event-group {
        font-size: 14px;
    }
    section.content .desc-event-group {
        font-size: 10px;
        line-height: 12px;
        padding: 5px 5px 30px 5px;
    }
}

@media screen and (max-width: 991px){
    section.content .desktop-992{
        display: none;
    }

    section.content .mobile-992 {
        display: block;
    }


    /*FILTER EDUCATION */

    section.content .filter_education .filter-level {
        margin: 40px 0 10px 0;
        position: relative;
    }

    .filter_education .filter-level .custom-select {
        background: none;
        border: 1px solid #969696;
        padding: 15px 50px 15px 60px;
        height: auto;
        border-radius: 0;
        font-family: "GolosText-Bold", Helvetica, Arial, serif;
        font-size: 16px;
        color: #000;
        width: 100%;
    }
    
    section.content .filter_education .filter-level:before {
        content: '';
        right: 17px;
        top: 50%;
        margin-top: -11px;
        width: 23px;
        height: 23px;
        background: #fff;
        position: absolute;
        pointer-events: none;
        display: block;
    }

    section.content .filter_education .filter-level:after {
        content: "\f0d7";
        font-family: "FontAwesome";
        font-size: 22px;
        color: #000;
        right: 22px;
        top: 50%;
        margin-top: -15.5px;
        padding: 0 0 2px;
        position: absolute;
        pointer-events: none;
    }

   section.content .filter_education .icon-filter {
       height: 30px;
       width: 30px;
       position: absolute;
       margin: 0;
       left: 15px;
       background-image: url(../img-mobile/home-mobile-1@filterbyeducation.png);
       background-size: contain;
       background-repeat: no-repeat;
       top: 50%;
       margin-top: -15px;
     
   } 
    
    .filter_education .filter-level .custom-select option {
        background: none;
        border: 1px solid #969696;
        padding: 15px 15px;
        height: auto;
        border-radius: 0;
        font-family: "GolosText", Helvetica, Arial, serif;
        font-size: 14px;
        color: #000;
        width: 100%;
    }

    /*FILTER SHCEME*/

    section.content .scheme {
        margin: 20px 0;
        padding: 0;
        background-color: #e9f7f8;
        height: auto;
    }
	
	section.raikan-content .scheme{
		padding: 15px !important;
		height: 50px !important;
	}

    section.content .scheme .filter-scheme {
        margin: 0 auto;
        position: relative;
    }

    .scheme .filter-scheme .custom-select {
        background: none;
        border: 1px solid #969696;
        padding: 15px 50px 15px 60px;
        height: auto;
        border-radius: 0;
        font-family: "GolosText-Bold", Helvetica, Arial, serif;
        font-size: 16px;
        color: rgba(38, 181, 198, 1.0);
        width: 100%;
    }
    
    section.content .scheme .filter-scheme:before {
        content: '';
        right: 17px;
        top: 50%;
        margin-top: -11px;
        width: 23px;
        height: 23px;
        background: transparent;
        position: absolute;
        pointer-events: none;
        display: block;
    }

    section.content .scheme .filter-scheme:after {
        content: "\f0d7";
        font-family: "FontAwesome";
        font-size: 22px;
        color: #000;
        right: 22px;
        top: 50%;
        margin-top: -15.5px;
        padding: 0 0 2px;
        position: absolute;
        pointer-events: none;
    }

   section.content .scheme .icon-filter {
       height: 30px;
       width: 30px;
       position: absolute;
       margin: 0;
       left: 15px;
       background-image: url(../img-mobile/1-home-yayasan-mendaki-home@choose_scheme.png);
       background-size: contain;
       background-repeat: no-repeat;
       top: 50%;
       margin-top: -15px;
     
   } 
    
    .scheme .filter-scheme .custom-select option {
        background: none;
        border: 1px solid #969696;
        padding: 15px 15px;
        height: auto;
        border-radius: 0;
        font-family: "GolosText", Helvetica, Arial, serif;
        font-size: 14px;
        color: #000;
        width: 100%;
    }

}

@media screen and (max-width: 767px){
    .hidden-mobile {
        display: none;
    }

    .text-main-img {
        text-align: center;
    }

    section.content .teks-title {
        text-align: center;
    }

    section.content .assistance-content .col-1-cstm {
        -ms-flex: unset;
        flex: unset;
        max-width: unset;
    }

    section.content .assistance-content .col-3-cstm {
        -ms-flex: unset;
        flex: unset;
        max-width: unset;
    }
    
    section.content .pd-set{
        padding:0;
    }

    section.content .group {
        margin: 10px 0;
    }
    
    section.content .count-viewed .btn-load {
        width: 100%;
    }
	section.content .title-event-group, section.content .desc-event-group p{		min-height: 0;	}

    section.content .layer {
        height: auto;
        overflow: auto;
    }
}


@media screen and (max-width: 399px){ 
    section.content .count-viewed .btn-load {
        font-size: 14px;
    }
}