/*

	Main CSS:
	Copyright (C) 2014 OwlTree Web Solutions.

*/



html
{
	width: 100%;
    /*height: 100%;*/
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	font-size: 100%;
}

@font-face
{
	font-family: 'BebasNeueRegular';
src: url('../fonts/BebasNeue-webfont.eot'); src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeue-webfont.svg#Century Gothic') format('svg'), url('../fonts/BebasNeue-webfont.woff') format('woff'), url('../fonts/BebasNeue-webfont.ttf') format('truetype');
}

body
{
	font-family: Arial;
	font-size: 1.0em;
	color: #424242;
}

header
{
	width: 100%;
	max-width: 480px;
	height: 380px; /*280px*/
	background: url(../images/home-top-image-2.jpg) no-repeat;
	background-position: 50% 50%;  /* Sets reference point to scale from */
	background-size: cover;
	background-color: #e3e3e3;
}

img.header-img
{
	display: none;
	width: 100%;
}

.header-container
{
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	background-color: rgba(255,255,255, 0.8);
}

br.clear
{
	clear: both;
}

.logo-container
{
	/*float: left;*/
	width: 100%;
	/*border-top: 1.0em solid #04cbcb;*/
	background: url(../images/bg.png);
	/*background: url(../images/logo.png); */
	background-color: rgba(255,255,255, 0.8);
	padding: 0.5em 0em 0.5em 0em;
	/*margin: 0 auto;*/
	text-align: center;
}

img#logo-image
{
	
}

.social-container
{
	width: 100%;
}

img.social
{
	display: inline-block;
	margin: 0 auto 0em auto;
}

a#logo, a#logo:visited, a#logo:hover
{
	/*color: white;*/
	text-decoration: none;
	font-family: Times;
	font-size: 1.5em;
	text-align: center;
}

.logo-container h2
{
	color: #000000;
	font-size: 2.3em;
	text-align: center;
}

p.logo-contact a, p.logo-contact a:visited
{
	color: black;
}

h1
{
	color: white;
	font-size: 2.5em;
	font-weight: bold;
	text-shadow: 1px 1px gray;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
}

h1#title
{
	width: 80%;
	margin-bottom: 1.5em;
	font-size: 2.5em;
	text-align: center;
	color: rgba(248,164,65, 1);
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'BebasNeueRegular';
	border-bottom: 2px solid rgba(248,164,65, 1);
	margin-left: 12%;
	margin-right: auto;
}

h2
{
	
}

h2.service
{
	width: 10%;
	font-size: 2.5em;
	font-weight: bold;
	color: white;
	text-align: left;	
	padding: 0.25em 0.25em;
	background-color: rgba(88, 87, 87, 0.50);
	text-align: center;
}

h3
{
	
}

h4
{
	
}

h5
{
		
}

p
{
	margin-top: 1.0em;
	margin-bottom: 1em;
}


a
{
	color: white;
}

blockquote
{
	padding-left: 1em;
	padding-right: 1em;
}

cite
{
	font-style: italic;
}

em
{
	font-style: italic;
}

ul
	{
		/*margin-top: 3em;*/
		margin-bottom: 1em;
	}
	
ul li
	{
		list-style: disc;
		margin-bottom: 0.25em;
		font-size: 0.9em;
		margin-left: 1.5em;
	}
	
pre
{
	border-left: 4px solid orange;
	padding-left: 6px;
	color: #2F779D;
	font-family: Arial;
	font-style: italic;
}
pre:hover
{
	font-weight: bold;
}

/*---------- Navigation Bar CSS - Mobile First-----------*/

ul#topnav
{
	/*position: relative;
	z-index: 100;*/
	/*float: left;*/
	width: 100%;
	max-width: 480px;
	margin: 0px auto;
	background: url(../images/bg.png);
	color: black;
	padding: 0.75em 0em 0.75em 0em;
	border-top: 1.0em solid  rgba(248,164,65, 1); /*#04cbcb*/
}
ul#topnav li
{
	list-style: none;
}

ul#topnav2
{
	display: none;
	/*width: 100%;*/
	/*float: right;*/
	/*margin-right: auto;*/
}

