*{ 
	  font-family: "Montserrat", sans-serif;
}

/************* Main Text *************/
h1 {
	font-size: 50px;
	color: #e50019;
	font-weight: 700;
	font-family: "Baloo 2", sans-serif;
}
h2 {
    font-size: 32px;
	color: #e50019;
	font-weight: 700;
	margin-bottom: 25px;
	font-family: "Baloo 2", sans-serif;   
}
h3 {
	font-size: 22px;
	color: #e50019;
	font-weight: 600;
	text-transform: uppercase;
	background-image: url(../img/others/grey-strip.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-bottom: 15px;
	margin-bottom: 25px;
	font-family: "Baloo 2", sans-serif;   
}

h4 {
    font-size: 20px;
	color: #000000;
	font-weight: 500;
	margin-bottom: 5px;
	font-family: "Baloo 2", sans-serif;
}

h5 {
    font-size: 18px;
	color: #000000;
	margin-bottom: 5px;
	font-family: "Baloo 2", sans-serif;
}

p {
    font-size: 17px;
	color: #616161;
	line-height: 1.4;
}

a {
    color:#161e87;
    text-transform:none;
}
a.btn {
	text-decoration: none;
	font-size: 16px;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 10px;
	border: 2px solid #050505;
	background-color: #050505;
	padding: 10px 20px;
	margin:5px;
}
a.btn:hover {
  background-color: #555555;
}


.img-rounded {
  border-radius: 6px;
}
.img-thumbnail {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 4px;
  line-height: 1.42857143;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: all .2s ease-in-out;
       -o-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;
}


.mce-accordion {
    margin-bottom:10px;
}
.mce-accordion summary {
    font-size:1.1rem;
}

.text-center img {
	display: inline-block;
}
.header-top {
    background-color: #ffffff;
    padding-bottom:120px;
}
.header-wrap {
    padding:8px 100px;
    position: fixed; /* Keeps it locked to the top */
    top: 0 !important
    left: 0 !important;
    width: 100%;
    z-index: 9999;
    background-color: #ffffff;
    /* Forces the phone to use hardware acceleration to render the fixed layer correctly */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    /* This makes the padding and background changes slide smoothly */
    transition: all 0.4s ease-in-out; 
    overflow:visible !important;
}
header {
	padding: 0px;
}

header .header-lang {
    background-color:red;
    padding:10px 30px;
}
.header-lang p {
    margin:0;
    color:#ffffff;
}
.header-lang a {
    color:#ffffff;
    font-family: "Baloo 2", sans-serif;
    font-weight:600;
}
.header-lang a:active {
    color:#f5f5f5;
}
/* Search box + button on one line, right-aligned, vertically centered with the rest of the bar */
.header-lang .header-search {
    display:flex;
    align-items:center;
    justify-content:flex-end;
}
.header-lang .header-search input {
    flex:1 1 auto;
    min-width:0;
    max-width:220px;
    height:32px;
    padding:3px 8px;
    border:1px solid #ffffff;
    border-radius:4px 0 0 4px;
}
.header-lang .header-search .btn-search {
    height:32px;
    padding:0 12px;
    background-color:#ffffff;
    color:#000000;
    border:1px solid #ffffff;
    border-left:1px solid #dddddd;
    border-radius:0 4px 4px 0;
    line-height:1;
}
.header-lang .header-search .btn-search:hover,
.header-lang .header-search .btn-search:focus {
    background-color:#f0f0f0;
    color:#000000;
}
@media screen and (max-width: 575px) {
    .header-lang .header-search {
        justify-content:stretch;
        margin-top:8px;
    }
    .header-lang .header-search input {
        max-width:none;
    }
}
header .mainmenu {
    float: right;
    padding: 30px 0px;
     font-family: "Baloo 2", sans-serif;
     font-weight:600;
}
header .mainmenu ul li a {
	text-decoration: none;
	font-size: 20px;
	color: #050505;
	padding:6px;
	
}

header .mainmenu ul li a.button {
	text-decoration: none;
	color: #fff;
	background-color:#050505;
	border-radius:8px;
	padding:6px;
}
header .mainmenu ul li a.button:hover {
	text-decoration: none;
	color: #000;
	background-color:#f0f0f0;
	border:1px solid #000000;
	padding:6px 5px;
}


header .mainmenu ul li {
	padding: 0px 10px;
}
header .mainmenu ul li:last-child {
	padding-right: 0px !important;
}
.header-logo {
    width:150px;
}
.header-contact ul li {
	margin-right: 20px;
}
.header-contact ul li:last-child {
	margin-right: 0px;
}
/*************SUB MENU*************/
.mainmenu .sub-menu {list-style: outside none none;  min-width: 250px;  padding: 0;  position: absolute;  z-index: 1000;  display:none;border:1px solid #000;}
.mainmenu li:last-child:hover .sub-menu {right: 0;}
.mainmenu li:hover > .sub-menu{ display:block; }
.mainmenu .sub-menu li{padding:0px !important;}
.mainmenu .sub-menu li a { background-color: #fff;  display: block;  padding: 10px 15px !important;  text-align: left; color: #000 !important;  text-decoration: none;  transition: all 1s ease-in-out 0s;}
.mainmenu .sub-menu li a:hover { background:#fff !important; padding-left:25px; color: #000 !important;}
.col-md-5ths {
	width: 20%;
	float: left;
}

/*************SUB MENU*************/
.mainmenu .sub-menu .sub-menu:hover > ul { display: block;}
.mainmenu .sub-menu .sub-menu {display: none; position: absolute; left: 100%; margin-top: -40px;}
.mainmenu .sub-left {left:-100% !important; width:100%;}


/*******MAIN MENU*********/
header .mainmenu .navbar {
	margin: 0px;
	padding: 0px;
}
.navbar-dark .navbar-nav .nav-link {
  color: #fff;
  margin: 0px;
}
.owl-theme .owl-nav {
	margin-top: 0;
}
header .mainmenu .navbar-nav a.active,
header .mainmenu .navbar-nav a:focus,
header .mainmenu .navbar-nav a:hover {
	background: none;
	color: #909090;
	text-decoration: underline;
}

/* Logo centered in the main menu (desktop/tablet). Both halves take equal width so the logo stays centered. */
@media screen and (min-width: 768px) {
	header .mainmenu {
		float: none;
		width: 100%;
	}
	header .mainmenu .navbar-collapse {
		align-items: center;
	}
	header .mainmenu .navbar-nav.nav-left,
	header .mainmenu .navbar-nav.nav-right {
		flex: 1 1 0;
		align-items: center;
	}
	header .mainmenu .navbar-nav.nav-left {
		justify-content: flex-end;
	}
	header .mainmenu .navbar-nav.nav-right {
		justify-content: flex-start;
	}
	header .mainmenu .nav-logo {
		flex: 0 0 auto;
		padding: 0 30px;
	}
	header .mainmenu .nav-logo img {
		height: 80px;
		width: auto;
		transition: height 0.4s ease-in-out;
	}
	header .mainmenu .navbar-nav > li > a {
		white-space: nowrap;
	}
	/* Drop-downs open directly under their own menu item */
	header .mainmenu .navbar-nav > li {
		position: relative;
	}
	header .mainmenu .navbar-nav > li > .sub-menu,
	header .mainmenu .navbar-nav > li:last-child:hover > .sub-menu {
		top: 100%;
		left: 0;
		right: auto;
	}
}
/* Tablets: less side padding and a smaller logo so the menu stays on one line */
@media screen and (min-width: 768px) and (max-width: 1099px) {
	.header-wrap {
		padding-left: 20px;
		padding-right: 20px;
	}
	header .mainmenu .nav-logo {
		padding: 0 12px;
	}
	header .mainmenu .nav-logo img {
		height: 56px;
	}
}


/**************** Shrinking Top Bar on scroll ******************/
.header-wrap.shrunk {
    top:0 !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
}

.header-wrap.shrunk .header-logo img {
    height: 56px !important;
}
.header-wrap.shrunk .mainmenu {
    padding:10px 0px !important;
}

.header-wrap.shrunk .mainmenu img {
    height: 40px !important;
}


header .header-bottom {
	background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width:100%;
    height:auto;
    aspect-ratio: 16 / 3;
    background-color:#f0ece5;
}
/* Tablets / small laptops: at 16:3 the banner gets too short (about 150px at 800px wide) and its
   text too small, so it is at least 200px tall; from about 1067px wide 16:3 is taller anyway */
@media screen and (min-width: 768px) {
    header .header-bottom {
        min-height:200px;
    }
}

header .header-bottom-sub {
    aspect-ratio: 16 / 2;
} 
.bg-rotator {
    
}
.bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    container-type: size;   /* the banner text below is sized in cqh = 1% of the banner height */
}

.bg-slide.active {
    opacity: 1;
}

.bg-slide-bgcover {
    width:100%;
    height:100%;
}

/* Banner text: full width of the banner, 8% from the top, centred
   (alignment set in the banner text editor still overrides the centring).
   The banner's height follows its width (aspect-ratio above), so everything in it - logo, text,
   heading, button - is sized as a share of the banner height (cqh, from .bg-slide) and always fits.
   Browsers without container units use the fixed sizes given first. */
.bg-slide-text {
    position: absolute;
    top: 8%;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 15px;
    text-align: center;
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
    transition-delay: 0s;
    
    font-size:1.2em;
    font-size:clamp(10px, 7cqh, 22px);          /* text line: 7% of the banner height */
    line-height:1.3;
    text-shadow: 0 2px 2px rgba(70, 195, 243, 0.4);
    color:#ffffff;
}
.bg-slide-text h1 {
    font-size:70px;
    font-size:clamp(16px, 20cqh, 70px);         /* heading: 20% of the banner height */
    line-height:0.9;
    color:#ffffff;
    text-transform:none;
    margin:0 0 0.15em;
}
.bg-slide-text p {
    color:#ffffff;
    margin:0.5em 0 0;
    font-size:inherit;      /* use the banner-based size above, not the site's fixed paragraph size */
    line-height:inherit;
}
/* Images in the banner text (e.g. a logo): at most 40% of the banner height, keeping their shape */
.bg-slide-text img {
    max-width:100%;
    width:auto;
    height:auto;
    max-height:40cqh;
}
/* Button: sized from the banner text, so it shrinks and grows with the banner */
.bg-slide-text a {
    display:inline-block;
    text-decoration: none;
	font-size: 20px;
	font-size: 0.95em;
	line-height:1.2;
	color: #31669b;
	font-weight: 700;
	border-radius: 0.5em;
	border: 2px solid #31669b;
	background-color: #ffffff;
	padding: 0.45em 1em;
	margin:0px 0px;
}
.bg-slide-text a:hover {
    background-color:#c5c5c5;
}
header .header-bottom-sub {
    position:relative;
}

header .header-bottom-sub .sub-banner-text {
    position:absolute;
    top: 55%;
    left:50%;
    transform: translate(-50%, -50%);
}

header .header-bottom-sub .sub-banner-text h1 {
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	padding-bottom: 15px;
	margin-bottom: 25px;
	text-shadow:2px 2px black;
	font-size:48px;
	text-align:center;
}

.main-section {
    padding-top:25px;
} 
.about-heading ul li a {
	text-decoration: none;
	font-size: 45px;
	color: #fff;
	text-transform: uppercase;
	border-radius: 0px !important;
	background-color: #2a8b34;
    font-family: 'BebasNeueBold';
    padding: 10px 113px;
} 	
.about-heading .nav-tabs .nav-link.active,.about-heading .nav-tabs .nav-link:hover, .about-heading .nav-tabs .nav-item.show .nav-link {
    color: #fff;
    background-color: #185f1f;
    border-color: transparent;
}
.about-heading ul li {
	margin-right: 10px;
}
.about-heading ul li:last-child {
	margin-right: 0px;
}
.about-heading ul {
	border-bottom: none;
}
.about-img img {
    width: 100%;
}
.about-contents {
    padding-top: 20px;
}
.about-heading {
    background-color: #fff;
    padding: 10px;
    position: relative;
    margin-top: -60px;
    z-index: 9;
}
.about-wrap {
    padding-top: 30px;
}
.about-contents p {
	font-size: 17px;
	color: #616161;
	font-family: "Lato";
	line-height: 1.7;
}
.about-contents h3 {
	font-size: 26px;
	color: #000000;
	font-weight: 700;
	text-transform: uppercase;
	background-image: url(../img/others/why-strip.png);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-bottom: 15px;
	margin-bottom: 25px;
}
.icon-cont-wrap {
    position: relative;
    margin-bottom: 20px;
}
.icon-contents {
    background-color: rgba(0,0,0,0.8);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-top: 10%;
}
.icon-contents:hover {
    background-color: rgba(19, 95, 31,0.8);
}
.icon-contents h3 a {
	text-decoration: none;
	color: #fff;
}

.icon-contents h3 {
	font-size: 25px;
	color: #fff;
	font-family: "Lato";
	font-weight: 700;
	text-transform: uppercase;
}
.icon-section {
    padding: 50px 0px;
}
.heading h2 {
	font-size: 34px;
	color: #000000;
	font-weight: 700;
	text-transform: uppercase;
}
.heading h2 span {
	font-size: 34px;
	color: #0a7321;
	font-weight: 700;
	text-transform: uppercase;
}

.div-dark-mask {
  background-color: rgba(0,0,0,0.4);
  width:100%;
  height:100%;
  padding:40px;
  position:absolute;
}

/* News and Calendar Section */
.news-section {
    background-image: url(../img/behindnews.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height:300px;
    
}

.news-section h2 {
    color:#ffffff;
    font-size:40px;
}
.news-contents {
    padding: 0px 20px;
}
.news-cont-wrap, .cal-cont-wrap {
    margin-bottom: 17px;
    border: 1px solid #afafaf;
    background-color:#ffffff;
    border-radius:10px;
    min-height:100px;
    padding:10px;
}
.up-contents {
    background-color: #ffff;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #afafaf;
}


.news-title {
    font-size:1.2em;

}
.news-item {
    clear:both;
    padding:10px;
    border:1px solid #cecece;
    background-color:#ffffff;
    margin-bottom:5px;
    position:relative;
}
.news {
    clear:both;
}
.news-title img {
}
.news-article {
    display:none;
    margin-top:15px;
}
.news-view {
    float:right;
    cursor:pointer;
    font-size:20px;
    margin-top:-5px;
    color:#0a7321;
}

.news-date {
    float:right;
    margin-left:15px;
    font-size:15px;
    color:#616671;
    margin-bottom:5px;
}

.cal-date {

}
.cal-month {
    background-color:#000000;
    color:#fff;
    font-size:18px;
    font-weight:bold;
    text-align:center;
    border-radius:15px 15px 0px 0px;
    padding: 5px 0px;
}
.cal-day {
    background-color:#555555;
    color:#fff;
    font-size:60px;
    font-weight:bold;
    text-align:center;
    border-radius:0px 0px 15px 15px;

}


.gallery-section {
    background-color:#ffffff;
    padding:20px 0px;
}

.gallery-section h2 {
    color:#ffffff;

}

/* Gallery Container */
.scroll-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 15px;
    padding: 20px 0;
    
    /* Hide scrollbar for IE, Edge and Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scroll-container::-webkit-scrollbar {
    display: none;
}

.gallery-item {
    flex: 0 0 auto;
}

.gallery-item img {
    height: 350px;
    width: auto;
    object-fit: cover;
    border-radius: 4px;
    /* Optional: shadow to make them pop since there's no scrollbar as a cue */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.dark-section {
    background-color:#000000;
    padding:0px 0px;
}
.dark-section p, .dark-section h2 {
    color:#ffffff;
}
.dark-section .dark-full-img {
    width: 100%;
  height: 100%;
  object-fit: cover;
  position:absolute;
}


.grey-section {
    background-color:#dfdfdf;
    padding:30px 0px;
}
.grey-section p {
    color:#000000;
}
.quote-section {
    text-align:center;
    padding: 30px 60px;
}
.contact-section {
	position: relative;
	background-color:#E2E9F3;
	padding:20px 60px;
}

.map-section {
	position: relative;
}
/* Footer: red bar with phone | logo | icons, language links, copyright (all white, centred) */
.footer-section {
    background-color: #e6001a;
    color: #ffffff;
    padding: 12px 0 10px;
    margin-bottom: 0;
    text-align: center;
}
.footer-section a {
    color: #ffffff;
}
.footer-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 32px;
}
.footer-phone {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
}
.footer-phone:hover {
    color: #ffffff;
    text-decoration: underline;
}
.footer-logo img {
    height: 55px;
    width: auto;
}
.footer-icons {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.footer-icons img {
    height: 24px;
    width: auto;
    display: block;
}
.footer-icons a:hover img {
    opacity: 0.8;
}
.footer-lang {
    font-size: 15px;
    margin: 4px 0 6px;
    color: #ffffff;
}
.footer-lang a {
    text-decoration: underline;
}
.footer-lang a:hover {
    color: #ffffff;
    opacity: 0.85;
}
.footer-copy {
    font-size: 12px;
    margin: 0;
    color: #ffffff;
}
@media screen and (max-width: 575px) {
    .footer-main {
        flex-direction: column;
        gap: 8px;
    }
    .footer-copy {
        font-size: 11px;
    }
}
.footer-slogan {
    background-color:#000000;
    padding:50px;
}
.footer-slogan h2 {
    color:#ffffff;
}
.footer-slogan p {
    color:#ffffff;
}
.footer-slogan a, .dark-btn {
    text-decoration: none;
	font-size: 20px;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 10px;
	border: 2px solid #fff;
	background-color: none;
	padding: 10px 20px;
	margin:0px 0px;
}
.footer-slogan a:hover, .dark-btn:hover {
    background-color:#555555;
    color:#fff;
    text-decoration:none;
}
.footer-slogan img {
    width:40%;
    float:right;
}


.foot-middle {
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;

}

.quick-links a {
    color:#ffffff;
    margin-right:15px;
}

.cont-section {
    background-color: #fff;
    padding: 50px 0px;
}
.centron-heading.cont {
    width: auto;
    padding: 0px;
    box-shadow: none !important;
}
.centron-heading ul li span{
	color: #01a79d;
}
.contact-form {
    background-color: #f7f5f5;
    padding: 30px;
}
.contact-form .form-control {
	border-radius: 0px;
	font-size: 15px;
	color: #343434;
}
.contact-form input {
	height: 50px;
}
.contact-form textarea {
	height: 150px;
}

.contact-form .form-control::-webkit-input-placeholder {
  color: #343434;
  opacity: 1;
}

.contact-form .form-control::-moz-placeholder {
  color: #343434;
  opacity: 1;
}

.contact-form .form-control::-ms-input-placeholder {
  color: #343434;
  opacity: 1;
}

.contact-form .form-control::placeholder {
  color: #343434;
  opacity: 1;
}
.contact-form a.btn {
	text-decoration: none;
	font-size: 22px;
	color: #fff;
	font-weight: 700;
	border-radius: 0px;
	display: block;
	text-transform: uppercase;
	background-color: #4672A3;
	padding: 7px 40px;
}

.contact-form a.btn:hover {
  background-color: #6992BE;
}


.contact-form {
	
}

#ajaxalert {
	background-color: white;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	box-shadow: 0 0 20px 0 #222;
	-webkit-box-shadow: 0 0 20px 0 #222;
	-moz-box-shadow: 0 0 20px 0 #222;
	display: none;
	margin-left: -100px;
  margin-top: -100px;
	padding: 20px;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 400px;
	z-index: 1000;
}

div.ajaxerror{
    background-color:#FFF;
    border-color: #222;
    color:red;
    border-style: solid;
    border-width: 2px;
    padding: 5px;

	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	box-shadow: 0 0 10px 0 #222;
	-webkit-box-shadow: 0 0 10px 0 #222;
	-moz-box-shadow: 0 0 10px 0 #222;
}


.foot-logo {
    height:100px;
    text-align:center;
    margin:0 auto;
}

.footer-wrap h3 {
	font-size: 20px;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 25px;
}
.footer-menu ul li a {
	text-transform: uppercase;
}
.footer-wrap ul li a {
	text-decoration: none;
	font-size: 16px;
	color: #fff;
}
.footer-wrap ul li {
	padding-bottom: 5px;
}
.footer-contact ul li {
	background-repeat: no-repeat;
	padding-left: 40px;
	background-position: left 7px;
	padding-bottom: 10px;
}
.footer-contact ul li.location {
	background-image: url(../img/others/cont-1.png);
}
.footer-contact ul li.phone {
	background-image: url(../img/others/cont-2.png);
}	
.footer-contact ul li.mail {
	background-image: url(../img/others/cont-3.png);
}
.social-icons  ul li {
	background-repeat: no-repeat;
	padding-left: 40px;
	background-position: left 7px;
	padding-bottom: 10px;
}
.social-icons  ul li.social-1 {
	background-image: url(../img/others/social-1.png);
}
.social-icons  ul li.social-2 {
	background-image: url(../img/others/social-2.png);
}	
.social-icons ul li.social-3 {
	background-image: url(../img/others/social-3.png);
}
.social-icons ul li.social-4 {
	background-image: url(../img/others/social-4.png);
}
.social-icons ul li {
	padding-right: 8px;
}
.copyrights p {
	font-size: 18px;
	color: #ffffff;
	margin-bottom: 0px;
}
.copyrights a {
	color: #ffffff;
}
.copyrights {
    	padding-top: 20px;
    	border-top:1px solid #ffffff;
}
.letter-heading h3 {
	margin-bottom: 0px;
	color: #fff;
	text-transform: capitalize;
}
.letter-heading p {
	margin-bottom: 5px;
	color: #fff;
	font-size: 17px;
	font-weight: 600;
}
.letter-wrap input {
	border-radius: 50px;
	font-size: 15px;
	color: #616161;
	position: relative;
	margin-top: 15px;
	height: 45px;
}
.letter-wrap a.btn {
	font-size: 18px;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 50px;
	padding: 10px 40px;
	background-color: #263724;
	border: 1px solid #263724;
	position: relative;
	margin-top: 15px;
}
.latest-section {
    background-color: #f7f5f5;
    padding: 50px 0px;
}
.latest-cont-wrap {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 30px;
}
.latest-heading {
    padding-bottom: 30px;
}
.latest-contents {
	text-align: center;
	padding: 20px 10px;
}
.latest-contents h3 {
	font-size: 18px;
	color: #000000;
	font-weight: 700;
	text-transform: uppercase;
}
.latest-contents p {
	font-size: 16px;
	color: #373737;
	line-height: 1.7;
}
.latest-contents ul li a i {
	color: #bfbfbf;
}
.latest-contents ul {
	border-top: 1px solid #d6d6d6;
	margin-top: 15px;
}
.latest-contents ul li {
	padding-top: 15px;
}
.latest-contents ul li a {
	font-size: 15px;
	color: #000000;
	text-transform: uppercase;
	text-decoration: none;
}
.latest-contents ul li {
	margin-right: 15px;
}
.latest-contents ul li:last-child {
	margin-right: 0px;
}

/*Popup Section*/
body.modal-open { overflow:inherit; padding-right:inherit !important; }
.modal-header .close {
	margin-top: -11px;
}
button.close {
	background-color: #fff;
	border: none;
	border-radius: 50%;
	height: 30px;
	position: absolute;
	right: 35px;
	top: 30px;
	width: 30px;
	z-index: 9;
	border: 1px solid #d6d6d6;
}
.close {
	float: right;
	font-weight: 300;
	line-height: 0;
	opacity: 1;
	color: #000;
	font-size: 18px;
}
button.close span {
	text-align: center;
	left: -5px;
	position: relative;
}
.close:focus, .close:hover {
	color: #000;
	text-decoration: none;
	filter: alpha(opacity=50);
	opacity: 1;
}
.modal-header {
	min-height: 0px;
	padding: 0px;
	border-bottom: 0px;
}
.modal-lg {
	max-width: 592px;
}
.modal-body {
	border-radius: 0px;
	padding: 5px;
}
.modal-dialog {
	margin: 170px auto 0px;
}
.modal {
	z-index: 99999999 !important;
}
/*End of Popup section*/
.latest-img img {
    width: 100%;
}


.holder {
  position:relative;
}
.sub-wrap {
    margin-bottom:30px;
    padding:30px;
}
/* Forms from the admin form builder ([[FORM-n]], include/forms.php) */
.cms-form {
    max-width: 760px;
    margin: 0 auto 20px;
    text-align: left;
}
.cms-form-intro {
    margin-bottom: 15px;
}
.cms-form-hp {               /* spam trap: hidden from people, bots fill it in */
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.cms-form-heading h3 {
    margin: 20px 0 6px;
}
.cms-form-heading p {
    margin-bottom: 12px;
}
.cms-form-field label,
.cms-form-legend {
    font-weight: 600;
    font-size: 1rem;
}
.cms-form-req {
    color: #e6001a;
}
.cms-form-help {
    color: #666666;
}
.cms-form-error {
    color: #c00000;
    font-size: 0.9em;
    margin-top: 4px;
}
.cms-form-field.has-error .form-control,
.cms-form-field.has-error .cms-sig-pad {
    border-color: #c00000;
}
.cms-form-field.has-error .form-check-label {
    color: #c00000;
}
.cms-sig {
    position: relative;
    max-width: 600px;
}
.cms-sig-pad {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #ffffff;
    touch-action: none;      /* drawing on a phone must not scroll the page */
    cursor: crosshair;
}
.cms-sig-clear {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #f0f0f0;
    border: 1px solid #cccccc;
    color: #333333;
}
.cms-form-msg {
    margin: 10px 0;
}
.cms-form-done {
    font-size: 1.1em;
}

/* Photo galleries in page content: styles are in gallery.css (loaded by include/gallery.php) */

/* Page rows (CMS): space between rows; on phones columns stack, so space them too */
.content-row + .content-row {
    padding-top:10px;
}
/* "Page width" rows break out of their container to span the whole browser width.
   The page wrappers clip the few pixels a vertical scrollbar would otherwise push sideways. */
.content-row.content-row-full {
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding-left:15px;
    padding-right:15px;
}
/* "Full background" rows: the box (and its background) spans the browser width like above,
   but the padding brings the columns back in line with the container, so the text lines up with
   normal rows (the extra 15px matches the -15px margin of a Bootstrap .row). */
.content-row.content-row-band {
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding-left:calc(50vw - 50% - 15px);
    padding-right:calc(50vw - 50% - 15px);
}
.holder,
.main-section {
    overflow-x:hidden;
    overflow-x:clip;
}
/* Row background colour / photo: fills the whole row (edge to edge on page-width rows) */
.content-row.content-row-bg {
    padding-top:40px;
    padding-bottom:40px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
/* Column background colour / photo: inner box so the space between columns stays visible */
.content-col-bg {
    height:100%;
    padding:20px;
}
.content-col-photo {
    min-height:200px;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}
@media screen and (max-width: 575px) {
    .content-col-bg {
        height:auto;
    }
}
@media screen and (max-width: 575px) {
    .content-row > [class*="col-"] + [class*="col-"] {
        margin-top:20px;
    }
}

.callegend { 
    display:inline;
    height:10px;
    border-radius:3px;
    margin: 5px 0px 5px 10px;
}


.sub-holder img {
    max-width:100% !important;
}


/*RESPONSIVE*/
@media screen and (max-width: 2880px) {

}

@media screen and (max-width: 1920px) {

}
@media screen and (max-width: 1680px) {
	.news-section {
	    background-size: 107% 100%;
	}
	header .mainmenu ul li a {
	    font-size:17px;
	}
}

@media screen and (max-width: 1600px) {

}

@media screen and (max-width: 1440px) {
	header .mainmenu ul li a {
	    font-size:14px;
	}
}

@media screen and (max-width: 1366px) {

}

@media screen and (min-width: 1100px) and (max-width: 1280px) {

}
@media screen and (max-width: 1279px) {
 
    .parallelogram-button {
        font-size:14px;
    }
	header .mainmenu ul li a {
	    font-size: 12px;
	}
	.report-btn ul li a.now-btn {
	    font-size: 11px;
	}
	.header-contact ul li a {
	    font-size: 13px;
	}
	header .mainmenu {
	    padding: 20px 0px;
	}
	header .banner-contents h3 {
	    font-size: 30px;
	}
	.about-heading ul li a {
	    font-size: 34px;
	    padding: 10px 99px;
	}
	.about-contents {
	    padding-top: 0px;
	}
	.icon-contents img {
		width: 150px;
		margin: auto;
	}
	.icon-contents h3 {
	    font-size: 17px;
	}
	.view-conts h3 {
	    font-size: 15px;
	}
	.view-conts p {
	    font-size: 12px;
	}
	.heading h3 {
	    font-size: 24px;
	}
	.heading h3 span {
	    font-size: 24px;
	}
	.news-section {
	    background-position: 100% 100%;
	    background-size: 107% 100%;
	}
	.letter-heading p {
	    font-size: 12px;
	}

	.latest-contents ul li a {
	    font-size: 12px;
	}
	.cal-month {
	    font-size:12px;
	}
	.cal-day {
	    font-size:40px;
	}

}

@media screen and (min-width: 769px) and (max-width: 995px) {
	.parallelogram-button {
        font-size:10px;
    }
    .parallelogram-button img {
        top: 5px;
    }    
	
	.col-md-5ths {
		width: 20%;
		float: left;
	}
	.centron-heading ul li a {
	    font-size: 13px;
	}
	.icon-contents img {
	    width: 100px;
	}
	.about-contents p {
	    font-size: 14px;
	}
	.about-contents h3 {
	    font-size: 19px;
	}
	.about-heading ul li a {
	    font-size: 20px;
	    padding: 10px 79px;
	}
	header .mainmenu ul li {
	    padding: 0px 4px;
	}
	header .mainmenu ul li a {
	    font-size: 11px;
	}
	.header-contact ul li a {
	    font-size: 9px;
	}

	.header-contact {
	    padding: 5px;
	}
	.header-contact::before {
	    content: "";
	    position: absolute;
	    right: 100%;
	    border-top: 35px solid #0a7321;
	    border-right: 0px solid #0a7321;
	    border-left: 25px solid transparent;
	    top: 0px;
	    bottom: 0px;
	}
	
	.main-top-box h2 {
	    font-size:22px;
	}
	.main-top-box p {
	    font-size:15px;
	}
	.main-top-box {
	    margin:0px;
	    padding:40px 10px;
	    background-size:cover;
	}
	
	.whatwedo-box-title {
	    font-size:15px;
	}
	.whatwedo-box-text p {
	    font-size:14px;
	}
	
}

@media screen and (max-width: 767px) {
    h1 {
        font-size:36px;
    }
    header .header-bottom {
        aspect-ratio: 16 /8;
    }
    header .header-bottom-sub {
        aspect-ratio: 16 / 5;
    } 
    header .header-bottom-sub img {
        object-fit:cover;
        position:absolute;
        width:100%
        height:100%;
    }
    header .header-bottom-sub .sub-banner-text h1 {
        font-size:18px !important;
    }
    
    .parallelogram-button img {
        top: -3px;
    }   
	.latest-contents ul li a {
	    font-size: 11px;
	}
	header .header-logo {
	    text-align: center;
	}
	header .header-logo img {
		display: inline-block;
	}
	header .mainmenu .navbar {
	  margin: 0;
	  padding: 0;
	}
	.icon-bar {
		background-color: #000;
		border-radius: 1px;
		display: block;
		height: 2px;
		width: 22px;
	}
	.icon-bar + .icon-bar {
		margin-top: 4px;
	}
	button:focus {
		outline: none;
	}
	.navbar-toggler {
	  background-color: transparent;
	  background-image: none;
	  border-radius: 0;
	  padding: 9px 10px;
	}
	.navbar-dark .navbar-toggler {
	  border: medium none;
	}
	header .header-top .mainmenu ul li {
	  margin-bottom: 10px;
	}
	header .header-top .mainmenu ul li .sub-menu li {
	  margin-bottom: 0px;
	}
	.mainmenu li:last-child:hover .sub-menu {
		right: auto;
	}
	header .mainmenu {
		float: none;
		padding-top: 0px;
	}

	.header-contact::before {
		display: none;
	}
	
	
header .header-bottom .sub-banner-text h1 {
	font-size:18px;
}
 
	
	.about-heading ul li a {
	    font-size: 20px;
	    padding: 9px 49px;
	}
	.about-img {
		padding-top: 20px;
	}
	.news-section {
	    background-position: 100% 100%;
	    background-size: 107% 100%;
	    background-color: #f5f5f5;
	    background-image: none;
	}
	.news-contents {
	    padding: 20px 20px;
	    text-align: center;
	}
	.news-img img {
		width: 100%;
	}
	.view-btn a.btn {
	    text-decoration: none;
	    font-size: 11px;
	}
	.view-btn {
	    padding-bottom: 30px;
	}
	.centron-heading {
	    width: 70%;
	    top: 30px;
	}
	.footer-wrap ul li a {
	    text-decoration: none;
	    font-size: 14px;
	}
	.footer-logo {
	    width: 50%;
	    margin: 0px auto 30px;
	}
	.copyrights p {
	    font-size: 14px;
	}
	.navbar-dark .navbar-brand {
	    color: #fff;
	    width: 100px;
	}
	.latest-contents ul li a {
	    font-size: 11px;
	}
	header .banner-contents h3 {
	    font-size: 16px;
	}
	.icon-contents img {
	    width: 60px;
	}
	.icon-contents h3 {
	    font-size: 12px;
	    padding-top: 10px;
	}
	.view-btn {
		text-align: center;
	}
	.modal-dialog {
	    margin: 30px auto 0px;
	    padding: 0px;
	}
	
	.whatwedo-box-text {
	    margin:10px 20px;
	}
	
}
@media screen and (max-width: 480px) {
	.about-heading ul li a {
	    font-size: 20px;
	    padding: 9px 39px;
	}


}
@media screen and (max-width: 414px) {
	.about-heading ul li a {
	    font-size: 20px;
	    padding: 9px 28px;
	}
	.icon-contents h3 {
	    font-size: 10px;
	    padding-top: 10px;
	}
}
@media screen and (max-width: 387px) {

}
@media screen and (max-width: 375px) {
	.about-heading ul li a {
	    font-size: 16px;
	    padding: 6px 27px;
	}
}
@media screen and (max-width: 360px) {
	.about-heading ul li a {
	    font-size: 16px;
	    padding: 6px 24px;
	}
}
@media screen and (max-width: 320px) {
	.about-heading ul li a {
	    font-size: 16px;
	    padding: 6px 18px;
	}
}