@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

body {
	overflow-x: hidden;
	font-family: 'Lato', sans-serif;
	color: #505962;
}

/*--- Nav Scrolling Offset --*/
.offset:before {
	height: 4rem;
	margin-top: -4rem;
	content: "";
	display: block;
}

/*--- Extra Bootstrap Column Padding --*/
[class*="col-"] {
	padding: 1rem;
}

/*============= NAVIGATION =============*/

.navbar {
	padding: .7rem 1rem;
	text-transform: uppercase;
	font-size: .9rem;
	font-weight: 700;
	letter-spacing: .1rem;
	background: rgba(0, 0, 255, 0.0)!important;
	transition: background-color .5s ease 0s;
}
.navbar-brand img {
	height: 3rem;
}
.svg-inline--fa.fa-w-14 {
	color: blue;
	font-size: 1.6rem;
}

.navbar-nav li {
	padding-right: .8rem;
}
.navbar-nav .nav-link {
	color: grey;
	padding-top: .8rem;
}

.navbar-nav .nav-link.home.active,
.navbar-nav .nav-link.home:hover {
	color: blue;
}
.navbar.solid {
	background: rgba(0, 0, 0, 0.0)!important;
	transition: background-color 1s ease 0s;
}

.navbar-nav .nav-link.features.active,
.navbar-nav .nav-link.features:hover {
	color: blue;
}

.navbar-nav .nav-link.video.active,
.navbar-nav .nav-link.video:hover {
	background: rgba(0, 0, 0, 0.0)!important;
	color: blue;
}

/*============= LANDING PAGE =============*/

.home-inner {
	background-image: url("img/habannernormal2.jpg");
	position: fixed; /* Change to relative to remove fixed style. */
    display: table;
    top: 20px !important;
    left: 20px !important;
    right: 20px !important;
    width: 100% !important; 
    height: 100%;
    background-size: cover;
    background-position: center center;
    -webkit-transform: translateZ(0);
          transform: translateZ(0);
    will-change: transform;
    /*opacity: 0.9;*/
}

.caption {
	width: 100%;
	max-width: 100%;
	position: absolute;
	top: 38%;
	z-index: 1;
}
.caption h1 {
	color: white;
	outline-color: black;
	font-size: 4.5rem;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .3rem;
	text-shadow: .1rem .1rem .8rem black;
	padding-bottom: 1rem;
}
.caption h3 {
	color: white;
	font-size: 2.5rem;
	text-transform: uppercase;
	font-weight: 400;
	text-shadow: .1rem .1rem .5rem black;
	padding-bottom: 2rem;
}

.caption h4 {
	color: black;
	font-size: 2.5rem;
	text-transform: uppercase;
	font-weight: 400;
	text-shadow: .1rem .1rem .5rem black;
	padding-bottom: 2rem;
}
.btn-lg {
	border-width: medium;
	border-radius: 0;
	padding: .8rem 1.5rem;
	font-size: 1.1rem;
	font-weight: 400;
	text-transform: uppercase;
	display: inline-block!important;
}



/*============= FEATURES SECTION =============*/

.narrow {
	width: 75%;
	margin: 0 auto;
	padding-top: 2rem;
}

.narrow h1 {
	color: orange;
}

.btn-sm {
	border-width: medium;
	border-radius: 0;
	padding: .5rem 1.1rem;
	font-size: .9rem;
	font-weight: 400;
	text-transform: uppercase;
	margin: 1rem;
}
.btn-turquoise {
	border-color: #1ebba3;
	background-color: #1ebba3;
	color: white;
}
.btn-turquoise:hover,
.btn-turquoise:focus {
	border-color: #189582;
	background-color: #189582;
	color: white;
}
.jumbotron {
	margin-bottom: 0;
	border-radius: 0;
	padding: 1rem 0 3rem;
}
.videos {
	margin-bottom: 0;
	border-radius: 0;
	background-color: #1ebba3;
	padding: 1rem 0 3rem;
}
.contactus {
	margin-bottom: 0;
	border-radius: 0;
	background-color: #1ebba3;
	padding: 1rem 0 3rem;
}

h3.heading {
	font-size: 1.9rem;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	color: white;
	margin-bottom: 1.9rem;
}
h4.heading {
	font-size: 1.9rem;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	color: black;
	margin-bottom: 1.9rem;
}
.heading-underline {
	width: 3rem;
	height: .2rem;
	background-color: #1ebba3;
	margin: 0 auto 2rem;
}
.feature {
	text-align: center;
}
.feature .fa-layers {
	color: #1ebba3;
	margin: 0 auto;
	width: 3.9rem;
	height: 6rem;
}
.feature h3 {
	font-size: 1.3rem;
	text-transform: uppercase;
	padding-bottom: .4rem;
}
.feature p {
	font-size: 1.1rem;
}

		#videos .inner {
			width: 100%;
			max-width: 150em;
			background: #2c2c32;
			margin: 0 auto;
		}

			@media screen and (max-width: 480px) {

				#videos .inner {
					width: 95%;
				}

			}


		#contactus .inner {
			width: 100%;
			max-width: 150em;
			background: #D3D3D3;
			margin: 0 auto;
		}

			@media screen and (max-width: 480px) {

				#contactus .inner {
					width: 95%;
				}

			}