ul#topnav2 li a:hover
{
	color:  white; /*#eea320;*/ /*#04cbcb;*/
	text-shadow: 1px 1px gray;
}
	

#topnav li a, #topnav li a:visited
{
	color: black;
}

#topnav li ul.submenu
{
	display: none;
	margin-left: 2.2em;
}

#topnav li:hover > ul.submenu, #topnav li:focus > ul.submenu a
{
	display: block;
}

#topnav li:hover > ul.submenu a:hover, #topnav li:focus > ul.submenu a:focus
{
	color: #eea320;/*#04cbcb;*/
}

ul.submenu li
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

span.menu-symbol
{
	margin-left: 0.5em;
	font-weight: normal;
	font-size: 1.2em;
}
span.hide-menu
{
	margin-left: 0.5em;
	font-size: 1.2em;
}

.on
{
	border-bottom: 3px solid #eea320;
	padding-bottom: 0.2%
}

/*----------- Service Lines on Home Page -----------*/

.service-line-container
{
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	background-color: #f1f1f1;
}

.service-line, .service-line-last
{
	position: relative;
	width: 100%;
	max-width: 480px;
	height: 150px;
	margin: 0 auto;
	background-color: rgba(248,164,65, 1);
	border-bottom: 1px dotted white;
	transition: background 1s ease-in-out;
}

.service-line:hover, .service-line-last:hover, .service-line:focus, .service-line-last:focus
{
	/*background-color: rgba(248,164,65, 0.5);*/ /*rgba(7, 158, 158, 0.9)*/
}


img.service-line-icon
{
	display: none;
	clear: both;
	position: absolute;
	bottom: 10px;
	right: 10px;
	width: 25%;
	margin-right: 1.5em;
}

.service-line h3, .service-line-last h3
{
	/*float: left;*/
	text-align: center;
	width: 100%;
	/*margin-top: 1.0em;*/
	/*margin-left: 1.0em;*/
	color: white;
	font-size: 1.4em;
	font-weight: bold;
}

.service-line p, .service-line-last p
{
	display: none;
	float: left;
	width: 95%;
	margin-top: 1.0em;
	margin-left: 1.0em;
	color: white;
	font-size: 1.2em;
}

/*-------------- Content Area on Home Page and
					Both Contents Area on Testimonial Page -------------*/

.content-container
{
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	/*text-align: center;*/
	/*border-bottom: 2px solid #04cbcb;*/
}

.accreditations
{
	clear: both;
	float: left;
	width: 100%;
	background: url(../images/bg.png) repeat;
	margin: 0 auto;
}

.accreditations-container
{
	width: 100%;
	max-width: 480px;
	margin: 0px auto;
}
.accreditations-container h2
{
	font-size: 1.8em;
	font-weight: bold;
	margin-bottom: 1.0em;
	margin-top: 1.0em;
	text-align: center;
	color: gray;
}

img.accreditation-img
{
		
	margin: 0 auto;
	padding: 0 0 10px 75px;
}


.content-home
{
	width: 98%;	
	margin: 0 1.1% 5em 1.1%;
	align-content: center;
}

.content h2
{
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 1.0em;
}

.content-container h2, .content-home h2
{
	font-size: 1.8em;
	font-weight: bold;
	margin-bottom: 1.0em;
	margin-top: 1.0em;
	text-align: center;
	color: gray;
}

.content-home h2
{
	border-bottom: 2px solid #2F779D;
	padding: 0 0 0.5em 0;
}

.content-home p
{
	margin-bottom: 1.0em;
}
.content-home a
{
	color: blue;
}
.content-home a:hover
{
	text-decoration: underline;
}


