@font-face {
    font-family: "OpenSans-Regular";
    src: url(../../fonts/opensan/OpenSans-Regular.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Poppins-Regular";
    src: url(../../fonts/poppins/Poppins-Regular.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Poppins-Bold";
    src: url(../../fonts/poppins/Poppins-Bold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Poppins-SemiBold";
    src: url(../../fonts/poppins/Poppins-SemiBold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Poppins-Light";
    src: url(../../fonts/poppins/Poppins-Light.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Poppins-Medium";
    src: url(../../fonts/poppins/Poppins-Medium.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Roboto-Regular";
    src: url(../../fonts/roboto/Roboto-Regular.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Roboto-Bold";
    src: url(../../fonts/roboto/Roboto-Bold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Roboto-Medium";
    src: url(../../fonts/roboto/Roboto-Medium.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Roboto-Italic";
    src: url(../../fonts/roboto/Roboto-Italic.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Raleway-Medium";
    src: url(../../fonts/raleway/Raleway-Medium.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Raleway-Light";
    src: url(../../fonts/raleway/Raleway-Light.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Raleway-SemiBold";
    src: url(../../fonts/raleway/Raleway-SemiBold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Raleway-SemiBold-Italic";
    src: url(../../fonts/raleway/Raleway-SemiBold-Italic.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Raleway-Bold";
    src: url(../../fonts/raleway/Raleway-Bold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Raleway-SemiBold";
    src: url(../../fonts/raleway/Raleway-SemiBold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Raleway-ExtraBold";
    src: url(../../fonts/raleway/Raleway-ExtraBold.ttf);
    format: "ttf";
}

@font-face {
    font-family: "Raleway-Regular";
    src: url(../../fonts/raleway/Raleway-Regular.ttf);
    format: "ttf";
}

html, body {
    height: 100%;
}

a {
    color: #1d4286;
}

a, a:hover, a:focus {
    color: #163164;
    text-decoration: none;
    outline: none;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
}

input:focus, button:focus {
    outline: none;
}

p {
    color: rgba(0, 0, 0, 0.54);
    margin-bottom: 1.5em;
}

.img {
    display: block;
    width: 100%;
}

.ul {
    padding: 0;
    margin: 0;
}

.ul li {
    list-style: none;
}

.ul-inline li {
    display: inline-block;
}

.help-block {
    font-size: 13px;
}

.cursor-pointer {
    cursor: pointer !important;
}

body > [id^="beacon_"],
body > [id*=" beacon_"] {
    display: none;
}

.error-form {
    display: block;
    margin-top: 5px;
    font-family: "Open Sans", sans-serif;
    font-size: 11px;
    color: #F00;
}

.alert {
    padding: 10px 15px;
    font-size: 13px;
    border-radius: 2px;
}

.alert.alert-danger a {
    color: #721c24;
    font-weight: bold;
}

.alert-mini {
    padding: 7px 15px !important;
}

.alert .close {
    margin-top: -4px;
}

.icon-facebook {
    color: #295396 !important;
}

.icon-twitter {
    color: #28aae1 !important;
}

.icon-instagram {
    color: #d6249f !important;
}

.tbl-trans-info td {
    color: rgba(0, 0, 0, 0.56);
}

.tbl-trans-info td strong {
    color: rgba(0, 0, 0, 0.8);
}

.btn-copy {
    font-size: 0.8125rem;
    color: #1d4286;
    cursor: pointer;
}

.btn-copy:hover {
    color: rgba(0, 0, 0, 0.7);
}

.toolbar {
    float: left;
}

.small-gutters {
    margin-right: -10px;
    margin-left: -10px;
}

.small-gutters > [class*="col-"] {
    padding-right: 10px;
    padding-left: 10px;
}

.mb-pro {
    margin-bottom: 30px;
}

#ifrm {
    display: none;
}

.btn-main {
    padding: 8px 25px;
    font-size: 0.875rem;
    color: #FFF;
    background: #1d4286;
}

.btn-table {
    font-size: 0.875rem;
}

.btn-action {
    padding: 3px 10px;
    font-size: 0.75rem;
}

.badge-konf {
    font-size: 0.75rem;
}

.modal-kecil .modal-header, .modal-kecil .modal-footer {
    padding: 13px;
}

.modal-konf .modal-footer {
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
}

#alert-konf {
    display: none;
}

.next-page {
    text-align: center;
}

.next-page a {
    display: inline-block;
    padding: 10px 20px;
    font-size: 0.8125rem;
    background-color: transparent;
    border: 1px solid #1d4286;
    border-radius: 30px;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.next-page a:hover {
    color: #fff;
    background-color: #1d4286;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.next-page a .fa {
    margin-left: 5px;
    font-size: 1rem;
}

.modal-content .modal-title, .modal-content label, .modal-content .form-control, .modal-content .help-block {
    font-family: "Open Sans", sans-serif;
}

.modal-content label {
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.54);
}

.modal-content .form-control {
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.54);
    border-radius: 3px;
}

.modal-content .help-block {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.4);
}

.modal-footer .btn {
    font-family: "Open Sans", sans-serif;
    font-size: 0.8125rem;
}

.table-modal th, .table-modal td {
    padding: 5px 10px;
    font-family: "Open Sans", sans-serif;
    font-size: 0.8125rem;
    color: rgba(0, 0, 0, 0.54);
}


/*
 * Component: Select2
 * ------------------
 */
.select2-container--default.select2-container--focus,
.select2-selection.select2-container--focus,
.select2-container--default:focus,
.select2-selection:focus,
.select2-container--default:active,
.select2-selection:active {
    outline: none;
}

.select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single {
    border: 1px solid #d2d6de;
    border-radius: 0;
    padding: 8px 12px;
    height: 37px;
}

.select2-container--default.select2-container--open {
    border-color: #3c8dbc;
}

.select2-dropdown {
    border: 1px solid #d2d6de;
    border-radius: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #3c8dbc;
    color: white;
}

.select2-results__option {
    padding: 6px 12px;
    font-size: 14px;
    user-select: none;
    -webkit-user-select: none;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 0;
    height: auto;
    margin-top: -4px;
}

.select2-selection__rendered {
    font-size: 14px;
}

.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 6px;
    padding-left: 20px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 28px;
    right: 3px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: 0;
}

.select2-dropdown .select2-search__field,
.select2-search--inline .select2-search__field {
    border: 1px solid #d2d6de;
}

.select2-dropdown .select2-search__field:focus,
.select2-search--inline .select2-search__field:focus {
    outline: none;
    border: 1px solid #3c8dbc;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #999;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #ddd;
}

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[aria-selected=true]:hover {
    color: #444;
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid #d2d6de;
    border-radius: 0;
}

.select2-container--default .select2-selection--multiple:focus {
    border-color: #3c8dbc;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #d2d6de;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #3c8dbc;
    border-color: #367fa9;
    padding: 1px 10px;
    color: #fff;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 5px;
    color: rgba(255, 255, 255, 0.7);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fff;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    padding-right: 10px;
}

#loader {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999999999;
}

.spinner {
    width: 40px;
    height: 40px;
    -webkit-animation: rotatee 2.0s infinite linear;
    animation: rotatee 2.0s infinite linear;
}

.dot1, .dot2 {
    width: 60%;
    height: 60%;
    display: inline-block;
    position: absolute;
    top: 0;
    border-radius: 40%;
    -webkit-animation: bouncee 2.0s infinite ease-in-out;
    animation: bouncee 2.0s infinite ease-in-out;
}

.dot1 {
    background: #de1a32;
}

.dot2 {
    top: auto;
    bottom: 0px;
    background: #0b3277;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes rotatee {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotatee {
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes bouncee {
    0%, 100% {
        -webkit-transform: scale(0);
    }

    50% {
        -webkit-transform: scale(1);
    }
}

@keyframes bouncee {
    0%, 100% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
  
    50% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}


/*star-pagging*/
.pagging {
    margin-top: 30px;
}

.pagging nav ul li {
    margin-right: 25px;
}

.pagging nav ul li:last-child {
    margin-right: 0;
}

.pagging nav ul li.active .page-link {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 15px;
    font-weight: bold;
    background: transparent;
    border-color: transparent;
    border-radius: 50%;
}

.pagging nav ul li .page-link {
    padding: 0;
    border-radius: 50%;
}

.pagging nav ul li a {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-size: 15px;
    font-family: "Roboto-Medium";
    border-radius: 50%;
    color: #777777;
    line-height: 28px;
    letter-spacing: 8px;
}

.page-item.active {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    /*width: 32px;*/
    /*height: 32px;*/
    /*border-radius: 50%;*/
    border-bottom: 2px #004696 solid;
}

.page-item .page-link {
    position: relative;
    display: block;
    padding: .5rem .75rem;
    margin-left: -1px;
    line-height: 1.25;
    font-size: 15px;
    color: #C1C1C1;
    background-color: transparent;
    border: 0px solid #f9f9f9;
}

.page-item.active .page-link {
    z-index: 1;
    color: #004696;
    font-size: 15px;
    font-family: "Roboto-Medium";
    /*background-color: #007bff;*/
    /*border-color: #007bff;*/
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: 30px;
}

.pagination {
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
}
/*end-pagging*/


header {
    height: 76.5px;
}

.img-responsive {
    display: block;
    max-width: 100%;
}

.wrap-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    z-index: 99;
}

.form-search {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 10px 0;
    width: 100%;
    background: #f1f1f1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.wrap-form-serach {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    background: #fff;
    border-radius: 30px;
    overflow: hidden;
}

.wrap-form-serach input {
    padding: 8px 15px;
    padding-left: 25px;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    font-size: 0.8125rem;
    border-color: transparent;
}

.wrap-form-serach button {
    padding: 8px 15px;
    font-size: 0.8125rem;
    background-color: transparent;
    border-color: transparent;
    cursor: pointer;
}

.wrap-form-serach button .fa {
    background: transparent;
}

.content-header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: space-between;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    padding: 7px 0;
}

.logo img {
    width: 300px;
}

@media screen and (max-width: 1900px) and (min-width: 1025px) {
    .logo img {
        /*width: 300px!important;*/
        width: 100%;
    }
}

@media (max-width: 1024px) {
    .logo img {
        width: 100%;
    }
}

@media (max-width: 991px) {
    .logo img {
        width: 100%;
    }
}

/*@media (max-width: 990px) {
    .logo img {
        width: 90px;
        padding-left: 10px;
    }
    header {
        height: 54.06px !important;
    }
}*/

@media (max-width: 900px) {
    .logo img {
        /*width: 90px;*/
        width: 75%;
        padding-left: 10px;
    }

    header {
        height: 54.06px !important;
    }
}

@media (max-width: 850px) {
    .logo img {
        /*width: 90px;*/
        width: 75%;
        padding-left: 10px;
    }
}

@media (max-width: 800px) {
    .logo img {
        /*width: 90px;*/
        width: 75%;
        padding-left: 10px;
    }

    header {
        height: 54.06px !important;
    }
}

@media (max-width: 750px) {
    .logo img {
        /*width: 90px;*/
        width: 75%;
        padding-left: 10px;
    }
}

@media (max-width: 700px) {
    .logo img {
        /*width: 90px;*/
        width: 75%;
        padding-left: 10px;
    }

    header {
        height: 54.06px !important;
    }
}

@media (max-width: 670px) {
    .logo img {
        /*width: 90px;*/
        width: 75%;
        padding-left: 10px;
    }

    header {
        height: 54.06px !important;
    }
}

@media (max-width: 650px) {
    .logo img {
        /*width: 90px;*/
        width: 75%;
        padding-left: 10px;
    }
}

@media (max-width: 600px) {
    .logo img {
        /*width: 90px;*/
        width: 125px;
        padding-left: 10px;
    }
}

@media (max-width: 550px) {
    .logo img {
        /*width: 90px;*/
        width: 125px;
        padding-left: 10px;
    }
}

@media (max-width: 500px) {
    .logo img {
        /*width: 90px;*/
        width: 120px;
        padding-left: 10px;
    }
}

@media (max-width: 450px) {
    .logo img {
        /*width: 90px;*/
        width: 120px;
        padding-left: 10px;
    }
}

@media (max-width: 400px) {
    .logo img {
        /*width: 90px;*/
        width: 115px;
        padding-left: 10px;
    }

    header {
        height: 54.06px !important;
    }
}

@media (max-width: 375px) {
    .logo img {
        /*width: 90px;*/
        width: 110px;
        padding-left: 10px;
    }

    header {
        height: 54.06px !important;
    }
}

@media (max-width: 365px) {
    .logo img {
        /*width: 90px;*/
        width: 110px;
        padding-left: 10px;
    }
    header {
        height: 54.06px !important;
    }
}

@media (max-width: 320px) {
    .logo img {
        /*max-width: 100%;*/
        width: 110px;
        padding-left: 10px;
    }
    header {
        height: 54.06px !important;
    }
}


#main-nav > ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
}

#main-nav > ul > li {
    position: relative;
    margin-right: 15px;
}

#main-nav > ul > li:last-child {
    margin-right: 0;
}

#main-nav > ul > li:hover > a {
    color: #c20001;
}

#main-nav > ul > li:hover .submenu {
    visibility: visible;
}

#main-nav > ul > li > a {
    display: block;
    /*padding: 27px 0;*/
    padding: 27px 10px;
    font-size: 15px;
    color: #303030;
    font-family: "Raleway-Regular";
    /*font-family: "Raleway";*/
}

#main-nav > ul > li > a:hover {
    color: #2E2C70;
    font-size: 15px;
    font-family: "Raleway-Bold";
    /*font-family: "Raleway";*/
    /*font-weight: bold;*/
}

#main-nav > ul > li > a.active {
    color: #2E2C70;
    font-size: 15px;
    font-family: "Raleway-Bold";
    /*font-family: "Raleway";*/
    /*font-weight: bold;*/
}

/*#main-nav ul.press li a.active {
  color: #2E2C70;
}*/

.submenu {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.09);
    z-index: 99;
}

.submenu > li {
    position: relative;
    border-bottom: 1px solid #f6f6f6;
}

.submenu > li:last-child {
    border-bottom: none;
}

.submenu > li:hover > a {
    color: #fff;
    background: #c20001;
}

.submenu > li:hover .treemenu {
    visibility: visible;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.submenu > li > a {
    display: block;
    padding: 10px 25px;
    font-size: 0.8125rem;
    color: #343434;
    white-space: nowrap;
}

.submenu > li > a:hover {
    color: #fff;
    background: #c20001;
}

.treemenu {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 100%;
    background: #fff;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.09);
}

.treemenu > li {
    border-bottom: 1px solid #f6f6f6;
}

.treemenu > li:last-child {
    border-bottom: none;
}

.treemenu > li > a {
    display: block;
    padding: 10px 25px;
    font-size: 0.8125rem;
    color: #343434;
    white-space: nowrap;
}

.treemenu > li > a:hover {
    color: #fff;
    background: #c20001;
}

.toggle-menu {
    display: none;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.toggle-menu.active span {
    background: transparent;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.toggle-menu.active span:before {
    top: 0;
    transform: rotate(45deg);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.toggle-menu.active span:after {
    bottom: 0;
    transform: rotate(-45deg);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.toggle-menu span {
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    background: #1d4286;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.toggle-menu span:before, .toggle-menu span:after {
    position: absolute;
    content: '';
    left: 0;
    width: 100%;
    height: 2px;
    background: #1d4286;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.toggle-menu span:before {
    top: -6px;
}

.toggle-menu span:after {
    bottom: -6px;
}

.toggle-search-rs {
    display: none;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    width: 30px;
    height: 30px;
    font-size: 1.125rem;
    color: #1d4286;
    cursor: pointer;
}


@media only screen and (max-width: 991px) {
    header {
        height: 68.06px;
    }
    .content-header {
        padding: 10px 0;
    }
    .toggle-menu {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
    .toggle-search-rs {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
    }
    #main-nav {
        position: fixed;
        /*top: 68.06px;*/
        top: 58px;
        /*left: 0;*/
        right: 0;
        width: 300px;
        height: calc(100% - 68.06px);
        background: #fff;
        box-shadow: 3px 0 10px rgba(0, 0, 0, 0.08);
        transform: translateX(-320px);
        display: none;
        overflow-y: auto;
    }
    #main-nav.active {
        transform: translateX(0);
        display: block;
        text-align: left;
        margin: 0px 0px 0px 0px;
        padding-bottom: 0px;
    }
    #main-nav > ul {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        -ms-align-items: flex-start;
        align-items: flex-start;
    }
    #main-nav > ul > li {
        margin-right: 0;
        width: 100%;
        border-bottom: 1px solid #f1f1f1;
    }
    /*#main-nav > ul > li:last-child {
        display: none;
    }*/
    #main-nav > ul > li > a {
        padding: 10px 15px;
        font-size: 0.875rem;
    }
    .submenu {
        display: none;
        visibility: visible;
        position: relative;
        width: 100%;
        background: #f6f6f6;
        box-shadow: none;
    }
    .submenu li {
        border-bottom-color: #eee;
    }
    .submenu li a {
        padding-left: 30px;
        font-size: 0.875rem;
    }
    ul.treemenu {
        display: none;
    }
}

@media (max-width: 900px) {
    #main-nav {
        top: 58px;
    }
}

@media (max-width: 850px) {
    #main-nav {
        top: 58px;
    }
}

@media (max-width: 800px) {
    #main-nav {
        top: 58px;
    }
}

@media (max-width: 750px) {
    #main-nav {
        top: 58px;
    }
}

@media (max-width: 700px) {
    #main-nav {
        top: 58px;
    }
}

@media (max-width: 650px) {
    #main-nav {
        top: 58px;
    }
}

@media (max-width: 600px) {
    #main-nav {
        top: 58px;
    }
}

@media (max-width: 550px) {
    #main-nav {
        top: 58px;
    }
}

@media (max-width: 500px) {
    #main-nav {
        top: 58px;
    }
}

@media (max-width: 450px) {
    #main-nav {
        top: 58px;
    }
}

@media (max-width: 400px) {
    #main-nav {
        top: 58px;
    }
}

@media (max-width: 375px) {
    #main-nav {
        top: 58px;
    }
}

@media (max-width: 365px) {
    #main-nav {
        top: 58px;
    }
}

@media (max-width: 320px) {
    #main-nav {
        top: 55px;
    }
}


.content-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
}

.inner-slider {
    width: 50%;
}

.inner-slider h2 {
    margin-bottom: 15px;
    font-family: "Open Sans", sans-serif;
    font-size: 2.5rem;
    color: #FFF;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.inner-slider p {
    margin-bottom: 20px;
    font-family: "Open Sans", sans-serif;
    font-size: 1.125rem;
    color: #FFF;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.button-slider {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.button-slider li {
    margin-right: 20px;
}

.button-slider li a {
    display: block;
    padding: 9px 20px;
    font-family: "Open Sans", sans-serif;
    font-size: 0.875rem;
    color: #FFF;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    background: transparent;
    border: 1px solid #FFF;
    border-radius: 3px;
}

.button-slider li a:hover {
    background: #1d4286;
    border-color: #1d4286;
}


@media only screen and (max-width: 1024px) {
    .inner-slider {
        width: 60%;
    }
}

@media only screen and (max-width: 991px) {
    .inner-slider {
        width: 80%;
    }
    
    .inner-slider h2 {
        font-size: 2rem;
    }
    
    .inner-slider p {
        font-size: 1.125rem;
    }
}

@media only screen and (max-width: 767px) {
    .inner-slider {
        width: 70%;
    }
    
    .inner-slider h2 {
        font-size: 1.625rem;
    }
    
    .inner-slider p {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .content-slider {
        display: none;
    }
}


#page {
    padding: 70px 0;
}

.parallax {
    min-height: 294px;
    background: rgba(0, 0, 0, 0.7);
}

.content-home h2 {
    position: relative;
    padding-left: 22px;
    margin-bottom: 20px;
    font-size: 0.9375rem;
    color: #a90001;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.content-home h2:before {
    position: absolute;
    content: '';
    top: 2px;
    left: 7px;
    width: 5px;
    height: 5px;
    background: #c20001;
    box-shadow: 0 7px 0 #c20001, -7px 7px 0 #c20001;
}

.content-home > p {
    margin-bottom: 0;
    font-size: 1.875rem;
    color: #383737;
    font-weight: 300;
    line-height: 40px;
}

.content-home .desc-content-home {
    margin-top: 25px;
    margin-bottom: 30px;
}

.content-home .desc-content-home p {
    color: #383737;
    line-height: 26px;
}

.readmore {
    position: relative;
    display: inline-block;
    padding: 8px 25px;
    font-size: 0.8125rem;
    color: #ffe50b;
    background: #002c96;
    border-radius: 15px 0 15px 0;
    z-index: 1;
}

.readmore:hover {
    color: #fff;
}

.readmore .fa {
    margin-right: 3px;
    font-size: 0.8125rem;
}

.link-more {
    margin-top: 40px;
    text-align: center;
}

.text-more {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.text-more .fa {
    margin-right: 3px;
}

#banner {
    position: relative;
}

.content-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
}

.content-banner h1 {
    margin-bottom: 15px;
    font-size: 2rem;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.content-banner ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
}

.content-banner ul li {
    position: relative;
    margin-right: 20px;
}

.content-banner ul li:last-child {
    margin-right: 0;
}

.content-banner ul li:last-child:before {
    display: none;
}

.content-banner ul li:before {
    position: absolute;
    content: '/';
    right: -12px;
    font-size: 0.8125rem;
    color: #fff;
}

.content-banner ul li a {
    display: block;
    font-size: 0.8125rem;
    color: #fff;
}


@media only screen and (max-width: 991px) {
    #page {
        padding: 50px 0;
    }

    .content-home > p {
        font-size: 1.5rem;
        line-height: 34px;
    }
    
    .content-home .desc-content-home {
        margin-top: 15px;
        margin-bottom: 25px;
    }
}

@media only screen and (max-width: 767px) {
    .content-home h2 {
        margin-bottom: 15px;
        padding-left: 18px;
        font-size: 0.875rem;
    }
    
    .content-home h2:before {
        width: 4px;
        height: 4px;
        box-shadow: 0 6px 0 #c20001, -6px 6px 0 #c20001;
    }
    
    .content-home > p {
        font-size: 1.125rem;
        line-height: 26px;
    }
    
    .content-home > p br {
        display: none;
    }
    
    .content-home .desc-content-home p {
        font-size: 0.875rem;
        line-height: 23px;
    }

    .readmore {
        padding: 6px 20px;
        font-size: 0.75rem;
    }
    
    .readmore .fa {
        font-size: 0.75rem;
    }

    .text-more {
        font-size: 0.8125rem;
    }
    
    .text-more .fa {
        margin-right: 1px;
    }

    .parallax {
        min-height: 250px;
    }

    .content-banner h1 {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 600px) {
    .parallax {
        min-height: 170px;
    }

    .content-banner h1 {
        font-size: 1.25rem;
    }
    
    .content-banner ul {
        display: none;
    }
}


#about {
    padding: 70px 0;
}

.wrap-about-home {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: space-between;
}

.content-about-home {
    padding-right: 30px;
    width: 50%;
}

.img-about-home {
    width: 50%;
}

.img-about-home img {
    width: 100%;
}

.sertifikat {
    margin-top: 50px;
    margin-bottom: 20px;
}

.sertifikat ul {
    text-align: center;
}

.sertifikat ul li {
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 15px;
}

.sertifikat ul li:last-child {
    margin-right: 0;
}

.sertifikat ul li img {
    max-width: 150px;
    max-height: 70px;
    width: auto;
    height: auto;
}


@media only screen and (max-width: 991px) {
    #about {
        padding: 50px 0;
    }

    .content-about-home {
        padding-right: 0;
        width: 100%;
    }
    
    .content-about-home > p br {
        display: none;
    }

    .img-about-home {
        display: none;
    }
}

@media only screen and (max-width: 767px) {
    #about {
        padding: 40px 0;
    }

    .sertifikat {
        margin-bottom: 0;
    }
    
    .sertifikat ul li {
        margin-right: 15px;
    }
    
    .sertifikat ul li:last-child {
        margin-right: 0;
    }
    
    .sertifikat ul li img {
        max-width: 150px;
        max-height: 50px;
    }

    .about-page {
        font-size: 0.875rem;
        line-height: 23px;
    }
}


#customer {
    padding: 70px 0;
}

.wrap-customer {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-top: 40px;
}

.item-customer {
    width: calc(100% / 6);
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.item-customer:nth-child(6n) {
    border-right: none;
}

.item-customer:nth-last-child(-n+6) {
    border-bottom: none;
}

.item-customer a {
    display: block;
    padding: 15px;
}

.readmore-customer {
    display: inline-block;
    margin-top: 30px;
}


@media only screen and (max-width: 767px) {
    .wrap-customer {
        margin-top: 30px;
    }

    #customer {
        padding: 40px 0;
    }

    .item-customer {
        width: calc(100% / 5);
    }
    
    .item-customer:nth-child(6n) {
        border-right: 1px solid #eee;
    }
    
    .item-customer:nth-last-child(-n+6) {
        border-bottom: 1px solid #eee;
    }
    
    .item-customer:nth-child(5n) {
        border-right: none;
    }
    
    .item-customer:nth-last-child(-n+5) {
        border-bottom: none;
    }
    
    .item-customer a {
        padding: 10px;
    }
}

@media only screen and (max-width: 480px) {
    .wrap-customer {
        margin-top: 20px;
    }

    .item-customer {
        width: calc(100% / 4);
    }
    
    .item-customer:nth-child(5n) {
        border-right: 1px solid #eee;
    }
    
    .item-customer:nth-last-child(-n+5) {
        border-bottom: 1px solid #eee;
    }
    
    .item-customer:nth-child(4n) {
        border-right: none;
    }
    
    .item-customer:nth-last-child(-n+4) {
        border-bottom: none;
    }
    
    .item-customer a {
        padding: 5px;
    }
}


#facilities {
    padding-top: 70px;
    padding-bottom: 120px;
}

.content-facilities-home {
    position: relative;
    padding-left: 50px;
    width: 50%;
}

.content-facilities-home > p, .content-facilities-home .desc-content-home p {
    color: #fff;
}

.content-facilities-home:before {
    position: absolute;
    content: '';
    top: -100px;
    left: 0;
    width: calc(100% + 80px);
    height: calc(100% + 150px);
    border: 1px solid #8f0001;
    z-index: 0;
}

.wrap-facilitas {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -15px;
    margin-top: 40px;
}

.item-facilitas {
    padding: 0 15px;
    margin-bottom: 30px;
    width: calc(100% / 4);
}

.item-facilitas a {
    display: block;
}

.item-facilitas a:hover h3 {
    color: #c20001;
}

