@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");
:root {
--color-black: 0, 0, 0;
--color-white: 255, 255, 255;
--color-dark: 22, 22, 22;
--color-default: 82, 87, 92;
--color-blue: 18, 112, 184;
--color-red: 236, 39, 38;
--color-gray: 160, 164, 168;
}
html {
font-size: 14px;
line-height: 28px;
}
::-moz-selection {
background: #C6E2FF;
text-shadow: none;
}
::selection {
background: #C6E2FF;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
background-color: transparent;
border-top: 1px solid #EBEBEB;
margin: 10px 0;
padding: 0;
opacity: 1;
}
hr.dashed {
border-top: 1px dashed #EBEBEB;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
a {
color: rgb(var(--color-default));
text-decoration: none;
transition: all 100ms ease-in-out;
}
a:hover,
a:focus {
text-decoration: none;
color: rgb(var(--color-blue));
} body {
font-family: 'Outfit';
font-size: 14px;
font-weight: 400;
line-height: 23px;
color: rgba(var(--color-default));
background-color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} h1 {
font-size: 56px;
line-height: 71px;
}
h2 {
font-size: 40px;
line-height: 50px;
}
h3 {
font-size: 32px;
line-height: 48px;
}
h4 {
font-size: 32px;
line-height: 40px;
}
h5 {
font-size: 28px;
line-height: 32px;
}
.text-3xs {
font-size: 10px;
line-height: 18px;
}
.text-xxs {
font-size: 12px;
line-height: 18px;
}
.text-xs {
font-size: 14px;
line-height: 21px;
}
.text-base {
font-size: 16px;
line-height: 24px;
}
.text-md {
font-size: 18px;
line-height: 30px;
}
.text-xl {
font-size: 20px;
line-height: 20px;
}
.text-xxl {
font-size: 22px;
line-height: 34px;
}
.lh-auto {
line-height: normal;
} .color-black {
color: rgb(var(--color-black));
}
.color-dark {
color: rgb(var(--color-dark));
}
.color-white {
color: rgb(var(--color-white));
}
.color-default {
color: rgb(var(--color-default));
}
.color-red {
color: rgb(var(--color-red));
}
.color-blue {
color: rgb(var(--color-blue));
}
.color-gray {
color: rgb(var(--color-gray));
}
.color-light {
color: #C6E2FF;
}
.bg-red {
background-color: rgb(var(--color-red));
}
.bg-blue {
background-color: rgb(var(--color-blue));
}
.bg-gray {
background-color: #F6F8FB;
} .form-control {
padding: 10px 12px;
font-size: 14px;
font-weight: 400;
color: rgb(var(--color-default));
background-clip: padding-box;
background-color: rgb(var(--color-white));
border-radius: 4px;
border: 1px solid #E7E7E7;
}
.form-control::placeholder {
color: rgba(51, 62, 66, 0.6);
}
.form-select {
padding: 10px 12px;
font-size: 14px;
font-weight: 400;
background-clip: padding-box;
border: 1px solid #EDEEED;
border-radius: 4px;
}
.form-control:focus,
.form-select:focus {
color: rgb(var(--color-dark));
background-color: rgb(var(--color-white));
border-color: #dfdfdf;
outline: 0;
box-shadow: none;
}
.form-control:disabled {
background-color: #FFFFFF;
border: 1px solid #E9E7EC;
} .btn {
font-size: 14px;
line-height: 20px;
padding: 10px 25px;
border-radius: 0;
position: relative;
z-index: 2;
overflow: hidden;
display: block;
}
.btn-hover {
min-width: 156px;
}
.btn-hover::before,
.btn-hover::after {
content: '';
background-color: rgb(var(--color-dark));
width: 0;
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
transition: all 200ms ease-in-out;
}
.btn-hover::after {
left: auto;
right: 0;
}
.btn-hover:hover::after {
width: 50%;
}
.btn-hover:hover::before {
width: 50%;
}
.btn-primary {
font-weight: 500;
font-size: 14px;
line-height: 18px;
background-color: rgb(var(--color-dark));
border-color: rgb(var(--color-dark));
}
.btn-secondary {
font-weight: 500;
font-size: 14px;
line-height: 18px;
background-color: rgb(var(--color-white));
color: rgb(var(--color-blue));
border-color: rgb(var(--color-white));
}
.btn-secondary-bordered {
background-color: transparent;
color: rgb(var(--color-white));
border-color: rgb(var(--color-white));
font-weight: 500;
font-size: 14px;
line-height: 18px;
}
.btn-secondary-bordered:hover,
.btn-secondary:hover {
border-color: rgb(var(--color-dark));
color: rgb(var(--color-white));
}
.btn-blue {
background-color: rgb(var(--color-blue));
color: rgb(var(--color-white));
display: inline-block;
}
.btn-blue:hover {
background-color: rgb(var(--color-dark));
color: rgb(var(--color-white));
} .header {
top: 0;
left: 0;
z-index: 1049;
width: 100%;
padding: 15px 0;
transition: all 250ms ease-in-out;
background-color: rgb(var(--color-white));
position: fixed;
}
.header.contact {
background-color: transparent;
}
.header.contact.shadowed {
background-color: rgb(var(--color-white));
}
.shadowed {
background-color: rgb(var(--color-white));
box-shadow: 0px 2px 8px rgba(37, 40, 43, 0.04);
}
.header.with-hero {
background: transparent;
position: absolute;
}
.with-hero .logo img,
.contact .logo img {
filter: brightness(0) invert(1);
}
.contact.shadowed .logo img {
filter: none;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
}
.main-menu {
padding-left: 0;
display: flex;
align-items: center;
gap: 40px;
margin: 0;
list-style: none;
}
.main-menu .menu-link {
font-family: 'Outfit';
display: inline-block;
font-weight: 500;
font-size: 16px;
line-height: 24px;
color: rgb(var(--color-dark));
}
.header.contact.shadowed .menu-link {
color: rgb(var(--color-dark));
}
.main-menu .menu-link.active,
.main-menu .menu-link:hover,
.header.contact.shadowed .menu-link.active {
color: rgb(var(--color-blue));
}
.header.with-hero .menu-link,
.header.contact .menu-link {
color: rgb(var(--color-white));
}
.btn-toggle {
padding: 0;
}
.shadowed .main-menu li:nth-last-child(2) .menu-link,
.fixed .main-menu li:nth-last-child(2) .menu-link {
color: rgb(var(--color-blue));
} .mobile-nav {
max-width: 350px;
height: 100vh;
background-color: rgb(var(--color-white));
position: fixed;
left: -350px;
top: 0;
z-index: 190;
width: 100%;
padding: 30px;
transition: all 150ms ease-in-out;
box-shadow: 0px 0px 8px 0px rgba(106, 78, 38, 0.24);
display: flex;
justify-content: space-between;
flex-direction: column;
}
.mobile-nav.show {
left: 0;
}
.overlay-mobile {
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
z-index: 100;
visibility: hidden;
opacity: 0;
transition: all 150ms ease-in-out;
}
.overlay-mobile.show {
visibility: visible;
opacity: 1;
}
.btn-toggle {
padding: 0;
border: 0;
border-radius: 0;
display: flex;
align-items: center;
}
.header-menu-inner {
display: flex;
justify-content: space-between;
}
.menu-mobile {
margin: 0;
padding: 0;
list-style: none;
}
.menu-mobile li {
padding: 10px 0;
border-bottom: 1px solid #EDEEED;
}
.social {
display: flex;
list-style: none;
padding-left: 0;
margin: 0;
gap: 20px;
}
.logo-mobile {
width: 70%;
display: block;
}
.social a {
font-size: 20px;
}  .search-header {
display: flex;
justify-content: space-between;
}
.logo-search img {
filter: brightness(0)invert(1);
}
.search-container {
height: calc(100vh - 150px);
display: flex;
align-items: center;
width: 100%;
}
.search-wrapper {
width: 100%;
}
.main-search input {
border-radius: 0;
border-top: 0;
border-left: 0;
border-right: 0;
padding-left: 0;
padding-right: 40px;
background: transparent;
color: rgb(var(--color-white));
}
.main-search input::placeholder {
color: rgb(var(--color-white));
}
.main-search input:focus,
.main-search input:active,
.main-search input:hover {
background: transparent;
color: rgb(var(--color-white));
}
.btn-submit {
position: absolute;
right: 0;
top: 5px;
padding: 0;
width: 20px;
height: 30px;
color: rgb(var(--color-white));
}
.btn-submit:focus,
.btn-submit:active,
.btn-submit:hover {
background: transparent;
color: rgb(var(--color-white));
}
.list-result {
padding-left: 0;
list-style: none;
}
.list-result li {
padding: 20px 0;
display: flex;
gap: 20px;
border-bottom: 1px solid #E8E8E8;
}
.image-result {
position: relative;
width: 140px;
height: 140px;
overflow: hidden;
}
.image-result img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.result-desc {
width: calc(100% - 140px);
} .hero-image {
height: 100vh;
background-position: center;
background-size: cover;
position: relative;
z-index: 3;
display: flex;
align-items: center;
}
.hero-image::before {
content: '';
background: linear-gradient(77.43deg, #1270B8 11.47%, rgba(18, 112, 184, 0) 100%);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.main-section {
padding: 80px 0;
}
.link-casual {
font-family: 'Outfit';
font-weight: 700;
font-size: 14px;
line-height: 24px;
text-decoration-line: underline;
color: rgb(var(--color-dark));
}
.link-casual:hover {
color: rgb(var(--color-blue));
text-decoration-line: underline;
}
.link-casual.white {
color: rgb(var(--color-white));
}
.list-date {
font-weight: 500;
font-size: 12px;
line-height: 18px;
letter-spacing: 0.1em;
color: rgb(var(--color-gray));
}
.article-title {
font-weight: 600;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.002em;
color: rgb(var(--color-dark));
display: block;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.article-excerpt {
display: block;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.link-decoration {
font-weight: 700;
font-size: 14px;
line-height: 24px;
color: rgb(var(--color-dark));
position: relative;
padding-top: 10px;
display: inline-block;
}
.link-decoration::before,
.link-decoration::after {
content: '';
width: 100%;
height: 1px;
background: #E8E8E8;
position: absolute;
top: 0;
transition: all 200ms ease-in-out;
}
.link-decoration::after {
background: rgb(var(--color-blue));
width: 0;
left: 0;
top: 0;
}
.link-decoration:hover::after {
width: 100%;
}
.box-category {
position: absolute;
top: 10px;
right: 10px;
display: inline-block;
background: rgb(var(--color-blue));
color: rgb(var(--color-white));
padding: 5px 15px;
font-weight: 600;
font-size: 10px;
}
.image-news figure {
height: 240px;
overflow: hidden;
}
.image-news figure img {
height: 100%;
object-fit: cover;
object-position: center;
}
.box-red {
display: inline-block;
background: rgb(var(--color-red));
color: rgb(var(--color-white));
padding: 5px 15px;
font-weight: 600;
font-size: 10px;
}
.box-blue {
display: inline-block;
background: rgb(var(--color-blue));
color: rgb(var(--color-white));
padding: 5px 15px;
font-weight: 600;
font-size: 10px;
}
.box-blue.results,
.box-red.results {
position: absolute;
left: 10px;
top: 10px;
}
.box-event-info {
height: 105px;
}
.event-date {
font-weight: 500;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1em;
color: rgb(var(--color-blue));
}
.events-title {
font-weight: 600;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.002em;
color: rgb(var(--color-dark));
display: block;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.project-output .container {
overflow: visible;
}
.bg-po {
background-color: rgb(var(--color-blue));
height: 100%;
position: relative;
padding: 60px 90px 60px 5px;
}
.bg-po::before {
content: '';
background-color: rgb(var(--color-blue));
width: 1000%;
height: 150%;
position: absolute;
left: -999%;
top: 0;
}
.bg-po::after {
content: '';
background-image: url(//www.ajfvc.org/wp-content/themes/aseanjica/img/bg-po.png);
width: 200%;
height: 200%;
position: absolute;
top: 0;
right: 0;
background-size: cover;
left: -100%;
z-index: 1;
}
.output {
background-color: rgb(var(--color-dark));
position: relative;
height: 100%;
padding: 50px 0 50px 40px;
}
.output::before {
content: '';
background-color: rgb(var(--color-dark));
width: 1000%;
height: 100%;
position: absolute;
right: -999%;
top: 0;
}
.list-output {
list-style: none;
padding-left: 0;
margin: 0;
}
.list-output li {
display: flex;
gap: 20px;
padding-bottom: 25px;
margin-bottom: 25px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.list-output.overview li {
border-bottom: 1px solid rgba(82, 87, 92, 0.1);
}
.list-output li:last-child {
border-bottom: 1px solid transparent;
margin-bottom: 0;
padding-bottom: 0;
}
.line-icon {
width: 32px;
}
.hero-inner {
height: 520px;
overflow: hidden;
}
.hero-inner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.wrapper-inner {
padding: 90px 0 70px;
}
.search-form,
.news-item {
position: relative;
}
.box-content-search {
border: 1px solid #E8E8E8;
padding: 8px;
display: flex;
align-items: center;
}
.search-form input {
border-radius: 0;
border: 0;
padding-left: 40px;
}
.search-form::before {
content: "\e90b";
font-family: 'icomoon';
position: absolute;
color: rgb(var(--color-blue));
font-size: 20px;
left: 10px;
top: 10px;
}
.nav-tabs .nav-link {
margin-bottom: 0;
border: 3px solid transparent;
border-top-left-radius: 0;
border-top-right-radius: 0;
border-left: 0;
border-top: 0;
border-right: 0;
padding-bottom: 10px;
color: rgb(var(--color-gray));
font-weight: 400;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
color: rgb(var(--color-blue));
background-color: transparent;
border-color: rgb(var(--color-blue));
}
.pagi {
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
}
.input-pagination {
width: 40px;
height: 40px;
border-radius: 0;
text-align: center;
}
.input-pagination input {
width: 40px;
height: 40px;
border-radius: 0;
text-align: center;
}
.input-pagination input::-webkit-outer-spin-button,
.input-pagination input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.input-pagination input[type=number] {
-moz-appearance: textfield;
}
.main-text {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: #52575C;
margin-bottom: 20px;
}
.breadcrumb-item.active {
color: #A0A4A8;
}
.breadcrumb-item a {
color: rgb(var(--color-blue));
}
.breadcrumb-item+.breadcrumb-item::before,
.breadcrumb-item:last-child::after {
display: none;
}
.breadcrumb-item::after {
padding-left: 10px;
color: rgb(var(--color-gray));
content: '/';
margin-right: 10px;
}
.breadcrumb-item+.breadcrumb-item {
padding-left: 0;
}
.event-title {
font-weight: 700;
font-size: 32px;
line-height: 40px;
letter-spacing: 0.002em;
color: rgb(var(--color-dark));
}
.main-list li {
color: rgb(var(--color-dark));
font-size: 16px;
font-weight: 600;
}
.image-list {
height: 100%;
}
.image-list img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
.sticky {
position: sticky;
top: 90px;
}
.nav-droptab {
list-style: none;
padding-left: 0;
}
.nav-droptab li {
margin-bottom: 10px;
}
.nav-droptab .nav-link {
display: block;
font-weight: 400;
font-size: 18px;
line-height: 28px;
color: rgb(var(--color-gray));
padding: 15px 0;
border-bottom: 1px solid #E8E8E8;
position: relative;
}
.nav-droptab .nav-link.active {
color: rgb(var(--color-blue));
font-weight: 600;
}
.nav-droptab .nav-link::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 0;
height: 3px;
background-color: rgb(var(--color-blue));
transition: all 150ms ease-in-out;
}
.nav-droptab .nav-link.active::after,
.nav-droptab .nav-link:hover::after,
.nav-droptab .nav-link:hover {
width: 100%;
color: rgb(var(--color-blue));
}
.main-text-overview {
font-weight: 400;
font-size: 16px;
line-height: 29px;
margin-bottom: 20px;
}
.desc-linked {
font-size: 16px;
line-height: 24px;
letter-spacing: 0.002em;
color: rgb(var(--color-default));
display: block;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.img-linked {
position: relative;
overflow: hidden;
cursor: pointer;
height: 380px;
transition: all 150ms ease-in-out;
}
.img-linked img {
height: 100%;
object-fit: cover;
object-position: center;
}
.img-linked::before {
position: absolute;
content: '';
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: all 150ms ease-in-out;
}
.img-linked:hover::before {
opacity: 1;
visibility: visible;
}
.btn-download {
position: absolute;
bottom: -50px;
background-color: rgb(var(--color-blue));
color: rgb(var(--color-white));
left: 50%;
width: 60%;
transform: translateX(-50%);
transition: all 250ms ease-in-out;
padding: 10px 30px;
text-align: center;
}
.btn-download:hover,
.btn-download:active,
.btn-download:focus {
background-color: rgb(var(--color-white));
color: rgb(var(--color-blue));
}
.btn-download:active {
color: rgb(var(--color-blue));
background-color: rgb(var(--color-white));
border-color: rgb(var(--color-white));
}
.img-linked:hover .btn-download {
bottom: 30px;
width: 80%;
}
.title-gallery {
font-weight: 500;
font-size: 16px;
line-height: 24px;
text-align: center;
color: rgb(var(--color-dark));
}
.video-info {
position: absolute;
top: 14px;
left: 14px;
display: flex;
align-items: center;
grid-area: 10px;
}
.box-video::before {
content: '';
background: rgba(0, 0, 0, 0.4);
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
.title-video {
padding: 0 10px;
display: block;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
color: rgb(var(--color-white));
}
.btn-youtube {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
z-index: 3;
transition: all 150ms ease-in-out;
}
.btn-youtube::before {
content: url(//www.ajfvc.org/wp-content/themes/aseanjica/img/icon/button-default.svg);
width: 56px;
height: 56px;
transition: all 150ms ease-in-out;
}
.btn-youtube:hover::before {
content: url(//www.ajfvc.org/wp-content/themes/aseanjica/img/icon/button-hover.svg);
width: 56px;
height: 56px;
transition: all 150ms ease-in-out;
}
.hero-contact {
height: 60vh;
background-size: cover;
width: 100%;
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
.hero-contact::before {
content: '';
background: linear-gradient(77.43deg, #1270B8 11.47%, rgba(18, 112, 184, 0) 100%);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.content-contact {
padding-bottom: 80px;
position: relative;
}
.box-contact {
padding: 70px;
background: #FFFFFF;
box-shadow: 0px 8px 16px rgba(37, 40, 43, 0.06);
z-index: 4;
position: relative;
}
.box-contact-inner {
margin-top: -90px;
}
#map-location {
height: 100%;
position: relative;
z-index: 10;
}
.maps-info {
border-radius: 4px;
border-color: rgb(var(--color-blue));
font-size: 10px;
color: #52575C;
}
.gm-style .gm-style-iw-c {
max-width: 210px !important;
border: 1px solid rgb(var(--color-blue));
border-radius: 4px;
padding: 15px;
box-shadow: none;
}
.gm-style-iw-chr button {
display: none !important;
}
.label-form {
color: rgb(var(--color-gray));
}
.label-form.required::after {
content: '*';
color: #EC2726;
padding-left: 4px;
}
.form-contact input,
.form-contact textarea {
border-left: 0;
border-top: 0;
border-right: 0;
border-radius: 0;
padding-left: 0;
color: rgb(var(--color-dark));
}
.error-section {
min-height: 40vh;
display: flex;
align-items: center;
}
.link-oh {
font-weight: 500;
font-size: 20px;
line-height: 25px;
color: rgb(var(--color-white));
display: block;
margin-bottom: 15px;
transition: all 200ms ease-in-out;
}
.link-oh:hover {
color: rgb(var(--color-white));
text-decoration: underline;
text-underline-offset: 2px;
}
.search-suggest {
border: 1px solid #E8E8E8;
box-shadow: 0px 2px 8px rgba(22, 22, 22, 0.12);
position: absolute;
background-color: rgb(var(--color-white));
margin-top: 10px;
top: 100%;
left: 0;
padding: 25px;
width: 100%;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 150ms ease-in-out;
}
.search-suggest.on {
opacity: 1;
visibility: visible;
}
.suggest-content {
max-height: 350px;
overflow-y: auto;
overflow-x: hidden;
}
.list-suggest {
list-style: none;
padding-left: 0;
margin: 0;
}
.list-suggest li {
display: flex;
gap: 15px;
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid rgba(232, 232, 232, 1);
}
.list-suggest li:last-child {
margin-bottom: 0;
}
.img-suggest {
width: 64px;
height: 64px;
overflow: hidden;
}
.img-suggest img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.link-suggest {
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #161616;
background: transparent;
outline: 0;
border: 0;
padding: 0;
text-align: left;
}
.link-suggest:hover {
color: rgb(var(--color-blue));
}
.suggest-contents {
width: calc(100% - 80px);
} #hero .swiper-pagination-bullet {
border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
background: rgba(255, 255, 255, 0.6);
opacity: 1;
position: relative;
}
#hero .swiper-pagination-bullet-active {
opacity: 1;
background: rgb(var(--color-white));
}
#hero .swiper-pagination-bullet-active::before {
content: '';
border: 1px solid rgb(var(--color-white));
width: 12px;
height: 12px;
border-radius: 50%;
background: transparent;
display: flex;
align-items: center;
position: absolute;
left: -2px;
top: -2px;
}
.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: 20px;
}
.swiper-button-next,
.swiper-button-prev {
color: rgb(var(--color-gray));
}
.update.swiper-button-next,
.update.swiper-button-prev {
margin-top: -110px;
color: rgb(var(--color-gray));
}
.swiper-button-next::after {
font-family: 'icomoon';
content: "\e901";
font-size: 20px;
}
.swiper-button-prev::after {
font-family: 'icomoon';
content: "\e900";
font-size: 20px;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: -50px;
right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: -50px;
left: auto;
}
.cate .swiper-slide {
width: max-content;
}
.gal.swiper-button-next,
.gal.swiper-button-prev {
top: 0;
margin: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 40px;
height: 100%;
opacity: 0;
transition: all 150ms ease-in-out;
color: rgb(var(--color-white)) !important;
}
.gal.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: 0px;
right: auto;
}
.gal.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: 0px;
left: auto;
}
.hover-gal:hover .swiper-button-next,
.hover-gal:hover .swiper-button-prev {
opacity: 1;
} .footer {
background: #FFFFFF;
border-top: 1px solid #E8E8E8;
position: relative;
}
.footer-top {
padding: 70px 0;
}
.logo-footer {
display: flex;
align-items: center;
gap: 25px;
position: relative;
margin-bottom: 30px;
}
.logo-below::after {
content: '';
width: 1px;
background: #E8E8E8;
height: calc(100% - 15px);
display: block;
top: 50%;
transform: translateY(-50%);
right: -15px;
left: auto;
position: absolute;
}
.logo-below:last-of-type::after {
display: none;
}
.footer-title {
font-family: 'Outfit';
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 24px;
letter-spacing: 0.1em;
color: rgb(var(--color-blue));
}
.footer-title.new {
color: rgb(var(--color-default));
}
.social-bottom {
display: flex;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
gap: 10px;
}
.social-bottom a {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 38px;
height: 38px;
font-size: 20px;
color: rgb(var(--color-blue));
border: 1px solid rgb(var(--color-blue));
}
.social-bottom a:hover {
color: rgb(var(--color-white));
background-color: rgb(var(--color-blue));
}
.link-footer-list {
padding-left: 0;
list-style: none;
}
.link-footer-list .link-footer {
font-family: 'Outfit';
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 29px;
color: rgb(var(--color-gray));
}
.link-footer-list .link-footer:hover {
color: rgb(var(--color-blue));
}
.box-newsletter {
background: #fff;
display: flex;
align-items: center;
padding: 5px;
border: 1px solid #E8E8E8;
}
.box-newsletter input {
background: transparent;
border-radius: 0;
border: 0;
color: rgb(var(--color-gray));
}
.box-newsletter input::placeholder {
color: rgb(var(--color-gray));
}
.box-newsletter input::-moz-placeholder {
color: rgb(var(--color-gray));
}
.box-newsletter input:focus,
.box-newsletter input:active,
.box-newsletter input:hover {
background: transparent;
color: rgb(var(--color-white));
}
.btn-subs {
background-color: rgb(var(--color-blue));
color: rgb(var(--color-white));
padding: 10px 0;
min-width: 108px;
}
.btn-subs:hover {
background-color: rgb(var(--color-red));
color: rgb(var(--color-white));
}
.footer-bottom {
padding: 20px 0;
border-top: 1px solid #E8E8E8;
text-align: center;
color: rgb(var(--color-gray));
} .mfp-image-holder .mfp-content {
max-width: 960px;
width: auto !important;
background: transparent;
height: auto;
}
.wrap-img {
height: auto;
}
.popup-close {
display: none !important;
}
.box-img-award {
height: 240px;
overflow: hidden;
}
.box-img-award img {
width: 100%;
object-fit: cover;
object-position: center;
} .content-menu::-webkit-scrollbar,
.suggest-content::-webkit-scrollbar {
width: 5px;
border-radius: 3px;
} .content-menu::-webkit-scrollbar-track,
.suggest-content::-webkit-scrollbar-track {
background: transparent;
} .content-menu::-webkit-scrollbar-thumb,
.suggest-content::-webkit-scrollbar-thumb {
background: #f3f3f3;
} .content-menu::-webkit-scrollbar-thumb,
.suggest-content::-webkit-scrollbar-thumb {
background: #f3f3f3;
} .hidden,
[hidden] {
display: none !important;
}
.text-left {
text-align: left !important;
}
.text-right {
text-align: right;
}
.text-italic {
font-style: italic;
}
.text-hidden {
display: block;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.text-extraBold {
font-weight: 800;
}
.text-bold {
font-weight: 700;
}
.text-semiBold {
font-weight: 600;
}
.text-medium {
font-weight: 500;
}
.text-normal {
font-weight: 400;
}
.text-light {
font-weight: 300;
}
.text-Black {
font-weight: 900;
}
.h-100vh {
height: 100vh;
}
.mh-0 {
min-height: 0;
}
.line-height {
line-height: 0;
}
.sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px; }
.sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
} @media (min-width: 576px) {
.container,
.container-sm {
max-width: 600px;
}
}
@media (min-width: 768px) {
.container,
.container-md,
.container-sm {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container,
.container-lg,
.container-md,
.container-sm {
max-width: 960px;
}
}
@media (min-width: 1025px) {
.container,
.container-lg,
.container-md,
.container-sm {
max-width: 1140px;
}
}
@media (min-width: 1200px) {
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 1175px;
}
.hide-desktop {
display: none;
}
}
@media (min-width: 1400px) {}
@media (min-width: 1025px) and (max-width: 1199px) {}
@media (min-width: 992px) {
.hide-tablet {
display: none;
}
.main-menu li:last-child {
display: none;
}
}
@media (max-width: 1024px) {
h1 {
font-size: 40px;
line-height: 48px;
}
.main-menu {
gap: 20px;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: -30px;
right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: -30px;
left: auto;
}
.image-news figure {
height: 200px;
overflow: hidden;
}
.img-linked {
height: 300px;
}
.box-img-award {
height: auto;
overflow: hidden;
}
}
@media (max-width: 991px) {
.main-menu li {
display: none;
}
.main-menu li:last-child,
.main-menu li:nth-last-child(2) {
display: block;
}
.hero-image {
background-position: right 30% center;
}
.with-hero .btn-toggle,
.contact .btn-toggle {
filter: brightness(0)invert(1);
}
.contact.fixed .btn-toggle {
filter: none;
}
.image-news figure img {
width: 100%;
}
.bg-po {
padding: 50px 30px;
}
.output {
z-index: 5;
padding: 50px 40px;
}
.output::before,
.bg-po::before {
display: none;
}
.bg-po::after {
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.btn-nav {
display: block;
width: 100%;
background-color: rgb(var(--color-dark));
color: rgb(var(--color-white));
font-size: 16px;
}
.dropdown-tab {
width: 100%;
padding: 10px 20px;
z-index: 20;
}
h3 {
font-size: 25px;
line-height: 30px;
}
.img-linked {
height: 260px;
}
.hero-contact {
height: 45vh;
}
#map-location {
height: 400px;
}
}
@media (max-width: 767px) {
.container {
padding-left: 20px;
padding-right: 20px;
}
h1 {
font-size: 30px;
line-height: 38px;
}
h2 {
font-size: 25px;
line-height: 30px;
}
h4 {
font-size: 22px;
line-height: 30px;
}
.hero-image::before {
background: rgba(18, 112, 184, 0.62);
}
.header-inner .logo img {
display: inline-block;
max-width: 80%;
}
.swiper-button-prev,
.swiper-rtl .swiper-button-next {
left: 0px;
right: auto;
}
.swiper-button-next,
.swiper-rtl .swiper-button-prev {
right: 0px;
left: auto;
}
.update.swiper-button-next,
.update.swiper-button-prev {
margin-top: 0;
color: rgb(var(--color-gray));
}
.center-mobile {
display: flex;
justify-content: center;
}
.nav-slide {
position: relative;
width: 70px;
height: 20px;
}
.event-title {
font-size: 28px;
line-height: 35px;
margin-bottom: 10px;
}
.nav-droptab .nav-link {
font-size: 14px;
line-height: 21px;
color: rgb(var(--color-gray));
padding: 10px 0;
}
.img-linked {
height: 280px;
}
.hero-contact {
height: 50vh;
}
.box-contact {
padding: 30px;
}
.search-suggest {
padding: 20px;
}
}
@media (max-width: 380px) {
.btn {
padding: 10px 12px;
}
.btn-hover {
min-width: 130px;
}
}
@media (min-width: 768px) {}
@media (max-width: 1000px) and (orientation: landscape) {
.content-menu {
max-height: 30vh;
overflow-y: auto;
overflow-x: hidden;
}
}
@media (max-width: 700px) and (orientation: landscape) {} @media print {
*,
*::before,
*::after {
background: #fff !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}