@import url("normalize.css");
@import url("fonts/quicksand.css");
@import 'https://fonts.googleapis.com/css?family=Prompt:100,100i,200,200i,300,400';

/*start---settings for header bar/banner*/
/*Chocolate Labradorby LJK
Ocean Five
*/

.ui-mobile .ui-page-active{display:block;overflow:visible;}

[data-role="page"]{
	height: 100% !important;

}


.navibar{display: none;} 

body{
	background-color: rgb(255,255,255) !important;
/*	height: 100%;*//*checking to see if wow js works correctly after truning this off*/
}

.logo-mobile{
padding: .3em 0 1em 0;
text-align:left;
width: 115px;
height: 20px;
}

body,html{
	font-size: 18px;
	min-width: 1200px;
}

img{
	width:100%;
	height: auto;
	vertical-align: middle;

}

#pagethemeimage{
position: relative;
margin:0;
padding:0;

}

.ui-bar+#pagethemeimage{
	margin:0;
	padding:0em .5em;
}

.ui-content>#pagethemeimage{
	margin:0;
	padding:0;
}



.sectionImage{
position: relative;
margin:0;
padding:0;
padding-top: 2em;
}


.sectionImage h2{

	position: absolute;
	top:50%;
/*	float: left;*/
	font-size:36px; 
	left:.5em;
	font-family: 'Prompt', sans-serif;
	font-weight: 200;

}

.sectionimage-heading-color-1{
	color: rgb(255,255,255);
/*	margin-top: 5em;*/
}
.sectionimage-heading-color-2{
	color: rgb(51,51,51);
/*	margin-top: 5em;*/
}



.ui-bar{text-align:center; padding:0; color:rgb(255,255,255); font-family: 'Prompt', sans-serif;font-weight: 100;
font-size:40px;

position: absolute;
width: 100%;
bottom: 0;
padding: .4em 0em;
background-color: rgba(88,53,26,.3);
-webkit-animation:slidedown 3s;
animation:slidedown 3s;
}

h2.ui-bar{ 
/*denotes a h2 tag with class of ui-bar*/
margin-top: 0;
margin-bottom: 0;
top:inherit;
left:auto;
}


@keyframes slidedown{
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0%); }
}
@-webkit-keyframes slidedown{
    0% { transform: translateY(-100%); }
    100% { transform: translateY(0%); }
}


.fixed-menu-top{
	position: fixed;
	display: block;
	width: 100%;
	margin-left: 0px;
	top: 43px;
	z-index: 1;
	border-bottom: .5px solid rgb(255,255,255);
	}

.fixed-menu-top-loc-start{
	top: 43px;
	background-color: transparent;

}

.fixed-menu-top-loc-start h2 a{
	color: rgb(255,255,255) !important;
	font-size: 26px;
	font-family: quicksandlight;
	padding: .1em .5em;
}

.fixed-menu-top-loc-start li a{
	color: rgb(255,255,255);
	font-size: 16px;
	font-family: quicksandregular;
	left:1em;
	width:70%;

}

.fixed-menu-top-loc-end{
	top: 0px;
	background-color: rgba(255,255,255,.9);

}

.fixed-menu-top-loc-end h2 a{
	color: rgb(51,51,51) !important;
	font-size: 24px;
	font-family: quicksandlight;
	padding: .1em .5em;
}

.fixed-menu-top-loc-end li a{
	color: rgb(51,51,51);
	font-size: 16px;
	font-family: quicksandregular;
	left:1em;	
	width:70%;
}

.fixed-menu-top .ui-listview>li>a.ui-btn{
	border-width: 0;

}

#single-page-menu .fixed-menu-top-click-color{
	background-color: rgb(255,255,255) !important ;
	color: rgb(51,51,51) !important;
/*	font-size: 26px;
	font-family: quicksandlight;
	padding: .1em .5em;*/
}



h1{text-align:center; padding:0;font-family: 'Prompt', sans-serif;font-weight: 100;
font-size:40px;
color:rgb(255,255,255);
position: absolute;
width: 100%;
top: 142px;
padding: .4em;
background-color: rgba(88,53,26,.3);
-webkit-animation:slidedown 3s;
animation:slidedown 3s;
 }