.item-facilitas a:hover h3:before, .item-facilitas a:hover h3:after {
    width: 100%;
}

.item-facilitas a:hover h3:before {
    transition: 0.3s;
    -o-transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
}

.item-facilitas a:hover h3:after {
    transition: 0.8s;
    -o-transition: 0.8s;
    -moz-transition: 0.8s;
    -webkit-transition: 0.8s;
}

.item-facilitas a img {
    margin-bottom: 13px;
}

.item-facilitas a h3 {
    position: relative;
    font-size: 0.875rem;
    font-weight: bold;
    text-align: center;
}

.item-facilitas a h3:before, .item-facilitas a h3:after {
    position: absolute;
    content: '';
    left: 0;
    bottom: -13px;
    width: 0;
    height: 3px;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.item-facilitas a h3:before {
    background: #eee;
}

.item-facilitas a h3:after {
    background: #1d4286;
}

@media only screen and (max-width: 991px) {
    #facilities {
        padding-top: 50px;
        padding-bottom: 100px;
    }

    .content-facilities-home {
        padding-right: 30px;
        width: 100%;
    }
    
    .content-facilities-home:before {
        width: 100%;
    }

    .wrap-facilitas {
        margin: 0 -10px;
        margin-top: 30px;
    }

    .item-facilitas {
        padding: 0 10px;
        width: calc(100% / 3);
    }
}

@media only screen and (max-width: 767px) {
    #facilities {
        padding: 40px 0;
    }

    .content-facilities-home {
        padding-right: 0;
        padding-left: 0;
    }
    
    .content-facilities-home:before {
        display: none;
    }

    .item-facilitas {
        padding: 0 10px;
        width: calc(100% / 2);
    }
}

@media only screen and (max-width: 600px) {
    .wrap-facilitas {
        margin: 0 -5px;
    }

    .item-facilitas {
        padding: 0 5px;
    }
}

@media only screen and (max-width: 480px) {
    .item-facilitas {
        width: 100%;
    }
}


#project {
    position: relative;
    padding: 70px 0;
    margin-top: 100px;
}

#project:before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: #f1f1f1;
    z-index: 1;
}

#project .container {
    position: relative;
    z-index: 2;
}

#project .title-content h2 {
    color: #6dbde3;
}

#project .title-content h3 {
    color: #FFF;
}

.wrap-project {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow-x: hidden;
    z-index: 10;
}

.wrap-slide-project {
    position: relative;
    z-index: 1;
}

.content-project {
    position: relative;
    padding-top: 100px;
    padding-bottom: 50px;
    padding-right: 50px;
    background: rgba(29, 66, 134, 0.95);
    text-align: right;
}

.content-project:before {
    position: absolute;
    content: '';
    top: 0;
    right: -1000px;
    width: 1000px;
    height: 100%;
    background: rgba(29, 66, 134, 0.95);
}

.content-project p {
    margin-bottom: 35px;
    font-family: "Open Sans", sans-serif;
    font-size: 1.875rem;
    color: #6dbde3;
    font-weight: lighter;
    font-style: italic;
    line-height: 40px;
}

.content-project a {
    font-family: "Open Sans", sans-serif;
    font-size: 0.8125rem;
    color: #6dbde3;
    font-weight: bold;
    text-transform: uppercase;
}

.box-project {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -15px;
    margin-top: 20px;
}

.item-project {
    display: block;
    padding: 0 15px;
    margin-bottom: 40px;
    width: 50%;
}

.item-project img {
    margin-bottom: 20px;
}

.item-project h3 {
    position: relative;
    padding-left: 45px;
    font-family: "Open Sans", sans-serif;
    font-size: 1.125rem;
    color: #4a4a4a;
    font-weight: 500;
}

.item-project h3:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 30px;
    height: 1px;
    background: #c20001;
}


@media only screen and (max-width: 1024px) {
    .content-project {
        padding-top: 70px;
    }
    
    .content-project p {
        margin-bottom: 35px;
        font-size: 1.5rem;
        line-height: 30px;
    }
    
    .content-project a {
        font-size: 0.75rem;
    }
}

@media only screen and (max-width: 991px) {
    #project {
        padding: 50px 0;
        margin-top: 0;
    }
    
    #project:before {
        height: 200px;
    }
    
    #project .title-content h2, #project .title-content h3 {
        color: #333;
        text-align: left;
    }

    .wrap-project {
        position: relative;
    }

    .content-project {
        padding: 0;
        background: transparent;
    }
    
    .content-project:before {
        display: none;
    }
    
    .content-project p, .content-project a {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .item-project {
        width: 50%;
    }
    
    .item-project h3 {
        padding-left: 25px;
        font-size: 0.875rem;
    }
    
    .item-project h3:before {
        width: 15px;
    }
}

@media only screen and (max-width: 480px) {
    .item-project {
        width: 100%;
    }
}


#product {
    padding: 70px 0;
    background: #1d4286;
}

#product.normal {
    background: #f6f6f6;
}

#page.page-category {
    padding-top: 70px;
    padding-bottom: 20px;
}

.content-product-home.normal h2 {
    color: #c20001;
}

.content-product-home.normal h2:before {
    background: #c20001;
    box-shadow: 0 7px 0 #c20001, -7px 7px 0 #c20001;
}

.content-product-home.normal p {
    color: #343434;
}

.content-product-home h2 {
    color: #fff;
}

.content-product-home h2:before {
    background: #fff;
    box-shadow: 0 7px 0 #fff, -7px 7px 0 #fff;
}

.content-product-home p {
    color: #8fc5db;
}

.wrap-product-home {
    margin-top: 35px;
}

.item-product-home {
    width: 100%;
}

.item-product-home a {
    display: block;
}

.item-product-home h3 {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: space-between;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    padding: 20px 20px;
    margin-top: -35px;
    width: 90%;
    font-size: 1.25rem;
    color: #383737;
    background: #fff;
    z-index: 2;
}

.item-category {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: space-between;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    margin-bottom: 50px;
}

.img-category {
    position: relative;
    padding-bottom: 40px;
    margin-right: 30px;
    width: 45%;
}

.img-category.second {
    order: 2;
}

.img-category img {
    position: relative;
    width: 100%;
    z-index: 2;
}

.img-category.left {
    padding-left: 40px;
}

.img-category.left:before {
    left: 0;
}

.img-category.right {
    padding-right: 40px;
}

.img-category.right:before {
    right: 0;
}

.img-category:before {
    position: absolute;
    content: '';
    bottom: 0;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    border: 1px solid #1d4286;
    z-index: 1;
}

.content-category {
    width: 45%;
}

.content-category.first {
    order: 1;
}

.content-category h3 {
    position: relative;
    padding-left: 22px;
    margin-bottom: 20px;
    font-size: 1.5625rem;
    font-weight: bold;
}

.content-category h3:before {
    position: absolute;
    content: '';
    top: calc(50% - 3px);
    left: 7px;
    width: 5px;
    height: 5px;
    background: #c20001;
    box-shadow: 0 7px 0 #c20001, -7px 7px 0 #c20001;
}

.content-category p {
    margin-bottom: 30px;
    line-height: 26px;
}

.detail-category {
    width: 85%;
}

.detail-category h3 {
    position: relative;
    padding-left: 22px;
    margin-bottom: 20px;
    font-size: 1.5625rem;
    font-weight: bold;
}

.detail-category h3:before {
    position: absolute;
    content: '';
    top: calc(50% - 3px);
    left: 7px;
    width: 5px;
    height: 5px;
    background: #c20001;
    box-shadow: 0 7px 0 #c20001, -7px 7px 0 #c20001;
}

.detail-category p {
    margin-bottom: 0;
    line-height: 26px;
}

.list-category {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin-top: 30px;
}

.list-category li {
    margin-right: 15px;
}

.list-category li:last-child {
    margin-right: 0;
}

.list-category li a {
    display: block;
    color: #343434;
}

.list-category li a.active {
    color: #c20001;
    font-weight: bold;
}

.wrap-product {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -15px;
    margin-top: 40px;
}

.item-product {
    padding: 0 15px;
    margin-bottom: 30px;
    width: calc(100% / 3);
}

.item-product a {
    display: block;
    padding-bottom: 30px;
    text-align: center;
    border-bottom: 1px solid #f1f1f1;
}

.item-product a:hover h3 {
    color: #c20001;
}

.item-product a img {
    margin-bottom: 20px;
    width: 60%;
}

.item-product a h3 {
    font-size: 1.125rem;
    color: #343434;
    font-weight: bold;
}

.detail-product h2 {
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.relasi-product {
    margin-top: 50px;
}

.relasi-product .title {
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 30px;
    font-size: 1.5rem;
    font-weight: bold;
    border-bottom: 3px solid #eee;
}

.relasi-product .title:before {
    position: absolute;
    content: '';
    left: 0;
    bottom: -3px;
    width: 100px;
    height: 3px;
    background: #c20001;
}

.item-product-realsi a {
    display: block;
    text-align: center;
}

.item-product-realsi a:hover h3 {
    color: #c20001;
}

.item-product-realsi a img {
    margin-bottom: 20px;
    width: 60%;
}

.item-product-realsi a h3 {
    font-size: 1.125rem;
    color: #343434;
    font-weight: bold;
}


@media only screen and (max-width: 991px) {
    .item-product-home h3 {
        padding: 15px;
        margin-top: -25px;
        font-size: 0.875rem;
    }

    .detail-category {
        width: 100%;
    }
    
    .detail-category h3 {
        font-size: 1.25rem;
    }
    
    .detail-category h3:before {
        top: calc(50% - 5px);
    }

    .list-category {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    
    .list-category li {
        margin-right: 0;
        border-bottom: 1px solid #eee;
    }
    
    .list-category li a {
        padding: 10px 0;
    }

    .item-product a img {
        width: 70%;
    }
    
    .item-product a h3 {
        font-size: 0.875rem;
    }

    .item-product-realsi a h3 {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 767px) {
    #product {
        padding: 40px 0;
    }

    .wrap-product-home {
        margin-top: 25px;
    }

    .item-product-home h3 {
        padding: 13px;
        margin-top: 0;
        width: 100%;
        font-size: 0.875rem;
    }

    .detail-category h3 {
        margin-bottom: 15px;
    }
    
    .detail-category p {
        font-size: 0.875rem;
        line-height: 22px;
    }

    .item-category {
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-bottom: 40px;
    }

    .img-category {
        padding-bottom: 0;
        margin-right: 0;
        margin-bottom: 20px;
        width: 100%;
        order: 1;
    }
    
    .img-category.second {
        order: 1;
    }
    
    .img-category.left {
        padding-left: 0;
    }
    
    .img-category.right {
        padding-right: 0;
    }
    
    .img-category:before {
        display: none;
    }

    .content-category {
        width: 100%;
        order: 2;
    }
    
    .content-category.first {
        order: 2;
    }
    
    .content-category h3 {
        padding-left: 22px;
        margin-bottom: 10px;
        font-size: 1.25rem;
    }
    
    .content-category h3:before {
        top: calc(50% - 5px);
    }
    
    .content-category p {
        margin-bottom: 30px;
        font-size: 0.875rem;
        line-height: 23px;
    }

    .item-product {
        width: calc(100% / 2);
    }

    .img-detail-product {
        margin: 0 auto;
        margin-bottom: 20px;
        width: 70%;
    }

    .detail-product h2 {
      margin-bottom: 10px;
      font-size: 1.125rem;
      font-weight: bold;
    }
    
    .detail-product .desc {
      font-size: 0.875rem;
      line-height: 23px;
    }

    .relasi-product {
        margin-top: 30px;
    }
    
    .relasi-product .title {
        font-size: 1.125rem;
    }

    .item-product-realsi a h3 {
        font-size: 0.875rem;
    }
}

@media only screen and (max-width: 600px) {
    .list-category li a {
        font-size: 0.875rem;
    }

    .wrap-product {
        margin: 0 -5px;
        margin-top: 40px;
    }

    .item-product {
        padding: 0 5px;
    }
    
    .item-product a img {
        width: 90%;
    }
}

#award {
    padding: 70px 0;
    background: #f6f6f6;
}

.title-award h2 {
    margin-bottom: 5px;
    font-size: 0.9375rem;
    color: #8f0001;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.title-award p {
    margin-bottom: 0;
    font-size: 1.875rem;
    font-weight: 300;
}

.wrap-award {
    padding: 0 50px;
    margin-top: 30px;
}

.item-award {
    width: 100%;
}

.item-award a {
    display: block;
    padding: 20px;
    background: #fff;
}

.item-award a h3 {
    margin-top: 15px;
    font-size: 1.0625rem;
    color: #383737;
    font-weight: bold;
    text-align: center;
    line-height: 26px;
}


@media only screen and (max-width: 991px) {
    .title-award p {
        font-size: 1.5rem;
    }

    .item-award a h3 {
        font-size: 0.875rem;
    }
}

@media only screen and (max-width: 767px) {
    #award {
        padding: 40px 0;
    }

    .title-award h2 {
        font-size: 0.875rem;
    }
    
    .title-award p {
        font-size: 1.125rem;
    }

    .wrap-award {
        padding: 0;
    }

    .item-award a {
        padding: 10px;
    }
    
    .item-award a h3 {
        font-size: 0.8125rem;
        line-height: 22px;
    }
}

.page-service {
    margin-top: 30px;
}

.wrap-service {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.item-service {
    display: block;
    padding: 0 10px;
    margin-bottom: 30px;
    width: calc(100% / 3);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.item-service:hover img {
    opacity: .8;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.item-service img {
    margin-bottom: 15px;
}

.item-service h3 {
    position: relative;
    padding-left: 25px;
    font-family: "Open Sans", sans-serif;
    font-size: 0.9375rem;
    color: #343434;
    font-weight: normal;
}

.item-service h3:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    width: 15px;
    height: 1px;
    background: #c20001;
}

.title-detail-service {
    margin-bottom: 20px;
    font-family: "Open Sans", sans-serif;
    font-size: 1.625rem;
    font-weight: 500;
}


@media only screen and (max-width: 767px) {
    .item-service {
        width: calc(100% / 2);
    }

    .title-detail-service {
        font-size: 1.3125rem;
    }
}

@media only screen and (max-width: 480px) {
    .item-service {
        width: 100%;
    }

    .title-detail-service {
        font-size: 1.125rem;
    }
}

/*star-ctahome*/
.ctahome {
    position: relative;
    margin: auto;
    padding: 12px 22px 12px 22px;
    transition: all 0.2s ease;
}

.ctahome:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 28px;
    background: #A6DEEF;
    width: 50px;
    height: 50px;
    transition: all 0.3s ease;
}

.ctahome span {
    position: relative;
    font-size: 15px;
    line-height: 18px;
    /*font-weight: 900;*/
    /*letter-spacing: 0.25em;*/
    text-transform: capitalize;
    vertical-align: middle;
    color: #282A75;
    font-family: "Roboto-Medium";
}
.ctahome svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #111;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}
.ctahome:hover::before {
    width: 100%;
    /*background: #ffab9d;*/
    background: #A6DEEF;
}
.ctahome:hover svg {
    transform: translateX(0);
}
.ctahome:active {
    transform: scale(0.96);
}
/*end-ctahome*/

/*star-ctahome-two*/
.ctahome-two {
    position: relative;
    margin: auto;
    padding: 12px 22px 12px 22px;
    transition: all 0.2s ease;
}

.ctahome-two:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 28px;
    /*background: #A6DEEF;*/
    border: 1px solid #ffffff;
    width: 50px;
    height: 50px;
    transition: all 0.3s ease;
}

.ctahome-two span {
    position: relative;
    line-height: 18px;
    /*font-weight: 900;*/
    /*letter-spacing: 0.25em;*/
    text-transform: capitalize;
    vertical-align: middle;
    color: #ffffff;
    font-size: 15px;
    font-family: "Roboto-Medium";
}
.ctahome-two svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #111;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}
.ctahome-two:hover::before {
    width: 100%;
    /*background: #A6DEEF;*/
    border: 1px solid #ffffff;
}
.ctahome-two:hover svg {
    transform: translateX(0);
}
.ctahome-two:active {
    transform: scale(0.96);
}
/*end-ctahome-two*/

/*star-artic*/
.articTeks {
    color: #383838;
    font-size: 60px;
    font-family: "Poppins-Bold";
    text-transform: capitalize;
    letter-spacing: 5px;
    line-height: 65px;
    padding-bottom: 30px;
}

.img-artic {
    position: relative;
    /*margin-left: 10px;*/
    margin-left: 0px;
    margin-bottom: 10px;
}

.img-artic ul li {}

.img-artic img {
    position: relative;
    z-index: 2;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

.img-artic .layerimg {
    display: block;
    width: 100%;
}

.img-artic .layerimg:hover, .img-artic .layerimg:focus {
    transform: scale(1.2);
    /*transform: scale(1, 1.1);*/
    /*transform: scale(2, 1.2);*/
    /*transform: scale(1.5, 1.2);*/
    transition: 0.5s all ease-in-out;
}

.img-artic:beforess {
    position: absolute;
    content: "";
    top: 10px;
    left: -10px;
    width: 100%;
    height: 100%;
    /*border: 1px solid #F0E2D4;*/
    background: #F0E2D4;
    z-index: 1;
}

@media (max-width: 991px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 900px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 850px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 800px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 750px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 700px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 650px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 600px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 550px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 500px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 450px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 400px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 375px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 365px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}

@media (max-width: 320px) {
    .img-artic:beforess {
        left: -10px;
    }
    .img-artic {
        margin-bottom: 10px;
        margin-left: 0px;
    }
}
/*end-artic*/

/*star-ctakontak*/
.ctakontak {
    position: relative;
    margin: auto;
    padding: 12px 22px 12px 22px;
    transition: all 0.2s ease;
    border: 0;
    background: transparent;
    cursor: pointer;
    margin-top: 10px;
}

.ctakontak:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 28px;
    background: #A6DEEF;
    /*border: 1px solid #ffffff;*/
    width: 50px;
    height: 50px;
    transition: all 0.3s ease;
}

.ctakontak span {
    position: relative;
    line-height: 18px;
    /*font-weight: 900;*/
    /*letter-spacing: 0.25em;*/
    text-transform: capitalize;
    vertical-align: middle;
    color: #282A75;
    font-size: 15px;
    font-family: "Roboto-Medium";
}
.ctakontak svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #111;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}
.ctakontak:hover::before {
    width: 100%;
    background: #A6DEEF;
    /*border: 1px solid #ffffff;*/
}
.ctakontak:hover svg {
    transform: translateX(0);
}
.ctakontak:active {
    transform: scale(0.96);
}
/*end-ctakontak*/


/*star-news*/
#news {
    padding-top: 70px;
    padding-bottom: 70px;
}

.wrap-news-home {
    margin-top: 40px;
}

.item-news-home {
    display: block;
    margin-bottom: 15px;
    width: 100%;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.item-news-home:hover img {
    opacity: .8;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.item-news-home a {
    display: block;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
}

.wrap-news {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -15px;
    margin-top: 40px;
}

.item-news {
    display: block;
    padding: 0 15px;
    width: calc(100% / 3);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    position: relative;
}

.item-news:hover img {
    /*opacity: .8;*/
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.item-news a {
    display: block;
    padding-bottom: 20px;
    /*box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);*/
    /*background: #F8F8F8;*/
}

.item-news img {
    background: #F8F8F8;
}

/*.img-item-news:first-child:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    background-image: linear-gradient(to left, #37D54A, #25A8E0, #2E2C70);
    top: 0;
    bottom: 0px;
    left: 0;
    z-index: 9999999;
}*/

.img-item-news {
    position: relative;
    background: #F8F8F8;
}

.img-item-news .imgArt {
    display: block;
    width: 100%;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

.img-item-news span {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 10px 0;
    padding-left: 25px;
    width: 90%;
    font-size: 0.8125rem;
    color: #1d4286;
    background: #fff;
}

.content-item-news {
    padding: 15px 25px;
    padding-bottom: 25px;
    background: #F8F8F8;
    border-bottom-left-radius: 50px;
    min-height: 230px;
}

.content-item-news .news-text {
    color: #404040;
    font-size: 12px;
    font-family: "Poppins-Regular";
    line-height: 28px;
    padding-bottom: 10px;
}

.content-item-news h3 {
    margin-bottom: 10px;
    font-family: "Poppins-Medium";
    font-size: 18px;
    color: #585858;
    line-height: 28px;
}

.content-item-news p {
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 24px;
    color: #414241;
    font-family: "Raleway-Regular";
}

.detail-news > img {
    margin-bottom: 25px;
    width: 100%;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
}

.title-detail-news {
    margin-bottom: 25px;
    font-family: "Poppins-SemiBold";
    font-size: 30px;
    line-height: 40px;
    color: #262626;
    /*width: 50%;*/
}

.time-detail-news {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin-bottom: 15px
}

.time-detail-news li {
    margin-right: 15px;
    font-family: "Poppins-Regular";
    font-size: 12px;
    color: #404040;
    line-height: 28px;
}

.time-detail-news li .fa {
    margin-right: 5px;
    color: #999999;
}

#page-detailnews {
    padding-top: 55px;
    padding-bottom: 55px;
}

.paragraf {
    font-size: 15px;
    color: #585858;
    font-family: "Poppins-Regular";
    margin-bottom: 15px;
    line-height: 28px;
}

.paragraf p {
    font-size: 15px;
    color: #585858;
    font-family: "Poppins-Regular";
    margin-bottom: 15px;
    line-height: 28px;
}


@media (max-width: 800px) {
    .title-detail-news {
        font-size: 28px;
        width: 70%;
    }
}

@media (max-width: 700px) {
    .title-detail-news {
        font-size: 26px;
        width: 70%;
    }
}

@media (max-width: 600px) {
    .title-detail-news {
        font-size: 26px;
        width: 70%;
    }
}

@media (max-width: 500px) {
    .title-detail-news {
        font-size: 22px;
        width: 70%;
    }
}

@media (max-width: 400px) {
    .title-detail-news {
        font-size: 17px;
        width: 70%;
    }
}

@media (max-width: 375px) {
    #page-detailnews {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .title-detail-news {
        font-size: 17px;
        width: 70%;
    }
}

@media (max-width: 365px) {
    #page-detailnews {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}

@media (max-width: 320px) {
    #page-detailnews {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .title-detail-news {
        font-size: 17px;
        width: 80%;
    }
}

@media only screen and (max-width: 991px) {
    #news {
        padding-bottom: 40px;
    }

    .wrap-news-home {
        margin-top: 30px;
    }

    .content-item-news h3 {
        font-size: 0.875rem;
        line-height: 22px;
    }
    
    .content-item-news p {
        line-height: 22px;
    }

    .item-news {
        width: calc(100% / 2);
    }
}

@media (max-width: 800px) {
    .item-news {
        /*width: 100%;*/
        width: calc(100% / 1);
    }
}

@media (max-width: 750px) {
    .item-news {
        /*width: 100%;*/
        width: calc(100% / 1);
    }
}

@media (max-width: 700px) {
    .item-news {
        /*width: 100%;*/
        width: calc(100% / 1);
    }
}

@media (max-width: 600px) {
    .item-news {
        /*width: 100%;*/
        width: calc(100% / 1);
    }

    .content-detail-news {
        font-size: 0.875rem;
        line-height: 23px;
    }
}


/*a {
    text-decoration: none;
    color: inherit;
}*/

.cta {
    position: relative;
    margin: auto;
    padding: 12px 22px 12px 22px;
    transition: all 0.2s ease;
}

.cta:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 28px;
    background: #A6DEEF;
    width: 50px;
    height: 50px;
    transition: all 0.3s ease;
}

.cta span {
    position: relative;
    font-size: 15px;
    line-height: 18px;
    /*font-weight: 900;*/
    /*letter-spacing: 0.25em;*/
    text-transform: capitalize;
    vertical-align: middle;
    color: #282A75;
    font-family: "Roboto-Medium";
}
.cta svg {
  position: relative;
  top: 0;
  margin-left: 10px;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #111;
  stroke-width: 2;
  transform: translateX(-5px);
  transition: all 0.3s ease;
}
.cta:hover::before {
    /*width: 100%;*/
    width: 100%;
    /*width: 50%;*/
    background: #A6DEEF;
}
.cta:hover svg {
    transform: translateX(0);
}
.cta:active {
    transform: scale(0.96);
}

@media (max-width: 1125px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 62%;
    }
}

@media (max-width: 1024px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 62%;
    }
}

@media (max-width: 991px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
        max-width: 55%;
    }
}

@media (max-width: 900px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
        max-width: 55%;
    }
}

@media (max-width: 850px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
        max-width: 55%;
    }
}

@media (max-width: 800px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
    }
}

@media (max-width: 750px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
    }
}

@media (max-width: 700px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
    }
}

@media (max-width: 650px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
    }
}

@media (max-width: 600px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
    }
}

@media (max-width: 550px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 35%;
        flex: 0 0 35%;
    }
}

@media (max-width: 500px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 41%;
        flex: 0 0 41%;
    }
}

@media (max-width: 450px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 45%;
        flex: 0 0 45%;
    }
}

@media (max-width: 400px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }
}

@media (max-width: 375px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
    }
}

@media (max-width: 365px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        width: 100%;
    }
}

@media (max-width: 320px) {
    .col-md-6.newskyt {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        width: 100%;
    }
}
/*end-news*/

/*star-demof*/
#border-artic {
    /*border-left: 0px solid #D9D9D9;*/
    /*border-radius: 0px;*/
    /*padding-left: 10px;*/
    /*box-shadow: 0 3px 15px rgb(0 0 0 / 8%);*/
}

.demof {
    border: 0px solid #E5E5E5;
    margin: 20px 0;
    min-height: 115px;
    padding-left: 0px;
    padding-right: 0px;
}

.demo2 {
    max-height: 740px;
    /*max-height: 900px;*/
}

.demof br {
    display: block !important;
    margin-bottom: 1.5em !important;
}

.demof ul {
    padding: 0;
    list-style: none;
}

.demof ul li {
    background: #F8F8F8;
    border-bottom-left-radius: 50px;
    margin-bottom: 10px;
}

.demof ul li a {
}

.demof li a .posted {
    color: #404040;
    font-size: 9px;
    font-family: "Poppins-Regular";
    display: inline-block;
    line-height: 12px;
    padding-top: 15px;
    padding-left: 15px;
}

.demof li a .posted .reguler {
    font-family: "Poppins-Regular";
}

.demof li a span {
    color: #B1B1B1;
    font-size: 13px;
    font-family: "Poppins-Italic";
}

.demof li a .span {
    color: #585858;
    font-size: 13px;
    font-family: "Poppins-Medium";
    padding-top: 5px;
    padding-bottom: 25px;
    padding-left: 15px;
    line-height: 20px;
    min-height: 115px;
}

