/*
Theme Name: Cameron
Theme URI: https://hiitlite.com
Author: Cameron
Author URI: https://hiilite.com
Description: Multipurpose Wordpress theme for a simple and clean layout. 
Version: 0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cam-theme
Tags: two-columns, custom-background, custom-colors, footer-widgets

This theme, like WordPress, is licensed under the GPL.
A basic theme layout
*/



*{
  box-sizing: border-box;
}

body, html{
  margin: 0;
  padding: 0;
  font: normal 16px/1.5 Lato, Helvetica, Arial, sans-serif;
  color:#474646;
  font-weight: 300;
}

h1,h2,h3,h4,h5,h6{
	margin-top: 0;
	padding-top: 0;
	margin-bottom: 0;
}
h1{
	font-size: 	64px;
	font-weight: 300;
}
h2{
	font-size: 	48px;
	font-weight: 300;
	 color:#474646;
}
h3{
	font-size: 	32px;
	font-weight: 300;
}
h4{
	font-size: 24px;
}
h5{
	letter-spacing: 0px;
	font-weight: 600;
	margin-top: 0.5em;
	margin-bottom: 1em;
	text-transform: uppercase;
}
.in_grid img{
max-width: 100%;
height: 
auto;
}



figure {
	margin: 0;
/* 	padding: 0; */
/* 	width: 100%; */
}
.center{
	text-align: center;
}

.background-img{
	background-size: cover;
}

.tb-pad{
	padding: 4rem 0em;
}

.tb-pad2{
	padding: 8rem 0;
}
.page-title{
	padding-top: 2em;
}
.text-block{
	padding: 1em;
}
.content{
	width: 100%;
}
.circle{
	border-radius: 100%;
	position: relative;
	padding-top: 100%;
	height: 0;
	overflow: hidden;
	margin: 0;
}

#sidebar .single-post-sidebar h5{
	padding-left: 1.5em;
}
#sidebar .single-post-sidebar .square{
	height: 25%;
	width: 25%;
}

.circle img{
	position: absolute;
	top:0;
	left: 0;
	height: 100%;
	width: auto;
	max-width: none;
	
}
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.wp-caption,
.gallery-caption {
	color: #666;
	font-size: 13px;
	font-size: 0.8125rem;
	font-style: italic;
	margin-bottom: 1.5em;
	max-width: 100%;
}
.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}
.sticky {
	position: relative;
}

.bypostauthor{
	
}

.align-self-center{
	align-self: center;
}
img{
	max-width: 1100px;
}
pre{
	overflow: auto;

}

body .in_grid *{
	max-width: 100%;
}

.button{
	padding: 0.6em 2em .6em 2em;
	text-transform: uppercase;
	border-radius: 2px;
	text-decoration: none;
	font-weight: 300;
	letter-spacing: 1px;
	text-align: center;
}

.button-default{
	color:#2eb6c4;
	background: white;
	border: solid 2px #2eb6c4;
}

.button-primary{
	background:#2eb6c4;
	color:#fff;;
}
.button-secondary{
	color:#474646;
	background: #fff;;
	border: solid 2px #474646;
}
.button-secondary-defined{
	color:#2eb6c4;
	background: rgba(35,182,196,0.4);
	border: solid 2px #2eb6c4;
}

.white{
	color:white;
}

#wp-calendar caption{
	color:#4e3e60;

}

#wp-calendar th{
		color:#8268a0;

}
p{
	font-size: 16px;
}

.main_content{
/* 	padding: 2em 0; */
}
button{
	text-transform: uppercase;
	font-size: 11px;
	padding: 15px 60px;
	height: 46px;
	width: 180px;
/* 	line-height: 200px; */
}
figure{
	margin:0;
}
button.primary{
	color:#fff;
	background: #30b5c4;
	border: 0px solid #30b5c4;
}
button.default{
	background: rgba(0,0,0,0);
	border: 1px solid #474646;
}
#main_header{
  background-color: rgba(0,0,0,0.5);
  /* So when site is scaled logo is not touching sides */
  padding: 10px;
  z-index: 999;
  position: fixed;
  left: 0;
  top:0;
  width: 100%;
}

.in_grid{
  /* This forces the website to be as wide as it can, but still maxes out at 1100px */
  /* Auto forces it to be centered */
  max-width:1100px;
  width:100%;
  margin: auto;
}