.ui-page-theme-a { /*controls the color/image/text color of body and background of page*/
text-shadow:none;
font-family:quicksandregular;
background-color:rgb(255,255,255);*/
font-size: 18px;
color: rgb(51,51,51);
text-align:left;
line-height:1.4;

}

.ui-page-theme-a a{
	font-family: 'Prompt', sans-serif;font-weight: 300;
	color: rgb(118,113,113);



}


span[class="firstLine"]:nth-of-type(odd){
	font-size:26px;
	font-weight:300;
	text-align: center;
	padding: 3em .5em;
	background-color:rgb(241,238,217);
	display: block;
	color:rgb(88,53,26);
}

span[class="firstLine"]:nth-of-type(even){
	font-size:26px;
	font-weight:300;
	text-align: center;
	padding: 3em .5em;
	background-color:rgb(242,233,225);
	display: block;
	color:rgb(106,74,60);
}

p{
	letter-spacing: -1px;
}

/*add bottom borders on all Menu Buttons. 
Controls the individual list items in the navigation*/
.ui-page-theme-a .ui-panel .ui-btn { 
background-color:transparent; color:rgb(221,221,221); 
line-height:1.4; 
font-family: 'Prompt', sans-serif;font-weight: 100; 
font-size: 18px;
border-width:0 0 .25px 0;
border-color:rgb(100,100,100);
text-shadow:none;

}

#menuButton{

	color: rgb(200,200,200);
	padding:0;
	text-transform: uppercase;
	font-weight: 300;
	
}

.ui-btn {font-family: 'Prompt', sans-serif;font-weight: 100; text-align: left;} /*makes the nav panel font to Montserrat. 
Also impacts the collapsible headings*/

.blackTransparency{background-color:rgb(255,255,255); padding:1em 1.25em; margin:0;}



/*h2+.blackTransparency{
background-color:#ffffff; padding:0 .5em; margin:0;
}*/

h1+.blackTransparency{
padding:0 .5em; margin:0;
}

#footer-social{
	padding: .5em;
	margin:0;
	float : left;
}
#footer-social li{
	display: inline;
	padding: 2px;
	vertical-align: bottom;
	margin-top: 2%;
}

#footer-social li img{
	width: 21px;
	height: 21px;
	
}

.copyright{
	display: block;
	margin-top: 2%;
	margin-right: .5em;
	float: right;
	vertical-align: bottom;
}



[data-role="footer"]{
	
	background-color: rgb(255,255,255) !important;
	color: rgb(200,200,200) !important;
	padding-bottom: 0;
	margin-bottom: 0;
	font-size: 12px !important;
	font-family: quicksandregular !important;
	height: 7%;
	border-top: 1px solid rgb(241,238,217)!important;
	border-bottom: none;
}

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



/*Adjust vertical placements and content for the + and X icons*/
.ui-icon-plus-black:after {
	content: attr(data-content) "+";
	font-size:100%;
	top:50%;
	margin-top:-15px;

}

.ui-icon-minus-black:after{
	content:"x";
	font-size:80%;
	top:50%;
	margin-top:-14px;

}



/*below code to make clicking work on the panel full width*/
.ui-panel-dismiss{
	display: none;
}
.ui-header{padding:0 .5em 0 .5em; font-size:18px} /*left and right padding of header container*/
.ui-header .ui-btn-right{ top: .7em; right:.5em;}/*adjust vertical placement of Menu button for navigation*/
.ui-header .ui-btn{padding:.5em .5em;}
.ui-header .ui-btn-right:hover{background-color:transparent;}
.ui-header .ui-btn:focus{box-shadow:0 0 0 0; -webkit-box-shadow:0 0 0 0; }
.ui-header .ui-btn.ui-btn-active {border:0; background-color:transparent;}

/*end---settings for header bar/banner*/



/*ul li{font-family: montserratbold; /*make the li items in navigation panel as montserrat*/
/*text-transform:uppercase; 
}*/

.ui-content{padding:0; clear: both;} /*adds only left/right padding completely from main body*/
.ui-page{padding-bottom:0;}

