/* 
Brent Lafreniere
http://www.tnerb.net

*/

/* Global */
body { background:#f4f4f4; font-family: 'Source Sans Pro', sans-serif;}
html {font-family: 'EB Garamond', serif;}

/* ----- Link Transitions ----- */
.mainContentArea a { -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease; }
.mainContentArea a:hover { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; }

/* ----- Header ----- */
.headerWrap { width:100%; height:100px; /*bottom:0px;*/ z-index:199 !important; position:fixed; top:0;  background:#f4f4f4; }
.header {max-width:1168px; position:relative; margin:0 auto;}



/* ----- Logo ----- */
.logo {float:left; line-height:100px;}  
.logo h1 a{text-decoration:none;  color:#444 !important; font-family: 'Maven Pro', sans-serif;  font-size:15pt; margin-left:15px;}


.menuButton {float:right; text-decoration:none; line-height:100px; color:#444 !important; font-family: 'Maven Pro', sans-serif;  font-size:15pt; margin-right:15px;}
.menuButton:hover { color:#111;}


.headerWrap:hover .menuWrap { opacity:1; -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;}


/* ----- Main Menu ----- */
.menuWrap { height:100px; font-family: font-family: 'Maven Pro', sans-serif;   float:right; margin:0 25px 0 0; opacity:0;
-webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;}

.mainMenu { margin:0 auto; z-index: 99 !important; }
.mainMenu ul { font-size: 13px;  }
.mainMenu ul li a, .mainMenu ul li { float: left; text-decoration: none; color: #444; line-height:100px;}
.mainMenu ul li { list-style: none; position: relative;  }
.mainMenu ul li a { padding: 0 14px; }
.mainMenu ul li:hover { -webkit-transition: 250ms linear all; -moz-transition: 250ms linear all; transition: 250ms linear all; }
.mainMenu ul li a:hover {  color: #666;  }
/* Submenu */
.mainMenu ul li ul {  -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease;display: none; position: absolute; left: 0; top: 100%; margin: 0; z-index: 99 !important; padding: 10px 0 10px; background: #eee;   -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease;}
.mainMenu ul li ul li { padding: 5px 10px; width: 250px; height: 20px; line-height: 20px; border: none; }
.mainMenu ul li ul li:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.mainMenu ul li:hover > ul { display: block;  -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -o-transition: all 0.7s ease;}
.mainMenu ul li ul li, .mainMenu ul li ul li a { float: none; color: #808080; }
.mainMenu ul li ul li { _display: inline; /* for IE6 */ }
.mainMenu ul li ul li a { display: block; padding: 0 5px; }

.mainMenu ul li ul li a, .mainMenu ul li ul li { float: left; text-decoration: none; line-height:20px; }









/* Subsub Menu */
.mainMenu ul li ul li ul { display: none; background: #ddd; padding: 0 0 10px; }
.mainMenu ul li ul li:hover ul { left: 100%; top: 0; }
.mainMenu ul li ul li ul li { }




/** Social Media **/
.socialMedia { text-align:center; display:inline-block;}
.socialMedia ul { }
.socialMedia ul li { float: left; height: 40px; line-height: 40px;}
.socialMedia ul li a { margin: 0 10px; font-size: 1.9em; text-align: center; text-decoration: none; color: #fff; display: inline-block; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.socialMedia ul li a:hover { color:#ccc; }

.socialMedia ul li a.facebook:before { content: "\f09a"; }
.socialMedia ul li a.twitter:before { content: "\f099"; }
.socialMedia ul li a.googleplus:before { content: "\f0d5"; }
.socialMedia ul li a.linkedin:before { content: "\f0e1"; }
.socialMedia ul li a.pinterest:before { content: "\f0d3"; }
.socialMedia ul li a.instagram:before { content: "\f16d"; }
.socialMedia ul li a.youtube:before { content: "\f16a"; }
.socialMedia ul li a.email:before { content: "\f0e0"; }






/** Hero Banner **/
.heroWrap {  position: relative; padding-bottom: 38.25%; padding-top: 25px; height: 0; background-size: cover; max-width:100%; margin:100px auto 0;
background: url(../images/pattern.png), url(../../../data/uploads/contentbanner.jpg); background-position: top center,  top center; background-repeat:repeat,  no-repeat ; background-size:auto, cover; background-attachment:scroll, fixed;
 }
.heroWrap.content{  position: relative; padding-bottom: 36.25%; padding-top: 25px; height: 0; background-size: cover; max-width:1168px; margin:25px auto; }
.hero {max-width:700px; margin:15% auto; text-align:center; }
.hero h1 {color:#fff; font-family: 'Maven Pro', sans-serif;  font-size:4.7vw; }

.hero p { color:#fff;  font-size:1.2em;     max-width:700px; margin:15px auto;}
.hero p a { color: #fff; text-decoration: none;  padding: 5px 10px;  text-transform:uppercase; border:1px solid #fff;  }
.caption p a:hover { color: #eee;  }




/* ----- Content Areas ----- */
.contentArea {max-width:1168px; margin:0 auto; background:#FFF;  }
.mainContentArea {max-width:100%; margin:0px auto; padding:3%; }


/* ----- Text ----- */
.mainContentArea h1 { font-size:24pt; margin:15px 0; color:#4b525d; font-family: 'Maven Pro', sans-serif; }
.mainContentArea h2 { font-size:20pt; margin:15px 0; color:#4b525d; font-family: 'Maven Pro', sans-serif; }
.mainContentArea h3 { font-size:18pt; margin:15px 0; color:#4b525d; font-family: 'Maven Pro', sans-serif; }
.mainContentArea h4 { font-size:16pt; margin:15px 0; color:#4b525d; font-family: 'Maven Pro', sans-serif; }
.mainContentArea h5 { font-size:14pt; margin:15px 0; color:#4b525d; font-family: 'Maven Pro', sans-serif; }
.mainContentArea h6 { font-size:12pt; margin:15px 0; color:#4b525d; font-family: 'Maven Pro', sans-serif; }
.mainContentArea p { font-size:11pt; margin:15px 0; color:#4b525d; font-family: 'Source Sans Pro', sans-serif;}
.mainContentArea b, .mainContentArea strong {font-weight:bold; }
.mainContentArea i, .mainContentArea em  { font-style:italic; }
.mainContentArea a { color:#333; text-decoration:underline; }
.mainContentArea a:hover { color:#2f353f; }

/* ----- Lists ----- */
.mainContentArea ul { font-size:10pt; list-style: none; margin:10px 0 0; font-family: 'Source Sans Pro', sans-serif;  }
.mainContentArea ul li { line-height:15pt; padding:0 0 10px 20px; color:#4b525d;  font-size:11pt; }
.mainContentArea ul li:before {  /* circle bullet */     content:'\2022'; /* Square bullet */ /*content:'\25A0';*/ display: block; position: relative; max-width: 0px; max-height: 0px; left: -15px; top: -2px; color:#4b525d; font-size: 20px; }
.mainContentArea ul li a { color:#2f353f; line-height:11pt; padding:0 0 15px 0px; color:#4b525d;   }

.mainContentArea ol { font-size:10pt; counter-reset:item; margin:10px 0 0; line-height:11pt; color:#4b525d;   }
.mainContentArea ol li { color:#4b525d; display:block; padding:0 0 10px;  }
.mainContentArea ol li:before { color:#4b525d; content:counter(item) ".  "; counter-increment:item; line-height:15pt;   }

/* ----- Extras ----- */
.mainContentArea blockquote  {border-left:2px solid #4b525d; color:#4b525d; font-size:17pt; margin: 15px 40px; padding:15px; line-height:auto; font-family: 'Maven Pro', sans-serif;  }

.mainContentArea img { max-width:100%; }
.mainContentArea hr {border:none; color: #fff; background-color: #ccc; height: 1px;}


/* ----- Tables ----- */
.mainContentArea table { width:100%;  color:#4b525d; border-top:1px solid #eee;  border-left:1px solid #eee; font-size:10pt;  margin: 15px 0;}
.mainContentArea table tr th {}
.mainContentArea table tr td, .mainContentArea table tr th { padding:5px;  border-bottom:1px solid #eee;  border-right:1px solid #eee;  }
.mainContentArea table tr th {  }
.mainContentArea table caption {font-size:16pt; margin:15px 0; font-family: 'Open Sans', sans-serif; }









/* -----  Footer ----- */
.subFooterWrap { width:100%; font-family: 'Source Sans Pro', sans-serif; margin:0; background:#2f353f; padding:55px 0; background:#333; }
.footerWrap { width:100%; font-family: 'Source Sans Pro', sans-serif; margin:0;  padding:55px 0; }
.footerWrap:after  {clear:both; content:"."; display:block; height:0; visibility:hidden;}
.footer { text-align:center;}
.footer p {font-family: 'Source Sans Pro', sans-serif; font-size:1em}
.footer p a { text-decoration:none; color:#111; }


/* ----- To Top ----- */
.toTop {font-size:18pt; position:fixed; right:15px; bottom:15px; color:#444 !important; opacity:.5;}
.toTop:hover {cursor: pointer; color:#444 !important; opacity:.8;} 




/* ----- twoColumn Block  ----- */
.twoColumn {padding:5px 0;}
.twoColumn:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}
.twoColumnLeft {width:48.25%; float:left; margin: 0 3.5% 0 0; }
.twoColumnRight {width:48.25%;  float:left;  }


/* ----- threeColumn Block  ----- */
.threeColumn {padding:5px 0;}
.threeColumn:after {clear:both; content:"."; display:block; height:0; visibility:hidden;}
.threeColumnLeft { float: left; width: 31%; margin: 0 3.5% 0 0;}
.threeColumnMiddle { float: left; width: 31%; margin: 0 3.5% 0 0; }
.threeColumnRight {  float: left; width: 31%; }

/*** Four Column  ***/
.fourColumn { padding:5px 0; }
.fourColumn:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.fourCol { float: left; width: 22%; margin: 0 4% 0 0; }
.fourCol:last-child { width: 22%; margin: 0 0 0 0; }


/*** Sidebar  ***/
.sidebar { margin: 15px auto; }
.sidebar:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }
.sidebarLeft { float: left; width: 74%; }
.sidebarRight { float: right; width: 22%; }











.form-main{	width:100%;	padding-top:0px;}
.form-div {	 width: 100%; margin:15px 0; }
.form-div p {margin:0;}
.feedback-input {
	border:none;
	color:#4b525d;
    font-weight:500;
	font-size: 18px;
	border-radius: 0;
	line-height: 22px;
	background: none;
	padding: 13px 13px 13px 54px;
	margin-bottom: 0px;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
  border-bottom: 1px solid rgba(0,0,0,1);
}

.feedback-input:focus{
	background: none;
	box-shadow: 0;
	border-bottom: 1px solid #4ec6e9;
	color: #4b525d;
	outline: none;
  padding: 13px 13px 13px 54px;
}

.focused{
	color:#4b525d;
	border-bottom: 1px solid #4ec6e9;
	background: none;
}

/* Icons ---------------------------------- */
#name{
	background-image: url(../images/name.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#name:focus{
	background-image: url(../images/name.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}

#email{
	background-image: url(../images/email.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#email:focus{
	background-image: url(../images/email.svg);
	background-size: 30px 30px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}

#comment{
	background-image: url(../images/comment.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

textarea {
    width: 100%;
    height: 150px;
    line-height: 150%;
    resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	background:none;
}

#button-blue{
	width: 100%;
	border: #4b525d solid 4px;
	cursor:pointer;
	background: none;
	color:#4b525d;
	padding-top:22px;
	padding-bottom:22px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
  margin-top:-4px;
  
   font-size:16pt; color:#4b525d; font-family: 'Maven Pro', sans-serif; 
  
}

#button-blue:hover{
	background-color: #4ec6e9;
	color: #fff;
}
	
.submit:hover {
	color: #3498db;
}
	

@media only screen and (max-width: 580px) {
	#form-div{
		left: 3%;
		margin-right: 3%;
		width: 88%;
		margin-left: 0;
		padding-left: 3%;
		padding-right: 3%;
	}
}





.mainMenu ul li:hover > ul {animation-name: hatch;
	-webkit-animation-name: hatch;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

	transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-webkit-transform-origin: 50% 100%; 

	visibility: visible !important;		

}

@keyframes hatch {
	0% {
		transform: rotate(0deg) scaleY(0.6);
	}
	20% {
		transform: rotate(-2deg) scaleY(1.05);
	}
	35% {
		transform: rotate(2deg) scaleY(1);
	}
	50% {
		transform: rotate(-2deg);
	}	
	65% {
		transform: rotate(1deg);
	}	
	80% {
		transform: rotate(-1deg);
	}		
	100% {
		transform: rotate(0deg);
	}									
}

@-webkit-keyframes hatch {
	0% {
		-webkit-transform: rotate(0deg) scaleY(0.6);
	}
	20% {
		-webkit-transform: rotate(-2deg) scaleY(1.05);
	}
	35% {
		-webkit-transform: rotate(2deg) scaleY(1);
	}
	50% {
		-webkit-transform: rotate(-2deg);
	}	
	65% {
		-webkit-transform: rotate(1deg);
	}	
	80% {
		-webkit-transform: rotate(-1deg);
	}		
	100% {
		-webkit-transform: rotate(0deg);
	}		
}





.mainMenu ul li:hover > ul {animation-name: pullDown;
	-webkit-animation-name: pullDown;	

	animation-duration: 1.1s;	
	-webkit-animation-duration: 1.1s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	transform-origin: 50% 0%;
	-ms-transform-origin: 50% 0%;
	-webkit-transform-origin: 50% 0%; 		
}

@keyframes pullDown {
	0% {
		transform: scaleY(0.1);
	}
	40% {
		transform: scaleY(1.02);
	}
	60% {
		transform: scaleY(0.98);
	}
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(0.98);
	}				
	80% {
		transform: scaleY(1.01);
	}
	100% {
		transform: scaleY(1);
	}							
}

@-webkit-keyframes pullDown {
	0% {
		-webkit-transform: scaleY(0.1);
	}
	40% {
		-webkit-transform: scaleY(1.02);
	}
	60% {
		-webkit-transform: scaleY(0.98);
	}
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(0.98);
	}				
	80% {
		-webkit-transform: scaleY(1.01);
	}
	100% {
		-webkit-transform: scaleY(1);
	}		
}






/* ----- Hero Carousel Banner ----- */
.slider {margin:100px 0 0}
.sliderItem { position:relative; }
.caption {width:100%; text-align:center; background: url(../images/pattern.png) 0 0 repeat;; padding:20px 0; position:absolute; top:30%;}
.caption h2 {color:#fff; text-transform:uppercase; font-size:2.6em; margin:15px 0; font-weight:100; font-family: 'PT Sans', sans-serif; }
.caption h2 b, .caption h1 strong {font-weight:900;} 
.caption p { color:#fff;  font-size:1.2em;     max-width:700px; margin:15px auto;}
.caption p a { color: #fff; text-decoration: none;  padding: 5px 10px;  text-transform:uppercase; border:1px solid #fff;  }
.caption p a:hover { color: #eee;  }
/* ----- Owl Banner Nav ----- */
.slider .owl-prev { z-index: 3; position: absolute; top: 36%; left: -4px; text-indent:-999em;  height:84px; width:65px; background:transparent url("../images/slider-nav.png") no-repeat left top; margin-top:-45px;}
.slider .owl-next { z-index: 3; position: absolute; top: 36%; right: -5px; text-indent:-999em; height:84px; width:65px; background:transparent url("../images/slider-nav.png") no-repeat right top; margin-top:-45px;}
/* Gallery Carousel */
.sliderItem .item{ }
.sliderItem .item img{ display: block; width: 100%; height: auto; }







/** Twitter Feed Styles **/
#twitterWrap { width: 100%; font-weight: normal !important;  text-align:center; background:#efefef; }
#twitterWrap .fa-twitter { font-size:45pt; color:#eee; padding:25px 0 0 0;  }
#twitterHolder { width: 100%; height: 13.5em; overflow: hidden; padding:0 0 70px 0; margin:0 auto; }
#twitterFeed { width: 100%; margin:0 auto; position: relative; list-style-type: none; top: 0em !important; font-weight: normal !important; text-align:center;}
#twitterFeed ul li:before {display:none;}
#twitterFeed ul li {  text-decoration: none; margin: 0; padding:0 0 25px 0; color:#424242; font-size:14pt; }
#twitterFeed ul li p { font-family: 'Maven Pro', sans-serif; font-size:.8em;}
#twitterFeed ul li p a { font-family: 'Maven Pro', sans-serif; color:#777; text-decoration:none; margin:0 3px; font-size:.7em;}
#twitterFeed ul li:hover { }

#twitterFeed .user, #twitterFeed .tweet, #twitterFeed .timePosted { padding: 0; margin: 0; }
#twitterFeed .user { display: none; }

#twitterFeed .tweet {  margin:15px 0; color:#4b525d;}
#twitterFeed .tweet a {  color:#424242; }
#twitterFeed .timePosted { font-size: 8pt; font-weight: normal;  color:#424242; }
#twitterFeed .user { }
#twitterFeed .user a { font-size: 9pt; text-decoration: none; color:#4b525d; font-family: 'Maven Pro', sans-serif }
#twitterFeed .user span span { }
#twitterFeed .interact { padding: 0; margin: 0; font-size:14pt; margin:15px 0; color:#4b525d; font-family: 'Maven Pro', sans-serif}
#twitterFeed .interact a { ;}
#twitterFeed .user a > span { }