@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);

@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);



html { height: 100% !important; }

body { height: 100% !important; font-family: 'Open Sans', sans-serif; padding-top: 80px; /*position: relative;*/ }

section { position: relative; }



.navbar { height:80px; }

.navbar-default .navbar-nav > li > a { background-color:#fff; font-size:1.2em;}

.navbar-default .navbar-collapse, .navbar-default .navbar-form { margin-top:0; border-color:transparent; }

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color:#12b4b5; color:#fff; }

.navbar-nav > li > a { padding-top:12px; padding-bottom:12px; line-height:24px; }

.navbar-toggle { margin-top:23px; }



.parallax {

	background-image: url(../images/banner-bg.jpg);

	position: relative;

	background-position: 0 0;

	background-repeat: no-repeat;

	background-attachment: fixed;

-webkit-background-size:cover;

-moz-background-size:cover;

-o-background-size:cover;

background-size:cover;

background-position:center;

/*	-webkit-background-size: cover;

  	background-size: cover;*/

}





/* ===== Begin intro section ===== */



/* ===== Begin OWL carousel ===== */

.owl-carousel {

	cursor: e-resize;

}

#owl-intro-text div.item { margin-top:20%; }

.owl-theme .owl-controls {

	margin-top: 30px;

}

.owl-theme .owl-controls .owl-page span {

	background: rgba(0, 0, 0, 0);

	width: 14px;

	height: 14px;

	border: 3px solid #fff;

	-webkit-transform: rotate(45deg);

	-moz-transform: rotate(45deg);

	-o-transform: rotate(45deg);

	transform: rotate(45deg);

	border-radius:0;

}

.owl-theme .owl-controls .owl-page.active span, .owl-theme .owl-controls.clickable .owl-page:hover span {

	background: rgba(0, 0, 0, 0);

	border: 3px solid #fff;

}

.owl-buttons {

	position: absolute;

	top: 50%;

	margin-top: -25px;

	width: 100%;

}

.owl-theme .owl-controls .owl-buttons div {

	position: absolute;

	width: 100px;

	height: 100px;

	line-height: 100px;

	margin: 0;

	text-align: center;

	background: transparent;

	opacity: 1;

}

.owl-theme .owl-controls.clickable .owl-buttons div:hover {

	opacity: .5;

}

/*.owl-next {

	background-image: url('../images/arrow-right.png') !important;

	background-repeat: no-repeat !important;

	background-position: center !important;

	right: 0;

}

.owl-prev {

	background-image: url('../images/arrow-left.png') !important;

	background-repeat: no-repeat !important;

	background-position: center !important;

	left: 0;

}*/

/* ===== End OWL carousel ===== */







/* Begin text carousel intro */



#text-carousel-intro-section .container {

	height: 100%;

}

/*#text-carousel-intro-section .caption {

	position: relative;

	top: 50%;

	margin-top: -70px;

}*/

#text-carousel-intro-section .caption h1 {

	margin-top: 0;

	margin-bottom: 5px;

/*	font-size: 60px;*/

	text-transform: uppercase;

	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);

	color: #fff; 

	font-size: 2em;

}

#text-carousel-intro-section .caption p {

	letter-spacing: 2px;

	font-size: 15px; 

	color: #fff;

	width:75%;

	margin-left:auto;

	margin-right:auto;

}

#text-carousel-intro-section { background-color: #fff; }



/*Intro Content*/

#introText { padding:50px 0; background:#fff; text-align:center; background:#e2e2e2; }

#introText h2 { font-size:2em; }



/* End text carousel intro */

/* ===== End intro ===== */



/* ======= Begin About Section ====== */

.rotate-box-info h4 { font-size:1.5em; }



/* ======= End About Section ======== */



/* ===== Begin Services Section ===== */



#services h4 { font-weight:400; }

h4 div.services { font-size:1.2em; margin-top:15px;}



#services2 { background: #12b4b5; color:#fff; text-align:center; }



/* End progress bar */

/* ===== End Services section ===== */



/* ===== Begin Work Section ===== */



.isotopeWrapper article {

    margin-bottom: 30px;

}

#work .portfolio-menu { text-align:center; }



#work .portfolio-filter {

  list-style: none;

  padding: 0;

  margin: 0 0 35px;

  display: inline-block;

}

