/*!
Theme Name: petrosains
Theme URI: https://www.petrosains.com.my/
Author: Petrosains
Theme URI: https://www.petrosains.com.my/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: petrosains
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# 1. Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');

/*--------------------------------------------------------------
# 1. General
--------------------------------------------------------------*/

body{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #6479ad;
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

body.no-scroll{
    position: fixed;
}

h1{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 54px;
    color: #FFFFFF;
}

h2{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 44px;
    color: #00a78d;
}

h3{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: #00a78d;
}

h4{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1.8;
}

p{
    line-height: 1.8;
}

.mb-6{
    margin-bottom: 5rem;
}

.mb-10{
    margin-bottom: 10rem;
}

a,
a:hover{
    color: #6479ad;
}

.container-fluid{
    padding: 0px 50px;
}

.container-fluid-max{
    padding: 0;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.owl-prev{
    width: 65px;
    height: 50px;
    border: 1px solid #6479ad !important;
    background: #FFFFFF;
}

.owl-next{
    margin-left: -1px;
    width: 65px;
    height: 50px;
    border: 1px solid #6479ad !important;
    background: #FFFFFF;
}

.owl-prev > span,
.owl-next > span{
    color: #6479ad;
}

.owl-dots{
    padding: 1rem 0;
    text-align: center;
}

.owl-dot{
    background: 0 0;
    color: inherit;
    border: none;
    padding: 0 !important;
    font: inherit;
}

.owl-dot span{
    width: 10px;
    height: 10px;
    background-color: transparent;
    border: 1px solid #6479ad;
    display: block;
    border-radius: 5px;
    margin-right: 15px;
}

.owl-dot.active span{
    background-color: #00a78d;
}

section{
    padding: 2rem 0;
}

.bg-blue{
    background-color: #f6f8fd;
}

.icon{
    top: 1px;
    position: relative;
}

.img-fluid{
    width: 100%;
}

#content{
    margin-top: -120px;
}

body #blocker:after{
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
}

body.no-scroll #blocker:after{
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

svg{
    overflow: visible;
}

.disabled{
    pointer-events: none;
}

.button{
    background-color: #00a78d;
    padding: 15px 25px;
    color: #FFFFFF;
    border-radius: 5px;
    display: inline-block;
    min-width: 250px;
    text-align: center;
}

.button:hover{
    text-decoration: none;
    color: #FFFFFF;
}

/*--------------------------------------------------------------
# 2. Blocks
--------------------------------------------------------------*/

/* Title */
.title .title-tag p{
    background-color: #00a78d;
    color: #FFFFFF;
    display: inline-block;
    padding: 1px 10px;
    border-radius: 5px;
}

.title .title-tag p > sup{
    top: -.1rem;
}

/* MAINPAGE: Image Carousel with CTA */
.vertical-carousel a{
    display: block;
    padding: 0.5rem 0;
}

.vertical-carousel .owl-nav{
    position: absolute;
    top: 47%;
    z-index: 1;
    width: 100%;
    height: 0;
}

.vertical-carousel .owl-nav .owl-prev{
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    transform: translateY(-50%);
    background-color: #FFFFFF !important;
    border: 0 !important;
}

.vertical-carousel .owl-nav .owl-next{
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    transform: translateY(-50%);
    background-color: #FFFFFF !important;
    border: 0 !important;
}

.vertical-carousel .icon{
    padding-left: 20px;
}


/* Cards */
.card{
    border-radius: 0;
    border: 0;
}

.card-img-top{
    border-radius: 0;
}

.card-title-tag{
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
}

.card-title-tag p{
    background-color: #00a78d;
    color: #FFFFFF;
    display: inline-block;
    padding: 1px 10px;
    border-radius: 5px;
}

.card-title-tag p > sup{
    top: -.1rem;
}

.card a{
    display: block;
}

.card .icon{
    padding-left: 20px;
}

.card .sub-image{
    width: 200px;
    height: 100px;
}

/* Category Carousel */
.category-carousel{
    overflow-x: hidden;
}

.category-carousel .owl-carousel-text-container{
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    transform: translateY(-50%);
    padding: 4rem;
}