.artic-lain {
    font-size: 20px;
    color: #262626;
    font-family: "Poppins-Bold";
    text-transform: capitalize;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #D9D9D9;
    line-height: 40px;
}

@media (max-width: 991px) {
    .artic-lain {
        padding-left: 0px;
    }
    .demof li a .posted {
        padding-left: 0px;
    }
    .demof li a .span {
        padding-left: 0px;
    }
}

@media (max-width: 974px) {
    #border-artic {
        border: 0px solid #3F3F3F;
        padding-left: 0px;
    }
}

@media (max-width: 900px) {
    #border-artic {
        border: 0px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 0px;
    }
    .demof li a .posted {
        padding-left: 15px;
    }
    .demof li a .span {
        padding-left: 15px;
    }
}

@media (max-width: 800px) {
    #border-artic {
        border: 0px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 15px;
    }
    .demof li a .span {
        padding-left: 15px;
    }
}

@media (max-width: 700px) {
    #border-artic {
        border: 0px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 15px;
    }
    .demof li a .span {
        padding-left: 15px;
    }
}

@media (max-width: 600px) {
    #border-artic {
        border: 0px solid #3F3F3F;
        /*background: #e9e9e947;*/
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 15px;
    }
    .demof li a .span {
        padding-left: 15px;
    }
}

@media (max-width: 500px) {
    #border-artic {
        border: 0px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 15px;
    }
    .demof li a .span {
        padding-left: 15px;
    }
}

@media (max-width: 400px) {
    #border-artic {
        border: 0px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 15px;
    }
    .demof li a .span {
        padding-left: 15px;
    }
}

@media (max-width: 375px) {
    #border-artic {
        border: 0px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 15px;
    }
    .demof li a .span {
        padding-left: 15px;
    }
}

@media (max-width: 365px) {
    #border-artic {
        border: 0px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 15px;
    }
    .demof li a .span {
        padding-left: 15px;
    }
}

@media (max-width: 320px) {
    #border-artic {
        border: 0px solid #3F3F3F;
    }
    .artic-lain {
        padding-left: 15px;
    }
    .demof li a .posted {
        padding-left: 15px;
    }
    .demof li a .span {
        padding-left: 15px;
    }
}
/*end-demof*/


#contact {
    position: relative;
    padding-top: 50px;
    background: #fff;
}

#contact:before {
    position: absolute;
    content: '';
    top: 50px;
    right: 0;
    width: 70%;
    height: calc(100% - 50px);
    background: #f6f6f6;
    z-index: 2;
}

#contact:after {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40%;
    background: #1d4286;
    z-index: 1;
}

.wrap-contact-home {
    position: relative;
    padding: 50px 0;
    background: #f6f6f6;
    z-index: 3;
}

.content-contact-home {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    -ms-align-items: flex-end;
    align-items: flex-end;
    width: 40%;
}

.content-contact-home h2, .content-contact-home p {
    text-align: right;
}

.content-contact-home .desc-content-home {
    margin-bottom: 0;
    width: 355px;
}

.content-contact-home .desc-content-home p {
    margin-bottom: 0;
}

.content-contact-home ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin-top: 20px;
}

.content-contact-home ul li {
    margin-right: 20px;
}

.content-contact-home ul li:last-child {
    margin-right: 0;
}

.content-contact-home ul li a {
    display: block;
    font-size: 0.8125rem;
    font-weight: bold;
}

.content-contact-home ul li a .fa {
    margin-right: 3px;
}

.alamat-home {
    margin-top: 30px;
    text-align: right;
}

.alamat-home label {
    margin-bottom: 5px;
    font-weight: bold;
}

.alamat-home p {
    margin-bottom: 0;
    color: #383737;
}

.img-contact {
    position: absolute;
    top: -50px;
    right: 0;
    width: calc(60% - 50px);
    height: 100%;
    background: blue;
    background-size: cover;
}

/*star-pagekontak*/
#pagekontak {
    padding-top: 50px;
    padding-bottom: 50px;
}

#maps iframe {
    display: block;
}

.kontak1 {
    font-size: 18px;
    color: #383838;
    font-family: "Poppins-Regular";
    padding-bottom: 50px;
    line-height: 28px;
    text-align: center;
}

.col-md-6.kontakRelative {
    background: #004696;
    position: relative;
}

@media (max-width: 767px) {
    .col-md-6.kontakRelative {
        height: 450px;
    }
}

@media (max-width: 750px) {
    .col-md-6.kontakRelative {
        height: 450px;
    }
}

@media (max-width: 700px) {
    .col-md-6.kontakRelative {
        height: 450px;
    }
}

.mapsRight {
    position: absolute;
    top: 50%;
    /*left: 50%;*/
    left: 45%;
    transform: translate(-50%, -50%);
}

.kontak2 {
    font-size: 16px;
    color: #383838;
    font-family: "Poppins-Regular";
    padding-bottom: 20px;
    line-height: 23px;
    display: flex;
}

.item-contact {
    margin-bottom: 30px;
}

.item-contact .tag-item-contact {
    margin-bottom: 0px;
    font-family: "Poppins-SemiBold";
    font-size: 15px;
    color: #ffffff;
    /*line-height: 55px;*/
}

.item-contact .tag-item-contact .fa {
    margin-right: 0px;
    color: #ffffff;
    background: transparent;
    border-radius: 50%;
    /*padding: 15px;*/
    padding-right: 10px;
    padding-bottom: 10px;
    font-size: 15px;
}

.item-contact .tag-phones {
    display: block;
    font-size: 15px;
    /*line-height: 55px;*/
    font-family: "Poppins-Regular";
    margin-left: 25px;
    color: #ffffff;
    /*width: 54%;*/
}

.item-contact .tag-fax {
    display: block;
    font-size: 15px;
    /*line-height: 55px;*/
    font-family: "Poppins-Regular";
    margin-left: 25px;
    color: #ffffff;
}

.item-contact .tag-email {
    display: block;
    font-size: 15px;
    /*line-height: 55px;*/
    font-family: "Poppins-Regular";
    margin-left: 27px;
    color: #ffffff;
}

.kontak2 .fa-map-marker {
    color: #ffffff;
    padding-right: 10px;
    font-size: 30px;
}

.kontak3 {
    /*display: flex;*/
    font-size: 20px;
    color: #25A8E0;
    font-family: "Raleway-SemiBold";
    padding-bottom: 10px;
}

.kontak3 .fa-phone {
    color: #25A8E0;
    padding-right: 10px;
    font-size: 18px;
}

.kontak4 {
    font-size: 20px;
    color: #25A8E0;
    font-family: "Raleway-SemiBold";
    padding-bottom: 10px;
}

.kontak4 a {
    font-size: 20px;
    color: #25A8E0;
    font-family: "Raleway-SemiBold";
}

.kontak4 .fa-envelope-o {
    color: #25A8E0;
    padding-right: 10px;
    font-size: 18px;
}

.form-contact {
    margin-bottom: 30px;
}

.form-contact label {
    font-size: 15px;
    color: #383838;
    font-family: "Poppins-Regular";
    line-height: 35px;
}

/*.form-contact .form-control {
    font-size: 0.8125rem;
    border-radius: 3px;
}*/

.form-contact .form-controls {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 13px;
    line-height: 35px;
    /*line-height: 1.5;*/
    color: #919191;
    background-color: #F8F8F8;
    background-clip: padding-box;
    border: 1px solid #F8F8F8;
    border-radius: 10px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-family: "Poppins-Light";
    font-weight: lighter;
}

.form-contact textarea {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 13px;
    /*line-height: 35px;*/
    /*line-height: 1.5;*/
    line-height: 30px;
    color: #919191;
    background-color: #F8F8F8;
    background-clip: padding-box;
    border: 1px solid #F8F8F8;
    border-radius: 10px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    font-family: "Poppins-Light";
    font-weight: lighter;
}

.btnKontak-primary {
    color: #1A6D9D;
    background-color: transparent;
    border-color: #1A6D9D;
}

.btnKontak {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #1A6D9D;
    padding: 13px 25px 13px 25px;
    font-size: 13px;
    line-height: 30px;
    font-family: "Poppins-Medium";
    text-transform: uppercase;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    cursor: pointer;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btnKontak img {
    padding-left: 10px;
}

.btnKontak .fa-long-arrow-right {
    padding-left: 10px;
}

.ctr {
    position: relative;
    margin: auto;
    padding: 7px 22px;
    transition: all .2s ease;
    height: 40px;
    cursor: pointer;
    background: #fff;
    border: 0;
}

.ctr:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 50%;
    background: #A6DEEF;
    width: 40px;
    height: 40px;
    transition: all .3s ease;
}
 
.ctr span {
    position: relative;
    font-size: 15px;
    line-height: 18px;
    text-transform: capitalize;
    vertical-align: middle;
    color: #282A75;
    font-family: "Roboto-Medium";
}

.ctr:hover {
    width: 55%;
    background: #A6DEEF;
    border-radius: 50px;
    display: inline-block;
}

@media (max-width: 700px) {
    .ctr:hover {
        width: 70%;
    }
}

@media (max-width: 600px) {
    .ctr:hover {
        width: 70%;
    }
}

@media (max-width: 500px) {
    .ctr:hover {
        width: 70%;
    }
}

@media (max-width: 400px) {
    .ctr:hover {
        width: 48%;
    }
}

@media (max-width: 375px) {
    .ctr:hover {
        width: 48%;
    }
}

@media (max-width: 365px) {
    .ctr:hover {
        width: 48%;
    }
}

@media (max-width: 320px) {
    .ctr:hover {
        width: 60%;
    }
}

.ctr:active {
    transform: scale(.96);
}
/*end-pagekontak*/

.form-contact p {
    margin-bottom: 15;
    font-size: 0.875rem;
}

.btn-contact {
    padding: 8px 25px;
    font-size: 0.8125rem;
    color: #fff;
    background: #1d4286;
    border: 1px solid #1d4286;
    border-radius: 3px;
    cursor: pointer;
}

/*.btn-contact:hover {
    background: #142d5c;
}*/

.item-alamat {
    margin-bottom: 20px;
}

.item-alamat label {
    margin-bottom: 5px;
    font-size: 0.875rem;
    font-weight: bold;
}

.item-alamat p {
    margin-bottom: 0;
    font-size: 0.875rem;
}


@media only screen and (max-width: 991px) {
    #contact {
        padding-top: 0;
        background: #f6f6f6;
    }
    
    #contact:before, #contact:after {
        display: none;
    }

    .content-contact-home {
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        -ms-align-items: flex-start;
        align-items: flex-start;
        width: 100%;
    }
    
    .content-contact-home h2, .content-contact-home p {
        text-align: left;
    }
    
    .content-contact-home .desc-content-home {
        width: 450px;
    }

    .img-contact {
        display: none;
    }

    .alamat-home {
        margin-top: 20px;
        text-align: left;
    }
}

@media only screen and (max-width: 767px) {
    .alamat-home label {
        font-size: 0.875rem;
    }
    
    .alamat-home p {
        font-size: 0.875rem;
    }

    .content-contact-home .desc-content-home {
        width: 100%;
    }
}
/*# sourceMappingURL=lwd.style.css.map */

/*star-banner-page*/
#banner-page .parallax-mirror img {
    width: 100%;
}

#banner-page {
    position: relative;
    /*height: 400px;*/
    height: auto;
    overflow: hidden;
}

#banner-page .banimg {
    display: block;
    width: 100%;
}

#banner-page .konten-banner-page {
    position: absolute;
    top: 50%;
    /*padding-top: 90px;*/
    width: 100%;
    left: 20px;
    transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}

/*#banner-page .konten-banner-page h2, #banner-page .konten-banner-page p {
    color: #FFF;
}*/

#banner-page .konten-banner-page h2 {
    margin-bottom: 15px;
    font-family: "Raleway-ExtraBold";
    color: #25A8E0;
    text-transform: uppercase;
    font-size: 27px;
}

#banner-page .konten-banner-page p {
    margin-bottom: 0;
    font-size: 18px;
    line-height: 25px;
    width: 55%;
    color: #fff;
    font-family: "Raleway-Regular";
}

#banner-page .item-parallax {
    height: 430px;
}

@media (max-width: 900px) {
    #banner-page {
        height: auto;
    }

    #banner-page .konten-banner-page {
        top: 50%;
    }

    #banner-page .konten-banner-page h2 {
        font-size: 17px;
        margin-bottom: 10px;
    }

    #banner-page .konten-banner-page p {
        font-size: 15px;
        line-height: 20px;
    }

    .konten-banner-page .col-md-8 {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 1366px) {
    #banner-page {
        height: auto;
        padding-top: 15px;
    }

    #banner-page .konten-banner-page {
        top: 50%;
    }

    #banner-page .konten-banner-page h2 {
        margin-bottom: 15px;
        font-family: "Raleway-ExtraBold";
        color: #25A8E0;
        text-transform: uppercase;
        font-size: 27px;
    }

    #banner-page .konten-banner-page p {
        margin-bottom: 0;
        font-size: 18px;
        line-height: 25px;
        width: 53%;
        color: #fff;
        font-family: "Raleway-Regular";
    }

    .konten-banner-page .col-md-8 {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 1200px) {
    #banner-page {
        height: auto;
        padding-top: 15px;
    }
}

@media (max-width: 1024px) {
    #banner-page {
        height: auto;
        padding-top: 15px;
    }

    #banner-page .konten-banner-page {
        top: 50%;
    }

    #banner-page .konten-banner-page h2 {
        font-size: 22px;
        margin-bottom: 10px;
    }

    #banner-page .konten-banner-page p {
        font-size: 16px;
        line-height: 20px;
    }

    .konten-banner-page .col-md-8 {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 991px) {
    #banner-page {
        height: auto;
        padding-top: 25px;
    }
}

@media (max-width: 900px) {
    #banner-page {
        height: auto;
        padding-top: 20px;
    }
}

@media (max-width: 800px) {
    #banner-page {
        height: auto;
        padding-top: 20px;
    }

    #banner-page .konten-banner-page {
        top: 50%;
    }

    #banner-page .konten-banner-page h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    #banner-page .konten-banner-page p {
        font-size: 15px;
        line-height: 20px;
    }

    .konten-banner-page .col-md-8 {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 700px) {
    #banner-page {
        height: auto;
        padding-top: 20px;
    }

    #banner-page .konten-banner-page {
        top: 50%;
    }

    #banner-page .konten-banner-page h2 {
        font-size: 12px;
        margin-bottom: 10px;
    }

    #banner-page .konten-banner-page p {
        font-size: 12px;
        line-height: 15px;
    }
}

@media (max-width: 600px) {
    #banner-page {
        height: auto;
        padding-top: 15px;
    }

    #banner-page .konten-banner-page {
        top: 50%;
    }

    #banner-page .konten-banner-page h2 {
        font-size: 12px;
        margin-bottom: 10px;
    }

    #banner-page .konten-banner-page p {
        display: none;
    }
}

@media (max-width: 500px) {
    #banner-page {
        height: auto;
        padding-top: 12px;
    }

    #banner-page .konten-banner-page {
        top: 50%;
    }

    #banner-page .konten-banner-page h2 {
        font-size: 12px;
        margin-bottom: 10px;
    }

    #banner-page .konten-banner-page p {
        display: none;
    }
}

@media (max-width: 400px) {
    #banner-page {
        height: auto;
        padding-top: 11px;
    }

    #banner-page .konten-banner-page {
        top: 50%;
    }

    #banner-page .konten-banner-page h2 {
        font-size: 12px;
        margin-bottom: 10px;
    }

    #banner-page .konten-banner-page p {
        display: none;
    }
}

@media (max-width: 375px) {
    #banner-page {
        height: auto;
        padding-top: 9px;
    }

    #banner-page .konten-banner-page {
        top: 50%;
    }

    #banner-page .konten-banner-page h2 {
        font-size: 12px;
        margin-bottom: 10px;
    }

    #banner-page .konten-banner-page p {
        display: none;
    }
}

@media (max-width: 365px) {
    #banner-page {
        height: auto;
        padding-top: 9px;
    }

    #banner-page .konten-banner-page {
        top: 50%;
    }

    #banner-page .konten-banner-page h2 {
        font-size: 12px;
        margin-bottom: 10px;
    }

    #banner-page .konten-banner-page p {
        display: none;
    }
}

@media (max-width: 320px) {
    #banner-page {
        height: auto;
    }

    #banner-page .konten-banner-page {
        top: 50%;
    }

    #banner-page .konten-banner-page h2 {
        font-size: 12px;
        margin-bottom: 10px;
    }

    #banner-page .konten-banner-page p {
        display: none;
    }
}
/*end-banner-page

/*star-karir*/
#karir {
    padding-top: 30px;
    padding-bottom: 30px;
}

.borderkarir {
    border-bottom: 2px #C1C1C1 solid;
    padding-top: 20px;
    padding-bottom: 20px;
}

.borderkarir:last-child {
    border-bottom: none;
}

.karir-teks1 {
    font-size: 25px;
    color: #25A8E0;
    font-family: "Raleway-Bold";
    line-height: 28px;
    padding-bottom: 5px;
}

.karir-teks2 {
    font-size: 15px;
    color: #8A8A8A;
    font-family: "Roboto-Italic";
    padding-bottom: 5px;
}

.karir-teks3 {
    color: #313131;
    font-size: 15px;
    font-family: "Raleway-Regular";
    line-height: 26px;
}

.karir-teks3 p {
    color: #313131;
    font-size: 15px;
    font-family: "Raleway-Regular";
    margin-bottom: 5px;
    line-height: 26px;
}

#karir-info {
    background: #EFEFEF;
}

.karir-info {
    padding-top: 35px;
    padding-bottom: 35px;
    color: #313131;
    width: 80%;
    font-size: 17px;
    font-family: "Raleway-SemiBold-Italic";
}

/*.karir-info span.ingredient {
    color: #25A8E0;
}*/

.karir-info a.ingredient {
    color: #25A8E0;
}
/*end-karir

/*star-about-home*/
#about-home {
    /*padding-top: 7%;*/
    padding-top: 20px;
    /*padding-bottom: 8%;*/
    padding-bottom: 55px;
}

#about-home .about-home1 {
    font-size: 26px;
    color: #404040;
    font-family: "Poppins-Light";
    line-height: 42px;
    text-align: center;
    text-transform: inherit;
    padding-bottom: 35px;
}

@media (max-width: 750px) {
    #about-home {
        padding-top: 0;
    }
}

@media (max-width: 700px) {
    #about-home {
        padding-top: 0;
    }
}

@media (max-width: 650px) {
    #about-home {
        padding-top: 0;
    }
}

@media (max-width: 600px) {
    #about-home {
        padding-top: 0px;
        padding-bottom: 30px;
    }
}

@media (max-width: 550px) {
    #about-home {
        padding-top: 0px;
        padding-bottom: 30px;
    }
}

@media (max-width: 500px) {
    #about-home {
        padding-top: 0px;
        padding-bottom: 30px;
    }
}

@media (max-width: 450px) {
    #about-home {
        padding-top: 0px;
        padding-bottom: 30px;
    }
    #about-home .about-home1 {
        font-size: 20px;
        line-height: 36px;
    }
}

@media (max-width: 400px) {
    #about-home {
        padding-top: 0px;
        padding-bottom: 30px;
    }
    #about-home .about-home1 {
        font-size: 20px;
        line-height: 36px;
    }
    #about-home .btnAboutHome {
        font-size: 12px;
    }
}

@media (max-width: 375px) {
    #about-home {
        padding-top: 0px;
        padding-bottom: 30px;
    }
    #about-home .btnAboutHome {
        font-size: 12px;
    }
}

@media (max-width: 365px) {
    #about-home {
        padding-top: 0px;
        padding-bottom: 30px;
    }
    #about-home .btnAboutHome {
        font-size: 12px;
    }
}

@media (max-width: 320px) {
    #about-home {
        padding-top: 0px;
        padding-bottom: 30px;
    }
    #about-home .about-home1 {
        font-size: 18px;
        line-height: 30px;
    }
    #about-home .btnAboutHome {
        font-size: 12px;
    }
}

.btnAboutHome-primary {
    color: #1A6D9D;
    background-color: transparent;
    border-color: #1A6D9D;
}

.btnAboutHome {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #1A6D9D;
    padding: 13px 25px 13px 25px;
    font-size: 13px;
    line-height: 20px;
    font-family: "Poppins-Regular";
    text-transform: uppercase;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    cursor: pointer;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btnAboutHome img {
    padding-left: 10px;
}
/*end-about-home*/

/*star-prodhome*/
#prodhome {
    padding-top: 100px;
    padding-bottom: 40px;
}

@media (max-width: 600px) {
    #prodhome {
        padding-top: 0px;
        padding-bottom: 40px;
    }
}

@media (max-width: 550px) {
    #prodhome {
        padding-top: 0px;
        padding-bottom: 40px;
    }
}

@media (max-width: 500px) {
    #prodhome {
        padding-top: 0px;
        padding-bottom: 40px;
    }
}

@media (max-width: 450px) {
    #prodhome {
        padding-top: 0px;
        padding-bottom: 40px;
    }
}

@media (max-width: 400px) {
    #prodhome {
        padding-top: 0px;
        padding-bottom: 40px;
    }
}

@media (max-width: 375px) {
    #prodhome {
        padding-top: 0px;
        padding-bottom: 40px;
    }
}

@media (max-width: 365px) {
    #prodhome {
        padding-top: 0px;
        padding-bottom: 40px;
    }
}

@media (max-width: 320px) {
    #prodhome {
        padding-top: 0px;
        padding-bottom: 40px;
    }
}

.prodhome-text1 {
    font-size: 35px;
    color: #25A8E0;
    font-family: "Raleway-Bold";
}

.prodhome-text2 {
    font-size: 17px;
    color: #313131;
    font-family: "Raleway-Regular";
    width: 85%;
    padding-top: 10px;
}

.prodhome-text2 span.bolds {
    font-size: 17px;
    color: #313131;
    font-family: "Raleway-Bold";
}
/*end-prodhome*/

/*star-abouthome*/
#abouthome {
    background: url("../../../uploads/img/other/about.png");
    padding-top: 0px;
    padding-bottom: 0;
    background-position: center;
    background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    width: 100%;
    height: 825px;
    background-size: cover;
}

.abouthomes {
    position: relative;
}


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

@media (max-width: 767px) {
    .abouthomes .flyabout img {
        display: none;
    }
}

@media (max-width: 700px) {
    .abouthomes .flyabout img {
        display: none;
    }
}

@media (max-width: 600px) {
    .abouthomes .flyabout img {
        display: none;
    }
}

@media (max-width: 500px) {
    .abouthomes .flyabout img {
        display: none;
    }
}

@media (max-width: 400px) {
    .abouthomes .flyabout img {
        display: none;
    }
}

.abouthomes .flyabout {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    display: block;
    transition: all .3s ease;
}

.abouthome-text {
    padding-top: 160px;
    padding-bottom: 35px;
    color: #ffffff;
    font-size: 25px;
    font-family: "Raleway-Bold";
    width: 85%;
}

.abouthome {
    width: 85%;
    display: grid;
    padding-bottom: 35px;
}

.abouthome a {
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 22px;
    font-size: 20px;
    color: #ffffff;
    font-family: "Raleway-Regular";
    border-bottom: 1px solid #67D5FF;
}

.abouthome a:before {
    position: absolute;
    content: '';
    top: calc(50% - 3px);
    left: 7px;
    width: 5px;
    height: 5px;
    background: #ffffff;
    box-shadow: 0 7px 0 #ffffff, -7px 7px 0 #ffffff;
}
/*end-abouthome*/

/*star-button-abouthome*/
.button-abouthome {
    padding: 10px 0px;
    background: none;
    border: none;
    position: relative;
    text-transform: capitalize;
    cursor: pointer;
    height: 50px;
}

.button-abouthome span {
    color: #ffffff;
    font-size: 15px;
    font-family: "Roboto-Medium";
    margin-left: 20px;
}

.button-abouthome:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: hidden;
    width: 100%;
    border-radius: 50px;
}

.button-abouthome:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 1px solid #ffffff;
    transition: transform 0.2s;
    width: 50%;
    border-radius: 50%;
}

.button-abouthome:after {
    /*transform: translate(3px, 3px);*/
    transform: inherit;
}

.button-abouthome:before {
    transform: translate(-3px, -3px);
}

.button-abouthome:hover:after {
    transform: translate(0);
    border: hidden;
}

.button-abouthome:hover span {
    margin-left: 0;
    padding: 10px 15px;
}

.button-abouthome:hover:before {
    transform: translate(0);
    border: 1px solid #ffffff;
    margin-left: 0;
}
/*end-button-abouthome*/

/*star-nilaikerja*/
#nilaikerja {
    padding: 50px;
    background: url("../../../uploads/img/other/nilai-kerja.png") no-repeat;
    background-size: cover;
}

.nilai-teks-one {
    font-size: 30px;
    color: #ffffff;
    font-family: "Raleway-Bold";
    padding-bottom: 5px;
}

.nilai-teks-two {
    font-size: 25px;
    color: #ffffff;
    font-family: "Raleway-Regular";
    padding-bottom: 55px;
}


.box-nilai {
    margin-right: -15px;
    margin-left: -15px;
    font-size: 0px;
}

.item-nilai {
    margin-bottom: 30px;
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;
    /*width: 33.33333%;*/
    width: 25%;
    font-size: 14px;
    vertical-align: top;
}

.i-nilai {
    display: block;
    text-align: center;
    /*padding: 20px;*/
    padding-top: 12px;
    padding-bottom: 12px;
    border: 0px solid #EEE;
    background-size: 100% 10px;
    border-radius: 5px;
}

.modal-content .modalimg {
    display: block;
    text-align: center;
}

.modal-content .modalimg img {
    max-width: 100%;
}

.modal-content .modalnama {
    font-size: 30px;
    text-align: center;
    color: #25A8E0;
    font-family: "Raleway-Bold";
}

.modal-content .modaldes {
    color: #313131;
    text-align: center;
    font-size: 18px;
    font-family: "Raleway-Regular";
    line-height: 27px;
    padding-top: 10px;
}

.i-nilai img {
    max-width: 100%;
}

.konten-item-nilai h4 {
    margin-bottom: 15px;
    font-family: "Raleway-Medium";
    font-size: 21px;
    color: #ffffff;
    text-transform: uppercase;
}


@media only screen and (max-width: 1199px) {
    .i-nilai {
        padding: 0;
    }
}

@media(max-width: 910px) {
    .i-nilai img {
        width: 200px;
    }

    .konten-item-nilai h4 {
        margin-bottom: 10px;
        font-size: 17px;
    }
}

