/**
* Place your custom styles here.
*/
html{
overflow-x: hidden;
}
body{
font-size: 14px !important;
font-weight: normal;
margin: 0;
color: #333333;
font-family: 'Roboto' !important;
overflow-x: hidden;
background: #FFFFFF !important;
line-height: 22px !important;
animation-name: loader;
animation-duration: 0.6s;
animation-fill-mode: forwards;
}
body:after{
/* content: "dev version | screen: mobile"; */
display: block;
padding: 5px 10px;
background: rgba(0,0,0,0.5);
color: rgba(255, 255, 255, 0.7);
position: fixed;
bottom: 5px;
right: 5px;
font-size: 11px;
z-index: 9999;
}
@keyframes loader{
0% { opacity: 0; }
100% { opacity: 1; }
}
:target{
background: rgb(255,226,0);
background: linear-gradient(90deg, rgba(211,244,0,0.7) 0%, rgba(255,255,255,0) 100%);
padding: 10px 10px;
position: relative;
}
:target::after{
content: "";
display: block;
position: absolute;
top: 5px;
left: -15px;
font-family: 'Font Awesome 5 Pro';
font-weight: 600;
content: "\f02e";
color: #EEEEEE;
transform: rotate(90deg);
}
a, .link{
text-decoration: none !important;
outline: none;
transition: color 0.3s ease-out;
color: #0098a6;
/* color: #243569; */
}
a:hover{
text-decoration: none;
color: #007682;
}
ul, ol{
margin: 0 0 0 0;
padding: 0;
}
.node--type-basic-page .node__content ul,
.node--type-basic-page .node__content ol{
margin-bottom: 20px;
padding-left: 20px;
}
.node--type-basic-page .node__content li ul,
.node--type-basic-page .node__content li ol{
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
.node--type-basic-page .node__content ul li,
.node--type-basic-page .node__content ol li{
/* list-style: none; */
padding-left: 20px;
margin-bottom: 15px;
margin-left: 15px;
}
li{
padding-left: 20px;
margin-bottom: 15px;
margin-left: 15px;
}
.toolbar-menu li{
margin-bottom: 0;
}
h1{
font-size: 22px;
}
h1.title{
color: #333333;
border: 0;
font-size: 28px;
font-weight: bold;
margin: 0 0 20px 0;
text-transform: capitalize;
font-family: 'Rufina';
margin-bottom: 50px;
}
h2{
font-size: 18px;
}
/* .node--type-basic-page h2{
color: #4661ae;
font-size: 18px;
font-weight: bold;
margin-bottom: 30px;
} */
h3{
font-weight: bold;
font-size: 17px;
}
button{
outline: none;
}
:target{
/* background: yellow; */
}
/* Table */
.table thead th{
border-bottom: 0;
border-top: 0;
padding: 15px;
background: #4762af;
border-width: 2px;
}
table.table tr:nth-child(odd) td{
background: #f7f7f7;
}
table.table tr:nth-child(even) td{
background: #EEEEEE;
}
/* Table (view) */
.view table{
font-size: 15px;
}
.view table tr{
}
.view table th{
padding: 15px 20px;
background: #5dc4e6;
border-width: 2px;
color: #FFFFFF;
font-size: 14px;
text-transform: uppercase;
}
.view table td{
padding: 15px 20px;
border-width: 2px;
font-size: 14px;
}
.view table tr:nth-child(odd) td{
background: #FFFFFF;
--bs-table-accent-bg: unset;
}
.view table tr:nth-child(even) td:nth-child(even){
background: #ebebeb;
}
.view table tr:nth-child(even) td{
background: #f8f8f8;
}
.view table td a{
color: #1b4172;
}
/* .view table{
font-size: 15px;
}
.view table th{
font-size: 15px;
border: 0;
background: #808080;
}
.view table td{
font-size: 15px;
background: #EEEEEE;
}
.view table td h2{
font-weight: bold;
font-size: 16px;
}
.view table td ul{
margin: 0;
padding: 0;
list-style: disc;
}
.view table td ul li{
margin: 0 0 0 10px;
list-style: disc;
display: list-item;
background: none;
border: 0;
}
.view table a{
color: #02324e;
transition: color 0.3s ease-out;
}
.view table a:hover{
color: #011c2c;
} */
/* Nav tabs */
nav.tabs{
margin: 7px 0 20px 0;
border-bottom: 1px solid #dee2e6;
position: relative;
/* z-index: 100; */
}
nav.tabs ul{
}
nav.tabs ul li{
margin: 0;
padding: 0;
}
nav.tabs ul li a{
color: #0071b3;
}
.node__content{
font-size: 15px !important;
}
/* paragraphs */
.paragraph .field__item{
margin-bottom: 30px;
}
.paragraph a{
/* border-bottom: 1px dashed #41311a; */
}
/* paragraph Rich text - img alignment */
.paragraph.paragraph--type--rich-text img.align-right,
img.align-right{
margin: 0 0 20px 20px;
}
.paragraph.paragraph--type--rich-text img.align-left,
img.align-left{
margin: 0 20px 20px 0;
}
.paragraph.paragraph--type--rich-text .field--name-field-rich-text.field__item{
margin: 0;
}
/* paragraph Rich text - h2 */
.paragraph--type--rich-text h2{
text-transform: capitalize;
font-size: 25px;
font-weight: bold;
font-family: 'Rufina';
color: #1b4172;
margin: 0 0 20px 0;
}
/* paragraph Rich text - h3 */
.paragraph--type--rich-text h3{
text-transform: capitalize;
font-size: 20px;
font-weight: bold;
font-family: 'Rufina';
color: #0168A3;
margin: 0 0 20px 0;
}
/* paragraph Rich text - table */
.paragraph.paragraph--type--rich-text table{
font-size: 15px;
}
.paragraph.paragraph--type--rich-text table tr{
}
.paragraph.paragraph--type--rich-text table th{
padding: 10px;
background: #1b4172;
border-width: 2px;
color: #FFFFFF;
font-size: 13px;
}
.paragraph.paragraph--type--rich-text table th p{
margin: 0;
}
.paragraph.paragraph--type--rich-text table td{
padding: 15px 20px;
border-width: 2px;
font-size: 14px;
}
.paragraph.paragraph--type--rich-text table tr:nth-child(odd) td{
background: #f7f7f7;
}
.paragraph.paragraph--type--rich-text table tr:nth-child(even) td{
background: #EEEEEE;
}
/* paragraph attachment */
.paragraph.paragraph--type--file-attachment table{
font-size: 15px;
}
.paragraph.paragraph--type--file-attachment table tr{
}
.paragraph.paragraph--type--file-attachment table th{
padding: 10px;
background: #3e4d72;
border-width: 2px;
color: #FFFFFF;
font-size: 13px;
}
.paragraph.paragraph--type--file-attachment table td{
padding: 15px 20px;
border-width: 2px;
font-size: 14px;
}
.paragraph.paragraph--type--file-attachment table tr:nth-child(odd) td{
background: #f7f7f7;
}
.paragraph.paragraph--type--file-attachment table tr:nth-child(even) td{
background: #EEEEEE;
}
/* paragraph Rich text - iframe embed */
.field--name-field-rich-text iframe{
width: 100%;
height: 300px;
}
/* Paragraph: Image Slider (single) */
.paragraph--type--image-slider{
display: flex;
justify-content: center;
}
.paragraph--type--image-slider .field--name-field-img-slider-image{
width: 50%;
margin: 0 auto;
}
.paragraph--type--image-slider .field--name-field-img-slider-image img{
margin: 0 auto;
object-fit: cover;
width: auto;
height: 400px;
}
.paragraph--type--image-slider .slick-prev{
position: absolute;
top: 50%;
left: 0;
}
.paragraph--type--image-slider .slick-next{
position: absolute;
top: 50%;
right: 0;
}
.paragraph--type--image-slider .field--name-field-slider-title{
margin: 0 0 5px 0;
}
/* .mini-photo-slider .sp-slide{
background: #000000;
}
.mini-photo-slider .sp-slide img{
object-fit: contain;
width: 100%;
max-height: 500px;
} */
/* Paragraph: Image slider (multiple) */
.paragraph--type--image-slider-multiple{
text-align: center;
margin: 0 auto 10px auto;
width: 70%;
}
.paragraph--type--image-slider-multiple .field--name-field-img-slider-image img{
object-fit: contain;
width: auto;
height: 200px;
margin: 0 auto;
padding: 10px;
}
.paragraph--type--image-slider-multiple .field--name-field-img-slider-image .field__item{
text-align: center;
margin: 0;
}
.paragraph--type--image-slider-multiple .field--name-field-img-slider-image .arrow-left{
color: #808080;
}
.paragraph--type--image-slider-multiple .field--name-field-img-slider-image .arrow-right{
color: #808080;
}
.paragraph--type--image-slider-multiple .field--name-field-slider-title{
margin: 0 0 5px 0;
}
/* Paragraph: Image slider (multiple new) */
.paragraph--type--img-slider-group{
text-align: center;
margin: 0 auto 10px auto;
width: 70%;
}
.paragraph--type--img-slider-group .field--name-field-slider-img img{
object-fit: contain;
width: auto;
max-height: 300px;
margin: 0 auto;
padding: 10px;
}
/* .paragraph--type--img-slider-group .field--name-field-img-slider-image img{
object-fit: contain;
width: auto;
height: 200px;
margin: 0 auto;
padding: 10px;
}
.paragraph--type--img-slider-group .field--name-field-img-slider-image .field__item{
text-align: center;
margin: 0;
}
.paragraph--type--img-slider-group .field--name-field-img-slider-image .arrow-left{
color: #808080;
}
.paragraph--type--img-slider-group .field--name-field-img-slider-image .arrow-right{
color: #808080;
}
.paragraph--type--img-slider-group .field--name-field-slider-title{
margin: 0 0 5px 0;
} */
.node .field--type-image{
float: unset;
}
/* paragraph FAQ */
.field--name-field-question-answer-title{
font-weight: bold;
}
.paragraph--type--question-and-answer .field--name-field-question{
font-weight: bold;
margin-bottom: 10px;
border-bottom: 1px dotted rgba(0,0,0,0.9);
padding: 10px 10px;
cursor: pointer;
display: block;
margin-bottom: 20px;
}
.paragraph--type--question-and-answer .field--name-field-question p:last-child{
margin-bottom: 0;
}
.paragraph--type--question-and-answer .field--name-field-question:before{
font-family: 'Font Awesome 5 Pro';
font-weight: 900;
content: "\f107";
display: inline-block;
margin-right: 20px;
margin-left: 40px;
color: #1d3d66;
float: right;
}
.paragraph--type--question-and-answer .field--name-field-question.active:before{
font-family: 'Font Awesome 5 Pro';
font-weight: 900;
content: "\f106";
display: inline-block;
margin-right: 20px;
color: #CCCCCC;
float: right;
}
.paragraph--type--question-and-answer .field--name-field-answer{
display: none;
margin-bottom: 30px;
padding: 0 80px 0 10px;
}
/* Paragraph member group */
.field--name-field-group-members > .field__item{
display: block;
clear: both;
margin: 0;
}
.field--name-field-group-members > .field__item:nth-child(odd){
background: #f7f7f7;
}
.field--name-field-group-members > .field__item:nth-child(even){
background: #EEEEEE;
}
.field--name-field-group-members .paragraph--type--member-profile{
display: flex;
padding: 30px;
flex-direction: column;
justify-content: center;
text-align: center;
}
.paragraph--type--member-profile .member-photo-container{
/* width: 130px; */
margin-bottom: 10px;
}
@media(max-width:310px){
/*************************************************************/
.paragraph--type--member-profile .member-photo-container{
display: none;
}
/*************************************************************/
}
/* photo size based on selection */
.photo-size-large .paragraph--type--member-profile .member-photo-container .field--name-field-member-photo img{
width: 200px;
height: auto;
}
.photo-size-medium .paragraph--type--member-profile .member-photo-container .field--name-field-member-photo img{
width: 150px;
height: auto;
}
.photo-size-small .paragraph--type--member-profile .member-photo-container .field--name-field-member-photo img{
width: 100px;
height: auto;
}
.paragraph--type--member-profile .member-details-container{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.field--name-field-group-members .field--name-field-member-photo{
margin: 0;
}
.field--name-field-group-members .field--name-field-member-photo img{
object-fit: cover;
border: 1px solid #CCCCCC;
padding: 5px;
background: #FFFFFF;
margin: 0;
}
.field--name-field-group-members .field--name-field-member-name{
font-weight: bold;
margin-bottom: 7px;
color: #1c3f75;
font-size: 16px;
text-transform: uppercase;
}
.field--name-field-group-members .field--name-field-member-position{
margin-bottom: 15px;
color: #ac821f;
font-size: 13px;
line-height: 16px;
}
.field--name-field-group-members .field--name-field-member-email{
font-size: 13px;
margin-bottom: 5px;
display: inline-block;
margin-top: 20px;
}
.field--name-field-group-members .field--name-field-member-email a{
color: #333333;
}
.field--name-field-group-members .field--name-field-member-email .field__item{
margin-bottom: 5px;
background: #dddddd;
padding: 5px 10px;
border-radius: 10px;
color: #333333;
text-shadow: 0 1px 0px rgba(255,255,255,0.5);
display: inline-block;
}
.field--name-field-group-members .field--name-field-member-email .field__item:before{
font-family: 'Font Awesome 5 Pro';
content: "\f0e0";
margin-right: 10px;
font-weight: bold;
}
.field--name-field-group-members .field--name-field-member-phone{
font-size: 13px;
margin-bottom: 5px;
margin-left: 10px;
}
.field--name-field-group-members .field--name-field-member-phone:before{
font-family: 'Font Awesome 5 Pro';
content: "\f879";
margin-right: 10px;
font-weight: bold;
}
.field--name-field-group-members .field--name-field-member-fax{
font-size: 13px;
margin-bottom: 5px;
margin-left: 10px;
}
.field--name-field-group-members .field--name-field-member-fax:before{
font-family: 'Font Awesome 5 Pro';
content: "\f1ac";
margin-right: 10px;
font-weight: bold;
}
.field--name-field-group-members .field--name-field-member-secretary{
font-size: 13px;
margin-bottom: 5px;
margin-left: 10px;
}
.field--name-field-group-members .field--name-field-member-secretary:before{
font-family: 'Font Awesome 5 Pro';
content: "\f4ff";
margin-right: 3px;
font-weight: bold;
}
.field--name-field-group-members .field--name-field-member-secretary .field__label:after{
content: "|";
margin: 0 3px 0 5px;
}
.field--name-field-group-members .field--name-field-member-remarks{
margin: 10px 0;
font-size: 13px;
}
.field--name-field-group-members .field--name-field-member-remarks ul{
list-style: none;
margin: 0;
padding: 0;
}
.field--name-field-group-members .field--name-field-member-remarks ul li{
margin: 0 0 5px 0;
}
.field--name-field-group-members .field--name-field-member-remarks ul li:before{
font-family: 'Font Awesome 5 Pro';
content: "\f058";
margin-right: 10px;
color: #1b5267;
font-weight: bold;
}
/* Paragraph member horizontal */
.paragraph--type--group-directory-horizontal .field--name-field-group-members-horizontal{
/* display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center; */
text-align: center;
}
.paragraph--type--group-directory-horizontal .field--name-field-group-members-horizontal > .field__item{
width: 90%;
margin: 10px 10px;
display: inline-block;
vertical-align: top;
}
.paragraph--type--group-directory-horizontal .field--name-field-group-members-horizontal > .field__item:hover{
background: #EEEEEE;
}
.paragraph--type--group-directory-horizontal .field--name-field-group-members-horizontal .field--name-field-member-photo{
margin: 0;
float: none;
}
.paragraph--type--group-directory-horizontal .field--name-field-group-members-horizontal .field--name-field-member-photo img{
object-fit: cover;
/* height: 200px; */
/* width: 100%; */
width: 150px;
height: 188px;
border: 7px solid #FFFFFF;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.paragraph--type--group-directory-horizontal .field--name-field-group-members-horizontal .field--name-field-member-name{
/* font-weight: bold;
font-size: 15px;
margin: 0 0 10px 0;
height: 45px;
display: flex;
flex-direction: column;
justify-content: center;
color: #1c3f75; */
font-weight: bold;
color: #1c3f75;
height: 60px;
margin: 0;
font-size: 15px;
line-height: 18px;
display: block;
}
.paragraph--type--group-directory-horizontal .field--name-field-group-members-horizontal .field--name-field-member-name:after{
/* content: "";
width: 30%;
height: 3px;
background: #e0c27c;
margin: 10px auto 0 auto;
display: block; */
}
.paragraph--type--group-directory-horizontal .field--name-field-group-members-horizontal .field--name-field-member-position-long:before{
content: "";
width: 50%;
height: 1px;
background: #ac821f;
margin: 0 auto 10px auto;
display: block;
}
.paragraph--type--group-directory-horizontal .field--name-field-group-members-horizontal .field--name-field-member-position-long{
/* font-size: 12px;
line-height: 18px; */
/* font-weight: bold; */
font-size: 13px;
margin: 0 0 10px 0;
/* height: 50px; */
display: flex;
flex-direction: column;
justify-content: center;
color: #333333;
text-transform: uppercase;
line-height: 16px;
}
.paragraph--type--group-directory-horizontal .field--name-field-group-members-horizontal .field--name-field-member-position-long:before{
/* content: "";
width: 30%;
height: 3px;
background: #e0c27c;
margin: 0 auto 10px auto;
display: block; */
}
.paragraph--type--group-directory-horizontal .field--name-field-member-link a{
font-size: 15px;
color: #1c3f75;
font-weight: bold;
border: 1px solid #000000;
border-radius: 7px;
display: block;
padding: 10px 10px;
transition: background 0.3s ease-out, color 0.2s ease-out;
}
.paragraph--type--group-directory-horizontal .field--name-field-member-link a:hover{
font-size: 15px;
font-weight: bold;
border: 1px solid #1b5267;
background: #1b5267;
color: #e2c076;
}
.paragraph--type--group-directory-horizontal .field--name-field-group-members-horizontal .break{
display: block;
width: 100% !important;
border: 0;
}
/* Paragraph: Image Grids (no caption) */
.paragraph--type---image-grid-no-caption-container .field--name-field-image-grid-items{
display: flex;
flex-wrap: wrap;
}
.paragraph--type---image-grid-no-caption-container .field--name-field-image-grid-items > .field__item{
margin: 10px 10px;
padding: 0;
text-align: center;
width: 22%;
}
.paragraph--type---image-grid-no-caption-container .field--name-field-image-grid-img{
margin: 0;
padding: 0;
}
.paragraph--type---image-grid-no-caption-container .field--name-field-image-grid-img img{
object-fit: contain;
max-width: 100%;
height: 300px;
}
.paragraph--type---image-grid-no-caption-container .paragraph--type--image-grid{
display: flex;
flex-direction: column;
}
.paragraph--type---image-grid-no-caption-container .field--name-field-image-grid-title{
font-weight: bold;
font-size: 25px;
margin-bottom: 30px;
}
.paragraph--type---image-grid-no-caption-container.toggle-on .field--name-field-image-grid-title{
cursor: pointer;
}
.field--name-field-image-grid-title.toggle-close:after{
font-family: 'Font Awesome 5 Pro';
content: "\f0d8";
margin-left: 10px;
}
.field--name-field-image-grid-title:not(.toggle-close):after{
font-family: 'Font Awesome 5 Pro';
content: "\f0d7";
margin-left: 10px;
}
/* Paragraph: Image Grids (with caption) */
.paragraph--type--image-grid-container .field--name-field-image-grid-items{
display: flex;
flex-wrap: wrap;
margin-bottom: 50px;
}
.paragraph--type--image-grid-container .field--name-field-image-grid-items{
}
.paragraph--type--image-grid-container .field--name-field-image-grid-items > .field__item{
margin: 10px 10px;
padding: 0;
text-align: center;
width: 22%;
}
.paragraph--type--image-grid-container .field--name-field-image-grid-img{
margin: 0;
padding: 0;
}
.paragraph--type--image-grid-container:not(.icon-on) .field--name-field-image-grid-img img{
object-fit: cover;
max-width: 100%;
max-height: 100px;
}
.paragraph--type--image-grid-container .paragraph--type--image-grid{
display: flex;
flex-direction: column;
}
.paragraph--type--image-grid-container .field--name-field-image-grid-title{
font-weight: bold;
font-size: 25px;
margin-bottom: 30px;
}
.paragraph--type--image-grid-container .field--name-field-img-grid-caption{
padding: 20px 20px;
}
.field--name-field-image-grid-title.toggle-close:after{
font-family: 'Font Awesome 5 Pro';
content: "\f0d8";
margin-left: 10px;
}
.field--name-field-image-grid-title:not(.toggle-close):after{
font-family: 'Font Awesome 5 Pro';
content: "\f0d7";
margin-left: 10px;
}
/* grid columns */
.paragraph--type--image-grid-container[class^="gridcol-"] .field--name-field-image-grid-items > .field__item{
/* flex-grow: 2; */
/* padding: 30px 20px; */
background: #EEEEEE;
}
.paragraph--type--image-grid-container[class^="gridcol-"] .field--name-field-image-grid-items > .field__item h2{
text-transform: capitalize;
font-size: 20px;
font-weight: bold;
font-family: 'Rufina';
color: #0168A3;
margin: 0 0 20px 0;
}
.gridcol-four-col.paragraph--type--image-grid-container .field--name-field-image-grid-items > .field__item{
width: 100%;
}
.gridcol-three-col.paragraph--type--image-grid-container .field--name-field-image-grid-items > .field__item{
width: 100%;
}
.gridcol-two-col.paragraph--type--image-grid-container .field--name-field-image-grid-items > .field__item{
width: 100%;
}
/* icon on */
.paragraph--type--image-grid.icon-on .field--name-field-image-grid-img img{
border: 1px solid #CCCCCC;
background: #FFFFFF;
border-radius: 50%;
width: 60px;
height: 60px;
padding: 10px;
position: relative;
margin-top: -30px;
top: 0px;
}
/* Paragraph: Card A (Image | Description) */
.paragraph--type--card-a{
display: flex;
flex-direction: column;
margin: 0 -5%;
}
.paragraph--type--card-a .field__item{
margin: 0;
}
.paragraph--type--card-a .field--name-field-card-a-img{
width: 100%;
}
.paragraph--type--card-a .field--name-field-card-a-img img{
width: 100%;
height: auto;
}
.paragraph--type--card-a .field--name-field-card-a-desc{
width: 100%;
padding: 20px;
}
.paragraph--type--card-a .field--name-field-card-a-desc a{
color: #000000;
font-weight: bold;
font-family: 'Rufina';
}
.paragraph--type--card-a .field--name-field-card-a-desc a:before{
font-family: 'Font Awesome 5 Pro';
content: "\f0a9";
color: #ff6b6d;
font-weight: bold;
margin-right: 10px;
}
.paragraph--type--card-a .field--name-field-card-a-desc h2{
font-size: 25px;
font-weight: bold;
font-family: 'Rufina';
margin-bottom: 20px;
}
.paragraph--type--card-a .field--name-field-card-a-desc h3{
color: #3d9bd9;
margin-bottom: 20px;
}
.paragraph--type--card-a .field--type-image img, .field--name-field-user-picture img{
margin: 0;
}
/* Paragraph Tabs */
.paragraph--type--tabs{
}
.paragraph--type--tabs .field--name-field-tab-items > .field__item:not(.is-active){
display: none;
opacity: 0;
}
.paragraph--type--tabs .field--name-field-tab-items > .field__item.is-active{
display: block;
animation-name: tab-item-appear;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
@keyframes tab-item-appear{
0% { opacity: 0; }
100% { opacity: 1; }
}
.paragraph--type--tabs .tabs-button-container{
background: #7d8b98;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 -12% 20px -12%;
}
.paragraph--type--tabs .tabs-button-container button{
display: block;
padding: 5px;
margin: 0 20px;
text-transform: uppercase;
color: #FFFFFF;
font-size: 14px;
border: 0;
background: none;
transition: color 0.2s ease-out;
position: relative;
}
.paragraph--type--tabs .tabs-button-container button.is-active:after{
font-family: 'Font Awesome 5 Pro';
content: "\f0d8";
color: #FFFFFF;
font-weight: bold;
position: absolute;
left: 50%;
bottom: -29px;
}
.paragraph--type--tabs .tabs-button-container button:hover{
color: #000000;
}
.paragraph--type--tabs .field--name-field-tab-title{
text-transform: uppercase;
font-size: 22px;
font-weight: bold;
font-family: 'Rufina';
margin: 50px 0 50px 0;
position: relative;
display: inline-block;
}
.paragraph--type--tabs .field--name-field-tab-title:before{
content: "";
height: 3px;
width: 40%;
background: #ff6b6d;
display: block;
border: 0;
margin-left: 0;
position: absolute;
bottom: -10px;
left: 8px;
z-index: 10;
}
.paragraph--type--tabs .field--name-field-tab-title:after{
content: "";
height: 3px;
width: 3px;
background: #ff6b6d;
display: block;
border: 0;
margin-left: 0;
position: absolute;
bottom: -10px;
left: 0;
z-index: 10;
}
.paragraph--type--tabs .field--name-field-tab-body{
column-count: 1;
}
.paragraph--type--tabs .field--name-field-tab-body strong{
font-size: 20px;
font-family: 'Rufina';
display: inline-block;
margin-bottom: 10px;
font-weight: normal;
}
.paragraph--type--tabs .field--name-field-tab-body ul{
}
.paragraph--type--tabs .field--name-field-tab-body ul li{
margin: 0 0 50px 0;
}
/* Paragraph: 3 column */
.paragraph--type--three-column{
display: flex;
flex-direction: column;
}
.paragraph--type--three-column .field--name-field-column-left{
margin: 0;
}
.paragraph--type--three-column .field--name-field-column-middle{
margin: 0;
}
.paragraph--type--three-column .field--name-field-column-right{
margin: 0;
}
/* Paragraph: 2 column */
.paragraph--type--two-column{
display: flex;
flex-direction: column;
}
/* Paragraph: break */
.field__item.break{
display: block;
width: 100% !important;
border: 0;
}
/* Popup banner */
.popup-banner-container.is-active{
background: rgba(0,0,0,0.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 800;
display: block;
}
.popup-banner-container.not-active{
background: none;
position: unset;
z-index: unset;
display: none;
}
.popup-banner-container .popup-banner{
/* border: 1px solid red; */
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
.popup-banner-container .popup-banner img{
box-shadow: 0 0 20px rgba(0,0,0,0.4);
border-radius: 7px;
width: 100%;
max-width: 70vw;
height: auto;
object-fit: contain;
}
.view-popup-banner.featured .close-button{
background: #FFFFFF;
padding: 10px 20px;
font-weight: bold;
cursor: pointer;
text-transform: uppercase;
z-index: 900;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.view-popup-banner.featured .close-button.is-active{
position: fixed;
top: 20%;
right: 0;
border-radius: 7px 0 0 7px;
}
.view-popup-banner.featured .close-button.is-active span:after{
content: "CLOSE";
display: block;
width: 100%;
height: 100%;
font-size: 14px;
}
.view-popup-banner.featured .close-button.not-active{
position: fixed;
top: unset;
bottom: 0;
right: 12%;
border-radius: 7px 7px 0 0;
background-color: rgb(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
}
.view-popup-banner.featured .close-button.not-active span:after{
content: "View Message";
color: #000000;
display: block;
width: 100%;
height: 100%;
font-size: 12px;
}
.view-popup-banner.featured .close-button.not-active span:before{
font-family: 'Font Awesome 5 Pro';
content: "\f0e0";
font-size: 15px;
color: #000000;
margin-right: 10px;
}
.view-popup-banner.featured .close-button span{
display: flex;
flex-direction: row;
}
.view-popup-banner.featured .views-row{
position: relative;
}
.view-popup-banner.featured .popup-edit{
position: absolute;
top: 10%;
right: 10%;
}
.view-popup-banner.featured .popup-edit a{
display: inline-block;
background: gold;
color: #000000;
border-radius: 5px;
font-size: 12px;
padding: 1px 10px;
border: 1px solid gold;
transition: background 0.3s ease-out, border-color 0.2s ease-out;
}
.view-popup-banner.featured .popup-edit a:hover{
background: #FFFFFF;
border-color: #000000;
color: #000000;
}
/* Hero container */
.hero-container{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Hero header */
.hero-block{
position: relative;
display: none;
}
.view-hero-header .view-content.row{
padding: 0;
margin: 0;
position: relative;
--bs-gutter-x: 0;
}
.view-hero-header .views-field-field-hero-image img{
object-fit: cover;
height: auto;
width: 100%;
}
.view-hero-header .views-field-edit-node{
position: absolute;
top: 50%;
left: 10px;
z-index: 150;
}
/* Site name */
.site-name-block{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
display: none;
}
.site-name-block .logo{
margin: 0 0 10px 0;
animation-name: logo-fade-in;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0;
}
.site-name-block .logo img{
}
.site-name-block h1{
color: #FFFFFF;
}
.site-name-block h1 span.ms{
display: block;
font-weight: 400;
text-shadow: 0 0 10px rgba(0,0,0,0.7);
letter-spacing: 1px;
font-size: 28px;
animation-name: site-name-fade-in;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0;
}
.site-name-block h1 span.en{
display: block;
font-weight: 600;
font-size: 38px;
text-shadow: 0 0 10px rgba(0,0,0,0.7);
letter-spacing: 1px;
animation-name: site-name-fade-in;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
opacity: 0;
}
@keyframes site-name-fade-in{
0% { opacity: 0; transform: translateY(20%); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes logo-fade-in{
0% { opacity: 0; transform: translateY(-20%); }
100% { opacity: 1; transform: translateY(0); }
}
/* Welcome text */
.welcome-block{
display: none;
}
/* Call to action - mouse scroll */
.mouse-scroll-block{
/* width: 100%; */
/* position: absolute;
bottom: 10px;
left: 0; */
z-index: 100;
text-align: center;
/* background: #090f1f; */
/* position: relative; */
z-index: 100;
position: absolute;
bottom: 10%;
width: 100%;
z-index: 100;
animation-name: mouse-scroll-fade-in;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-delay: 2s;
opacity: 0;
}
@keyframes mouse-scroll-fade-in{
0% { opacity: 0; transform: translateY(-20%); }
100% { opacity: 1; transform: translateY(0); }
}
.mouse-scroll-container {
border: 1px solid rgba(255,255,255,0.3);
border-radius: 20px;
padding: 8px;
background: rgba(255,255,255,0.1);
width: 46px;
margin: 0 auto;
}
.mouse-scroll-container .mouse-icon{
color: #FFFFFF;
margin-top: 10px;
}
.mouse-scroll-container .arrow-down{
color: #FFFFFF;
}
.mouse-scroll-container .arrow-down .arrow-one{
color: #FFFFFF;
font-size: 25px;
font-weight: normal;
animation-name: mouse-arrow-pulse;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
opacity: 0;
}
.mouse-scroll-container .arrow-down .arrow-two{
color: #FFFFFF;
font-size: 35px;
font-weight: normal;
position: relative;
margin-top: -20px;
animation-name: mouse-arrow-pulse;
animation-duration: 0.5s;
animation-direction: alternate;
animation-delay: 0.11s;
animation-iteration-count: infinite;
opacity: 0;
}
.mouse-scroll-block.mobile-view .arrow-one,
.mouse-scroll-block.mobile-view .arrow-two,
.mouse-scroll-block.mobile-view .mouse-icon{
color: #CCCCCC;
}
@keyframes mouse-arrow-pulse{
0% { opacity: 0; transform: translateY(-5px); }
100% { opacity: 1; transform: translateY(0px); }
}
.mouse-scroll-block .field__item{
margin: 0;
}
/* Branding container */
.branding-container{
background: rgba(0,0,0,1);
padding: 5px 0 5px 10px;
position: relative;
top: 0;
left: 0;
width: 100%;
z-index: 110;
display: flex;
transition: background 0.5s ease-out, padding 0.5s ease-out;
}
body.toolbar-horizontal .branding-container{
top: 0;
}
body.toolbar-vertical .branding-container{
top: 0;
}
body.scrolled.toolbar-vertical.toolbar-fixed .branding-container{
top: 39px;
}
body.toolbar-horizontal.toolbar-tray-open .branding-container{
top: 79px;
}
body.scrolled .branding-container{
backdrop-filter: blur(5px);
/* padding: 0; */
position: fixed;
}
/* Branding left */
.branding-container .branding-left{
/* width: 25%; */
display: flex;
align-items: flex-end;
/* border: 2px dashed green; */
/* flex-grow: 2; */
}
/* Branding right */
.branding-container .branding-right{
/* border: 2px dashed salmon; */
/* width: 25%; */
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
/* flex-grow: 2; */
}
/* Branding center */
.branding-container .branding-center{
/* border: 2px dashed magenta; */
width: 50%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-grow: 2;
}
/* Sabah crest */
body:not(.path-frontpage) .sabah-crest-block{
/* display: none; */
}
body:not(.path-frontpage).scrolled .sabah-crest-block{
display: block;
}
.sabah-crest-block p{
margin: 0;
padding: 0;
}
.sabah-crest-block img{
object-fit: cover;
height: 50px;
width: auto;
transition: height 0.3s ease-out;
/* padding: 7px; */
}
body.scrolled .sabah-crest-block img{
height: 61px;
}
/* Hamburger menu */
.hamburger-menu-block{
position: relative;
z-index: 700;
background: #1c3f75;
/* border-radius: 50%; */
width: 45px;
height: 45px;
transition: width 0.3s ease-out, height 0.3s ease-out;
}
.hamburger-menu-block .hamburger-label{
display: none;
}
.hamburger-menu-block .hamburger-inner,
.hamburger-menu-block .hamburger-inner:after,
.hamburger-menu-block .hamburger-inner:before {
background-color: #FFFFFF;
/* background-color: #e0c27c; */
width: 24px;
border-radius: 0;
height: 2px;
}
.hamburger-menu-block .hamburger{
padding: 0;
}
.hamburger-menu-block .hamburger-box{
width: 25px;
padding: 23px;
display: flex;
justify-content: center;
align-items: center;
top: 2px;
left: 1px;
}
.hamburger-menu-block .field--type-text-with-summary{
height: 63px;
width: 63px;
}
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner:after,
.hamburger.is-active .hamburger-inner:before{
background-color: #FFFFFF;
}
.hamburger-menu-block .hamburger-inner:before{
top: -8px;
}
.hamburger-menu-block .hamburger-inner:after{
bottom: -8px
}
/* Main menu slider region */
.mobile-menu-container{
background: url("../images/mobile-menu-bg.jpg") 40% 100%;
position: fixed;
top: 0;
left: 0;
height: 100%;
z-index: 600;
display: flex;
flex-direction: column;
padding-top: 100px;
justify-content: center;
overflow-y: scroll;
overflow-x: hidden;
transform: translateX(-100%);
transition: transform 0.3s ease-out;
padding: 5% 5%;
width: 70%;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
border-left: 1px solid rgba(0,0,0,0.2);
}
.mobile-menu-container.is-active{
transform: translateX(0);
}
/* Mobile menu block */
.mobile-menu-block{
}
.mobile-menu-block ul{
padding: 0;
margin: 0;
}
.mobile-menu-block ul li{
padding: 0;
margin: 0;
transition: background 0.3s ease-out;
}
.mobile-menu-block ul li a.nav-link,
.mobile-menu-block ul li span.nav-link{
color: rgba(255,255,255,1);
/* border-bottom: 1px solid rgba(255,255,255,0.1); */
padding: 10px 20px;
text-transform: uppercase;
font-weight: 600;
font-size: 17px;
cursor: pointer;
transition: background 0.3s ease-out;
}
.mobile-menu-block ul li a.is-active{
color: #5fa1db;
}
.mobile-menu-block ul li a.nav-link.active,
.mobile-menu-block ul li span.nav-link.active{
color: #5fa1db;
}
.mobile-menu-block ul li.dropdown-item span.nolink.active{
color: #5fa1db;
}
.mobile-menu-block ul li .dropdown-toggle::after{
font-family: 'Font Awesome 5 Pro';
content: "\f0d7";
font-size: 10px;
border: 0;
margin: 0 0 0 10px;
font-weight: bold;
color: #FFFFFF;
cursor: pointer;
/* background: rgba(0,0,0,0.1); */
}
.mobile-menu-block ul li .dropdown-toggle::after{
/* border: 1px dashed red; */
position: absolute;
right: 0;
top: 0;
width: 53px;
height: 53px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mobile-menu-block ul li li .dropdown-toggle::after{
border: none;
position: relative;
width: auto;
height: auto;
display: inline-block;
background: none;
}
.mobile-menu-block ul li .dropdown-toggle.show::after{
content: "\f0d8";
}
/* dropdown */
.mobile-menu-block ul ul.dropdown-menu{
position: relative !important;
transform: translate(0) !important;
/* padding: 20px 10px; */
/* padding: 0 0 0 20px; */
background: none;
border: 0;
border-radius: 0;
/* left: 20px !important; */
padding-left: 24px;
padding-bottom: 25px;
}
.mobile-menu-block ul ul ul.dropdown-menu{
/* padding-left: 20px; */
}
.mobile-menu-block ul ul.dropdown-menu li.dropdown-item a,
.mobile-menu-block ul ul.dropdown-menu li.dropdown-item span{
padding: 10px 20px;
display: block;
color: rgba(255,255,255,1);
font-size: 16px;
white-space: normal;
font-weight: 600;
border: 0;
border-left: 3px solid #5fa1db;
/* border-bottom: 1px solid rgba(255,255,255,0.1); */
}
.mobile-menu-block ul ul.dropdown-menu li.dropdown-item span{
font-weight: bold;
}
.mobile-menu-block ul ul ul.dropdown-menu li.dropdown-item a,
.mobile-menu-block ul ul ul.dropdown-menu li.dropdown-item span{
/* padding: 7px 10px; */
font-size: 14px;
opacity: 0.85;
transition: opacity 0.3s ease-out;
/* border: 1px solid red; */
}
.mobile-menu-block ul ul ul.dropdown-menu li.dropdown-item a:hover,
.mobile-menu-block ul ul ul.dropdown-menu li.dropdown-item span:hover{
opacity: 1;
}
.mobile-menu-block ul ul ul.dropdown-menu li.dropdown-item a:before,
.mobile-menu-block ul ul ul.dropdown-menu li.dropdown-item span:before{
font-family: 'Font Awesome 5 Pro';
content: "\f178";
font-size: 10px;
color: #5fa1db;
font-weight: bold;
margin-right: 7px;
}
.mobile-menu-block ul ul.dropdown-menu li.dropdown-item:hover{
background: none;
}
.mobile-menu-block ul ul.dropdown-menu li.dropdown-item.active{
background: none;
}
.mobile-menu-block ul ul.dropdown-menu li a.is-active,
.mobile-menu-block ul ul.dropdown-menu li a.active{
font-weight: bold;
color: #5fa1db;
}
.mobile-menu-block ul > .menu-item--expanded > ul.dropdown-menu.show{
/* background: rgba(0,0,0,0.2); */
}
/* dropdown transition */
@keyframes smooth_dropdown_menu{
0% { opacity: 0; }
100% { opacity: 1; }
}
.mobile-menu-block ul ul.dropdown-menu.show{
animation-name: smooth_dropdown_menu;
animation-duration: 0.6s;
animation-fill-mode: both;
}
.mobile-menu-block ul li a.nav-link:before,
.mobile-menu-block ul li span.nav-link:before{
font-family: 'Font Awesome 5 Pro';
cursor: pointer;
font-weight: bold;
margin-right: 15px;
font-size: 14px;
transition: color 0.3s ease-out;
}
/* Sub menu block (inner page) */
.sub-menu-block{
background: #022239;
}
.sub-menu-block ul.navbar-nav{
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
text-align: center;
margin: 0;
padding: 0 10px 30px 10px;
}
.sub-menu-block ul.navbar-nav li{
margin: 0;
padding: 0;
}
.sub-menu-block ul.navbar-nav li a{
text-transform: uppercase;
color: #FFFFFF;
padding: 10px 10px;
position: relative;
}
.sub-menu-block ul.navbar-nav li a.active{
color: #FFFFFF;
}
.sub-menu-block ul.navbar-nav li a.active:after{
content: "";
width: 30%;
margin: 0 auto;
position: relative;
border: 1px solid #4fa6f3;
display: block;
}
/* blur everything else when menu is open */
#main-wrapper,
.header-first,
.header-second-a,
.header-second-c,
.site-name-block,
.site-footer{
transition: filter 0.3s ease-out;
}
body.menu-open #main-wrapper,
body.menu-open .header-second-a,
body.menu-open .header-second-c,
body.menu-open .site-name-block,
body.menu-open .site-footer,
body.menu-open .logo-block,
body.menu-open .sabah-crest-block,
body.menu-open .malaysia-crest-block,
body.menu-open .hero-container{
filter: blur(3px);
}
/* overlay when menu is open */
.menu-open-overlay-block{
position: absolute;
}
.menu-open-overlay.is-active{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: rgba(255,255,255,0.8); */
background: rgba(0,0,0,0.67);
animation-name: overlay-fade-in;
animation-fill-mode: forwards;
animation-duration: 0.6s;
z-index: 20;
}
@keyframes overlay-fade-in{
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Breadcrumb */
.breadcrumb-block{
margin-bottom: 50px;
display: none;
}
.breadcrumb-block ol.breadcrumb{
justify-content: flex-end;
margin: 0 0 20px 0;
padding: 0;
}
.breadcrumb-block ol.breadcrumb li{
margin: 0 10px 0 0;
padding: 0;
}
/* About SPA block (Home) */
.about-spa-block{
padding: 7% 10%;
text-align: center;
}
.about-spa-block .field--name-field-paragraphs{
display: flex;
flex-direction: column;
}
.about-spa-block .field--name-field-paragraphs > .field__item:first-child{
width: 100%;
display: none;
}
.about-spa-block .field--name-field-paragraphs > .field__item:nth-child(2){
width: 100%;
padding-left: 5%;
background: url("../images/intro-front-map.png") 50% 0% no-repeat;
background-size: 70%;
}
.about-spa-block .field--name-field-paragraphs .field__item:nth-child(2) h2{
margin-top: 20px;
padding-bottom: 40px;
}
.about-spa-block .field--name-field-paragraphs .field__item:nth-child(2) p{
font-size: 16px;
line-height: 25px;
}
.about-spa-block .field--name-field-paragraphs .field__item:nth-child(2) a{
display: flex;
height: 80px;
width: 80px;
background: #50a5f5;
text-align: center;
flex-direction: column;
justify-content: center;
border-radius: 50%;
text-transform: uppercase;
color: #FFFFFF;
font-size: 12px;
line-height: 16px;
position: relative;
margin: 50px auto;
border: 1px solid transparent;
padding-top: 10px;
}
.about-spa-block .field--name-field-paragraphs .field__item:nth-child(2) a:after{
content: "";
display: block;
height: 100px;
width: 100px;
border: 1px solid #50a5f5;
border-radius: 50%;
position: absolute;
top: -16px;
left: -18px;
}
.about-spa-block .field--name-field-paragraphs .field__item:nth-child(2) a:hover{
background: #FFFFFF;
color: #50a5f5;
z-index: 20;
border: 1px solid #50a5f5;
}
.about-spa-block .field--name-field-paragraphs .field__item:nth-child(2) a:hover:after{
}
/* Ports (Home) */
.ports-home-block{
background: #012943;
padding: 5% 5%;
}
body.scrolled .ports-home-block{
padding-top: 100px;
}
.ports-home-block h2.block-title{
color: #FFFFFF;
font-family: "Rufina";
font-size: 23px;
font-weight: bold;
margin: 0 0 30px 0;
text-align: center;
}
.view-ports.home{
text-align: right;
overflow: hidden;
position: relative;
}
.view-ports.home .view-content{
--bs-gutter-x: 0;
display: inline-block;
/* border: 2px dashed magenta; */
width: 100%;
position: relative;
overflow: hidden;
}
.view-ports.home .view-content .views-row{
/* margin: 10px; */
position: relative;
padding: 10px 10px;
}
.view-ports.home .view-content .views-row .port-container{
position: relative;
}
.view-ports.home .view-content .views-row .port-container h2{
display: inline-block;
background: rgba(0,0,0,0.8);
padding: 15px 30px;
color: #FFFFFF;
text-transform: uppercase;
position: absolute;
top: 60%;
right: 7px;
z-index: 20;
font-size: 16px;
}
.view-ports.home .view-content .views-row .port-container h2:after{
content: "";
background: #50a5f5;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
transition: width 0.3s ease-out;
}
.view-ports.home .view-content .views-row:hover .port-container h2:after{
width: 100%;
}
.view-ports.home .view-content .views-row .port-container h2 span{
position: relative;
z-index: 20;
}
.view-ports.home .view-content .views-row .port-container .cover{
/* width: 430px; */
/* height: auto; */
border-radius: 7px;
overflow: hidden;
border: 2px solid #FFFFFF;
}
.view-ports.home .view-content .views-row .port-container .cover img{
object-fit: cover;
height: 300px;
/* height: 100%; */
width: 100%;
border-radius: 7px;
transition: transform 0.3s ease-out;
}
.view-ports.home .view-content .views-row:hover .port-container .cover img{
transform: scale(1.2);
}
.view-ports.home .view-content .views-row .views-field-edit-node{
position: absolute;
top: 2px;
right: 2px;
}
.view-ports.home .view-content .views-row.slick-current:after{
content: "";
width: 98%;
height: 2px;
background: #50a5f5;
display: block;
position: absolute;
bottom: 0;
left: 6px;
padding: 0 10px;
}
.view-ports.home .arrow-left{
position: absolute;
left: 0;
top: 30%;
border-radius: 0;
padding: 12px 15px !important;
background: none;
color: #FFFFFF;
border: 1px solid #FFFFFF;
transition: background 0.3s ease-out;
}
.view-ports.home .arrow-left:hover{
background: #FFFFFF;
color: #333333;
}
.view-ports.home .arrow-right{
position: absolute;
left: unset;
right: 0;
top: 30%;
border-radius: 0;
padding: 12px 15px !important;
background: none;
color: #FFFFFF;
border: 1px solid #FFFFFF;
transition: background 0.3s ease-out;
}
.view-ports.home .arrow-right:hover{
background: #FFFFFF;
color: #333333;
}
.view-ports.home .view-footer{
text-align: center;
}
.view-ports.home .view-footer a{
margin-top: 10px;
background: #012943;
border: 1px solid #FFFFFF;
display: inline-block;
padding: 10px 3%;
color: #FFFFFF;
text-transform: uppercase;
transition: background 0.3s ease-out, color 0.2s ease-out;
}
.view-ports.home .view-footer a:hover{
background: #FFFFFF;
color: #000000;
}
.view-ports.home .views-field-view-node a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 30;
}
.view-ports.home .views-field-view-node a span{
display: none;
}
/* Ports listing */
.view-ports.listing{
}
.view-ports.listing ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.view-ports.listing ul li{
width: 100%;
position: relative;
margin: 0 0 10px 0;
padding: 10px;
flex-grow: 2;
}
.view-ports.listing ul li .port-container{
position: relative;
}
.view-ports.listing ul li .port-container .title-container{
background: rgba(0,0,0,0.8);
position: absolute;
top: 60%;
right: 0;
z-index: 20;
}
.view-ports.listing ul li .port-container .title-container h2{
font-size: 14px;
padding: 12px 25px;
color: #FFFFFF;
text-transform: uppercase;
margin: 0;
position: relative;
z-index: 20;
}
.view-ports.listing ul li .port-container .title-container span{
content: "";
background: #50a5f5;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
transition: width 0.3s ease-out;
}
.view-ports.listing ul li:hover .title-container span{
width: 100%;
}
.view-ports.listing ul li .port-container h2 span{
position: relative;
z-index: 20;
}
.view-ports.listing ul li .port-container .cover{
/* width: 430px; */
/* height: auto; */
border-radius: 7px;
overflow: hidden;
}
.view-ports.listing ul li .port-container .cover img{
object-fit: cover;
height: 250px;
width: 100%;
border-radius: 7px;
transition: transform 0.3s ease-out;
}
.view-ports.listing ul li:hover .port-container .cover img{
transform: scale(1.2);
}
.view-ports.listing ul li .views-field-edit-node{
position: absolute;
top: 12px;
right: 12px;
}
.view-ports.listing ul li .views-field-view-node a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 30;
}
.view-ports.listing ul li .views-field-view-node a span{
display: none;
}
.view-ports.listing ul li .port-container .cover .overlay{
background: #022239;
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
z-index: 20;
top: 0;
left: 0;
border-radius: 7px;
transition: opacity 0.3s ease-out;
}
.view-ports.listing ul li:hover .port-container .cover .overlay{
opacity: 0.6;
}
/* map view button */
.view-ports.listing .map-view-button{
text-align: center;
margin: 50px 0;
}
.view-ports.listing .map-view-button a{
border: 1px solid #012943;
display: inline-block;
padding: 10px 3%;
color: #FFFFFF;
text-transform: uppercase;
background: #012943;
transition: background 0.3s ease-out, color 0.2s ease-out, background 0.3s ease-out;
}
.view-ports.listing .map-view-button a:hover{
border: 1px solid #000000;
color: #000000;
background: #FFFFFF;
}
.view-ports.listing .map-view-button i{
margin-left: 10px;
}
/* Ports map */
body.path-ports-map #main-wrapper{
background: #022239;
}
.view-ports.map{
/* border: 1px solid red; */
width: 90%;
margin: 0 auto;
position: relative;
}
.view-ports.map .map-container{
position: relative;
}
.view-ports.map .port-point-container{
position: absolute;
}
.view-ports.map .port-point-container .pointer{
position: relative;
width: 15px;
height: 15px;
border-radius: 50%;
background: #b82221;
transform: scale(0.8);
transition: transform 0.3s ease-out;
cursor: pointer;
}
.view-ports.map .port-point-container .pointer:hover{
transform: scale(1);
}
.view-ports.map .port-point-container .pointer .wrapper{
border: 2px solid #b82221;
border-radius: 50%;
width: 23px;
height: 23px;
position: relative;
left: -4px;
top: -4px;
}
.view-ports.map .port-point-container .popup-box{
position: absolute;
bottom: 15px;
right: 20px;
background: #FFFFFF;
width: 250px;
height: 100px;
border: 1px solid #CCCCCC;
/* padding: 20px 20px 20px 50px; */
box-shadow: 0 0 10px rgba(0,0,0,0.1);
display: flex;
flex-direction: row;
justify-content: center;
visibility: hidden;
}
.view-ports.map .port-point-container .popup-box:after{
content: "";
width: 10px;
height: 10px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #b82221;
position: absolute;
bottom: -5px;
right: 0;
transform: rotate(45deg);
}
.view-ports.map .port-point-container[data-flip-h="flip-h"] .popup-box:after{
bottom: -5px;
left: 0;
transform: rotate(133deg);
}
.view-ports.map .port-point-container[data-flip-v="flip-v"] .popup-box:after{
bottom: unset;
top: -5px;
right: 0;
transform: rotate(-45deg);
}
.view-ports.map .port-point-container[data-flip-v="flip-v"][data-flip-h="flip-h"] .popup-box:after{
bottom: unset;
top: -5px;
right: 0;
transform: rotate(-137deg);
}
.view-ports.map .port-point-container .popup-box.active{
display: flex;
animation-name: port-popup-appear;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1.9);
}
.view-ports.map .port-point-container .popup-box:not(.active){
display: none;
}
@keyframes port-popup-appear{
0% { opacity: 0; transform: translateY(10px); }
100% { opacity: 1; transform: translateY(0px); }
}
.view-ports.map .port-point-container .popup-box h2.port-name{
font-weight: bold;
color: #000000;
font-size: 16px;
margin: 0;
width: 80%;
padding: 10px 20px;
display: flex;
align-items: center;
}
.view-ports.map .port-point-container .popup-box .cover{
width: 20%;
}
.view-ports.map .port-point-container[data-flip-h="flip-h"] .popup-box h2.port-name{
justify-content: flex-end;
}
.view-ports.map .port-point-container[data-flip-h="flip-h"] .popup-box .cover{
}
.view-ports.map .port-point-container .popup-box .cover img{
position: relative;
top: -35px;
left: -70px;
}
.view-ports.map .port-point-container[data-flip-v="flip-v"] .popup-box{
bottom: unset;
top: 15px;
}
.view-ports.map .port-point-container[data-flip-v="flip-v"] .popup-box .cover img{
top: unset;
bottom: -20px;
}
.view-ports.map .port-point-container[data-flip-h="flip-h"] .popup-box{
flex-direction: row-reverse;
left: 20px;
}
.view-ports.map .port-point-container[data-flip-h="flip-h"] .popup-box .cover img{
left: unset;
right: 0;
}
.view-ports.map .port-point-container .popup-box .cover img{
object-fit: cover;
height: 110px;
width: 110px;
border: 3px solid white;
box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
.view-ports.map .port-point-container .edit-button{
position: absolute;
top: -30%;
right: 0%;
z-index: 10;
}
.view-ports.map .port-point-container[data-flip-h="flip-h"] .edit-button{
/* right: unset;
left: 0; */
}
.view-ports.map .port-point-container .edit-button a{
display: inline-block;
background: gold;
color: #000000;
border-radius: 5px;
font-size: 12px;
padding: 1px 10px;
border: 1px solid gold;
transition: background 0.3s ease-out, border-color 0.2s ease-out;
}
.view-ports.map .no-in-map{
transition: background 0.2s ease-out;
}
.view-ports.map .no-in-map.active{
background: #b82221;
color: #FFFFFF;
z-index: 100;
}
.view-ports.map .port-point-container.active{
z-index: 100;
}
.view-ports.map .views-field-edit-node a{
}
.view-ports.map .views-field-edit-node a:hover{
background: #FFFFFF;
border-color: #000000;
color: #000000;
}
.view-ports.map a.view-node{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.view-ports.map a.view-node span{
visibility: hidden;
}
.view-ports.map .no-in-map{
position: absolute;
padding: 10px 10px;
width: 40px;
height: 40px;
top: -15px;
left: -15px;
background: #FFFFFF;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #000000;
font-weight: bold;
border: 3px solid #022239;
}
/* ports map attachment-after */
.view-ports.map .attachment-after{
margin-top: 20px;
}
.view-ports.map .attachment-after .view-content ul{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.view-ports.map .attachment-after .view-content ul li{
width: 90%;
margin: 0 10px 20px 10px;
padding: 5px 5px;
background: #FFFFFF;
position: relative;
}
.view-ports.map .attachment-after .view-content ul li .port-container{
text-align: center;
padding: 20px 20px;
}
.view-ports.map .attachment-after .view-content ul li .port-container h2{
margin: 0;
text-align: center;
}
.view-ports.map .attachment-after .view-content ul li .views-field-nothing{
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.view-ports.map .close-button{
z-index: 0;
position: absolute;
top: 1px;
right: 1px;
}
.view-ports.map .close-button i{
font-size: 12px;
cursor: pointer;
display: block;
font-weight: 100;
background: #b82221;
color: #FFFFFF;
padding: 2px 5px;
}
.view-ports.map .close-button span{
visibility: hidden;
display: block;
width: 0;
height: 0;
}
.view-ports.map .close-button:hover i{
background: #000000;
}
.view-ports.map .port-point-container[data-flip-v="flip-v"] .close-button{
top: unset;
bottom: 1px;
}
.view-ports.map .port-point-container[data-flip-h="flip-h"] .close-button{
right: unset;
left: 1px;
}
/* ports listing button */
.view-ports.map .map-list-button{
text-align: center;
margin: 50px 0;
}
.view-ports.map .map-list-button a{
border: 1px solid #012943;
display: inline-block;
padding: 10px 3%;
color: #FFFFFF;
text-transform: uppercase;
background: #012943;
transition: background 0.3s ease-out, color 0.2s ease-out, background 0.3s ease-out;
}
.view-ports.map .map-list-button a:hover{
border: 1px solid #000000;
color: #000000;
background: #FFFFFF;
}
.view-ports.map .map-list-button i{
margin-right: 10px;
}
/* port controls (view all, hide all) */
.port-controls{
position: absolute;
top: 0;
right: 0;
display: none;
}
.port-controls ul{
display: flex;
flex-direction: row;
list-style: none;
margin: 0;
padding: 0;
justify-content: flex-end;
}
.port-controls ul li{
margin: 10px 1px;
padding: 0;
}
.port-controls ul li button{
border: 0;
padding: 10px 20px;
}
/* Port sub menu */
.port-sub-menu-block{
background: #022239;
position: relative;
z-index: 150;
padding: 20px 0;
}
.port-sub-menu-block .view-ports .view-content ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 80%;
justify-content: center;
margin: 0 auto
}
.port-sub-menu-block .view-ports .view-content ul li{
}
.port-sub-menu-block .view-ports .view-content ul li a{
text-transform: uppercase;
color: #FFFFFF;
padding: 10px 10px;
font-size: 14px;
}
/* Latest news (featured) */
.view-latest-news.featured .row{
--bs-gutter-x: 0;
}
.view-latest-news.featured ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0;
}
.view-latest-news.featured ul li{
width: 100%;
margin: 0;
padding: 0;
position: relative;
}
.view-latest-news.featured ul li .views-field-nothing{
height: 100%;
}
.view-latest-news.featured ul li .news-container{
padding: 5% 10% 5% 10%;
height: 100%;
/* border: 2px dashed orangered; */
position: relative;
z-index: 10;
color: #FFFFFF;
text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
.view-latest-news.featured ul li:nth-child(3n+1) .news-container{
display: flex;
justify-content: flex-end;
}
.view-latest-news.featured ul li:nth-child(odd) .news-container{
color: #000000;
text-shadow: none;
}
.view-latest-news.featured ul li .news-container h2{
position: relative;
z-index: 10;
font-weight: bold;
text-transform: uppercase;
}
.view-latest-news.featured ul li:nth-child(odd) .news-container h2{
color: #002a6f;
}
.view-latest-news.featured ul li .news-container h2:after{
content: "";
border-bottom: 2px solid gold;
width: 40%;
display: block;
padding-top: 5px;
margin-bottom: 20px;
}
.view-latest-news.featured ul li:nth-child(even) .news-container .summary{
visibility: hidden;
}
.view-latest-news.featured ul li .cover{
position: absolute;
top: 0;
left: 0;
/* border: 2px dashed magenta; */
width: 100%;
height: 100%;
overflow: hidden;
}
.view-latest-news.featured ul li .cover img{
object-fit: cover;
width: 100%;
height: 100%;
transition: transform 0.3s ease-out;
}
.view-latest-news.featured ul li:hover .cover img{
transform: scale(1.2);
}
.view-latest-news.featured ul li:nth-child(odd) .cover img{
opacity: 0;
}
.view-latest-news.featured ul li .cover .overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(0, 42, 111,0.7);
}
.view-latest-news.featured ul li:nth-child(odd) .cover .overlay{
display: none;
}
.view-latest-news.featured ul li .views-field-edit-node{
position: absolute;
top: 5px;
left: 5px;
}
.view-latest-news.featured ul li .more-button{
margin: 20px 0 0 0;
}
.view-latest-news.featured ul li .more-button a{
text-transform: uppercase;
font-weight: 600;
display: inline-block;
padding: 10px 0;
position: relative;
transition: padding 0.3s ease-out;
text-shadow: none;
}
.view-latest-news.featured ul li .more-button a:after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: gold;
z-index: 5;
transition: width 0.3s ease-out;
}
.view-latest-news.featured ul li .more-button a:hover{
padding-left: 10px;
padding-right: 10px;
}
.view-latest-news.featured ul li .more-button a:hover:after{
width: 100%;
}
.view-latest-news.featured ul li:nth-child(odd) .more-button a{
color: #333333;
}
.view-latest-news.featured ul li:nth-child(even) .more-button a{
color: #FFFFFF;
transition: color 0.2s ease-out, padding 0.3s ease-out;
}
.view-latest-news.featured ul li:nth-child(even) .more-button a:hover{
color: #333333;
}
.view-latest-news.featured ul li .more-button a span{
position: relative;
z-index: 10;
}
.view-latest-news.featured ul li .news-date{
background: #002a6f;
color: gold;
display: inline-block;
padding: 3px 10px;
border-radius: 5px;
font-size: 11px;
margin: 0 0 5px 0;
text-transform: uppercase;
font-weight: bold;
}
/* Latest news (listing) */
.view-latest-news.listing .views-field-edit-node{
position: unset;
}
/* Inner page banner container */
.inner-page-banner-container{
position: relative;
overflow: hidden;
}
.inner-page-banner-container .overlay{
background: rgba(2, 33, 57, 0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
}
.inner-page-banner-container .views-field-field-page-banner img{
padding: 0;
margin: 0;
position: relative;
object-fit: cover;
width: 100%;
animation-name: page-banner-animate;
animation-duration: 15s;
animation-iteration-count: infinite;
}
@keyframes page-banner-animate{
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.inner-page-banner-container .top-fade{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 20%;
z-index: 30;
background: rgb(2,34,57);
background: linear-gradient(180deg, rgba(2,34,57,0.8603816526610644) 46%, rgba(255,255,255,0) 100%);
}
.inner-page-banner-container .bottom-fade{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
z-index: 30;
background: rgb(2,34,57);
background: linear-gradient(0deg, rgba(2,34,57,1) 46%, rgba(255,255,255,0) 100%);
}
/* Inner banner: Page title */
.inner-page-banner-container #block-lpps-2024-page-title{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
padding: 10px 5%;
}
.inner-page-banner-container #block-lpps-2024-page-title > .content{
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
align-items: center;
text-align: center;
padding-top: 150px;
flex-wrap: wrap;
}
.inner-page-banner-container #block-lpps-2024-page-title .content h1{
color: #FFFFFF;
font-size: 30px;
letter-spacing: 2px;
font-weight: 500;
word-break: break-word;
text-shadow: 0 0 15px rgba(0,0,0,0.5);
}
/* Page banner block (default) */
.page-banner-default-block{
}
/* Page banner basic page */
.inner-page-banner-container .page-banner-basic-page{
position: absolute;
width: 100%;
height: 100%;
}
/* Page banner block */
.page-banner-block{
position: absolute;
top: 0;
left: 0;
border: 1px solid red;
}
/* Page logo */
.page-logo-block{
display: none;
}
.page-logo-block .content{
margin: 0;
}
.page-logo-block .view-content{
display: block;
}
.page-logo-block .view-content .page-logo-container img{
object-fit: contain;
height: 150px;
width: auto;
}
/* Port page - view all ports button */
.port-view-listing-button-block{
margin: 50px 0 0 0;
}
.port-view-all-button a{
display: inline-block;
padding: 10px 20px;
border: 1px solid #002c47;
background: #002c47;
color: #FFFFFF;
}
.port-view-all-button a i{
font-weight: 100;
font-size: 11px;
margin-right: 10px;
}
/* Inner page logo and sitename */
.logo-sitename-inner-page-block{
display: none;
}
.logo-sitename-inner-page-container{
display: flex;
flex-direction: row;
align-items: center;
text-align: center;
transition: height 0.3s ease-out;
}
body.scrolled .logo-sitename-inner-page-container{
}
/* Inner page: Sabah crest */
.sabah-crest-inner-page{
transition: height 0.3s ease-out;
/* display: none; */
}
.sabah-crest-inner-page img{
object-fit: contain;
height: 115px;
width: auto;
transition: height 0.5s ease-out;
position: relative;
top: -15px;
}
body.scrolled .sabah-crest-inner-page img{
height: 0;
}
/* Inner page: Site name */
.logo-sitename-inner-page-block{
transition: height 0.3s ease-out;
}
body:not(.path-frontpage).scrolled .logo-sitename-inner-page-block{
display: none;
}
.logo-sitename-inner-page-block h1{
font-weight: bold;
color: #FFFFFF;
margin: 0 20px;
/* display: none; */
}
.logo-sitename-inner-page-block h1 span.ms{
display: block;
font-weight: 400;
text-shadow: 0 0 10px rgba(0,0,0,0.7);
font-size: 24px;
animation-name: site-name-fade-in;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0;
}
.logo-sitename-inner-page-block h1 span.en{
display: block;
font-weight: 600;
font-size: 38px;
text-shadow: 0 0 10px rgba(0,0,0,0.7);
animation-name: site-name-fade-in;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
opacity: 0;
}
/* body.scrolled .logo-sitename-inner-page-block h1{
display: none;
} */
/* Inner page: LPPS logo (at center Site Name) */
.lpps-logo-inner-page img{
transition: height 0.5s ease-out;
height: 80px;
}
body.scrolled .lpps-logo-inner-page img{
height: 0;
}
/* Inner page: LPPS logo (appear when scrolled) */
.lpps-logo-block{
/* display: none; */
}
.lpps-logo-block p{
margin: 0;
}
.lpps-logo-block img{
height: 40px;
width: auto;
object-fit: contain;
}
body:not(.path-frontpage).scrolled .lpps-logo-block,
body.path-frontpage.scrolled .lpps-logo-block{
display: block;
}
/* body.scrolled .lpps-logo-block img{
height: 43px;
} */
/* Sidebar menu (either Submenu or Sidebar menu to be enabled at a time) */
.sidebar .sidebar-menu-block.block{
background: #EEEEEE;
border: 0;
border-top: 6px solid #d9201e;
padding: 15% 10%;
}
.sidebar .sidebar-menu-block ul{
}
.sidebar .sidebar-menu-block ul li{
margin: 0;
padding: 0;
}
.sidebar .sidebar-menu-block ul li a,
.sidebar .sidebar-menu-block ul li span{
color: #d9201e;
opacity: 0.8;
white-space: normal;
padding: 10px 10px;
text-decoration: underline !important;
}
.sidebar .sidebar-menu-block ul li:hover a{
opacity: 1;
}
.sidebar .sidebar-menu-block ul li a.active{
color: #808080;
opacity: 1;
}
.sidebar .sidebar-menu-block ul li ul.dropdown-menu{
background: #0c252f;
padding: 0;
margin: 0;
border-radius: 0;
}
.sidebar .sidebar-menu-block ul li ul.dropdown-menu li{
padding: 0;
margin: 0;
}
.sidebar .sidebar-menu-block ul li ul.dropdown-menu li a,
.sidebar .sidebar-menu-block ul li ul.dropdown-menu li span{
font-size: 14px;
padding: 10px 20px;
display: block;
transition: background 0.3s ease-out;
}
.sidebar .sidebar-menu-block ul li ul.dropdown-menu li:hover,
.sidebar .sidebar-menu-block ul li ul.dropdown-menu li:hover{
background: none;
}
.sidebar .sidebar-menu-block ul li ul.dropdown-menu li a:hover,
.sidebar .sidebar-menu-block ul li ul.dropdown-menu li span:hover{
background: rgba(0,0,0,0.5);
}
/* Main */
#main{
padding: 5% 5%;
position: relative;
z-index: 100;
}
body.path-frontpage #main{
display: none;
}
/* Photo gallery (date assembled) */
.view-photo-gallery .date{
display: flex;
flex-direction: column;
color: #FFFFFF;
text-align: center;
padding: 10px 25px;
font-weight: bold;
margin-right: 10px;
background: url("../images/shield-bg-darkblue.png") no-repeat;
background-size: contain;
/* background: #022239; */
/* width: 91px;
height: 91px; */
transition: transform 0.3s ease-out;
justify-content: center;
}
.view-photo-gallery.listing .date{
width: 100px;
height: 115px;
}
.view-photo-gallery.individual .date{
width: 75px;
height: 85px;
}
.view-photo-gallery .date .wrapper{
position: relative;
top: 0;
}
.view-photo-gallery .date .day{
font-size: 22px;
line-height: 22px;
/* background: red; */
position: relative;
top: -5px;
transition: color 0.3s ease-out;
}
.view-photo-gallery .date .month{
font-size: 13px;
line-height: 13px;
text-transform: uppercase;
/* background: green; */
position: relative;
top: -3px;
transition: color 0.3s ease-out;
}
.view-photo-gallery .date .year{
font-size: 12px;
line-height: 13px;
padding: 3px 0;
position: relative;
top: 1px;
border-top: 2px solid #50a5f5;
transition: color 0.3s ease-out;
}
.view-photo-gallery ul li:hover .date .day,
.view-photo-gallery ul li:hover .date .month,
.view-photo-gallery ul li:hover .date .year{
/* color: #ffdf66; */
}
.view-photo-gallery ul li:hover .date{
transform: scale(1.2);
}
/* Photo gallery (listing) */
.view-photo-gallery.listing h3{
text-align: right;
font-size: 30px;
}
.view-photo-gallery.listing ul{
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
.view-photo-gallery.listing ul li{
position: relative;
width: 90%;
margin: 0 0 30px 0;
}
.view-photo-gallery.listing ul li .views-field-field-photo-album-photos{
margin-bottom: 10px;
}
.view-photo-gallery.listing ul li .views-field-field-photo-album-photos img{
object-fit: cover;
width: 100%;
height: 200px;
}
.view-photo-gallery.listing ul li .views-field-title{
}
.view-photo-gallery.listing ul li .views-field-title h2{
font-weight: bold;
color: #000000;
font-size: 18px;
line-height: 24px;
}
.view-photo-gallery.listing ul li .views-field-title h2 a{
font-weight: bold;
color: #000000;
}
.view-photo-gallery.listing .date{
position: absolute;
top: -30px;
left: -20px;
}
.view-photo-gallery.listing .item-list:after{
content: "";
background: url("../images/border-pattern-rv2.png") 50% 0 no-repeat;
background-size: contain;
height: 20px;
width: 214px;
display: block;
text-align: center;
margin: 0 auto 50px auto;
}
/* Photo Gallery (individual) */
.view-photo-gallery.individual .album-container{
display: flex;
flex-direction: column-reverse;
}
.view-photo-gallery.individual .album-container .photos{
width: 100%;
margin: 0 0 20px 0;
}
.view-photo-gallery.individual .album-container .photos ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0;
padding: 0;
justify-content: center;
}
.view-photo-gallery.individual .album-container .photos ul li{
width: 25%;
border: 0;
margin: 0;
padding: 0;
overflow: hidden;
height: 100px;
border: 1px solid #FFFFFF;
}
.view-photo-gallery.individual .album-container .photos ul li img{
width: 100%;
height: 100px;
object-fit: cover;
transition: transform 0.2s ease-out;
}
.view-photo-gallery.individual .album-container .photos ul li:hover img{
transform: scale(1.2);
}
.view-photo-gallery.individual .album-container .description{
width: 100%;
}
.view-photo-gallery.individual .header{
display: flex;
flex-direction: row;
align-items: center;
}
.view-photo-gallery.individual .header h2{
font-weight: bold;
}
.view-photo-gallery.individual .summary{
margin-top: 20px;
}
.view-photo-gallery.individual .view-footer .back-button{
text-align: center;
}
/* Download */
.view-downloads.listing{
}
.view-downloads.listing table td ol{
margin: 0;
padding: 0;
border: 0;
display: flex;
}
.view-downloads.listing table td ol li{
margin: 0 0 2px 0;
padding: 0;
border: 0;
background: none;
display: inline-block;
}
.view-downloads.listing table td ol li .download-link{
}
.view-downloads.listing table td ol li .download-link a{
display: block;
padding: 10px 10px;
font-size: 13px;
width: 110px;
border: none;
background: none;
border-radius: 5px;
}
.view-downloads.listing .views-field-title .category{
font-size: 11px;
color: #777777;
background: #EEEEEE;
display: inline-block;
padding: 1px 10px;
border-radius: 7px;
}
.view-downloads.listing .views-field-edit-node{
position: relative;
top: 0;
}
.view-downloads.listing th.views-field-edit-node{
width: 5%;
}
.view-downloads.listing .views-field-nothing{
text-align: center;
width: 20%;
}
.view-downloads.listing .views-field-nothing .download{
}
.view-downloads.listing .views-field-nothing .download a{
background: #1b4172;
display: inline-block;
padding: 10px 20px;
color: #FFFFFF;
border-radius: 7px;
}
.view-downloads.listing .views-field-nothing .download a i{
margin-right: 5px;
position: relative;
top: -2px;
}
.view-downloads.listing .views-field-nothing .download a span{
}
.view-downloads.listing .views-field-field-file ul{
background: none;
}
.view-downloads.listing .views-field-field-file ul li{
border: 0;
background: none;
}
/* Integrity section on Home page */
.integrity-container{
padding: 2%;
}
.integrity-container .wrapper{
position: relative;
background: #012943;
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 7%;
justify-content: center;
}
.integrity-container .wrapper:after{
content: "";
background: transparent url("../images/integrity-jalan-terus-rv7c.png") no-repeat 100% 10%;
background-size: 100%;
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
z-index: 10;
}
/* Integrity promo header */
.integrity-promotion-block{
width: 100%;
text-align: center;
position: relative;
z-index: 20;
}
.integrity-promotion-block .content-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
}
.integrity-promotion-block .content-wrapper h1{
color: #FFFFFF;
font-size: 30px;
position: relative;
font-family: 'Rufina';
}
.integrity-promotion-block .content-wrapper h1 span.integrity{
font-size: 55px;
}
.integrity-promotion-block .content-wrapper h1:after{
content: "";
width: 50%;
height: 2px;
margin: 20px auto;
display: block;
background: gold;
}
.integrity-promotion-block .content-wrapper h2{
font-size: 15px;
color: #FFFFFF;
text-transform: unset;
font-family: "Roboto";
font-weight: normal;
}
.integrity-promotion-block .content-wrapper a{
}
.integrity-promotion-block .content-wrapper .know-more-button{
text-align: center;
}
.integrity-promotion-block .content-wrapper .know-more-button a{
display: inline-block;
background: #FFFFFF;
color: #000000;
padding: 10px 20px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
position: relative;
}
.integrity-promotion-block .content-wrapper .know-more-button a:before{
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 100%;
background: #50a5f5;
color: #FFFFFF;
z-index: 20;
transition: height 0.3s ease-out;
}
.integrity-promotion-block .content-wrapper .know-more-button:hover a:before{
height: 100%;
}
.integrity-promotion-block .content-wrapper .know-more-button span{
position: relative;
z-index: 30;
transition: color 0.15s ease-out;
}
.integrity-promotion-block .content-wrapper .know-more-button:hover span{
color: #FFFFFF;
}
/* Integrity promo slider */
/* .integrity-awareness-promo-slider-block{
width: 100%;
}
.integrity-awareness-promo-slider-block img{
border-radius: 7px;
padding: 0 !important;
height: 200px !important;
} */
/* .integrity-promo-slider-block{
border: 1px solid red;
width: 100%;
height: 100%;
}
.integrity-promo-slider-block .field--name-field-slider-img img{
height: 200px;
width: auto;
object-fit: contain;
}
.integrity-promo-slider-block .paragraph--type--img-slider-group{
width: auto;
}
.integrity-promo-slider-block .paragraph--type--img-slider-group .field__item{
margin: 0;
} */
/* Site footer */
.site-footer{
background: none;
font-family: "Roboto";
font-size: 14px;
padding: 0;
border: 0;
}
.site-footer .content{
font-size: 14px;
color: #FFFFFF;
}
.site-footer .block{
border: 0;
margin: 0;
padding: 0;
}
/* Footer A */
.related-agency-block{
width: 100%;
margin: 0 auto !important;
padding: 5% 0 !important;
}
.related-agency-block h2.block-title{
text-align: center;
color: #000000;
font-size: 20px;
font-weight: bold;
margin-bottom: 50px;
}
.related-agency-block ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
}
.related-agency-block ul li{
position: relative;
}
.related-agency-block ul li img{
object-fit: contain;
width: 100%;
height: 150px;
margin: 0 auto;
padding: 10px;
}
.related-agency-block ul li .views-field-edit-node{
position: relative;
text-align: center;
}
.related-agency-block ul li .views-field-edit-node a{
color: #000000;
}
/* Related links */
.site-footer .related-links-block.block{
width: 80%;
margin: 50px auto;
}
.related-links-block .paragraph--type--img-slider-group .field--name-field-slider-img img{
object-fit: contain;
width: 100%;
height: 90px;
margin: 0 auto;
padding: 10px;
}
.site-footer .related-links-block.block h2.block-title{
color: #000000;
font-size: 20px;
text-align: center;
margin: 20px 0;
text-transform: capitalize;
}
.related-links-block .arrow-right,
.related-links-block .arrow-left{
background: #EEEEEE;
border-color: transparent;
}
.related-links-block .arrow-left{
left: -50px;
}
.related-links-block .arrow-right{
right: -50px;
}
.related-links-block .arrow-right:hover,
.related-links-block .arrow-left:hover{
background: #EEEEEE;
color: #000000;
}
/* Footer B */
.footer-b-container{
background: #002c47;
padding: 5% 5% 0 5%;
}
.footer-b-container .wrapper{
border: 1px solid #50a5f5;
display: flex;
flex-wrap: wrap;
flex-direction: column;
background: rgba(0,0,0,0.1) url("../images/map-bg-footer.png") no-repeat 100% 0%;
/* background-size: contain; */
align-content: stretch;
padding: 5%;
}
.footer-b-container .wrapper .block{
/* border: 1px solid red; */
}
/* Footer C */
.footer-c-container{
background: #002c47;
padding: 0 5% 5% 5%;
text-align: right;
}
.footer-c-container .wrapper{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
/* Last updated */
.site-footer .last-updated-block{
padding: 10px 0;
margin: 0 10px;
}
.site-footer .last-updated-block .last-updated-container{
font-size: 12px;
}
.site-footer .last-updated-block .last-updated-container i{
margin-right: 2px;
font-weight: bold;
}
.site-footer .last-updated-block .last-updated-container a{
border-bottom: 1px dashed rgba(255,255,255,0.8);
padding-bottom: 2px;
}
/* QR code */
.qr-code-block{
position: relative;
display: none;
}
.qr-code-popup{
display: none;
position: absolute;
top: -80px;
left: -25px;
}
.qr-code-popup.is-active{
display: block;
animation-name: qr-popup;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
.qr-code-popup img{
width: auto;
height: 100px;
max-width: unset;
}
.qr-code-trigger{
display: block;
margin: 11px 5px;
padding: 2px 10px;
background: #FFFFFF;
border-radius: 7px;
font-weight: bold;
font-size: 12px;
letter-spacing: 2px;
color: #000000;
cursor: pointer;
transition: background 0.3s ease-out, color 0.2s ease-out;
}
.qr-code-trigger.is-active{
background: #000000;
color: #FFFFFF;
}
.qr-code-trigger:hover{
background: #000000;
color: #FFFFFF;
}
.qr-code-close-button{
position: relative;
top: 0;
right: 0;
z-index: 200;
color: red;
cursor: pointer;
transition: color 0.2s ease-out;
}
.qr-code-close-button:hover{
color: #FFFFFF;
}
@keyframes qr-popup{
0% { opacity: 0; top: -80px; }
100% { opacity: 1; top: -122px;}
}
/* Visitor Analytics */
.site-footer .visitor-analytics-block{
padding: 10px 0;
}
.site-footer .visitor-analytics-block .visitor-analytics-container{
}
.site-footer .visitor-analytics-block .visitor-analytics-container a{
font-size: 11px;
display: block;
padding: 2px 10px;
border-radius: 7px;
background: #EEEEEE;
color: #000000;
}
.site-footer .visitor-analytics-block .visitor-analytics-container i{
margin-right: 2px;
}
/* Logo footer */
.logo-footer-block{
width: 100%;
text-align: center;
margin: 10px 0 !important;
}
/* Address footer */
.address-footer-block{
width: 100%;
text-align: center;
margin: 10px 0 !important;
}
.address-footer-block ul{
list-style: none;
margin: 0;
padding: 0 !important;
}
.address-footer-block ul li{
margin: 0;
padding: 0;
}
/* Map footer */
.map-footer-block{
width: 100%;
margin: 10px 0 !important;
}
.map-footer-block iframe{
height: 250px;
}
/* Members footer */
.members-footer-block{
width: 100%;
margin: 10px 0 !important;
}
.members-footer-block .arrow-left,
.members-footer-block .arrow-right{
background: none;
border: 0;
border-radius: 0;
color: #FFFFFF !important;
}
.members-footer-block .arrow-left:hover,
.members-footer-block .arrow-right:hover{
border: 0;
}
.members-footer-block .arrow-left{
left: -10%;
}
.members-footer-block .arrow-right{
right: -10%;
}
.members-footer-block .field--name-field-img-slider-image img{
height: 90px;
}
.members-footer-block .paragraph--type--img-slider-item .field--name-field-slider-img img{
object-fit: contain;
width: 100%;
height: 90px;
padding: 10px;
margin: 0;
transition: background 0.3s ease-out;
}
.members-footer-block .paragraph--type--img-slider-item .field--name-field-slider-img img:hover{
background: rgba(255,255,255,0.2);
}
.members-footer-block .paragraph--type--img-slider-item .field__item,
.members-footer-block .field--name-field-slider-main-title.field__item{
margin: 0;
}
/* Copyright */
.copyright-block{
width: 100%;
border-top: 1px solid #50a5f5 !important;
padding-top: 5px !important;
margin-top: 15px !important;
text-align: center;
padding-top: 20px !important;
}
.copyright-block p{
margin: 0;
}
/* i-Adu footer block */
.i-adu-block{
width: 100%;
border-top: 1px solid #50a5f5 !important;
margin-top: 15px !important;
}
.footer-b-container .i-adu-block .wrapper{
background: #1c3f75;
border: 1px dashed rgba(255,255,255,0.5);
border-radius: 7px;
padding: 10px;
margin: 10px auto;
width: 300px;
}
.i-adu-block .wrapper i{
margin-right: 10px;
color: #FFFFFF;
}
.i-adu-block .wrapper .title{
font-size: 16px;
font-weight: bold;
color: gold;
/* color: #f56060; */
}
.i-adu-block .wrapper .description{
font-size: 11px;
line-height: 15px;
}
/* Footer menu */
.footer-menu-block{
width: 100%;
border-top: 1px solid #50a5f5 !important;
padding-top: 20px !important;
margin-top: 15px !important;
}
.footer-menu-block ul{
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
justify-content: center;
}
.footer-menu-block ul li{
margin: 0 25px 0 0;
padding: 0;
}
.footer-menu-block ul li:last-child{
margin-right: 0;
}
.footer-menu-block ul li a{
color: #FFFFFF;
text-transform: uppercase;
margin: 0 0;
padding: 0 0;
}
.footer-menu-block ul li a:hover{
color: #FFFFFF;
}
.footer-menu-block ul li.active a.is-active{
color: #FFFFFF;
font-weight: bold;
}
/* Edit button */
.views-field-edit-node{
position: absolute;
z-index: 20;
top: 5px;
right: 5px;
}
.views-field-edit-node a{
display: inline-block;
background: gold;
color: #000000;
border-radius: 5px;
font-size: 12px;
padding: 1px 10px;
border: 1px solid gold;
transition: background 0.3s ease-out, border-color 0.2s ease-out;
}
.views-field-edit-node a:hover{
background: #FFFFFF;
border-color: #000000;
color: #000000;
}
/* Pager */
ul.pagination{
text-align: center;
display: flex;
justify-content: center !important;
/* display: inline-block !important; */
/* float: right; */
}
ul.pagination li{
display: inline-block;
margin: 0 !important;
padding: 0;
width: auto !important;
}
ul.pagination li a{
color: #333333;
font-size: 12px;
}
ul.pagination li:hover a{
color: #333333;
}
ul.pagination .page-item.active .page-link{
background: #2a6f8a !important;
border: 1px solid #2a6f8a;
color: #FFFFFF;
font-size: 12px;
}
/* Slick dots */
.slick-dots{
text-align: center;
margin: 10px 0 0 0;
}
.slick-dots li{
display: inline-block;
margin: 0;
padding: 0;
}
.slick-dots li button{
font-size: 0;
line-height: 0;
padding: 5px 1px;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li:before{
font-family: 'Font Awesome 5 Pro';
content: "\f111";
cursor: pointer;
font-size: 9px;
transition: content 0.3s ease-out;
color: #FFFFFF;
transition: color 0.3s ease-out;
}
.slick-dots li.slick-active:before{
content: "\f192";
transition: color 0.3s ease-out;
}
.slick-dots li:hover:before{
content: "\f111";
color: #808080;
}
/* Arrows */
.arrow-left{
position: absolute;
top: 35%;
left: -1%;
background: rgba(255,255,255,1);
padding: 5px 12px !important;
z-index: 5;
cursor: pointer;
font-size: 15px;
transition: background 0.3s ease-out;
border-radius: 50%;
padding: 10px 17px;
/* box-shadow: 0 0 10px rgba(0,0,0,0.2); */
width: auto !important;
border: 2px solid #CCCCCC;
transition: border 0.3s ease-out;
}
.arrow-right{
position: absolute;
top: 35%;
right: -1%;
background: rgba(255,255,255,1);
padding: 5px 12px !important;
z-index: 5;
cursor: pointer;
font-size: 15px;
transition: background 0.3s ease-out, color 0.3s ease-out;
border-radius: 50%;
padding: 10px 17px;
/* box-shadow: 0 0 10px rgba(0,0,0,0.2); */
width: auto !important;
border: 2px solid #CCCCCC;
transition: border 0.3s ease-out;
}
.arrow-left:hover,
.arrow-right:hover{
border: 2px solid #FFFFFF;
}
/* Slick dots */
ul.slick-dots{
margin: 10px 0;
padding: 0;
}
ul.slick-dots li{
padding: 0 10px;
}
ul.slick-dots li:before{
color: #CCCCCC;
font-weight: bold;
}
ul.slick-dots li.slick-active:before{
color: #0098a6;
font-weight: bold;
content: "\f111";
}
/* Breadcrumb */
ol.breadcrumb{
justify-content: center;
}
ol.breadcrumb li a{
color: #0a6a82;;
}
/* View grouping */
.view .view-grouping .view-grouping-header{
font-size: 30px;
font-weight: bold;
font-family: 'Rufina';
text-align: right;
border-bottom: 1px solid #CCCCCC;
padding-bottom: 20px;
margin-bottom: 30px;
}
.view .view-grouping .view-grouping-content h3{
font-size: 20px;
font-weight: bold;
font-family: 'Rufina';
color: #28666e;
margin: 0 0 50px 0;
}
/* Maintenance */
body.maintenance-page{
background-image: url(../images/welcome.jpg);
background-position: 0 50%;
background-repeat: no-repeat;
background-color: #033F63 !important;
background-size: cover;
color: #FFFFFF !important;
text-align: center;
}
body.maintenance-page .layout-container{
display: flex;
height: 100vh;
}
body.maintenance-page a{
transition: color 0.3s ease-out;
}
body.maintenance-page .layout-container .maintenance-container{
align-self: center;
width: 100%;
}
body.maintenance-page .layout-container .maintenance-container h1{
font-weight: bold;
color: #FFFFFF;
}
body.maintenance-page .layout-container .maintenance-container h2{
margin: 0 0 0 0;
text-transform: uppercase;
font-size: 15px;
}
body.maintenance-page .logo{
margin: 0 0 15px 0;
}
body.maintenance-page .layout-container .maintenance-container .content{
width: 70%;
margin: 0 auto;
padding: 5% 3%;
backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.4);
box-shadow: 0 0 20px rgba(0,0,0,0.2);
border-radius: 20px;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
position: relative;
z-index: 100;
}
body.maintenance-page .layout-container .maintenance-container .logo img{
width: auto;
height: 80px;
}
body.maintenance-page .layout-container .maintenance-container .content h1.title-bm{
}
body.maintenance-page .layout-container .maintenance-container .content h1.title-en{
font-size: 14px;
border-top: 1px solid rgba(255,255,255,0.5);
padding-top: 5px;
width: 80%;
margin: 0 auto;
}
body.maintenance-page .layout-container .maintenance-container .content h2.coming-soon{
font-size: 12px;
display: block;
}
body.maintenance-page .contact-details{
/* background: rgba(0,0,0,0.3);
position: relative;
z-index: 100; */
}
body.maintenance-page .contact-details p{
color: #FFFFFF;
width: 60%;
margin: 20px auto;
}
body.maintenance-page .contact-details a{
color: #FFFFFF;
font-weight: bold;
}
body.maintenance-page .contact-details .social-media{
width: 50%;
margin: 0 auto;
}
body.maintenance-page .contact-details ul.social-media{
list-style: none;
display: flex;
flex-direction: row;
justify-content: center;
}
body.maintenance-page .contact-details ul.social-media li{
margin: 0 0 5px 0;
}
body.maintenance-page .contact-details ul.social-media li i{
margin-right: 10px;
}
body.maintenance-page .contact-details ul.social-media li span{
display: none;
}
body.maintenance-page .contact-details ul.social-media li:hover a{
color: #a1d7ff;
}
body.maintenance-page .video{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 10;
}
body.maintenance-page .video video{
object-fit: cover;
width: 100%;
height: 100%;
object-position: 0 100%;
}
/* Back button */
.back-button{
margin-top: 20px;
}
.back-button a{
background: #022239;
color: #FFFFFF;
display: inline-block;
padding: 10px 15px;
border: 1px solid #3f4d72;
transition: background 0.3s ease-out, border 0.3s ease-out, color 0.2s ease-out;
}
.back-button a:hover{
background: #FFFFFF;
border: 1px solid #000000;
color: #000000;
display: inline-block;
padding: 10px 15px;
}
.back-button a:before {
font-family: 'Font Awesome 5 Pro';
content: "\f0a8";
font-weight: bold;
margin-right: 10px;
}
/* view exposed form */
.views-exposed-form{
/* background: #EEEEEE; */
padding: 10px 10px;
border-radius: 7px;
margin-bottom: 30px;
}
.views-exposed-form .flex-wrap{
/* flex-direction: column; */
justify-content: flex-end;
}
.views-exposed-form .row{
justify-content: flex-end;
}
.views-exposed-form .row > *{
width: auto;
align-self: flex-start;
}
.views-exposed-form .mb-3{
margin: 5px 5px !important;
}
.views-exposed-form .mb-3:first-child{
/* border-right: 1px solid #CCCCCC; */
padding-right: 15px;
}
.views-exposed-form .btn-primary{
background-color: #1b3f73;
border-color: #1b3f73;
margin-left: 10px;
font-size: 13px;
}
.views-exposed-form .btn-primary:hover,
.views-exposed-form .btn-primary:focus{
background-color: #1b3f73;
border-color: #1b3f73;
}
.views-exposed-form input::placeholder,
.views-exposed-form select{
font-size: 13px;
}
.views-exposed-form select{
padding: 9px 10px;
}
.views-exposed-form .bef-links ul{
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.views-exposed-form .bef-links ul li{
margin: 0 5px;
padding: 0;
}
.views-exposed-form .bef-links ul li a{
display: block;
border-radius: 5px;
border: 1px solid #808080;
background: #EEEEEE;
color: #000000;
padding: 5px 20px;
transition: background 0.3s ease-out, color 0.2s ease-out;
}
.views-exposed-form .bef-links ul li a:hover{
background: #FFFFFF;
color: #000000;
}
/* fix pdf icon */
.file--application-pdf{
background-image: url("/themes/bootstrap_barrio/images/icons/application-pdf.png") !important;
}
/* Status messages */
.messages.messages--status {
background: lightgreen !important;
padding: 10px 5%;
}
/* Meteor horizontal */
.meteor-horizontal-block {
position: absolute;
top: calc(50% + 110px);
left: 37%;
width: 50%;
margin: 0 auto;
overflow: hidden; /* Ensure no overflow beyond parent container */
}
.meteor-horizontal-block .meteor-horizontal {
width: 100px; /* Length of the meteor (includes the trail) */
height: 1px; /* Thickness of the meteor */
display: block;
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.3), rgba(255, 0, 0, 0)); /* Gradient fading out */
border-radius: 2px; /* Smooth edges */
z-index: 100;
opacity: 0; /* Ensure it's invisible before animation starts */
animation: meteor-shot-horizontal 0.5s ease-in-out forwards, meteor-fade 0.5s ease-in-out forwards;
animation-delay: 1.6s; /* Delay before the animation starts */
}
/* Horizontal movement */
@keyframes meteor-shot-horizontal {
0% { transform: translateX(0px); } /* Start just outside the viewport */
100% { transform: translateX(40vw); } /* Move across the entire viewport */
}
/* Fade-in and fade-out */
@keyframes meteor-fade {
0% { opacity: 0; } /* Invisible at the start */
10% { opacity: 1; } /* Fade in */
100% { opacity: 0; } /* Fade out at the end */
}
/* Video gallery (listing) */
.view-video{
}
.view-video .view-content ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.view-video .view-content ul li{
width: 33%;
padding: 20px;
position: relative;
}
.view-video .view-content ul li .video-container .video{
margin-bottom: 20px;
}
.view-video .view-content ul li .video-container .video img{
object-fit: cover;
width: 100%;
height: 300px;
}
.view-video .view-content ul li .video-container .details .date{
font-weight: bold;
color: #1b3f73;
margin-bottom: 10px;
}
.view-video .view-content ul li .video-container .details h2{
text-align: justify;
text-align-last: left;
font-weight: bold;
}