.category-carousel .owl-carousel-text{
    background-color: #FFFFFF;
    padding: 4rem;
    -webkit-box-shadow: -8px 0px 16px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: -8px 0px 16px 0px rgba(0, 0, 0, 0.1);
    box-shadow: -8px 0px 16px 0px rgba(0, 0, 0, 0.1);
}

.category-carousel .owl-dots{
    display: none;
}

/* Membership */
.membership h2{
    color: #FFFFFF;
}

.membership a{
    display: block;
    color: #FFFFFF;
}

.membership p{
    color: #FFFFFF;
}

.membership .membership-text-container{
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    transform: translateY(-50%);
}

.membership .membership-text{
    background-color: #00a78d;
    padding: 4rem;
}


.membership .membership-title-tag p{
    background-color: #FFFFFF;
    color: #00a78d;
    display: inline-block;
    padding: 1px 10px;
    border-radius: 5px;
}

.membership .membership-title-tag p > sup{
    top: -.1rem;
}

.membership .icon{
    padding-left: 20px;
}

/* Testimonials */
.testimonials h4{
    color: #00a78d;
}

/* Bullet Cards */
.bullet-cards h2{
    margin-bottom: 5rem !important;
}

.bullet-cards .card{
    background: transparent;
    border: 0;
}

.bullet-cards .card-img-top{
    padding-left: 1.25rem;
}

.bullet-cards .img-svg{
    padding-left: 1.25rem;
    max-width: 125px;
}

/* Carousel */
.carousel .owl-carousel{
    position: relative;
}

.carousel .owl-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

.carousel .owl-nav > .owl-prev{
    background-color: #FFFFFF !important;
}

.carousel .owl-nav > .owl-next{
    background-color: #FFFFFF !important;
    position: absolute;
    right: 0;
}

/* Horizontal Carousel */
.horizontal-carousel{
    overflow-x: hidden;
}

.horizontal-carousel .owl-carousel-text-container{
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    transform: translateY(-50%);
    padding: 4rem;
}

.horizontal-carousel .owl-carousel-text{
    background-color: #FFFFFF;
    padding: 4rem;
    -webkit-box-shadow: -8px 0px 16px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: -8px 0px 16px 0px rgba(0, 0, 0, 0.1);
    box-shadow: -8px 0px 16px 0px rgba(0, 0, 0, 0.1);
}

.horizontal-carousel .title-tag{
    background-color: #00a78d;
    color: #FFFFFF;
    display: inline-block;
    padding: 1px 10px;
    border-radius: 5px;
}

.horizontal-carousel .title-tag p > sup{
    top: -.1rem;
}

.horizontal-carousel .owl-carousel-button{
    display: block;
}

.horizontal-carousel .owl-dots{
    display: none;
}

.horizontal-carousel .nav-right{
    float: right;
}

.horizontal-carousel .icon{
    padding-left: 20px;
}

/* Tab */
.tab .tab-container{
    border: 1px solid #ebebeb;
}

.tab .tab-title{
    background-color: #ededed;
    padding: 1.25rem;
}

.tab p{
    padding: 1.25rem;
}

/* Image */
.image-full-width{
    padding: 270px 0;
    width: 100%;
}

.image-partial-width{
    margin: 0 auto;
    display: block;
}

/* Accordion */
.accordion-tab .card{
    background-color: #f7f7f7;
    border-bottom: 1px solid #e2e2e2;
}

.accordion-tab .card-header{
    border-radius: 0;
    background-color: transparent;
    border: 0;
    padding: 0;
}

.accordion-tab .btn{
    color: #6479ad;
    padding: 1.25rem;
    width: 100%;
    text-align: left;
}

.accordion-tab .btn .icon{
    float: right;
}
.accordion-tab .btn[aria-expanded="false"] .icon {
    transform: rotateX(180deg);
}

.accordion-tab .card-body{
    padding: 1.25rem;
}

.accordion-tab .card-body p a{
    display: inline-block;
}

/* Google Map */
.google-map .text-container{
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 2;
    transform: translateY(-50%);
    padding: 4rem;
    max-width: 900px;
}

.google-map .text{
    background-color: #FFFFFF;
    padding: 4rem;
    -webkit-box-shadow: -8px 0px 16px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: -8px 0px 16px 0px rgba(0, 0, 0, 0.1);
    box-shadow: -8px 0px 16px 0px rgba(0, 0, 0, 0.1);
}

