@charset "utf-8";
:root { 
	font-size: 16px; 
	--color-text: #2B2B2B;
	--color-red: #ED1C24;
	/* --color-maroon: #AF272F; */
	--color-maroon: #B5292D;
	--color-yellow: #FFCC00;
	--color-orange: #EE7623;
	--color-purple: #9B4977;
	--color-green: #00935F;
	--color-blue: #2A6CA8; 
	--color-seablue: #2D7490;
	--color-light-grey: #F5F5F5;
	--color-grey: #c1c2c2;
	--color-dark-grey-lighter: #5C5C5C;
	--color-dark-grey: #0B0B0B;
	--color-menu-light-grey: #e2e2e2;
	--color-white: #fff;
	--color-black: #000000;
	--banner-font-size: 3.75rem; /* 60px */
	--h1-font-size: 3.75rem; /* 60px */
	--h2-font-size: 3.125rem; /* 50px */
	--h3-font-size: 2.5rem; /* 40px */
	--h4-font-size: 1.5625rem; /* 25px */
	--menu-font-size: 0.9375rem; /* 15px */
	--font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	--header-height: 5.875rem; 
	--min-form-width: 1200px; 
	--connect-width: 800px;
	--max-content-width: 1200px; 
	--min-width: auto; 
	--max-width: 1600px; 
}

body { font-family: var(--font-family); font-weight: 400; /* font-size: 1.25rem; */ color:var(--color-text); margin: 0; background-color: var(--color-white); line-height: 1.2; min-width: var(--min-width); scroll-behavior: smooth; position: relative; } 
.mobile { display: none; } 
.hide { display: none; }
.desktop { display: block; }
.note { font-size: smaller; font-style: italic; line-height: 1.2; }

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0px; }
h1 { color:var(--color-text); font-size: var(--h1-font-size); letter-spacing: 5px; line-height: 1; margin-bottom: 25px; }
h2 { font-size: var(--h2-font-size); letter-spacing: 5px; text-transform: uppercase; color: var(--color-text); margin-bottom: 0.5rem; /*25px*/ line-height: 1; }
h3 { font-size: var(--h3-font-size); line-height: 1; margin-bottom: 10px; letter-spacing: 5px; }
h4 { font-size: var(--h4-font-size); line-height: 1; margin-bottom: 10px; letter-spacing: 5px; }

a { text-decoration: none; outline: none; }
a:link { color: var(--color-text); text-decoration: none; }
a:visited { color: var(--color-text); text-decoration: none; }
a img { border: none; }
strong { font-weight: bold; }
a.btn, .btn { color: var(--color-white) !important; background-color: var(--color-red); padding: 15px 25px; line-height: 1; letter-spacing: 3px; border-radius: 25px; text-decoration: none; font-weight: 600; display: inline-block; *display: inline; zoom: 1; text-transform: uppercase; min-width: 300px /*135px*/; font-size: 1rem; max-width: 100%; box-sizing: border-box; text-align: center; }
a.btn:hover, .btn:hover { background-color: var(--color-yellow); color: var(--color-text) !important; }
a.btn-fill-red, .btn-fill-red { font-weight: 600; color: var(--color-white) !important; background-color: var(--color-red); padding: 15px 25px; line-height: 1; letter-spacing: 3px; border-radius: 25px; display: inline-block; *display: inline; zoom: 1; min-width: 65px; text-transform: uppercase; outline: none; text-shadow: none; border: none; }
a.btn-fill-red:hover, .btn-fill-red：hover { background-color: #ffcc00; color: var(--color-text) !important; text-decoration: none; }
a.btn-fill-red.black:hover, .btn-fill-red.black:hover { background-color: var(--color-text); color: var(--color-white) !important; text-decoration: none; }
a.btn-fill-yellow { font-weight: 600; color: var(--color-text) !important; background-color: #ffcc00; letter-spacing: 3px; padding: 15px 25px; border-radius: 25px; display: inline-block; *display: inline; zoom: 1; text-transform: uppercase; width: 300px; font-size: 1rem; max-width: 100%; box-sizing: border-box; text-align: center; outline: none; text-shadow: none; line-height: 1; }
a.btn-fill-yellow:hover { background-color: var(--color-text); color: var(--color-white) !important; text-decoration: none; }
a.btn-fill-yellow.red:hover { background-color: var(--color-red); color: var(--color-white) !important; text-decoration: none; }
a.link, .link { color: var(--color-white); line-height: 1; letter-spacing: 3px; font-weight: 600; text-transform: uppercase; background-color: transparent; padding: 0px; border: none; border-bottom: solid 1px transparent !important; outline: none; position: relative; padding-bottom: 5px; }
a.link:hover, .link:hover { border-color: var(--color-white); }
.link.button02:hover { border-bottom: solid 1px var(--color-white); }
.link.yellow { color: var(--color-yellow); }

p { margin: 0 0 1em 0; }
p:last-child { margin-bottom: 0px; }

select, textbox, input, textarea { color: var(--color-text); font-family: var(--font-family); outline: none; font-size: 1rem; }

.wrapper { max-width: var(--max-width); padding: 6.25rem 40px; margin: auto; box-sizing: border-box; }


/* ---------------------- h-cover ------------------------- */
/*
#h-cover { background-image: url(themes/petros-home-cover.webp); background-size: cover; background-position: center; height: 100vh; position: relative; z-index: 1003; }
#h-cover h1 { font-size: var(--h4-font-size); color: var(--color-red); letter-spacing: 0px; margin-bottom: 0px; }
#h-cover .wrapper { width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: center;  }
#h-cover .wrapper .text { width: 50%; }
*/ 

/* ---------------------- header ------------------------- */
/* .home #header-holder { position: relative; } */
#header-holder { top: 0px; z-index: 1002; width: 100%; min-width: var(--min-width); position: fixed; background-color: var(--color-white); border-bottom: solid 1px var(--color-light-grey); }

#header-holder .wrapper { display: flex; position: relative; padding: 0px 40px; align-items: flex-end; max-width: auto; max-width: initial; max-width: none; }
#header-holder.white-bg { background-color: var(--color-white); }
body.subpage.textonly #header-holder, body.join-us #header-holder { background-color: var(--color-white) !important; }
body.subpage h1 { color: var(--color-red); line-height: 1; margin-bottom: 0px; }

#logo { margin: 20px 0px; }
#logo a, #logo a img { display:block; height: 45px; }

#header-holder #pg-title { margin: 0px 2rem; flex-grow: 1; color: var(--color-red); letter-spacing: 2px; text-transform: uppercase; }


/* ---------------------- search_result ------------------------- */
#search-result .wrapper { padding-top: calc(6.25rem + 85px); max-width: var(--max-content-width); }
#search-result h4 { color: var(--color-red); }

#search-panel { position: relative; }
#search-panel #icon-search { }
#search-panel #icon-search img { height: 1.3rem; width: 1.3rem; display: block; }
#search_form { display: none; position: absolute; top: 50px; right: 0px; width: 200px; }

/* Search box styling */
#search_box { transition: border-color 0.2s, box-shadow 0.2s; margin-bottom: 20px; max-width: 200px; padding: 12px 40px 12px 20px; }
#search_box:focus { border-color: #4a90e2; box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2); }

/* Button styling */
#search_form button { display: none; position: absolute; right: 10px; top: 13px; z-index: 1;  border: none; background-color: unset;  cursor: pointer; }

#search_form button:hover { opacity: 0.7; }
#search_form button img { height: 1.3rem; width: 1.3rem; }
#search_result .highlight { background-color: yellow;  font-weight: bold; }
#search_result .date { font-style: italic; }

table#result_table thead {
	display: none;
}

table#result_table td {
	border-top: 1px solid #ccc;
	padding: 8px 0px;
}

table#result_table td > div > p {
}

table#result_table td > div {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1rem;
}

table#result_table td > div > a {
	width: 5rem;
	height: 5rem;
	flex-shrink: 0; 
}

table#result_table td > div > a > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
}
table.dataTable td.dataTables_empty { display: none; }
#search_error { display: none; }

html.mfp-helper { overflow: hidden; height: 100%; }
body.home .mfp-container { background-color: transparent; padding: 40px !important }
body.home .mfp-auto-cursor .mfp-content { box-sizing: border-box; padding: 0px; border-radius: 30px; max-width: var(--max-content-width); }
body.home .mfp-auto-cursor .mfp-content h2 { letter-spacing: 0px; font-size: var(--h3-font-size); }
body.home .mfp-close { width: 3.125rem; height: 3.125rem; right: 30px; top: 20px; }

/* -------------------- menu ------------------------- */
#menu-icon {  }
#menu-icon .hamburger { width: 2rem; cursor: pointer; }
#menu-icon .hamburger span { display: block; height: 5px; background: var(--color-red); margin: 5px 0; border-radius: 10px; }
#menu-icon #btn-close { width: 32px; height: 32px; background: url(themes/icon-close-popup.png) no-repeat center center; background-size: contain; cursor: pointer; display: none; }

/*
#menu { position: fixed; top: 0; right: 0; width: 100%; height: 100%; z-index: 1000; pointer-events: none; }
*/
#menu-top { margin-left: 2rem; display: flex; flex-grow: 1; gap: 2rem; }
#menu { display: flex; flex-grow: 1; justify-content: center; }
#menu > div { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--color-white); padding: 80px 40px 40px 40px; box-sizing: border-box; box-shadow: 0 8px 16px rgba(0,0,0,0.3); transition: transform 0.5s ease-in-out, opacity 0.3s; align-items: flex-end; clip-path: ellipse(80% 65% at 70% 30%); z-index: 2; position: relative; }
#menu.show { transform: translate(0, 0); pointer-events: auto; opacity: 1; }
#menu.show::after { content: ""; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; background-color: rgba(0,0,0,0.8); z-index: 1; }
#menu .container { padding-right: 3.125rem; height: 60vh; position: relative; }
#menu.show .container { }

#menu div.thumb { box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.2); position: absolute; display: none; top: 39px; padding: 15px 10px; background-color: var(--color-white); }
#menu ul li.last:hover div.thumb { right: -30px; left: unset; }
#menu div.thumb > ul { display: block !important; }
#menu div.thumb .img { width: 300px; padding: 15px; }
#menu div.thumb .img > img { width: 100%; border-radius: 25px; display: block; }
#menu ul :hover div.thumb { display: flex; flex-direction: row; height: auto; z-index: 200; border-radius: 25px; left: -30px; }
#menu ul ul li { border: none; background-color: transparent; width: 210px;  }
/* #menu ul ul a { opacity: 0.2; } */
#menu ul ul a, #menu ul ul ul a { margin-left: auto; width: auto;  }
/*
#menu ul ul :hover > a { opacity: 1; background-color: transparent; color: var(--color-red); } */

#menu :hover > a { color: var(--color-red); }

.mlvl-1 { justify-content: space-between; width: 100%; transition: transform 0.4s ease; }
.mlvl-1, .mlvl-2, .mlvl-3 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; text-align: center; position: relative; }
/* Hide all submenus initially */
.mlvl-2 { font-size: 1.25rem; }
.mlvl-2 li, .mlvl-3 li { justify-content: flex-start !important; font-weight: normal; margin-top: 10px !important; }
.mlvl-2 li:first-child, .mlvl-3 li:first-child { }
.mlvl-2, .mlvl-3 { opacity: 0; display: flex; flex-shrink: 0; width: 350px; transition: left 0.4s ease, opacity 0.3s ease; position: absolute; left: 100%; }
.mlvl-2 li a, .mlvl-3 li a { letter-spacing: 0px !important; text-align: left; padding: 0px !important; }
.mlvl-1 > li, .mlvl-2 > li, .mlvl-3 > li { width: 100%; /* font-size: 2.5vh; color: red; cursor: pointer; */ }
.mlvl-2.last { justify-content: flex-end; bottom: 5px;  }

/* Show selected submenu */
#menu .panel { display: flex; height: 100%; }
#menu .panel.show-submenu { }
/* #menu ul :hover ul { display: none; } */

/* When submenu is active, make it visible */
.mlvl-2.active { opacity: 1; left: calc(100% - 350px); /* Appears next to slid-left mlvl-1 */; }
.mlvl-2.active li a { }
#menu .panel.show-submenu .mlvl-1 { transform: translateX(-350px); } 

#mobile-menu { display: none; }

.social-media { padding: 1rem 0px; padding-right: 3.125rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; row-gap: 1rem; }
/* #menu .social-media { position: relative; right: 50%; transform: translateX(50%); width: var(--max-width); padding-right: 3.125rem; } */
.social-media .follow { display: flex; align-items: center; gap: 20px; }
.social-media .follow a { background-repeat: no-repeat; background-size: contain; background-position: center; height: 40px; width: 40px; display: inline-block; *display: inline; zoom: 1; vertical-align: middle; opacity: 0.5 !important; }
.social-media .follow a.youtube { background-image: url(themes/icon-youtube.png); width: 40px; }
.social-media .follow a.linkedin { background-image: url(themes/icon-linkedin.png); width: 32px;}
.social-media .follow a.job { background-image: url(themes/icon-jobs.png); margin-right: 0px; }
.social-media .follow a:hover { opacity: 1 !important; }
.social-media .follow span.separator { width: 3px; height: 40px; background-color: var(--color-red); display: inline-block; }

/* ------------------------- banner zone -------------------- */
#banner-zone{ position: relative; overflow: hidden; z-index: 0; margin-top: 85px; width: var(--max-width); margin-left: auto; margin-right: auto; }	
#banner-contant { position: relative; z-index:1; margin: 0px 50px; box-sizing: border-box; }

#banner-contant .slick-list { overflow: visible; padding: 3.125rem 5% !important; /* 👈 allow next/prev to peek out */ }
#banner-contant .slick-track { width: 100% !important; transform: none !important; }
#banner-contant .slick-slide { position: absolute; z-index: -1; border-radius: 5rem; overflow: hidden; transition: all 0.4s ease;
  transform: scale(0.9); display: none; }
#banner-contant .slick-slide img { position: relative; z-index: 0; display: block; }
#banner-contant .slick-slide .htmlcaption { position: absolute; bottom: 0px; left: 0px; width: 100%; padding: 3.125rem 3.125rem 6.25rem 3.125rem; z-index: 3; color: var(--color-white); box-sizing: border-box; }
#banner-contant .slick-slide .htmlcaption h1 { color: var(--color-white); margin-bottom: 0px; ; }
#banner-contant .slick-slide .htmlcaption .desc { margin: 0.5rem 0px 1rem 0px; }
#banner-contant .slick-slide .htmlcaption a.btn { }
#banner-contant .slick-slide:not(.slick-center) img { opacity: 0.7; }
#banner-contant .slick-slide:after { content: ""; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; background-color: rgba(0,0,0,0.1); z-index: 1; }
#banner-contant .slick-slide.no-caption::after { display: none; }
#banner-contant .slick-slide:hover:after { background-color: rgba(0,0,0,0.7); }
#banner-contant .slick-slide a.btn:hover { background-color: var(--color-yellow); color: var(--color-text) !important; }
#banner-contant .slick-slide.prev { display: block; transform: scale(0.9) translateX(-11.7284%); cursor: pointer; }
#banner-contant .slick-slide.next { display: block; transform: scale(0.9) translateX(11.7284%); cursor: pointer; }
#banner-contant .slick-slide.slick-active { display: block; left: 0px; right: 0px; transform: scale(1); z-index: 2; position: relative; box-shadow: 0 0px 20px rgba(0, 0, 0, 0.2); }


.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 30px;
    height: 30px;
    margin-top: -22.5px;
    padding: 0;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background-repeat: no-repeat;
	background-size: contain;
    background-position: center;
	background-color: transparent;
    z-index: 1003;
	transition: scale 0.3s ease;
}
.slick-prev {
    background-image: url(themes/icon-nav-red.png);
    left: -40px;
}
.slick-prev:hover { transform: scale(1.3); }
.slick-next {
    background-image: url(themes/icon-nav-red.png);
	transform: scaleX(-1);
    right: -40px;
}
.slick-next:hover { transform: scale(1.3) scaleX(-1); }

/*
.nivo-controlNav { bottom: 0px; padding-bottom: 50px; position: absolute; z-index: 20; width: 100%; }
.nivo-controlNav a { background-image: url(themes/bullet.png); background-repeat: no-repeat; height: 15px; width: 15px; margin: 5px; text-indent: 2000px; display: inline-block; }
.nivo-controlNav a.active { background-image: url(themes/bullet-active.png); }
.nivoSlider, .nivo-slice { height: 100% !important; }
.nivo-caption { text-shadow: 1px 1px 0px #000000; opacity: 1 !important; font-size: 17px !important; } 
.nivo-caption > p { visibility: hidden; }
.home .nivo-caption > p { font-size: 24px; opacity:1 !important; }
.nivo-caption p { padding: 0px !important; }
.nivo-caption p span.sub-title { font-size: 40px; line-height: 30px; }
.nivo-caption p h2 { font-size: 48px; color: #fff; font-weight: 600; font-family: 'Montserrat','Noto Sans TC'; text-shadow: 0px 0px 10px #000000; margin-bottom: 0px; }
.nivo-caption p .desc { margin-top: 25px !important; }
.nivo-caption a { color: var(--color-red); }

#banner-line { background-image: url(themes/banner-line.png); text-align: center; border-top: solid 1px #fff; background-repeat: no-repeat; background-size: 100% 7px; background-position: center top;  }
#banner-line img { display: block; width: 50px; margin: auto; }
*/

/* -------------------- RETAIL PRODUCTS ------------------------- */
/* .scroll-sect { position: relative; scroll-snap-align: start; } */
.section { position: relative; scroll-snap-align: start; }

#retail-product { display: flex; gap: 6.25rem; margin-top: 18.75rem; margin-bottom: 6.25rem; justify-content: center; scroll-snap-align: start; padding: 0px 40px; }
#retail-product .item { width: 580px; height: 60vw; max-height: 84rem; box-sizing: border-box; background-color: var(--color-yellow); padding: 10rem 5rem; text-align: center; position: relative; overflow: hidden; border-radius: 1000px; transition: all 0.5s ease; }
#retail-product .item:first-child { margin-top: -10rem; }
#retail-product .item:nth-child(even) { background-color: var(--color-red); color: var(--color-white); position: relative; }
#retail-product .item:nth-child(even) h2 { color: var(--color-white); }
#retail-product .item .info { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
#retail-product .item h2 { font-size: var(--h1-font-size); text-align: left; width: 100%; margin-bottom: 0px; white-space: pre-wrap; }
#retail-product .item a.btn { margin: 6.25rem 0px; pointer-events: auto; }
#retail-product .item a.btn:hover { background-color: var(--color-orange); }
#retail-product .item:nth-child(even) a.btn { background-color: var(--color-yellow); color: var(--color-text) !important; }
#retail-product .item:nth-child(even) a.btn:hover { background-color: var(--color-white); }
#retail-product .item .info > div.link { align-items: center; justify-content: center; display: flex; position: absolute; width: 100%; height: 100%;pointer-events: none; }
#retail-product .item:first-child .info > div.link { }
#retail-product .item .info > div.text { display: flex; flex-direction: column; align-items: flex-end; flex-grow: 1; justify-content: flex-end; pointer-events: none; max-width: 80%; margin-left: auto; }
#retail-product .item .info > div.text p { text-align: right; margin: 0px; }
#retail-product .item:nth-child(even) .info { display: flex; flex-direction: column-reverse; }
#retail-product .item:nth-child(even) .info h2 { text-align: right; }
#retail-product .item:nth-child(even) .info > div.text { align-items: flex-start; justify-content: flex-start; margin-left: 0px; }
#retail-product .item:nth-child(even) .info > div.text p { text-align: left; }
#retail-product .item img { position: absolute; transition: transform 2s ease; object-fit: contain; object-position: center; z-index: -1; transform: rotate(-9deg); /* initial rotation */ width: 70%; left: 15%; height: 80%; top: 10%; }
#retail-product .item img:hover { transform: rotate(9deg);  }
#retail-product .item:nth-child(even) img { transform: rotate(9deg);  }
#retail-product .item:nth-child(even) img:hover { transform: rotate(-9deg); /* initial rotation */ }

/* -------------------- HOME-SHOWCASE ------------------------- */
#showcase { position: relative; height: 100vh; width: 100%; overflow: hidden; }
#showcase .bg-video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover; z-index: 0; } 
#showcase .text { position: relative; z-index: 2; height: 100%; width: 100%; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 3.125rem; box-sizing: border-box; }
#showcase .text h2 { color: var(--color-white); font-size: var(--h1-font-size); }
#showcase .text p { margin: 0px; }
#showcase .text:after { content: ""; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; background-color: rgba(0,0,0,0.3); z-index: -1;  }
#showcase a.btn:hover { background-color: var(--color-yellow); color: var(--color-text) !important; }

/* -------------------- LETS CONNECT ------------------------- */
#footer { height: 100vh; display: flex; flex-direction: column; /* background-color: var(--color-red); */ }
#lets-connect { /* background-color: var(--color-red); color: var(--color-white); */ flex-grow: 1; display: flex; align-items: center; }
#lets-connect .wrapper { width: var(--connect-width); max-width: 100%; padding: 6.25rem 40px 3.125rem 40px; box-sizing: border-box; }
body.general-inquiry #footer { height: calc(100vh - 85px); }
body.general-inquiry #lets-connect .wrapper { padding-top: calc(6.25rem + 85px);  }
#lets-connect .contact { display: flex; justify-content: flex-end; }
#lets-connect .contact > div { display: flex; align-items: center; line-height: 1; }
#lets-connect .contact a { color: var(--color-text);  }
#lets-connect .contact a:hover { color: var(--color-red); }
#lets-connect .contact img.icon { height: 1rem; margin-left: 10px; margin-top: -1px; position: relative; }
#lets-connect .contact-form { margin-top: 1.5rem; display: flex; justify-content: flex-end; }
#lets-connect h1 { color: var(--color-yellow); font-size: 8rem; margin-bottom: 0.5rem; }
#lets-connect h1 span { font-size: 1rem; color: var(--color-text); font-weight: normal; display: block; text-transform: none; }
#lets-connect #tbContactform { flex-grow: 1; }
#lets-connect .tbContactform { width: 100%; }
#lets-connect .tbContactform a { white-space: nowrap; }
#lets-connect .tbContactform input[type="text"] { }
#lets-connect .tbContactform input, #lets-connect .tbContactform textarea { }
#lets-connect .tbContactform input[type="checkbox"] { border: solid 1px red; outline: none; box-shadow: none; }
#lets-connect .tbContactform td { padding: 0px; }
#lets-connect .tbContactform td:first-child { }
#lets-connect .tbSuccess, #lets-connect .tbErrors { position: relative; padding-left: 40px; text-align: left; }
#lets-connect .tbSuccess::after { content: ""; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); height: 30px; width: 30px; background-image: url('themes/icon-tick.png'); background-size: contain; background-repeat: no-repeat; }

#lets-connect .tbErrors::after { content: ""; position: absolute; left: 0px; top: 50%; transform: translateY(-50%); height: 30px; width: 30px; background-image: url('themes/icon-error.png'); background-size: contain; background-repeat: no-repeat; }


#lets-connect .submenu-links { }
#lets-connect .submenu-links a { font-size: var(--h3-font-size); font-weight: 600; display: block; letter-spacing: 3px; text-align: right; margin-bottom: 1rem; line-height: 1; }
#lets-connect .submenu-links a:hover { color: var(--color-yellow); }

body.ask-us { display: flex; flex-direction: column; min-height: 100vh; }
body.ask-us #lets-connect .wrapper { padding-bottom: 0px; }

/* -------------------- WHISTLEBLOW ------------------------- */
#whistleblow { background-color: var(--color-red); color: var(--color-white); flex-grow: 1; display: flex; align-items: center; }
#whistleblow h1 { color: var(--color-yellow); margin-bottom: 10px; }
#whistleblow > div { max-width: var(--max-content-width); padding: 6.25rem 40px; box-sizing: border-box; margin: auto; }
#whistleblow table td { padding-left: 3.125rem; width: 50%; box-sizing: border-box; vertical-align: top; }
#whistleblow table a { color: var(--color-white); text-decoration: underline; }
#whistleblow a.link.yellow { color: var(--color-yellow); }
#whistleblow a.link.yellow:hover { color: var(--color-text); }

#whistleblow input[type="text"], #whistleblow textarea { border: none; }
#whistleblow .contact-form table td { padding-left: 0px; }
#whistleblow div.g-recaptcha { justify-content: flex-start; }


/* -------------------- ABOUT PETROS ------------------------- */
#about-petros { background-image: url(themes/who-we-are-bg.webp); background-size: 25%; background-position: right bottom; background-repeat: no-repeat; }
#about-petros .wrapper { padding-top: calc(6.25rem + 85px); max-width: var(--max-content-width); }


/* -------------------- MILESTONES ------------------------- */
#our-story { /* min-height: 100vh; */ display: flex; background-color: var(--color-light-grey); }
#our-story .wrapper { width: 100%; position: relative; }
#our-story .wrapper > div { display: flex; max-height: 650px; height: 100%; position: relative; }
#our-story .wrapper > div > div { }
#our-story .years { width: 250px; display: flex; flex-direction: column; scroll-behavior: smooth; position: relative; transition: width 0.5s ease; }
#our-story .years::after { content: ""; position: absolute; right: calc(3.125rem - 13px); height: 88%; top: 6%; width: 80px; background-image: url(themes/timeline-line-curve.png); background-size: 100% 100%; background-position: center right; background-repeat: no-repeat; /* background-color: var(--color-text); */ }
#our-story h1 { position: absolute; top: -1rem; right: 0px; z-index: 1; }
#our-story .years > div:last-child { height: 100%; position: relative; top: 0px; transition: top 0.4s ease; display: flex; flex-direction: column; z-index: 2; }
#our-story .years .nav { right: calc(3.125rem / 2 - 4px); top: 0px; bottom: 0px; }
#our-story .years .nav > a { margin: 0px 5px; position: absolute; }
#our-story .years .nav > a.prevnav { top: 5px; animation: bounce 1.2s infinite;  /* loop animation */ transition: transform 0.3s ease; }
#our-story .years .nav > a.nextnav { bottom: 5px; animation: bounceReverse 1.2s infinite;  /* loop animation */ transition: transform 0.3s ease; right: 87px; }
#our-story .years .nav span { position: relative; top: -1.5rem; }
#our-story .years .nav > a.nextnav span { bottom: -1.5rem; top: auto; top: initial; }
#our-story .year { position: absolute; bottom: -100%; padding: 1rem 0px; right: 6.25rem; box-sizing: border-box; font-weight: bold; cursor: pointer; transition: font-size 0.3s; d; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: flex-end; opacity: 0; }
#our-story .year.current::after { content: ""; position: absolute; right: calc(-3.125rem + 2px); top: 50%; transform: translateY(-50%) translateX(50%); width: 15px; height: 15px; background-color: var(--color-red); border-radius: 50%; z-index: 1; }
#our-story .year.visible { position: relative; display: flex; opacity: 0.5; font-size: var(--h4-font-size); bottom: auto; bottom: initial; flex: 1; }
#our-story .year.current { font-size: var(--h3-font-size); color: var(--color-red); opacity: 1; right: 6.25rem; }