.ui-panel{
width:100%;
position:absolute;
top:2.4em;
font-size:18px;
z-index: 100;
}


.ui-panel-inner{
padding: 0 2em; margin-top:1em;

} /*shift the nav panel down so that it does not hide the logo bar*/



.ui-collapsible-themed-content .ui-collapsible-content{
	border-bottom-width:0; padding:.5em 0 0 0; 
font-size:18px;
line-height:1.4;
} /*..Remove repeating bottom border and control font size of sub menus in nav panel*/

.ui-collapsible-heading{background-color:transparent;}

.ui-listview .ui-btn{border-width:0;}



.ui-collapsible-content ul{padding:0 0 0 1.5em;} /*left indent on navigation sub menus*/
.ui-collapsible-content>.ui-listview li{border-bottom-width:0;}
.ui-panel-inner .ui-listview {margin:0;} /*; background-color:transparent; IMP */

/*.ui-page-theme-a .ui-body-inherit {background-color:rgb(255,255,255); }*/


.ui-page-theme-a  .ui-header {background-color:rgb(51,51,51);} /*change header color to black*/

* {text-shadow:none !important;} /*remove text shadows*/




.ui-page-theme-a  .ui-btn{
background-color:transparent;
border:0;
/*hover:transparent;*/
text-shadow:0;
} /*change button color of header menu button Had to make this important else it conflicts with the */


.ui-page-theme-a .ui-btn:active{background-color:transparent ;}
.ui-page-theme-a .ui-btn:focus{background-color:transparent ;}
.ui-page-theme-a .ui-btn:hover{background-color:transparent ;}

/*change the active button color of the single page top menu items to make them same as non-active colors*/
/*.ui-page-theme-a .ui-btn.ui-btn-active{

	background-color: rgb(255,255,255);
	color: #333;
}*/


#mypanel{/*Control Color of Navigation panel background*/
	background-color:rgb(51,51,51);
	}



/*enable orange color flash on navigation panel menu items*/
.ui-page-theme-a .ui-panel .ui-btn:active{background-color:rgb(241,89,42);color:rgb(255,255,255);border:0;text-shadow:none;box-shadow:none;}
.ui-page-theme-a .ui-panel .ui-btn.ui-btn-active{text-shadow:none;box-shadow:none;}
/*enable orange color flash on navigation panel menu items*/

.ui-page-theme-a .ui-panel .ui-collapsible-content .ui-btn {
border-width:0;
} /*Remove bottom borders below submenu items*/




.ui-header {font-size: 18px;border:0;}


.ui-mini{ /*control font size of navigation menu items*/
font-size:20px;}
.ui-mini .ui-btn{ /*control font size of navigation menu items*/
font-size:16px;}

.ui-listview>.ui-li-static{
    border-width:0 0 1px 0;
	border-color:rgb(221,221,221);
	margin:0px;
	padding:0;
}
.ui-listview{
    border-width:0;

}


h1{padding:0;}

.ui-listview>li h1, 
.ui-listview>li h2, 
.ui-listview>li h3,
 .ui-listview>li h4,
 .ui-listview>li h5,
 .ui-listview>li h6{
 margin:0;
 }
 
/*increase size of first letter of each word*/
.bigLetter{
font-size:1em;
}


/*remove blue shadow from collapsibles headings*/
.ui-btn:focus {
 -moz-box-shadow: none !important;
 -webkit-box-shadow: none !important;
 box-shadow: none !important;
 
}


table td{
	font-size: 16px;
}

.sectionHeading{display: none;}
.col-1>.firstLine{display: none;}

span.fa{opacity:.4;} /*make the color ligher for the train and bus icons on the location page*/

/*
----------------------------------------------------------------Desktop---------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 769px) and (max-width: 1360px) { 


	body{text-align: center;
			padding: 1em;
			background-color: black;
		}

/*.wow {
   visibility: hidden;
}*/

/*	body:after{content: url("images/underconstruction_m.jpg")}*/

img{width: auto;height: auto;}



*{box-sizing: border-box;
font-family: quicksandregular;
text-shadow: none;}

