/**
 * CSS file for the template-home.php custom page.
 *
 * @package		Canuck WordPress Theme
 * @copyright	Copyright (C) 2017  Kevin Archibald
 * @license		http://www.gnu.org/licenses/gpl-2.0.html
 * @author		Kevin Archibald <www.kevinsspace.ca/contact/>
 */

/* ==================================================================================================
 *                                     Static Home Page Styles 
 * ================================================================================================== */
/*
 *  ========================= Static Home Section 1 ============================ 
 */
.home-1-wide {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-1-wide-overlay {
	width: 100%;
	float: left;
	margin: 0;
	padding: 75px 0 75px 0;
}

.home-1-wrap {
	clear: both;	
	display: block;
	max-width: 1100px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-decoration: none;
	font-size: 1.5em;
	line-height: 1.5em;
	overflow: hidden;
}

.home-1-shortcode,
.home-1-widget {
	width: calc(100% - 20px);
	float: left;
	margin: 0;
	padding: 10px; 
}

.home-1-text {
	width: 90%;
	margin: 10px auto 10px auto;
	padding: 0;
	text-align: center;
}

.home-1-button {
	width: 100%;
	float: left;
	margin: 10px 0 10px 0;
	text-align: center;
}

.home-1-button a.button1 {
	display: inline-block;
	margin: 8px;
	padding: 5px 35px 5px 35px;
	font-size: 1em;
	position: relative;
	opacity: .999;
	border-radius: 3px;
	overflow: hidden;
	transition: all 0.3s;
}

.home-1-button a.button1:before {
	content: '';
	width: 100%;
	top: 0%;
	height: 0;
	opacity: 0;
	position: absolute;
	left: 0;
	z-index: -1;
	transition: all 0.3s;
}

.home-1-button a.button1:hover {
	cursor: pointer;
}

.home-1-button a.button1:hover:before {
	height: 100%;
	opacity: 1;
}

/*
 *  ========================= Static Home Section 2 ============================ 
 */
.home-2-wide {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-2-wide-overlay {
	width: 100%;
	float: left;
	margin: 0;
	padding: 75px 0 75px 0;
}

.home-2-wrap {
	clear: both;	
	display: block;
	max-width: 1100px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-decoration: none;
	overflow: hidden;
}

.home-2-wrap .servicebox {
	display: block;
	width: 33.333%;
	float: left;
	padding: 0;
	text-align: center;
}

.home-2-wrap .servicebox h4 {
	text-align: center;
	margin-top: 10px;
	font-size: 1.5em;
	line-height: 1.5em;
	margin-bottom: 5px;
	padding:0;
}

.home-2-wrap .servicebox-content {
	width: 90%;
	clear: both;
	float: left;
	font-size: 1em;
	line-height: 1.25em;
	padding: 0 5% 0 5%;
	margin: 0;
}

.home-2-wrap .servicebox p {font-size: 1em;}

.home-2-wrap .servicebox ul {margin-left: 4%;}

/* ------- Graphic in Section 2 Service Box ---- */
.section2-graphic {
	display: block;
	margin: 20px auto 0 auto;
	padding: 0 0 10px 0;
	width: 100%;
}

.section2-linked-fi,
.section2-graphic i.no-link
{
	display: block;
	margin: 10px auto 10px auto;
	font-size: 20px;
	background-color: rgba(0,0,0,0);
	border-radius: 50%;
	width: 75px;
	height: 75px;
	line-height: 75px;
	vertical-align: middle;
	text-align: center;
	transition: all 0.5s;
}

.section2-linked-fi:hover{
	font-family: 'FontAwesome', Arial;
	content: "/f0c1";
	cursor: pointer;
	font-size: 30px;
	line-height: 75px;
	width: 75px;
	height: 75px;
	transition: all 0.5s;
}

/* ----- Section 2 images ----- */
.section2-graphic .section2-linked-image,
.section2-graphic img.no-link
{
	opacity: 1;
	display: block;
	position: relative;
	width: 75%;
	height: auto;
	margin: 0 auto 0 auto;
	padding: 0;
	transition: .5s ease;
	backface-visibility: hidden;
}

.section2-linked-image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
}

.section2-image-overlay {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	overflow: hidden;
	width: 100%;
	height:0;
	transition: .5s ease;
}

.section2-graphic:hover .section2-image-overlay {
	bottom: 0;
	height: 100%;
}

.section2-image-overlay i {
	white-space: nowrap; 
	font-size: 20px;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

/* ------ service box buttons --- */
.home-2-button {
	width: 100%;
	clear: both;
	float: left;
	padding: 0;
	margin: 0;
	text-align: center;
}

.home-2-button a.button1 {
	display: inline-block;
	margin: 8px;
	padding: 5px 35px 5px 35px;
	font-size: 1em;
	position: relative;
	opacity: .999;
	border-radius: 3px;
	overflow: hidden;
	transition: all 0.3s;
}

.home-2-button a.button1:before {
	content: '';
	width: 100%;
	top: 0%;
	height: 0;
	opacity: 0;
	position: absolute;
	left: 0;
	z-index: -1;
	transition: all 0.3s;
}

.home-2-button a.button1:hover {
	cursor: pointer;
}

.home-2-button a.button1:hover:before {
	height: 100%;
	opacity: 1;
}

/*
 *  ========================= Static Home Section 3 ============================ 
 */
.home-3-wide {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-3-wide-overlay {
	width: 100%;
	float: left;
	margin: 0;
	padding: 75px 0 75px 0;
}

.home-3-wrap {
	clear: both;	
	display: block;
	max-width: 1100px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-decoration: none;
	font-size: 1.5em;
	line-height: 1.5em;
	overflow: hidden;
}

.home-3-shortcode,
.home-3-widget {
	width: calc(100% - 20px);
	float: left;
	margin: 0;
	padding: 10px;
	text-align: center;
}

.home-3-text {
	width: 90%;
	margin: 10px auto 10px auto;
	padding: 0;
	text-align: center;
}

.home-3-button {
	width: 100%;
	float: left;
	margin: 10px 0 10px 0;
	text-align: center;
}

.home-3-button a.button1 {
	display: inline-block;
	margin: 8px;
	padding: 5px 35px 5px 35px;
	font-size: 1em;
	position: relative;
	opacity: .999;
	border-radius: 3px;
	overflow: hidden;
	transition: all 0.3s;
}

.home-3-button a.button1:before {
	content: '';
	width: 100%;
	top: 0%;
	height: 0;
	opacity: 0;
	position: absolute;
	left: 0;
	z-index: -1;
	transition: all 0.3s;
}

.home-3-button a.button1:hover {
	cursor: pointer;
}

.home-3-button a.button1:hover:before {
	height: 100%;
	opacity: 1;
}

/*
 *  ========================= Static Home Section 4 ============================ 
 */
.home-4-wide {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-4-wide-overlay {
	width: 100%;
	float: left;
	margin: 0;
	padding: 75px 0 75px 0;
}

.home-4-wrap {
	clear: both;	
	display: block;
	max-width: 1100px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-decoration: none;
	overflow: hidden;
}

.home-4-wrap .servicebox {
	display: block;
	width: 50%;
	float: left;
	padding: 0;
	text-align: center;
}

.home-4-wrap .servicebox h4 {
	text-align: center;
	margin-top: 10px;
	font-size: 1.5em;
	line-height: 1.5em;
	margin-bottom: 5px;
	padding:0;
}

.home-4-wrap .servicebox-content {
	width: 90%;
	clear: both;
	float: left;
	font-size: 1em;
	line-height: 1.25em;
	padding: 0 5% 0 5%;
	margin: 0;
}

.home-4-wrap .servicebox p {font-size: 1em;}

.home-4-wrap .servicebox ul {margin-left: 4%;}

/* ------- Graphic in Section 4 Service Box ---- */
.section4-graphic {
	display: block;
	margin: 20px auto 0 auto;
	padding: 0 0 10px 0;
	width: 100%;
}

.section4-linked-fi,
.section4-graphic i.no-link
{
	display: block;
	margin: 10px auto 10px auto;
	font-size: 20px;
	background-color: rgba(0,0,0,0);
	border-radius: 50%;
	width: 75px;
	height: 75px;
	line-height: 75px;
	vertical-align: middle;
	text-align: center;
	transition: all 0.5s;
}

.section4-linked-fi:hover{
	font-family: 'FontAwesome', Arial;
	content: "/f0c1";
	cursor: pointer;
	font-size: 30px;
	line-height: 75px;
	width: 75px;
	height: 75px;
	transition: all 0.5s;
}

/* ----- Section 4 images ----- */
.section4-graphic .section4-linked-image,
.section4-graphic img.no-link
{
	opacity: 1;
	display: block;
	position: relative;
	width: 75%;
	height: auto;
	margin: 0 auto 0 auto;
	padding: 0;
	transition: .5s ease;
	backface-visibility: hidden;
}

.section4-linked-image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
}

.section4-image-overlay {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	overflow: hidden;
	width: 100%;
	height:0;
	transition: .5s ease;
}

.section4-graphic:hover .section4-image-overlay {
	bottom: 0;
	height: 100%;
}

.section4-image-overlay i {
	white-space: nowrap; 
	font-size: 20px;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

/* ------ service box buttons --- */
.home-4-button {
	width: 100%;
	clear: both;
	float: left;
	padding: 0;
	margin: 0;
	text-align: center;
}

.home-4-button a.button1 {
	display: inline-block;
	margin: 8px;
	padding: 5px 35px 5px 35px;
	font-size: 1em;
	position: relative;
	opacity: .999;
	border-radius: 3px;
	overflow: hidden;
	transition: all 0.3s;
}

.home-4-button a.button1:before {
	content: '';
	width: 100%;
	top: 0%;
	height: 0;
	opacity: 0;
	position: absolute;
	left: 0;
	z-index: -1;
	transition: all 0.3s;
}

.home-4-button a.button1:hover {
	cursor: pointer;
}

.home-4-button a.button1:hover:before {
	height: 100%;
	opacity: 1;
}

/*
 *  ========================= Static Home Section 5 ============================ 
 */
.home-5-wide {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-5-wide-overlay {
	width: 100%;
	float: left;
	margin: 0;
	padding: 75px 0 75px 0;
}

.home-5-wrap {
	clear: both;	
	display: block;
	max-width: 1100px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-decoration: none;
	font-size: 1.55em;
	line-height: 1.5em;
	overflow: hidden;
}

.home-5-shortcode,
.home-5-widget {
	width: calc(100% - 20px);
	float: left;
	margin: 0;
	padding: 10px; 
}

.home-5-text {
	width: 90%;
	margin: 10px auto 10px auto;
	padding: 0;
	text-align: center;
}

.home-5-button {
	width: 100%;
	float: left;
	margin: 10px 0 10px 0;
	text-align: center;
}

.home-5-button a.button1 {
	display: inline-block;
	margin: 8px;
	padding: 5px 35px 5px 35px;
	font-size: 1em;
	position: relative;
	opacity: .999;
	border-radius: 3px;
	overflow: hidden;
	transition: all 0.3s;
}

.home-5-button a.button1:before {
	content: '';
	width: 100%;
	top: 0%;
	height: 0;
	opacity: 0;
	position: absolute;
	left: 0;
	z-index: -1;
	transition: all 0.3s;
}

.home-5-button a.button1:hover {
	cursor: pointer;
}

.home-5-button a.button1:hover:before {
	height: 100%;
	opacity: 1;
}

/*
 *  ========================= Static Home Section 6 ============================ 
 */
.home-6-wide {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-6-wide-overlay {
	width: 100%;
	float: left;
	margin: 0;
	padding: 75px 0 75px 0;
}

.home-6-wrap {
	clear: both;	
	display: block;
	max-width: 1100px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-decoration: none;
	overflow: hidden;
}

.home-6-wrap .servicebox {
	display: block;
	width: 50%;
	float: left;
	padding: 0;
	text-align: center;
}

.home-6-wrap .servicebox h4 {
	text-align: center;
	margin-top: 10px;
	font-size: 1.5em;
	line-height: 1.5em;
	margin-bottom: 5px;
	padding:0;
}

.home-6-wrap .servicebox-content {
	width: 90%;
	clear: both;
	float: left;
	font-size: 1em;
	line-height: 1.25em;
	padding: 0 5% 0 5%;
	margin: 0;
}

.home-6-wrap .servicebox p {font-size: 1em;}

.home-6-wrap .servicebox ul {margin-left: 4%;}

/* ------- Graphic in Section 6 Service Box ---- */
.section6-graphic {
	display: block;
	margin: 20px auto 0 auto;
	padding: 0 0 10px 0;
	width: 100%;
}

.section6-linked-fi,
.section6-graphic i.no-link
{
	display: block;
	margin: 10px auto 10px auto;
	font-size: 20px;
	background-color: rgba(0,0,0,0);
	border-radius: 50%;
	width: 75px;
	height: 75px;
	line-height: 75px;
	vertical-align: middle;
	text-align: center;
	transition: all 0.5s;
}

.section6-linked-fi:hover{
	font-family: 'FontAwesome', Arial;
	content: "/f0c1";
	cursor: pointer;
	font-size: 30px;
	line-height: 75px;
	width: 75px;
	height: 75px;
	transition: all 0.5s;
}

/* ----- Section 6 images ----- */
.section6-graphic .section6-linked-image,
.section6-graphic img.no-link
{
	opacity: 1;
	display: block;
	position: relative;
	width: 75%;
	height: auto;
	margin: 0 auto 0 auto;
	padding: 0;
	transition: .5s ease;
	backface-visibility: hidden;
}

.section6-linked-image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
}

.section6-image-overlay {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	overflow: hidden;
	width: 100%;
	height:0;
	transition: .5s ease;
}

.section6-graphic:hover .section6-image-overlay {
	bottom: 0;
	height: 100%;
}

.section6-image-overlay i {
	white-space: nowrap; 
	font-size: 20px;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

/* ------ service box buttons --- */
.home-6-button {
	width: 100%;
	clear: both;
	float: left;
	padding: 0;
	margin: 0;
	text-align: center;
}

.home-6-button a.button1 {
	display: inline-block;
	margin: 8px;
	padding: 5px 35px 5px 35px;
	font-size: 1em;
	position: relative;
	opacity: .999;
	border-radius: 3px;
	overflow: hidden;
	transition: all 0.3s;
}

.home-6-button a.button1:before {
	content: '';
	width: 100%;
	top: 0%;
	height: 0;
	opacity: 0;
	position: absolute;
	left: 0;
	z-index: -1;
	transition: all 0.3s;
}

.home-6-button a.button1:hover {
	cursor: pointer;
}

.home-6-button a.button1:hover:before {
	height: 100%;
	opacity: 1;
}

/*
 *  ========================= Static Home Section 7 ============================ 
 */
.home-7-wide {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-7-wide-overlay {
	width: 100%;
	float: left;
	margin: 0;
	padding: 75px 0 75px 0;
}

.home-7-wrap {
	clear: both;	
	display: block;
	max-width: 1100px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-decoration: none;
	font-size: 1.5em;
	line-height: 1.5em;
	overflow: hidden;
}

.home-7-shortcode,
.home-7-widget {
	width: calc(100% - 20px);
	float: left;
	margin: 0;
	padding: 10px; 
}

.home-7-text {
	width: 90%;
	margin: 10px auto 10px auto;
	padding: 0;
	text-align: center;
}

.home-7-button {
	width: 100%;
	float: left;
	margin: 10px 0 10px 0;
	text-align: center;
}

.home-7-button a.button1 {
	display: inline-block;
	margin: 8px;
	padding: 5px 35px 5px 35px;
	font-size: 1em;
	position: relative;
	opacity: .999;
	border-radius: 3px;
	overflow: hidden;
	transition: all 0.3s;
}

.home-7-button a.button1:before {
	content: '';
	width: 100%;
	top: 0%;
	height: 0;
	opacity: 0;
	position: absolute;
	left: 0;
	z-index: -1;
	transition: all 0.3s;
}

.home-7-button a.button1:hover {
	cursor: pointer;
}

.home-7-button a.button1:hover:before {
	height: 100%;
	opacity: 1;
}

/*
 *  ========================= Static Home Section 8 ============================ 
 */
.home-8-wide {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-8-wide-overlay {
	width: 100%;
	float: left;
	margin: 0;
	padding: 75px 0 75px 0;
}

.home-8-wrap {
	clear: both;	
	display: block;
	max-width: 1100px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-decoration: none;
	overflow: hidden;
}

.home-8-wrap .servicebox {
	display: block;
	width: 25%;
	float: left;
	padding: 0;
	text-align: center;
}

.home-8-wrap .servicebox h4 {
	text-align: center;
	margin-top: 10px;
	font-size: 1.25em;
	line-height: 1.25em;
	margin-bottom: 5px;
	padding:0;
}

.home-8-wrap .servicebox-content {
	width: 90%;
	clear: both;
	float: left;
	font-size: 1em;
	line-height: 1.25em;
	padding: 0 5% 0 5%;
	margin: 0;
}

.home-8-wrap .servicebox p {font-size: 1em;}

.home-8-wrap .servicebox ul {margin-left: 4%;}

/* ------- Graphic in Section 8 Service Box ---- */
.section8-graphic {
	display: block;
	margin: 20px auto 0 auto;
	padding: 0 0 10px 0;
	width: 100%;
}

/* ----- Section 8 font icon ----- */
.section8-linked-fi,
.section8-graphic i.no-link
{
	display: block;
	margin: 10px auto 10px auto;
	font-size: 20px;
	background-color: rgba(0,0,0,0);
	border-radius: 50%;
	width: 75px;
	height: 75px;
	line-height: 75px;
	vertical-align: middle;
	text-align: center;
	transition: all 0.5s;
}

.section8-linked-fi:hover{
	font-family: 'FontAwesome', Arial;
	content: "/f0c1";
	cursor: pointer;
	font-size: 30px;
	line-height: 75px;
	width: 75px;
	height: 75px;
	transition: all 0.5s;
}

/* ----- Section 8 images ----- */
.section8-graphic .section8-linked-image,
.section8-graphic img.no-link
{
	opacity: 1;
	display: block;
	position: relative;
	width: 75%;
	height: auto;
	margin: 0 auto 0 auto;
	padding: 0;
	transition: .5s ease;
	backface-visibility: hidden;
}

.section8-linked-image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
}

.section8-image-overlay {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	overflow: hidden;
	width: 100%;
	height: 0;
	transition: .5s ease;
}

.section8-graphic:hover .section8-image-overlay {
	bottom: 0;
	height: 100%;
}

.section8-image-overlay i {
	white-space: nowrap; 
	font-size: 20px;
	position: absolute;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

/* ------ service box buttons --- */
.home-8-button {
	width: 100%;
	clear: both;
	float: left;
	padding: 0;
	margin: 0;
	text-align: center;
}

.home-8-button a.button1 {
	display: inline-block;
	margin: 8px;
	padding: 5px 35px 5px 35px;
	font-size: 1em;
	position: relative;
	opacity: .999;
	border-radius: 3px;
	overflow: hidden;
	transition: all 0.3s;
}

.home-8-button a.button1:before {
	content: '';
	width: 100%;
	top: 0%;
	height: 0;
	opacity: 0;
	position: absolute;
	left: 0;
	z-index: -1;
	transition: all 0.3s;
}

.home-8-button a.button1:hover {
	cursor: pointer;
}

.home-8-button a.button1:hover:before {
	height: 100%;
	opacity: 1;
}

/*
 *  ========================= Static Home Section 9 ============================ 
 */
.home-9-wide {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-9-wide-overlay {
	width: 100%;
	float: left;
	margin: 0;
	padding: 75px 0 75px 0;
}

.home-9-wrap {
	clear: both;	
	display: block;
	max-width: 1100px;
	margin: 0 auto 0 auto;
	padding: 5px;
	text-decoration: none;
	overflow: hidden;
}

.home-9-title {
	width: 100%;
	float: left;
	text-align: center;
	margin: 0;
	padding: 0;
}

.home-9-title h2 {}

.home-9-text {
	width: 100%;
	float: left;
	text-align: center;
	margin: 15px 0 50px 0;
	padding: 0;
}

.home-9-text p {}

.home-9-columns-3{
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-9-columns-4 {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-9-columns-3 .section9-portfolio-container {
	width: calc(33.333% - 10px);
	float: left;
	position: relative;
	margin: 5px;
	padding: 0;
}

.home-9-columns-4 .section9-portfolio-container {
	width: calc(25% - 10px);
	float: left;
	position: relative;
	margin: 5px;
	padding: 0;
}

.section9-portfolio-container img {
	display: block;
	width: 100%;
	height: auto;
}

.section9-portfolio-container .image-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	width: 0;
	height: 100%;
	transition: .5s ease;
}

.section9-portfolio-container:hover .image-overlay {
	width: 100%;
}

.section9-portfolio-container .image-overlay .overlay-wrap {
	position: relative;
	overflow: hidden;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.section9-portfolio-container:hover .image-overlay .overlay-wrap {
	transition-property: color;
	transition: .5s;
	transition-timing-function: linear;
	transition-delay: .5s;
}

.section9-portfolio-container .image-overlay .links {
	width: 100%;
	float: left;
	clear: both;
	margin: 0;
	padding: 0;
	text-align: center;
}

.section9-portfolio-container .image-overlay .links a {
	margin: 0 0 0 10px;
	padding: 0;
	opacity: 1;
	text-align: center;
	font-size: 1.5em;
	transition-property: color;
	transition: .5s ease;
}

.section9-portfolio-container:hover .image-overlay .links a {
	transition-property: color;
	transition: .5s;
	transition-timing-function: linear;
	transition-delay: .5s;
}

.section9-portfolio-container .image-overlay .links a:hover {
	transition-property: color;
	transition: .25s ease;
}

.section9-portfolio-container .image-overlay .title {
	width: 100%;
	clear: both;
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 1em;
	line-height: 1.25em;
}

.section9-portfolio-container .image-overlay .content{
	width: calc(100% - 10px);
	float: left;
	clear: both;
	margin: 0;
	padding: 0 5px 0 5px;
	text-align: center;
	font-size: .875em;
	line-height: 1.25em;
}

/*
 *  ========================= Static Home Section 10 ============================ 
 */
.home-10-wide {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-10-wide-overlay {
	width: 100%;
	float: left;
	margin: 0;
	padding: 75px 0 75px 0;
}

.home-10-wrap {
	clear: both;	
	display: block;
	max-width: 1100px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-decoration: none;
	overflow: hidden;
}

/* media on the left */
.home-10-media {
	width: calc(50% - 20px);
	float: left;
	margin: 0;
	padding: 0 10px 0 10px;
}

.home-10-shortcode {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-10-widget {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-10-image {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

/* content on the right */
.home-10-content {
	width: calc(50% - 20px);
	float: left;
	margin: 0;
	padding: 0 10px 0 10px;
}

.home-10-title h2 {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
	font-size: 1.5em;
	line-height: 1.25em;
}

.home-10-text {
	width: 100%;
	float: left;
	margin: 20px 0 20px 0;;
	padding: 20px 0 20px 0;
	font-size: 1.25em;
	line-height: 1.25em;
}

.home-10-button {
	width: 100%;
	clear: both;
	float: left;
	padding: 0;
	margin: 0;
	text-align: left;
}

.home-10-button a.button1 {
	display: inline-block;
	margin: 20px 0 0 0;
	padding: 5px 35px 5px 35px;
	font-size: 1em;
	position: relative;
	opacity: .999;
	border-radius: 3px;
	overflow: hidden;
	transition: all 0.3s;
}

.home-10-button a.button1:before {
	content: '';
	width: 100%;
	top: 0%;
	height: 0;
	opacity: 0;
	position: absolute;
	left: 0;
	z-index: -1;
	transition: all 0.3s;
}

.home-10-button a.button1:hover {
	cursor: pointer;
}

.home-10-button a.button1:hover:before {
	height: 100%;
	opacity: 1;
}

/*
 *  ========================= Static Home Section 11 ============================ 
 */
.home-11-wide {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-11-wide-overlay {
	width: 100%;
	float: left;
	margin: 0;
	padding: 75px 0 75px 0;
}

.home-11-wrap {
	clear: both;	
	display: block;
	max-width: 1100px;
	margin: 0 auto 0 auto;
	padding: 0;
	text-decoration: none;
	overflow: hidden;
}

/* media on the left */
.home-11-media {
	width: calc(50% - 20px);
	float: right;
	margin: 0;
	padding: 0 10px 0 10px;
}

.home-11-shortcode {
	width: 100%;
	float: right;
	margin: 0;
	padding: 0;
}

.home-11-widget {
	width: 100%;
	float: right;
	margin: 0;
	padding: 0;
}

.home-11-image {
	width: 100%;
	float: right;
	margin: 0;
	padding: 0;
}

/* content on the right */
.home-11-content {
	width: calc(50% - 20px);
	float: left;
	margin: 0;
	padding: 0 10px 0 10px;
}
.home-11-title h2 {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
	font-size: 1.5em;
	line-height: 1.25em;
}

.home-11-text {
	width: 100%;
	float: left;
	margin: 20px 0 20px 0;;
	padding: 20px 0 20px 0;
	font-size: 1.25em;
	line-height: 1.25em;
}

.home-11-button {
	width: 100%;
	clear: both;
	float: left;
	padding: 0;
	margin: 0;
	text-align: left;
}

.home-11-button a.button1 {
	display: inline-block;
	margin: 20px 0 0 0;
	padding: 5px 35px 5px 35px;
	font-size: 1em;
	position: relative;
	opacity: .999;
	border-radius: 3px;
	overflow: hidden;
	transition: all 0.3s;
}

.home-11-button a.button1:before {
	content: '';
	width: 100%;
	top: 0%;
	height: 0;
	opacity: 0;
	position: absolute;
	left: 0;
	z-index: -1;
	transition: all 0.3s;
}

.home-11-button a.button1:hover {
	cursor: pointer;
}

.home-11-button a.button1:hover:before {
	height: 100%;
	opacity: 1;
}

/*
 *  ========================= Static Home Section 12 ============================ 
 */
.home-12-wide {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-12-wide-overlay {
	width: 100%;
	float: left;
	margin: 0;
	padding: 75px 0 75px 0;
}

.home-12-wrap {
	clear: both;	
	display: block;
	width: 100%;
	margin: 0;
	padding: 5px;
	text-decoration: none;
	overflow: hidden;
}

.home-12-title {
	width: 100%;
	float: left;
	text-align: center;
	margin: 0;
	padding: 0;
}

.home-12-title h2 {}

.home-12-text {
	width: 100%;
	float: left;
	text-align: center;
	margin: 15px 0 50px 0;
	padding: 0;
}

.home-12-text p {}

#home-12-carousel{
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-12 .owl-item-wrap {
	width: 100%;
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
}

.home-12 .owl-item-wrap .image-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	opacity: 0.0;
	transition: .5s ease;
	
}

.home-12 .owl-item-wrap:hover .image-overlay {
	opacity: 1.0;
}

.home-12 .owl-item-wrap .image-overlay .overlay-wrap {
	position: relative;
	overflow: hidden;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.home-12 .owl-item-wrap:hover .image-overlay .overlay-wrap {
	transition-property: color;
	transition: .5s;
	transition-timing-function: linear;
	transition-delay: .5s;
}

.home-12 .owl-item-wrap .image-overlay .links {
	width: 100%;
	float: left;
	clear: both;
	margin: 0;
	padding: 0;
	text-align: center;
}

.home-12 .owl-item-wrap .image-overlay .links a {
	margin: 0 0 0 10px;
	padding: 0;
	opacity: 1;
	text-align: center;
	font-size: 1.5em;
	transition-property: color;
	transition: .5s ease;
}

.home-12 .owl-item-wrap:hover .image-overlay .links a {
	transition-property: color;
	transition: .5s;
	transition-timing-function: linear;
	transition-delay: .5s;
}

.home-12 .owl-item-wrap .image-overlay .links a:hover {
	transition-property: color;
	transition: .25s ease;
}

.home-12 .owl-item-wrap .image-overlay .title {
	width: 100%;
	clear: both;
	float: left;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 1em;
	line-height: 1.25em;
}

.home-12 .owl-item-wrap .image-overlay .content{
	width: calc(100% - 10px);
	float: left;
	clear: both;
	margin: 0;
	padding: 0 5px 0 5px;
	text-align: center;
	font-size: .875em;
	line-height: 1.25em;
}

.home-12 .owl-prev {
	width: 15px;
	height: 100px;
	position: absolute;
	top: 40%;
	left:10px;
	display: block!IMPORTANT;
	font-size: 32px;
}

.home-12 .owl-next {
	width: 15px;
	height: 100px;
	position: absolute;
	top: 40%;
	right: 20px;
	display: block!IMPORTANT;
	font-size: 32px;
}

/*
 *  ========================= Static Home Section 13 ============================ 
 */
.home-13-wide {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-13-wide-overlay {
	width: 100%;
	float: left;
	margin: 0;
	padding: 75px 0 75px 0;
}

.home-13-wrap {
	clear: both;	
	display: block;
	width: 100%;
	margin: 0;
	padding: 5px;
	text-decoration: none;
	overflow: hidden;
}

.home-13-title {
	width: 100%;
	float: left;
	text-align: center;
	margin: 0;
	padding: 0;
}

.home-13-text {
	width: 100%;
	float: left;
	text-align: center;
	margin: 15px 0 50px 0;
	padding: 0;
}

#home-13-carousel{
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

.home-13 .owl-item-wrap {
	width: 100%;
	float: left;
	position: relative;
	margin: 0;
	padding: 0;
}

.home-13 .owl-item-wrap .image-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	opacity: 0.0;
	transition: .5s ease;
}

.home-13 .owl-item-wrap:hover .image-overlay { opacity: 1.0; }

.home-13 .owl-item-wrap .image-overlay .overlay-wrap {
	position: relative;
	overflow: hidden;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}

.home-13 .owl-item-wrap:hover .image-overlay .overlay-wrap {
	transition-property: color;
	transition: .5s;
	transition-timing-function: linear;
	transition-delay: .5s;
}

.home-13 .owl-item-wrap .image-overlay .links {
	width: 100%;
	float: left;
	clear: both;
	margin: 0;
	padding: 0;
	text-align: center;
}

.home-13 .owl-item-wrap .image-overlay .links a {
	margin: 0;
	padding: 0;
	opacity: 1;
	text-align: center;
	font-size: 1.5em;
	transition-property: color;
	transition: .5s ease;
}

.home-13 .owl-item-wrap:hover .image-overlay .links a {
	transition-property: color;
	transition: .5s;
	transition-timing-function: linear;
	transition-delay: .5s;
}

.home-13 .owl-item-wrap .image-overlay .links a:hover {
	transition-property: color;
	transition: .25s ease;
}

.home-13 .owl-prev {
	width: 15px;
	height: 100px;
	position: absolute;
	top: 40%;
	left: 10px;
	display: block!IMPORTANT;
	font-size: 16px;
}

.home-13 .owl-next {
	width: 15px;
	height: 100px;
	position: absolute;
	top: 40%;
	right: 20px;
	display: block!IMPORTANT;
 	font-size: 16px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>  Media Styles */
/* ========================================================================== 900 px */
@media only screen and (max-width:900px){
	.home-1-wide-overlay,
	.home-2-wide-overlay,
	.home-3-wide-overlay,
	.home-4-wide-overlay,
	.home-5-wide-overlay,
	.home-6-wide-overlay,
	.home-7-wide-overlay,
	.home-8-wide-overlay,
	.home-9-wide-overlay,
	.home-10-wide-overlay,
	.home-11-wide-overlay,
	.home-12-wide-overlay,
	.home-13-wide-overlay
	{ padding: 50px 0 50px 0; }
	
	.home-1-wrap {
		font-size: 1.25em;
		line-height: 1.25em;
	}
	
	.home-2-wrap .servicebox h4 {
		font-size: 1.35em;
		line-height: 1.35em;

	}
	
	.home-2-wrap .servicebox-content {
		font-size: 1.0em;
		line-height: 1.25em;
	}
	
	.home-4-wrap .servicebox h4 {
		font-size: 1.35em;
		line-height: 1.35em;
	}
	
	.home-4-wrap .servicebox-content {
		font-size: 1em;
		line-height: 1.25em;
	}
	
	.home-6-wrap .servicebox h4 {
		font-size: 1.35em;
		line-height: 1.35em;
	}
	
	.home-6-wrap .servicebox-content {
		font-size: 1em;
		line-height: 1.25em;
	}
	
	.home-8-wrap .servicebox h4 {
		text-align: center;
		margin-top: 10px;
		font-size: 1.15em;
		line-height: 1.15em;
		margin-bottom: 5px;
		padding:0;
	}
	
	.home-8-wrap .servicebox-content {
		width: 90%;
		clear: both;
		float: left;
		font-size: 0.9em;
		line-height: 1.25em;
		padding: 0 5% 0 5%;
		margin: 0;
	}
	
	.home-8-wrap .servicebox {
		width: 50%;
	}
	
	
	.section9-portfolio-container .image-overlay .title {
		font-size: .925em;
		line-height: 1.25em;
	}
	
	.section9-portfolio-container .image-overlay .content{
		font-size: 0.75em;
		line-height: 1.25em;
	}
	
	.home-9-columns-3 .section9-portfolio-container,
	.home-9-columns-4 .section9-portfolio-container {
		width: calc(50% - 10px);
	}
	
	.home-10-title h2 {
		font-size: 1.25em;
		line-height: 1.25em;
	}
	
	.home-10-text {
		font-size: 1em;
		line-height: 1.25em;
	}

	.home-10-media,.home-10-content {
		width: calc(100% - 20px);
	}
	
	.home-11-title h2 {
		font-size: 1.25em;
		line-height: 1.25em;
	}
	
	.home-11-text {
		font-size: 1em;
		line-height: 1.25em;
	}
	
	.home-11-media,.home-11-content {
		width: calc(100% - 20px);
	}
	
	.home-12 .owl-item-wrap .image-overlay .links a {
		font-size: 1.25em;
	}

	.home-12 .owl-item-wrap .image-overlay .title {
		font-size: .875em;
	}

	.home-12 .owl-item-wrap .image-overlay .content{
		font-size: .75em;
	}
}

/* ===================================================================== 700 */
@media only screen and (max-width:700px){
	/* ------------------- home sections ---------- */
	.home-1-wide-overlay,
	.home-2-wide-overlay,
	.home-3-wide-overlay,
	.home-4-wide-overlay,
	.home-5-wide-overlay,
	.home-6-wide-overlay,
	.home-7-wide-overlay,
	.home-8-wide-overlay,
	.home-9-wide-overlay,
	.home-10-wide-overlay,
	.home-11-wide-overlay,
	.home-12-wide-overlay,
	.home-13-wide-overlay
	{ padding: 35px 0 35px 0; }
}

/* ===================================================================== 480 */
@media only screen and (max-width:480px){
	/* ------- homepage elements ------ */
	.home-1-wide-overlay,
	.home-2-wide-overlay,
	.home-3-wide-overlay,
	.home-4-wide-overlay,
	.home-5-wide-overlay,
	.home-6-wide-overlay,
	.home-7-wide-overlay,
	.home-8-wide-overlay,
	.home-9-wide-overlay,
	.home-10-wide-overlay,
	.home-11-wide-overlay,
	.home-12-wide-overlay,
	.home-13-wide-overlay
	{ padding: 25px 0 25px 0; }
	
	.home-2-wrap .servicebox {
		width: 100%;
	}
	
	.home-4-wrap .servicebox {
		width: 100%;
	}
	
	.home-4-wrap .servicebox.two {
		margin: 25px 0 0 0;
	}
	
	.home-6-wrap .servicebox {
		width: 100%;
	}
	
	.home-6-wrap .servicebox.two {
		margin: 25px 0 0 0;
	}

	.home-8-wrap .servicebox {
		width: 100%;
	}


	.home-12 .owl-item-wrap .image-overlay .links a {
		margin: 0 0 0 5px;
		padding: 0;
		font-size: 1em;
	}

	.home-12 .owl-item-wrap .image-overlay .title {
		display: none;
	}

	.home-12 .owl-item-wrap .image-overlay .content{
		display: none;
	}
	
	.home-13 .owl-item-wrap .image-overlay .links a {
		margin: 0;
		font-size: 1em;
	}
}