.row{
  /* Always contains things that are flexed, columns */
  /* Flex direction is to force the direction */
  display: flex;
  flex-direction: row;
  /* Row is default however wrap is necessary */
  flex-wrap: wrap;
  /* Can only go on flex container */
  
  
 

}

.row-center{
	 align-items: center;
}

/* Flex rule can only be used on elements who are the direct children of a parent with display flex */
/* first is Flex Shrink : tells elements to shrink width where they can */
/* second is flex grow: tells elements to grow where they canvas */

ul.post-categories li {
	display: inline-block;
font-size: 12px;
	
}

.single-gallery img{
	display: inline;
}
.inner-row{
	align-items: flex-start;
}
.flex-item{
  flex: 1 1 auto;
}

.flex-item2{
	flex: 2 2 auto;
}
.align-right{
	text-align: right;
	padding-right: 20px;
	width:50px;
}
.column{
	flex-direction: column;
	justify-content: flex-start;
}

.col-12{
	width:100%;
}

.col-9{
	width: 75%;
}
.col-8{
	width:75%;
}
.col-6{
	width: 50%;
}

.col-4{
	width: 25%;
}
.col-3{
	width: 33%;
}

.col-2{
	
}

.inner-container{
	padding: 2em;
}
.white{
	color:white !important;
}
ul.menu{
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: right;
}


ul.menu li.menu-item{
  display: inline-block;
  padding: 10px;
  position: relative;
  
}

ul.menu li.menu-item a{
  text-decoration: none;
  color: #fff;
  }

ul.menu > li.menu-item:hover > a{
	color:#f2b28a;
}


li.menu-item > ul.sub-menu{
  position: absolute;
/*   background: #fff; */
  border: 1px solid #ccc;
  text-align: left;
  padding: 0;
  opacity: 0;
  transition: all 0.24s ease-out;
  /* Initial Scale  x,y*/
  transform: scale(0,0);
  transform-origin: top left;
}

li.menu-item:hover > ul.sub-menu{
  opacity: 1;
  transform: scale(1,1);
  display: block;
  background: #fff;
  
}

ul.sub-menu > li.menu-item{
	background:#fff;
}
ul.sub-menu > li.menu-item:hover{
	background: #000;
}

ul.sub-menu > li.menu-item:hover > a{
	color:#fff;
}

ul.sub-menu li.menu-item{
  width: 100%;
}


li.menu-2 > ul.sub-menu{
	position: absolute;
    top: 0;
	left:100%;
	color:#fff;
	background: #000;
}
li.menu-2 > ul.sub-menu > li.menu-item{
	background: #000;
}

li.menu-2{
	position: absolute;
}

li.menu-2 > ul.sub-menu > li.menu-item{
	min-width: 75px;
}

li.menu-2 > ul.sub-menu > li.menu-item:hover{
	background: #fff;	
	color:#000;
} 
li.menu-2:hover > ul.sub-menu{
/* 	  overflow: auto; */
transform: scale(1,1);
display: block;
}

ul.sub-menu li.menu-item a{
	color: #000;
}

.sidebar li{
	list-style: none;
}

 a{
	color: #cbb0e8;
}

#sidebar{
	margin: 2em 0;
	background: #f4f4f4;
/* 	padding-top: 1em; */
}
amp-carousel{
/* Incase in older browser */
  display: block;
  position: relative;
/*   padding-top: 10%; */
  
}

amp-carousel .carousel-container{
  position: relative;
  padding-top: 56%;
  
}

amp-carousel .carousel-slide{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;

  display: flex;
}

amp-carousel .slide-content{
  max-width: 1100px;
  margin: auto;
  text-align: center;
}
 .next, .prev{
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	background: white;
	border-radius: 100%;
	width: 30px;
	height: 30px;
	cursor: pointer;
	text-align: center;
	line-height: 30px;
	
}
amp-carousel .dotContainer{
	text-align: center;
    position: absolute;
    bottom: 0;
    /* top: 0; */
    left: 0;
    right: 0;
    margin: auto;
}
amp-carousel .dot {
  cursor: pointer;
  height: 8px;
  width: 8px;
  margin: 10px 2px;
  background-color: rgba(255,255,255,0.3);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

amp-carousel .active, amp-carousel .dot:hover {
  background-color: rgba(255,255,255,0.8) !important;
}
amp-carousel .dot > i{
/* 	display: inline-block; */
}
.next{
	right:10px;
}

 .prev{
	left:10px;
	
}

#welcome-message {
	text-align: center;
	margin: auto;
	max-width: 1100px;
	padding: 100px 0px;
}

