@charset "utf-8";
@import url("framework.css");

/* Header
--------------------------------------------------------------------------------------------------------------- */
#navbar {background-color: #fff; color: var(--title_border_color); position: fixed; top: 0; z-index: 1000;}
#header{width:100%; margin:0; padding:0;} #header .logo img {padding: 0;} #header #logo a{color:inherit;}
#mainav, .logo, .flag {display:inline-block; float:left; margin:0; list-style:none;}
#mainav {width: calc(100% - 247px);} 


/* Transition Fade
--------------------------------------------------------------------------------------------------------------- */
*, *::before, *::after{transition:all .3s ease-in-out;}
#mainav form *{transition:none !important;}


/* Navigation
--------------------------------------------------------------------------------------------------------------- */
nav ul, nav ol{margin:0; padding:0; list-style:none;}

#mainav, #breadcrumb, .sidebar nav{line-height:normal;}
#mainav .drop::after, #mainav li li .drop::after, #breadcrumb li a::after, .sidebar nav a::after{position:absolute; font-size:10px; line-height:10px;}

/* Top Navigation */
#mainav ul.clear{margin-top:1px; margin-bottom: 0px;}
#mainav ul{text-transform:uppercase;}
#mainav ul ul{z-index:9999; position:absolute; width:180px; text-transform:none;}
#mainav ul ul ul{left:180px; top:0;}
#mainav li{display:inline-block; position:relative; margin:0 45px; padding:0; font-size: 20px; font-weight: normal;}
#mainav li:first-child{margin-left:0;} #mainav li:last-child{margin-right:0;}
#mainav li li{width:100%; margin:0;}
#mainav li a{display:block; padding:30px 0;}
#mainav li li a{border:solid; border-width:0 0 1px 0;}
#mainav .drop{padding-left:15px;}
#mainav li li a, #mainav li li .drop{display:block; margin:0; padding:10px 15px;}
#mainav .drop::after, #mainav li li .drop::after{content:"\f0d7";}
#mainav .drop::after{top:35px; left:5px;}
#mainav li li .drop::after{top:15px; left:5px;}
#mainav ul ul{visibility:hidden; opacity:0;}
#mainav ul li:hover > ul{visibility:visible; opacity:1;}

@media screen and (max-width:1440px) {
    #mainav li{margin:0 20px;}
}
@media screen and (max-width:1300px) {
    #mainav li{margin:0 15px; font-size: 16px;} 
}
@media screen and (max-width:1050px) {
    #mainav li{margin:0 10px; font-size: 15px;} 
}

#mainav form{display:none; margin:0; padding:0;}
#mainav form select, #mainav form select option{display:block; cursor:pointer; outline:none;}
#mainav form select{width:100%; padding:5px; border:1px solid;}
#mainav form select option{margin:5px; padding:0; border:none;}

#mainav li a{color:inherit;}
#mainav .active_menu a, #mainav a:hover, #mainav li:hover > a{color:rgb(33, 158, 75); background-color:inherit;}
#mainav li li a, #mainav .active_menu li a{color:#FFFFFF; background-color:rgba(0,0,0,.6); border-color:rgba(0,0,0,.6);}
#mainav li li:hover > a, #mainav .active_menu .active_menu > a{color:#FFFFFF; background-color:rgb(33, 158, 75);}
#mainav form select{color: var(--title_border_color); background-color:#fff; border-color: var(--title_border_color);}


/* Page Intro
--------------------------------------------------------------------------------------------------------------- */
#pageintro{padding:200px 0;}
#pageintro article{max-width:65%; margin:0 auto; text-align:center;}
#pageintro article *{text-transform:uppercase;}
#pageintro article .heading{margin:0 0 30px 0; padding:0; line-height:1; font-size:46px;}
#pageintro article p{margin:0;}
#pageintro article p:first-of-type{margin-bottom:20px; font-size:18px; letter-spacing:5px;}
#pageintro article footer{margin-top:50px;}

/* Background 
-------------------------------------------------------------------------------------------------------------- */
.grey_bg {background-color: #f5f5f5;} .orange_bg {background-color: #FCFAF5;}

/* Title page area 
---------------------------------------------------------------------------------------------------------------*/
#full_width {width: 100%; position: relative; margin: auto; padding-top: 85px;}
.centered_title_page {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, 0); color: #fff; font-size:45px; font-weight: bold; text-transform: uppercase; width: 100%; text-align: center;
}
@media only screen and (max-width: 978px) {
    #full_width {padding-top: 74px;}
}
@media screen and (max-width:450px) {
    #full_width {padding-top: 155px;}
}


