/*------------------------------------------------------------------
HTML Tag Styles
------------------------------------------------------------------*/

html, body {
	height: 100%; /*home-slider will not show otherwise. Look into it.*/
}
body {
    background:#F5F6F6;
	color:#55606A;
	font-weight:300;
	font-size:16px;
	font-family: 'Open Sans', sans-serif;
	line-height:1.55; /*slightly larger than bs*/
}

h1, h2, h3 {
	font-weight: 300; /*thinner than bs default*/
}
h1 {
	color: #7DD1E1;
	font-size:48px; /*larger than bs default*/
}

/*-----------------------------------------------------------------------------
Elements
-----------------------------------------------------------------------------*/
.grey-bg {
	background: #f5f6f6;
}
.white-bg {
	background:#FFFFFF;
}

.bordered-icon.border-inverse {
	background-color:#7DD1E1;	
}

@media(max-width:767px) {
	/*boostrap switches to 16px for lead paragraph, but since body default is 16px all the time, we need to increase this*/
	p.lead {
		font-size: 18px;
	}
}
/*-----------------------------------------------------------------------------
Navigation
-----------------------------------------------------------------------------*/
.site-navbar {
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 0;
}
	.site-navbar .navbar-nav > li > a {
		font-weight: 300;
		font-size: 16px;
		text-transform:uppercase;
	}
		.site-navbar .navbar-nav > li > a:hover,
		.site-navbar .navbar-nav > li > a:active {
			color: #7DD1E1;
		}
	.site-navbar.stuck {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 1001;
	}
	.site-navbar .navbar-collapse {
		padding-right: 0; /*avoid the jump when switching to stuck mode*/
		padding-left: 0;
	}
	
/*-----------------------------------------------------------------------------
Pre Loader
-----------------------------------------------------------------------------*/


#jpreOverlay,
#jSplash {
	background-color: #FFFFFF;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 700;
}

#jpreSlide{
	position: absolute;
	top: 50% !important;
	left: 50% !important;
	margin: -50px 0 0 -50px;
	width: 100px;
	height: 100px;
}

#jpreLoader {
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	top: 0 !important;	
}

#jprePercentage {
	width: 50px;
	height: 50px !important;
	line-height: 50px;
	position: absolute !important;
	text-align: center;
	left: 50%;
	top: 50%;
	margin: -25px 0 0 -25px;
	z-index: 800;
	
	font-size: 24px;
	color: #FFFFFF;	

	-webkit-animation: circle 1s infinite forwards;
	   -moz-animation: circle 1s infinite forwards;
		-ms-animation: circle 1s infinite forwards;
		 -o-animation: circle 1s infinite forwards;
			animation: circle 1s infinite forwards;
}

#circle {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 11;
	margin: -50px 0 0 -50px;
	width: 100px;
	height: 100px;
	background: #7DD1E1;
	-webkit-border-radius: 999px;
	-moz-border-radius: 999px;
	border-radius: 999px;
			
	-webkit-animation: circle 1s infinite forwards;
	   -moz-animation: circle 1s infinite forwards;
		-ms-animation: circle 1s infinite forwards;
			animation: circle 1s infinite forwards;
}

@-webkit-keyframes circle {
	0% {-webkit-transform: rotateY(0deg);
		-webkit-animation-timing-function: ease-in;
	}
	50% {-webkit-transform: rotateY(180deg);
		-webkit-animation-timing-function: ease-out;
	}
	100% {-webkit-transform: rotateY(0deg);
		-webkit-animation-timing-function: ease-in;
	}
}

@-moz-keyframes circle {
	0% {-moz-transform: rotateY(0deg);
	}
	50% {-moz-transform: rotateY(180deg);
		-moz-animation-timing-function: ease-out;
	}
	100% {-moz-transform: rotateY(0deg);
		-moz-animation-timing-function: ease-in;
	}
}

@-ms-keyframes circle {
	0% {-ms-transform: rotateY(0deg);
		-ms-animation-timing-function: ease-in;
	}
	50% {-ms-transform: rotateY(180deg);
		-ms-animation-timing-function: ease-out;
	}
	100% {-ms-transform: rotateY(0deg);
		-ms-animation-timing-function: ease-in;
	}
}

@-o-keyframes circle {
	0% {-o-transform: rotateY(0deg);
		-o-animation-timing-function: ease-in;
	}
	50% {-o-transform: rotateY(180deg);
		-o-animation-timing-function: ease-out;
	}
	100% {-o-transform: rotateY(0deg);
		-o-animation-timing-function: ease-in;
	}
}