.google-map .text strong{
    min-width: 100px;
    display: inline-block;
}

.google-map .place-card{
    display: none !important;
}

.google-map .waze-icon{
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCI+PGc+PGc+PGc+PHBhdGggZD0iTTI4OCwxNkMxNjQuNDgsMTYsNjQsMTA5LjMxMiw2NC4xOTIsMjI2LjQzMmMxLjc2LDExLjU4NCwyLjg4LDQ1LjU2OC0xMi44LDYzLjc3NkM0My40MjQsMjk5LjQ4OCwzMS44NCwzMDQsMTYsMzA0ICAgIGMtOC44MzIsMC0xNiw3LjE2OC0xNiwxNmMwLDQ4LjM1Miw0MC4wOTYsODEuNDA4LDExOS4yNjQsOTguMjA4YzEuMTIsMC4yMjQsMi4yMDgsMC4zNTIsMy4zMjgsMC4zNTIgICAgYzcuMzkyLDAsMTQuMDE2LTUuMTUyLDE1LjYxNi0xMi42NzJjMS44MjQtOC42NC0zLjY4LTE3LjEyLTEyLjMyLTE4Ljk3NmMtNTIuMjU2LTExLjEwNC04Mi45MTItMjguNzY4LTkxLjQyNC01Mi41NzYgICAgYzE2Ljg2NC0zLjE2OCwzMC43Mi0xMC45NzYsNDEuMzEyLTIzLjM2QzEwNC4xNiwyNzcuNzYsOTYuMTkyLDIyNCw5NiwyMjRjMC05Ny4wNTYsODYuMTEyLTE3NiwxOTItMTc2czE5Miw3OC45NDQsMTkyLDE3NiAgICBjMCw2Ni4xMTItNDAuMDMyLDEyNi4xNzYtMTA0LjQ0OCwxNTYuNzM2Yy04LDMuNzc2LTExLjM5MiwxMy4zNDQtNy42MTYsMjEuMzEyYzMuODA4LDguMDMyLDEzLjQ0LDExLjI2NCwyMS4zMTIsNy42MTYgICAgQzQ2NC45NiwzNzMuNzYsNTEyLDMwMi42MjQsNTEyLDIyNEM1MTIsMTA5LjMxMiw0MTEuNDg4LDE2LDI4OCwxNnoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgZGF0YS1vbGRfY29sb3I9IiNGQ0Y5RjkiIGZpbGw9IiNGRkZGRkYiLz48L2c+PC9nPjxnPjxnPjxwYXRoIGQ9Ik0zMjMuMTA0LDQxMy40MDhjLTAuODk2LTguOC05LjQ0LTE1LjIzMi0xNy41MzYtMTQuMjcyQzI5OS43MTIsMzk5LjcxMiwyOTMuODU2LDQwMCwyODgsNDAwICAgIGMtMzIuNzM2LDAtNTguOTc2LTAuODk2LTgyLjU2LTIuODE2Yy04LjY3Mi0wLjQ4LTE2LjUxMiw1Ljg1Ni0xNy4yNDgsMTQuNjI0Yy0wLjcwNCw4LjgsNS44NTYsMTYuNTQ0LDE0LjY1NiwxNy4yNDggICAgQzIyNy4yOTYsNDMxLjA3MiwyNTQuMzY4LDQzMiwyODgsNDMyYzYuOTc2LDAsMTMuOTItMC4zNTIsMjAuODMyLTEuMDU2QzMxNy42MzIsNDMwLjA0OCwzMjQsNDIyLjE3NiwzMjMuMTA0LDQxMy40MDh6IiBkYXRhLW9yaWdpbmFsPSIjMDAwMDAwIiBjbGFzcz0iYWN0aXZlLXBhdGgiIGRhdGEtb2xkX2NvbG9yPSIjRkNGOUY5IiBmaWxsPSIjRkZGRkZGIi8+PC9nPjwvZz48Zz48Zz48cGF0aCBkPSJNMzUyLDM2OGMtMzUuMjk2LDAtNjQsMjguNzA0LTY0LDY0YzAsMzUuMjk2LDI4LjcwNCw2NCw2NCw2NGMzNS4yOTYsMCw2NC0yOC43MDQsNjQtNjRDNDE2LDM5Ni43MDQsMzg3LjI5NiwzNjgsMzUyLDM2OHogICAgIE0zNTIsNDY0Yy0xNy42NjQsMC0zMi0xNC4zMzYtMzItMzJzMTQuMzM2LTMyLDMyLTMyczMyLDE0LjMzNiwzMiwzMlMzNjkuNjY0LDQ2NCwzNTIsNDY0eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBkYXRhLW9sZF9jb2xvcj0iI0ZDRjlGOSIgZmlsbD0iI0ZGRkZGRiIvPjwvZz48L2c+PGc+PGc+PHBhdGggZD0iTTE2MCwzNjhjLTM1LjI5NiwwLTY0LDI4LjcwNC02NCw2NGMwLDM1LjI5NiwyOC43MDQsNjQsNjQsNjRzNjQtMjguNzA0LDY0LTY0QzIyNCwzOTYuNzA0LDE5NS4yOTYsMzY4LDE2MCwzNjh6IE0xNjAsNDY0ICAgIGMtMTcuNjMyLDAtMzItMTQuMzM2LTMyLTMyczE0LjM2OC0zMiwzMi0zMnMzMiwxNC4zMzYsMzIsMzJTMTc3LjYzMiw0NjQsMTYwLDQ2NHoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgZGF0YS1vbGRfY29sb3I9IiNGQ0Y5RjkiIGZpbGw9IiNGRkZGRkYiLz48L2c+PC9nPjxnPjxnPjxwYXRoIGQ9Ik0yMjQuNjQsMTYwaC0wLjMyYy04LjgzMiwwLTE1Ljg0LDcuMTY4LTE1Ljg0LDE2YzAsOC44MzIsNy4zMjgsMTYsMTYuMTYsMTZjOC44MzIsMCwxNi03LjE2OCwxNi0xNiAgICBDMjQwLjY0LDE2Ny4xNjgsMjMzLjQ3MiwxNjAsMjI0LjY0LDE2MHoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgZGF0YS1vbGRfY29sb3I9IiNGQ0Y5RjkiIGZpbGw9IiNGRkZGRkYiLz48L2c+PC9nPjxnPjxnPjxwYXRoIGQ9Ik0zNTIuNjQsMTYwaC0wLjMyYy04LjgzMiwwLTE1Ljg0LDcuMTY4LTE1Ljg0LDE2YzAsOC44MzIsNy4zNiwxNiwxNi4xNiwxNmM4LjgzMiwwLDE2LTcuMTY4LDE2LTE2ICAgIEMzNjguNjQsMTY3LjE2OCwzNjEuNDcyLDE2MCwzNTIuNjQsMTYweiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBkYXRhLW9sZF9jb2xvcj0iI0ZDRjlGOSIgZmlsbD0iI0ZGRkZGRiIvPjwvZz48L2c+PGc+PGc+PHBhdGggZD0iTTM3MS41MiwyNDAuMzg0Yy04LjY3Mi0xLjg1Ni0xNy4xNTIsMy40ODgtMTkuMTM2LDEyLjEyOEMzNDUuNTY4LDI4Mi44MTYsMzE5LjEwNCwzMDQsMjg4LDMwNCAgICBzLTU3LjU2OC0yMS4xODQtNjQuMzg0LTUxLjQ4OGMtMS45NTItOC42NC0xMC40OTYtMTQuMDgtMTkuMTM2LTEyLjA5NmMtOC42MDgsMS45Mi0xNC4wMTYsMTAuNDk2LTEyLjA5NiwxOS4wNzIgICAgQzIwMi41MjgsMzA0LjU3NiwyNDEuODU2LDMzNiwyODgsMzM2YzQ2LjE3NiwwLDg1LjUwNC0zMS40NTYsOTUuNjQ4LTc2LjQ4QzM4NS41NjgsMjUwLjg4LDM4MC4xNiwyNDIuMzM2LDM3MS41MiwyNDAuMzg0eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBkYXRhLW9sZF9jb2xvcj0iI0ZDRjlGOSIgZmlsbD0iI0ZGRkZGRiIvPjwvZz48L2c+PC9nPiA8L3N2Zz4=);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 20px;
    position: relative;
    top: 3px;
    margin-right: 15px;
}