#about{
	background: #f2f2f2;
	padding-left: calc((100vw - 1100px)/2);
}

#about .fas{
	color:#c3c3c3;
	font-size: 40px;
	
}

#about #emerald_lake{
	background-image: url(img/Emerald%20lake%205889.png);
	padding: 0;
}
#about #emerald_lake img{
	padding:0;
	max-width: 100%;
	
}

.flex_2x2{
	justify-content: space-between;
	margin: 1em 0 1em 0;
	padding: 1em 0em;	
}

.flex_2x2 .flex-item{
	width:48%;
}

.flex_uneven{
	align-items: stretch;
}

.flex_uneven > .flex-item{
	width: 38%;
}


.portfolio-img{
	position:relative;
	padding-top: 100%;
	overflow:hidden;
	
}

.portfolio-img img{
	position:absolute;
	top:0;
	left:0;
	min-height: 100%;
	max-height: 100%;
}

.portfolio-img figcaption{
	position: absolute;
	top:100%;
	left:0;
	width:100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	color:white;
	text-align: center;
	padding: 60px;
	transition: all 0.4s;
}


.portfolio-img:hover figcaption{
	top:0;
}


#portfolio{
	overflow-x: hidden;
	overflow-y: hidden;
	position: relative;
}

.portfolio-slidearea{
	width: 9000px;
}

#more-info{
	background-color: #474646;
	text-align: center;
}
#more-info div *{
	display: inline-block;
	padding: 1em 4em;
}

#pic-caption{
	padding: 4em 1em;
}

#pic-caption .in_grid{
	max-width: 800px;
}
#pic-caption img{
	width: 100%
}

#pic-caption .col-9{
	padding-left: 5em;
}
#pic-caption figure{
	width:20%;
}

#pic-caption{
	font-weight: 300;
}

.archive-title a, .blog-title a{
	color:#474646;
	font-weight: 400;
}
.archive-title h2{
}
#testimonials{
	background-color: #f2f2f2;
	text-align: center;
	margin: 0 !important;
	padding:  1em 0;
}

#cover-section{
	position: relative;
	padding-top: 30%;
	top:0;
	left:0;

}

#cover-section h1{
	color: #fff;
	
}
.container{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
	display: flex;
}

.content-container{
		margin:auto;
		text-align: center;
		max-width: 1100px;
}

#who-we-are{
	
}

#info{
	background: url(img/about.jpg);

}
#team .row, #recent-posts .row, #services .row{
	justify-content: space-around;
}
#team .team-member{
	padding: 1em;
	border: solid 1px #e4e0e0;
	max-width: 200px;
/* 	width: 20%; */
/* 	margin: 0.5em; */
}

#services .service-item{
	text-align: center;	
	padding: 1em;
	max-width: 200px;
}

#services figure{
/* 	padding: 1em; */
}
#portfolio img{
	width: 100%;
}

#CTA .row{
	align-items: baseline;
}

#CTA h3{
	padding-top: 25px;
}
.quote{
	font-style: italic;
	font-weight: 300;
}
.quoted{
	font-weight: bold;
}
#footer{
	background-color: #474646;
/* 	padding: 2em; */
/* 	margin-top: 2em; */
}

#footer ul{
	list-style: none;
}

#footer .footer-head{
	padding-bottom: 2em;
}

#footer ul li:last-child {
	padding-bottom: 4em; 
}

#footer ul.col-4.flex-item.column {
/*     height:  332px; */
}

s
/* Services second child popus out from right of 5 pages */
/* hovers to all menu itesm, the root black with white background, childen are white with black bacground  */

.attachment-post-thumbnail{
	width: 25%;
	height: auto;
}

section.in_grid.row {
    padding-bottom: 5em;
}

body .in_grid img{
	max-width: 100%;
}
.home .page-title{
	display: none;
}

ul.page-numbers {
    list-style: none;
    margin: 0;
    text-align: center;
    padding: 1em 0em;
}

.page-numbers:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

ul.page-numbers li {
    display: inline-block;
    margin: 0 4px 4px 0;
    text-align: center;
}

.page-numbers a,
.page-numbers span {
    line-height: 1.6em;
    display: block;
    padding: 0 6px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
    border: 1px solid #ddd;
    color: #888;
}

.page-numbers a span { padding: 0 }

.page-numbers a:hover,
.page-numbers.current,
.page-numbers.current:hover {
    color: #000;
    background: #f7f7f7;
    text-decoration: none;
}

