/* Kudos Utopia - Lahiru Fernando */
/* Home-Ena - KU Web Shop */
* {
font-family: pnl, sans-serif;
}

.title {	
width: 100%;
padding: 1em 0em;	
color: #7b5eb2;
}
.title h1 {
font-size: 3em;
letter-spacing: 0.05em;
padding: 0.15em 0;
text-align: center;
}
@media all and (max-width: 1025px) and (min-width: 801px) {
.title h1 {
}
}

#logo-top {
height: 3.75em;
margin: 0 auto;
display: block;
}

@media all and (max-width: 800px) and (min-width: 100px) {
.title h1 {
margin-top: 0.3em;
line-height: 1.1;
text-indent: 0em;
text-align: center;
}
#logo-top {
display: block;
float: none;	
margin: 0 auto;
height: 3.0em;
padding-top: 0em;
padding-left: 0em;
}
}
.top-nav {
width: 100%;
font-size: 1.2em;
background-color: #8364bc;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8364bc+0,8989ba+100 */
background: rgb(131,100,188); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(131,100,188,1) 0%, rgba(137,137,186,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(131,100,188,1) 0%,rgba(137,137,186,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(131,100,188,1) 0%,rgba(137,137,186,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8364bc', endColorstr='#8989ba',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color: white;
margin-bottom: 1.5em;
}
.nav-ul li {
width: 16.65%;
font-size: 1em;
float: left;
font-family: pnl;
text-align: center;
padding: 0.7em 0;
transition: all ease 1s;
}
@media all and (max-width: 1199px) and (min-width: 901px) {
.nav-ul li {
font-size: 97%;
}
}
@media all and (max-width: 900px) and (min-width: 601px) {
.nav-ul li {
width: 33.32%;
font-size: 97%;
}
}
@media all and (max-width: 600px) and (min-width: 100px) {
.nav-ul li {
width: 49.95%;
font-size: 100%;
}
}
.nav-ul li:hover {
background-color: white;
color: #8364bc;
}
.main-img {
position: relative;
margin-bottom: 1.5em;
}
.float-text {
display: inline;	
position: absolute;
top: 10%;
left: 7%;
background-color: black;
opacity: 0.65;
font-size: 4.5em;
padding: 0.2em 0.7em;
color: white;
font-family: grdb, pnl;
border-radius: 30px; 
}
.float-text-b {
display: inline;	
position: absolute;
top: 50%;
left: 30%;
background-color: white;
opacity: 0.7;
font-size: 5em;
padding: 0.25em 1em;
color: black;
font-family: pcf;
border-radius: 30px; 
}
.main-img img {
width: 100%;
display: block;
}

.mid-div {
width: 100%;
clear: both;
margin-top: 1em;
padding-top: 1em;
background-repeat: no-repeat;
background-size: cover;
}
.mid-div-inner  {
width: 93%;
margin: 0 auto;
}
.company-mid-title {
font-size: 2.55em;
margin:  0 auto;
padding: 0.3em 0em;
text-align: center;
color: #8364bc;
margin-bottom: 0.5em;
margin-top: 0.1em;
background-color: white;
width: 70%;
box-shadow: 0px 3px 5px #8364bc;
border: 1px solid #8364bc;
}
.subtitle {
font-size: 2em;
margin:  0 auto;
color: #3f3f3f;
text-align: center;
margin-bottom: 1em;
padding: 0.35em 0em;
background-color: white;
width: 59%;
box-shadow: 0px 3px 5px #8364bc;
border: 1px solid #8364bc;
}
.side-menu {
animation: slideLeftRetourn 2s;
 -webkit-animation: slideLeftRetourn 2s;
width: 30%;
float: left;
font-size: 1.2em;
}
.side-menu-image {
width: 70%;
display: block;
margin: 0 auto;
margin-top: 1.5em;
margin-right: 20%; 
clear: both;
}
.ces-tab {
padding: 0.84em 0.84em;
padding-left: 1.2em;
margin: 0.45em 0em;
font-family: grdb;
transition: 1.5s ease all;
width: 80%;
}
.ces-tab:hover {
border: 1px solid #8364bc;
box-shadow: 0px 2px 5px #8364bc;
}
.purple {
background-color: white;
opacity: 0.84;
color: black; 
font-family: pnl, sans-serif;
transition: 1s ease all;
border: 1px solid #8364bc;
}
.current-tab {
background-color: #8364bc;
color: white;
opacity: 1;
}


.ces-text-div {
width: 65%;
float: right;
padding: 0.5em 1.5%;
font-size: 1.20em;
font-family: pnl;
line-height: 1.5;
text-align: justify;
background-color: white;
}
.ces-text-div:hover {

}
.ces-text-div h1 {
font-size: 1.45em;
background-color: #8364bc;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8364bc+0,8989ba+100 */
background: rgb(131,100,188); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(131,100,188,1) 0%, rgba(137,137,186,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(131,100,188,1) 0%,rgba(137,137,186,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(131,100,188,1) 0%,rgba(137,137,186,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8364bc', endColorstr='#8989ba',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color: white;
margin-bottom: 0.84em;
padding-left: 0.35em;
}
@media all and (max-width: 1199px) and (min-width: 100px) {
.ces-text-div h1 {
font-size: 1.35em;
}
}

.ces-text-div h2 {
font-size: 1.27em;
margin:  0 auto;
padding: 0.15em 0em;
font-family: grdb;
font-weight: bold;
color: #8364bc;
margin-bottom: 0.35em;
margin-top: 0.1em;
background-color: white;
width: 100%;
box-shadow: 0px 4px 8px #8364bc;
text-indent: 0.35em;
margin-bottom: 1em;
margin-top: 1.4em;
}
.ces-text-div em {
background-color: #8364bc;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8364bc+0,7979b5+100 */
background: rgb(131,100,188); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(131,100,188,1) 0%, rgba(121,121,181,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(131,100,188,1) 0%,rgba(121,121,181,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(131,100,188,1) 0%,rgba(121,121,181,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8364bc', endColorstr='#7979b5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

color: white;
padding: 4px 10px;
border-radius: 10px;
}
.ces-text-div p {
margin-bottom: 0.75em;	
}
.text-paragraphs {
padding: 0em 1.2em;	
}
.ces-text-image {
width: 68%;
display: block;
margin: 0 auto;	
animation: slideInDown 3s;
 -webkit-animation: slideInDown 3s;
}
.values-list {
line-height: 2;	
}

.side-menu .current {

} 
.services-list {
margin-top: 1.25em;  
}
.services-list li {
text-align: left;
font-family: pnl;
margin-left: 1em;
list-style-type: disc;
color: #8364bc;
line-height: 1.7;
font-size: 100%;
transition: 1s ease all;
}
.services-list li:hover {
font-size: 135%;
padding: 0.15em 0em;
background-color: #fde855;
}
.services-left-box {
width: 51%;
float: left;
}
.services-right-box {
width: 46%;
float: right;
}
#services-image {
margin: 0 auto;
border: 7px solid #8364bc;
width: 95%;
margin-left: 3%;
}

#gallery-image {
width: 100%;	
}
.gallery-div img {
float: left;
width: 49%;
margin: 0.5%;
transition: 0.5s ease-in all;
}
.gallery-div img:hover {
filter: brightness(120%);
-webkit-filter: brightness(120%);
-moz-filter: brightness(120%);
}


.contact-box {
text-align: center;
margin: 0 auto;
margin-bottom: 0.9em;
line-height: 1.4;
}
.contact-box img {
height: 2.7em;
}
.map-image {
display: block;
margin: 0 auto;
width: 70%;
box-shadow: 0px 2px 8px 1px gray;
}

.client-box-capsa {
clear: both;
margin-bottom: 1em;
}
.client-box {
border: 1px solid #8364bc;
box-shadow: 0px 4px 8px #8364bc;
font-size: 1.15em;
font-weight: bold;
float: left;
width: 25%;
margin: 3%;
padding: 1%;
text-align: center;
margin-bottom: 2em;
}
.client-box img {
display: block;
margin: 0 auto;
height: 4em;
}


.staff-box-capsa {
width: 95%;
font-size: 100%;
margin: 0 auto;	
margin-bottom: 1.5em;
box-shadow: 0px 6px 9px silver;
border: 1px solid silver;
padding: 2%;
}
.staff-name {
width: 100%;
display: block;
padding: 1em 0em;
font-weight: bold;
font-family: grdb, pnl;
font-size: 115%;
line-height: 1.7;
margin-bottom: 0.5em;
}
.staff-photo {
width: 32%;
float: left;	
}
.staff-photo img {
width: 70%;
border: 1px solid silver;
box-shadow: 0px 6px 9px silver;
}
.staff-info {
width: 64%;
float: right;
padding-left: 3%;
border-left: 3px solid grey;
}
.staff-div .staff-info {
width: 84%;
float: left;	
border-left: 0px solid grey;
padding-left: 0%;
}
.archt .staff-box-capsa {
width: 50%;
text-align: center;	
}
.archt .staff-info {
padding-left: 2em;	
}

.management-image {
width: 90%;
display: block;
margin: 0 auto;	
}


.projects-list li {
line-height: 1.8;
list-style-type: disc;
margin-left: 1em;
font-weight: bold;
}
.projects-list span {
color: grey;
font-weight: normal;
margin-left: 0.35em;
}

.purple:hover {
background-color: #8364bc;
color: white;
}


.footer-div {
margin-top: 1.5em;
width: 100%;
}
.footer-div img {
width: 100%;
margin: 0em;
padding: 0em;
float: right;
}
.footer-btm {
width: 100%;
background-color: #04a1d6;
background: linear-gradient(rgba(147, 112, 219, 0.9), rgba(112, 75, 145, 0.84)), url('../images/bkgd-1.jpg');
clear: both;
padding-top: 6em;
padding-bottom: 5em;
line-height: 1.35;
}
.footer-text {
margin: 2em;
text-align: center;
background-color: #505050;
color: white;
padding: 2em 0.5em;	
width: 30%;
margin: 0 auto;
}
.footer-text em {
	border-bottom: 1px solid white;
	padding-bottom: 0.5em;
}
@media all and (max-width: 1280px) and (min-width: 721px) {
.footer-text {
width: 42%;
}
}
@media all and (max-width: 720px) and (min-width: 49px) {
.footer-text {
width: 60%;
}
}


.small-text {
font-size: 90%;
}

@media all and (max-width: 3000px) and (min-width: 1600px) {
.side-menu {
}
.ces-text-div{
	
}
.company-mid-title {
width: 50%;
}
.subtitle {
width: 40%;
}
}

@media all and (max-width: 1400px) and (min-width: 1025px) {
.side-menu {
font-size: 1.27em;	
}
.ces-text-div{
font-size: 1.15em;		
}
.company-mid-title {
font-size: 2.3em;
width: 73%;
}
.subtitle {
font-size: 1.7em;
width: 60%;
}
.client-box img {
height: 3em;
}
.client-box {
font-size: 1em;
}
.staff-box-capsa {
font-size: 91%;
}
}

@media all and (max-width: 1200px) and (min-width: 1025px) {

.ces-text-div{
font-size: 1.08em;		
}
.company-mid-title {
font-size: 2.25em;
width: 75%;
}
.subtitle {
font-size: 1.5em;
width: 68%;
}
.client-box {
width: 41%;
margin: 3%;
padding: 1%;
text-align: center;
margin-bottom: 2em;
font-size: 1em;
}
.client-box img {
height: 3.2em;
}
.staff-box-capsa {
font-size: 93%;
}
}

@media all and (max-width: 1024px) and (min-width: 841px) {
.side-menu {
font-size: 1.27em;	
}
.ces-text-div{
font-size: 1.2em;		
}
.company-mid-title {
font-size: 2.1em;
width: 80%;
}
.subtitle {
font-size: 1.35em;
width: 70%;
}
.client-box {
width: 41%;
margin: 3%;
padding: 1%;
text-align: center;
margin-bottom: 2em;
font-size: 1em;
}
.client-box img {
height: 3em;
}
.staff-box-capsa {
font-size: 90%;
}
}

@media all and (max-width: 840px) and (min-width: 721px) {
.side-menu {
font-size: 1.05em;	
}
.ces-text-div{
font-size: 1.2em;		
}
.company-mid-title {
font-size: 1.9em;
width: 90%;
}
.subtitle {
font-size: 1.32em;
width: 77%;
}
.client-box {
width: 41%;
margin: 3%;
padding: 1%;
text-align: center;
margin-bottom: 2em;
font-size: 1em;
}
.client-box img {
height: 3em;
}
.staff-box-capsa {
font-size: 80%;
}
.staff-photo {
width: 30%;
}
}

@media all and (max-width: 720px) and (min-width: 540px) {
.side-menu {
font-size: 1em;	
}
.ces-text-div{
font-size: 1.1em;		
}
.company-mid-title {
font-size: 1.8em;
width: 90%;
}
.subtitle {
font-size: 1.25em;
width: 80%;
}
.client-box {
width: 93%;
margin: 2%;
padding: 1%;
text-align: center;
margin-bottom: 1.35em;
}
.client-box img {
height: 3.2em;
}
.staff-box-capsa {
font-size: 80%;
}
.staff-photo {
width: 30%;
}
}

@media all and (max-width: 540px) and (min-width: 300px) {
.side-menu {
font-size: 90%;
border-right: 0px solid #8364bc;
}
.ces-text-div{
font-size: 1em;		
}
.company-mid-title {
font-size: 1.7em;
width: 90%;
}
.subtitle {
font-size: 1.2em;
width: 80%;
}
.client-box {
width: 93%;
margin: 2%;
padding: 1%;
text-align: center;
margin-bottom: 1.35em;
}
.client-box img {
height: 3.2em;
}
.staff-box-capsa {
font-size: 86%;
}
.staff-photo {
width: 30%;
}
}

@media all and (max-width: 300px) and (min-width: 100px) {
.side-menu {
font-size: 90%;
border-right: 0px solid #8364bc;
}
.ces-text-div{
font-size: 1em;		
}
.company-mid-title {
font-size: 1.5em;
}
.subtitle {
font-size: 1.1em;
}
.client-box {
width: 93%;
margin: 2%;
padding: 1%;
text-align: center;
margin-bottom: 1.35em;
}
.client-box img {
height: 3.2em;
}
}

.image-credit-div {
	font-size: 0.2em;
	display: none;
}


@media all and (max-width: 1199px) and (min-width: 100px) {
.services-left-box {
font-size: 90%;
}
.services-right-box {
font-size: 90%;
}
.map-image {
width: 90%;
}
}


@media all and (max-width: 640px) and (min-width: 100px) {
.side-menu {
	margin: 0 auto;
	float: none;
	width: 70%;
}
.ces-text-div {
	margin: 0 auto;
	margin-top: 1.5em;
	float: none;
	width: 93%;
	text-align: left;
}
}



.staff-info .job {
background-color: none;
color: white;
display: block;
border-radius: 1.25em;
font-family: fs;
font-size: 1.5em;
}



body::-webkit-scrollbar {
    width: 1em;
}
 
body::scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
  background-color: #9077a5;
}