.google-map .google-map-icon{
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0OTEuOSA0OTEuOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDkxLjkgNDkxLjk7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxnPjxnPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MzQuNywyMjVIMjU4LjV2NTguN0gzNjZjLTE2LDUxLTYzLjcsODguMS0xMjAuMSw4OC4xYy02OS41LDAtMTI1LjgtNTYuMy0xMjUuOC0xMjUuOGMwLTY5LjUsNTYuMy0xMjUuOCwxMjUuOC0xMjUuOGMzNSwwLDY2LjYsMTQuMyw4OS41LDM3LjNsNDIuNi00Ni4zYy0zNC0zMy40LTgwLjYtNTMuOS0xMzIuMS01My45Yy0xMDQuMiwwLTE4OC43LDg0LjUtMTg4LjcsMTg4LjdzODQuNSwxODguNywxODguNywxODguN2M5MS4zLDAsMTcxLjItNjQuOCwxODguNy0xNTFMNDM0LjcsMjI1TDQzNC43LDIyNUw0MzQuNywyMjV6Ii8+PC9nPjwvZz48L2c+PC9zdmc+);
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: 20px;
    position: relative;
    top: 3px;
    margin-right: 15px;
}

.google-map #direction-buttons{
    margin-top: -0.75rem;
}

/* Terms of Use */
.terms-of-use ul{
    padding: 0;
}