@keyframes circle {
	0% {transform: rotateY(0deg);
		animation-timing-function: ease-in;
	}
	50% {transform: rotateY(180deg);
		animation-timing-function: ease-out;
	}
	100% {transform: rotateY(0deg);
		animation-timing-function: ease-in;
	}
}

/*-----------------------------------------------------------------------------
Home Slider
-----------------------------------------------------------------------------*/

#home-slider {
	position: relative;
	overflow: hidden;
	height: 100%;
}

#home-slider .overlay { 
	position: absolute;
	width: 100%;
	height: 100%;
	background: #26292E;
	opacity: 0.7;
	filter: alpha(opacity=70);
	z-index: 0;
}

#home-slider .container {
	height: 100%;	
}

#home-slider .container .wrapper {
	position: absolute;
	bottom: 100px;
	left:0;
	width:100%;
	
}

#home-slider .slider-text {
	position: relative;
	z-index: 2;	
	text-align: center;

	background:rgba(0,0,0,0.65);
	padding:15px;
	width:100%;
	display:none; /* since no text in 2015 site version*/
}

	#home-slider .slide-content-alt {
		color:#8BB438;
	}
	
#home-slider #slidecaption {
	float: none;
	text-shadow: none;	
	font-family: 'Open Sans', sans-serif;
	font-size: 60px;
	font-weight: 300;
	color: #FFFFFF;
	letter-spacing: -2px;
	line-height: 1em;
	text-transform: uppercase;
	margin: 0;
}

@media(max-width:767px) {

	#home-slider #slidecaption {
		font-size: 40px;
	}
}
#home-slider .control-nav {
	position: absolute;
	width: 100%;
	background: #F5F6F6;
	height: 50px;
	bottom: 0;
	z-index: 2;
}

#home-slider #nextslide,
#home-slider #prevslide {
	background-image: none;
	background-color: #E0E0E0;
	display: inline-block;
	margin: 0;
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	width: 50px;
	height: 50px;
	opacity: 1;
	filter: alpha(opacity=100);
	
	-webkit-transition: background 0.1s linear 0s;	
	   -moz-transition: background 0.1s linear 0s;
		 -o-transition: background 0.1s linear 0s;
		    transition: background 0.1s linear 0s;
}

#home-slider #nextslide {
	margin-left: -3px;	
}

#home-slider #nextsection {
	float:right;
}

#home-slider #nextslide:hover,
#home-slider #prevslide:hover {
	background-color:#7DD1E1;
}

#home-slider #nextslide i,
#home-slider #prevslide i {
	font-size: 16px;
	color: #FFFFFF;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -7px;
	line-height: 1em;
}

#home-slider #nextslide i {
	margin-left: -8px;	
}

#home-slider #prevslide i {
	margin-left: -9px;	
}

#home-slider ul#slide-list {
	top: 50%;
	padding: 0;
	margin:-6px 0 0 0;	
}

#home-slider ul#slide-list li {
	margin-right: 12px;
}

#home-slider ul#slide-list li:last-child {
	margin-right: 0;	
}

#home-slider ul#slide-list li a {
	background-color: #E0E0E0;
	background-image: none;
	width: 12px;
	height: 12px;
	
	-webkit-border-radius: 999px;
	-moz-border-radius: 999px;
	border-radius: 999px;	
	
	-webkit-transition: background 0.1s linear 0s;	
	   -moz-transition: background 0.1s linear 0s;
		 -o-transition: background 0.1s linear 0s;
		    transition: background 0.1s linear 0s;
}

#home-slider ul#slide-list li a:hover {
	background-color: #7DD1E1;	
}

#home-slider ul#slide-list li.current-slide a,
#home-slider ul#slide-list li.current-slide a:hover {
	background-color:#7DD1E1;
}

#home-slider #nextsection {
	background-color: #E0E0E0;
	margin: 0;
	position: relative;
	float:right;
	width: 50px;
	height: 50px;
	
	-webkit-transition: background 0.1s linear 0s;	
	   -moz-transition: background 0.1s linear 0s;
		 -o-transition: background 0.1s linear 0s;
		    transition: background 0.1s linear 0s;
}

#home-slider #nextsection:hover {
	background-color:#7DD1E1;
}

#home-slider #nextsection i {
	font-size: 16px;
	color: #FFFFFF;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -7px;
	line-height: 1em;
}

#home-slider #nextsection i {
	margin-left: -7px;	
}


/*-----------------------------------------------------------------------------
Map
-----------------------------------------------------------------------------*/

#map-area {
	width: 100%;	
}

.map {
	height: 600px;	
}

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

footer {
	position: relative;
	width: 100%;
	height: auto;
	background: #FFFFFF;
	text-align: center;
	z-index: 99;
}

