/* GENERAL */
html {
	overflow-y:scroll;	
}

.modal {
	-webkit-overflow-scrolling: touch;	
}

button,
button:focus {
	outline:none !important;	
	-webkit-box-shadow: none;
   box-shadow: none;
}

body {
	font-family:"Open Sans", sans-serif;	
	position: relative;
	background:#F5F0F0;
	overflow:hidden;
}

*::-moz-selection {
    background: none repeat scroll 0 0 #5AC0E0;
    color: #fff;
}


#view-area {
	width:100%;
	overflow:hidden;	
}

.navbar-toggler {
	padding:0;	
}

.navbar-toggler-icon {
	width:auto;
	height:auto;	
}

/* SIDE NAV*/
body.nav-open {
	overflow:hidden !important;	
}

body.nav-open .sidenav {
	overflow:auto !important;	
	border-right:3px solid #59BFE0;
}
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 10005; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111;
	 overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 32px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

.sidenav img {
	width:80px;
	height:80px;
	margin-left:32px;	
	margin-bottom:15px;
}

#sidenav-open-overlay {
	display:none;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.8);	
	background-image:url(/assets/img/shield-overlay.png);
	cursor:pointer;
	z-index:9997	
}

#sidenav-open-overlay:hover {
	/*background-color:rgba(221,240,213,0.8);	*/
}

#sidenav-open-overlay:hover:after {
	content: "";
	font-family:FontAwesome;
	font-size: 30px;
	position: absolute;
	left: 50%;
	top: 50%;
	background: #6ABD45;
	padding: 10px 20px;
	border-radius: 4px;
	opacity: 1;
	color: #fff;
	font-weight: bold;
	margin-left: -35px;
}

.sidenav .intro {
	padding-bottom:12px;
	padding-left:32px; 
	color:#818181;	
	line-height:1.2;
}

.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	color: #fff;
	display: block;
	transition: 0.3s;
	white-space:nowrap !important;
}

.sidenav a.last {
	margin-bottom:100px;	
}

.sidenav a:hover, .offcanvas a:focus{
	color: #59BFE0;
}

.sidenav hr {
	margin:0;
	border-color:#272727;
}

#main {
	transition: margin-left .5s, margin-right .5s;
}

@media screen and (max-height: 450px) {
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px;}
}

h1, h2, h3, h4, h5, h6 {
	font-family:"Open Sans", sans-serif;	
}

a,
a:focus,
a:active,
a:hover {
	outline:none;	
}

section {
	min-height:460px;	
	position:relative;
}

section.alt {
	background:#f0f3f5;	
}

.box-it {
	background: rgba(255,255,255,0.5);
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	box-shadow: 0px 5px 40px rgba(0,0,0,0.05);
	-moz-box-shadow: 0px 5px 40px rgba(0,0,0,0.05);
	-webkit-box-shadow: 0px 5px 40px rgba(0,0,0,0.05);
}	

@media (max-width:767px) {
	.box-it {
		margin-bottom:30px;
		padding-top:25px;	
	}
}

/* ANIMATIONS */
.anim,
.os-animation {
	opacity:0;	
}

.anim.animated,
.os-animation.animated {
	opacity:1;
}

/* MODALS */


.modal-dialog h1 {
	font-weight:700;
	/*letter-spacing:-2px;*/
	margin-top:0;	
}

/* FORMS */
.form-control {
	border-radius:0 !important;	
	font-size:16px;
	height:auto;
}

textarea.form-control {
	height:150px;	
}

/* BUTTONS */
.btn {
	border:none;
	border-radius:0px !important;	
}

.btn.btn-primary {
	background-color: #5AC0E0;
	color: #fff;
	text-shadow: none;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
}
.btn.btn-primary:hover, 
.btn.btn-primary:focus, 
.btn.btn-primary:active, 
.btn.btn-primary.active, 
.btn.btn-primary[disabled], 
.btn.btn-primary.disabled {
	background-color: #333;
}
.btn.btn-primary:active, 
.btn.btn-primary.active {
	background-color: #5AC0E0;
}

/* PRELOADER */
.preloader {
	position:fixed;
	width:100%;
	height:100%;
	background-color:#fff;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:99999;
	-webkit-transform:translate3d(-900,-100,5100)
}