img.home-img1
{
	width: 30%;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

img.home-img2
{
	width: 30%;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

img.home-img3
{
	width: 30%;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

.content p
{
	margin-bottom: 1.0em;
}

.content li
 {
	margin-left: 1.5em;
	list-style: disc;
}

.content-container h3, .content-container p
{
	
}

.half {
	border: orange dotted;
	width: 50%;
	text-align: center;
	margin: 0 auto;
}

.content-home img
{
	/*margin-right: 1em;*/
}
.content-home h2 
{
	color: #f8a441;
	text-shadow: 1px 1px gray;
	font-size: 2em;
	text-align: center;
	margin-bottom: 0.5em;
}

/*-------------  Diagram Strip on Home Page -------------*/

.diagram-strip
{
	clear: both;
	width: 100%;
	/*min-height: 200px;*/
	background-color: #f1f1f1;
	padding-top: 2.0em;
}

.diagram-container
{
	width: 100%;
	max-width: 480px;
	min-height: 200px;
	padding-bottom: 2.0em;
	margin: 0 auto;
}

.diagram-container h2
{
	font-size: 1.8em;
	font-weight: bold;
	color: gray;
	text-align: center;
}

.diagram-container h3
{
	float: left;
	width: 25%;
	padding: 1em 0;
	height: 2.6em;
	margin: 50px 4% 0 4%;
	background-color: #2F779D;
	font-size: 0.7em;
	font-weight: bold;
	color: white; /*#f8a441;*/
	text-align: center;
	border-radius: 4px;
	text-shadow: 1px 1px gray;
}


img.circles
{
	width: 100%;
	/*margin-top: 3.0em;*/
}





/*------------- Quote Strip on Home Page -----------*/

.quote-strip
{
	clear: both;
	width: 100%;
	/*min-height: 150px;*/
	background: url(../images/orange-banner.png) repeat;
	padding-bottom: 1.0em;
	/*background-color: rgba(248,164,65, 1);*/
	/*display: table;*/
	/*margin-top: 20px;*/
	padding-top: 1em;
}

.quote-container
{
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	display: table;
}

.quote-container h2
{
	color: white;
	font-size: 2.5em;
	font-weight: bold;
	text-shadow: 1px 1px gray;
	padding-top: 0.2em;
	padding-bottom: 0.2em;
	text-align: center;
}

.quote-container p a
{
	font-family: Arial;
	font-size: 1.0em;
	color: #f6f6f6;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	/*padding-bottom: 0.5em;*/
}

.quote-container p
{
	text-align: center;
	/*color: #393939;*/
	font-size: 1.1em;
	margin-top: 1.0em;
}

/*.quote-strip h2
{
	font-family: helvetica;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	margin: 0.5em 0 0.5em 0;
}*/



/*p.quote
{
	font-family: Times;
	font-size: 1.0em;
	color: #f6f6f6;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}*/

p.quote-small
{
	font-family: Times;
	font-size: 1.5em;
	color: black;
	text-align: center;
}

span.large-quotes
{
	font-family: Times;
	color: #ededed;
	font-size: 2.0em;
}


/*--------- Content Section 2 (Last) on All Pages ----------*/


.content2
{
	width: 98%;
	max-width: 1024px;
	min-height: 450px;
	/*background: url(../images/bg.png) repeat;*/
	padding: 2% 1%;
	margin: 0 auto;
	/*border-bottom: 1px solid silver;*/

	clear: both;
}

.content2 h2
{
	text-transform: uppercase;
	text-align: left;
	color: rgba(248,164,65, 1);
	font-size: 1.7em;
	font-weight: bold;
	text-shadow: 1px 1px gray;
	margin-bottom: 1em;
}

.content2 p
{
	color: #424242;
	font-size: 1.2em;
	text-align: left;
	padding-top: 2em;
}

p.showcase-caption
{
	
	margin-top: 1.0em;
	font-size: 1.3em;
	text-align: center;
	text-transform: uppercase;
	border-top: 2px solid rgba(248,164,65, 1);
	padding-top: 0.5em;
}

p.showcase-link
{
	margin-top: 1.0em;
	font-size: 1.1em;
	text-align: center;
	text-transform: uppercase;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	background-color: rgba(248,164,65, 1);
	border-radius: 2px;
}

p.showcase-link a
{
	color: white;/*#424242;*/
}

p.testimonial-name
{
	font-size: 1.3em;
	margin-top: 2.0em;
	margin-left: 0.5em;
	margin-right: 0.5em;
	border-top: 2px solid rgba(248,164,65, 1);
	padding-top: 0.5em;
		
}

img.showcase-img
{
	width: 100%;
}



/*---------  Page and
				Contact Page ------------*/


.service-line-detail, .contact-detail
{
	width: 88%;
	max-width: 480px;
	min-height: 120px;
	padding: 2% 1%;
	margin-left: 8%;
	margin-bottom: 20px;
	text-align: justify;
	border: 1px solid silver;
	border-radius: 2px;
	text-align: justify;
}

img.extension-icon
{
	width: 15%;
	margin-left: -9%;
}

.service-line-detail p, .contact-detail p
{
	width: 85%;
	/*margin-top: -15%;*/
	margin-left: 8%;
	padding-right: 8%;
}

.contact-detail p
{
	font-size: 1.2em;
}

.contact-detail h3
{
	
}

.contact-detail a
{
	color: #424242;
}

.contact-image
{
	width: 98%;
	margin: 0 auto;
	padding-left: 1%;
	padding-bottom: 0.5em;
	text-align: center;
}

.contact-image-rt
{
	width: 98%;
	margin: 0 auto;
	padding-left: 1%;
	padding-bottom: 0.5em;
	text-align: center;
}

.service-line-detail h3, .contact-detail h3
{
	width: 85%;
	margin-top: -15%;
	margin-left: 8%;
	margin-bottom: 1.0em;
	padding-right: 8%;
	text-transform: uppercase;
	font-weight: bold;
	color: gray;
	font-size: 1.2em;
	/*border-bottom: 1px solid #04cbcb;*/
}

p.call-to-action
{
	font-family: Arial;
	font-size: 2.5em;
	color: #f6f6f6;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
}

.services-strip
{
	clear: both;
	width: 100%;
	background-color: #f1f1f1;
	padding-top: 2.0em;
	padding-bottom: 2.0em;
}

.services-strip2
{
	clear: both;
	width: 100%;
	background-color: #f8f8f8;
	padding-top: 2.0em;
	padding-bottom: 2.0em;
}

.services-container
{
	width: 100%;
	max-width: 480px;
	border-top: 1px dotted #2F779D;
	border-bottom: 1px dotted #2F779D;
	margin: 0 auto;
	text-align: center;
	padding-top: 10px;
}

.services-container h2
{
	font-size: 1.8em;
	font-weight: bold;
	color: gray;
	text-align: center;
}

.services-container h3
{
	float: left;
	width: 25%;
	padding-top: 1.0em;
	height: 2.6em;
	margin: 50px 4% 0 4%;
	background-color: #2F779D;
	font-size: 1.5em;
	font-weight: bold;
	color: white; /*#f8a441;*/
	text-align: center;
	border-radius: 4px;
	text-shadow: 1px 1px gray;
}

.services-container p
{
	padding: 0 0.5em;
}

.services-container img
{
	
	/*display: block;*/
	/*padding-right: 0.5em;*/
	margin-top: 0.5em;
}


/*----------- Projects Page ------------*/

ul.project-list
{
	width: 97%;
	padding: 2% 1%;
	margin-bottom: 1.0em;
	margin-left: 1%;
	list-style: none;
	border: 0;
	display: table;
}

li.project-item a
{
	float: left;
	width: 98%;
	min-height: 340px;
	/*display: table;*/
	background-color: #f1eeee;
	border-bottom: 1px solid silver;
	padding: 2% 1%;
	margin-bottom: 1%;
	text-transform: uppercase;
	color: gray;
	font-size: 1.2em;
	transition: background 1s ease-in-out;
}

li.project-item a:hover, li.project-item a:focus
{
	background-color: rgba(248,164,65, 1);
	/*background-color: rgba(164, 164, 164, 0.9);*/
	color: white;
}

img.project-thumb
{
	width: 100%;
	margin-top: 1.0em;
	transition: 1s ease-in-out;
}


/*----------- Case Study Page ------------*/


.case-study
{
	width: 97%;
	min-height: 515px;
	/*height: 60%;*/
	/*max-width: 480px;*/
	background-color: #f1eeee;
	padding: 2% 1%;
	margin-bottom: 1.0em;
	text-align: justify;
	border-bottom: 1px solid silver;
}

.case-study h2
{
	text-transform: uppercase;
	text-align: left;
	color: gray;
	font-size: 1.7em;
	margin-bottom: 1em;
}

.case-study p
{
	font-size: 1.2em;
	margin-bottom: 1.0em;
}

.case-study h3, case-study p
{
	
}

h3.gallery-button
{
	width: 30%;
	height: 30px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 0.7em;
	text-align: center;
	color: white;
	background-color: silver;
	border-bottom: 1px solid gray;
}

h3.gallery-button:hover, h3.gallery-button:focus
{
	background-color: gray;
}

img.project-image
{
	width: 100%;
}

/*-------------- Previous and Next Buttons on Case Study Pages ---------------*/

.prev-next-container
{
	width: 100%;
	text-align: center;
}

ul#prev-next 
{
	width: 100%;
}
  
#prev-next li
{
	/*float: left;*/
	width: 27%;
	min-height: 40px;
	margin-left: 1%;
	margin-right: 1%;
	margin-bottom: 1.5em;
	padding-top: 1.0em;
	background-color: silver;
	border-bottom: 1px solid gray;
	text-align: center;
	display: inline-table;
	list-style:none;
}

#prev-next li a, #prev-next li a:active
{
	font-size: 1.1em;
	color: white;	
}

#prev-next li:hover, #prev-next li:focus
{
	background-color: gray;
}


#prev-next a.no-after, #prev-next li.no-after
{
 	display: none;
}

#prev-next a.no-before, #prev-next li.no-before
{
 	display: none;
}

#prev-next a.previous
{
 	/*margin-right: 2.0em;*/
}


/*---------- Basic Page used by 
				Legal Page and
				404 page------------*/

.body
{
	padding-left: 1%;
	padding-right: 1%;
}

.body h2
{
	width: 75%;
	margin-bottom: 1.5em;
	font-size: 2.5em;
	text-align: center;
	color: gray;
	text-transform: uppercase;
	font-weight: bold;
	font-family: 'BebasNeueRegular';
	border-bottom: 2px solid rgba(248,164,65, 1);
	margin-left: auto;
	margin-right: auto;
}

.body h3
{
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 1.0em;
}

.body p
{
	margin-bottom: 1.0em;
}

/*------------- Footer ----------------*/

footer.top
{
	float: left;
	width: 100%;
	/*min-height: 200px;*/
	/*margin-top: 20px;*/
	background: url(../images/bg.png) repeat;
	/*background-color: #616161;*/
}

.footer-container
{
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	/*padding-top: 1.0em;*/
}

footer.bottom
{
	float: left;
	width: 100%;
	min-height: 40px;
	background: url(../images/orange-banner.png) repeat;
	/*background-color: rgba(248,164,65, 1);*/
	font-size: 0.8em
}



.footer-container h3
{
	font-size: 1.7em;
	color: black;
	font-weight: bold;
	/*color: #f6f6f6;*/
	text-transform: uppercase;
	margin-bottom: 20px;
	margin-top: 20px;
}

.footer-container p
{
	font-size: 1.2em;
	color: black;
	/*color: #c9c8c8;*/
	/*margin-bottom: 20px;*/
}

.footer-top-left, .footer-top-centre, .footer-top-right
{
	/*float: left;*/
	width: 100%;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 20px;
	text-align: center;
}

p.ftbottom-left, p.ftbottom-right
{
	float: left;
	color: #000000;
	margin-top: 10px;
	margin-left: 0.5em;
	margin-right: 0.5em;
}

p.ftbottom-right a
{
	text-decoration: none;
	color: #000000;
}

p.ftbottom-right a:hover
{
	color: #f6f6f6;
}

p.legal
{
	padding-top: 2.0em;	
}

a.legal, a.legal:visited
{
	color: #000000;
	text-transform: uppercase;
	margin-top: 20px;
	font-weight: bold;
}

a.legal:hover
{
	text-decoration: underline;
}

.footer-top-centre
{
	
}

.footer-top-right
{
	
}

input, textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}