#our-story .events { flex: 1; display: flex; flex-direction: column; scroll-behavior: smooth; position: relative;}
#our-story .events > div { min-height: 70vh; height: 100%; display: flex; flex-direction: column; position: relative; top: 0px !important; transition: top 0.4s ease; }
#our-story .events > div > div { } 
#our-story .events .event { position: absolute; bottom: -100%; scroll-snap-align: start; padding: 15px 3.125rem 15px 0px; cursor: default; width: 90%; box-sizing: border-box; transition: font-size 0.3s; opacity: 0; flex-direction: column; justify-content: center; }
#our-story .events .event > div { }
#our-story .events .event.visible { position: relative; display: flex; opacity: 0.3; font-size: 0.9375rem; padding: 2.5rem 3.125rem; bottom: auto; bottom: initial; }
#our-story .events .event.visible .text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;  /* number of lines */ overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#our-story .events .event.visible.prev { top: 0px; }
#our-story .events .event.visible.next { }
#our-story .events .event.current { opacity: 1; font-size: 1rem; flex-grow: 1; background-color: var(--color-white); border-radius: 30px; }
#our-story .events .event:first-child.current, #our-story .years .year:first-child.current { top: 50%; transform: translateY(-50%); }
#our-story .events .event:nth-child(2).visible { top: 25%; transform: translateY(-25%); }
#our-story .events .event:nth-child(2).current, #our-story .events .event:nth-child(2).prev { top: unset; transform: unset; }
#our-story .events .event:last-child.visible.prev, #our-story .years .years:last-child.visible.prev { bottom: -100%; top: unset; }
#our-story .events .event:last-child.current, #our-story .years .year:last-child.current { bottom: 50%; transform: translateY(50%); }
#our-story .events .event.current .text { -webkit-line-clamp: unset; overflow: visible; text-overflow: unset; white-space: normal; }
#our-story .events .event h4 { letter-spacing: 0px; }
#our-story .events .event ul { margin: 0px; }
#our-story .events .event li { margin-bottom: 5px; margin-left: 1rem; padding-left: 1rem; } 
#our-story .nav { position: absolute; right: 0px; bottom: 0px; display: flex; flex-direction: column; z-index: 100; align-items: flex-end; text-align: right; }
#our-story .nav > a { width: 30px; height: 20px; background-size: contain; background-repeat: no-repeat; background-image: url(themes/arrow-down.png); margin: 10px 5px; opacity: 1; background-position: center; transition: all 0.3s ease; }
#our-story .nav > a.prevnav { background-image: url(themes/arrow-up.png)}
#our-story .nav > a.nextnav { }
#our-story .nav > a:hover { transform: scale(1.3); }
#our-story .nav > a.prevnav:hover { transform: scale(1.3); }
#our-story .nav span { font-size: 0.8rem; color: var(--color-red); }
/*
#our-story .year-block { padding-bottom: 40px; position: relative; }
#our-story .year-block::before { content: ''; position: absolute; left: -20px; top: 10px; width: 10px; height: 10px; background: black; border-radius: 50%; }
*/


/* -------------------- PURPOSE & VALUES ------------------------- */
.pv .wrapper { padding: 6.25rem 6.25rem 0px 6.25rem; min-height: 100vh; box-sizing: border-box; display: flex; align-items: flex-end; }
.pv .wrapper > div { display: flex; gap: 5rem; height: 100%; }
.pv .wrapper > div .img { width: 30%; flex-shrink: 0; text-align: center; display: flex; justify-content: center; align-items: flex-end; position: relative; }
.pv .wrapper > div .img img { display: block; }
.pv .wrapper > div .img p { margin: 0px; }
.pv .wrapper > div .info { box-sizing: border-box; display: flex; flex-direction: column; }
.pv .wrapper > div .info h4 { position: relative; left: -15%;  }
.pv .wrapper > div .info h4.position { letter-spacing: 3px; font-weight: normal; }
.pv .wrapper > div .info .text { margin-top: 3.125rem; background-color: var(--color-blue); color: var(--color-white); border-radius: 5rem; padding: 6.25rem; /* font-size: var(--h4-font-size); */ }
.pv .wrapper > div .info .text h2 { color: var(--color-white); font-size: var(--h1-font-size); }

#our-values.pv .wrapper > div { flex-direction: row-reverse; }
#our-values.pv .wrapper > div .info { text-align: right; padding-bottom: 3.125rem; }
#our-values.pv .wrapper > div .info h4 { right: -15%; left: initial; }
#our-values.pv .wrapper > div .info .text { background-color: var(--color-maroon); }
#our-values.pv .wrapper > div .img img { position: absolute; right: 0px; bottom: 0px; width: 125%; max-width: auto; max-width: initial; }


/* -------------------- LEADERS ------------------------- */
#bod { }
.leader { }
.leader .wrapper { }
.leader .wrapper > div:first-child { display: flex; flex-direction: row; /* gap: 3.125rem; */ flex-direction: column; }
.leader .wrapper > div:first-child > div { flex: 1; box-sizing: border-box; text-align: center; }
.leader .wrapper > div:first-child .profile .item { width: 100%; margin: 30px auto; }
.leader .wrapper > div:first-child .profile .item .img { width: 25%; margin: auto; }
.leader .wrapper .title { flex: 0 0 auto; /* height based on content */ /* transform: translateX(50px); */ transition: all 0.6s ease; }
.leader .wrapper .title.animate { opacity: 1; transform: translateX(0); transition-delay: 0.5s; }
.leader .wrapper .title div.text { max-width: var(--max-content-width); margin: auto; /*padding: 3.125rem; background-color: var(--color-light-grey); border-radius: 30px; line-height: 1.5; font-size: 1.25rem; */ }
#executive-leadership { background-color: var(--color-light-grey); }
#executive-leadership.leader .wrapper .title div.text { /* background-color: var(--color-white); */ }
.leader .wrapper > .profile { display: flex; flex-wrap: wrap; gap: 30px; /*40px; */ justify-content: center; }
.leader .profile a { color: var(--color-text); }
.leader .profile .item { width: calc(25% - 22.5px); }
.leader .profile .item a { text-align: center; }
.leader .profile .item .img { position: relative; transition: all 0.3s ease; }
.leader .profile .item a:hover .img { transform: scale(1.05); }
/* .leader .profile .item .img::after { content: ""; position: absolute; right: 0; bottom: 0px; width: 100%; aspect-ratio: 1/1; background-color: var(--color-yellow); border-radius: 50% 0% 50% 50%; z-index: 0; } */
.leader .profile .item img { display: block; margin: auto; position: relative; z-index: 1; }
.leader .profile .item .info { text-align: center; margin-top: 1rem; }
.leader .profile .item .info .position { text-transform: uppercase; }
.leader .profile .item .info h4 { letter-spacing: 0px; }