@media (max-width: 500px) {
    .i-nilai img {
        width: 135px;
    }
}

@media (max-width: 400px) {
    .i-nilai img {
        width: 130px;
    }
}

@media (max-width: 375px) {
    .i-nilai img {
        width: 100px;
    }

    .konten-item-nilai h4 {
        margin-bottom: 10px;
        font-size: 15px;
    }
}

@media (max-width: 365px) {
    .i-nilai img {
        width: 100px;
    }

    .konten-item-nilai h4 {
        margin-bottom: 10px;
        font-size: 13px;
    }
}

@media (max-width: 320px) {
    .i-nilai img {
        max-width: 100%;
    }

    .konten-item-nilai h4 {
        margin-bottom: 5px;
        font-size: 11px;
    }
}

@media only screen and (max-width: 991px) {
    .item-nilai {
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        width: 50%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 600px) {
    .box-nilai {
        margin-right: -5px;
        margin-left: -5px;
        font-size: 0px;
    }

    .item-nilai {
        margin-bottom: 10px;
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
        width: 50%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 480px) {
    .item-nilai {
        margin-bottom: 15px;
        display: inline-block;
        padding-right: 5px;
        padding-left: 5px;
        /*width: 100%;*/
        width: 50%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 320px) {}
/*end-nilaikerja*/

/*star-siapakami*/
#siapakami {
    padding-top: 30px;
    padding-bottom: 50px;
    background: #ffffff;
}

.siapakami-two {
    line-height: 27px;
    width: 100%;
    text-align: inherit;
    font-family: "Poppins-Regular";
    color: #464849;
    font-size: 15px;
}

.siapakami-two p {
    line-height: 27px;
    width: 100%;
    text-align: inherit;
    font-family: "Poppins-Regular";
    font-size: 15px;
    color: #464849;
}
/*end-siapakami*/

/*star-aboutarea*/
#aboutarea {
    background: #ffffff;
    padding-top: 40px;
    padding-bottom: 40px;
}

.aboutarea-one {
    font-size: 30px;
    color: #25A8E0;
    text-align: inherit;
    font-family: "Raleway-Bold";
}

.aboutarea-two {
    font-size: 25px;
    color: #313131;
    font-family: "Raleway-Regular";
    padding-bottom: 70px;
}

.aboutarea-img {
    display: block;
    padding-bottom: 50px;
}

.aboutarea-img img {
    max-width: 100%;
}
/*end-aboutarea*/

/*star-owlarea*/
#aboutarea .container .owl-carousel .item {
    padding: 0px 0;
    text-align: center;
}

#aboutarea .container .owl-carousel .item .price-strip {
    color: #585858;
    font-family: "Raleway-Bold";
    font-size: 18px;
    padding-top: 20px;
    padding-bottom: 20px;
}

#aboutarea .container .col-md-12 .owl-carousel .box-sale {
    position: relative;
}

#aboutarea .container .col-md-12 .owl-carousel .owl-next {
    position: absolute;
    top: 30%;
    right: -50px;
}

#aboutarea .container .col-md-12 .owl-carousel .owl-prev {
    position: absolute;
    top: 30%;
    left: -50px;
}


@media screen and (max-width: 640px) {
    #aboutarea .container .col-md-12 .owl-carousel .item .price-strip {
        font-size: 16px !important;
    }
}


@media (max-width: 550px) {
    #aboutarea .container .col-md-12 .owl-carousel .owl-nav {
        display: none;
    }
}

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

/*@media (max-width: 375px) {
    #aboutarea .container .col-md-12 .owl-carousel .owl-next {
        left: 0;
    }

    #aboutarea .container .col-md-12 .owl-carousel .owl-prev {
        right: 0;
    }
}

@media (max-width: 365px) {
    #aboutarea .container .col-md-12 .owl-carousel .owl-next {
        left: 0;
    }

    #aboutarea .container .col-md-12 .owl-carousel .owl-prev {
        right: 0;
    }
}*/

/*@media (max-width: 320px) {
    #aboutarea .container .col-md-12 .owl-carousel .owl-next {
        left: 0;
    }

    #aboutarea .container .col-md-12 .owl-carousel .owl-prev {
        right: 0;
    }
}*/
/*end-owlarea*/

/*star-hero*/
#hero {
    /*height: 100vh;*/
    height: 475px;
    background: url("../../images/sliderhome.png") no-repeat;
    background-position: center center;
    background-size: cover;
}

.menu-hero {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: 100%;
    /*background: rgba(255, 255, 255, 0);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 28%, rgba(0, 0, 0, 0.64) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(28%, rgba(255, 255, 255, 0.18)), color-stop(100%, rgba(0, 0, 0, 0.64)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 28%, rgba(0, 0, 0, 0.64) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 28%, rgba(0, 0, 0, 0.64) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 28%, rgba(0, 0, 0, 0.64) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.18) 28%, rgba(0, 0, 0, 0.64) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=0 );*/
}

.menu-hero li {
    -webkit-flex-grow: 1;
    /*-webkit-flex-grow: 0.5;*/
    -moz-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
    height: 100%;
    background: transparent;
    border-right: 0px solid rgba(255, 255, 255, 0.5);
    transition: 0.3s;
    -o-transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
}

.menu-hero li:last-child {
    border-right: none;
}

.menu-hero li:hover {
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    -ms-flex-grow: 2;
    flex-grow: 2;
    transition: 0.3s;
    -o-transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
}

.menu-hero li:hover a {
    background: rgba(255, 255, 255, 0.6);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.menu-hero li:hover .img-menu-hero {
    opacity: 1;
    transition: 0.5s;
    -o-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}

/**/
@media (max-width: 991px) {
    .menu-hero li.active {
        -webkit-flex-grow: 2;
        -moz-flex-grow: 2;
        -ms-flex-grow: 2;
        flex-grow: 2;
        transition: 0.3s;
        -o-transition: 0.3s;
        -moz-transition: 0.3s;
        -webkit-transition: 0.3s;
    }
    .menu-hero li.active {
        background: rgba(255, 255, 255, 0.6);
        transition: 0.2s;
        -o-transition: 0.2s;
        -moz-transition: 0.2s;
        -webkit-transition: 0.2s;
    }
    .menu-hero li.active .img-menu-hero {
        opacity: 1;
        transition: 0.5s;
        -o-transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .menu-hero li.active {
        display: block;
        height: 100%;
    }
}

@media (max-width: 900px) {
    .menu-hero li.active {
        -webkit-flex-grow: 2;
        -moz-flex-grow: 2;
        -ms-flex-grow: 2;
        flex-grow: 2;
        transition: 0.3s;
        -o-transition: 0.3s;
        -moz-transition: 0.3s;
        -webkit-transition: 0.3s;
    }
    .menu-hero li.active {
        background: rgba(255, 255, 255, 0.6);
        transition: 0.2s;
        -o-transition: 0.2s;
        -moz-transition: 0.2s;
        -webkit-transition: 0.2s;
    }
    .menu-hero li.active .img-menu-hero {
        opacity: 1;
        transition: 0.5s;
        -o-transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .menu-hero li.active {
        display: block;
        height: 100%;
    }
}

@media (max-width: 800px) {
    .menu-hero li.active {
        -webkit-flex-grow: 2;
        -moz-flex-grow: 2;
        -ms-flex-grow: 2;
        flex-grow: 2;
        transition: 0.3s;
        -o-transition: 0.3s;
        -moz-transition: 0.3s;
        -webkit-transition: 0.3s;
    }
    .menu-hero li.active {
        background: rgba(255, 255, 255, 0.6);
        transition: 0.2s;
        -o-transition: 0.2s;
        -moz-transition: 0.2s;
        -webkit-transition: 0.2s;
    }
    .menu-hero li.active .img-menu-hero {
        opacity: 1;
        transition: 0.5s;
        -o-transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .menu-hero li.active {
        display: block;
        height: 100%;
    }
}

@media (max-width: 700px) {
    .menu-hero li.active {
        -webkit-flex-grow: 2;
        -moz-flex-grow: 2;
        -ms-flex-grow: 2;
        flex-grow: 2;
        transition: 0.3s;
        -o-transition: 0.3s;
        -moz-transition: 0.3s;
        -webkit-transition: 0.3s;
    }
    .menu-hero li.active {
        background: rgba(255, 255, 255, 0.6);
        transition: 0.2s;
        -o-transition: 0.2s;
        -moz-transition: 0.2s;
        -webkit-transition: 0.2s;
    }
    .menu-hero li.active .img-menu-hero {
        opacity: 1;
        transition: 0.5s;
        -o-transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .menu-hero li.active {
        display: block;
        height: 100%;
    }
}

@media (max-width: 600px) {
    .menu-hero li.active {
        -webkit-flex-grow: 2;
        -moz-flex-grow: 2;
        -ms-flex-grow: 2;
        flex-grow: 2;
        transition: 0.3s;
        -o-transition: 0.3s;
        -moz-transition: 0.3s;
        -webkit-transition: 0.3s;
    }
    .menu-hero li.active {
        background: rgba(255, 255, 255, 0.6);
        transition: 0.2s;
        -o-transition: 0.2s;
        -moz-transition: 0.2s;
        -webkit-transition: 0.2s;
    }
    .menu-hero li.active .img-menu-hero {
        opacity: 1;
        transition: 0.5s;
        -o-transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .menu-hero li.active {
        display: block;
        height: 100%;
    }
}

@media (max-width: 500px) {
    .menu-hero li.active {
        -webkit-flex-grow: 2;
        -moz-flex-grow: 2;
        -ms-flex-grow: 2;
        flex-grow: 2;
        transition: 0.3s;
        -o-transition: 0.3s;
        -moz-transition: 0.3s;
        -webkit-transition: 0.3s;
    }
    .menu-hero li.active {
        background: rgba(255, 255, 255, 0.6);
        transition: 0.2s;
        -o-transition: 0.2s;
        -moz-transition: 0.2s;
        -webkit-transition: 0.2s;
    }
    .menu-hero li.active .img-menu-hero {
        opacity: 1;
        transition: 0.5s;
        -o-transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .menu-hero li.active {
        display: block;
        height: 100%;
    }
}

@media (max-width: 400px) {
    .menu-hero li.active {
        -webkit-flex-grow: 2;
        -moz-flex-grow: 2;
        -ms-flex-grow: 2;
        flex-grow: 2;
        transition: 0.3s;
        -o-transition: 0.3s;
        -moz-transition: 0.3s;
        -webkit-transition: 0.3s;
    }
    .menu-hero li.active {
        background: rgba(255, 255, 255, 0.6);
        transition: 0.2s;
        -o-transition: 0.2s;
        -moz-transition: 0.2s;
        -webkit-transition: 0.2s;
    }
    .menu-hero li.active .img-menu-hero {
        opacity: 1;
        transition: 0.5s;
        -o-transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .menu-hero li.active {
        display: block;
        height: 100%;
    }
}

@media (max-width: 375px) {
    .menu-hero li.active {
        -webkit-flex-grow: 2;
        -moz-flex-grow: 2;
        -ms-flex-grow: 2;
        flex-grow: 2;
        transition: 0.3s;
        -o-transition: 0.3s;
        -moz-transition: 0.3s;
        -webkit-transition: 0.3s;
    }
    .menu-hero li.active {
        background: rgba(255, 255, 255, 0.6);
        transition: 0.2s;
        -o-transition: 0.2s;
        -moz-transition: 0.2s;
        -webkit-transition: 0.2s;
    }
    .menu-hero li.active .img-menu-hero {
        opacity: 1;
        transition: 0.5s;
        -o-transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .menu-hero li.active {
        display: block;
        height: 100%;
    }
}

@media (max-width: 365px) {
    .menu-hero li.active {
        -webkit-flex-grow: 2;
        -moz-flex-grow: 2;
        -ms-flex-grow: 2;
        flex-grow: 2;
        transition: 0.3s;
        -o-transition: 0.3s;
        -moz-transition: 0.3s;
        -webkit-transition: 0.3s;
    }
    .menu-hero li.active {
        background: rgba(255, 255, 255, 0.6);
        transition: 0.2s;
        -o-transition: 0.2s;
        -moz-transition: 0.2s;
        -webkit-transition: 0.2s;
    }
    .menu-hero li.active .img-menu-hero {
        opacity: 1;
        transition: 0.5s;
        -o-transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .menu-hero li.active {
        display: block;
        height: 100%;
    }
}

@media (max-width: 320px) {
    .menu-hero li.active {
        -webkit-flex-grow: 2;
        -moz-flex-grow: 2;
        -ms-flex-grow: 2;
        flex-grow: 2;
        transition: 0.3s;
        -o-transition: 0.3s;
        -moz-transition: 0.3s;
        -webkit-transition: 0.3s;
    }
    .menu-hero li.active {
        background: rgba(255, 255, 255, 0.6);
        transition: 0.2s;
        -o-transition: 0.2s;
        -moz-transition: 0.2s;
        -webkit-transition: 0.2s;
    }
    .menu-hero li.active .img-menu-hero {
        opacity: 1;
        transition: 0.5s;
        -o-transition: 0.5s;
        -moz-transition: 0.5s;
        -webkit-transition: 0.5s;
    }
    .menu-hero li.active {
        display: block;
        height: 100%;
    }
}
/**/

/*.menu-hero li.active {
    -webkit-flex-grow: 2;
    -moz-flex-grow: 2;
    -ms-flex-grow: 2;
    flex-grow: 2;
    transition: 0.3s;
    -o-transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
}*/

/*.menu-hero li.active {
    background: rgba(255, 255, 255, 0.6);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}*/

/*.menu-hero li.active .img-menu-hero {
    opacity: 1;
    transition: 0.5s;
    -o-transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
}*/

/*.menu-hero li.active {
    display: block;
    height: 100%;
}*/

.menu-hero li a {
    position: relative;
    display: block;
    height: 100%;
    background: transparent;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.img-menu-hero {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: url("../../images/bg-menu.png");*/
    background-position: center center;
    background-size: cover;
    opacity: 0;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.content-menu-hero {
    position: absolute;
    left: 40px;
    bottom: 50px;
}

.content-menu-hero span, .content-menu-hero h3 {
    color: #fff;
}

.content-menu-hero span {
    font-size: 0.6875rem;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.content-menu-hero h3 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.5625rem;
    font-weight: 700;
}

/*#slider {
    display: block;
}*/

@media (max-width: 1125px) {}

@media (max-width: 1024px) {
    .title-content.w-70 {
        width: 100%;
    }

    .content-menu-hero {
        left: 20px;
        bottom: 50px;
    }
    .content-menu-hero h3 {
        font-size: 1rem;
    }
    #hero {
        /*height: calc(87vh - 220.8px);*/
        /*height: calc(100% / 3);*/
        /*height: calc(87vh - 220.8px);*/
        height: 380px;
        width: 100%;
    }
}
      
@media (max-width: 991px) {
    /*#hero {
        height: calc(100vh - 111.8px);
    }*/
    #hero {
        height: 325px;
        width: 100%;
    }
    #content {
        margin-top: 111.8px;
        margin-left: 0;
        width: 100%;
    }
    .title-content {
        font-size: 2rem;
        line-height: 40px;
    }
    #info3d {
        padding-top: 70px;
        padding-bottom: 100px;
    }
    .desc-info3d {
        font-size: 1.625rem;
        line-height: 1.7;
    }
    .title {
        padding-bottom: 25px;
    }
    .title:before {
        width: 100px;
    }
    .title h1 {
        margin-bottom: 10px;
        font-size: 2.25rem;
    }
    .title .subtitle {
        font-size: 1rem;
    }
    .item-vt a {
        padding: 10px 20px;
    }
    .item-vt a h3 {
        font-size: 2.25rem;
    }
}

@media (max-width: 900px) {
    #hero {
        /*height: calc(83vh - 220.8px);*/
        height: 325px;
        width: 100%;
    }
}

@media (max-width: 850px) {
    #hero {
        /*height: calc(83vh - 220.8px);*/
        height: 325px;
        width: 100%;
    }
}

@media (max-width: 800px) {
    #hero {
        height: 290px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    #hero {
        height: 325px;
        width: 100%;
    }
}

@media (max-width: 767px) {
    /*#hero {
        display: none;
    }*/
    /*#slider {
        display: block;
    }*/
    #page {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .title-content {
        padding-bottom: 20px;
        font-size: 1.5rem;
        line-height: 32px;
    }
    .title-content:before {
        left: -20px;
        width: 120px;
    }
    #info3d {
        padding-top: 50px;
        padding-bottom: 80px;
    }
    .desc-info3d {
        font-size: 1.25rem;
        line-height: 30px;
    }
    .title h1 {
        font-size: 1.625rem;
    }
    .item-vt {
        width: calc(100% / 2);
    }
}

/*star-tambahan*/
@media (max-width: 700px) {
    #hero {
        height: 240px;
        width: 100%;
    }
}

@media (max-width: 650px) {
    #hero {
        height: 220px;
        width: 100%;
    }
}

@media (max-width: 600px) {
    #hero {
        height: 205px;
        width: 100%;
    }
}

@media (max-width: 550px) {
    #hero {
        height: 200px;
        width: 100%;
    }
}

@media (max-width: 500px) {
    #hero {
        height: 180px;
        width: 100%;
    }
}

@media (max-width: 450px) {
    #hero {
        height: 160px;
        width: 100%;
    }
}

@media (max-width: 400px) {
    #hero {
        height: 145px;
        width: 100%;
    }
}

@media (max-width: 375px) {
    #hero {
        height: 135px;
        width: 100%;
    }
}

@media (max-width: 365px) {
    #hero {
        height: 135px;
        width: 100%;
    }
}

@media (max-width: 320px) {
    #hero {
        height: 130px;
        width: 100%;
    }
}
/*end-tambahan*/
/*end-hero*/

/*star-rel-about*/
.rel-about {
    padding: 0;
}

.item-rel-about {
    position: relative;
}

.item-rel-about img {
    margin-bottom: 20px;
    width: 100%;
}

.item-rel-about .title {
    position: absolute;
    top: 50%;
    width: 100%;
    left: 10%;
    transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}

.item-rel-about .title h3 {
    font-size: 27px;
    color: #25A8E0;
    /*font-family: "Raleway";*/
    font-family: "Raleway-ExtraBold";
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 5px;
}

.item-rel-about .title p {
    color: #ffffff;
    /*font-family: "Raleway";*/
    font-family: "Raleway-Regular";
    font-size: 18px;
    width: 34%;
}


.rel-about .owl-theme .owl-controls {
    position: absolute;
    margin: 0;
    width: 100%;
    bottom: 25px;
}

.rel-about .owl-theme .owl-dots .owl-dot span {
    background-color: #C1C1C1;
    height: 3px;
    width: 25px;
}

.rel-about .owl-theme .owl-dots .owl-dot.active span {
    background-color: #C1C1C1;
}

.rel-about .owl-theme .owl-dots .owl-dot.active:hover span {
    background-color: #C1C1C1;
}

.rel-about .owl-theme .owl-dots .owl-dot:hover span {
    background-color: #E6E7E8;
}

.rel-about .owl-item {
    z-index:1;
}


@media (max-width: 950px) {
    .item-rel-about .title h3 {
        font-size: 20px;
    }

    .item-rel-about .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-about .title {
        top: 55%;
    }
}

@media (max-width: 900px) {
    .item-rel-about .title h3 {
        font-size: 20px;
    }

    .item-rel-about .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-about .title {
        top: 55%;
    }
}

@media (max-width: 850px) {
    .item-rel-about .title h3 {
        font-size: 20px;
    }

    .item-rel-about .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-about .title {
        top: 55%;
    }
}

@media (max-width: 800px) {
    .item-rel-about .title h3 {
        font-size: 20px;
    }

    .item-rel-about .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-about .title {
        top: 55%;
    }
}

@media (max-width: 750px) {
    .item-rel-about .title h3 {
        font-size: 20px;
    }

    .item-rel-about .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-about .title {
        top: 55%;
    }
}

@media (max-width: 700px) {
    .item-rel-about .title h3 {
        font-size: 20px;
    }

    .item-rel-about .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-about .title {
        top: 55%;
    }
}

@media (max-width: 650px) {
    .item-rel-about .title h3 {
        font-size: 20px;
    }

    .item-rel-about .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-about .title {
        top: 60%;
    }
}

@media (max-width: 600px) {
    .item-rel-about .title h3 {
        display: none;
    }

    .item-rel-about .title p {
        display: none;
    }
}

@media (max-width: 500px) {
    .item-rel-about .title h3 {
        display: none;
    }

    .item-rel-about .title p {
        display: none;
    }
}

@media (max-width: 400px) {
    .item-rel-about .title h3 {
        display: none;
    }

    .item-rel-about .title p {
        display: none;
    }
}

@media (max-width: 375px) {
    .item-rel-about .title h3 {
        display: none;
    }

    .item-rel-about .title p {
        display: none;
    }
}

@media (max-width: 365px) {
    .item-rel-about .title h3 {
        display: none;
    }

    .item-rel-about .title p {
        display: none;
    }
}

@media (max-width: 320px) {
    .item-rel-about .title h3 {
        display: none;
    }

    .item-rel-about .title p {
        display: none;
    }
}
/*end-rel-about*/


/*star-rel-produk*/
.rel-produk {
    padding: 0;
}

.item-rel-produk {
    position: relative;
}

.item-rel-produk img {
    margin-bottom: 0px;
    width: 100%;
}

.item-rel-produk .title {
    position: absolute;
    top: 50%;
    /*top: 50% !important;*/
    width: 100%;
    left: 10%;
    transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}

.item-rel-produk .title h3 {
    font-size: 27px;
    color: #25A8E0;
    /*font-family: "Raleway";*/
    font-family: "Raleway-ExtraBold";
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 5px;
}

.item-rel-produk .title p {
    color: #ffffff;
    /*font-family: "Raleway";*/
    font-family: "Raleway-Regular";
    font-size: 18px;
    width: 34%;
}


.rel-produk .owl-theme .owl-controls {
    position: absolute;
    margin: 0;
    width: 100%;
    bottom: 25px;
}

.rel-produk .owl-theme .owl-dots .owl-dot span {
    background-color: #C1C1C1;
    height: 3px;
    width: 25px;
}

.rel-produk .owl-theme .owl-dots .owl-dot.active span {
    background-color: #C1C1C1;
}

.rel-produk .owl-theme .owl-dots .owl-dot.active:hover span {
    background-color: #C1C1C1;
}

.rel-produk .owl-theme .owl-dots .owl-dot:hover span {
    background-color: #E6E7E8;
}

.rel-produk .owl-item {
    z-index:1;
}

/*@media (max-width: 1920px) {
    .item-rel-produk .title {
        top: 37%;
    }
}*/

@media (max-width: 950px) {
    .item-rel-produk .title h3 {
        font-size: 20px;
    }

    .item-rel-produk .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-produk .title {
        top: 55%;
    }
}

@media (max-width: 900px) {
    .item-rel-produk .title h3 {
        font-size: 20px;
    }

    .item-rel-produk .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-produk .title {
        top: 55%;
    }
}

@media (max-width: 850px) {
    .item-rel-produk .title h3 {
        font-size: 20px;
    }

    .item-rel-produk .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-produk .title {
        top: 55%;
    }
}

@media (max-width: 800px) {
    .item-rel-produk .title h3 {
        font-size: 20px;
    }

    .item-rel-produk .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-produk .title {
        top: 55%;
    }
}

@media (max-width: 750px) {
    .item-rel-produk .title h3 {
        font-size: 20px;
    }

    .item-rel-produk .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-produk .title {
        top: 55%;
    }
}

@media (max-width: 700px) {
    .item-rel-produk .title h3 {
        font-size: 20px;
    }

    .item-rel-produk .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-produk .title {
        top: 55%;
    }

    .rel-produk .owl-theme .owl-controls {
        bottom: 0;
    }
}

@media (max-width: 650px) {
    .item-rel-produk .title h3 {
        font-size: 20px;
    }

    .item-rel-produk .title p {
        font-size: 14px;
        width: 70%;
    }

    .item-rel-produk .title {
        top: 60%;
    }

    .rel-produk .owl-theme .owl-controls {
        bottom: 0;
    }
}

@media (max-width: 600px) {
    .item-rel-produk .title h3 {
        display: none;
    }

    .item-rel-produk .title p {
        display: none;
    }

    .rel-produk .owl-theme .owl-controls {
        bottom: 0;
    }
}

@media (max-width: 500px) {
    .item-rel-produk .title h3 {
        display: none;
    }

    .item-rel-produk .title p {
        display: none;
    }

    .rel-produk .owl-theme .owl-controls {
        bottom: 0;
    }
}

@media (max-width: 400px) {
    .item-rel-produk .title h3 {
        display: none;
    }

    .item-rel-produk .title p {
        display: none;
    }

    .rel-produk .owl-theme .owl-controls {
        bottom: 0;
    }
}

@media (max-width: 375px) {
    .item-rel-produk .title h3 {
        display: none;
    }

    .item-rel-produk .title p {
        display: none;
    }

    .rel-produk .owl-theme .owl-controls {
        bottom: 0;
    }
}

@media (max-width: 365px) {
    .item-rel-produk .title h3 {
        display: none;
    }

    .item-rel-produk .title p {
        display: none;
    }

    .rel-produk .owl-theme .owl-controls {
        bottom: 0;
    }
}

@media (max-width: 320px) {
    .item-rel-produk .title h3 {
        display: none;
    }

    .item-rel-produk .title p {
        display: none;
    }

    .rel-produk .owl-theme .owl-controls {
        bottom: 0;
    }
}
/*end-rel-produk*/

/*star-rel-produk-one*/
#rel-produk-one {
    padding-top: 30px;
    padding-bottom: 5px;
}

.rel-produk-one {
    font-size: 17px;
    color: #383838;
    font-family: "Raleway-Regular";
    padding-top: 20px;
    padding-bottom: 20px;
    width: 98%;
}

.rel-produk-one span.bolds {
    font-size: 17px;
    color: #383838;
    font-family: "Raleway-Bold";
}
/*end-rel-produk-one*/

/*star-imgOfficial*/
.imgOfficial {
    padding-top: 10px;
}

.imgOfficial li {
    display: inline-block;
    margin-right: 15px;
}

.imgOfficial li a {
    display: block;
}

.imgOfficial li a .shopee {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 20px;
    /*width: auto;*/
    /*height: 15px;*/
    color: #0a1019;
}

.imgOfficial li a .tokped {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 20px;
    /*width: auto;*/
    /*height: 15px;*/
    color: #0a1019;
}
/*end-imgOfficial*/

/*star-modal-content*/
.modal-content .proTeks {
    padding-top: 30px;
    color: #404040;
    font-size: 28px;
    line-height: 40px;
    font-family: "Poppins-Bold";
}

