@charset "utf-8"; /*Author: Dimuthu*/
@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@400;600;800&display=swap');
ol, ul { list-style: none;}
* {margin: 0; padding: 0; box-sizing: border-box}
a {text-decoration:none}
body {background:#FFF}
.logoArea {width:95%; max-width: 400px; margin: 0 auto}
.logoArea img { width:100%;}
.bannerArea img {width:100%;border-bottom: 6px solid #304297}
.row {display: flex;  flex-wrap: wrap;  margin-right: -15px;  margin-left: -15px;}
.col10, .col15, .col20, .col25, .col30, .col33, .col35, .col40, .col45, .col50, .col55, .col60, .col65, .col70, .col75, .col80, .col85, .col90, .col100 {padding-right: 15px;  padding-left: 15px;}
.col10 {flex: 0 0 10%;  max-width: 10%;}
.col15 {flex: 0 0 15%;  max-width: 15%;}
.col20 {flex: 0 0 20%;  max-width: 20%;}
.col25 {flex: 0 0 25%;  max-width: 25%;}
.col30 {flex: 0 0 30%;  max-width: 30%;}
.col33 {flex: 0 0 33.333333%;  max-width: 33.333333%;}
.col35 {flex: 0 0 35%;  max-width: 35%;}
.col40 {flex: 0 0 40%;  max-width: 40%;}
.col45 {flex: 0 0 45%;  max-width: 45%;}
.col50 {flex: 0 0 50%;  max-width: 50%;}
.col55 {flex: 0 0 55%;  max-width: 55%;}
.col60 {flex: 0 0 60%;  max-width: 60%;}
.col65 {flex: 0 0 65%;  max-width: 65%;}
.col70 {flex: 0 0 70%;  max-width: 70%;}
.col75 {flex: 0 0 75%;  max-width: 75%;}
.col80 {flex: 0 0 80%;  max-width: 80%;}
.col85 {flex: 0 0 85%;  max-width: 85%;}
.col90 {flex: 0 0 90%;  max-width: 90%;}
.col100 {flex: 0 0 100%;  max-width: 100%;}
.container { margin: 0 auto; max-width: 1080px; }
.containerSmall { margin: 0 auto; max-width: 600px;}
img {display: block}
		
		h3 {font-family: 'Abhaya Libre', serif; font-size: 42px}
p {
    font-size: 18px;
    line-height: 1.7;
	color: #333; margin-bottom: 15px
}

header {
    background: /*#162e40*/ #FFF;
    padding: 10px 0;
    position: sticky;
    width: 100%;
    -webkit-box-shadow: 1px 1px 6px rgb(0 0 0 / 10%);
    -moz-box-shadow: 1px 1px 6px rgba(0,0,0,.1);
    box-shadow: 1px 1px 6px rgb(0 0 0 / 10%);
    z-index: 15;
    top: 0;
}

.logoArea img {
    width: 336px;
}
nav.mainNavs > ul {
    text-align: right;
}
nav.mainNavs > ul > li {
    display: inline-block;
}nav.mainNavs ul li a {
    color: #162e40;
    font-weight: 600;
    display: block;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    transition: color 0.2s;
}
nav.mainNavs ul li a:hover {color: #e17126}
nav.mainNavs ul.desplegable > li > a {
    padding: 26px 15px;
    text-transform: uppercase;
}
		
.box1 { background:#304297;  margin-bottom: 20px;}
.box1 p { font-size:22px; border-top:1px solid #FFF; padding-top: 20px; margin-top: 10px; color: #FFF}

.visionMission	h3 {color: #FFF}
.content {margin:2em 0}
.staff {background:#F4F4F4; padding: 50px 0}
.staff h3 { margin-bottom:15px}
.staffBox {background:#FFF; webkit-box-shadow: 0 5px 10px rgba(0,0,0,.10); box-shadow: 0 5px 10px rgb(0 0 0 / 10%); padding: 20px; margin-bottom: 10px  }
.staffBox .title {font-size:30px; font-family: 'Abhaya Libre', serif; font-weight: 600; margin-bottom: 5px}
.name {font-size:20px; color: #4D4D4D; margin-bottom: 0}
.businesses {padding: 2em 0}
.businesses h3 {text-align: center;}
ul.servicelist { text-align: center; display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center; }
		ul.servicelist li {
    display: grid;
    padding: 15px;
    box-sizing: border-box;
    background: #304297;
    width: 20%;
    vertical-align: top;
    min-height: 170px;
    margin: 15px;
    font-weight: 600;
    font-size: 30px;
    font-family: 'Abhaya Libre', serif;
    line-height: 1.2;
    border-radius: 5px;
    transition: all 0.2s;
    webkit-box-shadow: 0 5px 10px rgba(0,0,0,.10);
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%);
    align-items: center;
    text-align: center;
    color: #fff;
}
		.businesses h3 {margin-bottom:20px}
		.imgs {background:#F4F4F4; padding: 3em 0 2em 0; }	
		.imgs img {width:100%; margin-bottom: 5px}
		.imgs p {background:rgba(0,0,0,0.78); width: 100%; color: #FFF; padding: 10px 15px; text-align: center}
		.footer {background:#304297;  padding: 3em 0 2em 0}
		.footer { text-align:center; color: #FFF}
		.imgbox {position:relative}
		.imgbox p{position:absolute; bottom:0; left: 0; margin-bottom: 0}
		
		.footerBottom {background:rgba(35,35,35,1.00); color: #D3D3D3; padding: 50px 0}
		.footerBottom p {font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"}


.memberList a i{font-size: 30px; }

.about {background:#304297; padding-bottom: 50px }
.aboutBrif h1 {font-family: 'Abhaya Libre', serif; font-size: 42px; color: #333}
.aboutBrif { padding:50px; background:#FFF;}
.aboutBrif {margin-top:-150px; -webkit-box-shadow: 0px 0px 32px 2px rgba(0,0,0,0.34);
-moz-box-shadow: 0px 0px 32px 2px rgba(0,0,0,0.34);
box-shadow: 0px 0px 32px 2px rgba(0,0,0,0.34); border-radius: 5px; margin-bottom: 70px}

a.moreBut {
	border-radius: 5px;
    display: inline-block;
    transition: all 0.2s;
	color: #e17126; font-weight: 600
}
.footerBottom p {color:#EBEBEB; margin-bottom: 0}
.footer p {Color:#FFF; margin-bottom: 0}

.contactForm input[type=text], select, textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 17px 20px;
    border: 1px solid #DDDDDD;
    font-size: 16px;
    outline: none;
    border-radius: 3px;
    background: #FAFAFA;
    color: #787878;
}

.lableDiv {
    position: relative;
    margin-bottom: 20px;
}
.lableDiv label { font-size: 14px; margin-bottom: 5px; display: block}
.contactForm button {
    width: 100%;
    box-sizing: border-box;
    background: #304297;
    color: #FFF;
    border: 0;
    outline: 0;
    padding: 17px;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 16px;
}

.contactusSb {
    background: #304297;
    padding: 40px 20px 20px 20px;
}.contactDetail {
    
    padding-left: 10px;
}.contactDetail li {
    margin-bottom: 20px;
    line-height: 1.4;
    color: #fff;
	font-family: Arial;
}

.contactNumbers {margin-top:50px}
.contactNumberBox {background:#FFF; webkit-box-shadow: 0 5px 10px rgba(0,0,0,.10);
    box-shadow: 0 5px 10px rgb(0 0 0 / 10%); padding: 15px; text-align: center; margin-bottom: 30px;border: 1px solid #CBCBCB; border-radius: 3px}
.contactNumberBox p {margin: 0; font-family: Arial}

.hamb {display: none; padding:2px 15px; float: right; margin: 5px 0 0 0; position: absolute; right: 2vw;  top: 25px;}
.bar1, .bar2, .bar3 {width: 25px; height: 2px; border-radius: 3px; background-color: #e17126; margin: 6px 0; transition: 0.4s;}
.change .bar1 { -webkit-transform: rotate(-45deg) translate(-8px, 6px); transform: rotate(-45deg) translate(-8px, 6px);}
.change .bar2 {opacity: 0;}
.change .bar3 {-webkit-transform: rotate(45deg) translate(-5px, -4px); transform: rotate(45deg) translate(-5px, -4px);}	

@media only screen and (max-width: 1112px){
	.container{width:90%; }
	.col25 {flex: 0 0 50%;  max-width: 50%;}
	nav.mainNavs { display: none; width: 100%; margin-top: 15px;}
	.constitution2 ol li {margin-left: 24px}
	.hamb { display: block;}
	header .col70, header .col30 {flex: 0 0 100%;  max-width: 100%;}
}

@media only screen and (max-width: 767px){
.col30.logoArea { width: 80%;}
.logoArea img { width: 260px;}

	.memberList h3 {font-size:35px}
	.aboutBrif {margin-top:0; padding: 20px; margin-bottom:40px}
	.aboutBrif h1, .visionMission h3, .staff h3, .constitution h3, .businesses h3 {font-size:34px}
	.box1 p {font-size:18px}
	.about, .staff {padding: 20px 0}
	.name {font-size:16px;} 
	.title {font-size:26px}
	.staff .col50, .col70.contactForm, .col30.contactForm {flex: 0 0 100%;  max-width: 100%;}
	.col30.contactForm {margin-top:50px}
	ul.servicelist li {width:45%}
	.hamb {top: 16px;}
	nav.mainNavs > ul > li {width:100%; border-top:1px solid #DADADA}
	nav.mainNavs > ul {text-align:left}
	
	
	 
}

		
		@media screen and (max-width : 480px) {
			.containerSmall, .container{width:90%; }
			.col50, .col25, .col40, .col60, .col70, .col30 {flex: 0 0 100%;  max-width: 100%;}
			.footerBottom .col25 { margin-bottom:20px; text-align: center}
			ul.servicelist li {width:100%; min-height:0}
			
			
		}


		.memberList {background:#304297; width:100%; padding:20px 0; color:#FFF;}
		.alignC {text-align:center;}
		.memberList a {color:#fff; }
		.memberList a:hover {border:1px solid #FFF; padding:10px 20px;}
		
		.constitution {background: #EF820B;  width: 100%;   padding: 40px 0;  color: #FFF;}
		.constitution a {color:#FFF; text-decoration:none;}
		.constitution a:hover {text-decoration:underline;}
		
		.constitution2 {background: #FFF;  width: 100%;   padding: 50px 0;  color: #333;}
    	.constitution2 ol li {font-family: 'Abhaya Libre', serif; font-size: 32px; font-weight:700;}
    	ol li {list-style: decimal;}
    	ol > ol > li {font-weight:400 !important;font-size:18px !important; list-style-type: upper-roman !important; font-family:unset !important; margin-bottom:15px;}
        ol > ol{padding:15px 0 15px 15px;}