.terms-of-use ul,
.terms-of-use ol{
    counter-reset: item;
}
.terms-of-use li {
    display: block;
    counter-increment: item;
    margin-bottom: 1rem;
}

.terms-of-use ul > li:before {
    content: "("counter(item,lower-alpha)")";
    padding-right: 0.5rem;
}

.terms-of-use ol > li:before {
    content: "("counter(item,lower-roman)")";
    padding-right: 0.5rem;
}

/* Buttons */
.buttons .icon{
    padding-right: 15px;
}

.buttons a{
    display: inline-block;
}

/* Pills */
.pills .nav-pills{
    padding: 2rem 0;
}

.pills .nav-pills .nav-link.active{
    background-color: #00a78d;
}

/*--------------------------------------------------------------
# 3. Navbar
--------------------------------------------------------------*/

.navbar{
    height: 120px;
    padding: 0;
    background: rgba(255, 255, 255, 0) !important;
    transition: background 0.3s ease;
    z-index: 2;
}

.navbar:hover{
    color: #6479ad;
    background: rgba(255, 255, 255, 1) !important;
}

.navbar #navbar-logo{
    position: relative;
    z-index: 4;
}

.navbar #navbar-logo-white > img,
.navbar #navbar-logo-color > img{
    width: 160px;
    height: 50px;
}

.navbar #navbar-logo-color{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.navbar #navbar-logo-white{
    opacity: 1;
    transition: opacity 0.3s ease;
}

.navbar:hover #navbar-logo-white{
    opacity: 0;
}

.navbar:hover #navbar-logo-color{
    opacity: 1;
}

.navbar #desktop-menu .nav-link{
    color: #FFFFFF;
    font-size: 14px;
    padding: 0.3rem 1.25rem !important;
}

.navbar:hover #desktop-menu .nav-link{
    color: #6479ad;
}

.navbar #desktop-menu .dropdown{
    position: inherit;
}

.navbar #desktop-menu .dropdown-item{
    color: #6479ad;
    padding: 0;
    font-size: 14px;
}

.navbar #desktop-menu .dropdown-item:hover{
    background-color: transparent;
}

.navbar #desktop-menu .dropdown-menu li{
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    position: relative;
    width: 100%;
    padding: 0.5rem 0;
}

.navbar #desktop-menu .dropdown-menu li a[href^="#"]{
    pointer-events: none;
}

.navbar #desktop-menu .dropdown-menu li:not(.title) > a:before{
    font-family: "Ionicons";
    border: 0;
    vertical-align: inherit;
    content: "\f3d1";
    padding-right: 0.5rem;
}

.navbar #desktop-menu .dropdown-menu li.title > a{
    font-weight: bolder;
}

.navbar #desktop-menu .dropdown-toggle:after{
    font-family: "Ionicons";
    border: 0;
    vertical-align: inherit;
    content: "\f3d0";
    margin-left: 1rem;
}