.modal-content .proDesc {
    color: #585858;
    padding-top: 10px;
    font-size: 15px;
    line-height: 26px;
    font-family: "Poppins-Regular";
    width: 90%;
}

.modal-content .proDesc p {
    color: #585858;
    padding-top: 10px;
    font-size: 15px;
    line-height: 26px;
    font-family: "Poppins-Regular";
    width: 90%;
}

/* The Close Button */
span.close {
    color: transparent;
    float: right;
    font-size: 28px;
    font-weight: bold;
    opacity: 999999;
    cursor: pointer;
    /*text-shadow: 20px -14px 0 #ffffff;*/
    text-shadow: 18px -20px 0 #ffffff;
}

span.close:hover,
span.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal-open .modal {
    padding-right: 5px !important;
}

@media (max-width: 1200px) {
    .modal-dialog {
        max-width: 90%;
        margin: 1.75rem auto;
    }
}

@media (max-width: 500px) {
    span.close {
        opacity: 999999;
        text-shadow: 0px -2px 0 #ffffff;
    }
}

@media (max-width: 450px) {
    span.close {
        opacity: 999999;
        text-shadow: 0px -2px 0 #ffffff;
    }
}

@media (max-width: 400px) {
    span.close {
        opacity: 999999;
        text-shadow: 0px -2px 0 #ffffff;
    }
}

@media (max-width: 375px) {
    span.close {
        opacity: 999999;
        text-shadow: 0px -2px 0 #ffffff;
    }
}

@media (max-width: 365px) {
    span.close {
        opacity: 999999;
        text-shadow: 0px -2px 0 #ffffff;
    }
}

@media (max-width: 320px) {
    span.close {
        opacity: 999999;
        text-shadow: 0px -2px 0 #ffffff;
    }
}
/*end-modal-content*/

/*star-prodkat-detail*/
#prodkat-detail  {
    padding-top: 40px;
    padding-bottom: 40px;
}

.prodkat-detail-one {
    font-size: 30px;
    color: #25A8E0;
    font-family: "Raleway-Bold";
}

.prodkat-detail-two {
    font-size: 18px;
    color: #25A8E0;
    font-family: "Roboto-Bold";
    padding-top: 5px;
    padding-bottom: 20px;
    margin-bottom: 0;
}

.prodkat-detail-trhee {
    font-size: 17px;
    color: #383838;
    font-family: "Raleway-Regular";
    padding-bottom: 25px;
}


.box-prodetail {
    margin-right: -15px;
    margin-left: -15px;
    font-size: 0px;
}

.item-prodetail {
    margin-bottom: 30px;
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;
    width: 33.33333%;
    font-size: 14px;
    vertical-align: top;
}

.i-prodetail {
    background: #ffffff;
}

.i-prodetail a img {}

.i-prodetail img {
    display: block;
    max-width: 100%;
}

/*.i-prodetail .abstop {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 40px);
    transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}*/

.vertborder {
    border-left: 0px #25A8E0 solid;
    padding-left: 0;
    text-align: center;
}

.vertborder .konten-item-prodetail {
    font-size: 23px;
    color: #25A8E0;
    font-family: "Raleway-Bold";
}


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

@media only screen and (max-width: 767px) {
    .item-prodetail {
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        width: 50%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 480px) {
    .item-prodetail {
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }

}
/*end-prodkat-detail*/

/*star-catHome*/
#catHome {
    padding-top: 110px;
    padding-bottom: 25px;
    position: relative;
    margin-bottom: 85px;
}

#catHome:before {
    position: absolute;
    content: "";
    top: 40px;
    left: 0px;
    width: 50%;
    height: 100%;
    /* border: 10px solid #cb9b2c; */
    background: #F5F5F5;
    border-top-right-radius: 50px;
    z-index: 1;
}

#catHome .paddingTop {
    padding-top: 120px;
}

#catHome .katHomeTeks {
    color: #1A6D9D;
    font-size: 30px;
    line-height: 70px;
    font-family: "Raleway-Bold";
}

#catHome .katHomeTeks-two {
    color: #585858;
    font-size: 15px;
    line-height: 26px;
    font-family: "Poppins-Regular";
}

.btnV.blue {
    background-color: transparent;
    color: #1A6D9D;
}

.btnV {
    height: 45px;
    line-height: 20px;;
    font-size: 13px;
    text-align: center;
    padding: 0 20px 0 0px;
    border: none;
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    transition: all .5s;
    text-transform: uppercase;
}

.btnV .fa-long-arrow-right {
    padding-left: 5px;
}

a.btnV:hover{
    color: #1A6D9D;
    transition: .3s;
    -webkit-transition: .3s;
}

@media (max-width: 800px) {
    #catHome .paddingTop {
        padding-top: 70px;
    }
}

@media (max-width: 767px) {
    #catHome .paddingTop {
        padding-top: 25px;
    }
}

@media (max-width: 750px) {
    #catHome .paddingTop {
        padding-top: 25px;
    }
}

@media (max-width: 400px) {
    #catHome {
        padding-top: 140px;
    }
}

@media (max-width: 375px) {
    #catHome {
        padding-top: 140px;
    }
}

@media (max-width: 365px) {
    #catHome {
        padding-top: 140px;
    }
}

@media (max-width: 320px) {
    #catHome {
        padding-top: 140px;
    }
}
/*star-catHome*/

/*star-dt-categories-nav__list*/
.dt-product-listing {
    margin-top: -33px;
}

.dt-categories-nav {
    position: relative;
    z-index: 10;
}

.dt-categories-nav__list {
    line-height: 36px;
    display: flex;
    justify-content: center;
    margin-bottom: 37px;
}

.dt-categories-nav__list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    box-shadow: 0 10px 19px 0 rgb(0 0 0 / 11%);
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    display: flex;
}

.dt-categories-nav__list li {
    display: inline-flex;
}

.dt-categories-nav__list a {
    padding: 9px 23px;
    color: #29BDFF;
    background: #292973;
    border: solid #fff;
    border-width: 3px 0;
    position: relative;
    font-family: "Poppins-Regular";
}

.dt-categories-nav__list a.active {
    color: #ffffff;
    font-size: 15px;
}

.dt-categories-nav__list a span {
    line-height: 23px;
    font-size: 15px;
}

.dt-categories-nav__list li:first-child a {
    padding-left: 28px;
    border-width: 3px 0 3px 3px;
    border-radius: 50px 0 0 50px;
}

.dt-categories-nav__list li+li a:not(.selected):before {
    opacity: 1;
}


.dt-categories-nav__list li:last-child a {
    padding-right: 28px;
    border-width: 3px 3px 3px 0;
    border-radius: 0 50px 50px 0;
}

.dt-categories-nav__list a:before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: -1px;
    width: 1px;
    /*background: hsla(0,0%,100%,.2);*/
    opacity: 0;
}

.d-none {
    display: none!important;
}

@media (min-width: 768px) {
    .d-md-block {
        display: block!important;
    }
    .d-md-none {
        display: none!important;
    }
}

.dt-dropdown-categories {
    /*min-width: 233px;*/
    display: inline-flex;
    margin-top: 10px;
    /*margin-bottom: 27px;*/
}

.dt-dropdown-categories select {
    width: 100%;
    padding: 12px 16px 12px 16px;
    line-height: 23px;
    font-size: 15px;
    border: 2px solid #fff;
    border-radius: 4px;
    resize: vertical;
    color: #fff;
    font-family: "Poppins-Regular";
    background: #292973;
    cursor: pointer;
}

.dt-dropdown-categories select option {
    color: #29BDFF;
}

.dt-dropdown-categories select option:first-child{
  color: #29BDFF;
}

/*.dt-dropdown-categories {
    min-width: 233px;
    display: inline-flex;
    margin-bottom: 27px;
}*/

/*.dropdown, .dropleft, .dropright, .dropup {
    position: relative;
}*/

/*.dt-dropdown-categories .btn {
    text-transform: none;
    font-family: DettolSans-SemiBold,sans-serif;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    background: #008522;
    border: 3px solid #fff;
}*/

/*.dt-dropdown-categories .btn {
    text-transform: none;
    font-family: DettolSans-SemiBold,sans-serif;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    background: #008522;
    border: 3px solid #fff;
}*/

/*.dropdown .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
}*/

/*.dropdown .btn .dt-icon-custom.icon-next_arrow {
    transform: rotate(90deg);
    left: -5px;
    position: relative;
    margin-left: 20px;
}*/

/*.dt-dropdown-categories .btn .dt-icon-custom {
    color: #fff;
}*/

/*.dt-dropdown-categories .btn .dt-icon-custom {
    color: #fff;
}*/

/*.dropdown .btn-primary .dt-icon-custom {
    color: inherit;
}*/

/*.dropdown .btn .dt-icon-custom {
    transition: .2s;
    margin-left: 14px;
    color: #008522;
}*/

/*.active { background: red !important }*/


/*.dropdown-menu[x-placement^=bottom], .dropdown-menu[x-placement^=left], .dropdown-menu[x-placement^=right], .dropdown-menu[x-placement^=top] {
    right: auto;
    bottom: auto;
}*/


/*@media screen and (max-width: 767px) {
    .dt-dropdown-categories .dropdown-menu {
        top: 100%!important;
        bottom: auto!important;
        transform: translate(0)!important;
    }
}*/

/*@media screen and (max-width: 767px) {
    .dt-dropdown-categories .dropdown-menu {
        top: 100%!important;
        bottom: auto!important;
        transform: translate(0)!important;
    }
}*/

/*@media screen and (max-width: 767px) {
    .dt-dropdown-categories .dropdown-menu {
        top: 100%!important;
        bottom: auto!important;
        transform: translate(0)!important;
    }
}*/
/*star-dt-categories-nav__list*/

/**/
/*
 * Plugin: Select2
 * ---------------
 */
.select2-container--default.select2-container--focus,
.select2-selection.select2-container--focus,
.select2-container--default:focus,
.select2-selection:focus,
.select2-container--default:active,
.select2-selection:active {
  outline: none; }

.select2-container--default .select2-selection--single,
.select2-selection .select2-selection--single {
  border: 1px solid #d2d6de;
  border-radius: 0;
  padding: 6px 12px;
  height: 34px; }

.select2-container--default.select2-container--open {
  border-color: #3c8dbc; }

.select2-dropdown {
  border: 1px solid #d2d6de;
  border-radius: 0; }

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #3c8dbc;
  color: white; }

.select2-results__option {
  padding: 6px 12px;
  user-select: none;
  -webkit-user-select: none; }

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-left: 0;
  padding-right: 0;
  height: auto;
  margin-top: -4px; }

.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
  padding-right: 6px;
  padding-left: 20px; }

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 28px;
  right: 3px; }

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  margin-top: 0; }

.select2-dropdown .select2-search__field,
.select2-search--inline .select2-search__field {
  border: 1px solid #d2d6de; }

.select2-dropdown .select2-search__field:focus,
.select2-search--inline .select2-search__field:focus {
  outline: none;
  border: 1px solid #3c8dbc; }

.select2-container--default .select2-results__option[aria-disabled=true] {
  color: #999; }

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #ddd; }

.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[aria-selected=true]:hover {
  color: #444; }

.select2-container--default .select2-selection--multiple {
  border: 1px solid #d2d6de;
  border-radius: 0; }

.select2-container--default .select2-selection--multiple:focus {
  border-color: #3c8dbc; }

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: #d2d6de; }

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #3c8dbc;
  border-color: #367fa9;
  padding: 1px 10px;
  color: #fff; }

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  margin-right: 5px;
  color: rgba(255, 255, 255, 0.7); }

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fff; }

.select2-container .select2-selection--single .select2-selection__rendered {
  padding-right: 10px; }
/**/

/*star-contain-prod*/
.contain-prod {
    position: relative;
    text-align: center;
}

.contain-prod .centered {
    position: absolute;
    bottom: 225px;
    /*top: 50%;*/
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
}

.contain-prod .centered span {
    font-size: 18px;
    line-height: 35px;
    color: #ffffff;
    font-family: "Poppins-Bold";
}

.contain-prod .centered p {
    color: #ffffff;
    font-family: "Raleway-Medium";
    font-size: 90px;
    line-height: 35px;
    margin: 10px 0 10px;
    text-transform: initial;
}

@media (max-width: 1200px) {
    .contain-prod .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-prod .centered {
        bottom: 150px;
    }
}

@media (max-width: 1024px) {
    .contain-prod .centered span {
        font-size: 18px;
        line-height: 35px;
    }
}

@media (max-width: 991px) {
    .contain-prod .centered {
        bottom: 140px;
    }
    .contain-prod .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-prod .centered p {
        font-size: 70px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 900px) {
    .contain-prod .centered {
        bottom: 135px;
    }
    .contain-prod .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-prod .centered p {
        font-size: 70px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 850px) {
    .contain-prod .centered {
        bottom: 135px;
    }
    .contain-prod .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-prod .centered p {
        font-size: 70px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 800px) {
    .contain-prod .centered {
        bottom: 135px;
    }
    .contain-prod .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-prod .centered p {
        font-size: 70px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 750px) {
    .contain-prod .centered {
        bottom: 85px;
    }
    .contain-prod .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-prod .centered p {
        font-size: 50px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 700px) {
    .contain-prod .centered {
        bottom: 75px;
    }
    .contain-prod .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-prod .centered p {
        font-size: 50px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 650px) {
    .contain-prod .centered {
        bottom: 65px;
    }
    .contain-prod .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-prod .centered p {
        font-size: 50px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 600px) {
    .contain-prod .centered {
        display: none;
    }
}

@media (max-width: 550px) {
    .contain-prod .centered {
        display: none;
    }
}

@media (max-width: 500px) {
    .contain-prod .centered {
        display: none;
    }
}

@media (max-width: 450px) {
    .contain-prod .centered {
        display: none;
    }
}

@media (max-width: 400px) {
    .contain-prod .centered {
        display: none;
    }
}

@media (max-width: 375px) {
    .contain-prod .centered {
        display: none;
    }
}

@media (max-width: 365px) {
    .contain-prod .centered {
        display: none;
    }
}

@media (max-width: 320px) {
    .contain-prod .centered {
        display: none;
    }
}
/*end-contain-prod*/

/*star-contain-arts*/
.contain-arts {
    position: relative;
    text-align: center;
}

.contain-arts .centered {
    position: absolute;
    bottom: 195px;
    /*top: 50%;*/
    left: 50%;
    transform: translate(-50%, -50%);
    text-transform: uppercase;
}

.contain-arts .centered span {
    font-size: 18px;
    line-height: 35px;
    color: #ffffff;
    font-family: "Poppins-Bold";
}

.contain-arts .centered p {
    color: #ffffff;
    font-family: "Raleway-Medium";
    font-size: 50px;
    line-height: 35px;
    margin: 10px 0 10px;
    text-transform: initial;
}

@media (max-width: 1200px) {
    .contain-arts .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-arts .centered {
        bottom: 150px;
    }
}

@media (max-width: 1024px) {
    .contain-arts .centered span {
        font-size: 18px;
        line-height: 35px;
    }
}

@media (max-width: 991px) {
    .contain-arts .centered {
        bottom: 140px;
    }
    .contain-arts .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-arts .centered p {
        font-size: 50px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 900px) {
    .contain-arts .centered {
        bottom: 110px;
    }
    .contain-arts .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-arts .centered p {
        font-size: 50px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 850px) {
    .contain-arts .centered {
        bottom: 110px;
    }
    .contain-arts .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-arts .centered p {
        font-size: 50px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 800px) {
    .contain-arts .centered {
        bottom: 100px;
    }
    .contain-arts .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-arts .centered p {
        font-size: 50px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 750px) {
    .contain-arts .centered {
        bottom: 85px;
    }
    .contain-arts .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-arts .centered p {
        font-size: 50px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 700px) {
    .contain-arts .centered {
        bottom: 75px;
    }
    .contain-arts .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-arts .centered p {
        font-size: 50px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 650px) {
    .contain-arts .centered {
        bottom: 65px;
    }
    .contain-arts .centered span {
        font-size: 18px;
        line-height: 35px;
    }
    .contain-arts .centered p {
        font-size: 50px;
        line-height: 35px;
        margin: 0 0 10px;
    }
}

@media (max-width: 600px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 550px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 500px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 450px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 400px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 375px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 365px) {
    .contain-arts .centered {
        display: none;
    }
}

@media (max-width: 320px) {
    .contain-arts .centered {
        display: none;
    }
}
/*end-contain-arts*/

.text-center {
    text-align: center!important;
}

/*star-related-produk*/
.box-prods-detail {
    margin-right: 0px;
    margin-left: 0px;
    font-size: 0px;
}

.item-prods-detail {
    margin-bottom: 30px;
    margin-top: 50px;
    display: inline-block;
    padding-right: 0px;
    padding-left: 0px;
    /*width: 33.33333%;*/
    width: 100%;
    font-size: 14px;
    vertical-align: top;
    text-align: center;
}

.i-prods-detail {
    background: #F0F1F7;
}


.box-prods-detail.owl-carousel .owl-item img {
    display: inherit;
    width: 50%;
}

.box-prods-detail.owl-carousel .item {
    text-align: center;
}

.konten-item-prods-detail {
    padding: 0px 0 0 0;
}

.konten-item-prods-detail ul {
    list-style: none;
    margin-bottom: 10px;
}

.konten-item-prods-detail ul li {
    float: left;
    border-bottom: 0px solid transparent;
    border-right: 1px solid #dddd;
    padding: 3px 10px 3px 10px;
    display: flex;
    letter-spacing: 10px;
}

.konten-item-prods-detail ul li:last-child{
    border:none;
}

.judul-item-prods-detail {
    margin-bottom: 20px;
}

.judul-item-prods-detail a {
    font-size: 23px;
    /*font-feature-settings: "salt";
    -webkit-font-feature-settings: "salt";
    -o-font-feature-settings: "salt";
    -moz-font-feature-settings: "salt";
    -ms-font-feature-settings: "salt";*/
    font-family: "Raleway-Bold";
    color: #25A8E0;
}

.judul-item-prods-detail a:hover {
    color: #25A8E0;
    border-bottom: 2px #25A8E0 solid;
}


@media only screen and (max-width: 991px) {
    .judul-item-prods-detail {
        margin-bottom: 15px;
    }
  
    .judul-item-prods-detail a {
        font-size: 14px;
    }
}

@media only screen and (max-width: 767px) {
    .item-prods-detail {
        display: inline-block;
        padding-right: 0px;
        padding-left: 0px;
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }

    .box-prods-detail {
        margin-right: 0px;
        margin-left: 0px;
        font-size: 0px;
    }
}

@media only screen and (max-width: 480px) {
    .item-prods-detail {
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }
}
/*end-related-produk*/

/*star-contents*/
#contents {
    padding-bottom: 45px;
}

.contents {
    /*margin: 0 auto;*/
    width: 100%;
}

.contents > h2 {
    clear: both;
    margin: 0;
    padding: 4em 1% 0;
    color: #484B54;
    font-weight: 800;
    font-size: 1.5em;
}

.contents > h2:first-child {
    padding-top: 0em;
}

.grid {
    position: relative;
    margin: 0 auto;
    padding: 1em 0 4em;
    max-width: 100%;
    list-style: none;
    text-align: center;
}

/* Common style */
.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 20px 1%;
    /*min-width: 320px;
    max-width: 480px;
    max-height: 360px;
    width: 48%;*/
    width: 100%;
    background: transparent;
    text-align: center;
    cursor: pointer;
    border-bottom: 0px #000 solid;
}

.grid figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    /*opacity: 0.8;*/
}

.grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.grid figure h2 {
    /*word-spacing: -0.15em;*/
    font-weight: 300;
}

.grid figure h2 span {
    font-weight: 800;
}

.grid figure h2,
.grid figure p {
    margin: 0;
}

.grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}

/* Individual effects */

/*---------------*/
/***** Lily *****/
/*---------------*/

figure.effect-lily img {
    max-width: none;
    width: -webkit-calc(100% + 50px);
    width: calc(100% + 50px);
    /*opacity: 0.7;*/
    /*-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;*/
    /*transition: opacity 0.35s, transform 0.35s;*/
    /*-webkit-transform: translate3d(-40px,0, 0);*/
    /*transform: translate3d(-40px,0,0);*/
}

figure.effect-lily figcaption {
    /*text-align: left;*/
    text-align: right;
}

figure.effect-lily figcaption > div {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    /*height: 50%;*/
}

figure.effect-lily p {
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}

figure.effect-lily h2 {
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}


/*star-button-abouthome*/
figure.effect-lily .button-abouthome {
    padding: 10px 0px;
    background: none;
    border: none;
    position: relative;
    text-transform: capitalize;
    cursor: pointer;
    height: 50px;
    /*opacity: 0;*/
    float: right;
    width: 17%;
    display: inline-block;
}

figure.effect-lily .button-abouthome span {
    color: #25A8E0;
    font-size: 15px;
    font-family: "Roboto-Medium";
    margin-left: 20px;
    opacity: 0;
}

figure.effect-lily .button-abouthome:before {
    content: "";
    position: absolute;
    /*top: 0;*/
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    border: hidden;
    width: 100%;
    border-radius: 50px;
    background: #A6DEEF;
}

/*figure.effect-lily .button-abouthome:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 0px solid #25A8E0;
    transition: transform 0.2s;
    width: 50%;
    border-radius: 50%;
}*/

figure.effect-lily .button-abouthome:after {
    /*transform: translate(3px, 3px);*/
    transform: inherit;
    opacity: 0;
}


figure.effect-lily .button-abouthome:before {
    transform: translate(-3px, -3px);
    opacity: 0;
}

/*figure.effect-lily .button-abouthome:hover:after {
    transform: translate(0);
    border: hidden;
    opacity: 1;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}*/

/*figure.effect-lily .button-abouthome:hover:after {
    opacity: 1;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}*/

figure.effect-lily .button-abouthome:hover span {
    margin-left: 0;
    padding: 10px 15px;
    color: #282A75;
    font-size: 15px;
    font-family: "Raleway-Regular";
    opacity: 1;
    /*-webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;*/
}

figure.effect-lily .button-abouthome:hover:before {
    transform: translate(0);
    /*border: 1px solid #25A8E0;*/
    margin-left: 0;
}

figure.effect-lily .button-abouthome:hover:before {
    opacity: 1;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}
/*end-button-abouthome*/


@media (max-width: 991px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-right: 25px;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0);
    }

    .grid figure.effect-lily .button-abouthome {
        width: 28%;
    }

    .grid figure.effect-lily p {
        font-size: 15px;
    }
}

@media (max-width: 950px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-right: 25px;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0);
    }

    .grid figure.effect-lily .button-abouthome {
        width: 28%;
    }

    .grid figure.effect-lily p {
        font-size: 15px;
    }
}

@media (max-width: 900px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-right: 25px;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0);
    }

    .grid figure.effect-lily .button-abouthome {
        width: 28%;
    }

    .grid figure.effect-lily p {
        font-size: 15px;
    }
}

@media (max-width: 850px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-right: 25px;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0);
    }

    .grid figure.effect-lily .button-abouthome {
        width: 28%;
    }

    .grid figure.effect-lily p {
        font-size: 15px;
    }
}

@media (max-width: 800px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-right: 25px;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    .grid figure.effect-lily .button-abouthome {
        width: 28%;
    }

    .grid figure.effect-lily p {
        font-size: 15px;
    }
}

@media (max-width: 766px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    .grid figure.effect-lily .button-abouthome {
        width: 35%;
    }

    .grid figure.effect-lily p {
        font-size: 15px;
    }
}

@media (max-width: 700px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    .grid figure.effect-lily .button-abouthome {
        width: 35%;
    }

    .grid figure.effect-lily p {
        font-size: 15px;
    }
}

@media (max-width: 650px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    .grid figure.effect-lily .button-abouthome {
        width: 35%;
    }

    .grid figure.effect-lily p {
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    .grid figure.effect-lily .button-abouthome {
        width: 35%;
    }

    .grid figure.effect-lily p {
        font-size: 15px;
    }
}

@media (max-width: 550px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily .button-abouthome {
        width: 40%;
    }

    .grid figure.effect-lily p {
        font-size: 15px;
    }
}

@media (max-width: 500px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily .button-abouthome {
        width: 40%;
    }

    .grid figure.effect-lily p {
        font-size: 14px;
    }
}

@media (max-width: 450px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }
    
    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,35px,0);
        transform: translate3d(0,35px,0);
    }

    .grid figure.effect-lily h2 {
        font-size: 16px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily .button-abouthome {
        width: 40%;
    }

    .grid figure.effect-lily p {
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }
    
    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,35px,0);
        transform: translate3d(0,35px,0);
    }

    .grid figure.effect-lily h2 {
        font-size: 16px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily .button-abouthome {
        width: 45%;
    }

    .grid figure.effect-lily p {
        font-size: 12px;
    }
}

@media (max-width: 375px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }
    
    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,35px,0);
        transform: translate3d(0,35px,0);
    }

    .grid figure.effect-lily h2 {
        font-size: 16px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily .button-abouthome {
        width: 45%;
    }

    .grid figure.effect-lily p {
        font-size: 12px;
    }
}

@media (max-width: 365px) {
    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,35px,0);
        transform: translate3d(0,35px,0);
    }
}

@media (max-width: 320px) {
    .grid figure.effect-lily figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }
    
    .grid figure.effect-lily h2 {
        -webkit-transform: translate3d(0,35px,0);
        transform: translate3d(0,35px,0);
    }

    .grid figure.effect-lily h2 {
        font-size: 16px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily .button-abouthome {
        width: 45%;
        height: 45px;
    }

    .grid figure.effect-lily p {
        font-size: 12px;
    }
}


figure.effect-lily .gmbr {
    display: block;
    width: 100%;
}

figure.effect-lily h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    font-size: 18px;
    color: #25A8E0;
    font-family: "Raleway-Bold";
    padding-bottom: 15px;
    text-transform: initial;
    padding-right: 25px;
}

figure.effect-lily p {
    color: #282A75;
    font-size: 15px;
    font-family: "Roboto-Medium";
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
    transition: opacity 0.2s, transform 0.35s;
}

figure.effect-lily:hover img,
figure.effect-lily:hover p {
    opacity: 1;
}

figure.effect-lily:hover img,
figure.effect-lily:hover h2,
figure.effect-lily:hover p {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-lily:hover p {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}

/*---------------*/
/***** Sadie *****/
/*---------------*/

figure.effect-sadie figcaption::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
    background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
    content: '';
    opacity: 0;
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
}

figure.effect-sadie h2 {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    color: #484c61;
    -webkit-transition: -webkit-transform 0.35s, color 0.35s;
    transition: transform 0.35s, color 0.35s;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
}