.page-numbers:hover { text-decoration: none }
ul.page-numbers .prev, ul.page-numbers .next {
    position: static;
    border-radius: 0;
    background: #474646;
    color: #fff;
    border: none;
}

body.paged ul.page-numbers li:first-child  {
	float: left;	
	
}
ul.page-numbers li:last-child{
	float: right;
	}
	
.blog-post{
		padding: 2em 0 ;
}
.blog .col-8{
/* 	padding-right: 2em; */
}
.blog-post *{
	margin: 0;
/* 	padding: 0; */
}
.blog-post .post-categories{
	padding: 0;
}	
.blog-post .text-block{
	padding: 1em 0;
}
.blog-post h4 .post-categories li a{
	color:#d5d5d5;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1rem;
	
}

.blog .screen-reader-text{
	display: none;
}

.sidebar h4 {
    text-transform:  uppercase;
    font-size:  1.2rem;
    padding: 1em 0;
}

.sidebar ul li a {
    color: #474646;
    text-decoration:  none;
    /* border-bottom: solid #474646 1px; */
    width:  100%;
}

.sidebar ul li {
    border-bottom: solid #d9d9d9 0.5px;
}

.sidebar ul {
    padding:  0;
    margin:  0;
}

.sidebar-container {
    padding: 1.5em;
}

.sidebar .widget_search .search-field {
    border-radius:  0px;
    /* padding:  1em; */
}

.blog .col-8{
	padding-right: 1.5em;
}

.single-post #cover-section{
	padding-top: 15%;
	background-position: bottom;
}
.single-post .page-title h1 {
    font-size: 2.6rem;
    font-weight: 400;
}

.single-post .page- title a {
    color:  #d6d6d6;
}

.single-post .single-categories a {
    color: #c7c7c7;
    text-transform:  uppercase;
    font-weight:  400;
    text-decoration:  none;
    letter-spacing:  0;
}

.single-post .single-categories{
	word-break: break-word;
}

#sidebar .single-post-sidebar span.screen-reader-text {
    display: none;
}
#sidebar .single-post-sidebar li#custom_html-4 {
    padding: 1em 0;
}

#sidebar 
.single-post-sidebar li#custom_html-3 ul li i {
    color: #2eb6c4;
}

#sidebar .single-post-sidebar li#custom_html-3 ul li {
    flex: 1 1 auto;
    border: none;
}

#sidebar .single-post-sidebar li#custom_html-3 ul {
    display:  flex;
}

#sidebar .single-post-sidebar li#custom_html-3 h5 {
    padding: 0.5em 0;
}

div#sidebar .single-post-sidebar p {
    font-size: 0.8rem;
    line-height: 2;
}

.single-post #sidebar{
	margin: 0;
	height: 100%;
}

.single-post .single-container img {
    width:  100%;
    height:  auto;
}


.single-post .s-c-bottom{
	border-top: solid 1px #d5d5d5;
	border-bottom: solid 1px #d5d5d5;
}
.single-post .s-c-bottom {
	padding: 1em 0;
}

.single-post .single-content{
	padding-right: 1em;
	padding-bottom: 1em;
}

#recent-posts .related-post{
	padding: 1em;
}

#recent-posts .related-post img{
	width: 100%;
	height: auto;
	min-height: 100%;
}

#recent-posts {
	padding-bottom: 4em;
}
div#archive-portfolio .portfolio-work {
    padding: 1em;
}

.portfolio-img{
	position:relative;
	padding-top: 100%;
	overflow:hidden;
	
}

.portfolio-img img{
	position:absolute;
	top:0;
	left:0;
	min-height: 100%;
	max-height: 100%;
}

.portfolio-img figcaption{
	position: absolute;
	top:100%;
	left:0;
	width:100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	color:white;
	text-align: center;
	padding-top: 50px;
	transition: all 0.4s;
}


.portfolio-img:hover figcaption{
	top:0;
}


#portfolio{
	overflow-x: hidden;
	overflow-y: hidden;
	position: relative;
}

.portfolio-slidearea{
	width: 9000px;
}

#archive-portfolio {
    width: 100%;
}
.portfolio-work a.button {
    font-size: 0.8rem;
    color: #fff;
    border:  solid #fff 1px;
    padding: 0.5em 1em 0.5em 1em;
}

.opening-text{
	padding: 1em 5em;
}

.single.porfolio {
    padding-bottom: 3em;
}