#work ul.portfolio-filter  { text-align:center;}

#work .portfolio-filter > li {

  float: left;

  display: block;

}

#work .portfolio-filter > li a {

  display: block;

  padding: 7px 15px;

  background: #fff;

  color: /*#12b4b5;*/ #64686d;

  position: relative;

}

#work .portfolio-filter > li a:hover,

#work .portfolio-filter > li a.active {

	text-decoration:none;

  background: #12b4b5;

/*  background: #45aed6;*/

  color: #fff;

  box-shadow: 0 -3px 0 0 #107071 inset; 

  -webkit-box-shadow: 0 -3px 0 0 #107071 inset;

}

#work .portfolio-filter > li a.focus {

	text-decoration:none;

}

#work .portfolio-filter > li a.active:after {

  content: ' ';

  position: absolute;

  bottom: -17px;

  left: 50%;

  margin-left: -10px;

  border-width: 10px;

  border-style: solid;

  border-color: #318daf transparent transparent transparent;

}

#work .portfolio-filter > li:first-child a {

  border-radius: 4px 0 0 4px;

}

#work .portfolio-filter > li:last-child a {

  border-radius: 0 4px 4px 0;

}



.portfolio-items article img {

    width: 100%;

	border:1px solid #b4b4b4;

}



.portfolio-item {

    display: block;

    position: relative;

    -webkit-transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

    transition: all 0.2s ease-in-out;

}



    .portfolio-item img {

        -webkit-transition: all 300ms linear;

        -moz-transition: all 300ms linear;

        -o-transition: all 300ms linear;

        -ms-transition: all 300ms linear;

        transition: all 300ms linear;

    }



    .portfolio-item .portfolio-desc {

        display: block;

        opacity: 0;

        position: absolute;

        width: 100%;

        left: 0;

        top: 0;

        color: rgba(220, 220, 220);

    }

.portfolio-item:hover .portfolio-desc {

    padding-top: 20%;

    height: 100%;

    transition: all 200ms ease-in-out 0s;

    opacity: 1;

    background: rgba(0, 0, 0, 0.5);

/*    background: rgba(61, 61, 61, 0.67);*/

}



.portfolio-item .portfolio-desc a {

    color: #fff;

    text-align: center;

    display: block;

}



    .portfolio-item .portfolio-desc a:hover {

        /*text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.7);*/

        text-decoration: none;

    }



.portfolio-item .portfolio-desc .folio-info {

/*    top: -20px;*/

    padding: 35px;

    height: 0;

    opacity: 0;

    position: relative;

}



.portfolio-item:hover .folio-info {

    height: 100%;

    opacity: 1;

    transition: all 500ms ease-in-out 0s;

    top: 5px;

}



.portfolio-item .portfolio-desc .folio-info h5 {

    text-transform: uppercase;

    text-align: center;

    font-weight: bold;

    font-size: 1.4em;

}



.portfolio-item .portfolio-desc .folio-info p {

    color: #ffffff;

    font-size: 12px;

}





/* ===== End Work section ===== */



/* ===== Begin Clients section ===== */

ul.clients {

  list-style-type: none;

  font-size:15px;

  padding-left: 20px;

  margin-bottom:30px;

}



ul.clients li:before {    

font-family: 'FontAwesome';

content: '\f061';

margin:0 5px 0 -15px;

/*color: #12b4b5;*/

}







/* ===== End Clients section ===== */





/* ===== Begin Contact Section ===== */



#captchaOperation { font-weight:700; font-size:1.2em; text-align:right; padding-top:3px;}

/*#reasons { padding-bottom: 20px; }*/



/* ---- isotope ---- */



/* clear fix */

.isotope:after {

  content: '';

  display: block;

  clear: both;

}

.grid-sizer,

.reason-item { width:31%; }

.reason-item {

	position: relative;

	float: left;

	margin: 5px;

	padding: 10px;

	background: #12b4b5; /*#888;*/

/*	color: #262524;*/

}



.reason-item > * {

  margin: 0;

  padding: 0;

}



.reason-item .reason {

  position: absolute;

  left: 8%;

  top: 5%;;

  text-transform: none;

  letter-spacing: 0;

  font-size: 350%;

  font-weight: normal;

  color:#fff;

}