figure.effect-sadie figcaption::before,
figure.effect-sadie p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    opacity: 0;
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h2 {
    color: #fff;
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
    transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption::before ,
figure.effect-sadie:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/*---------------*/
/***** Roxy *****/
/*---------------*/

figure.effect-roxy {
    background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
    background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
}

figure.effect-roxy img {
    max-width: none;
    width: -webkit-calc(100% + 60px);
    width: calc(100% + 60px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50px,0,0);
    transform: translate3d(-50px,0,0);
}

figure.effect-roxy figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-20px,0,0);
    transform: translate3d(-20px,0,0);
}

figure.effect-roxy figcaption {
    padding: 3em;
    text-align: left;
}

figure.effect-roxy h2 {
    padding: 30% 0 10px 0;
}

figure.effect-roxy p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
}

figure.effect-roxy:hover img {
    opacity: 0.7;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-roxy:hover figcaption::before,
figure.effect-roxy:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/*---------------*/
/***** Bubba *****/
/*---------------*/

figure.effect-bubba {
    background: #9e5406;
}

figure.effect-bubba img {
    opacity: 0.7;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
    opacity: 0.4;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-bubba figcaption::before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}

figure.effect-bubba h2 {
    padding-top: 30%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
}

figure.effect-bubba p {
    padding: 20px 2.5em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-bubba:hover h2,
figure.effect-bubba:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/*---------------*/
/***** Romeo *****/
/*---------------*/

figure.effect-romeo {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

figure.effect-romeo img {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,0,300px);
    transform: translate3d(0,0,300px);
}

figure.effect-romeo:hover img {
    opacity: 0.6;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-romeo figcaption::before,
figure.effect-romeo figcaption::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 1px;
    background: #fff;
    content: '';
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}

figure.effect-romeo:hover figcaption::before {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
    transform: translate3d(-50%,-50%,0) rotate(45deg);
}

figure.effect-romeo:hover figcaption::after {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
    transform: translate3d(-50%,-50%,0) rotate(-45deg);
}

figure.effect-romeo h2,
figure.effect-romeo p {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-romeo h2 {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
    transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}

figure.effect-romeo p {
    padding: 0.25em 2em;
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
    transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}

figure.effect-romeo:hover h2 {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
    transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}

figure.effect-romeo:hover p {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
    transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}

/*---------------*/
/***** Layla *****/
/*---------------*/

figure.effect-layla {
    background: #18a367;
}

figure.effect-layla img {
    height: 390px;
}

figure.effect-layla figcaption {
    padding: 3em;
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
    position: absolute;
    content: '';
    opacity: 0;
}

figure.effect-layla figcaption::before {
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

figure.effect-layla h2 {
    padding-top: 26%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-layla p {
    padding: 0.5em 2em;
    text-transform: none;
    opacity: 0;
    -webkit-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
}

figure.effect-layla img,
figure.effect-layla h2 {
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
    opacity: 0.7;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-layla:hover h2,
figure.effect-layla:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

/*---------------*/
/***** Honey *****/
/*---------------*/

figure.effect-honey {
    background: #4a3753;
}

figure.effect-honey img {
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-honey:hover img {
    opacity: 0.5;
}

figure.effect-honey figcaption::before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: #fff;
    content: '';
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}

figure.effect-honey h2 {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1em 1.5em;
    width: 100%;
    text-align: left;
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}

figure.effect-honey h2 i {
    font-style: normal;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}

figure.effect-honey figcaption::before,
figure.effect-honey h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}

figure.effect-honey:hover figcaption::before,
figure.effect-honey:hover h2,
figure.effect-honey:hover h2 i {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/*---------------*/
/***** Oscar *****/
/*---------------*/

figure.effect-oscar {
    background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
    background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
}

figure.effect-oscar img {
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-oscar figcaption {
    padding: 3em;
    background-color: rgba(58,52,42,0.7);
    -webkit-transition: background-color 0.35s;
    transition: background-color 0.35s;
}

figure.effect-oscar figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
}

figure.effect-oscar h2 {
    margin: 20% 0 10px 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}

figure.effect-oscar figcaption::before,
figure.effect-oscar p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0);
    transform: scale(0);
}

figure.effect-oscar:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-oscar:hover figcaption::before,
figure.effect-oscar:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-oscar:hover figcaption {
    background-color: rgba(58,52,42,0);
}

figure.effect-oscar:hover img {
    opacity: 0.4;
}

/*---------------*/
/***** Marley *****/
/*---------------*/

figure.effect-marley figcaption {
    text-align: right;
}

figure.effect-marley h2,
figure.effect-marley p {
    position: absolute;
    right: 30px;
    left: 30px;
    padding: 10px 0;
}


figure.effect-marley p {
    bottom: 30px;
    line-height: 1.5;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}

figure.effect-marley h2 {
    top: 30px;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-marley:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-marley h2::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 4px;
    background: #fff;
    content: '';
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}

figure.effect-marley h2::after,
figure.effect-marley p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-marley:hover h2::after,
figure.effect-marley:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/*---------------*/
/***** Ruby *****/
/*---------------*/

figure.effect-ruby {
    background-color: #17819c;
}

figure.effect-ruby img {
    opacity: 0.7;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

figure.effect-ruby:hover img {
    opacity: 0.5;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-ruby h2 {
    margin-top: 20%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}

figure.effect-ruby p {
    margin: 1em 0 0;
    padding: 3em;
    border: 1px solid #fff;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0) scale(1.1);
    transform: translate3d(0,20px,0) scale(1.1);
} 

figure.effect-ruby:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-ruby:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
}

/*---------------*/
/***** Milo *****/
/*---------------*/

figure.effect-milo {
    background: #2e5d5a;
}

figure.effect-milo img {
    max-width: none;
    width: -webkit-calc(100% + 60px);
    width: calc(100% + 60px);
    opacity: 1;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-30px,0,0) scale(1.12);
    transform: translate3d(-30px,0,0) scale(1.12);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-milo:hover img {
    opacity: 0.5;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
}

figure.effect-milo h2 {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1em 1.2em;
}

figure.effect-milo p {
    padding: 0 10px 0 0;
    width: 50%;
    border-right: 1px solid #fff;
    text-align: right;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px,0,0);
    transform: translate3d(-40px,0,0);
}

figure.effect-milo:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/*---------------*/
/***** Dexter *****/
/*---------------*/

figure.effect-dexter {
    background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
    background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%); 
}

figure.effect-dexter img {
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect-dexter:hover img {
    opacity: 0.4;
}

figure.effect-dexter figcaption::after {
    position: absolute;
    right: 30px;
    bottom: 30px;
    left: 30px;
    height: -webkit-calc(50% - 30px);
    height: calc(50% - 30px);
    border: 7px solid #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
}

figure.effect-dexter:hover figcaption::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-dexter figcaption {
    padding: 3em;
    text-align: left;
}

figure.effect-dexter p {
    position: absolute;
    right: 60px;
    bottom: 60px;
    left: 60px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,-100px,0);
    transform: translate3d(0,-100px,0);
}

figure.effect-dexter:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/*---------------*/
/***** Sarah *****/
/*---------------*/

figure.effect-sarah {
    background: #42b078;
}

figure.effect-sarah img {
    max-width: none;
    width: -webkit-calc(100% + 20px);
    width: calc(100% + 20px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

figure.effect-sarah:hover img {
    opacity: 0.4;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-sarah figcaption {
    text-align: left;
}

figure.effect-sarah h2 {
    position: relative;
    overflow: hidden;
    padding: 0.5em 0;
}

figure.effect-sarah h2::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}

figure.effect-sarah:hover h2::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-sarah p {
    padding: 1em 0;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}

figure.effect-sarah:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/*---------------*/
/***** Zoe *****/
/*---------------*/

figure.effect-zoe figcaption {
    top: auto;
    bottom: 0;
    padding: 1em;
    height: 3.75em;
    background: #fff;
    color: #3c4a50;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}

figure.effect-zoe h2 {
    float: left;
}

figure.effect-zoe p.icon-links a {
    float: right;
    color: #3c4a50;
    font-size: 1.4em;
}

figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {
    color: #252d31;
}

figure.effect-zoe p.description {
    position: absolute;
    bottom: 8em;
    padding: 2em;
    color: #fff;
    text-transform: none;
    font-size: 90%;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    -webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}

figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,200%,0);
    transform: translate3d(0,200%,0);
}

figure.effect-zoe p.icon-links a span::before {
    display: inline-block;
    padding: 8px 10px;
    font-family: 'feathericons';
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-eye::before {
    content: '\e000';
}

.icon-paper-clip::before {
    content: '\e001';
}

.icon-heart::before {
    content: '\e024';
}

figure.effect-zoe h2 {
    display: inline-block;
}

figure.effect-zoe:hover p.description {
    opacity: 1;
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-zoe:hover h2 {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(3) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(2) {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

figure.effect-zoe:hover p.icon-links a:first-child {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

/*---------------*/
/***** Chico *****/
/*---------------*/

figure.effect-chico img {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.12);
    transform: scale(1.12);
}

figure.effect-chico:hover img {
    opacity: 0.5;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-chico figcaption {
    padding: 3em;
}

figure.effect-chico figcaption::before {
    position: absolute;
    top: 30px;
    right: 30px;
    bottom: 30px;
    left: 30px;
    border: 1px solid #fff;
    content: '';
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

figure.effect-chico figcaption::before,
figure.effect-chico p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-chico h2 {
    padding: 20% 0 20px 0;
}

figure.effect-chico p {
    margin: 0 auto;
    max-width: 200px;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

figure.effect-chico:hover figcaption::before,
figure.effect-chico:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

@media screen and (max-width: 50em) {
    .content {
        padding: 0 10px;
        text-align: center;
    }
    .grid figure {
        display: inline-block;
        float: none;
        /*margin: 10px auto;*/
        margin: auto;
        width: 100%;
        padding-bottom: 20px;
    }
}
/*end-contents*/


/*star-contenkat*/
#contenkat {
    padding-bottom: 0;
    background: #F0F1F7;
}

.contenkat {
    /*margin: 0 auto;*/
    width: 100%;
}

.contenkat > h2 {
    clear: both;
    margin: 0;
    padding: 4em 1% 0;
    color: #484B54;
    font-weight: 800;
    font-size: 1.5em;
}

.contenkat > h2:first-child {
    padding-top: 0em;
}

.contenkat .grid {
    position: relative;
    margin: 0 auto;
    /*padding: 1em 0 4em;*/
    padding: 25px 0 25px 0;
    max-width: 100%;
    list-style: none;
    text-align: center;
}

/* Common style */
.contenkat .grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 20px 1%;
    /*min-width: 320px;
    max-width: 480px;
    max-height: 360px;
    width: 48%;*/
    width: 100%;
    background: transparent;
    text-align: center;
    cursor: pointer;
    border-bottom: 0px #000 solid;
}

.contenkat .grid figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    /*opacity: 0.8;*/
}

.grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.grid figure h2 {
    /*word-spacing: -0.15em;*/
    font-weight: 300;
}

.grid figure h2 span {
    font-weight: 800;
}

.grid figure h2,
.grid figure p {
    margin: 0;
}

.grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}

/* Individual effects */

/*---------------*/
/***** Lily-kat *****/
/*---------------*/

figure.effect-lily-kat img {
    max-width: none;
    width: -webkit-calc(100% + 50px);
    width: calc(100% + 50px);
    /*opacity: 0.7;*/
    /*-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;*/
    /*transition: opacity 0.35s, transform 0.35s;*/
    /*-webkit-transform: translate3d(-40px,0, 0);*/
    /*transform: translate3d(-40px,0,0);*/
}

figure.effect-lily-kat figcaption {
    text-align: left;
    /*text-align: right;*/
}

figure.effect-lily-kat figcaption > div {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    /*height: 50%;*/
}

figure.effect-lily-kat p {
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}

figure.effect-lily-kat h2 {
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}


/*star-button-abouthome*/
figure.effect-lily-kat .button-abouthome {
    padding: 10px 0px;
    background: none;
    border: none;
    position: relative;
    text-transform: capitalize;
    cursor: pointer;
    height: 50px;
    /*opacity: 0;*/
    float: left;
    width: 35%;
    /*width: 50%;*/
    display: inline-block;
}

figure.effect-lily-kat .button-abouthome span {
    color: #25A8E0;
    font-size: 15px;
    font-family: "Roboto-Medium";
    margin-left: 20px;
    opacity: 0;
}

figure.effect-lily-kat .button-abouthome:before {
    content: "";
    position: absolute;
    /*top: 0;*/
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    border: hidden;
    width: 100%;
    border-radius: 50px;
    background: #A6DEEF;
}

/*figure.effect-lily-kat .button-abouthome:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 0px solid #25A8E0;
    transition: transform 0.2s;
    width: 50%;
    border-radius: 50%;
}*/

figure.effect-lily-kat .button-abouthome:after {
    /*transform: translate(3px, 3px);*/
    transform: inherit;
    opacity: 0;
}


figure.effect-lily-kat .button-abouthome:before {
    transform: translate(-3px, -3px);
    opacity: 0;
}

/*figure.effect-lily-kat .button-abouthome:hover:after {
    transform: translate(0);
    border: hidden;
    opacity: 1;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}*/

/*figure.effect-lily-kat .button-abouthome:hover:after {
    opacity: 1;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}*/

figure.effect-lily-kat .button-abouthome:hover span {
    margin-left: 0;
    padding: 10px 15px;
    color: #282A75;
    font-size: 15px;
    font-family: "Roboto-Medium";
    opacity: 1;
    /*-webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;*/
}

figure.effect-lily-kat .button-abouthome:hover:before {
    transform: translate(0);
    /*border: 1px solid #25A8E0;*/
    margin-left: 0;
}

figure.effect-lily-kat .button-abouthome:hover:before {
    opacity: 1;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}
/*end-button-abouthome*/


@media (max-width: 991px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-right: 25px;
    }

    .grid figure.effect-lily-kat h2 {
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0);
    }

    .grid figure.effect-lily-kat .button-abouthome {
        /*width: 28%;*/
        width: 50%;
        margin-left: 20px;
    }

    .grid figure.effect-lily-kat p {
        font-size: 15px;
    }
}


@media (max-width: 1022px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-left: 25px;
    }

    .grid figure.effect-lily-kat h2 {
        -webkit-transform: translate3d(0,50px,0);
        transform: translate3d(0,50px,0);
    }

    .grid figure.effect-lily-kat .button-abouthome {
        /*width: 28%;*/
        width: 50%;
        margin-left: 20px;
    }

    .grid figure.effect-lily-kat p {
        font-size: 15px;
    }
}

@media (max-width: 991px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 35%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-left: 25px;
    }

    .grid figure.effect-lily-kat h2 {
        -webkit-transform: translate3d(0,50px,0);
        transform: translate3d(0,50px,0);
    }

    /*.grid figure.effect-lily-kat .button-abouthome {
        width: 25%;
        margin-left: 20px;
    }*/

    .grid figure.effect-lily-kat p {
        font-size: 15px;
    }
}

@media (max-width: 950px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 35%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-left: 25px;
    }

    .grid figure.effect-lily-kat h2 {
        -webkit-transform: translate3d(0,50px,0);
        transform: translate3d(0,50px,0);
    }

    .grid figure.effect-lily-kat .button-abouthome {
        /*width: 25%;*/
        width: 50%;
        margin-left: 20px;
    }

    .grid figure.effect-lily-kat p {
        font-size: 15px;
    }
}

@media (max-width: 900px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-right: 25px;
    }

    .grid figure.effect-lily-kat h2 {
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0);
    }

    .grid figure.effect-lily-kat .button-abouthome {
        /*width: 28%;*/
        width: 50%;
    }

    .grid figure.effect-lily-kat p {
        font-size: 15px;
    }
}

@media (max-width: 850px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-right: 25px;
    }

    .grid figure.effect-lily-kat h2 {
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0);
    }

    .grid figure.effect-lily-kat .button-abouthome {
        /*width: 28%;*/
        width: 50%;
    }

    .grid figure.effect-lily-kat p {
        font-size: 15px;
    }
}

@media (max-width: 800px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-right: 25px;
    }

    .grid figure.effect-lily-kat h2 {
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0);
    }

    .grid figure.effect-lily-kat .button-abouthome {
        /*width: 28%;*/
        width: 50%;
    }

    .grid figure.effect-lily-kat p {
        font-size: 15px;
    }
}

@media (max-width: 766px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-kat h2 {
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    .grid figure.effect-lily-kat .button-abouthome {
        width: 35%;
    }

    .grid figure.effect-lily-kat p {
        font-size: 15px;
    }
}

@media (max-width: 700px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-kat h2 {
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    .grid figure.effect-lily-kat .button-abouthome {
        width: 35%;
    }

    .grid figure.effect-lily-kat p {
        font-size: 15px;
    }
}

@media (max-width: 650px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-kat h2 {
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    .grid figure.effect-lily-kat .button-abouthome {
        width: 35%;
    }

    .grid figure.effect-lily-kat p {
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-kat h2 {
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    .grid figure.effect-lily-kat .button-abouthome {
        width: 35%;
    }

    .grid figure.effect-lily-kat p {
        font-size: 15px;
    }
}

@media (max-width: 550px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-kat .button-abouthome {
        width: 40%;
    }

    .grid figure.effect-lily-kat p {
        font-size: 15px;
    }
}

@media (max-width: 500px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-kat .button-abouthome {
        width: 40%;
    }

    .grid figure.effect-lily-kat p {
        font-size: 14px;
    }
}

@media (max-width: 450px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 16px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-kat .button-abouthome {
        width: 40%;
    }

    .grid figure.effect-lily-kat p {
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 16px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-kat .button-abouthome {
        width: 45%;
    }

    .grid figure.effect-lily-kat p {
        font-size: 12px;
    }
}

@media (max-width: 375px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 16px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-kat .button-abouthome {
        width: 45%;
    }

    .grid figure.effect-lily-kat p {
        font-size: 12px;
    }
}

@media (max-width: 365px) {}

@media (max-width: 320px) {
    .grid figure.effect-lily-kat figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-kat h2 {
        font-size: 16px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-kat .button-abouthome {
        width: 45%;
        height: 45px;
    }

    .grid figure.effect-lily-kat p {
        font-size: 12px;
    }
}


figure.effect-lily-kat .gmbr {
    display: block;
    width: 100%;
}

figure.effect-lily-kat h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    font-size: 18px;
    color: #25A8E0;
    font-family: "Raleway-Bold";
    padding-bottom: 15px;
    text-transform: initial;
    padding-right: 25px;
}

figure.effect-lily-kat p {
    color: #282A75;
    font-size: 15px;
    font-family: "Roboto-Medium";
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
    transition: opacity 0.2s, transform 0.35s;
}

figure.effect-lily-kat:hover img,
figure.effect-lily-kat:hover p {
    opacity: 1;
}

figure.effect-lily-kat:hover img,
figure.effect-lily-kat:hover h2,
figure.effect-lily-kat:hover p {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-lily-kat:hover p {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}

/*---------------*/
/***** Sadie *****/
/*---------------*/

/*---------------*/
/***** Roxy *****/
/*---------------*/

/*---------------*/
/***** Bubba *****/
/*---------------*/

/*---------------*/
/***** Romeo *****/
/*---------------*/

/*---------------*/
/***** Layla *****/
/*---------------*/

/*---------------*/
/***** Honey *****/
/*---------------*/

/*---------------*/
/***** Oscar *****/
/*---------------*/

/*---------------*/
/***** Marley *****/
/*---------------*/

/*---------------*/
/***** Ruby *****/
/*---------------*/

/*---------------*/
/***** Milo *****/
/*---------------*/

/*---------------*/
/***** Dexter *****/
/*---------------*/

/*---------------*/
/***** Sarah *****/
/*---------------*/

/*---------------*/
/***** Chico *****/
/*---------------*/

@media screen and (max-width: 50em) {
    .content {
        padding: 0 10px;
        text-align: center;
    }
    .contenkat .grid figure {
        display: inline-block;
        float: none;
        /*margin: 10px auto;*/
        margin: auto;
        width: 100%;
        padding-bottom: 0px;
    }
}
/*end-contenkat*/

/*star-box-prods-kat*/
#prods-kat {
    padding-top: 55px;
    padding-bottom: 50px;
}

.prods-kat {
    font-size: 30px;
    color: #25A8E0;
    font-family: "Raleway-Bold";
    padding-bottom: 10px;
}

#prods-kat .desc {
    font-size: 17px;
    color: #383838;
    font-family: "Raleway-Regular";
}

.box-prods-kat {
    margin-right: 0px;
    margin-left: 0px;
    font-size: 0px;
}

.item-prods-kat {
    margin-bottom: 30px;
    margin-top: 50px;
    display: inline-block;
    padding-right: 0px;
    padding-left: 0px;
    width: 33.33333%;
    /*width: 100%;*/
    font-size: 14px;
    vertical-align: top;
    text-align: center;
}

.i-prods-kat {
    background: #ffffff;
}

.i-prods-kat img {
    display: block;
    max-width: 100%;
}

.konten-item-prods-kat {
    padding: 0px 0 0 0;
}

.konten-item-prods-kat ul {
    list-style: none;
    margin-bottom: 10px;
}

.konten-item-prods-kat ul li {
    float: left;
    border-bottom: 0px solid transparent;
    border-right: 1px solid #dddd;
    padding: 3px 10px 3px 10px;
    display: flex;
    letter-spacing: 10px;
}

.konten-item-prods-kat ul li:last-child{
    border:none;
}

.judul-item-prods-kat {
    margin-bottom: 20px;
}

.judul-item-prods-kat a {
    font-size: 18px;
    font-feature-settings: "salt";
    -webkit-font-feature-settings: "salt";
    -o-font-feature-settings: "salt";
    -moz-font-feature-settings: "salt";
    -ms-font-feature-settings: "salt";
    font-family: "Roboto-Bold";
    color: #25A8E0;
}

.judul-item-prods-kat a:hover {
    color: #25A8E0;
    border-bottom: 2px #25A8E0 solid;
}


@media only screen and (max-width: 991px) {
    .judul-item-prods-kat {
        margin-bottom: 15px;
    }
  
    .judul-item-prods-kat a {
        font-size: 14px;
    }
}

@media only screen and (max-width: 767px) {
    .item-prods-kat {
        display: inline-block;
        padding-right: 0px;
        padding-left: 0px;
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }

    .box-prods-kat {
        margin-right: 0px;
        margin-left: 0px;
        font-size: 0px;
    }
}

@media only screen and (max-width: 480px) {
    .item-prods-kat {
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }
}
/*end-box-prods-kat*/


/*star-contenthome*/
#contenthome {
    padding-top: 15px;
    padding-bottom: 0;
    background: #ffffff;
}

.contenthome {
    /*margin: 0 auto;*/
    width: 100%;
}

.contenthome > h2 {
    clear: both;
    margin: 0;
    padding: 4em 1% 0;
    color: #484B54;
    font-weight: 800;
    font-size: 1.5em;
}

.contenthome > h2:first-child {
    padding-top: 0em;
}

.contenthome .grid {
    position: relative;
    margin: 0 auto;
    /*padding: 1em 0 4em;*/
    padding: 25px 0 25px 0;
    max-width: 100%;
    list-style: none;
    text-align: center;
}

/* Common style */
.contenthome .grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 20px 1%;
    /*min-width: 320px;
    max-width: 480px;
    max-height: 360px;
    width: 48%;*/
    width: 100%;
    background: transparent;
    text-align: center;
    cursor: pointer;
    border-bottom: 0px #000 solid;
}

.contenthome .grid figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    /*opacity: 0.8;*/
}

.contenthome .grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.contenthome .grid figure figcaption::before,
.contenthome .grid figure figcaption::after {
    pointer-events: none;
}

.contenthome .grid figure figcaption,
.contenthome .grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.contenthome .grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.contenthome .grid figure h2 {
    /*word-spacing: -0.15em;*/
    font-weight: 300;
}

.contenthome .grid figure h2 span {
    font-weight: 800;
}

.contenthome .grid figure h2,
.contenthome .grid figure p {
    margin: 0;
}

.contenthome .grid figure p {
    letter-spacing: 1px;
    font-size: 68.5%;
}

/* Individual effects */

/*---------------*/
/***** Lily-kat *****/
/*---------------*/

figure.effect-lily-home img {
    max-width: none;
    width: -webkit-calc(100% + 50px);
    width: calc(100% + 50px);
    /*opacity: 0.7;*/
    /*-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;*/
    /*transition: opacity 0.35s, transform 0.35s;*/
    /*-webkit-transform: translate3d(-40px,0, 0);*/
    /*transform: translate3d(-40px,0,0);*/
}

figure.effect-lily-home figcaption {
    text-align: left;
    /*text-align: right;*/
}

figure.effect-lily-home figcaption > div {
    position: absolute;
    bottom: 0;
    left: 0;
    /*padding: 2em;*/
    padding: 20px;
    width: 100%;
    /*height: 50%;*/
}

figure.effect-lily-home p {
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}

figure.effect-lily-home h2 {
    -webkit-transform: translate3d(0,60px,0);
    transform: translate3d(0,60px,0);
}


/*star-button-abouthome*/
figure.effect-lily-home .button-abouthome {
    padding: 10px 0px;
    background: none;
    border: none;
    position: relative;
    text-transform: capitalize;
    cursor: pointer;
    height: 50px;
    /*opacity: 0;*/
    float: left;
    /*width: 35%;*/
    width: 50%;
    display: inline-block;
}

figure.effect-lily-home .button-abouthome span {
    color: #25A8E0;
    font-size: 15px;
    font-family: "Roboto-Medium";
    margin-left: 20px;
    opacity: 0;
}

figure.effect-lily-home .button-abouthome:before {
    content: "";
    position: absolute;
    /*top: 0;*/
    top: 5px;
    left: 0;
    bottom: 0;
    right: 0;
    border: hidden;
    width: 100%;
    border-radius: 50px;
    background: #A6DEEF;
}

/*figure.effect-lily-home .button-abouthome:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 0px solid #25A8E0;
    transition: transform 0.2s;
    width: 50%;
    border-radius: 50%;
}*/

figure.effect-lily-home .button-abouthome:after {
    /*transform: translate(3px, 3px);*/
    transform: inherit;
    opacity: 0;
}


figure.effect-lily-home .button-abouthome:before {
    transform: translate(-3px, -3px);
    opacity: 0;
}

/*figure.effect-lily-home .button-abouthome:hover:after {
    transform: translate(0);
    border: hidden;
    opacity: 1;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}*/

/*figure.effect-lily-home .button-abouthome:hover:after {
    opacity: 1;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}*/

figure.effect-lily-home .button-abouthome:hover span {
    margin-left: 0;
    padding: 10px 15px;
    color: #282A75;
    font-size: 15px;
    font-family: "Roboto-Medium";
    opacity: 1;
    /*-webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;*/
}

figure.effect-lily-home .button-abouthome:hover:before {
    transform: translate(0);
    /*border: 1px solid #25A8E0;*/
    margin-left: 0;
}

figure.effect-lily-home .button-abouthome:hover:before {
    opacity: 1;
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}
/*end-button-abouthome*/


@media (max-width: 991px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-right: 25px;
    }

    .grid figure.effect-lily-home h2 {
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0);
    }

    .grid figure.effect-lily-home .button-abouthome {
        /*width: 28%;*/
        width: 50%;
    }

    .grid figure.effect-lily-home p {
        font-size: 15px;
    }
}