.navbar #desktop-menu > ul > li > .dropdown-menu > li:first-of-type > a{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    white-space: normal;
    font-weight: bolder;
    pointer-events: none;
    cursor: default;
    text-decoration: none
}

.navbar #desktop-menu > ul > li > .dropdown-menu{
    width: 100%;
    border-radius: 0;
    border: 0;
    border-top: 1px solid #e6e6e6;
    margin: 0;
    padding: 1.25rem 50px;
    display: none;
    flex-wrap: wrap;
    height: 300px;
}

.navbar #desktop-menu > ul > li > .dropdown-menu li ul{
    position: absolute;
    top: 40px;
    display: inline-block;
    border-radius: 0;
    border: 0;
    list-style: none;
    padding: 0;
}

.navbar #navbar-mobile{
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTAgNTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxyZWN0IHk9IjMiIGNsYXNzPSJzdDAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTIiIHk9IjE3IiBjbGFzcz0ic3QwIiB3aWR0aD0iMzgiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9IjMxIiBjbGFzcz0ic3QwIiB3aWR0aD0iNDYiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjgiIHk9IjQ1IiBjbGFzcz0ic3QwIiB3aWR0aD0iNDIiIGhlaWdodD0iMiIvPjwvZz48L3N2Zz4=);
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    margin-left: 1.25rem;
    display: block;
    position: relative;
    z-index: 4;
    opacity: 1;
    cursor: pointer;
}

.navbar #navbar-mobile.hide{
    opacity: 0;
    pointer-events: none;
    cursor: default;
}

.navbar:hover #navbar-mobile{
		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTAgNTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojNjQ3OUFEO308L3N0eWxlPjxnPjxyZWN0IHk9IjMiIGNsYXNzPSJzdDAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTIiIHk9IjE3IiBjbGFzcz0ic3QwIiB3aWR0aD0iMzgiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9IjMxIiBjbGFzcz0ic3QwIiB3aWR0aD0iNDYiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjgiIHk9IjQ1IiBjbGFzcz0ic3QwIiB3aWR0aD0iNDIiIGhlaWdodD0iMiIvPjwvZz48L3N2Zz4=);
}

/*--------------------------------------------------------------
# 3. Mobile/Side Menu
--------------------------------------------------------------*/
#mobile-side-menu{
    position: fixed;
    top: 0;
    z-index: 3;
    right: -400px;
    width: 400px;
    height: 100%;
    background-color: #FFFFFF;
    padding: 45px 50px;
    max-width: 400px;
    transition: right 0.3s ease;
}

 #mobile-side-menu #navbar-mobile-close{
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA2MTIgNjEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MTIgNjEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6IzY0NzlBRDt9PC9zdHlsZT48Zz48ZyBpZD0iY3Jvc3MiPjxnPjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iNjEyLDM2IDU3Ni41LDAuNiAzMDYsMjcwLjYgMzUuNSwwLjYgMCwzNiAyNzAuNSwzMDYgMCw1NzYgMzUuNSw2MTEuNCAzMDYsMzQxLjQgNTc2LjUsNjExLjQgNjEyLDU3NiAzNDEuNSwzMDYgIi8+PC9nPjwvZz48L2c+PC9zdmc+);
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    margin-right: 1.25rem;
    display: block;
    position: absolute;
    right: 0;
    z-index: 4;
    cursor: pointer;
}

#mobile-side-menu.expand{
    right: 0px;
}

#mobile-side-menu #mobile-side-menu-container{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    min-width: 300px;
}

#mobile-side-menu #mobile-side-menu-container ul{
    margin: 0;
    padding: 0;
}


#mobile-side-menu #mobile-side-menu-container > li{
    list-style: none;
    padding: 0.5rem 0;
}

#mobile-side-menu #mobile-side-menu-container > li > a{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 700;
    font-size: 22px;
    padding: 0.5rem 0;
}

#mobile-side-menu #mobile-side-menu-container > li > a[aria-expanded="false"]:after{
    font-family: "Ionicons";
    border: 0;
    vertical-align: inherit;
    content: "\f3d0";
    margin-left: 1rem;
    display: block;
    position: absolute;
    top: 10px;
    right: 0;
}