.reason-item .blurb {

  position: absolute;

  left: 8%;

  top: 40%;

  font-size: 105%; /*1.2em;*/

  color:#fff;

}



#why { background:#e2e2e2; text-align:center; }



/* ===== End Contact Section ===== */





/* ===== Begin extra-space ===== */

.extra-space-s {

	width: 100%;

	height: 10px;

}

.extra-space-m {

	width: 100%;

	height: 20px;

}

.extra-space-l {

	width: 100%;

	height: 40px;

}

.extra-space-xl {

	width: 100%;

	height: 60px;

}

.extra-space-xxl {

	width: 100%;

	height: 80px;

}

/* ===== End more-space ===== */







/* ===== Begin rotate boxes ===== */

/* Begin rotate box-1 */

.rotate-box-1.square-icon .rotate-box-icon, /* { background-color: #363940; }*/

.rotate-box-2.square-icon .rotate-box-icon { background-color: #12b4b5; }



.rotate-box-2 {

	display: inline-block;

	margin: 30px 0;

	-webkit-transition: all 0.2s ease-in-out;

	-moz-transition: all 0.2s ease-in-out;

	-o-transition: all 0.2s ease-in-out;

	-ms-transition: all 0.2s ease-in-out;

	transition: all 0.2s ease-in-out;

}

.rotate-box-1 {

	display: inline-block;

	margin: 0;

	-webkit-transition: all 0.2s ease-in-out;

	-moz-transition: all 0.2s ease-in-out;

	-o-transition: all 0.2s ease-in-out;

	-ms-transition: all 0.2s ease-in-out;

	transition: all 0.2s ease-in-out;

}



.rotate-box-1 .rotate-box-icon {

	display: inline-block;

	text-align: center;

	margin-bottom: 15px;

	margin-right: 25px;

	margin-top: 10px;

	float:left;

	-webkit-transition: all 0.2s ease-in-out;

	-moz-transition: all 0.2s ease-in-out;

	-o-transition: all 0.2s ease-in-out;

	-ms-transition: all 0.2s ease-in-out;

	transition: all 0.2s ease-in-out;

}

.rotate-box-2.square-icon .rotate-box-icon {

	width: 45px;

	height: 45px;

	line-height: 45px;

	color: #FFF !important;

	font-size: 18px;

	-webkit-transform: rotate(45deg);

	-moz-transform: rotate(45deg);

	-o-transform: rotate(45deg);

	transform: rotate(45deg);

}

.rotate-box-1.square-icon .rotate-box-icon  {

	width: 35px;

	height: 35px;

	line-height: 35px;

	color: #FFF !important;

	font-size: 18px;

	-webkit-transform: rotate(45deg);

	-moz-transform: rotate(45deg);

	-o-transform: rotate(45deg);

	transform: rotate(45deg);

}

.rotate-box-1.square-icon .rotate-box-icon:after, 

.rotate-box-2.square-icon .rotate-box-icon:after {

	content: '';

	position: absolute;

	top: 3px;

	right: 3px;

	bottom: 3px;

	left: 3px;

	border: 2px solid #FFF;

}

.rotate-box-1:hover.square-icon .rotate-box-icon , 

.rotate-box-2:hover.square-icon .rotate-box-icon{

	-webkit-transform: rotate(0deg);

	-moz-transform: rotate(0deg);

	-o-transform: rotate(0deg);

	transform: rotate(0deg);

}

.rotate-box-1.square-icon .rotate-box-icon .fa, 

.rotate-box-1.square-icon .rotate-box-icon .glyphicon, 

.rotate-box-2.square-icon .rotate-box-icon .fa{

	-webkit-transition: all 0.2s ease-in-out;

	-moz-transition: all 0.2s ease-in-out;

	-o-transition: all 0.2s ease-in-out;

	-ms-transition: all 0.2s ease-in-out;

	transition: all 0.2s ease-in-out;

	-webkit-transform: rotate(-45deg);

	-moz-transform: rotate(-45deg);

	-o-transform: rotate(-45deg);

	transform: rotate(-45deg);

}

.rotate-box-1:hover.square-icon .rotate-box-icon .fa, 

.rotate-box-1:hover.square-icon .rotate-box-icon .glyphicon, 

.rotate-box-2:hover.square-icon .rotate-box-icon .fa{

	-webkit-transform: rotate(0deg);

	-moz-transform: rotate(0deg);

	-o-transform: rotate(0deg);

	transform: rotate(0deg);

}

/* End rotate box-1 */





/* Begin rotate box-2 */

.rotate-box-2 .rotate-box-icon {

	display: inline-block;

	text-align: center;

	margin-bottom: 15px;

	-webkit-transition: all 0.2s ease-in-out;

	-moz-transition: all 0.2s ease-in-out;

	-o-transition: all 0.2s ease-in-out;

	-ms-transition: all 0.2s ease-in-out;

	transition: all 0.2s ease-in-out;

}



.rotate-box-2.square-icon .rotate-box-icon {

	width: 75px;

	height: 75px;

	line-height: 75px;

	font-size: 36px;

}



.rotate-box-2.square-icon .rotate-box-info {

	margin-top: 30px;

}

/* End rotate box-2 */

/* ===== End rotate boxes ===== */

  

/* ===== Begin Scroll to top button ===== */

.scrolltotop  {

	position: fixed;

	display: none;

	bottom: 20px;

	right: 30px;

	width: 34px;

	height: 34px;

	line-height: 34px;

	text-align: center;

	text-decoration: none;

	z-index: 9999;

	-webkit-transform: rotate(45deg);

	-moz-transform: rotate(45deg);

	-o-transform: rotate(45deg);

	transform: rotate(45deg);

	border: 2px solid #fff;

	display: inline-block;

	margin-top:7px;

	color: #777;

	border: 2px solid #777;

}

a:hover.scrolltotop, a:focus.scrolltotop { color: #777; }

.scrolltotop .fa {

	padding-left: 4px;

	-webkit-transform: rotate(-45deg);

	-moz-transform: rotate(-45deg);

	-o-transform: rotate(-45deg);

	transform: rotate(-45deg);

}  



/* ===== End Scroll to top button ===== */



/* ===== Begin Footer ===== */

.footer p a.scrolltotop { text-decoration:none; }

.footer {

/*	margin-top:20px;*/

	bottom: 0;

	width: 100%;

  /* Set the fixed height of the footer here */

	height: 75px;

	background-color: #000; /*#12b4b5;*/

	color:#fff;

}

.footer p { margin-top:15px; }  

.footer p a { text-decoration:underline; color:#fff; }

.footer p a:hover { text-decoration:none; color:#fff; }



/* ===== End Footer ===== */ 

 

@media (min-width: 768px) {

	#text-carousel-intro-section { height: 100%; }

	#text-carousel-intro-section .caption h1 { font-size:3em; }

	#text-carousel-intro-section .caption p { font-size: 16px;  }



	.navbar-nav { float:right; }

	.navbar-default { background-color:#fff; border-color:#ccc; }

	.navbar-default .navbar-nav>.active>a, 

	.navbar-default .navbar-nav>.active>a:focus, 

	.navbar-default .navbar-nav>.active>a:hover { background-color:#fff; color:#12b4b5; -webkit-box-shadow: inset 0 3px #12b4b5 !important; 	-moz-box-shadow: inset 0 3px #12b4b5 !important; box-shadow: inset 0 3px #12b4b5 !important;}

	.navbar-default .navbar-nav>li>a:focus, 

	.navbar-default .navbar-nav>li>a:hover { color:#fff; background-color:#ffc107; transition: background, .7s;}

	.navbar-nav>li>a { padding-top:27px; padding-bottom:28px; text-transform:uppercase; line-height:24px; font-size:18px; text-shadow:rgba(0,0,0,0.298039) 0px 1px 2px;}

	

	.navbar-default .navbar-collapse, .navbar-default .navbar-form { margin-top:0; }



	h1 { font-size:5em; font-weight:700; text-transform:uppercase; }



	.portfolio-item .portfolio-desc .folio-info { padding: 0 30px 30px 30px; }

	

	#introText h2 { font-size:3em; }



	

}

@media (min-width: 992px) {

	.reason-item .reason { font-size: 500%; }

	.reason-item .blurb { font-size: 130%; top:45%; }

	h4 div.services { margin-top:20px; font-size:1em; }



}

@media (min-width: 1200px) {



}