@media (max-width: 1022px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-left: 25px;
    }

    .grid figure.effect-lily-home h2 {
        -webkit-transform: translate3d(0,50px,0);
        transform: translate3d(0,50px,0);
    }

    .grid figure.effect-lily-home .button-abouthome {
        /*width: 28%;*/
        width: 50%;
        margin-left: 20px;
    }

    .grid figure.effect-lily-home p {
        font-size: 15px;
    }
}

@media (max-width: 991px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 35%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-left: 25px;
    }

    .grid figure.effect-lily-home h2 {
        -webkit-transform: translate3d(0,50px,0);
        transform: translate3d(0,50px,0);
    }

    .grid figure.effect-lily-home .button-abouthome {
        /*width: 25%;*/
        width: 50%;
        margin-left: 20px;
    }

    .grid figure.effect-lily-home p {
        font-size: 15px;
    }
}

@media (max-width: 950px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 35%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-left: 25px;
    }

    .grid figure.effect-lily-home h2 {
        -webkit-transform: translate3d(0,50px,0);
        transform: translate3d(0,50px,0);
    }

    .grid figure.effect-lily-home .button-abouthome {
        /*width: 25%;*/
        width: 50%;
        margin-left: 20px;
    }

    .grid figure.effect-lily-home p {
        font-size: 15px;
    }
}

@media (max-width: 900px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-right: 25px;
    }

    .grid figure.effect-lily-home h2 {
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0);
    }

    .grid figure.effect-lily-home .button-abouthome {
        /*width: 28%;*/
        width: 50%;
    }

    .grid figure.effect-lily-home p {
        font-size: 15px;
    }
}

@media (max-width: 850px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-right: 25px;
    }

    .grid figure.effect-lily-home h2 {
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0);
    }

    .grid figure.effect-lily-home .button-abouthome {
        /*width: 28%;*/
        width: 50%;
    }

    .grid figure.effect-lily-home p {
        font-size: 15px;
    }
}

@media (max-width: 800px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 18px;
        padding-bottom: 0;
        padding-right: 25px;
    }

    .grid figure.effect-lily-home h2 {
        -webkit-transform: translate3d(0,100px,0);
        transform: translate3d(0,100px,0);
    }

    .grid figure.effect-lily-home .button-abouthome {
        /*width: 28%;*/
        width: 50%;
    }

    .grid figure.effect-lily-home p {
        font-size: 15px;
    }
}

@media (max-width: 766px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-home h2 {
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    .grid figure.effect-lily-home .button-abouthome {
        width: 35%;
    }

    .grid figure.effect-lily-home p {
        font-size: 15px;
    }
}

@media (max-width: 700px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-home h2 {
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    .grid figure.effect-lily-home .button-abouthome {
        width: 35%;
    }

    .grid figure.effect-lily-home p {
        font-size: 15px;
    }
}

@media (max-width: 650px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-home h2 {
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    .grid figure.effect-lily-home .button-abouthome {
        width: 35%;
    }

    .grid figure.effect-lily-home p {
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-home h2 {
        -webkit-transform: translate3d(0,60px,0);
        transform: translate3d(0,60px,0);
    }

    .grid figure.effect-lily-home .button-abouthome {
        width: 35%;
    }

    .grid figure.effect-lily-home p {
        font-size: 15px;
    }
}

@media (max-width: 550px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-home .button-abouthome {
        width: 40%;
    }

    .grid figure.effect-lily-home p {
        font-size: 15px;
    }
}

@media (max-width: 500px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 18px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-home .button-abouthome {
        width: 40%;
    }

    .grid figure.effect-lily-home p {
        font-size: 14px;
    }
}

@media (max-width: 450px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 16px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-home .button-abouthome {
        width: 40%;
    }

    .grid figure.effect-lily-home p {
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 16px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-home .button-abouthome {
        width: 45%;
    }

    .grid figure.effect-lily-home p {
        font-size: 12px;
    }
}

@media (max-width: 375px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 16px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-home .button-abouthome {
        width: 45%;
    }

    .grid figure.effect-lily-home p {
        font-size: 12px;
    }
}

@media (max-width: 365px) {}

@media (max-width: 320px) {
    .grid figure.effect-lily-home figcaption > div {
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
        padding: 0em;
        width: 100%;
        height: 50%;
    }

    .grid figure.effect-lily-home h2 {
        font-size: 16px;
        padding-bottom: 0;
    }

    .grid figure.effect-lily-home .button-abouthome {
        width: 45%;
        height: 45px;
    }

    .grid figure.effect-lily-home p {
        font-size: 12px;
    }
}


figure.effect-lily-home .gmbr {
    display: block;
    width: 100%;
}

figure.effect-lily-home h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    font-size: 18px;
    color: #25A8E0;
    font-family: "Raleway-Bold";
    padding-bottom: 15px;
    text-transform: initial;
    padding-right: 25px;
}

figure.effect-lily-home p {
    color: #282A75;
    font-size: 15px;
    font-family: "Roboto-Medium";
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
    transition: opacity 0.2s, transform 0.35s;
}

figure.effect-lily-home:hover img,
figure.effect-lily-home:hover p {
    opacity: 1;
}

figure.effect-lily-home:hover img,
figure.effect-lily-home:hover h2,
figure.effect-lily-home:hover p {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-lily-home:hover p {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}

@media screen and (max-width: 50em) {
    .content {
        padding: 0 10px;
        text-align: center;
    }
    .contenthome .grid figure {
        display: inline-block;
        float: none;
        /*margin: 10px auto;*/
        margin: auto;
        width: 100%;
        padding-bottom: 0px;
    }
}
/*end-contenthome*/

/*star-alertKarir*/
.alertKarir {
    position: relative;
    padding: 10px 15px 20px 15px;
    margin-bottom: 15px;
}

.alertKarir span {
    font-size: 25px;
    border: 0px solid transparent;
    border-radius: 2px;
    text-align: justify;
    font-family: "Raleway-Light";
    text-transform: inherit;
}

.alertKarir.alert-danger {
    color: #000;
    background-color: #f5f5f5;
    border-color: transparent;
}
/*end-alertKarir*/

/*star-alertNews*/
.alertNews {
    font-size: 25px;
    position: relative;
    padding: 10px 15px;
    margin-top: 60px;
    margin-bottom: 15px;
    border: 0px solid transparent;
    border-radius: 2px;
    text-align: center;
    font-family: "Raleway-Light";
    text-transform: uppercase;
}

.alertNews.alert-danger {
    color: #000;
    background-color: #f5f5f5;
    border-color: transparent;
}
/*end-alertKarir*/

/*star-bread-news*/
.map-khusus-news {
    padding-top: 0px;
    border-top: 1px solid #f2f2f2;
    border-bottom: none;
    /*margin-top: 102px;*/
    margin-top: 0px;
}

.map-halaman-news {
    padding: 3px 0px;
    border-bottom: 0px solid #f2f2f2;
}

.breadcrumb-news {
    padding: 8px 0px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
    text-align: left;
}

.breadcrumb-news>li {
    display: inline-block;
}

.map-khusus-news .breadcrumb-news {
    padding-bottom: 10px;
    border-bottom: 0px solid #f2f2f2;
    border-radius: 0px;
}

.map-halaman-news .breadcrumb-news {
    margin-bottom: 0px;
    font-family: "Raleway-Regular";
    font-size: 13px;
    background: #F5F5F5;
}

.map-halaman-news .breadcrumb-news a {
    color: #C1C1C1;
    font-size: 15px;
    font-family: "Raleway-Regular";
    letter-spacing: 0px;
}

.map-halaman-news .breadcrumb-news a.active {
    color: #515151;
    font-size: 15px;
    font-family: "Raleway-Regular";
    letter-spacing: 0px;
}

.breadcrumb-news>li+li:before {
    padding: 0 5px;
    color: #C1C1C1;
    content: "/\00a0";
}

@media (max-width: 1200px) {
    .map-khusus-news {
        margin-top: 0px;
    }
}

@media (max-width: 1024px) {
    .map-khusus-news {
        margin-top: 0px;
    }
}

@media (max-width: 900px) {
    .map-khusus-news {
        margin-top: 0px;
    }
}

@media (max-width: 800px) {
    .map-khusus-news {
        margin-top: 0px;
    }
}

@media (max-width: 700px) {
    .map-khusus-news {
        margin-top: 0px;
    }
}

@media (max-width: 600px) {
    .map-khusus-news {
        margin-top: 0px;
    }
}

@media (max-width: 500px) {
    .map-khusus-news {
        margin-top: 0px;
    }
}

@media (max-width: 400px) {
    .map-khusus-news {
        margin-top: 0px;
    }
}

@media (max-width: 375px) {
    .map-khusus-news {
        margin-top: 0px;
    }
}

@media (max-width: 365px) {
    .map-khusus-news {
        margin-top: 0px;
    }
}

@media (max-width: 320px) {
    .map-khusus-news {
        margin-top: 0px;
    }
}
/*end-bread-news*/

/*star-owl-stage-outer*/
.wrap-product-relasi.owl-carousel, .wrap-product-relasi.owl-carousel .owl-stage-outer, 
.wrap-product-relasi.owl-carousel .owl-stage, .wrap-product-relasi.owl-carousel .owl-item {
    /*height: 385px;*/
    height: 400px;
}

@media (max-width: 1200px) {
    .wrap-product-relasi.owl-carousel, .wrap-product-relasi.owl-carousel .owl-stage-outer, 
    .wrap-product-relasi.owl-carousel .owl-stage, .wrap-product-relasi.owl-carousel .owl-item {
        height: auto;
    }
}

@media (max-width: 1024px) {
    .wrap-product-relasi.owl-carousel, .wrap-product-relasi.owl-carousel .owl-stage-outer, 
    .wrap-product-relasi.owl-carousel .owl-stage, .wrap-product-relasi.owl-carousel .owl-item {
        height: auto;
    }
}

@media (max-width: 910px) {
    .wrap-product-relasi.owl-carousel, .wrap-product-relasi.owl-carousel .owl-stage-outer, 
    .wrap-product-relasi.owl-carousel .owl-stage, .wrap-product-relasi.owl-carousel .owl-item {
        height: auto;
    }
}

@media (max-width: 900px) {
    .wrap-product-relasi.owl-carousel, .wrap-product-relasi.owl-carousel .owl-stage-outer, 
    .wrap-product-relasi.owl-carousel .owl-stage, .wrap-product-relasi.owl-carousel .owl-item {
        height: auto;
    }
}

@media (max-width: 800px) {
    .wrap-product-relasi.owl-carousel, .wrap-product-relasi.owl-carousel .owl-stage-outer, 
    .wrap-product-relasi.owl-carousel .owl-stage, .wrap-product-relasi.owl-carousel .owl-item {
        height: auto;
    }
}

@media (max-width: 700px) {
    .wrap-product-relasi.owl-carousel, .wrap-product-relasi.owl-carousel .owl-stage-outer, 
    .wrap-product-relasi.owl-carousel .owl-stage, .wrap-product-relasi.owl-carousel .owl-item {
        height: auto;
    }
}

@media (max-width: 600px) {
    .wrap-product-relasi.owl-carousel, .wrap-product-relasi.owl-carousel .owl-stage-outer, 
    .wrap-product-relasi.owl-carousel .owl-stage, .wrap-product-relasi.owl-carousel .owl-item {
        height: auto;
    }
}

@media (max-width: 500px) {
    .wrap-product-relasi.owl-carousel, .wrap-product-relasi.owl-carousel .owl-stage-outer, 
    .wrap-product-relasi.owl-carousel .owl-stage, .wrap-product-relasi.owl-carousel .owl-item {
        height: auto;
    }
}

@media (max-width: 400px) {
    .wrap-product-relasi.owl-carousel, .wrap-product-relasi.owl-carousel .owl-stage-outer, 
    .wrap-product-relasi.owl-carousel .owl-stage, .wrap-product-relasi.owl-carousel .owl-item {
        height: auto;
    }
}

@media (max-width: 375px) {
    .wrap-product-relasi.owl-carousel, .wrap-product-relasi.owl-carousel .owl-stage-outer, 
    .wrap-product-relasi.owl-carousel .owl-stage, .wrap-product-relasi.owl-carousel .owl-item {
        height: auto;
    }
}

@media (max-width: 365px) {
    .wrap-product-relasi.owl-carousel, .wrap-product-relasi.owl-carousel .owl-stage-outer, 
    .wrap-product-relasi.owl-carousel .owl-stage, .wrap-product-relasi.owl-carousel .owl-item {
        height: auto;
    }
}

@media (max-width: 320px) {
    .wrap-product-relasi.owl-carousel, .wrap-product-relasi.owl-carousel .owl-stage-outer, 
    .wrap-product-relasi.owl-carousel .owl-stage, .wrap-product-relasi.owl-carousel .owl-item {
        height: auto;
    }
}
/*end-owl-stage-outer*/

/*star-footer-sigpro*/
#footer-sigpro {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 25px;
}

.footer-sigpro {
    display: block;
}

.footer-sigpro img {
    max-width: 100%;
}
/*end-footer-sigpro*/

/*star-footer*/
footer .second-footer {
    padding: 5px 0;
    background-color: transparent;
    text-align: center;
}

.copyright {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 13px;
    color: #7B7B7B;
    font-family: "Roboto-Regular";
    line-height: 27px;
    letter-spacing: 0;
}

@media (max-width: 800px) {
    .copyright {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 700px) {
    .copyright {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 600px) {
    .copyright {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 500px) {
    .copyright {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 400px) {
    .copyright {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media (max-width: 320px) {
    .copyright {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.top-footer {
    padding-top: 0;
    padding-bottom: 0;
}
  
.item-footer .tag-item-footer {
    margin-bottom: 10px;
    font-family: "Roboto-Regular";
    font-size: 13px;
    color: #000000;
    text-transform: inherit;
}


@media (max-width: 991px) {}

@media (max-width: 320px) {}


.item-footer p {
    font-size: 13px;
    color: #FFF;
}

.item-footer ul li {
    margin-bottom: 10px;
}

.item-footer ul li:last-child {
    margin-bottom: 0;
}

.item-footer ul li a {
    position: relative;
    display: block;
    font-size: 13px;
    color: #FFF;
}

.item-footer ul li a .fa {
    margin-right: 5px;
}

.item-kontak-footer {
    margin-bottom: 15px;
}

.item-nav-footer {
    margin-bottom: 10px;
}

.item-info-footer {
    margin-bottom: 5px;
}

.item-almt-footer {
    margin-bottom: 5px;
}

.item-kontak-footer .tag-kontak-footer {
    font-family: "Roboto-Regular";
    font-size: 13px;
    color: #FFF;
    text-transform: uppercase;
}

.item-nav-footer .tag-nav-footer a {
    font-family: "Roboto-Regular";
    font-size: 15px;
    color: #656565;
    text-transform: inherit;
}

.item-info-footer .tag-info-footer {
    font-family: "Roboto-Regular";
    font-size: 13px;
    color: #a9d8ff;
    text-transform: capitalize;
}

.item-almt-footer .tag-almt-footer {
    font-family: "Roboto-Regular";
    font-size: 13px;
    color: #a9d8ff;
    text-transform: capitalize;
}

.item-kontak-footer span {
    display: block;
    font-size: 13px;
    color: #FFF;
}

.medsos-footer {
    padding-top: 15px;
}

.medsos-footer li {
    display: inline-block;
    margin-right: 15px;
}

.medsos-footer li a {
    display: block;
    /*width: 40px;
    height: 40px;*/
    /*background: #E6E6E6;
    border-radius: 50%;*/
}

.medsos-footer li a .instagram {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 20px;
    width: auto;
    height: 15px;
    color: #d6249f;
}

.medsos-footer li a .facebook {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 20px;
    width: auto;
    height: 15px;
    color: #295396;
}

.medsos-footer li a .twitter {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 20px;
    width: auto;
    height: 15px;
    color: #28aae1;
}

.medsos-footer li a .youtube {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 20px;
    width: auto;
    height: 15px;
    color: #f70000;
}

@media only screen and (max-width: 1024px) {
    .item-footer {
        margin-bottom: 10px;
    }
}

@media only screen and (max-width: 991px) {
    .copy {
        text-align: center;
    }
}


@media (max-width: 320px) {}

@media only screen and (max-width: 320px) {
    .item-footer .tag-item-footer {
        margin-bottom: 15px;
        font-size: 14px;
    }
    .item-footer p {
        font-size: 12px;
        line-height: 20px;
        text-align: justify;
    }
    .item-footer ul li a {
        font-size: 12px;
    }
    .item-kontak-footer .tag-kontak-footer {
        font-size: 12px;
    }
    .item-nav-footer .tag-nav-footer a {
        font-size: 12px;
    }
    .item-info-footer .tag-info-footer {
        font-size: 12px;
    }
    .item-almt-footer .tag-almt-footer {
        font-size: 12px;
    }
    .item-kontak-footer span {
        font-size: 12px;
    }
}
/*end-footer*/

/*star-clinic*/
#clinic {
    background: #fff;
    padding-top: 55px;
}

.clinicTeks {
    color: #393939;
    font-size: 60px;
    font-family: "BARLOWSEMICONDENSED-LIGHT";
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 65px;
}

.clinicTeks-two {
    color: #7E5941;
    font-size: 35px;
    font-family: "BARLOWSEMICONDENSED-LIGHT";
    letter-spacing: 5px;
    line-height: 65px;
    padding-bottom: 25px;
}

.img-clinic {
    position: relative;
    margin-left: 0px;
    margin-bottom: 15px;
}

.img-clinic img {
    position: relative;
    z-index: 2;
}

.img-clinic:before {
    position: absolute;
    content: "";
    top: -25px;
    right: -25px;
    width: 100%;
    height: 100%;
    background: #25A8E0;
    /*border: 1px solid #F0E2D4;*/
    z-index: 1;
    border-radius: 10px;
}

@media (max-width: 991px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 15px;
    }
}

@media (max-width: 900px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 15px;
    }
}

@media (max-width: 850px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 15px;
    }
}

@media (max-width: 800px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 15px;
    }
}

@media (max-width: 750px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 35px;
    }
}

@media (max-width: 700px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 35px;
    }
}

@media (max-width: 650px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 35px;
        margin-left: 0px;
    }
}

@media (max-width: 600px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 35px;
        margin-left: 0px;
    }
    .clinicTeks {
        font-size: 50px;
    }
    .clinicTeks-two {
        font-size: 27px;
        line-height: 40px;
    }
}

@media (max-width: 550px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 35px;
        margin-left: 0px;
    }
    .clinicTeks {
        font-size: 50px;
    }
    .clinicTeks-two {
        font-size: 27px;
        line-height: 40px;
    }
}

@media (max-width: 500px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 35px;
        margin-left: 0px;
    }
    .clinicTeks {
        font-size: 50px;
    }
    .clinicTeks-two {
        font-size: 27px;
        line-height: 40px;
    }
}

@media (max-width: 450px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 35px;
        margin-left: 0px;
    }
    .clinicTeks {
        font-size: 50px;
    }
    .clinicTeks-two {
        font-size: 27px;
        line-height: 40px;
    }
}

@media (max-width: 400px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 35px;
        margin-left: 0px;
    }
    .clinicTeks {
        font-size: 50px;
    }
    .clinicTeks-two {
        font-size: 27px;
        line-height: 35px;
    }
}

@media (max-width: 375px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 35px;
        margin-left: 0px;
    }
    .clinicTeks {
        font-size: 50px;
    }
    .clinicTeks-two {
        font-size: 27px;
        line-height: 35px;
    }
}

@media (max-width: 365px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 35px;
        margin-left: 0px;
    }
    .clinicTeks {
        font-size: 50px;
    }
    .clinicTeks-two {
        font-size: 27px;
        line-height: 35px;
    }
}

@media (max-width: 320px) {
    .img-clinic:before {
        left: -15px;
    }
    .container.arts .img-clinic {
        margin-bottom: 35px;
        margin-left: 0px;
    }
    .clinicTeks {
        font-size: 50px;
    }
    .clinicTeks-two {
        font-size: 27px;
        line-height: 35px;
    }
}
/*end-clinic*/

/*star-container.arts*/
.container.arts {
    padding-top: 25px;
    /*padding-bottom: 25px;*/
    padding-bottom: 0px;
}

.container.arts .titles {
    color: #404040;
    font-size: 26px;
    font-family: "Poppins-Light";
    /*width: 93%;*/
    width: 100%;
    padding-top: 32px;
    padding-bottom: 20px;
    padding-left: 35px;
    line-height: 42px;
}

.container.arts .readmore {
    color: #393939;
    font-size: 20px;
    font-family: "Poppins-Light";
    line-height: 32px;
}

@media (max-width: 1124px) {
    .container.arts .titles {
        line-height: 30px;
        font-size: 20px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 30px;
        font-size: 17px;
    }
}

@media (max-width: 991px) {
    .container.arts .titles {
        font-size: 16px;
        line-height: 27px;
        padding-left: 0px;
        padding-top: 15px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 27px;
        font-size: 19px;
    }
    .btns {
        padding-bottom: 40px;
    }
}

@media (max-width: 900px) {
    .container.arts .titles {
        font-size: 16px;
        line-height: 27px;
        padding-left: 0px;
        padding-top: 15px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 27px;
        font-size: 19px;
    }
    .btns {
        padding-bottom: 40px;
    }
}

@media (max-width: 850px) {
    .container.arts .titles {
        font-size: 16px;
        line-height: 27px;
        padding-left: 0px;
        padding-top: 15px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 26px;
        font-size: 18px;
    }
    .btns {
        padding-bottom: 40px;
    }
}

@media (max-width: 800px) {
    .container.arts .titles {
        font-size: 16px;
        line-height: 27px;
        padding-left: 0px;
        padding-top: 15px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 25px;
        font-size: 17px;
    }
    .btns {
        padding-bottom: 37px;
    }
}

@media (max-width: 767px) {
    .container.arts .titles {
        font-size: 24px;
        line-height: 30px;
        padding-left: 0px;
        padding-top: 5px;
    }
}

@media (max-width: 750px) {
    .container.arts .titles {
        font-size: 24px;
        line-height: 30px;
        padding-top: 5px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 25px;
        font-size: 17px;
    }
    .btns {
        padding-bottom: 37px;
    }
}

@media (max-width: 700px) {
    .container.arts .titles {
        font-size: 24px;
        line-height: 30px;
        padding-top: 5px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 24px;
        font-size: 16px;
    }
    .btns {
        padding-bottom: 35px;
    }
}

@media (max-width: 650px) {
    .container.arts .titles {
        font-size: 24px;
        line-height: 30px;
        padding-top: 5px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 24px;
        font-size: 16px;
    }
    .btns {
        padding-bottom: 35px;
    }
}

@media (max-width: 600px) {
    .container.arts .titles {
        font-size: 23px;
        line-height: 29px;
        padding-top: 5px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 23px;
        font-size: 15px;
    }
    .btns {
        padding-bottom: 35px;
    }
}

@media (max-width: 550px) {
    .container.arts .titles {
        font-size: 23px;
        line-height: 29px;
        padding-top: 5px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 23px;
        font-size: 15px;
    }
    .btns {
        padding-bottom: 30px;
    }
}

@media (max-width: 500px) {
    .container.arts .titles {
        font-size: 23px;
        line-height: 29px;
        padding-top: 5px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 23px;
        font-size: 15px;
    }
    .btns {
        padding-bottom: 30px;
    }
}

@media (max-width: 450px) {
    .container.arts .titles {
        font-size: 23px;
        line-height: 29px;
        padding-top: 5px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 22px;
        font-size: 15px;
    }
    .btns {
        padding-bottom: 30px;
    }
}

@media (max-width: 400px) {
    .container.arts .titles {
        font-size: 22px;
        line-height: 27px;
        padding-top: 5px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 21px;
    }
    .btns {
        padding-bottom: 20px;
    }
}

@media (max-width: 375px) {
    .container.arts .titles {
        font-size: 22px;
        line-height: 27px;
        padding-top: 5px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 21px;
    }
    .btns {
        padding-bottom: 20px;
    }
}

@media (max-width: 365px) {
    .container.arts .titles {
        font-size: 22px;
        line-height: 27px;
        padding-top: 5px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 21px;
    }
    .btns {
        padding-bottom: 20px;
    }
}

@media (max-width: 320px) {
    .container.arts .titles {
        font-size: 22px;
        line-height: 27px;
        padding-top: 5px;
    }
    .container.arts .readmore {
        padding-bottom: 0px;
        line-height: 21px;
    }
    .btns {
        padding-bottom: 20px;
    }
}
/*end-container.arts*/

/*star-video*/
#video {
    padding-top: 70px;
    padding-bottom: 70px;
}

.wrap-video {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -15px;
    margin-top: 40px;
}

.item-video {
    display: block;
    padding: 0 15px;
    width: calc(100% / 2);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    position: relative;
}

.item-video:hover img {
    /*opacity: .8;*/
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.item-video a {
    display: block;
    padding-bottom: 20px;
    /*box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);*/
    /*background: #F8F8F8;*/
}

.item-video img {
    background: #F8F8F8;
}

/*.img-item-video:first-child:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    background-image: linear-gradient(to left, #37D54A, #25A8E0, #2E2C70);
    top: 0;
    bottom: 0px;
    left: 0;
    z-index: 9999999;
}*/

.img-item-video {
    position: relative;
    background: #F8F8F8;
}

.img-item-video .imgArt {
    display: block;
    width: 100%;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    /*border-bottom-left-radius: 50px;*/
}

.content-item-video {
    padding: 15px 25px;
    padding-bottom: 25px;
    background: #ffffff;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 1px solid #D8D8D8;
    /*min-height: 230px;*/
}

.content-item-video h3 {
    margin-bottom: 10px;
    font-family: "Poppins-Medium";
    font-size: 18px;
    color: #383838;
    line-height: 28px;
    width: 91%;
}


@media (max-width: 800px) {}

@media (max-width: 700px) {}

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

@media (max-width: 500px) {}

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

@media (max-width: 375px) {}

@media (max-width: 365px) {}

@media (max-width: 320px) {}

@media only screen and (max-width: 991px) {
    #video {
        padding-bottom: 40px;
        padding-top: 40px;
    }
    .content-item-video h3 {
        font-size: 0.875rem;
        line-height: 22px;
    }
    .item-video {
        width: calc(100% / 2);
    }
}