.sectionHeading{display: block;}
.section{

  width: 100%;
/*  height: 100vh;*/
  min-width: 800px;
  position: relative;
  margin:0 auto;

}

#vision.section, #difference.section{

height: 100vh;

}




#home.section img,
#vision.section img,
.sectionImage>img,
#work.section img,
#contactus.section img{display: none;} 

#home{

background: url(images/home_d.jpg) no-repeat center center; 
-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


#vision{

background: url(images/vision_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}


.table {
 display: table; 
  margin:0 auto; 
/*  width: 80%;*/
}



.tr       { display: table-row; text-align:center;}
.thead    { display: table-header-group;}
.tbody    { display: table-row-group;}
.tfoot    { display: table-footer-group; }
.col      { display: table-column; }
.colgroup { display: table-column-group; }
.td, .th   { 
	display: table-cell; 

  background-color: rgb(0,168,198);


}

.caption  { display: table-caption; }


.text{background-color: rgb(0,168,198); width: 50%; padding: 4em;}

#mission .image{
	background: url(images/mission_d.jpg) no-repeat center center; 
	-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#transparency .image{
	background: url(images/transparency_d.jpg) no-repeat center center; 
	-webkit-background-size: contain;
 -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

#timeliness .image{
	background: url(images/timeliness_d.jpg) no-repeat center center; 
	-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#safety .image{
	background: url(images/safety_d.jpg) no-repeat center center; 
	-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



#difference{

background: url(images/difference_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#sun .image{

background: url(images/sun_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}


#air .image{

background: url(images/air_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#hygiene .image{

background: url(images/hygiene_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#prayer .image{

background: url(images/prayer_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#technology .image{

background: url(images/technology_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#storage .image{

background: url(images/storage_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#insideout .image{

background: url(images/insideout_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#customise .image{

background: url(images/customise_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}
#green .image{

background: url(images/green_d.jpg) no-repeat center center; 

-webkit-background-size: contain;
 -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  


}

#solar .image{

background: url(images/solar_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#zeroground .image{

background: url(images/solar_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}


#propmgmt .image{

background: url(images/propmgmt_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#work {

background: url(images/work_d.jpg) no-repeat center center; 
-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#contactus{

background: url(images/contactus_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}


.ui-bar {display: block;}

.ui-header{padding:.5em;} /*left and right padding of header container*/
.ui-header .ui-btn-right{ display: none;}/*adjust vertical placement of Menu button for navigation*/
.ui-header .ui-btn{display: none;}






[data-role="header"]{

	display: -webkit-flex;
   display: flex;
   	justify-content: space-between;
	align-items: center;



}

.logo-desktop{

min-width: 200px;
width: 200px;
height: 35px;
z-index: 100;
}

.logo-mobile{
	display: none;
}

ul.navibar{
	list-style-type: none;
	   display: -webkit-flex;
   display: flex;
	width: 1200px;
	justify-content: space-between;

	flex-wrap: nowrap;
	margin : 0 auto;
	min-width: 1000px;

}

 ul.navibar li a {
    
    color: white;
    text-align: right;
    vertical-align: middle;
    text-decoration: none;
        font-size:14px;
    text-transform: uppercase; 
    letter-spacing: 1.5px;

}



 ul.navibar li a:visited{color:white;}
 ul.navibar li a:active {color:white;}
 ul.navibar li a:focus {color:rgb(204,51,0);}
 ul.navibar li a:hover {color:rgb(204,51,0);}

#single-page-menu{
	display: none;

}

/*#pagethemeimage>img{display: none;}*/

.ui-content{

padding:0;

}


.horz-text{
-webkit-box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
background-color: #453c2b;
width: 100%;
position: absolute;
bottom: 0px;

}


.vert-text-left{
-webkit-box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
background-color: rgb(0,168,198);
position: absolute;
left: 0px;
height: 100vh;

}


.vert-text-right{
-webkit-box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
background-color: rgb(240,120,24);
position: absolute;
right: 0px;
height: 100vh;

}

#safety .text,#air .text, #insideout .text,#green .text{
	background-color: rgb(27,103,107); /*greenish blue*/
}

#timeliness .text,#sun .text, #technology .text{
	background-color: rgb(205,179,128); /*golden*/

}

#transparency .text,#prayer .text,#propmgmt .text{
	background-color: rgb(240,120,24); /*orange*/

}


#customise .text, #hygiene .text{
	background-color: #453c2b; /*dark brown*/

}


#green .text{padding-top:5em;padding-bottom: 5em;}


#timeliness .firstLine
{color:rgb(27,103,107);}


.table-horz{

	display: table;
	margin: 0 auto;
	width:1200px;
	clear: both;
	height: 300px;

}


#home .horz-text{

background-color: rgba(0,0,0,.2);
	height: 100vh;
}

#home .table-horz{


	height: 100vh;
}

.table-vert{
	display: table;
	margin: 0 auto;
	width:600px;

}

.t-row{

	display: table-row;
	width:1200px;
	min-width: 800px;

	text-align: center;
/*	margin-top:0;
	margin-bottom: 65px;*/
	margin: auto 0;

}

.t-col{
	position: absolute;
	display: table-column;
	width:600px;
	min-width: 500px;
	text-align: center;
	padding: 0 3em;

}

#contactus .t-col{

padding: 0 10em;

}



