/* Table of Content
==================================================
	#Resets
	#Basic Styles
	#Media Queries
	#Font-Face
	#Responsive Grid
	*/
	
			/*
			LB- #70CDE3 MB- #0093d0 DB- #0054a4 DDB- #022456
			http://enjoycss.com/
			http://adaptive-images.com/details.htm
			*/


/* #Resets
================================================== */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; 
}



/* #Basic Styles
================================================== */	

html {background: #FFF;}

body {-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; margin:0; padding:0; font-size:100%;}

a {text-decoration: none; background: none;}

h1 {font-size:3em; font-family:Verlag-Bold; line-height: 1.75em; color:#fff;}
h2 {font-size:2em; font-family:Verlag-Bold; line-height: 1.5em;}
h3 {font-size:1.75em; font-family:Verlag-Bold; line-height: 1.75em;}
p {font-size:1.5em; font-family:Verlag-Book; line-height:1.5em;}


.relative {position: relative; margin-bottom:25px;}
.underline {border-bottom: solid 6px #fff; position:relative; margin-bottom:10px;}
.top {position:absolute; right:0; bottom:0;}
.border {border-top:solid 6px #fff; border-bottom:solid 6px #fff; text-align:center; padding-top:10px; padding-bottom:10px;}
.center {text-align:center;}
.lazy {background-color:#FFF;}

.container {width:80%; margin:0 auto;}

.scrollup {
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 125px;
    right: 100px;
    display: none;
    text-indent: -9999px;
    background: url(../images/css_images/top.png) no-repeat;
}


#header {position:relative; padding-bottom:5%; padding-top:2%; background:#fff;}
#header img {display:block; height: 8.25em; width: auto\9; /* ie8 */ padding:0; }

.navcss a:hover, .navcss a:focus {color: #70cde3; text-decoration: none;}
.navcss a:visited {color:#022456; text-decoration:none;}

.navcss{
   font-family:Verlag-Bold;
   	font-size: 1.25em;
	line-height: 8.25em;
    list-style:none;
    position:absolute;
	right:0;
    text-align:right;
}
.navcss li{
    display:inline;
}

.navcss a{
   display:inline-block;
   padding:0 0 0 3%;
   color:#0054a4;
   text-decoration: none;
   text-align: center;
}


#intro { text-align: center; margin: 0 auto; background-color:#fff; background-image:url(../images/css_images/introWave.gif); background-repeat:repeat-x; background-position:bottom;  padding-bottom: 50px;}
#introSlider {border: none; -webkit-border-radius: none; -moz-border-radius: none; -o-border-radius: none; border-radius: none; -webkit-box-shadow:none; -moz-box-shadow:none; -o-box-shadow: none; box-shadow: none; width:80%; margin: 0 auto; background:rgba(255,255,255,0);}

#introSlider .slides li {position:relative;}

#introSlider .flex-caption {
    position:static;
	text-align:center;
    z-index:1;
    padding:5px;
	font-size:1.5em; font-family:Verlag-Bold; line-height: 1.5em;
	color:#fff;
	background-color:#70cde3; }


#about h1, #portfolios h1, #contact h1{display:inline;}

#about {
border-top: solid #fff 10px; padding-top: 125px; padding-bottom: 50px; 
background:#70cde3;
background:url(../images/css_images/abouttop4.png) top center no-repeat, -webkit-linear-gradient(-90deg, rgba(112,205,227,1) 0, rgba(112,205,227,1) 30%, rgba(0,147,208,1) 75%, rgba(0,147,208,1) 100%);
background: url(../images/css_images/abouttop4.png) top center no-repeat, -moz-linear-gradient(180deg, rgba(112,205,227,1) 0, rgba(112,205,227,1) 30%, rgba(0,147,208,1) 75%, rgba(0,147,208,1) 100%);
background: url(../images/css_images/abouttop4.png) top center no-repeat,  linear-gradient(180deg, rgba(112,205,227,1) 0, rgba(112,205,227,1) 30%, rgba(0,147,208,1) 75%, rgba(0,147,208,1) 100%);
background-position:center;
}

#about img {width:35%;}
#about,#stats p {color:#fff;}
#about,#stats h2 {color:#fff;}
#about,#stats h3 {color:#fff;}
#about,#stats h1 {color:#fff;}

#download {text-align:center; padding-top:30px; padding-bottom:30px; background:#0093D0;}
#download a {color:#0054a4;}
#download h3 {color:#fff;}

#stats {background-color:#0093d0; padding-top: 50px; padding-bottom: 125px; 
background: url(../images/css_images/statsright.png), url(../images/css_images/statsleft2.png), -webkit-linear-gradient(-90deg, #0093d0 0, #0093d0 30%, #0054a4 81%, #0054a4 100%);
  background: url(../images/css_images/statsright.png), url(../images/css_images/statsleft2.png),  -moz-linear-gradient(180deg, #0093d0 0, #0093d0 30%, #0054a4 81%, #0054a4 100%);
  background: url(../images/css_images/statsright.png), url(../images/css_images/statsleft2.png), linear-gradient(180deg, #0093d0 0, #0093d0 30%, #0054a4 81%, #0054a4 100%);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: right bottom, left bottom, 100% 100%;
		}

#double {background-color:#022456;
background:-webkit-linear-gradient(-90deg, #0054a4 0, #0054a4 10%, #022456 100%, #022456 100%);
background:-moz-linear-gradient(180deg, #0054a4 0, #0054a4 10%, #022456 100%, #022456 100%);
background:linear-gradient(180deg, #0054a4 0, #0054a4 10%, #022456 100%, #022456 100%);
background-repeat: no-repeat, no-repeat, repeat;
background-position: right top, left top, 100% 100%;}


#portfolios {border-top: solid #fff 10px; padding-top: 125px; padding-bottom: 125px;
background: url(../images/css_images/portR.png), url(../images/css_images/portL.png);
background: url(../images/css_images/portR.png), url(../images/css_images/portL.png);
background: url(../images/css_images/portR.png), url(../images/css_images/portL.png);
background-repeat: no-repeat, no-repeat, repeat;
background-position: right bottom, left bottom, 100% 100%;}


#portfolios p {text-align:center; color:#fff;}

.gallery {text-align:center; padding-top:30px;}
.gallery a {display: inline-block; padding: 5px;}
.gallery a img {border: solid 10px #fff;}


.embedContainer {
	margin:0 auto;
	text-align:center;	
	position: relative;
    padding-bottom: 56.25%; /* 16/9 ratio */
    padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;}
	
.embedContainer object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	padding-top:30px;
}

#tab-2 {padding-bottom:175px;}
#tab-3 {padding-bottom:150px;}

ul.tabs{
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-align:center;
	margin-bottom:20px;
}
ul.tabs li{
	background: none;
	color: #FFF;
	display: inline-block;
	cursor: pointer;
	padding:0 2% 0 2%;
	font-size:1.75em; font-family:Verlag-Bold; line-height: 1.25em;
}

ul.tabs li.current{
	border-bottom: solid 6px #fff;
}

.tab-content{
	display: none;
	background: none;
}

.tab-content.current{
	display: inherit;
}


#contact p {color:#fff;}
#contact h2 {color:#fff;}
#contact h3 {color:#fff;}

#contact {border-top: solid #fff 10px; padding-top: 125px; padding-bottom: 50px;
background: url(../images/css_images/contR.png), url(../images/css_images/contL.png);
background: url(../images/css_images/contR.png), url(../images/css_images/contL.png);
background: url(../images/css_images/contR.png), url(../images/css_images/contL.png);
background-repeat: repeat-y, repeat-y, repeat;
background-position: right top, left top, 100% 100%;}

form > div {
  clear: both;
  overflow: hidden;
}

.feedback-input {
	font-size:1.25em; 
 	font-family:Verlag-Book; 
  	line-height: 2em;
	padding:.5em;
  	color:#022456;
	margin-bottom: 15px;
	width:100%;
	border: solid 5px #fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	background:rgba(255,255,255, 0.75);
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #022456;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #022456;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #022456;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #022456;
}


.g-recaptcha {
    width: 300px;
    margin: 0 auto 1em auto;
}

.succMsg{ 
	margin-top: 15px;
	margin-bottom: 15px;
	font-size:1.5em; 
 	font-family:Verlag-Bold; 
  	line-height: 1.5em;
	padding: .2em 1em .2em 1em;
	width: auto;
	background: #fff;
	text-align:center;
	cursor:pointer;
	color:#022456;
}

.errMsg{ 
	margin-top: 15px;
	margin-bottom: 15px;
	font-size:1.5em; 
 	font-family:Verlag-Bold; 
  	line-height: 1.5em;
	padding: .2em 1em .2em 1em;
	width: auto;
	background: #fff;
	text-align:center;
	color:#022456;
}
	
#submit{
	display:block;
	margin: 0 auto;
	font-size:1.5em; 
 	font-family:Verlag-Bold; 
  	line-height: 2em;
	padding: .2em 1em .2em 1em;
	width: auto;
	background: #fff;
	text-align:center;
	color:#022456;
}


user agent stylesheetinput[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button {
	border: none;
}

#submit:hover{
	background-color: #0054a4;
	color: #fff;
}

#footer {
margin: 0 auto; 
text-align: center;
background-color:#022456;
background-image: url(../images/css_images/footer2.gif);
background-repeat: repeat-x;
background-position: center bottom;
}

#footer img{
	max-width:100%;
}

/* New Form
================================================== */




/* #Media Queries
================================================== */

/* All Mobile Sizes (devices and browser) */


@media only screen and (max-width: 767px) {
.container {width:90%;}

.scrollup {
    right: -1000px;
}

h1 {font-size:2.25em; font-family:Verlag-Bold; line-height: 1.5em; color:#fff;}
h2 {font-size:1.75em; font-family:Verlag-Bold; line-height: 1.25em;}
h3 {font-size:1.5em; font-family:Verlag-Bold; line-height: 1.25em;}
p {font-size:1.25em; font-family:Verlag-Book; line-height:1.25em;}

.underline {border-bottom: solid 4px #fff; position:relative; margin-bottom:20px;}
.border {border-top:solid 4px #fff; border-bottom:solid 4px #fff;}

img {max-width: 100%; height: auto; width: auto\9;}

#header img {width:70%; height:auto; padding:3% 0 3% 0; position:static; margin:0 auto;}
#header {text-align:center;}
.navcss a {display:inline; padding: 0 2% 0 2%; text-align:center; }
.navcss {border-top:solid 4px #70cde3; border-bottom:solid 4px #70cde3; position: static; padding:3px 0 0 0; margin:0 auto; text-align:center; font-size:1em;line-height:2em;}


#intro {background-image:url(../images/css_images/introWaveSm.gif); padding-bottom: 25px;}
#introSlider .flex-caption {font-size:1em; font-family:Verlag-Bold; line-height: 1em; position:static;}
#introSlider .flex-direction-nav .flex-prev, .flex-direction-nav .flex-next {display:none;}
#introSlider {width:90%;}
#intro {margin-top:15px;}

#about img {width:75%;}


#stats {background-color:#0093D0; 
  background: url(../images/css_images/statsright.png), -webkit-linear-gradient(-90deg, rgba(0,147,208,1) 0, rgba(0,147,208,1) 30%, rgba(0,84,164,1) 81%, rgba(0,84,164,1) 100%);
  background: url(../images/css_images/statsright.png),  -moz-linear-gradient(180deg, rgba(0,147,208,1) 0, rgba(0,147,208,1) 30%, rgba(0,84,164,1) 81%, rgba(0,84,164,1) 100%);
  background: url(../images/css_images/statsright.png), linear-gradient(180deg, rgba(0,147,208,1) 0, rgba(0,147,208,1) 30%, rgba(0,84,164,1) 81%, rgba(0,84,164,1) 100%);
  background-repeat: no-repeat, repeat;
  background-position: right bottom,  100% 100%;
  text-align:center;
		}
		
#stats h2{line-height:2em;}	
	
#portfolios {border-top: solid #fff 10px;
background: url(../images/css_images/portC.png);
background: url(../images/css_images/portC.png);
background: url(../images/css_images/portC.png);
background-repeat: no-repeat;
background-position: center bottom, 100% 100%;}


ul.tabs li {font-size:1.5em; font-family:Verlag-Bold; line-height: 2em;}
.gallery {padding-top:20px;}
.gallery a {display: inline-block; padding: 1%; }
.gallery a img {border: solid 5px #fff;width:125px; height:125px;}

#tab-2 {padding-bottom:0px;}
#tab-3 {padding-bottom:0px;}


#contact {border-top: solid #fff 10px; padding-top: 80px; padding-bottom: 20px;
background: url(../images/css_images/contC.png);
background: url(../images/css_images/contC.png);
background: url(../images/css_images/contC.png);
background-repeat: no-repeat;
background-position:center top, 100% 100%;}

#footer {padding-top:50px;}


}


@media only screen and (min-width: 768px) and (max-width: 1024px)

{
#about img {width:50%;}

#portfolios {
background: url(../images/css_images/portRMed.png), url(../images/css_images/portLMed.png);
background: url(../images/css_images/portRMed.png), url(../images/css_images/portLMed.png);
background: url(../images/css_images/portRMed.png), url(../images/css_images/portLMed.png);
background-repeat: no-repeat, no-repeat;
background-position: right bottom, left bottom, 100% 100%;}

#contact {
background: url(../images/css_images/contRMed.png), url(../images/css_images/contLMed.png);
background: url(../images/css_images/contRMed.png), url(../images/css_images/contLMed.png);
background: url(../images/css_images/contRMed.png), url(../images/css_images/contLMed.png);
background-repeat: repeat-y, repeat-y;
background-position: right top, left top, 100% 100%;}

.scrollup { right: 5px;}


}

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

{
.container {width:60%;}
#introSlider {width:60%;}
}




/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */
/* 	
@font-face {
	font-family:ArcherPro-Semibold;
	src: url('../fonts/ArcherPro/ArcherPro-Semibold.eot?#iefix') format('embedded-opentype'), 
	     url('../fonts/ArcherPro/ArcherPro-Semibold.woff') format('woff'), 
	     url('../fonts/ArcherPro/ArcherPro-Semibold.ttf')  format('truetype'),
	     url('../fonts/ArcherPro/ArcherPro-Semibold.svg#svgFontName') format('svg');
		font-weight: semibold;
	    font-style: semibold;
	}
	
@font-face {
	font-family:ArcherPro-Medium;
	src: url('../fonts/ArcherPro/ArcherPro-Medium.eot?#iefix') format('embedded-opentype'), 
	     url('../fonts/ArcherPro/ArcherPro-Medium.woff') format('woff'), 
	     url('../fonts/ArcherPro/ArcherPro-Medium.ttf')  format('truetype'),
	     url('../fonts/ArcherPro/ArcherPro-Medium.svg#svgFontName') format('svg');
		font-weight: medium;
	    font-style: medium;
	}	
*/

@font-face {
	font-family:Verlag-Bold;
	src: url('../fonts/Verlag/Verlag-Bold.eot?#iefix') format('embedded-opentype'), 
	     url('../fonts/Verlag/Verlag-Bold.woff') format('woff'), 
	     url('../fonts/Verlag/Verlag-Bold.ttf')  format('truetype'),
	     url('../fonts/Verlag/Verlag-Bold.svg#svgFontName') format('svg');
		font-weight: bold;
	    font-style: bold;
}

@font-face {
	font-family:Verlag-Book;
	src: url('../fonts/Verlag/Verlag-Book.eot?#iefix') format('embedded-opentype'), 
	     url('../fonts/Verlag/Verlag-Book.woff') format('woff'), 
	     url('../fonts/Verlag/Verlag-Book.ttf')  format('truetype'),
	     url('../fonts/Verlag/Verlag-Book.svg#svgFontName') format('svg');
		font-weight: book;
	    font-style: book;
}



/*  GRID OF SIX   ============================================================================= */


/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 0 0 0 3%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}
                                               
					
/*  GRID OF SIX  */
.span_6_of_6 {
	width: 100%;
}

.span_5_of_6 {
  	width: 82.83%;
}

.span_4_of_6 {
  	width: 65.66%;
}

.span_3_of_6 {
  	width: 48.5%;
}

.span_2_of_6 {
  	width: 31.33%;
}

.span_1_of_6 {
  	width: 14.16%;
}

/*  GO FULL WIDTH AT LESS THAN 600 PIXELS */

@media only screen and (max-width: 767px) {
	.col { 
		margin: 0;
	}
}

@media only screen and (max-width: 767px) {
	.span_6_of_6 {
		width: 100%; 
	}
	.span_5_of_6 {
		width: 100%; 
	}
	.span_4_of_6 {
		width: 100%; 
	}
	.span_3_of_6 {
		width: 100%; 
	}
	.span_2_of_6 {
		width: 100%; 
	}
	.span_1_of_6 {
		width: 100%;
	}
}