/* Box */
	.thumbnails {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: stretch;
		-webkit-align-items: stretch;
		-ms-align-items: stretch;
		align-items: stretch;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		-moz-flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	
		.thumbnails .box {
			margin: 0 1em 2em 1em;
			width: 30%;
			height: 40em;
		}

			@media screen and (max-width: 1280px) {

				.thumbnails .box {
					width: 45%;
				}

			}

			@media screen and (max-width: 736px) {

				.thumbnails .box {
					width: 100%;
				}

			}



	.box {
		border-radius: 4px;
		margin-bottom: 2em;
		text-align: center;
	}

	.box2 {
		border-radius: 4px;
		margin-bottom: 2em;
		text-align: center;
	}
		.box > :last-child,
		.box > :last-child > :last-child,
		.box > :last-child > :last-child > :last-child {
			margin-bottom: 0;
		}

		.box .image.fit {
			margin: 0;
		}

		.box .image img {
			border-radius: 4px 4px 0 0;
		}

		.box .inner {
			padding: 1.5em;
			width: 100% !important;
			height: 50% !important;
			background: #D3D3D3 !important; 
		}

			@media screen and (max-width: 480px) {

				.box .inner {
					padding: 1em;
				}

			}

		.box2 .inner {
			padding: 1.5em;
			width: 100% !important;
			height: 50% !important;
			background: #D3D3D3 !important; 
		}

			@media screen and (max-width: 480px) {

				.box2 .inner {
					padding: 1em;
				}

			}			

		.box.alt {
			border: 0;
			border-radius: 0;
			padding: 0;
		}

/* Icon */

	.icon {
		text-decoration: none;
		border-bottom: none;
		position: relative;
		padding: .75em;
		color: blue;
		size: 150%;
	}

		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

		.icon > .label {
			display: none;
			padding: 1.5em;
		}



/* Image */

	.image {
		border-radius: 4px;
		border: 0;
		display: inline-block;
		position: relative;
	}

		.image img {
			border-radius: 4px;
			display: block;
		}

		.image.left, .image.right {
			max-width: 40%;
		}

			.image.left img, .image.right img {
				width: 100%;
			}

		.image.left {
			float: left;
			padding: 0 1.5em 1em 0;
			top: 0.25em;
		}

		.image.right {
			float: right;
			padding: 0 0 1em 1.5em;
			top: 0.25em;
		}

		.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}

		.image.main {
			display: block;
			margin: 0 0 3em 0;
			width: 100%;
		}

			.image.main img {
				width: 100%;
			}

/*============= FIXED BACKGROUND IMG DARK =============*/

#fixed {
	background-image: url('img/fixed/apple.png');
	z-index: -1;
}
.dark {
	background-color: rgba(0, 0, 0, 0.85);
	padding: 3rem 2rem;
	text-align: center !important;
	z-index: 1000!important;
}
.dark h3, .dark p {
	color: #e9ecef;
}

/*============= BEGIN FORM =============*/
.infusion-form {
background-color: black;
align-content: center !important;
display: inline-block !important;
text-align: center !important;
width: 70% !important;
height: 10% !important;
font-size: 80% !important;
padding: 6px 10px !important;
box-sizing: border-box !important;
border: 2px solid #ccc !important;
border-radius: 1px !important;
resize: none !important;
opacity: .75 !important;
color: white !important;
}

/*============= END FORM=============*/

/*============= PORTFOLIO SECTION =============*/

.row.padding {
	padding: 2rem 0 1rem;
}
img.example-image {
	max-width: 100%;
}
.row.no-padding [class*=col-] {
	padding: 0;
}
.portfolio-item img:hover {
	transform: scale(1.3);
	cursor: zoom-in;
}
.portfolio-item img {
	transition: transform .4s ease;
}
.portfolio-item {
	overflow: hidden;
}


/*============= TOP SCROLL =============*/

.top-scroll svg.svg-inline--fa {
	font-size: 3rem;
	height: 1.7rem;
	color: #53595f;
	background: white;
}
a.top-scroll {
	right: 1.2rem;
	bottom: 1.2rem;
	position: fixed;
	opacity: .3;
	z-index: 1000;
	display: none;
}
a.top-scroll:hover {
	opacity: .5;
}