/* Content Area
--------------------------------------------------------------------------------------------------------------- */
.area {margin: 0 auto; padding: 25px 0 65px 0;}
.title_area {text-align: center; color: var(--title_border_color); font-size: 37px; padding-bottom: 20px; text-transform: uppercase;}
.center_horizontal {display: flex; justify-content: center;}
.main_img {aspect-ratio: 16/4.625; object-fit: cover;}

.button, .button_blank, input[type=submit] {display: inline-block; line-height: 26px; padding: 0.5em 0.7em; margin-top: 1em; border: 1px solid var(--title_border_color); white-space: nowrap; 
    cursor: pointer; outline: none; background-color: transparent; text-decoration: none; color: #4C4953; border-radius: 0.1em; text-transform: capitalize;
}
.button:hover {color: #B40707;} .button_blank:hover {color: darkgreen;}

/* Content */
.general_padding {margin: 0 auto;} 
.title_zone {text-align: center; color: var(--title_border_color); font-size: 27px; padding-top: 20px;}
.content {padding: 0 35px;}
.left_side p:first-child, .left_side label:first-child, .right_side p:first-child, .sustainability_right_side p:first-child {margin-top: 0;}
.left_side p, .right_side p, .sustainability_right_side p {text-align: justify;}



/* Footer
--------------------------------------------------------------------------------------------------------------- */
#footer{padding:0;}

#footer .heading{margin-bottom:20px; font-size:1.2rem;}

#footer .linklist li{display:block; margin-bottom:15px; padding:0 0 15px 0; border-bottom:1px solid;}
#footer .linklist li:last-child{margin:0; padding:0; border:none;}
#footer .linklist li::before, #footer .linklist li::after{display:table; content:"";}
#footer .linklist li, #footer .linklist li::after{clear:both;}

#footer .contact{}
#footer .contact.linklist li, #footer .contact.linklist li:last-child{position:relative; padding-left:40px;}
#footer .contact li *{margin:0; padding:0; line-height:1.6;}
#footer .contact li i{display:block; position:absolute; top:0; left:0; width:30px; font-size:16px; text-align:center;}

#footer input, #footer button{border:1px solid;}
#footer input{display:block; width:100%; padding:8px;}
#footer button{padding:8px 18px 10px; text-transform:uppercase; font-weight:700; cursor:pointer;}

#footer .heading{color: var(--title_border_color);}
#footer .linklist li{border-color:rgba(255,255,255,.2);}

#footer input, #footer button{border-color:transparent;}
#footer input{color:#FFFFFF; background-color:#1A1A1A;}
#footer input:focus{border-color:rgb(33, 158, 75);}
#footer button{color:#FFFFFF; background-color:rgb(33, 158, 75);}


/* Colours
--------------------------------------------------------------------------------------------------------------- */
body{color:#4C4953; background-color:#fff; font-family:'The Youngest Serif Display', Garamond, Times New Roman, Arial;}
a, .green_color{color:rgb(33, 158, 75);}
a:active, a:focus{background:transparent;}/* IE10 + 11 Bugfix - prevents grey background */
hr, .borderedbox{border-color:#D7D7D7;}
label span{color:#FF0000; background-color:inherit;}
input:focus, textarea:focus, *:required:focus{border-color:#56AED4;}
p {text-align: justify}
.overlay{color:#FFFFFF; background-color:inherit;}
.overlay::after{color:inherit; background-color:rgba(0,0,0,.55);}

.btn, .btn.inverse:hover{color:#fff; background-color:rgb(33, 158, 75); border-color:rgb(33, 158, 75);}
.btn:hover, .btn.inverse{color:inherit; background-color:transparent; border-color:inherit;}

.icon{color:inherit; border-color:inherit;}
a .icon:hover, article:hover a .icon{color:#fff; background-color:rgb(33, 158, 75);}



/* Tables
--------------------------------------------------------------------------------------------------------------- */
table, th, td{border:1px solid; border-collapse:collapse; vertical-align:top;}
table, th{table-layout:auto;}
table{width:100%; margin-bottom:15px;}
th, td{padding:5px 8px;}
td{border-width:0 1px;}


/* Gallery
--------------------------------------------------------------------------------------------------------------- */
#gallery{display:block; width:100%;}
#gallery figure figcaption{display:block; width:100%; clear:both;}
#gallery li{margin-bottom:30px;}

/* ------------------------------------------------------------------------------------------------------------ */

/* Rows */
.row1{color:#000; font-weight: bold;}
.row2, .row2 a{}
.row3 .heading{color:#474747;}
.row4{color:#CBCBCB; background-color:#272727; border-color: var(--title_border_color);}
.row5, .row5 a{color:#CBCBCB; background-color:#1a1a1a;}


/* Tables + Comments */
table, th, td, #comments .avatar, #comments input, #comments textarea{border-color:#D7D7D7;}
#comments input:focus, #comments textarea:focus, #comments *:required:focus{border-color:rgb(33, 158, 75);}
th{color:#FFFFFF; background-color:#373737;}
tr, #comments li, #comments input[type="submit"], #comments input[type="reset"]{color:inherit; background-color:#FBFBFB;}
tr:nth-child(even), #comments li:nth-child(even){color:inherit; background-color:#F7F7F7;}
table a, #comments a{background-color:inherit;}



/* Max Wrapper Width - Laptop, Desktop etc.
--------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width:750px) {
    #mainav form select{width:50%; margin: 0 auto; padding:5px; border:1px solid;}
}
@media screen and (min-width:978px){
    #header .logo {padding: 20px 0 20px 15px;} #header .flag {padding: 25px 15px 27px 0; text-align: right;}
	.general_padding {padding: 0 10px;} 
    .left_side {padding: 0 75px 0 15px;} .right_side {padding: 0 15px 0 75px;} .split {padding-top: 85px;} .sustainability_right_side {padding: 0 15px;}
    img.left_right_side {width: 85%;}
}
@media screen and (min-width:1000px){
}
@media screen and (min-width:1100px){
	.general_padding {padding: 0 100px;} 
}
@media screen and (min-width:1600px){
	.general_padding {padding: 0 150px;}
}

/* Mobile Devices
--------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:978px){
	.area {padding: 5px 0 41px 0;} .general_padding {padding: 0 16px;}

    #header .logo {padding: 15px 0 15px 15px; margin: 0;} 
    #header .flag {padding: 20px 10px 22px 0; margin: 0;}
	#mainav ul{display:none;} #mainav form{display:block;}
    .centered_title_page {font-size: 33px; transform: translate(-50%, 95%);}
    .left_side {padding-right: 20px;} .right_side {padding-left: 20px;} .split {padding-top: 30px;}
    img.left_right_side {width: 95%;}

	#copyright p:first-of-type{margin-bottom:10px;}
}
@media screen and (min-width:750px) and (max-width:978px){
	.elements li > :last-child{margin-top:8px;}
    #mainav form{padding: 20px 20px 10px 0;}
    img {padding: 0 6px;}
    .flag img {padding: 0;}
}

@media screen and (max-width:750px){
	#header{text-align:center;}
    #header .logo {padding: 15px; margin: 0;} 
    #header .flag {padding: 20px 15px 22px; margin: 0;}
	#footer{padding-bottom:50px;}/* Not needed, just looks a little better */
    img {padding: 0;}

	.fl_left, .fl_right{display:block; float:none;}
	.one_half, .one_third, .two_third, .one_quarter, .two_quarter, .three_quarter, .fourth_ten, .sixth_ten, 
    .one_eighth, .three_eighth, .five_eighth, .seven_eighth{display:block; float:none; width:auto; margin:0; padding:0;}
	.services li:nth-child(-n+4){margin-bottom:30px;}
}

@media screen and (max-width:670px){
	.scrollable{display:block; width:100%; margin:0 0 30px 0; padding:0 0 15px 0; overflow:auto; overflow-x:scroll;}
	.scrollable table{margin:0; padding:0; white-space:nowrap;}
    
    #header{padding: 0;}
    #mainav {width: calc(100% - 277px);} #mainav form{padding-top: 20px;}
    #mainav form select{width:81%; margin: 0 auto; padding:5px; border:1px solid;}
    .centered_title_page {font-size: 33px;} 
    .title_area {font-size: 33px;padding-bottom: 15px;}
    .left_side, .right_side, .content, .sustainability_right_side {padding: 0 10px;} .split {padding: 0;}
    .right_side p:first-child, .sustainability_right_side p:first-child {margin-top: 25px;}
    img.left_right_side {width: 100%;}

	.inline li{display:block; margin-bottom:10px;}
	.pushright li{margin-right:0;}

	.font-x2{font-size:1.4rem;}
	.font-x3{font-size:1.6rem;}

	#pageintro li article{max-width:none; width:100%;}
	#pageintro li .heading{font-size:2rem;}
}

@media screen and (max-width:450px){
	#header .logo{display:block; float:none; width:auto; margin: 0; padding: 10px;} 
    #header #mainav {width : 100%; display:block; float:none;} #mainav form select{width:99%;padding: 0;}
    #header .flag {display:block; float:none; width:auto; margin:0; padding: 0 0 5px;}
    .elements li > :last-child{margin-top:5px;} .general_padding {padding: 0 5px;}
    .centered_title_page {font-size: 30px; transform: translate(-50%, 185%);}
    .main_img {aspect-ratio: 16/7; object-fit: cover;}
}

/* Other
--------------------------------------------------------------------------------------------------------------- */
  
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {position: fixed; top: 0; width: 100%;}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {padding-top: 50px; padding-top: 60px;}

#wrapperNinh{font-size:0;}

#wrapperNinh>*{font-size:16px;}