.preloader .loading-area {
	margin: 0 auto -45px;
	position: relative;
	text-align: center;
	top: 45%;
	width: 200px;
	color:#ddd;
}

.preloader img {
	opacity:0.5;	
}

/* NAVBAR */
nav {
	border-bottom:1px solid #ddd;
	box-shadow:3px 3px 3px rgba(0,0,0,0.02);
	-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.02);
	-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.02);
	transition: all .25s ease-out;
	-webkit-transition: all .25s ease-out;
	-moz-transition: all .25s ease-out;	
	background:#fff;
}

nav a {
	border:none !important;	
}

.logo img {
	width:250px;
	height:40px;	
}
nav li {
	padding-right:0.8rem;
	padding-left:0.8rem;	
}
nav li > a {
	color:#999;	
	font-weight:600;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
	font-size:14px;
	text-decoration:none !important;
	border:none !important;
}


nav li > a.active,
nav li > a:active,
nav li > a:visited,
nav li > a:hover {
	color:#000;	
}

/* INTRO */
#intro {
	overflow:hidden;	
}

#intro .outer-intro-text {
	transform-style: preserve-3d;	
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
}

#intro .inner-intro-text {
	position: relative;
	top: 50%;
	transform:translateY(-50%);
	-moz-transform:translateY(-50%);
	-webkit-transform:translateY(-50%);
 	-ms-transform: translateY(-50%);
}

#intro p {
  font-size: 36px;
  font-weight: normal;
  /*letter-spacing: -2px;*/
  line-height: 1.1;
  color: #aaa;
}

#intro h1 {
  color: #555;
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 1;
}

/* INTRO: MORE BUTTON */
#more-box {
	position:absolute; 
	bottom:0; 
	left:0; 
	width:100%; 
	height:80px;	
}

a.more-button {
	width:55px;
	height:80px;
	margin:20px auto 0px auto;
	display:block;
	position:relative;
	color:#5AC0E0;
	border:5px solid #5AC0E0;
	background-color:#fff;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
}

a.more-button i {
	position:absolute;
	left:8px;
	top:-5px;
	font-size:46px;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
}

a.more-button:hover {
	background:#5AC0E0;
	color:#fff;
	border-color:#5AC0E0;
}

a.more-button:hover i {
	top:10px;	
}



/* SECTION HEADERS */
.section-header {
	background-image:url(/assets/img/background1.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	padding:75px 0;	
	text-align:center;
	margin-bottom:50px;
	border-bottom:5px solid rgba(255,255,255,0.2);
}

.section-header h1 {
	color: #fff;
	font-size: 90px;
	font-weight: 700;
	/*letter-spacing: -2px;*/
	line-height: 1;
	margin-bottom: 15px;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	-moz-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	-webkit-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.section-header h2 {
	color: #fff;
	font-size: 26px;
	font-weight: 100;
	line-height: 1;
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	-moz-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	-webkit-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

/* PORFOLIO */
#portfolio {
	margin-bottom:100px;	
}

#modal-portfolio .modal-body h1 {
	font-size:32px;
	font-weight:bold;
	color:#333;
	margin:0;
	padding:0 0 4px 15px;	
}

#modal-portfolio .modal-body h1 span {
	font-weight:normal;
	color:#ccc;
}

#modal-portfolio .modal-body h2 {
	color:#666;
	font-size:15px;
	font-weight:normal;
	padding:0 0 2px 15px;
	margin:0;	
}

#modal-portfolio .modal-body .project-link {
	padding:0 0 0 15px;	
	font-size:15px;
}

#modal-portfolio .modal-body .project-body {
	padding: 15px;
	font-size: 14px;
	border: 1px dashed #ccc;
	margin: 15px 48px 0px 15px;	
}

#portfolio .section-header {
	background-image:url(/assets/img/background3.jpg);	
}

#portfolio-grid ul {
	list-style:none;
	margin:0;
	padding:0;	
}

#portfolio-grid ul li {
	margin:2px;	
	display:inline-block;
	border:2px solid #fff;	
	box-shadow:0px 3px 8px rgba(0,0,0,0.1);		
}