footer .credits {
	color: #55606A;
	font-size: 13px;
	margin-bottom: 0;
	padding: 20px 0;
	text-transform: uppercase;	
}
/*-----------------------------------------------------------------------------
Back To Top
-----------------------------------------------------------------------------*/

#back-to-top {
	display: none;
	background-color: #E0E0E0;
	margin: 0;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 50px;
	height: 50px;
	z-index: 99;
	
	-webkit-transition: background 0.1s linear 0s;	
	   -moz-transition: background 0.1s linear 0s;
		 -o-transition: background 0.1s linear 0s;
		    transition: background 0.1s linear 0s;
}

#back-to-top:hover {
	background-color:#7DD1E1;
}

#back-to-top i {
	font-size: 16px;
	color: #FFFFFF;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -7px;
	line-height: 1em;
}

#back-to-top i {
	margin-left: -7px;	
}


/*-----------------------------------------------------------------------------
Mobile Nav Button
-----------------------------------------------------------------------------*/


.mobile-nav-btn {
	background: url("../images/menu-mobile.png") 0 0 no-repeat;
	width: 16px;
	height: 16px;
	margin: 22px 15px 0 0;
	border: 0;
	border-radius: 0;
	padding: 0;
}
.mobile-nav-btn.collapsed {
	background-position: 0 0;

	-webkit-transform: rotate(0deg);
	   -moz-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		 -o-transform: rotate(0deg);
			transform: rotate(0deg);
	
	-webkit-transition: -webkit-transform 250ms ease-out 0s;	
	   -moz-transition: -moz-transform 250ms ease-out 0s;
		 -o-transition: -o-transform 250ms ease-out 0s;
		    transition: transform 250ms ease-out 0s;
}

.mobile-nav-btn {
	background-position: 0 -16px;
		  
	-webkit-transform: rotate(-180deg);
	   -moz-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		 -o-transform: rotate(-180deg);
			transform: rotate(-180deg);
	
	-webkit-transition: -webkit-transform 250ms ease-out 0s;	
	   -moz-transition: -moz-transform 250ms ease-out 0s;
		 -o-transition: -o-transform 250ms ease-out 0s;
		    transition: transform 250ms ease-out 0s;	
}

/*-----------------------------------------------------------------------------
Tooltip
-----------------------------------------------------------------------------*/

.tooltip-inner {
  	padding: 16px;
   	-webkit-border-radius: 0;
       -moz-border-radius: 0;
          	border-radius: 0;
  	background-color: #7DD1E1;
  	color: #FFFFFF;
}

.tooltip.top .tooltip-arrow {
	margin-left: -10px;
  	border-width: 10px 10px 0;
  	border-top-color: #7DD1E1;
}

.tooltip.right .tooltip-arrow {
	margin-top: -10px;
  	border-width: 10px 10px 10px 0;
   	border-right-color: #7DD1E1;
}

.tooltip.left .tooltip-arrow {
	margin-top: -10px;
  	border-width: 10px 0 10px 10px;
   	border-left-color: #7DD1E1;
}

.tooltip.bottom .tooltip-arrow {
	margin-left: -10px;
  	border-width: 0 10px 10px;
   	border-bottom-color: #7DD1E1;
}

/*-----------------------------------------------------------------------------
Contact
-----------------------------------------------------------------------------*/

.contact-details h3 {
	color: #4C4F55;
    font-size: 24px;
    font-weight: 300;
    margin-bottom: 30px;
	line-height: 1em;
    text-transform: uppercase;
}

.contact-details ul {
	margin: 0;
	padding: 0;
	list-style: none;	
}

.contact-details ul li {
	margin: 0 0 20px;
	line-height: 28px;
	padding: 0;	
}

#contactForm {
	margin-bottom: 0;	
}

#contactForm p {
	margin-bottom: 1px;	
}

#contactForm input,
#contactForm textarea {
    border: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
    border-radius: 0;
	
    -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	
	background-color: #FFFFFF;
    color: #55606A;
    font-size: 16px;
    height: auto;
    padding: 15px;
	margin: 0;
	
    resize: none;
}

#contactForm input {
    width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#contactForm textarea {
    width: 100%;
	resize: vertical;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#contactForm button {
    background: #E0E0E0;
    color: #55606A;
	font-size:18px;
	border-radius:0;
	margin-top: 30px;
	
	-webkit-transition: background 0.1s linear 0s, color 0.1s linear 0s;	
	   -moz-transition: background 0.1s linear 0s, color 0.1s linear 0s;
		 -o-transition: background 0.1s linear 0s, color 0.1s linear 0s;
		    transition: background 0.1s linear 0s, color 0.1s linear 0s;
}