/*============= Footer =============*/
	#footer {
		padding: 4em 0 2em 0;
		background: url('img/footer/footer.png') no-repeat;
		background-color: #1b1b1f;
		top: 20px !important;
		font-size: 0.6em;
		color: white;
		text-align: center;
	}

		#footer .inner {
			width: 50%;
			margin: 0 auto;
		}

			@media screen and (max-width: 980px) {

				#footer .inner {
					width: 75%;
				}

			}

			@media screen and (max-width: 480px) {

				#footer .inner {
					width: 90%;
				}

			}

		#footer .copyright {
			font-size: 1.5em;
			margin: 0 0 2em 0;
			color: white;
			padding: 0;
			text-align: center;
		}

		@media screen and (max-width: 736px) {

			#footer {
				padding: 3em 0 1em 0;
			}

		}



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

/*============= MEDIA QUERIES =============*/

/* Devices under 992px (lg) */
@media only screen and (max-width: 991px) {
	.home-inner {
		background-image: url("img/habannernormal2.jpg") !important;
		position: fixed; /* Change to relative to remove fixed style. */
	    display: table;
	    top: 40px !important;
	    bottom: 20px !important;	    
	    left: 10px !important;
	    right: 20px !important;
	    width: 130% !important; 
	    height: 100%;
	    background-size: cover;
	    background-position: center center;
	    -webkit-transform: translateZ(0);
	          transform: translateZ(0);
	    will-change: transform;
	    /*opacity: 0.9;*/
	}	
	.caption h1 {
		font-size: 3.5rem;
		letter-spacing: .2rem;
		padding-bottom: .8rem;
	}
	.caption h3 {
		font-size: 2.2rem;
		padding-bottom: 1.7rem;
	}
	.btn-lg {
		padding: .7rem 1.2rem;
		font-size: 1rem;
	}
	.narrow h1 {
		font-size: 2.1rem;
	}
}

/* Devices under 768px (md) */
@media only screen and (max-width: 767px) {
	.home-inner {
		background-image: url("img/habannernormal2.jpg") !important;
		position: fixed; /* Change to relative to remove fixed style. */
	    display: table;
	    top: 40px !important;
	    left: 10px !important;
	    right: 20px !important;
	    bottom: 20px !important;
	    width: 120% !important; 
	    height: 100%;
	    background-size: cover;
	    background-position: center center;
	    -webkit-transform: translateZ(0);
	          transform: translateZ(0);
	    will-change: transform;
	    /*opacity: 0.9;*/
	}	
	.caption h1 {
		font-size: 2.7rem;
		letter-spacing: .15rem;
		padding-bottom: .5rem;
	}
	.caption h3 {
		font-size: 1.7rem;
		padding-bottom: 1.2rem;
	}
	.btn-lg {
		padding: .6rem 1.1rem;
		font-size: 1rem;
	}
	.narrow h1 {
		font-size: 1.8rem;
	}
	#fixed {
		background-image: url('img/fixed/apple-mobile.png');
	}
	#fixed-2 {
		background-image: url('img/fixed/office-mobile.png');
	}
	footer {
		background: url('img/footer/footer-mobile.png') no-repeat;
	}
	.clients img {
		max-width: 50%;
		margin: 0 auto;
	}
	.top-scroll {
		display: none!important;
	}
}

/* Devices under 576px (sm) */
@media only screen and (max-width: 575px) {
	.home-inner {
		background-image: url("img/habannernormal2.jpg") !important;
		position: fixed; /* Change to relative to remove fixed style. */
	    display: table;
	    top: 60px !important;
	    bottom: 20px !important;
	    left: 20px !important;
	    right: 20px !important;
	    height: 80%;
	    background-size: cover;
	    background-position: center center;
	    -webkit-transform: translateZ(0);
	          transform: translateZ(0);
	    will-change: transform;
	    /*opacity: 0.9;*/
	}		
	.caption h1 {
		font-size: 1.9rem;
		letter-spacing: .1rem;
		padding-bottom: .4rem;
	}
	.caption h3 {
		font-size: 1.2rem;
		padding-bottom: 1rem;
	}
	.btn-lg {
		padding: .4rem .9rem;
		font-size: .9rem;
	}
	.narrow {
		width: 85%;
	}
}

/* Devices under 576px (sm) */
@media only screen and (max-width: 414px) and (orientation: portrait) {
	.home-inner {
		background-image: url("img/habannermobilep.jpg") !important;
		display: grid !important;
		max-width: 100% !important;
		max-height: 100% !important;
		margin: auto !important;

	}
}



/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/