#portfolio-grid a {
	margin: 0;
	position: relative;
}

#portfolio-grid a img {
	max-width: 100%;
	display: block;
	position: relative;
}

#portfolio-grid a div {
	position: absolute;
	top: 0;
	left: 0;
	padding: 5px;
	background: #2c3f52;
}

#portfolio-grid a div h3 {
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 16px;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	font-weight: bold;
}

/* effect*/
#portfolio-grid a {
	overflow: hidden;
	display:block;
	margin:0;
	padding:0;
}

#portfolio-grid a img {
	transition: transform 0.4s;
}

#portfolio-grid a:hover img {
	transform: translateY(-10px);
}

#portfolio-grid a div {
	height: 100px;
	width: 100%;
	top: auto;
	bottom: 0;
	opacity: 0;
	transform: translateY(100%);
	transition: transform 0.4s, opacity 0.1s 0.3s;
}

#portfolio-grid a:hover div {
	opacity: 1;
	transform: translateY(75px);
	transition: transform 0.4s, opacity 0.1s;
}

/* SERVICES */
#services .icon-boxes {
	text-align:center;
}

#services .badge-set {
	padding:10px 20px 20px 20px;	
}

#services .badge-set span {
	padding:4px 8px;
	border-radius:4px;
	background:#bbbdc0;
	color:#fff;
	margin:0 4px 5px 0;
	font-size:14px;
	display:inline-block;
}

@media (min-width:768px) {
	#services .icon-boxes .row {
		padding-bottom:50px;	
	}
}

#services .icon-boxes i {
	color: #bbbdc0;
	font-size: 120px;
	line-height: 1.2 !important;	
}

@media (max-width:768px) {
	#services .icon-boxes i {
		display:none;
	}
}	

#services .icon-boxes h4 {
	color: #5AC0E0;
	font-size: 30px;
	line-height:1.05;
	font-weight: 700;
	min-height:72px;
	/*letter-spacing: -1px;*/
	margin: 0;
	padding:0 20px 0px 20px;
}

#services .icon-boxes h5 {
 display:none;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  /*letter-spacing: 3px;*/
  text-transform: uppercase;	
}

#services .icon-boxes p {
  margin: 0;
  padding: 10px 20px;
  text-align:left;
  font-size:16px;
  color:#777;
}

/* CONTACT */
#contact {
	padding-bottom:100px;
	border-bottom:1px solid #f8f8f8;	
}

footer a,
#contact a {
	color:#222;
	text-decoration:none;
	border-bottom:1px dashed #666;	
}

footer a:hover,
footer a:focus,
#contact a:hover,
#contact a:focus {
	color:#1c647b;	
	text-decoration:none;
	border-color:#1c647b;	
}

#contact .section-header {
	background-image:url(/assets/img/background2.jpg);
}

#contact .btn {
	font-weight:bold;	
}

#contact .btn i {
	padding-left:5px;
	transition:all 0.5s;
	-webkit-transition:all 0.5s;
}

#contact .btn:hover i {
	padding-left:20px;	
}

.g-recaptcha {
	width:304px;
	margin:0px auto;	
}

#thank-you h1 {
	font-weight:bold;
	margin-top:0;
}

#snailer-the-mailer {
	padding-top:30px; 
	border-top:2px dashed #fff; 
	margin-top:30px;	
}

#snailer-the-mailer a {
	font-weight:600;	
}

/* FOOTER */
footer {
	background-color: #fff;
	border-top: 1px solid #ddd;
	text-align:center;
	padding:50px 0;
}

#copyright-area {
	font-size:12px;
	color:#666;	
}


@media (min-width: 768px) {
	#sidebar {
		display:none !important;	
	}
	
	.navbar-toggle {
		display:none !important;	
	}
	
	.navbar-header {
		float: left;
	}
	
	.navbar-right {
		float: right!important;
		margin-right: -15px;
	}
	
	.navbar-nav>li {
		float: left;
		position: relative;
		display: block;
	}
}