#contactForm button:hover {
	background: #7DD1E1;
	color: #FFFFFF;
	text-decoration:none;
}



/*-----------------------------------------------------------------------------
About
-----------------------------------------------------------------------------*/


.profile-name {
	margin-bottom: 15px;	
}

.profile-description {
	margin-bottom: 25px;	
}

.image-wrap {
	position: relative;
	overflow: hidden;
	margin-bottom: 25px;
	cursor: pointer;
}

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

.image-wrap  .hover-wrap {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	
	opacity: 0;
	filter: alpha(opacity=0);
	
	-webkit-transition: opacity 250ms ease-out 0s;	
	   -moz-transition: opacity 250ms ease-out 0s;
		 -o-transition: opacity 250ms ease-out 0s;
		    transition: opacity 250ms ease-out 0s;
}

.image-wrap:hover .hover-wrap,
.image-wrap.active .hover-wrap {
	opacity: 1;
	filter: alpha(opacity=100);
}

.image-wrap .hover-wrap .overlay-img {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #7DD1E1;
	
	opacity: 0.45;
	filter: alpha(opacity=45);
}

.image-wrap .hover-wrap .overlay-text-thumb {
	position: absolute;
	width: 100%;
	height: 32px;
	top: 50%;
	margin: -16px 0 0 0;
	color: #FFFFFF;
	font-size: 20px;
	font-weight: 300;
	line-height: 32px;
	text-transform: uppercase;
	text-align: center;
	
	opacity: 1;
	filter: alpha(opacity=100);
}

.social-icons {
	margin: 0;
	padding: 0;
}

.social-icons li {
	display: inline-block;
	margin-left: 15px;	
}

.social-icons li:first-child {
	margin-left: 0;
}

.social-icons li a{
	color: #55606A;
	font-size: 16px;
	line-height: 1em;
	width: 16px;
	height: 16px;
	
	opacity: 0.3;
	filter: alpha(opacity=30);
	
	-webkit-transition: opacity 0.1s linear 0s;	
	   -moz-transition: opacity 0.1s linear 0s;
		 -o-transition: opacity 0.1s linear 0s;
		    transition: opacity 0.1s linear 0s;
}

.social-icons li a:hover{
	opacity: 1;
	filter: alpha(opacity=100);
}


/*-----------------------------------------------------------------------------
Portfolio
-----------------------------------------------------------------------------*/
.isotope-item {
	padding-left: 5px;
	padding-right: 5px;
}
.portfolio-item {
	margin-bottom: 10px;
}
	.portfolio-item > .portfolio-thumbnail {
		position: relative;
		overflow: hidden;
	}
		.portfolio-item > .portfolio-thumbnail img {
			border-radius: 0px;
		}
		.portfolio-item > .portfolio-thumbnail > .mask {
			position: absolute;
			left: 0;
			width: 100%;
			top: 0;
			height: 100%;
			background: #2babcf;
			background: rgba(43, 171, 207, 0.5);
			color: white;
			opacity: 0;
			filter: alpha(opacity=0);
			-webkit-transition: opacity 300ms;
			-o-transition: opacity 300ms;
			transition: opacity 300ms;
		}
		.portfolio-item > .portfolio-thumbnail:hover > .mask {
			opacity: 1;
			filter: alpha(opacity=100);
		}
		.portfolio-item > .portfolio-thumbnail > .mask a {
			color: white;
			margin: 0 3px;
		}
			.portfolio-item > .portfolio-thumbnail > .mask a:hover {
				text-decoration: none;
			}
		.portfolio-item > .portfolio-thumbnail > .mask p {
			position: absolute;
			top: 50%;
			margin-top: -14px;
			left: 50%;
			text-align:center;
			margin-left:-15px;
		}
		.portfolio-item > .portfolio-thumbnail > .portfolio-description {
			padding: 0 5px;
		}


/*-----------------------------------------------------------------------------
Portfolio Filter
-----------------------------------------------------------------------------*/
.portfolioFilter ul {
    z-index: 2;
    padding: 0;
    margin: 0 0 50px;
    list-style: none;
   
}

	.portfolioFilter ul li {
		padding: 0;
		margin-right: 20px;
		display: inline-block;
		-webkit-transition: all 0.3s ease-in-out;
		-moz-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
		.portfolioFilter ul li:last-child {
			margin-right: 0px;
		}
		.portfolioFilter ul li.heading {
			font-size: 24px;
			text-transform: uppercase;
		}

.portfolioFilter a {
	color: #55606A;
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	padding: 0 5px;
}
	.portfolioFilter a.selected {
		background: #7DD1E1;
		color: #FFFFFF;
		text-decoration: none;
	}


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

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


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

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


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

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