.col-1{
	display: table-cell;
	text-align: center;
/*		margin: 0 auto;*/
		vertical-align: middle;
		width: 40%;

}

.col-2{
	display: table-cell;
	text-align: center;
/*		margin: 0 auto;*/
		vertical-align: middle;
width: auto;
height: 100vh; /*using height of 100vh with vertical align middle, makes it fully middle aligned in a column*/
}

.col-2+.col-2{width: 40%;
vertical-align: top;
} /*this is to change the column alignment and width where two columns are used. */

.firstLine{
    /*position: absolute;*/
    background-color: transparent;
    display: table-cell;
        color: white;
        vertical-align: middle;

     /*width: 30%;  */ 
    /*width: 1100px;*/

    }

.sectionHeading{
	color: white;
	font-size: 44px;
	font-family: 'Prompt', sans-serif;
	font-weight: 100;
	letter-spacing: 1.5px;
	margin: .5em;
}

#home .sectionHeading{

	font-size: 100px;

}

#home .col-1{

	vertical-align: middle;


}

#home .blackTransparency{

	font-size: 22px;


}

div.section:nth-of-type(even) span.firstLine{
background-color: transparent;
    font-size:28px;
    font-weight:300;
    color: white;
padding:.5em .5em;
    /*right: 0px;*/
    /*top: 30%;*/
/*    text-align: right;*/


}

div.section:nth-of-type(odd) span.firstLine{
background-color: transparent;
    font-size:28px;
    font-weight:300;  
    color: white;
    padding:.5em .5em;



}

.blackTransparency{
/*    position: absolute;*/
display: table-cell;
/*	margin: 0 auto;*/
text-align: center;
vertical-align: middle;
/*width: 70%;*/
font-size:18px;
font-weight:300;

color: rgb(255,255,255);
padding:1em 1em; 
line-height: 1.4;
background-color: transparent;

/*bottom: 0px;*/
}

/*#careers .blackTransparency{
	font-size:22px;
}
*/

.sectionImage>h2{display: none;}
div.t-row >.firstLine{display: none;} /*hide all the first lines*/
div.col-1 >.firstLine{display: block;} /*display the firstline specific for the desktop version*/
.sectionImage{padding-top: 0px;}



ul.navibar li:not(.logo){ 

/*Select all elements except the logo image. This was required to vertically center align the logo and the menu items. Vertical Align did nto work.*/
	margin-top: 5px;
}

.ui-btn{text-align: center;} /*styling for email button */

.ui-btn-icon-left:after{left:6em; background-color: transparent;}/*styling for email button */



}


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

@media only screen and (min-width: 1361px){ 

	/*Desktop Design*/
	
	/*#mnkreshome{display:none;}*/
	body{text-align: center;
			padding: 1em;
			background-color: black;
		}

/*.wow {
   visibility: hidden;
}*/

/*	body:after{content: url("images/underconstruction_m.jpg")}*/

img{width: auto;height: auto;}



*{box-sizing: border-box;
font-family: quicksandregular;
text-shadow: none;}

.sectionHeading{display: block;}
.section{

  width: 100%;
/*  height: 100vh;*/
  min-width: 800px;
  position: relative;
  margin:0 auto;

}

#vision.section, #difference.section{

height: 100vh;

}