@media (max-width:767px) {
	
	/* NAV */
	.navbar-header {
		padding-top:0;	
	}
	
	.navbar-toggle {
		margin:10px 10px 0 0;
		padding:0;	
	}
	
	a.logo img {
		margin:5px 0 0 5px;
	}	
	
	/* INTRO */
	#intro p {
		font-size:24px;
		/*letter-spacing:0px;*/
		padding-top:10%;
	}
	
	#intro h1 {
		font-size:46px;	
	}
	
	/* SECTION HEADERS */
	.section-header {
		padding:35px 0;	
	}
	
	.section-header h1 {
		font-size:45px;	
	}
	
	.section-header h2 {
		font-size:18px;
		font-weight:400;	
	}
	
	/* OFF CANVAS SIDE NAV */
	.row-offcanvas {
		position: relative;
		transition: all .25s ease-out;
		-webkit-transition: all .25s ease-out;
		-o-transition: all .25s ease-out;
	}
	
	.row-offcanvas-right {
		right: 0;
	}
	
	.row-offcanvas-left {
		left: 0;
	}
	
	.row-offcanvas-right .sidebar-offcanvas {
		right: -80%;
	}
	
	.row-offcanvas-left .sidebar-offcanvas {
		left: -80%;
	}
	
	.row-offcanvas-right.active {
		right: 80%;
	}
	
	.row-offcanvas-right.active .navbar-fixed-top {
		left: -80%;
	}
	
	.row-offcanvas-left.active {
		left: 80%;
	}
	
	.sidebar-offcanvas {
		position: absolute;
		z-index:99999;
		top: 0;
		width: 80%; 
		min-height:1200px;
		box-shadow:-3px 3px 3px rgba(0,0,0,0.1);
		-moz-box-shadow:-3px 3px 3px rgba(0,0,0,0.1);
		-webkit-box-shadow:-3px 3px 3px rgba(0,0,0,0.1);
		-o-box-shadow:-3px 3px 3px rgba(0,0,0,0.1);
		background:#f8f8f8;
		overflow:hidden;
	}
	
	.row-offcanvas .sidebar-panel {
		transition: all .25s ease-out;
		-webkit-transition: all .25s ease-out;
		-o-transition: all .25s ease-out;
		position:absolute;
		top:0;
		left:0;
		width:100%;
	}
		
	
	#sidebar .list-group {
		margin:15px 0 0 0;	
	}
	
	#sidebar .subnav .list-group {
		margin:0;	
	}
	
	#sidebar .sidebar-panel.primary-nav.off-screen {
		margin-left:-100%;	
	}
	
	#sidebar .sidebar-panel.subnav {
		margin-left:100%;
		transition: all .25s ease-out;
		-webkit-transition: all .25s ease-out;
		-o-transition: all .25s ease-out;
	}
	
	#sidebar .sidebar-panel.subnav.active {
		margin-left:0;	
	}
	
	.list-group-item:first-child,
	.list-group-item:last-child {
		border-radius:0;
		-moz-border-radius:0;
		-webkit-border-radius:0;
	}
	
	#sidebar .list-group a {
		font-size:18px;
		border-left:0;
		border-right:0;
	}
	
	#sidebar .list-group a.underlined-item {
		border-bottom:3px solid #ccc;
	}
	
	#sidebar .list-group a.smaller-link {
		font-size:16px;	
	}
	
	#sidebar .list-group a:after {
		font-family:FontAwesome;
		content: "";
		float:right;	
	}
	
	#sidebar .list-group a.has-subnav:after {
		content:"";	
	}
	
	#sidebar a.back-icon {
		background:#fff;
		color:#aaa;
		border:1px solid #ccc;
		margin: 15px auto 15px auto;
		text-align:left;
		height:36px;
		width:36px;
		display:block;
		padding:3px 0 0 5px;
		border-radius:100%;
		-moz-border-radius:100%;
		-webkit-border-radius:100%;
		box-shadow:3px 3px 3px rgba(0,0,0,0.05);
		-moz-box-shadow:3px 3px 3px rgba(0,0,0,0.05);
		-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.05);
	}
	
	#sidebar a.back-icon.close-menu {
		color:#ed9090;
		border-color:#ed9090;
		margin: 15px auto 0 auto;
	}
}

@media (max-width:650px) {
	
}

@media (max-width:500px) {
	
}