.leader .wrapper .vh-block { height: calc(100vh - 9.375rem); /* 50px top + 50px bottom from .wrapper */; display: flex; flex-direction: column; padding: 6.25rem 0px 3.125rem 0px; overflow: hidden; }
.leader .wrapper .row { display: flex; flex-direction: row; gap: 3.125rem; }
.leader .wrapper .row .profile { width: 65%; display: flex; gap: 3.125rem; flex-shrink: 0; }
.leader .wrapper .row .text { display: flex; align-items: center; opacity: 0; transform: translateY(30px); transition: all 0.6s ease;}
.leader .wrapper .row .text.animate { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
.leader .wrapper .row .item { background-size: cover; background-repeat: no-repeat; background-position: top center; border-radius: 30px; overflow: hidden; flex: 1; transition: all 0.4s ease; position: relative; cursor: pointer; opacity: 0; transform: translateX(-50px); transition: all 0.6s ease; }
.leader .wrapper .row .item:hover .info { display: block; }
.leader .wrapper .row .profile.animate .item { opacity: 1; transform: translateX(0); }
/* Stagger animation using nth-child */
.leader .wrapper .row .profile.animate .item:nth-child(1) { transition-delay: 0.1s; }
.leader .wrapper .row .profile.animate .item:nth-child(2) { transition-delay: 0.2s; }
.leader .wrapper .row .profile.animate .item:nth-child(3) { transition-delay: 0.3s; }
.leader .wrapper .row .profile.animate .item:nth-child(4) { transition-delay: 0.4s; }
.leader .wrapper .row .item:hover::after { content: ""; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; background-color: rgba(0,0,0,0.3); z-index: -1; }
.leader .wrapper .row .item a { position: absolute; height: 100%; width: 100%; }
.leader .wrapper .row .item .info { padding: 30px; box-sizing: border-box; position: absolute; bottom: 0px; left: 0px; width: 100%; display: none; color: var(--color-white); font-size: 1rem; }
.leader .wrapper .row .item .info h4 { letter-spacing: 0px; text-align: center; font-size: 1rem; color: var(--color-white); }
.leader .wrapper .row .item .info .position { text-align: center; line-height: 1; }
.leader .wrapper .row .item .bio { display: none; }

.leader .wrapper .row.idx2 { flex-direction: row-reverse; }
.leader .wrapper .row.idx1, .leader .wrapper .row.idx2 { flex: 1 1 0; /* share remaining height equally */ overflow: hidden; }

#executive-leadership.leader .row.idx2 .profile { width: 100%; }


body.who-we-are .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { padding: 0px; }
.mfp-container { padding: 0px !important; background-color: var(--color-white); }
.mfp-close { background-size: 50% !important; background-position: center; background-repeat: no-repeat; color: var(--color-red) !important; }

.profile-pop { display: flex; height:100%; padding: 3.125rem 6.25rem; min-height: 100vh; box-sizing: border-box; }
.profile-pop > div { display: flex; max-width: var(--max-content-width); }
.profile-pop > div h2 { text-transform: initial; letter-spacing: 0px; margin-bottom: 10px; }
.profile-pop > div h4 { color: var(--color-red); font-size: 1rem; }
.profile-pop > div > div { display: flex; max-width: 80%; flex-direction: column; justify-content: center; }
.profile-pop > div > div:first-child { width: 60%; padding-right: 30px; flex-shrink: 0; }
.profile-pop > div > div .text h4 { letter-spacing: 0px; }
.profile-pop > div .text .position { text-transform: uppercase; margin-top: 0px; font-size: 1rem; margin-bottom: 1rem; /* 2rem; */ }
.profile-pop > div > div .img { }
.profile-pop > div > div .img img { display: block; }



/* -------------------- CODES & PRINCIPLES ------------------------- */
#codes-and-principles { position: relative; z-index: 0; }
#codes-and-principles .wrapper > div { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 12.5rem); text-align: center; }
#codes-and-principles h2 { color: var(--color-red); font-size: var(--h1-font-size); }

#codes-list { display: none; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 1; background-color: var(--color-white); }
#codes-list .wrapper > div { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 12.5rem); max-width: 90%; /* max-width: 1000px; */ margin: auto; }
#codes-list .wrapper > div .title { position: relative; text-align: center; align-items: center; margin-bottom: 1em; padding-bottom: 1.5rem; padding-top: 1.5rem; border-bottom: solid 1px var(--color-red); }
#codes-list .wrapper > div .title a.openlink { position: absolute; top: 50%; transform: translateY(-50%); right: -60px; transition: all 0.4s ease; }
#codes-list .wrapper > div .title a.openlink:hover { transform: translateY(-50%) scale(1.3); }
#codes-list .wrapper > div .title a.openlink img { width: 60px; height: 60px; }
#codes-list h2 a { color: var(--color-text); }
#codes-list h2 a:hover { color: var(--color-red); }

a.close { cursor: pointer; }
a.close img { width: 3.125rem; display: block; }
#codes-list a.close { margin-top: 1rem; width: 3.125rem; height: 3.125rem; background-image: url(themes/icon-close.png); background-size: contain; }
#codes-list a.close:hover { background-image: url(themes/icon-close-yellow.png); }

#codes-list .slick-dots { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); display: flex !important;  flex-direction: column; align-items: flex-end; justify-content: center; pointer-events: none; /* Prevent blocking other elements */ width: auto; width: initial; }
#codes-list .slick-track, #codes-list.slick-vertical .slick-list { height: 100% !important; }
#codes-list .slick-slide { }
#codes-list .slick-slide .wrapper { width: 80%; }
#codes-list .slick-dots li { margin: 10px 0 !important; padding: 0px; width: 8px; height: 8px; }
#codes-list .slick-dots li button { width: 8px; height: 8px; padding: 0px; border-radius: 50%; background: var(--color-red); border: none; cursor: pointer; pointer-events: auto; transition: background-color 0.3s; }
#codes-list .slick-dots li button:after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; background: transparent; border: 0 solid var(--color-yellow); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease, border-width 0.4s ease; z-index: 0; }
/*
#codes-list .slick-dots li.slick-active button { background: var(--color-red); border: solid 6px var(--color-white); box-shadow: 0 0 0 1px var(--color-red); } */
#codes-list .slick-dots li.slick-active button::after { width: 20px; height: 20px; border-width: 1px; }
#codes-list h2 { font-size: var(--h2-font-size); margin-bottom: 0px; }



/* -------------------- WHAT WE DO - ONE STOP CENTRE ------------------------- */
#one-stop-centre { z-index: 0; }
#one-stop-centre .wrapper { min-height: 100vh; display: flex; position: relative; padding: 85px 0px 0px 0px; max-width: auto; max-width: initial; max-width: none; }
#one-stop-centre .wrapper > div { position: relative; display: flex; flex: 1; }
#one-stop-centre .wrapper > div div.text { position: absolute; width: 100%; height: 100%; display: flex; text-transform: uppercase; font-weight: 800; letter-spacing: 5px; text-shadow: 0px 0px 1px rgba(0,0,0,0.2); }
#one-stop-centre .wrapper > div div.text > div { width: 50%; box-sizing: border-box; font-size: 150px; color: var(--color-white); transition: all 0.5s ease; }
#one-stop-centre .wrapper > div div.text > div:first-child { font-size: 680px; justify-content: flex-end; display: flex; padding-right: 10%; position: relative; z-index: 49; }
#one-stop-centre .wrapper > div div.text > div:nth-child(2) { display: flex; flex-direction: column; padding-left: 3%; justify-content: center; }
#one-stop-centre .wrapper > div div.text > div:nth-child(2) > div { line-height: 1; }
#one-stop-centre .wrapper > div div.text > div:nth-child(2) > div:first-child { position: relative; z-index: 49; display: flex; align-items: flex-end; } 
#one-stop-centre .wrapper > div div.text > div:nth-child(2) > div:nth-child(2) { position: relative; z-index: 51; }
#one-stop-centre .wrapper > div div.text > div:nth-child(2) > div:last-child { position: relative; z-index: 51; font-size: 1rem; font-weight: 500; text-transform: initial; letter-spacing: 0px; padding-bottom: 20%; max-width: 500px; padding-left: 3.125rem; color: var(--color-text); padding-right: 40px; }
#one-stop-centre .wrapper div.img { width: 100%; }
#one-stop-centre .wrapper div.img img { position: absolute; top: 0px; left: 0px; width: 100%; object-fit: cover; object-position: top center; }
#one-stop-centre .wrapper div.img img.scroll-to-bottom { transform: translateY(20vh); /* push image to bottom of viewport */ }
#one-stop-centre .wrapper div.img img:first-child { z-index: 50; transition: transform 0.1s linear;}
#one-stop-centre .wrapper div.img img:nth-child(2) { z-index: 100; }
#one-stop-centre .wrapper div.img img:last-child { z-index: 0; }



/* -------------------- SUSTAINABILITY ------------------------- */
body.sustainability #main-content { background-color: var(--color-white); position: relative; z-index: 1; display: none; }
#esg-banner { position: relative; z-index: 1; }
#esg-banner .wrapper { min-height: 100vh; display: flex; position: relative; padding: 85px 0px 0px 0px; max-width: auto; max-width: initial; max-width: none; }
#esg-banner .wrapper > div { position: relative; display: flex; flex: 1;  }
#esg-banner .wrapper > div div.text { position: absolute; width: 100%; height: 100%; display: flex; letter-spacing: 5px; color: var(--color-white); flex-direction: column; text-align: center; padding: 40px; box-sizing: border-box; }
#esg-banner .wrapper > div div.text > div:first-child { height: 65%; display: flex; justify-content: center; align-items: flex-end; z-index: 5; }
#esg-banner .wrapper > div div.text > div:nth-child(2) { display: flex; justify-content: center; align-items: center; flex-direction: row; width: 800px; max-width: 100%; margin: auto; gap: 3.125rem; left: -2px; position: relative; text-shadow: 0 0 10px rgba(0,0,0,0.8); z-index: 6; }
#esg-banner .wrapper > div div.text > div:nth-child(2) span { flex-shrink: 0; box-sizing: border-box; }
#esg-banner .wrapper > div div.text > div:last-child { letter-spacing: 0px; flex-grow: 1; max-width: var(--max-content-width); margin: 3.125rem auto 0px auto; text-shadow: 0 0 10px rgba(0,0,0,0.8); z-index: 6; }
#esg-banner .wrapper > div div.text h1, #esg-banner .wrapper > div div.text h2 { color: var(--color-white); }
#esg-banner .wrapper > div div.text h1 { font-size: 30rem; line-height: 1; letter-spacing: 1rem; margin-bottom: 0px; }
#esg-banner .wrapper > div div.text h2 { font-size: var(--h2-font-size); margin-bottom: 0px; line-height: 1;  }
#esg-banner .wrapper > div div.text p { margin: 0px; }
#esg-banner .wrapper div.img { width: 100%; }
#esg-banner .wrapper div.img img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; /* fit inside without cropping */ object-position: center; z-index: 4; }
#esg-banner .wrapper div.img img:first-child { z-index: 5; }
#esg-banner .wrapper div.img img.scroll-to-bottom { transform: translateY(20vh); /* push image to bottom of viewport */ }

#reports { background-color: var(--color-seablue); color: var(--color-white); position: relative; z-index: 2; }
#reports h2 { color: var(--color-white); font-size: var(--h1-font-size); }
#reports .wrapper { display: flex; position: relative; width: 80%; }
#reports .wrapper > div { position: relative; display: flex; flex: 1; }
#reports .wrapper > div .text { width: 60%; text-align: right; }
#reports .wrapper > div .text p { max-width: 600px; margin-right: 0px; margin-left: auto; }
#reports .wrapper > div .reports { width: 40%; max-width: 400px; padding-left: 30px; /*3.125rem; */ text-align: center; }
#reports .wrapper > div .reports img { display: block; width: 100%; }
#reports .wrapper > div .reports a.btn { margin-top: 30px; }

#esg { position: relative; z-index: 0; }
#esg::before { content: ""; position: fixed; width: 115%; height: 115%; top: -5%; left: -15%; background-image: url(themes/sustainability-bg.png); background-repeat: no-repeat; background-size: cover; background-position: right bottom; background-color: var(--color-white); z-index: 0; /* behind content */ pointer-events: none; }

#s-env .wrapper { /* min-height: 100vh; */ position: relative; padding-bottom: 30px; }
#s-env .wrapper h3 { margin-left: 6.25rem;  } 
#s-env .wrapper table { display: flex; height: 100%; flex: 1; }
#s-env .wrapper .img, #s-social .wrapper .img, #s-governance .wrapper .img { position: relative; }
#s-env .wrapper .img .text, #s-social .wrapper .img .text, #s-governance .wrapper .img .text { color: var(--color-white); font-weight: bold; position: absolute; bottom: 5%; right: 10%; margin: 0px; text-align: center; letter-spacing: 3px; }
#s-env .wrapper .img .text .char, #s-social .wrapper .img .text .char, #s-governance .wrapper .img .text .char { font-size: 30vh; line-height: 25vh; margin: 0px; }
#s-env .wrapper img, #s-social .wrapper img, #s-governance .wrapper img, #s-team .wrapper img { border-radius: 5rem; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } 
#s-env .wrapper tbody { display: flex; flex-direction: column; }
#s-env .wrapper table tr { display: flex; width: 100%; height: 100%; }
#s-env .wrapper table td:last-child { padding-left: 30px; /*6.25rem;*/ flex-shrink: 0; width: 35%; }
#s-env .wrapper table tr td:first-child { height: 100%; }
#s-env .wrapper table tr td:first-child > p { width: 80%; margin-left: 6.25rem; margin-right: auto; }

#s-social .wrapper { position: relative; padding: 0px 40px; }
#s-social .wrapper table { display: flex; height: 100%; flex: 1; }
#s-social .wrapper tbody { display: flex; flex-direction: column; }
#s-social .wrapper table td:last-child { padding-left: 30px; /*6.25rem; */ flex-shrink: 0; width: 35%; vertical-align: center; }
#s-social .wrapper table tr td:first-child { height: 100%; }
#s-social .wrapper img { /* border-radius: 0px 5rem 5rem 0px; */ }
#s-social .wrapper .left-s { position: relative; }

#s-governance .wrapper { position: relative; padding-bottom: 0px; padding-top: 30px; }
#s-governance .wrapper table { display: flex; height: 100%; flex: 1; width: 70%; }
#s-governance .wrapper table tbody { display: flex; flex-direction: column; }
#s-governance .wrapper table tr { display: flex; align-items: center; }
#s-governance .wrapper table td { flex: 1; }
#s-governance .wrapper table td:first-child { /*padding-right: 3.125rem;*/ position: relative; left: -30px; /* left: -3.125rem; */ }
#s-governance .wrapper table td:first-child > p { width: 80%; margin-left: auto; margin-right: 0px; }
#s-governance .wrapper .img .char { top: 5%; bottom: none; bottom: initial; bottom: auto; }

/* #s-team .wrapper { min-height: 100vh; display: flex; position: relative; } */
#s-team .wrapper { padding-top: 30px; padding-bottom: 3.125rem; position: relative; }
#s-team table tr:first-child td:first-child { padding-right: 30px; /* 6.25rem; */ position: relative; width: 40%; }
#s-team table .social-media { justify-content: flex-end; padding: 0px; }
#s-team img { border-radius: 0px 5rem 5rem 0px; }

#copyright { background-image: url(themes/footer-bg.webp); background-size: 100%; background-position: top center; background-repeat: no-repeat; position: relative; padding-top: 4.6vw; background-color: var(--color-red); }
#copyright .wrapper { padding: 1rem 40px 10px 40px; text-align: center; background-color: var(--color-white); }
#copyright a { text-decoration: none; color: var(--color-red); }

#copyright.red { background-image: url(themes/footer-bg-r.webp); color: var(--color-white); z-index: 3; background-color: transparent; }
#copyright.red .wrapper { background-color: var(--color-red); }
#copyright.red a { color: var(--color-white); }
#copyright.red a:hover { color: var(--color-yellow); }

/* -------------------- WHAT WE DO - OUR ROLES ------------------------- */
#our-roles { z-index: 3; }
#our-roles .wrapper { min-height: 100vh; display: flex; position: relative; padding-top: 6.25rem; max-width: auto; max-width: initial; max-width: none; }
#our-roles .wrapper::after { content: ""; position: absolute; left: 0px; bottom: 0px; height: 100%; width: 100%; background: linear-gradient(to top, var(--color-yellow) 70%, transparent 100%); z-index: 102; }
#our-roles .wrapper > div { display: flex; flex: 1; z-index: 103; max-width: var(--max-width); margin: auto; width: 100%; }
#our-roles .btn-panel { display: flex; z-index: 1; width: 35%; }
#our-roles .btn-panel > div { flex: 1; box-sizing: border-box; cursor: pointer; padding: 6.25rem 30px; margin-bottom: 5px; writing-mode: vertical-rl;  /* vertical text direction */ transform: rotate(180deg); transition: all ease 0.2s; font-size: var(--h4-font-size); border-radius: 150px; line-height: 1; text-align: center; letter-spacing: 3px; display: flex; align-items: center; justify-content: center; }
#our-roles .btn-panel > div.active { font-weight: 600; flex: 2; }
#our-roles .btn-panel > div:hover { font-weight: 600; }
#our-roles .btn-panel > div:not(:first-child) { margin-left: -1rem; }
#our-roles .btn-panel > div:nth-child(1) { background-color: var(--color-red); color: var(--color-white); border: solid 1px var(--color-red); }
#our-roles .btn-panel > div:nth-child(2) { background-color: var(--color-yellow); color: var(--color-text); border: solid 1px var(--color-white); }
#our-roles .btn-panel > div:nth-child(3) { background-color: var(--color-black); color: var(--color-white); border: solid 1px var(--color-black); }
#our-roles .btn-panel > div:nth-child(4) { background-color: var(--color-white); color: var(--color-red); border: solid 1px var(--color-white); }
#our-roles .info-panel { position: relative; width: 65%; }
#our-roles .info-panel > div > div > div { opacity: 0; transition: opacity 0.5s ease; position: absolute; top: 0; left: 0; padding: 3.125rem; padding-right: 0px; height: 100%; display: flex; box-sizing: border-box; align-items: center; }
#our-roles .info-panel > div > div > div.active { opacity: 1; position: relative; z-index: 1; }
#our-roles .info-panel > div > div > div h2 { font-size: var(--h1-font-size); }
#our-roles .info-panel a.btn { margin-top: 1rem; border: solid 1px transparent; }
#our-roles .info-panel a.btn:hover { border: solid 1px var(--color-white); }
#our-roles .info-panel a.link { color: var(--color-red); } 
#our-roles .info-panel a.link:hover { color: var(--color-text); }
#our-roles .slick-dots { display: flex; gap: 10px; left: 3.125rem; width: calc(100% - 3.125rem); }
#our-roles .slick-dots li { flex: 1; margin: 0px !important; }
#our-roles .slick-dots li.active { }
#our-roles .slick-dots li button { width: 100%; }
#our-roles .slick-dots li.active button { }

/* -------------------- WHAT WE DO - SGR ------------------------- */
#sgr { background-color: var(--color-yellow); }
#sgr .wrapper { min-height: 100vh; position: relative; /*padding-top: 0px calc(6.25rem + 85px); */}
#sgr h2 { font-size: var(--h1-font-size); }
#sgr p { max-width: 60%; }
#sgr p.img { max-width: auto; max-width: initial; max-width: none; position: absolute; bottom: 6.25rem; top: 0px /*calc(6.25rem + 6rem)*/; right: 40px; justify-content: flex-end; width: 100%; margin: 0px; max-width: 70%; }
#sgr p.img img { display: block; height: 100%; position: absolute; bottom: 0px; right: 0px; object-fit: contain; object-position: center;  }
#sgr a { position: relative; z-index: 1; }
#sgr a.btn { border: solid 1px transparent; }
#sgr a.btn:hover { border: solid 1px var(--color-white); }


/* -------------------- WHAT WE DO - UPSTREAM ------------------------- */
#upstream { }
#upstream .wrapper { position: relative; padding-bottom: 6.25rem; }
#upstream .wrapper table { display: flex; height: 100%; }
#upstream .wrapper table p { margin: 0px; }
#upstream .wrapper table tbody { display: flex; height: 100%; flex-direction: column; }
#upstream .wrapper table tr { display: flex; width: 100%; }
#upstream .wrapper table tr:first-child { flex: 1; overflow: hidden; }
#upstream .wrapper table tr:first-child td:first-child { display: flex; flex-direction: column; height: 100%; }
#upstream .wrapper table td div.img { padding-top: 3.125rem; display: flex; overflow: hidden; column-gap: 30px; padding-top: 25px; }
#upstream .wrapper table td div.img img { border-radius: 30px; display: block; height: 100%; max-width: calc(33.33% - 20px); }
#upstream .wrapper table tr:last-child { align-items: flex-end; }
#upstream .wrapper table tr:last-child td { padding-top: 25px; justify-content: flex-end; }
#upstream .wrapper table tr:last-child td:first-child { flex-grow: 1; }
#upstream .wrapper table td { vertical-align: top; }
#upstream .wrapper table td:first-child { }
#upstream .wrapper table td:last-child { padding-left: 30px; /*6.25rem; */ box-sizing: border-box; flex-shrink: 0; width: 50%; display: flex; align-items: center; }
#upstream .wrapper table td:last-child img { max-height: 100%; }
#upstream .wrapper table h2 { margin: 0px; letter-spacing: 5px; font-size: var(--h1-font-size); }

#upstream-banner { background-color: var(--color-light-grey); }
#upstream-banner .wrapper { /* min-height:100vh; */ position: relative; padding-bottom: 0px; }
#upstream-banner .wrapper p { margin: 0px; height: 100%; }
#upstream-banner .wrapper img { border-radius: 5rem; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } 

#upstream-frontier { background-color: var(--color-light-grey); }
#upstream-frontier .wrapper { position: relative; display: flex; flex-direction: column; padding-top: 30px; /*3.125rem;*/ }
#upstream-frontier .wrapper h2 { color: var(--color-orange); margin-bottom: 0px; font-size: var(--h1-font-size); }
#upstream-frontier .wrapper tbody { display: flex; flex-direction: column; }
#upstream-frontier .wrapper table { flex: 1; display: flex; }
#upstream-frontier .wrapper table tr { display: flex; width: 100%; flex: 1; }
#upstream-frontier .wrapper table tr td { padding-top: 30px; /* 3.125rem; */ }
#upstream-frontier .wrapper table tr:first-child td { width: 50%; }
#upstream-frontier .wrapper table tr:first-child td:first-child { flex-shrink: 0; }
#upstream-frontier .wrapper table tr:first-child td:last-child { padding-left: 30px; /* 3.125rem */; box-sizing: border-box; }
#upstream-frontier .wrapper div.img { display: flex; overflow: hidden; column-gap: 30px; }
#upstream-frontier .wrapper div.img img { border-radius: 30px; display: block; overflow: hidden; }

#downstream-delivery .wrapper { background-image: url(themes/downstream-delivery-bg.png); background-position: center; background-size: 38%; background-repeat: no-repeat; padding-bottom: 0px; }
#downstream-delivery .wrapper table tr { display: flex; width: 100%; flex: 1; }
#downstream-delivery .wrapper table tr:first-child td:first-child { width: 50%; padding-right: 30px; /* 3.125rem;*/ box-sizing: border-box; flex-grow: 1; }
#downstream-delivery .wrapper table tr:first-child td:last-child { width: 30%; flex-shrink: 0; display: flex; justify-content: flex-end; }
#downstream-delivery .wrapper table tr:nth-child(2) td { text-align: center; width: 100%; }
#downstream-delivery .wrapper h2 { margin: 6.25rem auto; color: var(--color-purple); font-size: var(--h1-font-size); }
#downstream-delivery .wrapper div.img { display: flex; overflow: hidden; column-gap: 30px; }
#downstream-delivery .wrapper div.img img { border-radius: 30px; display: block; overflow: hidden; }

#downstream-energy .wrapper { /* min-height:100vh; */ position: relative; display: flex;  overflow: hidden; padding-top: 0px; }
#downstream-energy.current .wrapper { }
#downstream-energy .wrapper table { flex: 1; display: flex; }
#downstream-energy .wrapper tbody { display: flex; flex-direction: column; }
#downstream-energy .wrapper table tr { display: flex; width: 100%; height: 100%; }
#downstream-energy .wrapper table tr td { display: flex; flex-direction: column; }
#downstream-energy .wrapper table tr td:first-child { width: 40%; padding-right: 30px; /* 6.25rem; */ flex-shrink: 0; }
#downstream-energy .wrapper table tr td:last-child p:first-child { margin-top: 0px; margin-right: 0px; margin-left: auto; margin-bottom: 0px; text-align: center; }
#downstream-energy .wrapper table tr td:last-child a.btn, #ccus .wrapper table tr td:last-child a.btn { margin-top: 10px; }

#downstream-energy .wrapper table tr td:last-child { height: 100%; justify-content: center; }
#downstream-energy .wrapper table tr td:last-child .img { margin: 30px 0px; display: flex; align-items: stretch; justify-content: center; overflow: hidden; }
#downstream-energy .wrapper table tr td:last-child .img img { object-fit: cover; width: 100%; height: 100%; max-width: 100%; }

#downstream-energy .wrapper img { border-radius: 5rem; display: block; overflow: hidden; }

#ccus { background-color: var(--color-light-grey); }
#ccus .wrapper { position: relative; display: flex; }
#ccus .wrapper h2 { color: var(--color-green); font-size: var(--h1-font-size); margin-bottom: 20px; }
#ccus .wrapper table { display: flex; height: 100%; }
#ccus .wrapper table tbody, #ccus .wrapper table tr { display: flex; }
#ccus .wrapper table tr td { width: 50%; vertical-align: top; display: flex; flex-direction: column; }
#ccus .wrapper table tr td:last-child { padding-left: 30px; /*6.25rem; */ }
#ccus .wrapper table tr td img { border-radius: 5rem; display: block; }
#ccus .wrapper table tr td .img { flex: 1; display: flex; align-items: stretch; justify-content: center; overflow: hidden; }
#ccus .wrapper div.img img { object-fit: contain; width: 100%; height: 100%; max-width: 100%; }


/* -------------------- ELEMENTS ------------------------- */
body.publications #video > div { max-width: var(--max-width); margin: 85px auto 0px auto; padding: 20px 40px 0px 40px; box-sizing: border-box; }
body.publications #elements { position: relative; border-radius: 5rem; overflow: hidden; }
body.publications #elements video { width: 100%; display: block; z-index: 0; }
body.publications #elements .overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; }
body.publications #elements .overlay::after { content: ""; position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; background-color: rgba(0,0,0,0.3); z-index: -1; border-radius: 5rem; }
body.publications #elements h2 { color: var(--color-red); margin-bottom: 10px; font-size: var(--h1-font-size); }
body.publications #elements .scroll { background-image: url(themes/icon-nav-red.png); width: 34px; height: 50px; background-size: contain; background-position: center; background-repeat: no-repeat; transform: rotate(270deg); display: inline-block; animation: bounce1 1.2s infinite;  /* loop animation */ transition: transform 0.3s ease; } 
body.publications #elements .scroll:hover { transform: rotate(270deg) scale(1.2); animation: none; }
@keyframes bounce1 {
  0%, 100% { transform: rotate(270deg) translateX(4px); }
  50%      { transform: rotate(270deg) translateX(-4px); }
}


#element-list .wrapper { text-align: center; position: relative; }
#element-list .wrapper > div { position: relative; overflow: hidden; }
#element-list .l-panel { position: relative; }
#element-list .l-panel > div.bg { position: absolute; top: 20vh; left: 0px; width: 100%; height: 90vh; color: var(--color-light-grey); font-size: 45vw; font-weight: bold; line-height: 80vh; z-index: -1; text-align: right; padding-right: 5%; box-sizing: border-box; }
#element-list .l-panel > div.text { max-width: 600px; margin: auto; }
#element-list .years { position: relative; display: inline-block; font-size: var(--h3-font-size); cursor: pointer; user-select: none; margin: 2rem 0px; font-weight: 500;}
#element-list .years.selected { font-weight: bold; }
#element-list #years > div:first-child { display: flex; align-items: center; border: solid 2px var(--color-red); padding: 1rem; border-radius: 3rem; line-height: 0.8; }
#element-list #years > div.list { display: none; border: 1px solid #ccc; background: white; position: absolute; top: 100%; width: 100%; z-index: 10; font-size: 1.25rem; }
#element-list .year { padding: 5px 1rem; cursor: pointer; }
#element-list .year:hover { background-color: var(--color-yellow); }
#element-list .year.current { background-color: var(--color-red); color: var(--color-white); }
#element-list .arrow { cursor: pointer; color: var(--color-red); margin-left: 10px; width: 20px; height: 1rem; background-image: url(themes/arrow-down.png); background-size: contain; background-position: center; background-repeat: no-repeat; flex-shrink: 0; animation: bounce 1.2s infinite;  /* loop animation */ transition: transform 0.3s ease; }
#element-list #years > div:first-child:hover .arrow { transform: scale(1.2); animation: none; }
#element-list .arrow.up { transform: scaleY(-1); }

@keyframes bounce {
  0%, 100% { transform: translateY(4px); }
  50%      { transform: translateY(-4px); }
}
@keyframes bounceReverse {
  0%, 100% { transform: rotate(30deg) translateY(-4px); }
  50%      { transform: rotate(30deg) translateY(4px); }
}



#element-list .l-panel > .list { position: relative; width: 100%; max-width: 800px; margin: 0 auto; padding: 20px 0; }
#element-list .l-panel > .list::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--color-yellow); transform: translateX(-50%); z-index: -1; } 

#element-list .item { display: none; position: absolute; width: 45%; margin-bottom: 6.25rem; text-align: left; transition: top 0.3s; cursor: pointer; }
#element-list .item.active { display: block; }
#element-list .item a { color: var(--color-text); }

#element-list .item:hover img { transform: scale(1.05); }
#element-list .item:hover, #element-list .item:hover h3 { font-weight: bold; }
#element-list .item img { width: 100%; height: auto; border-radius: 30px; transition: transform 0.5s ease; display: block; }
#element-list .item .date { font-style: italic; margin: 1rem 0px 5px 0px; }
#element-list .item h3 { font-weight: 600; letter-spacing: 0px; font-size: 1rem; }

/* First item starts on the right */
#element-list .item:nth-child(odd) { left: 50%; margin-left: 5%; }
#element-list .item:nth-child(even) { text-align: right; }

/* Dots on the line */
#element-list .item::before { content: ''; position: absolute; top: 20px; width: 8px; height: 8px; background: var(--color-red); border-radius: 50%; z-index: 1; top: var(--bullet-top, 0px); /* default 0px */ }
#element-list .item:nth-child(odd)::before { left: -10%; margin-left: -8px; }
#element-list .item:nth-child(even)::before { right: -10%; margin-right: -8px; }
	
#element-list .r-panel { background-color: var(--color-menu-light-grey); border-radius: 5rem; padding: 6.25rem; position: relative; margin-left: 2.5%; position: absolute; top: 0px; transition: left 0.3s ease, right 0.3s ease; width: 97.5%; box-sizing: border-box; z-index: 1; right: -110%; }
#element-list .r-panel::before { content: ''; position: absolute; width: 8px; height: 8px; top: 6.25rem; left: -2.5%; margin-top: 6px; background: var(--color-red); border-radius: 50%; z-index: 1; }
#element-list .r-panel::after { content: ''; position: absolute; top: 0; bottom: 0; left: -2.5%; width: 2px; background: var(--color-yellow); transform: translateX(-50%); z-index: -1; margin-left: 4px;}
#element-list .r-panel > div.back { position: absolute; left: 2.5rem; top: 6.25rem; width: 20px; height: 20px; background-image: url(themes/icon-arrow-right.png); transform: scaleX(-1); background-size: contain; background-repeat: no-repeat; background-position: center; cursor: pointer; }
#element-list .r-panel > div.detail { display: flex; }
#element-list .r-panel div.cover-photo { width: 30%; flex-shrink: 0; margin-right: 3.125rem; }
#element-list .r-panel div.cover-photo img { border-radius: 30px; }
#element-list .r-panel div.content h1 { letter-spacing: 1px; font-size: var(--h4-font-size); }
#element-list .r-panel div.content .date { }
#element-list .r-panel div.content > div { text-align: left; }
#element-list .r-panel div.content > div p { margin: 0px; }

/* #element-list .l-panel > .list.pushed-left { margin-left: -25%; } */
#element-list .r-panel.show { }
#element-list .r-panel.pushed-right > div.back { transform: scaleX(1); right: 2.5rem; left: auto; }
#element-list .r-panel.pushed-right div.cover-photo { margin-right: auto; margin-left: 3.125rem; }
#element-list .r-panel.pushed-right { left: -110%; transition: left 0.3s ease; margin-right: 2.5%; margin-left: 0px; }
#element-list .r-panel.pushed-right::before { right: -2.5%; left: auto; }
#element-list .r-panel.pushed-right::after { left: auto; right: -2.5%; margin-right: 2px; margin-left: auto; }
#element-list .r-panel.pushed-right > div.detail { flex-direction: row-reverse; }
#element-list .r-panel.pushed-right.show { left: 0px; }
#element-list .r-panel.pushed-left { }
#element-list .r-panel.pushed-left.show { right: 0px; }

body.publication #main-content .wrapper { max-width: auto; max-width: none; max-width: initial; padding: 0px; }
#media-head { text-align: center; background-color: var(--color-light-grey); }
#media-head > div { padding: calc(3.125rem + 85px) 40px 3.125rem 40px; max-width: var(--max-content-width); margin: auto; }
#media-head h1 { font-size: var(--h3-font-size); letter-spacing: 0px; margin-bottom: 0px; color: var(--color-text); }
#media-head h4 { color: var(--color-red); font-size: 1rem; letter-spacing: 0px; }
#media-head p.date { line-height: 1; margin-top: 10px; }
body.publication #main-content .content { max-width: var(--max-content-width); margin: auto; padding: 3.125rem 40px; }

#prev-next { display: flex; margin-top: 2rem; }
#prev-next > div { display: flex; flex-direction: column; flex: 1; padding-right: 1rem; }
#prev-next > div a { font-weight: 600; line-height: 35px; position: relative; }
#prev-next > div a:hover { color: var(--color-yellow); }
#prev-next > div a::before { content: ""; position: absolute; background-repeat: no-repeat; width: 1rem; height: 100%; background-size: contain;}
#prev-next .prev a { padding-left: 1.5rem; }
#prev-next .prev a::before { background-image: url(themes/icon-nav-red.png); background-position: left center; left: 0px; }
#prev-next .next a { padding-right: 1.5rem; }
#prev-next .next a::before { background-image: url(themes/icon-nav-red.png); transform: scaleX(-1); transform-origin: center; background-position: right center; right: 0px; }
#prev-next > div .title { font-size: var(--h4-font-size); font-weight: 600; line-height: 1; }
#prev-next .date { font-style: italic; margin-top: 10px; }
#prev-next .next { text-align: right; padding-right: 0px; padding-left: 1rem; }

#careers .dataTables_wrapper .dataTables_filter { float: none; text-align: left; background-image: url(themes/top-curve-red-bg.webp); background-position: bottom; padding: 10rem 40px 5rem 40px; text-align: center; }
#careers .dataTables_wrapper .dataTables_filter input { border-radius: 30px; padding: 14px 20px; width: 100%; box-sizing: border-box; background-color: var(--color-white); border: none; margin: 0px; max-width: var(--max-content-width); font-size: 1rem; /* 1.5625rem */ }



/* --------------------- cookieconsent ------------- */
#cookieconsent { position: fixed; top: 0px; height: 100%; width: 100%; left: 0px; z-index: 1003; }
#cookieconsent::before { content: ""; position: absolute; background-color: var(--color-text); opacity: 0.8; width: 100%; height: 100%; }
#cookieconsent > .text { padding: 15px 40px; width: 100%; position: fixed; font-size: 14px; z-index: 1002; bottom: 0px; background-color: var(--color-white); border-top: solid 1px var(--color-light-grey); box-sizing: border-box; }
#cookieconsent .wrapper { padding: 0px; display: flex; align-items: flex-end; gap: 1rem; }
#cookieconsent .wrapper > div:first-child { flex-grow: 1; margin-bottom: 0px; }
#cookieconsent h4 { letter-spacing: 0px; }
#cookieconsent a { color: var(--color-red) }
#cookieconsent a:hover { color: var(--color-yellow); }
#cookieconsent #btnclosecookie { position: absolute; top: 0px; right: 0px; }
#cookieconsent #btnclosecookie img { width: 40px; }


/* -------------------- footer-menu ----------------- */
#footer-menu { background-color: var(--color-red); font-size: 0.875rem; position: relative; z-index: 1; }
.red #footer-menu { background-color: var(--color-white); }
#footer-menu .wrapper { padding: 0rem 40px 15px 40px; }
#footer-menu ul { list-style: none; text-align: center; margin-top: 0; margin-bottom: 0px; display: flex; justify-content: center; }
#footer-menu ul li { padding-left: 1rem; padding-right: 1rem; margin: 0px; line-height: 1; border-right: 1px solid var(--color-white);  }
#footer-menu ul li:last-child { border-right: 0px; }
#footer-menu ul a { color: var(--color-white);}
#footer-menu ul a:hover { color: var(--color-yellow); }
.red #footer-menu ul a { color: var(--color-text);}
.red #footer-menu ul a:hover { color: var(--color-red);}
.red #footer-menu ul li { border-color: var(--color-text); }

/* -------------------- contact-form ----------------- */
.tbContactform input.text, input.text { width: 100%; background-color: var(--color-white); padding: 14px 20px; border-radius: 30px; margin: 0px 0% 12px 0%; font-size: 1rem; /* 1.5625rem */ position: relative; z-index: 1; font-family: var(--font-family); line-height: 1; border: none; font-weight: 400; box-sizing: border-box; border: solid 1px #cecece; }
.tbContactform textarea { width: 100%;  background-color: var(--color-white); padding: 14px 20px; border-radius: 25px; margin: 0px 0% 12px 0%; font-size: 1rem; /* 1.5625rem */ position: relative; z-index: 1; height: 122px; font-family: var(--font-family); line-height: 1; border: none;  resize: none; font-weight: 400; box-sizing: border-box; border: solid 1px #cecece; }
.tbContactform a { color: var(--color-red); }
.tbContactform a:hover { color: var(--color-yellow); }
.tbContactform td.button { padding-top: 20px !important; }

.button input[type="submit"] { cursor: pointer; border: none;  }
div.g-recaptcha { margin-top: 20px; }



/* OLD CSS CODE */
h3 span { color: #a5a5a5; }
h3.line { font-size: 22px; margin-bottom: 25px; border-bottom: solid 1px #d1d1d1; }
h3.line span { color: var(--color-text); padding-bottom: 25px; display: inline-block; *display: inline; zoom: 1; border-bottom: solid 3px var(--color-red);}

img { max-width: 100%; height: auto; border: none; outline: none; }

ol { margin-top: 20px; padding-left: 0px; }
ul, ul > ul > ul { margin-top: 20px; text-align: left; padding-left: 0px; }
ul, ul ul ul { list-style-image: url(themes/list-bullet.png);  }
ul ul { list-style-image: url(themes/list-bullet-border.png); }
ol li { list-style-image: none; }
li { margin-left: 15px; }
body.subpage li { margin-left: 35px; padding-left: 12px; margin-bottom: 20px; text-align: left; }
body.terms-of-use #main-content .content, body.privacy-policy #main-content .content { text-align: left; }

span.bold { font-weight: 400; }

table.border { border-collapse: collapse; border: solid 1px #d1d1d1; }
table.border th, .table-border .th > div { background-color: var(--color-light-grey); padding: 10px; }
table.border td { padding: 10px; border: solid 1px #d1d1d1; }

.table-border .item { display: flex; }
.table-border .th { font-weight: bold; }
.table-border .item > div { padding: 10px; border: solid 1px #d1d1d1; border-right: 0px; border-bottom: 0px; flex-shrink: 0; }
.table-border .item > div:last-child { border-right: solid 1px #d1d1d1; }
.table-border .item:last-child { border-bottom: solid 1px #d1d1d1; }

.divTable { display: table; width: 100%; }
.divRow { display: table-row; }
.divCol { display: table-cell; width: 50%; }
.divCol.middle { vertical-align: middle; } 
.divCol.center { text-align: center; }
body.subpage #main-content .divTable .divCol a { margin: 30px !important; }
/*
table th { font-size: 20px; color: #4a8a38; font-weight: 400; padding: 5px 10px; line-height: 1; vertical-align: bottom; }
table td { padding: 5px 10px;  }
*/


/*
.btn-fill-grey { font-size: 13px; font-weight: bold; color: var(--color-white) !important; background-color: var(--color-text); padding: 15px 25px; border-radius: 20px; display: inline-block; *display: inline; zoom: 1; min-width: 65px; text-transform: uppercase; outline: none; text-shadow: none; }
.btn-fill-grey:hover { background-color: var(--color-red); text-decoration: none; }
*/

/*
a.btn-border-red { font-weight: bold; color: var(--color-red); border: solid 2px var(--color-red); padding: 6px 25px; border-radius: 20px; display: inline-block; *display: inline; zoom: 1;  text-transform: uppercase; outline: none; text-shadow: none;}
a.btn-border-red:hover { color: var(--color-white); background-color: var(--color-red); text-decoration: none; }
a.btn-border-yellow { font-weight: bold; color: #ffcc00; border: solid 2px #ffcc00; padding: 6px 25px; border-radius: 20px; display: inline-block; *display: inline; zoom: 1; min-width: 92px;  text-transform: uppercase; outline: none; text-shadow: none;}
a.btn-border-yellow:hover, #footer-2cols a.btn-border-yellow:hover { color: var(--color-text); background-color: #ffcc00; text-decoration: none; }
a.btn-spay { background-image: url(themes/btn-spayglobal.png); background-size: cover; width: 145px; height: 35px; display: inline-block; *display: inline; zoom: 1; cursor: pointer; margin-top: 10px; }
a.btn-spay:hover { background-image: url(themes/btn-spayglobal-hover.png); }
a.whatsapp, a.call { background-color: #25d366; background-image: url(themes/icon-whatsapp-w-s.png); background-size: 18px; background-position: center left 11px; background-repeat: no-repeat; height: 18px; min-width: auto; min-width: initial; min-width: none; padding: 10px; width: 18px; border-radius: 30px; margin: auto 5px; }
a.call { background-image: url(themes/icon-call-w-s.png); background-color: var(--color-red); background-size: 12px; background-position: center; }
*/

.home #popup img { display: block; width: 100%; height: auto; max-width: 1000px; }

body.subpage.nobannertext .wrapper_s, body.subpage.newsevent .wrapper_s, body.subpage.pressrelease .wrapper_s { padding-bottom: 60px; }
body.subpage a { color: var(--color-red); }
body.subpage #main-content .content a { margin-bottom: 10px !important; }
body.subpage #main-content .content .breadcrumb a { margin-bottom: 0px !important; }
#banner-zone .wrapper_s { padding-bottom: 0px; }
#section-2 { max-width: var(--max-content-width); padding: 40px; margin: auto; }

.youtube { max-width: 100%; }
.nbr { display: none; }

#mmenulist { display: none; }
.slicknav_nav a { text-transform: uppercase; color: var(--color-text) !important; }
.slicknav_nav > li { margin-bottom: 0px !important;	padding-left: 0px !important; }



/* -------------------- icon-link -------------------- */
#icon-link { position: fixed; right: 15px; z-index: 1001; top: 50%; display: none; }
#icon-link a { display:block; margin: 5px 0px; border: solid 2px var(--color-white); border-radius: 30px; outline: none; }
#icon-link a img { display:block; }


/* ------------------------- slugmenu ----------------------------- */
#slugmenu { padding: 5px 0px; border-bottom: solid 2px #f2f0ed; overflow: hidden; margin-top: -5px; margin-bottom: 45px; text-align: left; }
#slugmenu a { color: #58554f; font-size: 14px; text-transform: uppercase; text-decoration: none; font-weight: normal; }
#slugmenu img.separator { margin: 0px 10px; position: relative; top: -1px; }
#slugmenu span { color: #3e3e3e; font-size: 14px; text-transform: uppercase; font-weight: normal; }

body.gallery #slugmenu { margin-top: 0px; border-bottom: none; }


/* ------------------------- home-content ------------------------- */
/*
#home-content { background-image: url(themes/red-curve-bg.png); background-size: 100%; background-repeat: no-repeat; background-position: top; color: var(--color-white)fff; text-align: center; margin-top: -15%; padding-top: 16%; position: relative; pointer-events: none; }
#home-content .wrapper { padding: 60px 0px 80px 0px; position: relative; }
#home-content .wrapper.text { pointer-events: auto; font-size: 24px; }
#home-content .wrapper.text .desc { display: none; }
#home-content .wrapper.text h1 { font-size: 30px; color: var(--color-white)fff; }
#home-content .wrapper.text a { color: var(--color-white); text-decoration: underline; }
*/

/* ------------------------- inner-content ------------------------- */
.breadcrumb { color: var(--color-dark-grey-lighter); padding-top: 5px; font-size: 13px; pointer-events: auto; text-transform: uppercase; }
.breadcrumb a { color: var(--color-dark-grey) !important; display: inline-block !important; }
.breadcrumb a:hover { color: var(--color-red) !important; text-decoration: none; }
.breadcrumb .breadcrumb-current { color: var(--color-red); display: inline-block;  }
.breadcrumb-separator { color: transparent; padding: 0 8px; width: 8px; display: inline-block; background-image: url(themes/breadcrumb-separator.png); background-repeat: no-repeat; background-position: center; line-height: 1; background-size: auto 80%; }


#intro-text { margin-bottom: 60px; }


#h-latest-news-events { background-color: var(--color-white); }
#h-latest-news-events .wrapper { padding: 80px 0px; }
#h-latest-news-events h1 span { display: block; font-size: 15px; margin-bottom: 10px; font-weight: 300; } 
#h-latest-news-events .item { float: left; width: 31%; margin-left: 3.5%; position: relative; }
#h-latest-news-events .item:first-child { margin-left: 0px; }
#h-latest-news-events img { display: block; }
#h-latest-news-events .image { margin-bottom: 15px; }
#h-latest-news-events .info { position: relative; }
#h-latest-news-events .info .title .date, #media-list .list .item div.date { float: left; }
#h-latest-news-events .item .info .desc { padding-bottom: 55px; margin-top: 20px; }
#h-latest-news-events .item .item .info .desc { margin-bottom: 20px; padding-bottom: 0px; }
#h-latest-news-events .info a.btn-border-red { position: absolute; bottom: 0px; }
#h-latest-news-events .item > .item { float: none; width: auto; width: initial; margin-left: 0px; padding-bottom: 30px; background-image: url(themes/dotted-line.png); background-repeat: repeat-x; background-position: bottom 30px center; }
#h-latest-news-events .info .title a:hover { color: var(--color-red); text-decoration: none; }
#h-latest-news-events .item .btn { text-align: center; position: absolute; bottom: -35px; width: 100%; }
#h-latest-news-events .item .btn a { margin-left: 30px; padding: 8px 20px; }
#h-latest-news-events .item .btn a.btn-fill-yellow { color: var(--color-text); margin-left: 0px; }

/* ------------------- achievements-and-milestones ----------------- */
/*
#achievements-and-milestones { background-color: var(--color-light-grey); padding: 60px 0px; text-align: center; } 

#timeline > .wrapper > .slick-list {
  background-image: url('themes/timeline-bg.png');
  background-repeat: repeat-x;
  background-position: center;
}
.slick-slide {
  position: relative;
  margin: 0px;
}
#milestone .slick-slide {
	margin: 0px 20px;
	padding-bottom: 25px; 
}
#milestone .slick-current {
  position: relative;
  display: inline-block;
  background-image: url('themes/milestone-indicator.png');
  background-position: center bottom 14px;
  background-repeat: no-repeat;
  background-size: auto; 
}

#milestone .milestone-img {
  display: block;
  width: 100%;
}


#milestone .text { background-color: var(--color-white); padding: 30px; border-radius: 5px; border-bottom: solid 5px var(--color-red); }
#milestone .text > h3 {
  margin-bottom: 10px;
  font-size: 20px;
}

#timeline {
  margin: -30px auto 0px auto;
  max-width: 85%; 
}

#timeline .item {
  margin: 0px;
}

#timeline .item > .img {
  position: relative;
  left: 58px;
}

 #timeline > div > .slick-list {
 }

#timeline .img {
  background-image: url('themes/timeline-normal.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 124px;
  height: 185px;
}

#timeline .item:last-child > .img {
  background-image: url('themes/timeline-normal-last.png');
}

#timeline .item:last-child > .img {
  background-image: url('themes/timeline-normal-last.png');
}

#timeline .slick-current > .img {
  background-image: url('themes/timeline-selected.png') !important;
}

#timeline .item:last-child.slick-current > .img {
  background-image: url('themes/timeline-selected-last.png') !important;
}

#timeline .slick-prev,
#timeline .slick-next {
  background-size: auto;
  background-position: center;
  background-repeat: no-repeat;
  border: none;
  position: absolute;
  z-index: 1;
  width: 20px;
  height: 20px;
  overflow: hidden;
  color:transparent;
  top: 50%;
  margin-top: -10px;
  background-color: rgba(0,0,0,0);
}

#timeline .slick-prev {
  background-image: url('themes/timeline-left-arrow.png');
  left: 10px;
  cursor: pointer;
  background-color: transparent;
}

#timeline .slick-next {
  background-image: url('themes/timeline-right-arrow.png');
  right: 10px;
  cursor: pointer;
  background-color: transparent;
}

#timeline .date {
  position: absolute;
  width: 80px;
  left: -40px;
  bottom: 35px;
  line-height: 1.2;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold; 
}
#timeline .date .mth { font-size: 20px; text-transform: uppercase; display: block; line-height: 1;  }
#timeline .date .year { font-size: 13px; display: block; }

#timeline .slick-current .date .mth { font-size: 32px; }
#timeline .slick-current .date .year { font-size: 18px; }

#timeline .slick-current > .img > .date {
  bottom: 5px;
  font-weight: 600;
  font-size: 25px;
  line-height: 20px;
}
*/

/*#tender-opportunities { padding: 80px 0px; background-color: var(--color-light-grey); } */
#tender-opportunities > div { max-width: var(--max-content-width); margin: auto; padding-bottom: 80px; }
#tenderops .th { background-color: var(--color-text) !important; color: var(--color-white); font-weight: bold; font-size: 15px; }
#tenderops .th div { padding: 10px 25px; }
#tenderops .item { border: solid 1px #d5d5d5; display: flex; border-bottom: none; background-color: var(--color-white); }
#tenderops .item:last-child { border-bottom: solid 1px #d5d5d5; }
#tenderops .item > div { padding: 10px 1%; flex-grow: 0; flex-shrink: 0; box-sizing: border-box; }
#tenderops .item > div.id { width: 55px; text-align: right; }
#tenderops .item > div.project { flex-grow: 1; flex-shrink: 1; }
/* #tenderops .item div.ref { width: 125px; padding: 10px; flex-shrink: 0; flex-grow: 0; }
#tenderops .item div.title { flex-grow: 1; flex-shrink: 1; padding: 10px; } */
#tenderops .item > div.category { width: 22%; text-align: center; }
#tenderops .item > div.date { width: 165px; text-align: center; }
#tenderops .item > div.status { width: 130px; text-align: center; }
#tenderops .item > div.status a { min-width: auto; min-width: initial; min-width: none; }
#tenderops .norecord { text-align: center; padding: 10px; }

/* ------------------- tender detail page ------------------ */
#tender-project .in { display: flex; }
#tender-project .in label { font-weight: bold; width: 180px; }
#tender-project .in span { }
#tender-project .in2 { margin: 1rem 0rem; }
#tender-project { margin-bottom: 80px; }

#tender_packages.table-border { margin: 1rem 0px; }
#tender_packages.table-border .id { width: 30px; }
#tender_packages.table-border .title { flex-grow: 1; flex-shrink: 1; }
#tender_packages.table-border .date { width: 150px; text-align: center; }
#tender_packages.table-border .status { width: 80px; text-align: center; }
#tender_packages.table-border .norecord { border: solid 1px #d1d1d1; padding: 10px; }

#tender-form { padding: 80px 0px; background-color: var(--color-light-grey); }
#tender-form h2 { text-align: center; }
#tender-form .mandatory { text-align: left; margin-bottom: 20px; font-weight: bold; font-style: italic; }
.tenderform { margin-top: 25px; border-top: solid 1px #d1d1d1; padding-top: 25px !important; padding: 0px; }
.tenderform .terms { text-align: left; margin-bottom: 20px; } 
.tenderform .terms li { margin-bottom: 5px; }
.tenderform form { border: solid 1px #d1d1d1; background-color: var(--color-white); padding: 30px; }
.tenderform td h3 { font-size: 16px; margin-bottom: 15px; text-align: left; color: var(--color-red); margin-top: 20px; }
.tenderform td h3 a { text-decoration: underline; }
.tenderform td span.note { text-align: left; display: block; margin-left: 1.1rem; font-size: inherit; font-style: normal;}
.tenderform .checkbox-holder input[type="checkbox"] { opacity: 1; position: relative; top: 1px; }
.tenderform .checkbox-holder input[type="checkbox"]:checked + span:before { content: none; }
.tenderform .agree input[type="checkbox"] { opacity: 1 !important; margin-left: 2% !important; }
.tenderform .agree input[type="checkbox"]:checked + span:before { content: none; }
.tenderform .btn-fill-red { border: none; }
/* .tenderform .agree .chk { position: absolute; top: 5px; } */
.tenderform .term-statement { border-top: solid 1px #d1d1d1; margin-top: 20px; padding-top: 30px; }
.tenderform .check-holder { position: relative; margin-top: 20px; }
.tenderform .checkbox-holder.error span.text { color: var(--color-red); }
.tenderform .radio-holder  { position: relative; display: block !important; text-align: left; padding-left: 20px !important; }
.tenderform .radio-holder span { margin-left: 15px; }

/* ------------------- pdpa consent popup ------------------ */
form a.open-pdpa-link { display: none; } 
.popup-pdpa.wrapper_s { box-sizing: border-box; }
.popup-pdpa li:last-child { margin-bottom: 0px; }
.popup-pdpa .content h2 { text-align: center; }
.popup-pdpa #pdpaconsent { margin-top: 1rem; position: relative; }
.popup-pdpa #pdpaconsent input[type="checkbox"] { position: absolute; top: 4px; z-index: 1; }
.popup-pdpa #pdpaconsent .text { float: left; margin-left: 30px; }
.popup-pdpa #pdpaconsent .chk { position: absolute; top: 4px; z-index: 0; display: inline-block; *display: inline; zoom: 1; height: 10px; width: 10px; z-index: 0; border: solid 1px var(--color-text); }
.popup-pdpa #pdpaconsent input[type="checkbox"].error { border: solid 1px var(--color-red); -moz-appearance: none; -webkit-appearance: none;-o-appearance: none; width: 13px; height: 13px; border-radius: 3px; }
.popup-pdpa #pdpaconsent .button { padding-top: 1rem; text-align: center; clear: both; }			




/* ------------------- leadership -------------------------- */
#leadership-list { text-align: center; }
#leadership-list .section.sel { display: block !important; }
#leadership-list .group { background-color: var(--color-light-grey); padding: 80px 0px; }
#leadership-list .group img { width: 100%; }
#leadership-list .cat { display: inline-block; *display: inline; zoom: 1; margin: 0px 10px; font-size: 18px; }
#leadership-list .cat a { color: var(--color-text); line-height: 35px; font-weight: bold; text-decoration: none; padding-bottom: 5px; }
#leadership-list .cat a:hover, #leadership-list .cat-sel a { border-bottom: solid 3px var(--color-red); }
#leadership-list #leader-category { margin-bottom: 5px; }
#leadership-list #leader-category > div { border-bottom: solid 1px #d1d1d1; }
#leadership-list .list { padding: 80px 0px; position: relative; }
#leadership-list .list .item { display: inline-block; *display: inline; zoom: 1; width: 21.5%; margin: 0px 1.5% 1.5% 1.5%; vertical-align: top; }
#leadership-list .list .item .row { position: relative; }
#leadership-list .list .item img.profile { width: 200px; height: 200px; border-radius: 100px; display: block; margin: auto; cursor: pointer; }
#leadership-list .list .item .info { min-height: 80px; }
#leadership-list .list .item .name { font-size: 18px; font-weight: bold; margin-top: 10px; line-height: 1.2; }
#leadership-list .list .item .position { font-size: 13px; margin-bottom: 20px; }
#leadership-list .list .item .bio { height: 0px; overflow: hidden; }
#leadership-list .list .item .bio .text { margin-top: -7px; position: absolute; width: 100%; left: 0px; right: 0px; visibility: hidden;  }
#leadership-list .list .item .bio .text > div { background-color: var(--color-light-grey); text-align: justify; border: solid 1px #e2e2e2; padding: 30px; }
#leadership-list .list .item img.arrow { width: 21px; height: 10px; margin: auto; }
#leadership-list .list > .item:first-child { float: none; width: auto; width: initial; margin: 0px 0px 1.5% 0px; }

/* ----------------- downstream-residential ------------------ */
#downstream-residential, #downstream-commercial, #lpg-gas-products { text-align: center; padding: 0px 0px 80px 0px;}
#downstream-residential .section.sel, #downstream-commercial .section.sel, #lpg-gas-products .section.sel, #buy-lpg .section.sel { display: block !important; }
#downstream-residential .cat, #downstream-commercial .cat, #lpg-gas-products .cat, #buy-lpg .cat { display: inline-block; *display: inline; zoom: 1; margin: 0px 10px; font-size: 18px; }
#downstream-residential .cat a, #downstream-commercial .cat a, #lpg-gas-products .cat a, #buy-lpg .cat { color: var(--color-text); line-height: 35px; font-weight: bold; text-decoration: none; padding-bottom: 5px; }
#downstream-residential .cat a:hover, #downstream-residential .cat-sel a, #downstream-commercial .cat a:hover, #downstream-commercial .cat-sel a, #lpg-gas-products .cat a:hover, #lpg-gas-products .cat-sel a, #buy-lpg .cat:hover, #buy-lpg .cat-sel { border-bottom: solid 3px var(--color-red); }
#downstream-residential #downstream-category, #downstream-commercial #downstream-category, #lpg-gas-products #downstream-category, #buy-lpg #buy-lpg-menu { margin-bottom: 5px; }
#downstream-residential #downstream-category > div, #downstream-commercial #downstream-category > div, #lpg-gas-products #downstream-category > div, #buy-lpg #buy-lpg-menu > div { border-bottom: solid 1px #d1d1d1; }
#downstream-residential .section-desc, #downstream-commercial .section-desc, #lpg-gas-products .section-desc { text-align: justify; }

#safety { background-color: #ffcc00; padding: 60px 0px; text-align: center; }
#safety > div { max-width: var(--max-content-width); width: 100%; padding: 0px 40px; margin: auto; }
#safety table { color: var(--color-white); }
#safety table td.safety-learn-more { width: 48%; padding-right: 2%; background-size: 96%; background-position: left top; background-repeat: no-repeat; }
#safety a.btn-fill-red { margin: 5px 10px; }

#lpg-reserve-section #tbReserveform h2, #customer-satisfaction-form #tbSatisfactionForm h2 { font-size: 18px; }

/* ----------------- downstream-list ------------------ */
#downstream-list h3 { font-size: 18px; }
#downstream-list .item { background-color: var(--color-light-grey); position: relative; text-align: left; }
#downstream-list .item > div { }
#downstream-list .item .img { width: 40%; float: left; background-size: cover; background-position: center; }
#downstream-list .item .img img { display: block; }
#downstream-list .item .text { border-collapse: collapse; width: 60%; display: table; float: right; background-color: var(--color-light-grey);  }
#downstream-list .item .text > div { display: table-cell; vertical-align: middle; padding: 6%; }
#downstream-list .item a { margin-top: 25px; }
#downstream-list .item.even .img { float: right; }
#downstream-list .item.even .text { float: left; }

/* ------------------ upstream-list ------------------- */
#upstream-list { text-align: center; padding: 0px 0px 80px 0px; }
#upstream-list .section.sel { display: block !important; }
#upstream-list .item { background-color: var(--color-light-grey); position: relative; text-align: left; background-size: 100%; }
#upstream-list .item .img { width: 40%; float: left; background-size: 100%; background-position: center; background-repeat: no-repeat; background-color: var(--color-white); }
#upstream-list .item .text { border-collapse: collapse; width: 60%; display: table; float: right; background-color: var(--color-light-grey); }
#upstream-list .item .text > div { display: table-cell; vertical-align: middle; padding: 6%; }
#upstream-list h3 { font-size: 18px; }
#upstream-list .item a { margin-top: 25px; }
#upstream-list .item.even .img { float: right; }
#upstream-list .item.even .text { float: left; }
#upstream-list .item ol, #upstream-list .item ul, #upstream-list .item ol li, #upstream-list .item ul li { margin-top: 0px; margin-bottom: 0px; }

/* 20230519.Careen - Customized */
#upstream-list .item:first-child { margin-bottom: 30px; }
#upstream-list .item:first-child > div { display: flex; flex-direction: column; }
#upstream-list .item:first-child > div .img { float: none; width: 100%; height: auto !important; height: initial !important; border: solid 1px var(--color-light-grey); box-sizing: border-box; }
#upstream-list .item:first-child > div .text { float: none; width: 100%; height: auto !important; height: initial !important; } 
#upstream-list .item:first-child > div .text > div { height: auto !important; height: initial !important; }
#upstream-list .item:first-child > div .text > div > ol > li { margin-top: 1rem; margin-bottom: 1rem; }
#upstream-list .item:first-child > div .text ol ol { columns: 2; -webkit-columns: 2; -moz-columns: 2; width: 100%; max-width: 700px;}
#upstream-list .item::after { content: ""; clear: both; display: block; } 

#footer-text { text-align: justify; padding-bottom: 60px; }

/* ----------------- product-list ------------------ */
/*
#buy-petros-lpg { background-color: var(--color-light-grey); padding: 80px 0px 40px 0px; }  
#buy-petros-lpg > div { max-width: var(--max-content-width); padding: 0px 40px; width: 100%;margin: auto; }
#product-list .item { background-color: var(--color-light-grey); position: relative; text-align: left; background-repeat: no-repeat; }
#product-list .item > div { }
#product-list .item .img { width: 40%; float: left; background-size: cover; background-position: center; }
#product-list .item .text { border-collapse: collapse; width: 60%; display: table; float: right; background-color: var(--color-light-grey); }
#product-list .item .text > div { display: table-cell; vertical-align: middle; padding: 6%; }
#product-list .item a { margin-top: 25px; }
#product-list .item.even .img { float: right; }
#product-list .item.even .text { float: left; border-left: none; }

#dealer-filter select { width: 100%; background-color: var(--color-white); padding: 10px 2%; margin: 0px 0px 20px 0px; font-size: 15px; position: relative; z-index: 1; font-family: var(--font-family); line-height: 1; font-weight: 400; line-height: 1; border: solid 1px #cecece; border-radius: 2px; }

#dealer-and-reserve { background-color: var(--color-light-grey); padding: 0px 0px 30px 0px;  }
#dealer-and-reserve > div { max-width: var(--max-content-width); padding: 0px 40px; width: 100%;margin: auto; }
#buy-lpg-menu { text-align: center; }
#buy-lpg-menu.wrapper { padding: 0px; }

#lpg-dealer-section { background-color: var(--color-white); border: solid 1px #d1d1d1; padding: 30px 30px 0px 30px; display: none; }  
#lpg-dealer-section.sel { display: block; }
#lpg-dealer-section #map-wrapper { height: 350px; margin-bottom: 30px; width: 100%; position: relative; display: table; }
#lpg-dealer-section #map-wrapper div.text { vertical-align: middle; z-index: 0; display: table-cell; text-align: center; }
#lpg-dealer-section #map-wrapper #dealermap { position: absolute; z-index: 1; border: solid 1px #d1d1d1; width: 99.5%; height: 100%; }

#dealer-and-reserve #dealer-list { }
#dealer-and-reserve #dealer-list .item { float: left; width: 30%; margin-right: 5%; margin-bottom: 30px; transition: height 2s; }
#dealer-and-reserve #dealer-list .item.last { margin-right: 0px; }
#dealer-and-reserve #dealer-list .item .info { transition: height 2s; }
#dealer-and-reserve #dealer-list .item h3 span { font-weight: normal; display: block; color: var(--color-text); font-size: 13px; } 

#dealer-and-reserve #dealer-list .item .contact { margin: 5px 0px; }
#dealer-and-reserve #dealer-list .item .contact .icon { position: relative; top: 3px; display: inline-block; *display: inline; zoom: 1; }
#dealer-and-reserve #dealer-list .item .contact > a { display: inline-block; *display: inline; zoom: 1; }

#lpg-reserve-section { background-color: var(--color-white); border: solid 1px #d1d1d1; padding: 30px; display: none; }
#lpg-reserve-section.sel { display: block; }

#sarawak-pay { background-color: var(--color-light-grey); padding: 0px 0px 80px 0px; }  
#sarawak-pay > div { max-width: var(--max-content-width); padding: 0px 40px; width: 100%; margin: auto; }
#sarawak-pay > div > table td { padding: 30px; vertical-align: top; box-sizing: border-box; }
#sarawak-pay > div > table td:first-child { width: 60%; }
#sarawak-pay > div > table { border: solid 1px #d1d1d1; background-color: var(--color-white); }

#customer-satisfaction-form { background-color: var(--color-light-grey); padding: 80px 0px; }  
#customer-satisfaction-form > div { max-width: var(--max-content-width); width: 100%; margin: auto; padding: 0px 40px;}
#customer-satisfaction-form form { border: solid 1px #d1d1d1; background-color: var(--color-white); padding: 30px; }
#customer-satisfaction-form select { width: 98.5%; padding: 10px 1.5%; margin: 0px 0.8% 20px 0.8%; } 
#customer-satisfaction-form td.left { text-align: left; float: none; }
#customer-satisfaction-form td > span { margin-left: 0.8%; }
#customer-satisfaction-form td.highlight:hover { background-color: var(--color-light-grey); }
#customer-satisfaction-form td.highlight .radio-holder { float: right; width: 200px; }
#customer-satisfaction-form td.highlight > span { margin-left: 0.8%; line-height: 48px; }
#customer-satisfaction-form td.highlight div.radio-holder span { width: 50px; display: inline-block; *display: inline; zoom: 1; }
#customer-satisfaction-form div.radio-holder.rating { display: table; margin-left: 0.8%; }
#customer-satisfaction-form div.radio-holder.rating .item { display: table-cell; vertical-align: middle; }
#customer-satisfaction-form div.radio-holder.rating > div { width: 200px; }
#customer-satisfaction-form div.radio-holder.rating .item input, #customer-satisfaction-form div.radio-holder.rating .item span { top: -21px; position: relative; }
#customer-satisfaction-form div.radio-holder.rating .item img { margin-right: 10px; }
#customer-satisfaction-form div.radio-holder span { margin-left: 5px; }
#customer-satisfaction-form td #feedback { margin-top: 20px; }
*/

/* ------------------- media-centre -------------------------- */
#media-centre-index { margin-bottom: 80px; }
#media-centre-index table { border: none; }
#media-centre-index td { padding: 0px; border: none; }
#media-centre-index td.twocol td { height: 400px; vertical-align: bottom; position: relative; background-size: cover; background-repeat: no-repeat; background-position: center; }
#media-centre-index td.threecol td { height: 500px; vertical-align: bottom; width: 33.3%; position: relative; background-size: cover; background-repeat: no-repeat; }
#media-centre-index td a { background-size: cover; height: 100%; display: block; position: relative; font-size: 18px; color: var(--color-white); }
#media-centre-index td a:hover { color: var(--color-red); }
#media-centre-index > div { max-width: var(--max-content-width); padding: 0px 40px; margin: auto; }
#media-centre-index div.title { color: var(--color-white); font-weight: bold; line-height: 80px; background-image: url(themes/media-title-bg.png); background-size: 100% 100px; background-position: bottom; background-repeat: repeat-x; text-align: center; padding: 20px 0px 0px 0px; position: absolute; bottom: 0px; top: 0px; width: 100%; }
#media-centre-index div.title span { position: absolute; bottom: 0px; width: 100%; left: 0px; }

#media-list { text-align: center; }
#media-list .section.sel { display: block !important; }
#media-list .group { background-color: var(--color-light-grey); padding: 80px 0px 30px 0px; }
#media-list .group img { width: 100%; }
#media-list .cat, #menu-tab .cat { display: inline-block; *display: inline; zoom: 1; margin: 0px 10px; font-size: 18px; }
#media-list .cat a, #menu-tab .cat a { color: var(--color-text); line-height: 35px; font-weight: bold; text-decoration: none; padding-bottom: 5px; }
#media-list .cat a:hover, #media-list .cat-sel a, #menu-tab .cat a:hover, #menu-tab .cat-sel a { border-bottom: solid 3px var(--color-red); }
#media-list #media-category { margin-bottom: 5px; }
#media-list #media-category > div { border-bottom: solid 1px #d1d1d1; }
#media-list .list { position: relative; }
#media-list .item { float: left; width: 31%; margin-right: 3.5%; position: relative; text-align: left; margin-bottom: 50px; }
#media-list .item.last { margin-right: 0px; }
#media-list .item .image { margin-bottom: 15px; }
#media-list .item a.btn-border-red { margin-top: 20px; }
#media-list img { display: block; }
#media-list .norecord { margin-bottom: 50px; }

#media-list #year-cat { margin-bottom: 15px; }

#media-list .section.sel { display: block !important; }
#media-list .section { display: none; }

#gallery { text-align: center; background-color: var(--color-light-grey); padding: 80px 0px 30px 0px; }
#gallery .cat { display: inline-block; *display: inline; zoom: 1; margin: 0px 10px; font-size: 18px; }
#gallery .cat a { color: var(--color-text); line-height: 35px; font-weight: bold; text-decoration: none; padding-bottom: 5px; }
#gallery .cat a:hover, #gallery .cat-sel a { border-bottom: solid 3px var(--color-red); }
#gallery #gallery-category { margin-bottom: 5px; }
#gallery #gallery-category > div { border-bottom: solid 1px #d1d1d1; }


/*
#footer-2cols h2 { color: var(--color-white); margin-bottom: 0px; }
#footer-2cols p { margin: 25px 0px !important; }
#footer-2cols > div { width: 50%; background-size: cover; color: var(--color-white); }
#footer-2cols > div.left, .section-tpl > div.left { background-color: var(--color-red); }
#footer-2cols > div.right, .section-tpl > div.right { background-color: #1f1f1f; }
#footer-2cols > div .text { float: right; width: 40%; height: 300px; text-align: center; padding: 150px 5%; background-image: url(themes/overlay-r-79.png); background-size: cover; position: relative; }
#footer-2cols > div .img, .section-tpl > div .img { display: none; float: left; width: 50%; background-size: cover; }
#footer-2cols > div.right .img, .section-tpl > div.right .img { float: right; }
#footer-2cols > div.right .text, .section-tpl > div.right .text { float: left; background-image: url(themes/overlay-81.png); }
#footer-2cols a.btn-fill-yellow, #footer-2cols a.btn-border-yellow { position: absolute; bottom: 120px; left: 50%; margin-left: -73px; min-width: 96px; color: #ffcc00; }
.inner.news-and-events #footer-2cols a.btn-border-yellow { color: #ffcc00; }
.inner.news-and-events #footer-2cols a.btn-border-yellow:hover { color: var(--color-text); }
*/

.section-tpl h2 { color: var(--color-white); margin-bottom: 0px; }
.section-tpl p { margin: 25px 0px !important; }
.section-tpl > div { width: 50%; background-size: cover; background-position: center; color: var(--color-white); }
.section-tpl > div .text { float: right; width: 40%; text-align: center; padding: 50px 5%; background-image: url(themes/overlay-r-79.png); background-size: cover; position: relative; }
.section-tpl > div a.btn-border-yellow, .section-tpl > div a.btn-fill-yellow { position: absolute; bottom: 50px; left: 50%; margin-left: -73px; min-width: 96px; color: #ffcc00; }

/* ----------------- section-template ------------------ */
.section-tpl.lrlayout { padding-bottom: 80px; }
.section-tpl.lrlayout h3 { font-size: 18px; }
.section-tpl.lrlayout > div { width: 100%; color: var(--color-text); }
.section-tpl.lrlayout .item { background-color: var(--color-light-grey); position: relative; text-align: left; }
.section-tpl.lrlayout .item > div { }
.section-tpl.lrlayout .item .img { width: 40%; float: left; background-size: cover; background-position: center; display: block; }
.section-tpl.lrlayout .item .img img { display: block; }
.section-tpl.lrlayout .item .text { border-collapse: collapse; width: 60%; display: table; float: right; background-color: var(--color-light-grey); text-align: left; background-image: none; font-size: inherit; }
.section-tpl.lrlayout .item .text > div { display: table-cell; vertical-align: middle; padding: 6%; }
.section-tpl.lrlayout .item a { margin-top: 25px; }
.section-tpl.lrlayout .item.even .img { float: right; }
.section-tpl.lrlayout .item.even .text { float: left; }


#h-footerbanner { background-size: cover; color: var(--color-text); font-weight: 400; padding: 80px 0px; text-align: center; }
#h-footerbanner h1 { font-size: 28px; color: var(--color-text) !important; }
#h-footerbanner .text { max-width: var(--max-content-width) !important; }
#h-footerbanner a.btn-fill-red { margin: 20px 10px 0px 10px; }

/* ------------------- what-we-do ------------------------- */
#what-we-do-list { margin-bottom: 80px; }
#what-we-do-list #what-we-do { }
#what-we-do-list a { margin-top: 25px; }
#what-we-do .item { background-color: var(--color-light-grey); position: relative;  }
#what-we-do .item > div { }
#what-we-do .item .img { width: 40%; float: left; }
#what-we-do .item .img img { display: block; }
#what-we-do .item .text { border-collapse: collapse; width: 60%; display: table; float: right; background-color: var(--color-light-grey);  }
#what-we-do .item .text > div { display: table-cell; vertical-align: middle; padding: 6%; }
#what-we-do .item.even .img { float: right; }
#what-we-do .item.even .text { float: left; }

#be-our-partner { background-color: #ffcc00; padding: 60px 0px; text-align: center; }
#be-our-partner > div { max-width: var(--max-content-width); width: 100%; padding: 0px 40px; margin: auto; }

#faq { padding: 5rem 0px; text-align: center;  }
#faq > div { max-width: var(--max-content-width); width: 100%; padding: 0px 40px; margin: auto; box-sizing: border-box; text-align: center;  }
#faq h3 { font-size: 20px; }
#faq a { margin: 5px 10px; }

#our-business-principles { background-color: #ffcc00; padding: 60px 0px; text-align: center;  }
#our-business-principles > div { max-width: var(--max-content-width); width: 100%; padding: 0px 40px; margin: auto; }

/*
.inner.business-principles .content .wrapper h1 { }
#business-principles-list { margin-bottom: 80px; }
#business-principles-list .wrapper_s { padding-bottom: 0px; }
#business-principles-list .item { background-color: var(--color-light-grey); }
#business-principles-list .item > div { display: table; }
#business-principles-list .item .img { display: table-cell; vertical-align: middle; padding: 50px 0px 50px 30px; }
#business-principles-list .item .img img { display: block; max-width: 200px; border-radius: 100px; border: solid 1px #e4e4e4; }
#business-principles-list .item .text { display: table-cell; vertical-align: middle; padding: 50px 30px; }
*/

/* ------------------- partners ----------------------------- */
/*
#buyers-vendors { margin-bottom: 80px; }
#buyers-vendors .item { background-color:var(--color-light-grey);  }
#buyers-vendors .item > div { display: table; }
#buyers-vendors .item .img { width: 40%; display: table-cell; overflow: hidden; background-size: cover; }
#buyers-vendors .item .img img { display: block; }
#buyers-vendors .item .text { display: table-cell; vertical-align: middle; width: 60%; background-color: var(--color-light-grey); }
#buyers-vendors .item .text > div { padding: 6%; display: table-cell; vertical-align: middle;  }
#buyers-vendors a { margin-top: 25px; }
#buyers-vendors .item.even .img { float: right; }
#buyers-vendors .item.even .text { float: left; }
*/

#register-your-interest { padding-top: calc(95px + 2rem); }
#register-your-interest h2 { text-align: center; border-bottom: solid 1px var(--color-menu-light-grey); padding-bottom: 20px; }
#register-your-interest h3 span.red { color: var(--color-red); padding: 0px; border: none; }
#register-your-interest > div { max-width: var(--min-form-width); margin: auto; padding: 0px 40px; }
#register-your-interest .mandatory { text-align: left; margin-bottom: 20px; font-weight: bold; font-style: italic; }
#register-your-interest .tab-content { text-align: left; background-color: var(--color-white); border: solid 1px #d1d1d1; padding: 30px; margin-bottom: 30px; display: none; }
#register-your-interest .tab-content > p { margin: 0px 20px; }
#register-your-interest .tab-content.active { display: block; }

#register-your-interest tr#trreqtype div.radio-holder { padding: 0px; }
#register-your-interest tr#trreqtype div.radio-holder > div { display: block; } 
#register-your-interest tr#trvendorcert, #register-your-interest span.reqchange { display: none; }

/* -------------------- vendor-form -------- */
.vendorform { margin-top: 25px; }
.vendorform .terms { text-align: left; margin-bottom: 20px; }
.vendorform .terms li { margin-bottom: 5px; }
.vendorform .section.sel { display: block !important; }
.vendorform form { border: solid 1px #d1d1d1; background-color: var(--color-white); padding: 3.125rem; border-radius: 5rem;  }
.vendorform td { text-align:left; }
.vendorform td.gender > span { margin-right: 10px; margin-left: 3%; }
.vendorform td.resume span { position: relative; top: -8px; }
.vendorform td.employed > span, .vendorform td.resume > span { margin-left: 6%; margin-right: 10px; }
.vendorform td.resume div.holder { padding: 0px 10px; top: 8px; }
.vendorform td.col2 select, .vendorform td select, #lpg-reserve-section td select { margin-bottom: 3%; }
.vendorform td[colspan="2"] select { margin-bottom: 1.5%; padding: 13px 1.5%; width: 100%; }

.vendorform a.btn-fill-red.file { margin-right: 10px; margin-bottom: 20px; }

.vendorform td h3 { font-size: var(--h4-font-size); margin-bottom: 1rem; color: var(--color-red); margin-top: 20px; text-align: left; }
.vendorform td h3 span { letter-spacing: 0px; font-size: 1rem; }
.vendorform td h3.grey { color: var(--color-text); }
.vendorform td h4 { letter-spacing: 0px; font-size: 1rem; }
.branch_add4, .branch_add5 { display: none; }
.vendorform a { text-decoration: none; }
.vendorform a.btn-fill-yellow { color: var(--color-text);  }
.vendorform .check-holder { position: relative; display: inline-block; *display: inline; zoom: 1; margin-left: 20px; }
.vendorform .check-holder div.item { display: inline-block; *display: inline; zoom: 1; margin-right: 20px; width: 190px; }
.vendorform .check-holder input[type="checkbox"] { opacity: 1 !important; position: relative; width: auto; width: initial; margin: 0px; top: 2px; left: 0px;}
.vendorform td.sector { padding-left: 10px; }
.vendorform td.label input[type="file"] { width: 98.5%; box-sizing: border-box; }
.vendorform td.label .radio-holder { padding-bottom: 5px; }
.vendorform .radio-holder { margin-left: 2%; margin-bottom: 12px; }
.vendorform td.col2 .radio-holder, #trreqtype .radio-holder { margin-left: 4%; }
.vendorform .radio-holder input[type="radio"] { width: auto; width: initial; padding: 0px; margin: 0px; }
.vendorform .fDoc-holder, .vendorform .fLicense-holder { display: none; }
.supply4, .supply5, .supplyhide { display: none; }
.vendorform input.sweccode { display: none; margin-bottom: 0px !important; }
.vendorform .sweccode, .vendorform .qdetails { display: none; }
.vendorform ol { list-style: lower-roman; margin-top: 5px; padding-left: 0px; margin-bottom: 0px; }
.vendorform ol li { margin-bottom: 5px; }
.vendorform ul { padding-left: 0px; margin-top: 0px; }
.vendorform hr { border: none; border-bottom: solid 1px #cecece; height: 1px; margin-right: 1%; }
.vendorform div.g-recaptcha { justify-content: flex-start; }
.vendorform .button input[type="submit"] { height: 50px; }

a#btnAddSupply, a#btnAddBranch, #tbVendorForm a.btn.file { margin-bottom: 1rem; }
#tbVendorForm h2 { font-size: var(--h3-font-size); border-bottom: none; }
#tbVendorForm input[type="file"] { margin-left: 0px; padding: 13px 10px; margin: 0px; width: 100%; box-sizing: border-box; border-radius: 30px; }
#tbVendorForm input[type="checkbox"] { }


/*
#customer-register-your-interest { display: none; }
#customer-register-your-interest .district-sel { text-align: left; margin-bottom: 30px; }
#customer-register-your-interest .district-sel #district-co { margin-left: 10px; }

#customer-register-your-interest a#showprocess { margin-left: 10px; }
#lpg-steps h2 { text-transform: initial; }
#lpg-steps .list:after { content: ""; clear: both; display: block; }
#lpg-steps .list .step { margin-bottom: 15px; }
#lpg-steps .list .step:last-child { margin-right: 0px; }
#lpg-steps .list .step .title { padding: 5px 45px; background-color: var(--color-red); color: var(--color-white); position: relative; border-radius: 25px; line-height: 1.2; }
#lpg-steps .list .step .title:after { content: ""; clear: both; display: block; }
#lpg-steps .list .step .title.gas { background-color: var(--color-text); }
#lpg-steps .list .step .title span.no { background-color: var(--color-white); color: var(--color-text); border-radius: 20px; height: 28px; width: 28px; text-align: center; line-height: 28px; font-style: italic; margin-right: 10px; left: 10px; top: 10px; position: absolute; font-weight: bold; }
#lpg-steps .list .step .content { margin: 0px 20px; padding: 20px; border: solid 3px #d1d1d1; border-top: none; border-radius: 0px 0px 25px 25px; text-align: center; position: relative; }
#lpg-steps .list .step .content p { text-align: left; }
#lpg-steps .list .step .content p.note { position: absolute; width: 90%; bottom: 15px; line-height: 1.2; text-align: center; left: 0px; padding: 0px 5%;}
#lpg-steps .list .step .sect { text-align: left; }
#lpg-steps .list .step .sect h3 { margin-bottom: 10px;  }
#lpg-steps .list .step .sect ol { margin-top: 0px; }
#lpg-steps .list .step .sect ol li { margin-bottom: 10px; margin-left: 20px; padding-left: 5px;}
#lpg-steps .list .step .sect ol li:last-child {  }

#lpg-steps .list .step a { margin-top: 10px; }

#lpg-steps .approved { margin: 20px 20px 0px; padding: 20px; border: solid 3px #d1d1d1; border-radius: 25px; }
#lpg-steps .approved .list { margin-top: 10px; }
#lpg-steps .approved .list:after { content: ""; clear: both; display: block; }
#lpg-steps .approved .step { float: left; width: 31%; margin-right: 3.5%; margin-bottom: 15px; }
#lpg-steps .approved .step:last-child { margin-right: 0px; }

#lpg-steps .approved .step span.no { background-color: var(--color-red); color: var(--color-white); border-radius: 20px; display: inline-block; height: 28px; width: 28px; text-align: center; line-height: 28px; font-style: italic; margin-right: 10px; }
*/

.ui-widget { font-family: 'Montserrat',sans-serif !important; font-size: 16px !important; }
.ui-widget-content { border: solid 1px #d1d1d1 !important; color: var(--color-text) !important; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background-color: var(--color-light-grey) !important; background-image: none !important; border-color: #cecece !important; }
.ui-widget-header { background-color: #1f1f1f !important; color: var(--color-white) !important; background-image: none !important; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { background-color: var(--color-text) !important; color: var(--color-white) !important; border-color: var(--color-text) !important; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border-color: var(--color-text) !important; }
.ui-datepicker th { width: 30px; }
.ui-icon-circle-triangle-w { background-image: url(themes/cal-left.png) !important; background-position: 0px 0px !important; background-size: contain !important;}
.ui-icon-circle-triangle-e { background-image: url(themes/cal-right.png) !important; background-position: 0px 0px !important; background-size: contain !important; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { margin-left: -3px !important; margin-top: -7px !important; }
a.ui-datepicker-prev, a.ui-datepicker-next { cursor: pointer; border-radius: 18px; top: 5px !important; left: 5px !important; height: 25px !important; width: 25px !important;}
a.ui-datepicker-next { right: 5px !important; left: initial !important; }
a.ui-datepicker-prev:hover, a.ui-datepicker-next:hover { background: rgba(255,255,255,0.2) !important; }

.tab-menu { margin-bottom: 5px; }
.tab-menu > div { border-bottom: solid 1px #d1d1d1; }
.tab-menu .cat { display: inline-block; *display: inline; zoom: 1; margin: 0px 10px; font-size: 18px; color: var(--color-text); font-weight: bold; text-decoration: none; line-height: 35px; cursor: pointer; }

.tab-menu .cat a { }
.tab-menu .cat-sel, .tab-menu .cat:hover { border-bottom: solid 3px var(--color-red); }




.inner.faq h3 { font-size: 16px; }
.inner.faq .wrapper { text-align: left; }
#faq .section.sel { display: inline-block !important; }
#faq #residential.section a.btn-fill-red,
#faq #customer.section a.btn-fill-red { display: block; margin-bottom: 10px; }

/* ------------------ highlights -------------------------- */
#highlights { color: var(--color-white); background-color: var(--color-text); }
#highlights .item { width: 50%; float: left; background-size: cover; background-repeat: no-repeat; position: relative; display: table; }
#highlights .item > div { background-image: url(themes/overlay-48.png); background-repeat: repeat; display: table-cell; vertical-align: bottom; padding: 200px 80px 80px 80px; }
#highlights .item .info { visibility: hidden; }
#highlights .item.idx4 { background-position: center; }
#highlights h2 { color: var(--color-white); margin-bottom: 0px; }
#highlights h2 span { display: block; font-weight: normal; font-size: 15px; margin-bottom: 25px; }
#highlights p { padding: 20px 0px 25px 0px; }


/* --------------------- floatingicon ------------- */
.floaticon { position: fixed; z-index: 1002; right: 70px; bottom: 15px; animation: shake 5s infinite; }
.floaticon img { display: block; width: 150px; }

@keyframes shake {
    0% { transform: translateX(0); }
    5% { transform: translateX(-5px) rotate(-5deg); }
    10% { transform: translateX(5px) rotate(5deg); }
    15% { transform: translateX(-5px) rotate(-5deg); }
    20% { transform: translateX(0); }
}

/* --------------------- careers ------------------- */
#careers { position: relative; }
#careers > div.wrapper { padding: 0px; min-height: 100vh; max-width: auto; max-width: initial; max-width: none; margin: auto; display: flex; flex-direction: column; position: relative; z-index: 0; }
#careers > div.wrapper table.dataTable { max-width: var(--max-content-width); padding: 3.125rem 0px 0px 0px; }
#careers > div.wrapper div.dataTables_wrapper { flex: 1; }
#careers > div.wrapper table.dataTable tbody tr { cursor: pointer; }
#careers > div.wrapper table.dataTable tbody tr:hover { background-color: var(--color-light-grey); }
table.dataTable thead th { color: var(--color-red); letter-spacing: 3px; }
table.dataTable>thead>tr>th, table.dataTable>thead>tr>td { border-bottom: solid 3px var(--color-red) !important; }
table.dataTable.no-footer { border-bottom: none !important; }
.dataTables_wrapper .dataTables_info { float: none !important; text-align: center; margin: auto; border-top: solid 3px var(--color-red) !important; max-width: var(--max-content-width); padding: 10px 0px; }

#careers #job-detail { display: none; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 1; background-color: var(--color-white); }
#careers #job-detail .wrapper > div { position: relative; max-width: var(--max-content-width); margin: auto; }
#careers #job-detail .wrapper > div a.close { position: absolute; right: 0px; top: 0px; }
#careers #job-detail label { font-weight: bold; }
#careers #job-detail .info > h4 { margin: 1rem 0px; }
#careers #job-detail .info > div { margin-bottom: 1rem; }
#careers #job-detail .info > div h4 { font-size: 1rem; letter-spacing: 0px; }

#careers > div.jobapplication { margin-top: 50px; }
#careers h2 { text-align: center; }
#careers .job { margin-bottom: 10px; margin-top: 25px; }
#careers .job > div { max-width: var(--min-width); width: 100%; margin: auto; }
#careers .job .header { background-color: var(--color-text); color: var(--color-white); font-size: 19px; font-weight: bold; padding: 10px 25px; background-image: url(themes/plus.png); background-repeat: no-repeat; background-position: right 25px center; cursor: pointer; text-align: left; text-transform: uppercase; }
.ie8 #careers .job .header { background-position: 98% 50% }
#careers .job .job-desc { border: solid 1px #d5d5d5; border-top: none; padding: 30px 25px; display: none; font-size: 15px; }
#careers .job .job-desc h3 { margin: 20px 0px; font-size: 17px; text-transform: uppercase; }
#careers .job .job-desc .closing h3 { margin-top: 20px !important; }
#careers .job .job-desc h3:first-child { margin-top: 0px; }
#careers .job .job-desc a.btn { color: var(--color-white); letter-spacing: 0px; font-size: 14px; }
#careers .job > div > div { background-color: var(--color-white); color: var(--color-text); }
#careers .job.expand .header { background-image: url(themes/minus.png); }
#careers .job .job-desc ul li { float: left; width: 40%; padding-right: 4%; margin-bottom: 5px; }
#careers .job div > div .closing { margin-bottom: 30px; }
#careers .job div > div .closing span { color: var(--color-white); }
#careers span.note { text-align: center; display: block; margin-top: 20px; }

.jobapplication { text-align: center; }
.jobapplication h1 { font-size: 40px !important; font-weight: 300 !important; font-family: var(--font-family); display: inline-block; *display: inline; zoom: 1; background-color: #dab962; padding: 30px 50px 10px 50px; margin-bottom: 50px; }

/* -------------------- job-application-form -------- */
.jobform { margin-top: 25px; }
.jobform form { border: solid 1px #d1d1d1; background-color: var(--color-white); padding: 30px; }
.jobform td.gender { text-align: left; }
.jobform td.gender > span { margin-right: 10px; margin-left: 3%; }
.jobform td.employed { text-align: left; }
.jobform td.resume { text-align: left; }
.jobform td.resume span { position: relative; top: -8px; }
.jobform td.employed > span, .jobform td.resume > span { margin-left: 6%; margin-right: 10px; }
.jobform td.resume div.holder { padding: 0px 10px; top: -8px; }
.jobform td.col2 select { margin-bottom: 3%; }

/* -------------------- events -------- */
#event-category { height: 43px; max-width: 1045px; width: 100%; margin: auto;}
#event-category>div { display: inline-block; *display: inline; zoom: 1; margin-left: 20px; }
#event-category div.cat  { color: #5c5c5c;  float: left; padding: 10px 30px; border: solid 1px #cbcbcb; border-bottom: 0px; border-radius: 3px 3px 0px 0px; margin: 0px 5px;}
#event-category div.cat:hover { background-color: var(--color-red); }
#event-category div.cat-sel { background-color: var(--color-red); float: left; }
#event-category a { color: #5c5c5c; font-size: 15px; font-weight: 400; text-decoration: none; display: block; text-transform: uppercase; }
#event-category a:active, #event-category a:focus, #event-category a:hover, #event-category div.cat-sel a, #event-category div.cat:hover a { text-decoration: none; color: var(--color-white); }



/* --------------------- news ------------------- */
/*
#news-list .list { padding: 20px 0px 80px 0px; position: relative; }
#news-list .list .item { background-color: var(--color-light-grey); padding: 50px 30px; border: solid 1px #d1d1d1; border-bottom: none; display: table; width: 100%; vertical-align: top; }
#news-list .list .item:last-child { border-bottom: solid 1px #d1d1d1; } 
#news-list .list .item.even { background-color: var(--color-white); }
#news-list .list .item .image { width: 28%; display: table-cell; vertical-align: top; }
#news-list .list .item .date, #h-latest-news-events .list .item .date { background-color: #d7d7d7; margin-right: 15px; vertical-align: top; 
    vertical-align: top;
    width: 50px;
	padding: 10px; 
    text-align: center;}
#news-list .list .item .date .day, #h-latest-news-events .list .item .date .day {display: block;
    font-size: 35px;
    color: #5a5a5a;
    line-height: 30px;  }
#news-list .list .item .date .month, #news-list .list .item .date .year, #h-latest-news-events .list .item .date .month, #h-latest-news-events .list .item .date .year {  display: block;
    color: #000;
    font-size: 13px;
    line-height: 1; }
#news-list .list .item .info { display: table-cell; padding-left: 30px; vertical-align: top; width: 75%; }
#news-list .list .item .title { font-size: 16px; font-weight: bold; line-height: 1.2; }
#news-list .list .item .desc { margin-top: 25px; }
#news-list .list .item .info a { margin-top: 25px; }
*/

/* --------------------- newsevent ------------------- */
body.newsevent #main-content .wrapper_s p.date, body.newsevent #main-content .wrapper_s p.venue { margin-bottom: 20px; text-align: center; }

#newsevent-list #newsevent-list-upcoming { }
#newsevent-list #newsevent-list-latest, #newsevent-list #newsevent-list-previous { display: none; }
#newsevent-list .note { padding: 20px 0px 80px 0px; text-align: center; }
#newsevent-list .section { display: none; }
#newsevent-list .section.sel { display: block !important; }
#newsevent-list .group { text-align: center; }
#newsevent-list .group img { width: 100%; }
#newsevent-list .cat { display: inline-block; *display: inline; zoom: 1; margin: 0px 10px; font-size: 18px; }
#newsevent-list .cat a { color: var(--color-text); font-weight: bold; text-decoration: none; padding-bottom: 5px; line-height: 35px;}
#newsevent-list .cat a:hover, #newsevent-list .cat-sel a { border-bottom: solid 3px var(--color-red); }
#newsevent-list #newsevent-category { margin-bottom: 5px; }
#newsevent-list #newsevent-category > div { border-bottom: solid 1px #d1d1d1; }
#newsevent-list .list { padding: 20px 0px 80px 0px; position: relative; }
#newsevent-list .list .item { background-color: var(--color-light-grey); padding: 50px 30px; border: solid 1px #d1d1d1; border-bottom: none; display: table; vertical-align: top; }
#newsevent-list .list .item:last-child { border-bottom: solid 1px #d1d1d1; } 
#newsevent-list .list .item.even { background-color: var(--color-white); }
#newsevent-list .list .item .image { width: 28%; display: table-cell; vertical-align: top; }
#newsevent-list .list .item .image img { display: block; }
#newsevent-list .list .item .date {  }
#newsevent-list .list .item .date > div.startdate, #newsevent-list .list .item .date > div.enddate, #h-latest-news-events .list .item .date, #media-list .list .item div.date { margin-right: 15px; vertical-align: top; text-align: center; background-color: #d7d7d7; width: 50px; padding: 10px; }
#newsevent-list .list .item .date .day, #h-latest-news-events .list .item .date .day, #media-list .list .item div.date .day {display: block; background-color: #d7d7d7; 
    font-size: 35px;
    color: #5a5a5a;
    line-height: 30px;  }
#newsevent-list .list .item .date .month, #newsevent-list .list .item .date .year, #h-latest-news-events .list .item .date .month, #h-latest-news-events .list .item .date .year, #media-list .list .item div.date .month, #media-list .list .item div.date .year {  display: block; 
    color: #000;
    font-size: 13px;
    line-height: 1; }
#newsevent-list .list .item .info { display: table-cell; padding-left: 30px; vertical-align: top; width: 75%; }
#newsevent-list .list .item .title { font-size: 16px; font-weight: bold; line-height: 1.2; }
#newsevent-list .list .item .title span { display: block; font-size: smaller; font-weight: normal; }
#newsevent-list .list .item .desc { margin-top: 25px; }
#newsevent-list .list .item .info a { margin-top: 25px; }
#newsevent-list .list .item .date .to { background-image: url(themes/icon-event-to.png); background-repeat: no-repeat; background-size: auto; width: 50px; height: 50px; background-position: center; margin: 0px; padding: 0px 10px; }

/* --------------------- pressrelease ------------------- */
body.pressrelease #main-content .wrapper_s p.date { margin-bottom: 20px; text-align: center; }

/* -------------------- gallery ------------------------- */
#gallery { max-width: 100%; margin: auto; }
#gallery .title { margin: 25px 0px; }
.album-cover { float: left; margin: 0px 3.5% 40px 0px; text-align: center; width: 31%; overflow: hidden; }
.album-cover div.img { width: 100%; height: 220px; overflow: hidden; position: relative; }
.album-cover a { display: block; overflow: hidden; height: 100%; }
.album-cover img { padding: 0px !important; border: none; position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; width: 100%; margin: auto; zoom: 1; }
.album-cover p { margin-top: 10px !important; font-weight: 400; line-height: 1.2; min-height: 40px; }
.album-cover.first { clear: both; }
.album-cover.album-photos-last { margin-right: 0px; }
div.pp_default .pp_content { width: 100% !important; }
.pp_gallery li { margin: 0px 10px 0px 0px !important; padding: 0px !important; }

#gallery .list { }
#gallery .list .item { float: left; margin: 0px 3.5% 40px 0px; text-align: center; width: 31%; overflow: hidden; }
#gallery .list .item.last { margin-right: 0px; }

/* -------------------- left-right-layout ------------------- */
.lr-layout-item { position: relative; }
.lr-layout-item .arrow { position: absolute; background-image: url(themes/arrow-orange.png); background-repeat: no-repeat; background-position: top center; width: 65px; height: 23px; top: 0px; left: 50%; margin-left: -32px; }
.lr-layout-item .image { float: left; width: 50%; background-size: cover; background-position: center; height: 480px; }
.lr-layout-item .image img { display: none; }
.lr-layout-item .info { float: right; width: 50%; display: table; height: 480px; }
.lr-layout-item .info > div { display: table-cell; vertical-align: middle; text-align: left; padding: 20px 80px; }
.lr-layout-item .info > div div { width: 450px; max-width: 100%; }
.lr-layout-item .info .detail { margin-top: 20px; text-align: left; position: relative; font-weight: normal; color: #3d3d3d; }
.lr-layout-item .info { margin-left: 0px; }
.lr-layout-item .info a.readmore, a.readmore { color: var(--color-white) !important; font-size: 14px; font-weight: 400; padding: 8px 20px; border-radius: 2px; background-color: var(--color-red); text-shadow: none; display: inline-block; *display: inline; zoom: 1; margin-top: 30px; text-shadow: 1px 1px #333; letter-spacing: 1px; text-decoration: none; }
.lr-layout-item .info h2 { color: #262626; font-size: 40px; text-transform: uppercase; padding-bottom: 15px; background-image: url(themes/line-orange.png); background-position: bottom left; margin-bottom: 15px; background-repeat: no-repeat; line-height: 40px; }

.lr-layout-item-right .image { float: right; }
.lr-layout-item-right .info { float: left;  }
.lr-layout-item-right .info > div div { width: 450px; max-width: 100%; float: right; }




/* ------------ SBR ------------------- */
body.sarawak-bid-round-sbr-2024 .nivo-caption { background: none; }

/* #why-bid { padding-bottom: 80px; } */
#why-bid > div { max-width: var(--max-width); padding: 0px 40px; margin: auto; }
#why-bid .item { background-repeat: no-repeat; background-size: contain; background-color: var(--color-light-grey); }
#why-bid .item > div { display: flex; align-items: center; }
#why-bid > div .img { width: 40%; background-size: cover; background-position: center; }
#why-bid > div .text { width: 60%; 	background-color: var(--color-light-grey); padding: 3.5%; box-sizing: border-box;  }

#ccus-sites { padding: 80px 0px; background-color: var(--color-light-grey); text-align: center; }
#ccus-sites > div { max-width: var(--max-width); padding: 0px 40px; margin: auto; }
#ccus-sites h2, #opportunities h2, #path-guidelines h2 { font-size: 22px; }
#ccus-sites img { margin: 30px 40px 0px 40px; }
#opportunities { padding: 80px 0px; text-align: center; }
#opportunities > div { max-width: var(--max-width); padding: 0px 40px; margin: auto; }

table.ccus { width: var(--max-content-width); max-width: 100%; -webkit-max-width: 100%; margin: auto; text-align: left; }
table.ccus tr { background-color: var(--color-light-grey); display: flex; margin-bottom: 20px; }
table.ccus tr td:first-child { font-weight: bold; font-size: 18px; width: 220px; flex-shrink: 0; }
table.ccus tr:nth-child(1) td:first-child { background-color: var(--color-red); color: var(--color-white); }
table.ccus tr:nth-child(2) td:first-child { background-color: #ffcc00; color: var(--color-text); }
table.ccus tr:nth-child(3) td:first-child { background-color: #1f1f1f; color: var(--color-white); }
table.ccus tr:last-child { margin-bottom: 0px; }
table.ccus td { padding: 20px 30px; display: flex; align-items: center; }

#path-guidelines h2 { color: var(--color-white); }
#path-guidelines table td { width: 50%; box-sizing: border-box; color: var(--color-white); padding: 80px; vertical-align: top; }
#path-guidelines table td:first-child { background-color: var(--color-red); }
#path-guidelines table td:last-child { background-color: #1f1f1f; }
#path-guidelines ul { list-style-image: none; }

#access-to-sr { background-image: url(themes/access-to-sarawak-resource-insights-bg.png); background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; padding: 3.125rem 40px;  }
#access-to-sr a { display: inline-block; *display: inline; zoom: 1; margin-top: 1rem; }
#access-to-sr a:hover { color: var(--color-red); }
#access-to-sr h2 { margin: 0px; }

#sbr-timeline { padding: 80px 0px; text-align: center; }
#sbr-timeline > div { max-width: var(--max-width); padding: 0px 40px; margin: auto; }
#sbr-timeline img { margin: auto; }

/* ------------ IOGP-life-saving-rules ------------------- */
#IOGP-life-saving-rules { margin-bottom: 80px; }
#IOGP-life-saving-rules > div { max-width: var(--max-content-width); padding: 0px 40px; margin: auto; }
#IOGP-life-saving-rules .row { }
#IOGP-life-saving-rules .row .header { text-align: center; }
#IOGP-life-saving-rules .row .col { float: left; width: 30%; margin-left: 5%; margin-bottom: 35px; }
#IOGP-life-saving-rules .row .col:first-child { margin-left: 0px; }
#IOGP-life-saving-rules .row:last-child .col { margin-bottom: 0px; }

/* ------------------ flip-card -------------------------- */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
}

/* Style the back side */
.flip-card-back {
  transform: rotateY(180deg);
}
.flip-card-back img { }

/* ------------------ main-content -------------------------- */
body.inner #main-content h1 span { font-size: 16px; font-weight: bold; color: #447532; display: block; margin-top: 10px; }
body.inner #main-content h1.flag { background-image: url(themes/icon-round-flag.png); background-repeat: no-repeat; background-position: bottom center; padding-bottom: 60px; margin-bottom: 30px; }
body.contact #wapper, body.newsevents #wapper, body.faq #wapper, body.news #wapper, body.winners-list-for-tournament #wapper { background-color: var(--color-white);}
body.inner.privacy-policy #main-content,
body.inner.terms-conditions #main-content { text-align: justify; }
body.inner .content .wrapper, body.inner .content .wrapper_s { pointer-events: auto; }


#sitemap { max-width: var(--max-content-width); padding: 0px 40px 50px 40px; margin: auto; text-align: center;  }
#sitemap h3 { font-size: 24px; color: var(--color-text); margin-bottom: 20px; text-align: left; }
#sitemap h3 span { color: var(--color-red); }
#sitemap ul { margin-top: 10px; }
#sitemap ul li { margin-bottom: 10px; }
#sitemap a { color: var(--color-text); }
#sitemap a:hover { color: var(--color-red); }
#sitemap h3 a:hover { color: var(--color-text); }

/* -------------------- contact us --------------------- */
#contact-info { padding-bottom: 80px; }
#contact-info h3 span { font-weight: 400; color: var(--color-text); margin-left: 5px; } 
#contact-info .right { width: 50%; }
#contact-info .contact-info > h3 { margin-bottom: 30px; }
#contact-info #contacts h3, #contact-info #operatinghours h3 { margin-bottom: 10px; }
#contact-info #contacts > p { position: relative; }
#contact-info .coadd, .f-sect2 .contact .coadd { display: none; background-image: url(themes/add-bg.png); background-size: cover; position: absolute; width: 220px; height: 55px; background-repeat: no-repeat; padding: 20px 20px 20px 20px; font-size: 14px; right: 0px; top: 22px; z-index: 2; color: var(--color-text); }

/* -------------------- contact-form ------------------- */
#contact-form { padding: 80px 0px; background-color: var(--color-light-grey); }
#contact-form h2 { text-align: center; }

/*
.contact-form .col1 { background-color: #242424; width: 50%; position: absolute; color: var(--color-white); font-size: 16px; font-weight: normal; padding: 80px 0px 100px; }
.contact-form .col1 h3 { color: var(--color-white); background-image: url(themes/title-line.png); background-repeat: no-repeat; background-position: left bottom; padding-bottom: 10px; margin-bottom: 20px; margin-top: 20px; background-size: 50px 3px;}
.contact-form .col1 a { color: var(--color-white); }
.contact-form .col1 span { margin-right: 5px; }
.contact-form .col1 > div { max-width: 590px; width: 100%; float: right; display: table; height: 100%; }
.contact-form .col1 > div > div { display: table-cell; vertical-align: middle; }
.contact-form .col2 { background-color: var(--color-light-grey); margin-left: 50%; color: #000; font-size: 15px; padding: 100px 0px; }
.contact-form .col2 > div { max-width: 540px; margin-left: 50px; width: 100%; }
.contact-form .col2 h1 { font-size: 50px; text-align: left; background-image: url(themes/title-line.png); background-repeat: no-repeat; background-position: left bottom; padding-bottom: 10px; margin-bottom: 20px; background-size: 100px 5px; }
*/


.tbContactform  { width: 100%; margin: auto; overflow: hidden; border-bottom: none; border: none; text-align: center; }
/*
.tbContactform td > div { margin-bottom: 10px; text-align: left; clear: both; }
.tbContactform td > div.col { width: 49.5%; float: right; position: relative; text-align: right; clear: initial; }
.tbContactform td > div.col.first { float: left; text-align: left; }
.tbContactform td > div.col.tleft { text-align: left; }
.ie8 .tbContactform label, .ie8 .tbContactform select { background: none; }
.ie8 .tbContactform .note { font-size: 14px; }
*/

.tbContactform .radio-holder { padding: 12px 0px; display: inline-block; *display: inline; zoom: 1;  }
.tbContactform .holder { padding: 9px; display: inline-block; *display: inline; zoom: 1; position: absolute; vertical-align: top; }

.tbContactform td:last-child { text-align: right; padding-left: 0.5rem; }
.tbContactform td:last-child h4 { text-align: left; margin-left: 1.5%; }
.tbContactform td[colspan="2"] { text-align: left; padding-left: 0px; padding-right: 0px !important; }
.tbContactform td[colspan="2"] h4 { margin-left: 0px; }
.tbContactform td:first-child { text-align: left; padding-right: 0.5rem; }
.tbContactform td > div.col input.text { padding: 14px 4%; width: 90%; }
select { 
	background-color: var(--color-white);
    padding: 14px 15px;
    font-size: 1rem; /* 1.5625rem */
    position: relative;
    z-index: 1;
	font-family: var(--font-family); 
	line-height: 1;
	font-weight: 400;
	line-height: 1;
	border: solid 1px #cecece;
	border-radius: 30px;
}
.tbContactform select { 
	width: 100%;
    padding: 13px 18px;
	margin: 0px 0% 12px 0%;
	box-sizing: border-box;
}
.get-in-touch .tbContactform select { padding: 13px 1.5%; width: 98.5%; }
.tbContactform td > div.col select { padding: 13px 4%; width: 98%; }
.tbContactform select option { 
	line-height:20px;
}
.tbContactform span.chk { display: inline-block; *display: inline; zoom: 1; position: relative; height: 10px; width: 10px; margin-left: 8px; margin-right: 12px; z-index: 0; border: solid 1px var(--color-text); }
.tbContactform span.chk.error { border: solid 2px var(--color-red); }
.tbContactform input[type="checkbox"] { width: auto !important; width: initial !important; margin-right: 10px !important; position: relative; top: 2px; margin-bottom: 0px !important; }
/* input[type=checkbox]:checked + span:before {
  content: '\2714';
  position: absolute;
  top: -5px;
  left: 0;
}*/
span.reset::before { display: none; }

td > div.radio-holder { padding: 10px 0px; }
div.radio-holder input[type="radio"] { position: relative; top: 1px; border: none; background-color: transparent; width: auto !important; width: initial !important; padding: 0px !important; margin: auto !important; }
div.radio-holder span { margin-right: 45px; margin-left: 15px; text-transform: capitalize; }
div.radio-holder > div { display: inline-block; *display: inline; zoom: 1; }
.tbContactform .note { font-size: smaller; font-style: italic; line-height: 1.2; }

div.checkbox-holder { text-align: left; padding-left: 15px; }
div.checkbox-holder .text.error { color: var(--color-red); }
div.checkbox-holder .text { margin-left: 15px; }

.tbContactform td { position: relative; padding: 0px; width: 50%; vertical-align: top; border: none; }
.tbContactform td[colspan="2"] input { width: 100%; padding: 14px 20px; margin: 0px 0% 12px 0%; box-sizing: border-box; }
.tbContactform td.col2 select { margin-bottom: 12px; }
.tbContactform input[type="button"] { border: none; min-width: 135px; cursor: pointer; margin-right: 1.5%; margin-top: 20px; }
.tbContactform input[type="submit"]:disabled, input[type="submit"]:disabled, .tbContactform input[type="button"]:disabled, a.btn-fill-red.disabled { background-color: #d1d1d1; cursor: auto; }
a.btn-fill-red.disabled:hover { color: var(--color-white) !important; }
a.btn-fill-red.disabled { pointer-events: none; }
.tbContactform input[type="file"] { border: solid 1px #cecece; margin: 0px 0px 2px 0px !important; width: 99%; }
.antispam  { display: none; visibility:hidden; }

/*  ########################################################
	
	loader
	- upon form submission, display loading rotate icon
	
	######################################################## */
	
	
	.button > div { display: flex; justify-content: right; }
	.button > div .spinner { padding-right: 10px; position: relative; bottom: 4px; }
	.button > div .loader { display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; background: transparent; margin: 30px auto 0 auto; border: solid 3px #d1d1d1; border-top: solid 3px var(--color-red); border-radius: 50%; opacity: 0; }
	.button > div .loader.active { animation: spin 2s linear infinite; opacity: 1; }

	@keyframes spin { 
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	


.tbContactform input.error, .tbContactform label.error, .tbContactform textarea.error, .tbContactform select.error {
    border: solid 1px var(--color-red);
    color: var(--color-red);
}
.tbContactform .error > span, .tbContactform .error > ol { color: var(--color-red); } 
.error::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: var(--color-red);
  opacity: 1; /* Firefox */
}
.error:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: var(--color-red); }
.error::-ms-input-placeholder { /* Microsoft Edge */ color: var(--color-red); }

.tbContactform div.col.error { 
    border: solid 1px var(--color-red);
    color: var(--color-red);
	border-radius: 2px; 
}
.contact-form .tbSuccess { margin: 0px 0% 10px !important; }

#tbJobForm .g-recaptcha { margin-top: 0px; }
#tbJobForm input[type="button"] { margin-top: 0px; }

/* back-to-top */
/*
#back-to-top { position: fixed; bottom: 60px; right: 60px; width: 56px; height: 56px; z-index: 100; display: none; }
#back-to-top a { display: block; width: 56px; height: 56px; }
#back-to-top a img { width: 56px; height: 56px; }
*/

.slick-slider .slick-track, .slick-slider .slick-list { height: 100%; }
.slick-initialized .slick-slide { background-size: cover; position: relative; }
.slick-dots { position: absolute; bottom: 5px; display: block; width: 100%; padding: 0; list-style: none; text-align: center; left: 0px; }
.slick-dots li {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0;
	margin: 0px 10px !important;
    padding: 0;
    cursor: pointer;
}
.slick-dots li button {
    font-size: 0;
    line-height: 0;
	width: 10px; 
	height: 10px; 
    display: block;
    padding: 0px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
	background-color: var(--color-red); 
	border-radius: 30px; 
	position: relative; 
	overflow: hidden;
}
.slick-dots li:hover button { background-color: var(--color-black); }
.slick-dots li.slick-active button::after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;           /* start with 0 width */
    height: 100%;
	border-radius: 30px; 
    background-color: var(--color-black);
    animation: slideColor 3s forwards;
}
/* Keyframes for sliding + color change */
@keyframes slideColor {
    0% { width: 0; }
    100% { width: 100%; }
}


/* -------------------- pop-up-gallery ----------------- */
div.pp_default .pp_top .pp_left, div.pp_default .pp_top .pp_middle, div.pp_default .pp_top .pp_right, 
div.pp_default .pp_content_container .pp_left, div.pp_default .pp_content_container .pp_right,
div.pp_default .pp_bottom .pp_left, div.pp_default .pp_bottom .pp_middle, div.pp_default .pp_bottom .pp_right  { background-image: none !important; background-color: var(--color-white) !important; }
div.pp_default .pp_content { max-width: 100%; }
#pp_full_res img { width: 100% !important; }
.pp_hoverContainer { width: 100% !important; }
.pp_fade { position: relative; }
div.ppt { display: none !important; }
div.pp_default .pp_expand { display: none !important; }
div.pp_default .pp_close { width: 60px !important; height: 60px !important; position: absolute; right: -60px; background-image: url(themes/popup-close.jpg) !important; background-size: cover !important; background-position: 0px 0px !important; }


/* -------------------- main-content ----------------- */
/* #main-content .desc { max-width: var(--max-content-width); margin: auto; } */
#main-content .desc { text-align: center; }
.textonly #main-content .desc { text-align: left; }
#main-content .desc h1 { text-align: center; }
#main-content img { max-width: 100%; }
#main-content p { margin: 0px; }
#main-content td { vertical-align: top; }

/* -------------------- location-map ---------------- */
#map-wrapper { height:480px; }
#location-map { width: 100%; height:100%; } 

header, section, aside, nav, article, figure {
	display: block;
	height: 0px;
}

.tbErrors{ color: var(--color-red); text-align: center; margin-bottom: 10px; }
.tbSuccess { color: #31B404; text-align: center; margin: 0px; margin-bottom: 10px !important; }


@media only screen and (max-width: 1800px) {
	.pv .wrapper > div .info .text { font-size: 1.25rem; padding: 5rem; margin-top: 2px; }
}

@media only screen and (max-width: 1620px) {
	:root { --max-width: auto; --max-width: initial; --max-width: none; }
	#banner-contant .slick-slide .htmlcaption { padding: 40px; }
	
	
	/* #our-story .years { width: 650px; } 
	#our-story .years h1 { font-size: var(--h2-font-size); top: 30%; }
	#our-story .year.visible.next { right: 30.5%; } */
	
	#menu ul { gap: 4rem; }
	
	#s-env .wrapper h3, #s-env .wrapper table tr td:first-child > p { margin-left: 0px; }
	#s-env .wrapper table tr td:first-child > p { width: 100%; }
	/* #s-env .wrapper table td:last-child { padding-left: 3.125rem; } 
	#s-social .wrapper table td:last-child { padding-left: 0px; } 
	#s-governance .wrapper table td:first-child { left: 0px; }
	#s-team table tr:first-child td:first-child { padding-right: 0px; } */
	
	/*
	.pv .wrapper { align-items: center; padding: 4rem 4rem 0px 4rem; }	
	.pv .wrapper > div { gap: 4rem; }
	.pv .wrapper > div .info .text { padding: 4rem; }
	.pv .wrapper > div .info .text h2 { font-size: var(--h2-font-size); }
	*/
	
	#one-stop-centre .wrapper > div div.text > div:first-child { font-size: 550px; }
	#one-stop-centre .wrapper > div div.text > div { font-size: 100px; }
	
	/* #upstream .wrapper table td:last-child { padding-left: 3.125rem; } */
	/* #downstream-energy .wrapper table tr td:last-child p:first-child { width: 100%; padding-left: 3.125rem; box-sizing: border-box; }
	#downstream-energy .wrapper table tr td:first-child { padding-right: 3.125rem; } 
	#ccus .wrapper table tr td:last-child { padding-left: 3.125rem; } */
	
	
	.leader .wrapper .row { gap: 2.5rem; }
	.leader .wrapper .row .profile { gap: 2.5rem; }
	.leader .wrapper .row .text { font-size: 1.25rem; }
	/* .leader .wrapper .title { padding: 2.5rem; } */
	.leader .wrapper .row .item .info { padding: 20px; }
	
	#reports .wrapper { width: 100%; }
	#reports .wrapper > div .text { width: 65%; }
	#reports .wrapper > div .reports { width: 35%; padding-left: 40px;  }
}

@media only screen and (max-width: 1480px) {
	:root { --h1-font-size: 3.125rem; --h2-font-size: 2.5rem; --h3-font-size: 2rem; --h4-font-size: 1.25rem; }
	
	a.btn, .btn { min-width: 280px; }
	a.btn, .btn, a.link, .link { font-size: 0.9rem; }
	.slick-prev, .slick-next { width: 20px; }
	
	
	/* #menu-top { flex-direction: column-reverse; gap: 10px; margin-top: 10px; } */
	#menu { justify-content: flex-end; }
	#menu ul { gap: 3.5rem; }
	#menu ul li { line-height: 2rem; }
	#menu > ul > li > a { padding-bottom: 10px; }
	#menu div.thumb { top: 42px; }
	/*
	#menu .container, .social-media { margin-right: 0px; }
	*/
	#search-panel #icon-search img { margin-top: 0.3rem; }
	#search_form { justify-content: flex-end; }
	#search_box { /* max-width: 300px; width: 100%; padding: 5px 20px; margin-bottom: 0px; */ font-size: 0.9rem; }
	#search_form button { top: 4px; }
	#search_form button img { height: 1.2rem; width: 1.2rem; }
	
	#retail-product { margin: 10rem 2.5rem 5rem 2.5rem; }
	#retail-product .item { padding: 10rem 3.125rem; }
	#retail-product .item:nth-child(odd) { margin-top: -5rem; }
	#retail-product .item h2 { font-size: 5vw; }
	
	/*
	.tbContactform input.text, input.text, .tbContactform textarea, #careers .dataTables_wrapper .dataTables_filter input, select { font-size: 1.25rem; }
	*/
	
	/* 
	#our-story .years { width: 500px; }
	#our-story .years h1 { top: 35%; left: 40px; }
	#our-story .year { padding: 15px 3.125rem 15px 3.125rem; }
	#our-story .year.current { font-size: 15vh; } 
	#our-story .year.visible.next { right: 40.5%; } 
	#our-story .events .event.current { font-size: 1rem; }
	#our-story .events .event.visible { font-size: 0.875rem; }
	#our-story .nav > a { width: 25px; height: 15px; }
	*/
	
	
	.leader .wrapper .row { gap: 1.875rem; }
	.leader .wrapper .row .profile { gap: 1.875rem; }
	.leader .wrapper .row .item .info, .leader .wrapper .row .item .info h4 { font-size: 0.875rem; }
	.leader .wrapper .row .item .info { padding: 15px; }
	
	#one-stop-centre .wrapper > div div.text > div:first-child { font-size: 500px; }
	#upstream-frontier .wrapper table tr:first-child td:last-child { padding-left: 30px; }
	#downstream-delivery .wrapper table tr:first-child td:first-child { padding-right: 30px; }
	
	#our-roles .wrapper { min-height: 700px; }
	#one-stop-centre .wrapper { min-height: auto; min-height: initial; min-height: none; }
	
	body.publications #elements .scroll { width: 25px; height: 35px; }
	#element-list .item .date { font-size: var(--h4-font-size); }
}
@media only screen and (max-width: 1420px) {
	
	#highlights .item { min-height: auto; min-height: initial; }
	#highlights .item > div { padding: 200px 60px 60px 60px; }
	
	
	#our-business-principles > div { padding: 0px 70px;}
	
}
@media only screen and (max-width: 1350px) {
	/* #footer-2cols > div .text, .section-tpl > div .text { font-size: 15px; } */
	#h-footerbanner h1 { font-size: 25px; }
	
	/*
	#timeline .slick-current .date .mth { font-size: 28px; }
	#timeline .slick-current .date .year { font-size: 17px; }
	#timeline .date .mth { font-size: 19px; }
	#milestone .text > h3 { font-size: 18px; }
	*/
	
	h3.line { font-size: 20px; margin-bottom: 20px; }
	h3.line span { padding-bottom: 20px; }
	#what-we-do-list a { margin-top: 15px; }
	
	#ccus-sites img { height: 230px !important; width: auto !important; width: initial !important; }
	#path-guidelines table td { padding: 80px 40px; }
}
@media only screen and (max-width: 1280px) {
	:root { --h1-font-size: 3.125rem; --h2-font-size: 2rem; }
	body { font-size: 1rem; min-width: auto; min-width: initial; min-width: none; }
	a.btn, .btn, a.link, .link { font-size: 0.875rem; }
	
	.wrapper { padding: 5rem 30px; }
	.textonly .wrapper { padding-top: calc(95px + 2rem); }
	#lets-connect .wrapper { padding: 5rem 30px; width: 100%; }
	
	#header-holder .wrapper { padding: 0px 30px; }
	#header-holder #pg-title { margin: 0px 1rem; }
	
	#menu-top { margin-left: 1rem; gap: 1.5rem; }
	#menu a, #menu a:visited { padding: 0px; }
	#menu ul { gap: 2rem; }
	
	#logo { margin: 10px 0px; }
	
	body.home .mfp-close { width: 2.5rem; height: 2.5rem; right: 20px; top: 10px; }
	/*
	#menu-icon #btn-close { height: 25px; }
	#menu > div { padding: calc(59px) 30px 30px 30px; overflow-y: scroll; }
	#menu .panel.show-submenu .mlvl-1 { transform: translatex(-220px); }
	.mlvl-2 { font-size: 1rem; }
	.mlvl-2, .mlvl-3 { width: 250px; }
	.mlvl-2.active { left: calc(100% - 250px); }
	*/
	
	#banner-zone { margin-top: 80px; }
	#banner-contant { margin: 0px 60px; }
	#banner-contant .slick-slide { border-radius: 4rem; }
	#banner-contant .slick-slide .htmlcaption { padding: 30px; }
	#banner-contant .slick-slide .htmlcaption .desc { margin: 5px 0px 10px 0px; }
	
	#retail-product { padding: 0px 30px; margin: 10rem 0px 5rem 0px; gap: 30px; }
	
	#showcase .text { padding: 30px; } 
	
	#about-petros .wrapper { padding: calc(5rem + 59px) 25px 5rem 30px; }
	
	#sgr p.img { max-width: 100%; left: 30px; width: auto; width: initial; }
	
	#our-story .years { width: 200px; }
	#our-story .year.visible { right: calc(3.125rem + 2.5rem); }
	#our-story .year.current { right: 3.125rem !important; }
	#our-story .year.current::after { right: calc(-3.125rem / 2 + 1px) ; width: 10px; height: 10px; }
	#our-story .years::after { right: calc(3.125rem / 2 - 13px); }
	#our-story .years .nav { right: -5px; }
	#our-story .years .nav > a.nextnav { }
	#our-story .events .event.visible { padding: 2.5rem 30px; }
	
	/*
	#our-story .years { width: 450px; }
	#our-story .years h1 { top: 38%; }
	#our-story .year.current { font-size: 12vh; right: 5%; }
	#our-story .year.current::after { width: 18px; height: 18px; }
	#our-story .year.visible.next { right: 44.5%; }
	*/
	
	/*
	.pv .wrapper { padding: 5rem 30px 0px 30px; }
	.pv .wrapper > div { gap: 30px; }
	.pv .wrapper > div .info h4 { font-size: 1.25rem; }
	.pv .wrapper > div .info .text { padding: 3.2125rem; font-size: 1rem; }
	*/
	
	.leader .wrapper .row { gap: 1.25rem; }
	.leader .wrapper .row .text { font-size: 1rem; }
	.leader .wrapper .row .item .info { padding: 15px; }
	.leader .wrapper .row .profile { gap: 1.25rem; width: 70%; }
	
	.profile-pop { padding: 3.125rem 30px; }
	.profile-pop > div > div:first-child { }
	
	body.publications #video > div { padding: 20px 30px 0px 30px; margin-top: 60px; }
	body.publication #main-content .content { padding: 3.125rem 30px; }
	#media-head > div { padding: calc(3.125rem + 60px) 30px 3.125rem 30px; }
	
	#element-list .r-panel { padding: 3.125rem; }
	#element-list .r-panel::before { top: 3.125rem; }
	#element-list .r-panel > div.back { left: 1.25rem; top: 3.125rem; }
	
	#esg-banner .wrapper > div div.text { padding: 30px; }
	#reports .wrapper > div .reports { padding-left: 30px; }
	
	#one-stop-centre .wrapper, #esg-banner .wrapper { padding-top: 59px; }
	#one-stop-centre .wrapper > div div.text > div:first-child { font-size: 450px; }
	#one-stop-centre .wrapper > div div.text > div { font-size: 80px; }
	#one-stop-centre .wrapper > div div.text > div:nth-child(2) > div:last-child { padding-left: 30px; padding-right: 30px; padding-bottom: 10%; }
	/* #one-stop-centre .wrapper > div div.text > div:nth-child(2) > div { height: 30vh; } */
	
	#our-roles .info-panel > div > div > div { padding: 30px 0px 30px 30px; }
	#our-roles .slick-dots { left: 30px; width: calc(100% - 30px); }
	
	#upstream .wrapper { height: auto; height: initial; padding-bottom: 5rem; }
	#upstream .wrapper table tr:first-child { flex-direction: column; gap: 30px; overflow: auto; flex: none; }
	#upstream .wrapper table td div.img { padding-top: 30px; }
	#upstream .wrapper table tbody { flex-direction: column-reverse; }
	#upstream .wrapper table tr:last-child { align-items: flex-start; }
	#upstream .wrapper table tr:last-child td { padding-top: 0px; padding-bottom: 25px; width: auto; width: initial; }
	#upstream .wrapper table td:last-child { max-width: auto; max-width: initial; max-width: none; padding-left: 0px; width: auto; width: initial; }	
	#upstream .wrapper table td:last-child img { width: 100%; }
	
	#downstream-delivery .wrapper, #downstream-delivery.current .wrapper { padding: 5rem 30px; }
	
	#downstream-energy .wrapper { height: auto; height: initial; }
	#downstream-energy .wrapper table tr td { flex: 1; }

	#register-your-interest > div { padding: 0px 30px; }
	.vendorform form { padding: 3.125rem 30px; border-radius: 4rem; }
	
	#careers .dataTables_wrapper .dataTables_filter { padding: 6.25rem 30px 3.125rem 30px; }
	#careers > div.wrapper table.dataTable { margin: 0px 30px; width: calc(100% - 60px); }
	.dataTables_wrapper .dataTables_info { margin: 0px 30px; }
	

	.tbContactform input.text, input.text, .tbContactform textarea, #careers .dataTables_wrapper .dataTables_filter input, select { font-size: 1rem; }
	#copyright .wrapper { font-size: 1rem; padding: 1rem 30px 10px 30px; } 
	
	#cookieconsent > .text { padding: 15px 30px; }
	
	
	/* OLD CODE */	
	/*
	a.btn-fill-red, .btn-fill-red, a.btn-border-red, a.btn-fill-yellow { font-size: 12px; }
	*/
	
	#home-content .wrapper.text, .home .nivo-caption > p { font-size: 18px; }
	.nivo-caption p h2 { font-size: 41px; }
	.nivo-directionNav a { width: 20px !important; height: 30px !important; }
	
	#highlights .item > div { padding: 30px; }
	#highlights h2 span { margin-bottom: 15px; font-size: 14px;  }
	#highlights p { padding: 15px 0px;}]

	#faq { padding: 60px 0px; }
	
	.vendorform td h3, .tenderform td h3 { font-size: 15px; }
	
	
	.section-tpl > div .text { width: 50%; }
	
	#h-footerbanner { padding: 60px 0px; }
	#h-footerbanner h1 { font-size: 25px; }
	
	/*
	#footer-2cols > div .text { padding: 100px 5%; width: 45%;}
	#footer-2cols a.btn-fill-yellow, #footer-2cols a.btn-border-yellow { bottom: 70px; }
	*/
	
	
	#footer .f-sect1 .menu a { font-size: 13px; }
	#footer .f-sect2 { padding: 60px 0px; }
	#footer .f-sect2 h3 { margin-bottom: 25px; }
	#footer .f-sect2 .contact h3, #footer .f-sect2 .follow h3 { margin-bottom: 15px; }
	#footer .f-sect2 .contact p { margin-top: 10px; font-size: 13px; }
	
	table.ccus tr td:first-child { font-size: 16px; }
	
}
/*
@media only screen and (max-width: 1180px) {
	#home-content .wrapper.text > div { display: none; }
	#home-content .wrapper.text .nbr { display: block; }
	
	.wrapper_s { padding: 0px 60px; }
	
	#h-latest-news-events .item.idx3 .btn a { display: block; margin-top: 10px; margin-left: 0px; }
	
	#downstream-residential #downstream-category, #downstream-commercial #downstream-category { padding: 0px 55px; }
	#downstream-residential .section .group > .wrapper_s, #downstream-commercial .section .group > .wrapper_s { padding: 0px 55px; }
	
	#what-we-do-list { margin-bottom: 60px; }
	#buyers-vendors { margin-bottom: 60px; }
	#tender-project { margin-bottom: 60px; }
	#register-your-interest { padding: 60px 0px; }
	#register-your-interest > div { padding: 0px 55px; }
	
	#tender-form { padding: 60px 0px; }
	#tender-opportunities > div { padding: 0px 55px 60px 55px; }
	
	body > #contact-form { padding: 60px 0px; }
	#downstream-residential, #downstream-commercial, #lpg-gas-products, .section-tpl.lrlayout { padding-bottom: 60px; }
	#buy-petros-lpg { padding-top: 60px; padding-bottom: 20px; }
	#sarawak-pay { padding-bottom: 30px; }
	#customer-satisfaction-form { padding: 60px 0px; }
	
	#leadership-list .group .wrapper_s { padding: 0px 55px; }
	#newsevent-list .group { padding: 0px 55px; }
	
	#careers { padding: 60px 0px; }
	#careers > div { padding: 0px 55px; }
	
	#leadership-list .group { padding: 60px 0px; }
	#leadership-list .list { padding: 60px 55px; }
	#leadership-list .list .item.idx0 img.profile { width: 160px; height: 160px; }
	#leadership-list .list .item img.profile { width: 90%; max-width: 160px; height: auto; height: initial; height: none; }
	#leadership-list .list .item .bio .text { left: 55px; right: 55px; width: auto; width: initial; width: none; }
	
	#media-list .group { padding: 60px 0px 30px 0px; }
	#gallery { padding: 60px 0px 30px 0px; }
	
	
	#careers h2 { font-size: 22px; }
	
	#ccus-sites, #opportunities, #sbr-timeline { padding: 60px 0px; }
	#path-guidelines table td { padding: 60px 30px; }
}
*/
@media only screen and (max-width: 1080px) { /* tablet */
	:root { --h1-font-size: 2.5rem; --h2-font-size: 1.5625rem; --h3-font-size: 1.25rem; --h4-font-size: 0.9375rem; }	
	body { font-size: 0.9375rem; }
	a.btn, .btn { padding: 12px 20px; }
	h2 { margin-bottom: 1rem; }
	
	.mobile { display: block; }
	.desktop { display: none; }
	#logo { position: absolute; left: 30px; top: 0px; }
	#logo a, #logo a img { height: 35px; }
	
	#mobile-menu { display: block; flex-grow: 1; }
	#menu { display: none; }
	#menu-top { margin-left: 0px; margin-bottom: 10px; flex-direction: column; gap: 0px; }
	
	.slicknav_btn { position: absolute !important; right: 30px; top: 12px; display: inline-block !important; }
	.slicknav_menu .thumb > .img { display: none; }
	.slick-prev, .slick-next { width: 15px; }
	.slick-prev { left: -30px; }
	.slick-next { right: -30px; }
	#banner-contant { margin: 0px 50px; }
	
	
	#search_box { max-width: auto; max-width: initial; max-width: none; padding: 5px 15px; margin-bottom: 0px; }
	#search-panel #icon-search { display: none; }
	#search_form { display: block !important; position: relative; top: unset; width: 100%; }
	#search_form button { display: block; }
	
	/*
	#menu { font-size: 6vw; clip-path: none; }
	#menu > div { padding-right: 15px; }
	#menu .panel.show-submenu .mlvl-1 { transform: none; }
	#menu .panel.show-submenu > .mlvl-2, #menu .panel.show-submenu > .mlvl-3 { display: none; }
	#menu ul ul.active { margin-top: 0px; margin-bottom: 5px; display: block; position: relative; left: auto; top: auto !important; height: auto; padding-top: 0px; } 
	#menu ul ul li { font-size: 1rem; }
	#menu ul ul.active li:first-child { margin-top: 5px !important; }
	#menu ul li { flex-direction: column; }
	#menu .container { height: auto; padding-right: 0px; }
	#menu-icon #btn-close { background-size: 60%; }
	*/
	.social-media { padding-right: 0px; }
	
	#banner-contant .slick-slide { border-radius: 3.125rem; }
	
	#retail-product { }
	#retail-product .item .info > div.text { max-width: 90%; }
	#retail-product .item { padding: 8rem 3.125rem; }
	#retail-product .item:nth-child(odd) { margin-top: -4rem; }
	#retail-product .item h2 { font-size: 4vw; }
	
	#our-story .years { width: 150px; }
	#our-story .events .event { width: 100%; }
	
	/*
	#our-story .years { width: 300px; }
	#our-story .years h1 { top: 42%; }
	#our-story .year { padding: 15px 2.5rem; }
	#our-story .year.visible.current { font-size: 8vh; right: 5%; }
	#our-story .year.current::after { width: 18px; height: 18px; }
	#our-story .year.visible { font-size: 1rem; }
	#our-story .year.visible.next { right: 66.5%; padding-right: 2rem; }	
	#our-story .events .event { width: 100%; }
	#our-story .events .event p { display: none; }
	#our-story .events .event.current p { display: block; }
	*/
	
	#esg-banner .wrapper > div div.text > div:first-child { height: 60%; }
	#esg-banner .wrapper > div div.text h1 { font-size: 20rem; }
	
	#s-env .wrapper .img .char, #s-social .wrapper .img .char, #s-governance .wrapper .img .char { font-size: 12rem; line-height: 10rem; right: 5%; }
	#s-env .wrapper img, #s-social .wrapper img, #s-governance .wrapper img, #s-team .wrapper img { border-radius: 3.125rem; }
	#s-social .wrapper .left-s { left: 0px; }
	#s-social .wrapper table td:last-child { padding-left: 30px; width: 40%; }
	#s-governance .wrapper table { width: 100%; }
	
	.pv .wrapper { padding-top: 0px; }
	.pv .wrapper > div { flex-direction: column !important; justify-content: center; gap: 1rem; }
	.pv .wrapper > div .img { width: 100%; }
	.pv .wrapper > div .img img { max-width: 280px !important; }
	.pv .wrapper > div .info h4 { left: auto !important; left: initial !important; right: auto !important; right: initial !important;  text-align: center; font-size: 1rem;  }
	.pv .wrapper > div .info .text { padding: 3.125rem 30px; }
	.pv .wrapper > div .info .text h2 { text-align: center; }
	#our-values.pv .wrapper > div .img img { position: relative; right: auto; right: initial; bottom: auto; bottom: initiall }
	#our-values.pv .wrapper > div .info { text-align: left; }

	.leader .wrapper .row { flex-direction: column !important; flex: auto !important; }
	.leader .wrapper .row .profile { width: 100%; flex: 1; gap: 10px; }
	.leader .wrapper .row .text { font-size: 0.9375rem; text-align: center; justify-content: center; }
	.leader .wrapper .row .item .info { padding: 10px; }
	.leader .wrapper .row .item .info, .leader .wrapper .row .item .info h4 { font-size: 12px; }
	
	.profile-pop {  }
	.profile-pop > div > div { max-width: auto; max-width: initial; max-width: none; }
	.profile-pop > div > div .text { width: 65%; }
	
	
	body.publications #elements { border-radius: 3.125rem; }
	body.publications #elements, body.publications #elements .overlay::after { border-radius: 3.125rem; } 
	body.publications #elements .scroll { width: 20px; height: 30px; } 
	
	#one-stop-centre .wrapper > div div.text { letter-spacing: 2px; }
	#one-stop-centre .wrapper > div div.text > div { font-size: 60px; }
	#one-stop-centre .wrapper > div div.text > div:first-child { flex-direction: row; font-size: 180px; justify-content: flex-start; align-items: center; padding-left: 30px; }
	#one-stop-centre .wrapper > div div.text > div:first-child span { font-size: 40px; line-height: 1; }
	#one-stop-centre .wrapper > div div.text > div:nth-child(2) { padding-left: 4%; }
	#one-stop-centre .wrapper > div div.text > div:nth-child(2) > div.desktop { display: none !important; }
	
	#one-stop-centre .wrapper > div div.text > div:nth-child(2) > div:last-child { padding-bottom: 0px; }
	
	
	/* #one-stop-centre .wrapper > div div.text > div:nth-child(2) > div { height: 25vh; } */
	
	#our-roles .wrapper { min-height: auto; min-height: initial; min-height; none; }
	#our-roles .btn-panel > div { padding: 3.125rem 10px; }
	#our-roles .btn-panel > div.active { flex: 1.5; }
	
	#upstream-banner .wrapper img, #downstream-energy .wrapper img, #ccus .wrapper table tr td img { border-radius: 3.125rem; }
	#upstream-banner .wrapper { height: auto; height: initial; }
	
	#sgr .wrapper { min-height: auto; min-height: initial; min-height: none; }
	#sgr p { max-width: 100%; }
	#sgr p.img { position: relative; left: 0px; top: 0px; }
	#sgr p.img img { position: relative; }
	
	#upstream-frontier .wrapper h2 { text-align: left !important; }
	#upstream-frontier .wrapper table { margin-top: 25px; }
	#upstream-frontier .wrapper table tr { flex-direction: column-reverse; gap: 30px; }
	#upstream-frontier .wrapper table tr:first-child td { width: 100% !important; padding: 0px !important; }
	#upstream-frontier .wrapper table tr:first-child td:first-child { display: flex; justify-content: center; }
	
	#downstream-delivery .wrapper { background-size: 80%; padding-bottom: 20vw !important; }
	#downstream-delivery .wrapper table tbody { display: flex; flex-direction: column-reverse; gap: 30px; }
	#downstream-delivery .wrapper h2 { margin: 0px 0px 25px 0px; }
	#downstream-delivery .wrapper table tr { flex-direction: column; gap: 30px; }
	#downstream-delivery .wrapper table tr:first-child td:first-child { width: 100%; padding-right: 0px; }
	#downstream-delivery .wrapper table tr:first-child td:last-child { display: flex; justify-content: center; width: auto; width: initial; }

	#ccus .wrapper { height: auto; height: initial; }
	#ccus .wrapper table tr td:first-child div.img { order: 1; margin-bottom: 30px; }
	#ccus .wrapper table tr td:first-child p:first-child { order: 2; }
	#ccus .wrapper table tr td:first-child p:nth-child(2) { order: 3; margin-bottom: 0px; }
	#ccus .wrapper table tr { flex-direction: column; gap: 25px; }
	#ccus .wrapper table tr td { width: 100%; }
	#ccus .wrapper table tr td:last-child { padding-left: 0px; }
	
	
	
	#lets-connect h1 { font-size: 6.25rem; }
	
	.vendorform form { border-radius: 3.125rem; }
	
	
	.tbContactform input.text, input.text, .tbContactform textarea, #careers .dataTables_wrapper .dataTables_filter input, select { font-size: 0.9375rem; }
	
	#copyright .wrapper { font-size: 0.9375rem; padding: 10px 30px 8px 30px; }
	
	

	/* OLD CODE */
	/*
	.mobile { display: block; }
	.desktop { display: none; }
	#logo { margin-top: 0px; }
	#menu { display: none; }
	#mobile-menu { display: block;  }
	#menu-top { float: none; margin-left: 0px; }
	*/
	.breadcrumb { font-size: 13px; }
	
	#sitemap h3 { font-size: 21px; }
	
	.nivo-caption p h2 { font-size: 35px;  }
	.nivo-caption p .desc { display: none; }
	
	/*
	#home-content .wrapper.text > div.desc { display: block; margin-bottom: 20px; }
	#intro-text { margin-bottom: 20px; }
	#downstream-residential, #downstream-commercial { padding-top: 30px; }
	
	#lpg-steps .list .step .title span.no { left: 8px; top: 8px; }
	
	#highlights h2 span { margin-bottom: 10px; }
	#highlights p { padding: 10px 0px; }
	
	#h-latest-news-events .item { width:47.5%; margin-left: 5%; margin-bottom: 40px; }
	#h-latest-news-events .item:first-child, #media-list .item:first-child { margin-left: 0px; }
	#h-latest-news-events .item.idx3, #media-list .item.idx3  { width: 100%; margin-left: 0px; margin-bottom: 0px; height: auto !important; height: initial !important; height: none !important; background-image: url(themes/dotted-line.png); background-repeat: repeat-x; background-position: top 0px center; padding-top: 40px; }
	#h-latest-news-events .item .btn { bottom: 0px; }
	#h-latest-news-events .item .btn a.btn-fill-yellow { margin-top: 0px; }
	#h-latest-news-events .item.idx3 .btn a { display: inline-block; margin-right: 20px; }
	
	#media-list .item { width:47.5%; margin-left: 5%; margin-right: 0px; margin-bottom: 40px; }
	#media-list .item.odd { margin-left: 0px; }
	*/
	
	/*
	#milestone .text > h3 { font-size: 16px; }
	#timeline .slick-current .date .mth { font-size: 25px;} 
	#timeline .slick-current .date .year { font-size: 15px; }
	#timeline .date .mth { font-size: 18px; }
	*/
	
	#downstream-residential .cat, #downstream-commercial .cat { font-size: 16px; }
	.tab-menu .cat { font-size: 16px; }
	#leadership-list .cat { font-size: 16px; }
	#media-list .cat, #menu-tab .cat { font-size: 16px; }
	
	h3.line { font-size: 18px; margin-bottom: 15px; }
	h3.line span { padding-bottom: 15px; }
	
	/*
	#what-we-do-list a { margin-top: 15px; }
	#buyers-vendors a { margin-top: 15px; }
	#register-your-interest h2 { font-size: 20px; }
	#tenderops .th { font-size: 14px; }
	
	#tenderops .item { flex-wrap: wrap; }
	#tenderops .item > div.id { width: 8%; }
	#tenderops .item div.ref { width: 110px; }
	#tenderops .item.th > div.project { width: auto; width: initial; }
	#tenderops .item > div.project { width: 90% }
	#tenderops .item > div.date { padding-top: 0px; margin-left: 8%; width: auto; width: initial; flex-grow: 1; text-align: left; }
	#tenderops .item > div.status { padding-top: 0px; width: 125px; }
	#tenderops .item.th > div.status { padding-top: 10px; }
	
	#tender_packages.table-border .id { width: 25px; }
	#tender_packages.table-border .mobile.date { width: auto; width: initial; text-align: left; margin-top: 1rem; display: flex; }
	#tender_packages.table-border .mobile label { width: 120px; font-weight: bold; }
	#tender_packages.table-border .mobile.status { width: auto; width: initial; text-align: left; display: flex;  }
	#tender_packages.table-border .title { border-right: solid 1px #d1d1d1; }
	
	#tender-form h2 { font-size: 20px; }
	.tenderform td span.note { margin-left: 1rem; }
	
	.jobapplication h3 { font-size: 20px; }
	*/
	
	#leadership-list .list .item .name { font-size: 16px; }
	#leadership-list .list .item .position { font-size: 12px; }
	
	/*
	
	#newsevent-list .list .item { padding: 40px 30px; }
	#newsevent-list .list .item .desc, #newsevent-list .list .item .info a { margin-top: 20px; }
	#newsevent-list .list .item .date > div.startdate, #newsevent-list .list .item .date > div.enddate, #h-latest-news-events .list .item .date, #media-list .list .item div.date { padding: 8px; margin-right: 10px; }
	#newsevent-list .list .item .info { padding-left: 25px; }
	
	#customer-satisfaction-form td.highlight div.radio-holder span { margin-right: 20px; width: 38px; }
	#customer-satisfaction-form td.highlight .radio-holder { width: 160px; }
	
	#footer .f-sect2 .contact .icon.phone, #footer .f-sect2 .contact .icon.email { display: none; }
	#footer .f-sect2 .contact .text img.mobile { display: inline-block; *display: inline; zoom: 1; position: relative; top: 5px;}
	*/
	
	table.ccus tr td:first-child { font-size: 15px; width: 190px; }
}

@media only screen and (max-width: 950px) {
/* 	#home-content { margin-top: -20%; padding-top: 21%; }*/
	
	/*
	#footer-2cols > div { width: 100%; }
	#footer-2cols > div .text { width: 40%; height: auto !important; }
	#footer-2cols > div { background-size: 50%; background-repeat: no-repeat; }

	#footer-2cols .img { display: table-cell !important; float: none !important; }
	#footer-2cols .text { display: table-cell; vertical-align: middle; float: none !important; width: 50% !important; }
	#footer-2cols .left .text { background-color: var(--color-red); padding: 40px 5%; }
	#footer-2cols .right .text { background-color: #1f1f1f; padding: 40px 5%; }
	#footer-2cols a.btn-fill-yellow, #footer-2cols a.btn-border-yellow { position: relative; left: auto; left: initial; left: none; bottom: auto; bottom: initial; bottom: none; margin-left: auto; margin-top: 20px; }
	
	#footer-2cols > div > div { display: table; width: 100%; }
	#footer-2cols p { margin: 20px 0px !important; }
	*/
	.floaticon { right: 15px; }
	.floaticon img { width: 120px; }
	
	.jobform { margin-bottom: 0px; }
	#tbJobForm .tbContactform td > div.col { width: 100%; text-align: left; }
	#tbJobForm .tbContactform td > div.col.desktop { display: none; }
	#tbJobForm .tbContactform td > div.col input.text { width: 95.5%; padding: 14px 2%;}
	#tbJobForm .tbContactform td > div.col label { width: 95.5%; padding: 15px 2%; }
	#tbJobForm .tbContactform td > div.col select { width: 100%; padding: 13px 2%; }
	#tbJobForm .tbContactform td > div.col.bsubmit { text-align: center !important; }
	#tbJobForm .employed .radio-holder { display: block; padding: 0px; margin-left: 6%; }
	
}
@media only screen and (max-width: 880px) {
	/* #home-content { margin-top: -19%; padding-top: 19%; }*/
	#retail-product { margin-top: 7rem; }
	#retail-product .item:nth-child(odd) { margin-top: -3.5rem; }
	#retail-product .item { padding: 7rem 3.125rem; }
	
	
	#reports .wrapper > div { flex-direction: column; gap: 25px; }
	#reports .wrapper > div .text { text-align: center; width: 100%; }
	#reports .wrapper > div .text p { max-width: auto; max-width: initial; max-width: none; }
	#reports .wrapper > div .reports { width: 100%; padding-left: 0px; max-width: auto; max-width: initial; max-width: none; }
	#reports .wrapper > div .reports a { max-width: 500px; display: block; margin: auto; }
	/*
	#what-we-do .item > div { display: block; }
	#what-we-do .item .img { width: 100%; display: block; }
	#what-we-do .item .img img { width: 100%; }
	#what-we-do .item .text { position: absolute; width: auto; width: initial; width: none; padding: 40px; top: 0px; bottom: 0px; left: 0px; background-image: url(themes/overlay-48.png); background-color: transparent; }
	#what-we-do .item .text > div{ vertical-align: bottom; }
	#what-we-do h3.line { border-color: var(--color-white); }
	#what-we-do h3.line span { color: var(--color-white); }
	#what-we-do p { color: var(--color-white); }
	#what-we-do a { background-color: var(--color-red); color: var(--color-white); border: none; }
	#what-we-do a:hover { background-color: #ffcc00; color: var(--color-text) !important; }
	
	#product-list .item { position: relative; }
	#product-list .item > div { display: block; background-color: transparent; }	
	#product-list .item .img { width: 100%; display: block; }
	#product-list .item .text { position: absolute; width: auto; width: initial; width: none; background-image: url(themes/overlay-48.png); left: 0px; bottom: 0px; top: 0px; padding: 40px; display: table; border-collapse: collapse; background-color: transparent; }	
	#product-list .item .text > div { display: table-cell; vertical-align: bottom; padding: 40px;  }
	
	#product-list h3.line { border-color: var(--color-white); }
	#product-list h3.line span { color: var(--color-white); }
	#product-list p { color: var(--color-white); }
	#product-list a { background-color: var(--color-red); color: var(--color-white); border: none; }
	#product-list a:hover { background-color: #ffcc00; color: var(--color-text) !important; }
	
	#vendor-register-your-interest a.btn-fill-red.file { max-width: 45%; box-sizing: border-box; text-align: center;}
	
	
	.divRow { position: relative; padding-bottom: 60px; display: block; margin-bottom: 30px;  }
	.divRow .divCol { display: block; width: 100%; }
	.divRow .divCol img { width: 100%; }
	.divRow.aleft div:last-child, .divRow.aright div:first-child { position: absolute; bottom: 0px; }
	body.subpage #main-content .divTable .divCol a { margin-bottom: 0px !important; }
	*/
	
	#ccus-sites img { height: 150px !important; width: auto !important; width: initial !important; margin: 30px 30px 0px 30px; } 
	table.ccus td { padding: 15px 20px; }
	
	#path-guidelines table tr { display: flex; flex-direction: column; }
	#path-guidelines table td { width: 100%; }
	
	#why-bid .item { position: relative; }
	#why-bid > div .img { width: 100%; }
	#why-bid > div .text { position: absolute; width: auto; width: initial; width: none; background-image: url(themes/overlay-48.png); left: 0px; bottom: 0px; top: 0px; padding: 40px; border-collapse: collapse; background-color: transparent; display: flex; align-items: flex-end; }
	#why-bid h3.line { border-color: var(--color-white); }
	#why-bid h3.line span, #why-bid p { color: var(--color-white); }
	
	#access-to-sr { padding: 20px 30px; background-color: #ffce07; position: relative; background-image: none; }
	#access-to-sr::before { content: ""; height: 100%; width: 25%; background-repeat: no-repeat; background-size: contain; background-position: top left; background-image: url(themes/access-to-sarawak-resource-insights-bg-left.webp); position: absolute; top: 0px; left: 0px; }
	#access-to-sr::after { content: ""; height: 100%; width: 25%; background-repeat: no-repeat; background-size: contain; background-position: top right; background-image: url(themes/access-to-sarawak-resource-insights-bg-right.webp); position: absolute; top: 0px; right: 0px;}
	#access-to-sr > div { position: relative; z-index: 1; padding: 0px 15%; }
}
@media only screen and (max-width: 800px) {
	#home-content .wrapper.text, .home .nivo-caption > p { font-size: 15px; }
}

@media only screen and (max-width: 768px) {
	:root { font-size: 14px; --h1-font-size: 2rem; --h2-font-size: 1.25rem; --h3-font-size: 1rem; --h4-font-size: 14px; }
	body { font-size: 1rem; }
	a.btn, .btn, a.btn-fill-yellow { font-size: 13px; padding: 10px 15px; letter-spacing: 2px; }
	a.link, .link { font-size: 13px; letter-spacing: 2px; }
	h1 { margin-bottom: 1rem; }
	h3 { letter-spacing: 2px; }
	body.subpage li { margin-left: 20px; padding-left: 5px; margin-bottom: 10px; }
	
	.wrapper { padding: 3.125rem 25px; }
	
	#banner-contant h1 { letter-spacing: 0px; }
	#banner-contant .slick-slide { border-radius: 2.5rem; }
	#banner-contant .slick-slide .htmlcaption { padding: 25px; }
	.slick-prev, .slick-next { width: 10px; }
	.slick-next { right: -20px; }
	.slick-prev { left: -20px; }
	#banner-contant .slick-slide .htmlcaption .desc { display: none; }
	#banner-contant .slick-slide .htmlcaption h1 { margin-bottom: 1rem; }
	
	#header-holder .wrapper { padding: 0px 25px; }
	#header-holder #pg-title { margin: 0px 1rem; }
	#banner-contant { margin: 0px 40px; }
	
	#logo { left: 25px; }
	.slicknav_btn { right: 25px; }
	
	/*
	#menu { font-size: 6vw; }
	#menu ul ul { margin: 5px 0px; }
	#menu ul ul a { line-height: 1; }
	#menu ul ul li { font-size: 1rem; }
	*/
	
	.social-media .follow a.youtube { width: 30px; }
	.social-media .follow a.linkedin { width: 25px; }
	.social-media .follow span.separator { height: 30px; }
	
	#about-petros .wrapper { padding: calc(3.125rem + 55px) 25px 3.125rem 25px; }
	
	#retail-product { gap: 25px; padding: 0px 25px; }
	#retail-product .item { padding-left: 25px !important; padding-right: 25px !important; }
	#retail-product .item .info > div.text { max-width: auto; max-width: initial; max-width: none; }
	#retail-product .item h2 { font-size: 4vw; }
	
	#our-story .year.visible { right: calc(3.125rem + 1rem); }
	#our-story .years { width: 90px; }
	#our-story .years::after { background-size: 100% 100%; width: 60px; right: calc(3.125rem / 2 - 11px); }	
	#our-story .events .event { width: 100%; } 
	#our-story .events .event.visible { padding: 2rem 25px; }
	#our-story .years .nav > a.nextnav { right: 63px; }
	
	/*
	#our-story .wrapper { padding-top: 5rem; }
	#our-story .wrapper > div { flex-direction: column; border-radius: 2.5rem; }
	#our-story .wrapper > div > div { padding: 25px; box-sizing: border-box; }
	#our-story .years { width: 100%; height: auto; height: initial; background: none; }
	#our-story .years > div { display: none; }
	#our-story .years h1 { position: relative; top: 0px; left: 0px; margin-bottom: 0px; }
	#our-story .events { padding-top: 0px !important; }
	#our-story .events > div { top: 0px !important; }
	#our-story .events .event, #our-story .events .event.visible { display: none; }
	#our-story .events .event.current { display: block; left: 0px; padding: 0px; }
	#our-story .nav { top: 0px; right: 0px; bottom: initial; padding: 20px !important; }
	
	#our-story .year.visible.current { display: flex; font-size: 6vh; right: 8%; }
	#our-story .year.visible.next { right: 42.5%; justify-content: flex-start; }
	#our-story .year.visible.next::after { top: 25px; width: 12px; height: 12px; }
	#our-story .events .event.visible.next { justify-content: flex-start; }
	*/
	
	#esg-banner .wrapper > div div.text { padding: 25px; }
	#esg-banner .wrapper > div div.text h1 { font-size: 15rem; }
	#esg-banner .wrapper > div div.text > div:first-child { height: 57%; }
	#esg-banner .wrapper > div div.text > div:nth-child(2) { padding-top: 2rem; }
	
	#s-env .wrapper table tr { flex-direction: column; gap: 25px; }
	#s-env .wrapper table tr td:first-child > p { width: 100%; }
	#s-env .wrapper table td:last-child { padding-left: 0px; width: 100%; }
	#s-env .wrapper img, #s-social .wrapper img, #s-governance .wrapper img, #s-team .wrapper img { border-radius: 2.5rem; }
	#s-env .wrapper .img .text, #s-social .wrapper .img .text, #s-governance .wrapper .img .text { right: 5%; }
	
	#s-social .wrapper { padding: 0px 25px; }
	#s-social .wrapper tbody tr { display: flex; flex-direction: column; gap: 25px; }
	#s-social .wrapper table td:last-child { width: 100%; padding-left: 0px; }
	
	#s-team table tr:first-child td:first-child { width: 100%; left: 0px; padding-right: 0px; }
	#s-team table tr:last-child td { padding-top: 2rem; }
	
	#s-governance .wrapper table tr, #s-team .wrapper table tr { display: flex; flex-direction: column; gap: 25px; }
	#s-governance .wrapper table td:first-child { left: 0px; padding-right: 0px; }
	#s-governance .wrapper table td:first-child p, #s-governance .wrapper table td:first-child h3 { text-align: left !important; }
	#s-governance .wrapper table td:first-child > p { width: 100%; }
		
	#codes-list .slick-dots { right: 25px; margin: 0px; }
	#codes-list a.close { width: 30px; height: 30px; }
	
	/*
	.pv .wrapper { padding: 0px 25px 0px 25px; }
	.pv .wrapper > div .info .text { padding: 3.125rem 25px; border-radius: 2.5rem;  }
	*/
	
	.leader .wrapper .vh-block { height: auto; height: initial; }
	.leader .wrapper .row .text { font-size: 14px; }
	.leader .wrapper .row .profile { flex-wrap: wrap; justify-content: center; }
	.leader .wrapper .row .item { flex: 0 0 calc(50% - 10px); max-height: 320px; aspect-ratio: 1/1.5; }
	.leader .wrapper .title { }
	.leader .wrapper .row .text { margin-bottom: 1.25rem; }
	
	
	.leader .wrapper > div:first-child .profile .item .img { width: 50%; }
	.leader .wrapper > .profile { gap: 25px; }
	.leader .profile .item { width: calc(50% - 12.5px); }
	
	.profile-pop { padding: 3.125rem 25px; }
	.profile-pop > div { flex-direction: column-reverse; gap: 25px; justify-content: flex-end; }
	/* .profile-pop > div > div { flex-direction: column-reverse; align-items: center; justify-content: flex-end; margin: 0px;  } */
	.profile-pop > div > div:first-child { width: auto; width: initial; padding-right: 0px; text-align: center; }
	.profile-pop > div > div.text .bio { text-align: left; }
	.profile-pop > div > div.img img { max-width: 300px; margin: auto; }
	
	body.publications #elements, body.publications #elements .overlay::after { border-radius: 2.5rem; }
	body.publications #video > div { padding: 20px 25px 0px 25px; }
	body.publication #main-content .content { padding: 3.125rem 25px; } 
	#media-head > div { padding: calc(3.125rem + 60px) 25px 3.125rem 25px; }
	
	#prev-next > div a { line-height: 20px; }
	#prev-next > div { padding-right: 10px; }
	#prev-next .next { padding-left: 10px; }
	
	#element-list .wrapper { padding-bottom: 0px; }
	#element-list #years > div:first-child { padding: 10px 1rem; }
	#element-list .arrow { width: 12px; margin-left: 5px; }
	
	#element-list .l-panel > .list { padding-top: 2.5rem; padding-bottom: 0px; height: auto !important; height: initial !important; }	
	#element-list .l-panel > .list::before { bottom: 6.25rem; }
	#element-list .item { width: 100%; text-align: center !important; margin-left: auto !important; margin-right: auto; left: 0px !important; --bullet-top: 0px !important; top: auto !important; position: relative; background-color: var(--color-white); padding-bottom: 1rem; margin-bottom: 2.5rem; }
	#element-list .item::before { right: auto !important; margin-left: -4px !important; top: -2.5rem; left: 50% !important; }
	
	#element-list .l-panel > div.bg { display: none; }
	#element-list .l-panel > div.text { max-width: 90%; margin: auto; }
	
	#element-list .r-panel { padding: 25px; border-radius: 2.5rem; margin-right: 0px !important; margin-left: 2.5% !important; left: -110%; right: auto; }
	#element-list .r-panel::before { top: 25px; right: unset !important; left: -2.5% !important; }
	#element-list .r-panel > div.back { top: 25px; left: 10px !important; width: 15px; height: 15px; right: auto !important; }
	#element-list .r-panel.pushed-right > div.back { transform: initial; transform: scaleX(-1);  }
	#element-list .r-panel.pushed-right::after { left: -2.5%; right: auto; margin-left: 4px; margin-right: auto; }
	#element-list .r-panel div.content h1 { font-size: var(--h1-font-size); }
	
	#one-stop-centre .wrapper > div div.text { z-index: 101; }
	#one-stop-centre .wrapper > div div.text > div:first-child { font-size: 120px; padding-left: 25px; letter-spacing: 0px; }
	#one-stop-centre .wrapper > div div.text > div:first-child span { font-size: 32px; }
	#one-stop-centre .wrapper > div div.text > div:nth-child(2) { padding-left: 5%; }
	#one-stop-centre .wrapper > div div.text > div:nth-child(2) > div:last-child { padding: 0px 10px ; }
	#one-stop-centre .wrapper > div div.text > div { font-size: 8.5vw; letter-spacing: 3px; }
	
	#our-roles .wrapper { min-height: auto; min-height: initial; min-height: none; padding: 3.125rem 25px; border-bottom: solid 1px var(--color-white); }
	#our-roles .wrapper > div { flex-direction: column; }
	#our-roles .wrapper > div > div { flex: none; width: 100%; }
	#our-roles .btn-panel { flex-wrap: wrap; row-gap: 15px; }
	#our-roles .btn-panel > div { transform: none; flex: 0 0 calc(50% - 7.5px); margin-left: 0px !important; writing-mode: initial; padding: 20px; letter-spacing: 1px; border: solid 1px transparent; }
	#our-roles .btn-panel > div.active { font-weight: 700; }
	#our-roles .btn-panel > div:nth-child(3) { border: solid 1px var(--color-white); }
	#our-roles .btn-panel > div:nth-child(even) { margin-left: 15px !important; }
	#our-roles .info-panel > div h2 { color: var(--color-text); }
	#our-roles .info-panel > div > div > div { padding: 30px 0px 0px 0px; color: var(--color-text); }
	#our-roles .slick-dots { left: 0px; width: 100%; position: relative; }
	
	#sgr .wrapper { padding-top: 3.125rem; }

	#upstream .wrapper { padding-bottom: 3.125rem; }
	#upstream .wrapper table tr:last-child td { padding-bottom: 20px; }
	#upstream .wrapper table tr:first-child { gap: 25px; }
	#upstream .wrapper table td div.img { column-gap: 25px; padding-top: 25px; }
	#upstream .wrapper table td div.img img { max-width: calc(33.33% - 17px); }
	
	#downstream-energy .wrapper table tr { flex-direction: column; gap: 25px; }
	#downstream-energy .wrapper table tr td:first-child { padding-right: 0px; width: auto; width: initial; }
	#downstream-energy .wrapper table tr td:last-child p:first-child { padding-left: 0px; }
	#downstream-energy .wrapper img { width: 100%; max-width: 550px; margin: auto; }
	
	#upstream-frontier .wrapper { padding-top: 25px; }
	#upstream-frontier .wrapper div.img { gap: 25px; }
	#upstream-frontier .wrapper div.img img { height: auto; height: initial; width: calc(33.33% - 16px); }
	#upstream-frontier .wrapper table { margin-top: 20px; }
	
	#downstream-delivery .wrapper, #downstream-delivery.current .wrapper { padding: 5rem 25px; } 
	#downstream-delivery .wrapper div.img { gap: 25px; }
	#downstream-energy .wrapper table tr td:last-child .img { margin: 25px 0px; }
	
	table.dataTable thead th { letter-spacing: 2px; }
	#careers .dataTables_wrapper .dataTables_filter { padding: 6.25rem 25px 3.125rem 25px; }
	#careers > div.wrapper table.dataTable { margin: 0px 25px; width: calc(100% - 50px); padding-top: 2rem; }
	.dataTables_wrapper .dataTables_info { margin: 0px 25px; }
	
	
	#whistleblow > div { padding: 6.25rem 25px; }
	#whistleblow table tr { display: flex; flex-direction: column; }
	#whistleblow table td { width: 100%; padding-bottom: 1rem; }
	
	
	.vendorform form{  border-radius: 2.5rem; padding: 2.5rem 25px; }
	#register-your-interest > div { padding: 0px 25px; }
	#tbVendorForm h2 { margin-bottom: 0px; }
	
	.tbContactform input.text, input.text, .tbContactform textarea, select { font-size: 14px; }
	.tbContactform td { width: 100%; float: left; padding-left: 0px !important; }
	.tbContactform td[colspan="2"] input, .tbContactform input.text, input.text { padding: 10px 20px; }
	.tbContactform select, .vendorform td[colspan="2"] select { padding: 9px 18px; }
	.vendorform td.col2 .radio-holder, #trreqtype .radio-holder { margin-left: 20px; }
	#tbVendorForm input[type="file"] { padding: 10px 20px; margin-top: 5px !important; }
	#tbVendorForm .button > div { justify-content: center; }
	#tbVendorForm a.btn.file { width: 400px; margin-bottom: 10px; }
	.vendorform .button input[type="submit"], .vendorform a.btn-fill-yellow { height: 33px; }
	
	#faq { padding: 3.125rem 0px; }
	#faq a { left: 50%; position: relative; transform: translateX(-50%); display: block; margin: 10px 0px !important; width: 320px; max-width: 100%; }
	
	#lets-connect .wrapper { padding: 3.125rem 25px; }
	#lets-connect h1 { font-size: 10vw; }
	#lets-connect .contact-form { width: 100%; margin-top: 1rem; }
	#lets-connect .tbContactform input[type="text"] { width: 100%; }
	#lets-connect .tbContactform td:first-child { text-align: center; }
	
	
	td.captcha { text-align: center; }
	div.g-recaptcha { display: inline-block; *display: inline; zoom: 1; width: 100%; }
	div.g-recaptcha > div { width: 100% !important; height: auto !important; height: initial !important; height: none !important; max-width: 304px; margin: auto; }
	div.g-recaptcha iframe { width: 100% !important; }
	.tbContactform input[type="button"] { margin: 20px auto 0px auto !important; }
	.tbContactform td.button { text-align: center !important; }	
	
	#footer-menu { font-size: 13px; }
	#copyright .wrapper { font-size: 13px; padding: 10px 25px 8px 25px; }
	
	#cookieconsent .wrapper { flex-direction: column; align-items: flex-start; gap: 10px; }
	
	.mfp-close { width: 40px !important; height: 40px !important; margin-right: 10px; margin-top: 10px; }
	body.home .mfp-close { width: 2rem !important; height: 2rem !important; right: 10px; top: 10px; margin-right: 0px; margin-top: 0px; }
	body.home .mfp-container { padding: 30px !important; }
	
	
	/* OLD CODE */
	/*
	ul, ul ul ul { list-style-image: none; list-style-type: disc; }
	ul ul { list-style-image: none; list-style-type: circle; }
	body.subpage li { padding-left: 0px; }
	
	.nivo-caption p h2 { font-size: 30px; }
	.nivo-caption p .desc { margin-top: 20px !important; }
	.nivo-controlNav { padding-bottom: 30px; }
	.nivo-controlNav a { width: 12px; height: 12px; background-size: cover; }
	.breadcrumb { font-size: 12px; padding-bottom: 40px; }
	#intro-text { margin-bottom: 40px; }
	body.residential #intro-text, body.industrial-and-commercial #intro-text { margin-bottom: 20px; }
	
	body.subpage .section-desc a { margin-bottom: 10px; }
	
	
	.floaticon img { width: 100px; }
	

	
	#highlights .item { width: 100%; }
	
	#be-our-partner > div { padding: 0px 45px; }
	#register-your-interest h2 { font-size: 18px; }
	
	
	.tbContactform td.col2 .empty { display: none; }
	.vendorform td h3 span { display: block; margin-top: 5px; }
	.vendorform a.btn-fill-yellow { margin-left: 5px; width: auto; }
	.vendorform li { margin-left: 20px !important; padding-left: 10px !important; }
	.vendorform ul { margin-top: 0px; }
	
	body.industrial-and-commercial img.icon { display: inline-block; width: 30% !important; margin: 0px 1.5% !important; height: auto !important; height: initial !important; height: none !important; }
	
	.jobapplication h3 { font-size: 18px; } 
	.jobform td.gender > span, .jobform td.employed > span, .jobform td.resume > span { margin-left: 2%; }
	#tbJobForm .employed .radio-holder { display: inline-block; *display: inline; zoom: 1; padding-bottom: 12px; margin-left: 2%; }
	.tbContactform .radio-holder { padding-top: 0px; }
	.jobform td.resume span { top: 0px; display: block; }
	.jobform td.resume div.holder { top: 0px; display: block; padding: 0px 0px 10px 0px !important; text-align: center; }
	.jobform td.resume .note { text-align: left; margin-left: 2%; }
	.tbContactform .holder { position: relative; padding-bottom: 10px !important; }
	.jobform input[type="file"] { padding: 10px; width: 94.5%; }
	.button > div { justify-content: center; margin-left: -36px; }
	
	#leadership-list .list .row .item { width: 43%; }
	#business-principles-list .item .text { padding: 40px 25px; }
	

	#register-your-interest .tab-content > p { margin: 0px 15px; }
	
	
	#careers .job .job-desc h3 { font-size: 13px; margin: 12px 0px; }
	#careers .job .job-desc ul li { line-height: 1.3; }
	#careers > div.jobapplication { margin-top: 25px; }
	
	#ccus-sites h2, #opportunities h2, #path-guidelines h2 { font-size: 20px; }
	#ccus-sites img { height: 120px !important; margin: 20px 20px 0px 20px; } 
	table.ccus { text-align: center; }
	table.ccus tr { flex-direction: column; }	
	table.ccus tr td:first-child { width: auto; width: initial; font-size: 14px; }
	table.ccus td { justify-content: center; }
	*/
}

@media only screen and (max-width: 650px) {
	:root { --h1-font-size: 1.25rem; --h2-font-size: 1.1rem; }	
	
	a.btn, .btn { font-size: 10px; padding: 8px 10px; letter-spacing: 1px; min-width: 180px; width: auto; width: initial; }
	a.link, .link { font-size: 12px; letter-spacing: 1px; }
	h3 { letter-spacing: 1px; }
	
	body.home .mfp-container { padding: 25px !important; } 
	
	#banner-contant .slick-slide .htmlcaption { padding: 15px; }
	#banner-contant .slick-slide .htmlcaption .desc { margin: 0px 0px 5px 0px; }
	
	#retail-product { flex-direction: column; margin: calc(3.125rem - 20px) 0px 3.125rem 0px; }
	#retail-product .item { padding: 3.125rem 30px !important; width: 100%; height: 80vw !important; border-radius: 2.5rem; }
	#retail-product .item h2 { text-align: center !important; }
	#retail-product .item .info > div.text p { text-align: center !important; }
	#retail-product .item img { width: 50%; left: 25%; }
	#retail-product .item:nth-child(odd) { margin-top: 0px; }
	#retail-product .item:nth-child(even) .info { flex-direction: column; }
	#retail-product .item:nth-child(even) .info > div.text { justify-content: flex-end; }
	
	#showcase .text { padding: 25px; }
	
	table.dataTable thead th { letter-spacing: 1px; }
	
	#logo a, #logo a img { height: 32px; }
	.slicknav_menu { padding-bottom: 0px; }
	.slicknav_btn { padding: 6px 0px !important; top: 15px; }
	.slicknav_menu .slicknav_icon-bar { width: 20px !important; height: 2px !important; }
	.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar { margin-top: 3px !important; }
	.slicknav_menu .slicknav_menutxt { line-height: 1 !important; }
	.slicknav_nav { padding-top: 0px !important; }
	
	/*
	.pv .wrapper { padding: 0px 25px 0px 25px; }
	
	.pv .wrapper > div .img img { max-width: 200px; }
	.pv .wrapper > div .info .text { padding: 3.125rem 25px; }
	*/
	
	#our-roles .wrapper { padding: 3.125rem 25px; }
	
	#upstream .wrapper table h2 br { display: none; }
	#upstream .wrapper table tr:last-child { flex-direction: column; }
	#upstream .wrapper table tr:last-child td { text-align: left !important; }
	#upstream .wrapper table td div.img { gap: 25px; padding-top: 25px; }
	
	#reports .wrapper > div .reports a.btn { width: 180px; }
	#esg-banner .wrapper > div div.text { padding: 25px; }
	#esg-banner .wrapper > div div.text h1 { font-size: 12rem; }
	#esg-banner .wrapper > div div.text > div:nth-child(2) { flex-direction: column; gap: 1rem; }
	#upstream .wrapper table td div.img img, #upstream-frontier .wrapper div.img img, #downstream-delivery .wrapper div.img img { border-radius: 20px; }
	
	#upstream-banner .wrapper img, #downstream-energy .wrapper img, #ccus .wrapper table tr td img { border-radius: 2.5rem; }
	#downstream-delivery .wrapper { padding: 3.125rem 25px; }
	#downstream-delivery.current .wrapper { padding: 3.125rem 25px; } 
	/* #downstream-delivery .wrapper div.img img { height: auto; width: calc(50% - 15px); } */
	
	
	#ccus .wrapper table tr { gap: 25px; }
	#ccus .wrapper table tr td:first-child div.img { margin-bottom: 25px; }
	
	#register-your-interest > div { padding: 0px 25px; }
	.vendorform form { padding: 30px 20px; }
	.vendorform div.radio-holder span { margin-left: 5px; margin-right: 20px; }
	.vendorform td.col2 .radio-holder, .vendorform .radio-holder, #trreqtype .radio-holder { margin-left: 0px; }
	#tbVendorForm a.btn.file { width: 300px; max-width: 100%; }
	
	body.publications #elements .scroll { width: 15px; height: 20px; }
	
	
	#whistleblow > div { padding: 6.25rem 25px; }
	
	#cookieconsent > .text { padding: 15px 25px; }
	
	
	
	/* OLD CODE */
	.nivo-caption p h2 { font-size: 20px; }
	.nivo-controlNav { padding-bottom: 20px; }
	.nivo-directionNav a { width: 15px !important; height: 30px !important; }
	.breadcrumb { font-size: 11px; }
	
	.jobform input[type="file"] { width: 93% !important; }
	
	#leadership-list .list { padding: 60px 25px; }
	#leadership-list .list .item .name { font-size: 14px; }
	#leadership-list .list .item .position { font-size: 11px; }
	
	
	#newsevent-list .list .item .date { width: 100%; margin-bottom: 10px; }
	#newsevent-list .list .item .date .to { display: inline-block; *display: inline; zoom: 1; height: 72px;  }
	#newsevent-list .list .item .date > div.startdate, #newsevent-list .list .item .date > div.enddate { display: inline-block; *display: inline; zoom: 1; margin-right: 0px; }
	#newsevent-list .list .item .image { width: 100%; }
	#newsevent-list .list .item .info { width: 100%; padding-left: 0px; }
	
	/*
	a.btn-fill-red, .btn-fill-red, a.btn-border-red, a.btn-fill-yellow { width: 250px; text-align: center; }
	#faq #residential.section a.btn-fill-red, #faq #customer.section a.btn-fill-red { width: auto; width: initial; }
	*/
	
	
	.mfp-close { width: 25px !important; height: 25px !important; }
	
	#footer .f-sect1 .menu a { font-size: 12px; }
	#footer .f-sect1 .menu li { margin-bottom: 10px !important; }
	
	#ccus-sites img { height: 100px !important; margin: 20px 10px 0px 10px; }  
	
}
@media only screen and (max-width: 550px) {
	a.btn, .btn { min-width: 150px; padding: 5px; }
	
	#one-stop-centre .wrapper, #esg-banner .wrapper { padding-top: 55px; }
	#one-stop-centre .wrapper > div div.text > div:first-child { font-size: 90px; }
	#one-stop-centre .wrapper > div div.text > div:first-child span { font-size: 22px; }
	#one-stop-centre .wrapper > div div.text > div:nth-child(2) > div:last-child { padding-left: 0px; font-size: 0.8rem; }
	#one-stop-centre .wrapper > div div.text > div { letter-spacing: 0px; }
	
	#our-roles .btn-panel { row-gap: 10px; }
	#our-roles .btn-panel > div { padding: 10px 15px; }
	
	#codes-list .slick-slide .wrapper { width: 95%; }
	#codes-list h2 { padding: 0px 30px; }
	#codes-list .wrapper > div .title a.openlink { right: -15px; }
	#codes-list .wrapper > div .title a.openlink img { width: 45px; height: 45px; }
	
	
	/* OLD CODE */
	.nivo-caption p h2 { font-size: 16px; }
	
	#h-latest-news-events .item.idx3 .btn a { display: block; margin: 10px auto; }
	
	#s-env .wrapper .img .text .char, #s-social .wrapper .img .text .char, #s-governance .wrapper .img .text .char { font-size: 12rem; line-height: 10rem; }
	
	#what-we-do .item .img { display: none; }
	#what-we-do .item { background-size: cover; }
	#what-we-do .item .text { position: relative; }
	#what-we-do .item .text > div { padding: 8%; }
	#what-we-do .item.even .img{ display: none; }
	
	body.publications #video > div { margin-top: 55px; }
	#media-head > div { padding: calc(3.125rem + 55px) 25px 3.125rem 25px; }
	
	#our-story h1 { top: 0px; }
	#our-story .nav > a { width: 20px; height: 15px; }
	#our-story .years { width: 70px; }
	#our-story .years::after { width: 35px; right: 14px; }
	#our-story .years .nav { right: 0px; }
	#our-story .years .nav > a.nextnav { right: 40px; }
	#our-story .years .nav span { top: -1.2rem; }
	#our-story .years .nav > a.nextnav span { bottom: -1.2rem; }
	#our-story .year.visible { right: 3.125rem; font-size: 12px; }
	#our-story .year.current { right: 30px !important; }
	#our-story .year.current::after { width: 6px; height: 6px; right: -9px; }
	
	@keyframes bounceReverse {
	  0%, 100% { transform: rotate(20deg) translateY(-4px); }
	  50%      { transform: rotate(20deg) translateY(4px); }
	}
	
	
	#our-story .events .event { width: 100%; } 
	#our-story .events .event.visible { padding: 2rem 20px; }
	#our-story .events .event li { padding-left: 0px; }

	#why-bid > div .text { padding: 8%; }
	#access-to-sr, #access-to-sr a { height: auto !important; height: initial !important; }
	#access-to-sr::before { background-size: cover; background-position: top right; }
	#access-to-sr::after { background-size: cover; background-position: top left; }
}

@media only screen and (max-width: 450px) {
	#one-stop-centre .wrapper > div div.text > div:first-child { font-size: 60px; }
	#our-roles .btn-panel > div { padding: 10px; }
	
	#esg-banner .wrapper > div div.text > div:first-child { height: 45%; }
	#esg-banner .wrapper > div div.text h1 { font-size: 8rem; }
	
	
}