#home.section img,
#vision.section img,
.sectionImage>img,
#work.section img,
#contactus.section img{display: none;} 

#home{

background: url(images/home_d.jpg) no-repeat center center; 
-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


#vision{

background: url(images/vision_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}


.table {
 display: table; 
  margin:0 auto; 
/*  width: 80%;*/
}



.tr       { display: table-row; text-align:center;}
.thead    { display: table-header-group;}
.tbody    { display: table-row-group;}
.tfoot    { display: table-footer-group; }
.col      { display: table-column; }
.colgroup { display: table-column-group; }
.td, .th   { 
	display: table-cell; 

  background-color: rgb(0,168,198);


}

.caption  { display: table-caption; }


.text{background-color: rgb(0,168,198); width: 50%; padding: 4em;}

#mission .image{
	background: url(images/mission_d.jpg) no-repeat center center; 
	-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#transparency .image{
	background: url(images/transparency_d.jpg) no-repeat center center; 
	-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#timeliness .image{
	background: url(images/timeliness_d.jpg) no-repeat center center; 
	-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#safety .image{
	background: url(images/safety_d.jpg) no-repeat center center; 
	-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}









#difference{

background: url(images/difference_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#sun .image{

background: url(images/sun_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}


#air .image{

background: url(images/air_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#hygiene .image{

background: url(images/hygiene_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#prayer .image{

background: url(images/prayer_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#technology .image{

background: url(images/technology_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#storage .image{

background: url(images/storage_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#insideout .image{

background: url(images/insideout_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#customise .image{

background: url(images/customise_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}
#green .image{

background: url(images/green_d.jpg) no-repeat center center; 

-webkit-background-size: contain;
 -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;


}

#solar .image{

background: url(images/solar_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}


#zeroground .image{

background: url(images/solar_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}


#propmgmt .image{

background: url(images/propmgmt_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}

#work {

background: url(images/work_d.jpg) no-repeat center center; 
-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#contactus{

background: url(images/contactus_d.jpg) no-repeat center center; 

-webkit-background-size: cover;
 -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;


}


.ui-bar {display: block;}

.ui-header{padding:.5em;} /*left and right padding of header container*/
.ui-header .ui-btn-right{ display: none;}/*adjust vertical placement of Menu button for navigation*/
.ui-header .ui-btn{display: none;}






[data-role="header"]{

	display: -webkit-flex;
   display: flex;
   	justify-content: space-between;
	align-items: center;



}

.logo-desktop{

min-width: 200px;
width: 200px;
height: 35px;
z-index: 100;
}

.logo-mobile{
	display: none;
}

ul.navibar{
	list-style-type: none;
	   display: -webkit-flex;
   display: flex;
	width: 1200px;
	justify-content: space-between;

	flex-wrap: nowrap;
	margin : 0 auto;
	min-width: 1000px;

}

 ul.navibar li a {
    
    color: white;
    text-align: right;
    vertical-align: middle;
    text-decoration: none;
        font-size:16px;
    text-transform: uppercase; 
    letter-spacing: 1.5px;

}



 ul.navibar li a:visited{color:white;}
 ul.navibar li a:active {color:white;}
 ul.navibar li a:focus {color:rgb(204,51,0);}
 ul.navibar li a:hover {color:rgb(204,51,0);}

#single-page-menu{
	display: none;

}

/*#pagethemeimage>img{display: none;}*/

.ui-content{

padding:0;

}





.horz-text{
-webkit-box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
background-color: #453c2b;
width: 100%;
position: absolute;
bottom: 0px;

}


.vert-text-left{
-webkit-box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
background-color: rgb(0,168,198);
position: absolute;
left: 0px;
height: 100vh;

}


.vert-text-right{
-webkit-box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
box-shadow: -1px -11px 47px 0px rgba(0,0,0,0.75);
background-color: rgb(240,120,24);
position: absolute;
right: 0px;
height: 100vh;

}

#safety .text,#air .text, #insideout .text,#green .text{
	background-color: rgb(27,103,107); /*greenish blue*/
}

#timeliness .text,#sun .text, #technology .text{
	background-color: rgb(205,179,128); /*golden*/

}

#transparency .text,#prayer .text,#propmgmt .text{
	background-color: rgb(240,120,24); /*orange*/

}


#customise .text, #hygiene .text{
	background-color: #453c2b; /*dark brown*/

}