#mobile-side-menu #mobile-side-menu-container > li > a[aria-expanded="true"]:after{
    font-family: "Ionicons";
    border: 0;
    vertical-align: inherit;
    content: "\f3d8";
    margin-left: 1rem;
    display: block;
    position: absolute;
    top: 10px;
    right: 0;
}

#mobile-side-menu #mobile-side-menu-container > li > div > ul > li{
    list-style: none;
    padding: 0.5rem 0;
}

#mobile-side-menu #mobile-side-menu-container > li > div > ul > li > a{
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: #6479ad;
}

#mobile-side-menu .social-icon{
    font-size: 28px;
    margin-top: 2rem;
    display: inline-block;
    padding-right: 1rem; 
}
/*--------------------------------------------------------------
# 4. Banner
--------------------------------------------------------------*/

#banner-image-desktop{
    padding: 270px 0;
    width: 100%;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#banner-image-mobile{
    padding: 250px 0;
    width: 100%;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#banner-image-desktop h1,
#banner-image-mobile h1,
#banner-video-desktop h1,
#banner-video-mobile h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 1rem;
}

#banner-video-desktop,
#banner-video-mobile{
    position: relative;
    overflow: hidden;
}

#banner-video-desktop video,
#banner-video-desktop video{
    max-width: 100%;
    height: auto;
}

/*--------------------------------------------------------------
# 5. Breadcrumb
--------------------------------------------------------------*/

#breadcrumb{
    padding: 1rem 0;
    border-bottom: 1px solid #e6e6e6;
}

#breadcrumb ul{
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

#breadcrumb a,
#breadcrumb li{
    margin: 0;
    font-size: 12px;
}

#breadcrumb .icon{
    padding: 0 0.75rem;
    font-size: 12px;
}

/*--------------------------------------------------------------
# 6. Join
--------------------------------------------------------------*/

/* Join */
#join{
    background: url('img/cta-img.jpg');
    padding: 320px 0;
    width: 100%;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 15px;
}

#join #join-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 15px;
}

#join #join-text h2,
#join #join-text p{
    color: #FFFFFF;
}

#join #contact{
    background-color: transparent;
    padding: 0;
    color: #FFFFFF;
}

#join .icon{
    padding-right: 15px;
}

/*--------------------------------------------------------------
# 3. Form
--------------------------------------------------------------*/

.form{
    background-color: #f7f7f7;
    padding-top: 75px;
    padding-bottom: 75px;
}

.form button[type='submit']{
    margin: 0 auto;
    display: block;
}

.form .error{
    margin-top: 0.5rem;
    font-size: 14px;
    color: #be2020;
}

/*--------------------------------------------------------------
# 3. Modal
--------------------------------------------------------------*/

.modal-dialog{
    height: 100%;
    margin: 0 auto;
}

.modal-dialog > .modal-content{
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
}

/*--------------------------------------------------------------
# 7. Sitemap
--------------------------------------------------------------*/

#sitemap{
    background-color: #1d1d1d;
    padding: 3rem 0;
}

#sitemap h5{
    color: #7b7b7b;
    line-height: 1.2;
}

#sitemap a,
#sitemap span{
    color: #7b7b7b;
    font-size: 12px;
    display: block;
    padding: 5px 0;
}

#sitemap .social-icon{
    font-size: 28px;
    display: inline-block;
    padding-right: 1rem;
}

#sitemap-footer{
    background-color: #1d1d1d;
    padding: 1rem 0;
}

#sitemap-footer a{
    color: #7b7b7b;
    font-size: 12px;
}

#sitemap-footer p{
    padding: 0 1.25rem;
    display: inline-block;
    color: #7b7b7b;
    font-size: 12px;
}

#sitemap-footer span{
    font-size: 12px;
    color: #7b7b7b;
}

/*--------------------------------------------------------------
# 8. table
--------------------------------------------------------------*/

table{
    border: 1px solid #e6e6e6;
}

table td{
    color: #6479ad;
    padding: 1.25rem 0 !important;
}

table tr.title,
table tr.disclaimer{
    background-color: #ededed;
}

/*--------------------------------------------------------------
# 8. 404
--------------------------------------------------------------*/

section#error404{
    padding: 200px 0;
}