@media (max-width: 800px) {
    .item-video {
        /*width: 100%;*/
        width: calc(100% / 1);
    }
}

@media (max-width: 750px) {
    .item-video {
        /*width: 100%;*/
        width: calc(100% / 1);
    }
}

@media (max-width: 700px) {
    .item-video {
        /*width: 100%;*/
        width: calc(100% / 1);
    }
}

@media (max-width: 600px) {
    .item-video {
        /*width: 100%;*/
        width: calc(100% / 1);
    }
}

@media (max-width: 1125px) {}

@media (max-width: 1024px) {}

@media (max-width: 991px) {}

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

@media (max-width: 850px) {}

@media (max-width: 800px) {}

@media (max-width: 750px) {}

@media (max-width: 700px) {}

@media (max-width: 650px) {}

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

@media (max-width: 550px) {}

@media (max-width: 500px) {}

@media (max-width: 450px) {}

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

@media (max-width: 375px) {}

@media (max-width: 365px) {}

@media (max-width: 320px) {}
/*end-video*/

/*star-videoHome*/
#videoHome {
    padding-top: 10%;
    padding-bottom: 10%;
}

#videoHome .videoHomeTeks {
    color: #1A6D9D;
    font-size: 30px;
    line-height: 35px;
    font-family: "Raleway-Bold";
    text-align: center;
}

.wrap-videoHome {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -15px;
    margin-top: 40px;
}

.item-videoHome {
    display: block;
    padding: 0 15px;
    width: calc(100% / 3);
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    position: relative;
}

.item-videoHome:hover img {
    /*opacity: .8;*/
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.item-videoHome a {
    display: block;
    padding-bottom: 20px;
    /*box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);*/
    /*background: #F8F8F8;*/
}

.item-videoHome img {
    background: #F8F8F8;
}

/*.img-item-videoHome:first-child:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    background-image: linear-gradient(to left, #37D54A, #25A8E0, #2E2C70);
    top: 0;
    bottom: 0px;
    left: 0;
    z-index: 9999999;
}*/

.img-item-videoHome {
    position: relative;
    background: #F8F8F8;
}

.img-item-videoHome .imgArt {
    display: block;
    width: 100%;
    border-top-right-radius: 50px;
    /*border-top-left-radius: 50px;*/
    border-bottom-left-radius: 50px;
}

.content-item-videoHome {
    padding: 15px 25px;
    padding-bottom: 25px;
    background: #ffffff;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    border: 1px solid #D8D8D8;
    /*min-height: 230px;*/
}

.content-item-videoHome h3 {
    margin-bottom: 10px;
    font-family: "Poppins-Medium";
    font-size: 18px;
    color: #383838;
    line-height: 28px;
    width: 91%;
}

@media (max-width: 991px) {
    #videoHome {
        padding-top: 10%;
        padding-bottom: 10%;
    }
}

@media only screen and (max-width: 991px) {
    .content-item-videoHome h3 {
        font-size: 0.875rem;
        line-height: 22px;
    }
    .item-videoHome {
        width: calc(100% / 2);
    }
}

@media (max-width: 800px) {
    .item-videoHome {
        /*width: 100%;*/
        width: calc(100% / 1);
    }
    #videoHome {
        padding-top: 12%;
        padding-bottom: 10%;
    }
}

@media (max-width: 750px) {
    .item-videoHome {
        /*width: 100%;*/
        width: calc(100% / 1);
    }
    #videoHome {
        padding-top: 12%;
        padding-bottom: 10%;
    }
}

@media (max-width: 700px) {
    .item-videoHome {
        /*width: 100%;*/
        width: calc(100% / 1);
    }
    #videoHome {
        padding-top: 90px;
        padding-bottom: 90px;
    }
}

@media (max-width: 600px) {
    .item-videoHome {
        /*width: 100%;*/
        width: calc(100% / 1);
    }
    #videoHome {
        padding-top: 90px;
        padding-bottom: 90px;
    }
}

@media (max-width: 1125px) {}

@media (max-width: 1024px) {}
@media (max-width: 991px) {}
@media (max-width: 400px) {}

@media (max-width: 375px) {}

@media (max-width: 365px) {}

@media (max-width: 320px) {}
/*end-videoHome*/

/*star-btnVideoHome*/
.btnVideoHome-primary {
    color: #1A6D9D;
    background-color: transparent;
    border-color: #1A6D9D;
}

.btnVideoHome {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid #1A6D9D;
    padding: 13px 25px 13px 25px;
    font-size: 13px;
    line-height: 30px;
    font-family: "Poppins-Medium";
    text-transform: uppercase;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    cursor: pointer;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btnVideoHome img {
    padding-left: 10px;
}
/*end-btnVideoHome*/

/*star-home-keunggulan*/
#home-keunggulan {
    /*padding-top: 10%;*/
    padding-top: 75px;
    /*padding-bottom: 5%;*/
    padding-bottom: 0px;
}

@media (max-width: 991px) {
    #home-keunggulan {}
}

@media (max-width: 750px) {
    #home-keunggulan {}
}

@media (max-width: 400px) {
    #home-keunggulan {}
}

@media (max-width: 375px) {}

@media (max-width: 365px) {}

@media (max-width: 320px) {}

.text-home-keunggulan {
    font-size: 30px;
    color: #5585A5;
    font-family: "Roboto-Bold";
    text-align: center;
    padding-bottom: 10px;
}

.hrow hr {
    margin-top: 10px;
    margin-bottom: 20px;
    width: 10%;
    border: 0;
    border-top: 4px solid #5585A5;
}

.box-home-keunggulan {
    margin-right: -15px;
    margin-left: -15px;
    font-size: 0px;
}

.item-home-keunggulan {
    margin-bottom: 30px;
    display: inline-block;
    padding-right: 15px;
    padding-left: 15px;
    width: 33.33333%;
    font-size: 14px;
    vertical-align: top;
}

.item-home-keunggulan .image-home-keunggulan {
    display: block;
    text-align: center;
}

.item-home-keunggulan .image-home-keunggulan img {
    max-width: 100%;
    height: auto;
    /*height: fit-content;*/
    /*height: 500px;*/
}

.i-home-keunggulan {
    background: #ffffff;
    padding-top: 10px;
}

.konten-item-home-keunggulan {
    padding: 20px;
}

.judul-item-home-keunggulan {
    margin-bottom: 5px;
    /*height: 35px;*/
    margin-top: 15px;
    font-family: "Raleway-Bold";
    font-size: 20px;
    color: #1A6D9D;
    padding-left: 25px;
    padding-right: 25px;
    text-align: center;
    line-height: 24px;
}

.desc-item-home-keunggulan {
    /*height: 35px;*/
    margin-bottom: 20px;
    margin-top: 15px;
    font-family: "Poppins-Regular";
    font-size: 15px;
    color: #464849;
    padding-left: 10px;
    padding-right: 10px;
    text-align: justify;
    line-height: 26px;
}

@media only screen and (max-width: 991px) {
    .judul-item-home-keunggulan {
        margin-bottom: 5px;
    }
}

@media only screen and (max-width: 767px) {
    .item-home-keunggulan {
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        width: 50%;
        font-size: 14px;
        vertical-align: top;
    }
}

@media only screen and (max-width: 480px) {
    .item-home-keunggulan {
        display: inline-block;
        padding-right: 15px;
        padding-left: 15px;
        width: 100%;
        font-size: 14px;
        vertical-align: top;
    }
}
/*end-home-keunggulan*/

/*star-promo*/
.mt-30{
    margin-top: 50px;
}
.page-promo {
    margin-top: 70px;
    margin-bottom: 70px;
    overflow: hidden;
}

.title-promo h1 {
    color: #212529;
    font-size: 35px;
    font-family: "Poppins-Regular";
}

.subs-promo {
    color: #404040;
    font-size: 19px;
}

.konten-promo {
    margin: 0px 0px 15px 0px;
}
.card-promo {
    background-color: #F5F5F6;
    border-color: #F5F5F6;
    -webkit-border-top-left-radius: 30px;
    -webkit-border-bottom-right-radius: 30px;
    -moz-border-radius-topleft: 30px;
    -moz-border-radius-bottomright: 30px;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    padding: 20px 25px 30px 20px;
    margin: 0px 15px;
    /*height: 150px;*/
    height: 190px;
}

.card-promo .img-promo {
    padding: 8px 0px;
}

.card-promo .img-promo img {
    /*width: 150px;*/
    width: 100%;
}

.promo-store-title {
    /*padding: 10px 0px;*/
    padding: 25px 0px;
}

.promo-store-title h2 {
    color: #212529;
    font-family: "Poppins-Regular";
    font-size: 21px;
    line-height: 27px;
}

.promo-button {
    position: absolute;
    left: 33.3%;
    bottom: -12px;
}

.promo-button a:hover, .promo-button a:focus {
    color: #ffffff;
}

.btn-promo-card {
    background-color: #3C4058;
    border-color: #3C4058;
    padding: 10px 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none !important;
    -webkit-border-top-left-radius: 14px;
    -webkit-border-bottom-right-radius: 14px;
    -moz-border-radius-topleft: 14px;
    -moz-border-radius-bottomright: 14px;
    border-top-left-radius: 14px;
    border-bottom-right-radius: 14px;
    font-family: "Poppins-Regular";
}

i.fa.fa-shopping-cart {
    width: 20px;
    height: 20px;
    margin: 0px 0px;
    /*margin: -5px 5px;*/
}

@media (max-width: 1200px) {
    .card-promo .promo-store-title {
        padding: 15px 0px 15px 0px;
        /*padding: 0px 0px 15px 0px;*/
    }
    .card-promo .promo-store-title h2 {
        /*font-size: 19px;*/
        font-size: 16px;
        line-height: 22px;
    }
    .card-promo .img-promo img {
        width: 160px;
    }
}

@media (max-width: 1024px) {
    .card-promo .promo-store-title {
        padding: 15px 0px 15px 0px;
        /*padding: 0px 0px 15px 0px;*/
    }
    .card-promo .promo-store-title h2 {
        /*font-size: 19px;*/
        font-size: 16px;
        line-height: 23px;
    }
    .card-promo .img-promo img {
        width: 160px;
    }
}

@media (max-width: 991px) {
    .card-promo {
        /*height: 170px;*/
        height: 150px;
        width: 100%;
    }
    .card-promo .promo-store-title {
        padding: 0px 0px 15px 0px;
    }
    .card-promo .promo-store-title h2 {
        /*font-size: 19px;*/
        font-size: 12px;
        padding-top: 10px;
        line-height: 18px;
    }
    .card-promo .img-promo img {
        /*width: 160px;*/
        width: 130px;
    }
}

@media (max-width: 900px) {
    .card-promo {
        /*height: 170px;*/
        height: 160px;
    }
    .card-promo .promo-store-title {
        /*padding: 15px 0px 15px 0px;*/
        padding: 0px 0px 15px 0px;
    }
    .card-promo .promo-store-title h2 {
        /*font-size: 19px;*/
        font-size: 11px;
    }
    .card-promo .img-promo img {
        /*width: 160px;*/
        width: 145px;
    }
}

@media (max-width: 850px) {
    .card-promo {
        /*height: 170px;*/
        height: 160px;
    }
    .card-promo .promo-store-title {
        /*padding: 15px 0px 15px 0px;*/
        padding: 0px 0px 15px 0px;
    }
    .card-promo .promo-store-title h2 {
        /*font-size: 19px;*/
        font-size: 11px;
    }
    .card-promo .img-promo img {
        /*width: 160px;*/
        width: 145px;
    }
}

@media (max-width: 800px) {
    .card-promo {
        /*height: 170px;*/
        height: 160px;
    }
    .card-promo .promo-store-title {
        /*padding: 15px 0px 15px 0px;*/
        padding: 0px 0px 15px 0px;
    }
    .card-promo .promo-store-title h2 {
        /*font-size: 19px;*/
        font-size: 11px;
    }
    .card-promo .img-promo img {
        /*width: 160px;*/
        width: 145px;
    }
}

@media (max-width: 767px) {
    .card-promo {
        /*height: 145px;*/
        height: 155px;
    }
    .card-promo .promo-store-title {
        /*padding: 15px 0px 15px 0px;*/
        padding: 0px 0px 15px 0px;
    }
    .card-promo .promo-store-title h2 {
        font-size: 19px;
        line-height: 25px;
    }
    .card-promo .img-promo img {
        width: 160px;
    }
}

@media (max-width: 750px) {
    .card-promo {
        /*height: 145px;*/
        height: 155px;
    }
    .card-promo .promo-store-title {
        /*padding: 15px 0px 15px 0px;*/
        padding: 0px 0px 15px 0px;
    }
    .card-promo .promo-store-title h2 {
        font-size: 19px;
        line-height: 25px;
    }
    .card-promo .img-promo img {
        width: 160px;
    }
}

@media (max-width: 700px) {
    .card-promo {
        /*height: 145px;*/
        height: 155px;
    }
    .card-promo .promo-store-title {
        /*padding: 15px 0px 15px 0px;*/
        padding: 0 0 15px 0;
    }
    .card-promo .promo-store-title h2 {
        font-size: 19px;
        line-height: 25px;
    }
    .card-promo .img-promo img {
        width: 160px;
    }
}

@media (max-width: 650px) {
    .card-promo {
        /*height: 145px;*/
        height: 155px;
    }
    .card-promo .promo-store-title {
        /*padding: 15px 0px 15px 0px;*/
        padding: 0 0 15px 0;
    }
    .card-promo .promo-store-title h2 {
        font-size: 19px;
        line-height: 25px;
    }
    .card-promo .img-promo img {
        width: 160px;
    }
}

@media (max-width: 600px) {
    .card-promo {
        /*height: 145px;*/
        height: 155px;
    }
    .card-promo .promo-store-title {
        /*padding: 15px 0px 15px 0px;*/
        padding: 0 0 15px 0;
    }
    .card-promo .promo-store-title h2 {
        font-size: 19px;
        line-height: 25px;
    }
    .card-promo .img-promo img {
        width: 160px;
    }
}

@media (max-width: 550px) {
    .card-promo {
        /*height: 145px;*/
        height: 155px;
    }
    .card-promo .promo-store-title {
        /*padding: 15px 0px 15px 0px;*/
        padding: 0 0 15px 0;
    }
    .card-promo .promo-store-title h2 {
        font-size: 19px;
        line-height: 25px;
    }
    .card-promo .img-promo img {
        width: 150px;
    }
}

@media (max-width: 500px) {
    .card-promo {
        /*height: 145px;*/
        height: 155px;
    }
    .card-promo .promo-store-title {
        /*padding: 15px 0px 15px 0px;*/
        padding: 0 0 15px 0;
    }
    .card-promo .promo-store-title h2 {
        /*font-size: 19px;*/
        font-size: 17px;
        line-height: 23px;
    }
    .card-promo .img-promo img {
        width: 145px;
    }
}

@media (max-width: 450px) {
    .card-promo {
        /*height: 145px;*/
        height: 155px;
    }
    .card-promo .promo-store-title {
        padding: 10px 0px 10px 0px;
        padding: 0 0 15px 0;
    }
    .card-promo .promo-store-title h2 {
        /*font-size: 19px;*/
        font-size: 15px;
        line-height: 21px;
    }
    .card-promo .img-promo img {
        width: 145px;
    }
}

@media (max-width: 400px) {
    .card-promo {
        /*height: 190px;*/
        height: 250px;
    }
    .card-promo .promo-store-title {
        padding: 5px 5px 10px 5px;
    }
    .card-promo .promo-store-title h2 {
        font-size: 19px;
        line-height: 25px;
    }
    .card-promo .img-promo img {
        /*width: 175px;*/
        width: 195px;
    }
    i.fa.fa-shopping-cart {
        width: 10px;
        height: 10px;
        margin: -5px 5px;
    }
    .promo-button {
        left: 25%;
    }
}

@media (max-width: 375px) {
    .card-promo {
        /*height: 180px;*/
        height: 250px;
    }
    .card-promo .promo-store-title {
        padding: 5px 5px 10px 5px;
    }
    .card-promo .promo-store-title h2 {
        font-size: 19px;
        line-height: 25px;
    }
    .card-promo .img-promo img {
        /*width: 150px;*/
        width: 170px;
    }
    i.fa.fa-shopping-cart {
        width: 10px;
        height: 10px;
        margin: -5px 5px;
    }
    .promo-button {
        left: 25%;
    }
}

@media (max-width: 365px) {
    .card-promo {
        /*height: 180px;*/
        height: 245px;
        margin: 0px 0px;
    }
    .card-promo .promo-store-title {
        padding: 5px 5px 10px 5px;
    }
    .card-promo .promo-store-title h2 {
        font-size: 19px;
        line-height: 25px;
    }
    .card-promo .img-promo img {
        /*width: 150px;*/
        width: 170px;
    }
    i.fa.fa-shopping-cart {
        width: 10px;
        height: 10px;
        margin: -5px 5px;
    }
    .promo-button {
        left: 25%;
    }
}

@media (max-width: 320px) {
    .card-promo {
        /*height: 180px;*/
        height: 235px;
        margin: 0px 0px;
    }
    .card-promo .promo-store-title {
        padding: 5px 5px 10px 5px;
    }
    .card-promo .promo-store-title h2 {
        font-size: 19px;
        line-height: 25px;
    }
    .card-promo .img-promo img {
        width: 150px;
    }
    .promo-button {
        left: 25%;
    }
    i.fa.fa-shopping-cart {
        width: 10px;
        height: 10px;
        margin: -5px 5px;
    }
}

@media (max-width: 280px) {
    .card-promo {
        /*height: 200px;*/
        height: 240px;
        margin: 0px 0px;
    }
    .card-promo .promo-store-title {
        padding: 10px 0px;
    }
    .card-promo .promo-store-title h2 {
        font-size: 19px;
        line-height: 25px;
    }
    .card-promo .img-promo img {
        width: 150px;
    }
    .promo-button {
        left: 25%;
    }
    i.fa.fa-shopping-cart {
        width: 10px;
        height: 10px;
        margin: -5px 5px;
    }
}

@media (min-width: 320px) and (max-width: 480px) {
    .card-promo {
        margin: 20px 0px 30px 0px;
    }
}

@media (min-width: 320px) and (max-width: 480px) {
    .promo-button {
        bottom: 20px;
    }
}
/*end-promo*/

/*star-alertPromo*/
.alertPromo {
    font-size: 25px;
    position: relative;
    padding: 10px 15px;
    margin-top: 45px;
    margin-bottom: 15px;
    border: 0px solid transparent;
    border-radius: 2px;
    text-align: center;
    font-family: "Raleway-Light";
    text-transform: uppercase;
}

.alertPromo.alert-danger {
    color: #000;
    background-color: #f5f5f5;
    border-color: transparent;
}
/*end-alertPromo*/

/*star-arthome*/
#arthome {
    padding-top: 100px;
    padding-bottom: 25px;
    position: relative;
}

#arthome:before {
    position: absolute;
    content: "";
    top: 40px;
    right: 0px;
    width: 50%;
    height: 100%;
    /*border: 10px solid #cb9b2c;*/
    background: #004696;
    border-top-left-radius: 50px;
    z-index: 1;
}

#arthome .terkiniTeks {
    color: #1A6D9D;
    font-size: 30px;
    line-height: 35px;
    font-family: "Raleway-Bold";
}

.wrap-arthome {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /*margin: 0 -15px;*/
    margin: 0 0px 0 0px;
    margin-top: 40px;
}

.item-arthome {
    display: block;
    /*padding: 0 15px;*/
    padding: 0 15px 0 0px;
    /*width: calc(100% / 3);*/
    width: 100%;
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
    position: relative;
}

.item-arthome:hover img {
    /*opacity: .8;*/
    transition: 0.2s;
    -o-transition: 0.2s;
    -moz-transition: 0.2s;
    -webkit-transition: 0.2s;
}

.item-arthome a {
    display: block;
    padding-bottom: 20px;
    /*box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);*/
    /*background: #F8F8F8;*/
}

.item-arthome img {
    background: #F8F8F8;
}

#arthome .owl-carousel .owl-item img {
    transform-style: unset;
    -webkit-transform-style: unset;
}

/*.img-item-arthome:first-child:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    background-image: linear-gradient(to left, #37D54A, #25A8E0, #2E2C70);
    top: 0;
    bottom: 0px;
    left: 0;
    z-index: 9999999;
}*/

.img-item-arthome {
    position: relative;
    background: #F8F8F8;
}

.img-item-arthome .imgArt {
    display: block;
    width: 100%;
    border-top-right-radius: 50px;
    /*border-bottom-left-radius: 50px;*/
}

.img-item-arthome span {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 10px 0;
    padding-left: 25px;
    width: 90%;
    font-size: 0.8125rem;
    color: #1d4286;
    background: #fff;
}

.content-item-arthome {
    padding: 15px 25px;
    padding-bottom: 25px;
    background: #F8F8F8;
    border-bottom-left-radius: 50px;
    min-height: 230px;
}

.content-item-arthome .arthome-text {
    color: #404040;
    font-size: 12px;
    font-family: "Poppins-Regular";
    line-height: 28px;
    padding-bottom: 10px;
}

.content-item-arthome h3 {
    margin-bottom: 10px;
    font-family: "Poppins-Medium";
    font-size: 18px;
    color: #585858;
    line-height: 28px;
}

.content-item-arthome p {
    margin-bottom: 20px;
    font-size: 17px;
    line-height: 24px;
    color: #414241;
    font-family: "Raleway-Regular";
}

#arthome .container .owl-carousel .owl-next {
    position: absolute;
    top: -10%;
    right: 0px;
    transform: translate(-50%, -50%);
    max-width: 50%;
    padding-left: 8px;
    padding-right: 8px;
}

#arthome .container .owl-carousel .owl-prev {
    position: absolute;
    top: -10%;
    right: 35px;
    transform: translate(-50%, -50%);
    max-width: 50%;
    padding-left: 8px;
    padding-right: 8px;
}

@media (max-width: 1200px) {}

@media only screen and (max-width: 991px) {
    #arthome {
        padding-bottom: 40px;
    }
    .content-item-arthome h3 {
        font-size: 0.875rem;
        line-height: 22px;
    }
    .content-item-arthome p {
        line-height: 22px;
    }
    .item-arthome {
        width: 100%;
        /*width: calc(100% / 2);*/
    }
}

@media (max-width: 991px) {
    .content-item-arthome {
        min-height: 175px;
    }
}

@media (max-width: 850px) {
    .content-item-arthome {
        min-height: 175px;
    }
}

@media (max-width: 800px) {
    .item-arthome {
        width: 100%;
        /*width: calc(100% / 1);*/
    }
    .content-item-arthome {
        min-height: 175px;
    }
}

@media (max-width: 750px) {
    .item-arthome {
        width: 100%;
        /*width: calc(100% / 1);*/
    }
    .content-item-arthome {
        min-height: 175px;
    }
}

@media (max-width: 700px) {
    .item-arthome {
        width: 100%;
        /*width: calc(100% / 1);*/
    }
    .content-item-arthome {
        min-height: 160px;
    }
}

@media (max-width: 600px) {
    .item-arthome {
        width: 100%;
        /*width: calc(100% / 1);*/
    }
    .content-item-arthome {
        min-height: 160px;
    }
}

@media (max-width: 500px) {
    .content-item-arthome {
        min-height: 160px;
    }
    #arthome .terkiniTeks {
        font-size: 25px;
        line-height: 30px;
    }
    #arthome:before {
        z-index: 0;
    }
}

@media (max-width: 400px) {
    .content-item-arthome {
        min-height: 160px;
    }
    #arthome {
        padding-bottom: 15px;
    }
    #arthome .container .owl-carousel .owl-next {
        top: -12%;
    }
    #arthome .container .owl-carousel .owl-prev {
        top: -12%;
    }
}

@media (max-width: 375px) {
    #arthome .terkiniTeks {
        font-size: 23px;
        line-height: 27px;
    }
}

@media (max-width: 365px) {}

@media (max-width: 320px) {}
/*end-arthome*/

/*star-bxslider*/
#slider {
    position: relative;
    width: 100%;
    /*height: 100vh;*/
    height: 120vh;
    -webkit-height: 120vh;
}

.bxslider, .bxslider li {
    height: 100% !important;
}

.bxslider li {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    cursor: pointer;
}

@media (max-width: 991px) {
    #slider {
        height: 460px;
    }
}

@media (max-width: 900px) {
    #slider {
        height: 460px;
    }
}

@media (max-width: 850px) {
    #slider {
        height: 460px;
    }
}

@media (max-width: 800px) {
    #slider {
        height: 460px;
    }
}

@media (max-width: 750px) {
    #slider {
        height: 460px;
    }
}

@media (max-width: 700px) {
    #slider {
        height: 430px;
    }
}

@media (max-width: 650px) {
    #slider {
        height: 400px;
    }
}

@media (max-width: 600px) {
    #slider {
        height: 375px;
    }
}

@media (max-width: 550px) {
    #slider {
        height: 320px;
    }
}

@media (max-width: 500px) {
    #slider {
        height: 320px;
    }
}

@media (max-width: 450px) {
    #slider {
        height: 320px;
    }
}

@media (max-width: 400px) {
    #slider {
        height: 285px;
    }
}

@media (max-width: 375px) {
    #slider {
        height: 260px;
    }
}

@media (max-width: 365px) {
    #slider {
        height: 250px;
    }
}

@media (max-width: 320px) {
    #slider {
        height: 240px;
    }
}
/*end-bxslider*/

/*star-scrolltop*/
@media (min-width: 1200px) {
    .scrolltop {
        position: fixed;
        cursor: pointer;
        z-index: 999999;
        /* right: 220px; */
        right: 0px;
        bottom: 0px;
        color: #fff;
        background: transparent;
        /*padding: 8px 30px;*/
        padding: 18px 18px 18px 20px;
        border-radius: 35px 0px 0px 35px;
    }
}

.scrolltop {
    position: fixed;
    cursor: pointer;
    z-index: 999999;
    right: 0px;
    bottom: 10px;
    color: #fff;
    background: transparent;
    border-radius: 35px 0px 0px 35px;
    right: 0px;
    padding: 18px 18px 18px 20px;
}
/*end-scrolltop*/