#green .text{padding-top:7em;padding-bottom: 7em;}



#timeliness .firstLine
{color:rgb(27,103,107);}


.table-horz{

	display: table;
	margin: 0 auto;
	width:1200px;
	clear: both;
	height: 400px;

}


#home .horz-text{

background-color: rgba(0,0,0,.2);
	height: 100vh;
}

#home .table-horz{


	height: 100vh;
}

.table-vert{
	display: table;
	margin: 0 auto;
	width:800px;

}

.t-row{

	display: table-row;
	width:1200px;
	min-width: 800px;

	text-align: center;
/*	margin-top:0;
	margin-bottom: 65px;*/
	margin: auto 0;

}

.t-col{
	position: absolute;
	display: table-column;
	width:800px;
	min-width: 500px;
	text-align: center;
	padding: 0 3em;

}

#contactus .t-col{

padding: 0 10em;

}



.col-1{
	display: table-cell;
	text-align: center;
/*		margin: 0 auto;*/
		vertical-align: middle;
		width: 40%;

}

.col-2{
	display: table-cell;
	text-align: center;
/*		margin: 0 auto;*/
		vertical-align: middle;
width: auto;
height: 100vh; /*using height of 100vh with vertical align middle, makes it fully middle aligned in a column*/
}

.col-2+.col-2{width: 40%;
vertical-align: top;
} /*this is to change the column alignment and width where two columns are used. */

.firstLine{
    /*position: absolute;*/
    background-color: transparent;
    display: table-cell;
        color: white;
        vertical-align: middle;

     /*width: 30%;  */ 
    /*width: 1100px;*/

    }

.sectionHeading{
	color: white;
	font-size: 50px;
	font-family: 'Prompt', sans-serif;
	font-weight: 100;
	letter-spacing: 1.5px;
	margin: .5em;
}

#home .sectionHeading{

	font-size: 100px;

}

#home .col-1{

	vertical-align: middle;


}

#home .blackTransparency{

	font-size: 22px;


}

div.section:nth-of-type(even) span.firstLine{
background-color: transparent;
    font-size:32px;
    font-weight:300;
    color: white;
padding:.5em .5em;
    /*right: 0px;*/
    /*top: 30%;*/
/*    text-align: right;*/


}

div.section:nth-of-type(odd) span.firstLine{
background-color: transparent;
    font-size:32px;
    font-weight:300;  
    color: white;
    padding:.5em .5em;

/*
    left: 0px;*/

/*   text-align: left;*/



}

.blackTransparency{
/*    position: absolute;*/
display: table-cell;
/*	margin: 0 auto;*/
text-align: center;
vertical-align: middle;
/*width: 70%;*/
font-size:20px;
font-weight:300;

color: rgb(255,255,255);
padding:1em 1em; 
line-height: 1.4;
background-color: transparent;

/*bottom: 0px;*/
}

#careers .blackTransparency{
	font-size:22px;
}





.sectionImage>h2{display: none;}
div.t-row >.firstLine{display: none;} /*hide all the first lines*/
div.col-1 >.firstLine{display: block;} /*display the firstline specific for the desktop version*/
.sectionImage{padding-top: 0px;}



ul.navibar li:not(.logo){ 

/*Select all elements except the logo image. This was required to vertically center align the logo and the menu items. Vertical Align did nto work.*/
	margin-top: 5px;
}

.ui-btn{text-align: center;} /*styling for email button */

.ui-btn-icon-left:after{left:6em; background-color: transparent;}/*styling for email button */

/**{font-size: 80% !important;}*/

}

/*---------------------------------------------------------Desktop section--------------------------------------------------------------------------*/