@media (max-width: 1199.98px) {
    
    h1{
        font-size: 42px;
    }

    h2{
        font-size: 34px;
    }

    h3{
        font-size: 18px;
    }

    h4{
        font-size: 22px;
    }
    
    section{
        padding: 2rem 0;
    }
    
    .image-partial-width{
        max-width: 100% !important;
    }
    
    .category-carousel .owl-carousel-text-container{
        padding: 3rem 15px;
    }
    
    .category-carousel .owl-carousel-text{
        padding: 3rem;
    }
    
    .membership .membership-text{
        padding: 3rem;
    }
    
    .google-map .text-container{
        max-width: 600px;
    }
    
    .google-map iframe{
        max-height: 500px;
    }
    
}

@media (max-width: 991.98px) {

    .container-fluid{
        padding: 0 15px;
    }

    .container-fluid-max{
        padding: 0 15px;
    }
    
    .navbar{
        height: auto;
        padding: 20px 15px;
        z-index: inherit;
    }
    
    .navbar:hover{
        background: rgba(255, 255, 255, 0) !important;
    }
    
    .navbar #desktop-menu > ul > li > .dropdown-menu{
        padding: 1.25rem 15px;
    }
    
    .navbar:hover #navbar-mobile{
        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MCA1MCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTAgNTA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojRkZGRkZGO308L3N0eWxlPjxnPjxyZWN0IHk9IjMiIGNsYXNzPSJzdDAiIHdpZHRoPSI1MCIgaGVpZ2h0PSIyIi8+PHJlY3QgeD0iMTIiIHk9IjE3IiBjbGFzcz0ic3QwIiB3aWR0aD0iMzgiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjQiIHk9IjMxIiBjbGFzcz0ic3QwIiB3aWR0aD0iNDYiIGhlaWdodD0iMiIvPjxyZWN0IHg9IjgiIHk9IjQ1IiBjbGFzcz0ic3QwIiB3aWR0aD0iNDIiIGhlaWdodD0iMiIvPjwvZz48L3N2Zz4=);
    }
    
    .navbar #navbar-logo-white{
        opacity: 1;
    }
    
    .navbar:hover #navbar-logo-white{
        opacity: 1;
    }

    .navbar #navbar-logo-color{
        opacity: 0;
    }
    
    .navbar:hover #navbar-logo-color{
        opacity: 0;
    }

    .owl-nav{
        display: none;
    }
    
    .google-map .text-container{
        position: relative;
        top: auto;
        left: auto;
        transform: translateY(0);
        padding: 1.5rem 15px;
    }
    
    .category-carousel .owl-carousel-text-container{
        position: relative;
        top: auto;
        left: auto;
        transform: translateY(0);
        padding: 1.5rem 15px;
    }
    
    .category-carousel .owl-carousel-text{
        background-color: #FFFFFF;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        padding: 1.25rem 0;
    }
    
    .category-carousel img{
        margin-bottom: 1rem;
    }
    
    .category-carousel .owl-dots{
        display: block;
    }
    
    .horizontal-carousel img{
        margin-bottom: 1rem;
    }

    
    .membership .membership-text-container{
        position: relative;
        top: auto;
        right: auto;
        transform: translateY(0);
    }
    
    .membership .membership-text{
        padding: 3rem 15px;
    }
    
    .membership-image{
        margin-bottom: 1rem;
    }
}

@media (max-width: 767.98px) {
    
    #mobile-side-menu{
        max-width: 100%;
        width: 100%;
        left: 0;
        top: 0;
        opacity: 0;
        padding: 30px 15px;
        transition: opacity 0.3s ease;
    }
    
    #mobile-side-menu.expand{
        opacity: 1;
    }
    
    #mobile-side-menu #mobile-side-menu-container{
        position: absolute;
        top: 55%;
    }

    #mobile-side-menu #mobile-side-menu-container > li > a{
        font-family: 'Noto Sans', sans-serif;
        font-weight: 700;
        font-size: 18px;
        padding: 0.5rem 0;
    }

    #mobile-side-menu #mobile-side-menu-container > li > div > ul > li{
        list-style: none;
        padding: 0.5rem 0;
    }

    #mobile-side-menu #mobile-side-menu-container > li > div > ul > li > a{
        font-family: 'Noto Sans', sans-serif;
        font-weight: 400;
        font-size: 13px;
        color: #6479ad;
    }
}