/*
    Theme Name: myTheme
    Theme URI: https://www.hamiltrowebsitedesign.com
    Description: KATE LIEBERMAN THEME
    Version: 1.
    Author: hamiltro
*/

@font-face {
    font-family: 'Bebas Neue';
    src: url('./assets/fonts/BebasNeue.woff2') format('woff2'),
         url('./assets/fonts/BebasNeue.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'FuturaPT';
	src: url('./assets/fonts/FuturaPT-Light.eot');
	src: url('./assets/fonts/FuturaPT-Light.eot?#iefix') format('embedded-opentype'),
		url('./assets/fonts/FuturaPT-Light.woff') format('woff'),
		url('./assets/fonts/FuturaPT-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
  font-family: 'Amiri-Bold';
  src: url('./assets/fonts/Amiri-Bold.eot');
  src: url('./assets/fonts/Amiri-Bold.eot?#iefix') format('embedded-opentype'),
       url('./assets/fonts/Amiri-Bold.woff') format('woff'),
       url('./assets/fonts/Amiri-Bold.ttf') format('truetype'),
       url('./assets/fonts/Amiri-Bold.svg#Amiri-Bold') format('svg');
}


/* PALETTE / VARIABLES
*****************************************/
:root {
	--color-text: #666;
	--color-background: WHITE;
	--color-a: #444;
	--color-a-hover: #000;
	--color-outline: #DDD; /* tabbing */
	--color-siteTitle: #668198; /* dusky blue */
	--color-siteTitle-hover: #668198; /* dusky blue */
	--color-siteSubTitle: #c49875; /* tan */
	--color-pageTitle: #668198; /* dusky blue */
	--navbar-wrapper-background: TRANSPARENT;
	--mainNav-text-link-color: #c49875; /* tan */
	--mainNav-text-link-hover-color: #444;
	--color-sub-menu-li-bg: rgba(238,245,249,0.98);
	--color-sub-menu-li-bg-hover: rgba(243,250,254,0.98);
	--color-sub-menu-li-border: rgba(209, 230,246,0.25);
	--color-button-a: #666666;
	--color-button-a-border: #CCC; /* pale tan */
	--color-button-a-background: #eee1d7;/* very pale tan */
	--color-button-a-hover: #9d673c!important;
	--color-button-a-hover-border: #d1b197; /* mid-tan */
	--color-button-a-hover-background: #f6f1ed;/* very pale tan */
	--color-border-subtle: TRANSPARENT;
	--form-input-border-color: TRANSPARENT;
	--form-button-bg-color: TRANSPARENT;
	--form-button-text-color: TRANSPARENT;
	--form-button-bg-hover-color: TRANSPARENT;
	--color-wpcf7-sent:  #c49875; /* tan */
	--color-footer-background: #668198; /* dusky blue */
	--color-footer-border: #888;
	--color-footer: #CCC;
	--color-footer-a: #DDD;
	--color-footer-credit: #AAA;
	--color-footer-credit-a:#BBB;
	--color-footer-a-hover:#DDD;

	
	
	--font-siteTitle: 'Bebas Neue', 'Helvetica Neue', sans-serif;
	--font-siteSubTitle: 'FuturaPT', 'Open Sans', sans-serif;
	--font-nav:   'Bebas Neue', 'Helvetica Neue', sans-serif;
	--font-body: 'Open Sans', sans-serif; 
	--font-readMore:  'FuturaPT', 'Open Sans', sans-serif;
	--font-quote: 'Amiri-Slanted', 'Times New Roman', serif;
}
	

/*HEADER: TITLE AREA
****************************************
div.siteTitle {border: 1px solid grey;}
div.mainNavigation  {border: 1px solid grey;}
div.navbar-icon {background-color: yellow;}
div.navbar-collapse {background-color: #e2f6d3;}
*/
	
div.siteTitle.flexItem {
	font-size: 1.2rem;	
	text-transform: uppercase;
	padding-left: 4%;
}

.siteTitle h1 {
	font-size: 1.5em;
	font-weight: normal;
}

@media (max-width: 450px){
	.siteTitle h1 {}
	div.siteTitle.flexItem {}
}

.theMainTitle {
	letter-spacing: 0.01em;
}

.theSubTitle{
	font-weight: 200;
	font-family: var(--font-siteSubTitle);
	text-transform: none;
	font-size: 1.3rem;
}

h1 a span.theSubTitle,
h1 a span.theSubTitle:hover	{
	color: var(--color-siteSubTitle);
}

.pageTitle a {color: var(--color-pageTitle);}

p	{
	margin-bottom: .8em;
}

p.columns {
	column-count:2;
	column-gap: 50px;
	margin: 1.6em auto;
}

@media (min-width: 650px) {
	p.columns {column-count:3;}
}

@media (min-width: 900px) {
	p.columns {column-count:4;}
}

/*HEADER: NAVIGATION AREA
*********************************************/

/*.navbar-wrapper .container	{
	max-width: 1270px;
}*/

.navbar-wrapper	{
	min-height: 130px;
}
.mainNavigation	{
	font-family: var(--font-nav);
}

.menu-main-navigation-container ul.nav.navbar-nav>li.menu-item>a {
	padding: 0 10px 0 0.4em;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: 0.09rem;
}

@media (max-width: 951px) {
	.menu-main-navigation-container ul.nav.navbar-nav>li.menu-item {text-align: center;}
	.menu-main-navigation-container ul.nav.navbar-nav>li.menu-item>a{
	padding: 16px 10px 16px 0.4em;		
	}
}

.navbar-nav > li {padding-top:0;}

.sub-menu {
	width: 130px;
	font-size: 0.8em;
	text-transform: uppercase;
	padding-top:10px;	
}

@media (max-width: 951px)	{
	.sub-menu	{
		width: 100%;
	}
}

.sub-menu > li {
	position: relative;
	text-align: right;
}

.icon-bar,
.navbar-toggle:focus .icon-bar, .navbar-toggle:hover .icon-bar	{
	height: 2px;
	margin: 2.5px;
}

    


/*HOMEPAGE
************************************************************/
section	{
	padding-bottom: 2vh;
}

@media (max-width:650px) and (orientation: portrait) {
	section.bannerImage .sectionInner {padding-top: 2rem;}
}

@media (min-width: 768px)	{
	section.about {margin-bottom: 4rem;}
}

section.bannerImage	{
	height: 15vw;
	min-height: 200px;
	background-color: #245a60;
	background-image: url('./assets/images/banner-BG-602h.jpg');
	background-position: center bottom;
	background-repeat: no-repeat;
	-o-background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

.home section.bannerImage	{
	min-height: 260px;
}



h2.heroTitle{
	text-align: center;
    font-size: 2.1em;
    max-width: 22.5em;
    line-height: 1.3em;
    color: var(--color-pageTitle);
    color: #666;
    text-shadow: 1px 1px 1px rgba(168, 196, 205, 0.5);
}

@media (max-width: 900px)	{
	h2.heroTitle {
		max-width: 80%;
	}
}

@media (max-width: 374px)	{
	h2.heroTitle{line-height: 1.15em;}
}
h2.heroTitle p{
	max-width: none;
	font-family: var(--font-quote);
	font-style: italic;
	font-weight: 300;
	letter-spacing: 2px;
}


.sectionHeader,
h2.pageTitle  {
	font-family: var(--font-siteTitle);
	color: var(--color-pageTitle);
	font-size: 2em;
	text-align: center;
	margin-bottom: 40px;
	font-weight: 200;
	text-transform: uppercase!important;
	letter-spacing: 0.1em;
	padding-top:1em;
	text-shadow: 1px 1px 4px rgba(204,218,225,1);
}

@media (min-width: 651px)	{
	.sectionHeader,h2.pageTitle  {padding-top: .15vh;}
}

.mainContent	{
	min-height: calc(100% - 840px);
}

/*HOMEPAGE WELCOME
**********************************************/

.home section.about .container	{}

.home .aboutThumb	{
	width: 25vh;
	height: 25vh;
	display: inline-block;
	float: left;
	margin: 0 4vh 3vh 0;
}

@media (orientation: portrait) {
	.home .aboutThumb	{width: 25vw; height: 25vw;margin: 0 3vh 2vh 0;}
}

.home .aboutThumb img	{
	border-radius: 50%;
}

.home .aboutText	{
	display, inline-block;

}

.home .aboutText::after	{
	clear:both;
}

/*HOMEPAGE SERVICES
**********************************************/

.serviceExcerpts	{
	width: 100%;
	display: flex; 
	flex-direction: row;
	flex-wrap: wrap;
}

.serviceExcerpt	{
	width: 25%;
	height: 25vw;
	border: 0px solid red;
	padding: 2vw 3vw;
	position: relative;
}
.serviceExcerpt {background-color: rgba(196,152,117,0.1);}
.serviceExcerpt:nth-child(2) {background-color: rgba(196,152,117,0.16);}
.serviceExcerpt:nth-child(3) {background-color: rgba(196,152,117,0.2);}
.serviceExcerpt:nth-child(4) {background-color: rgba(196,152,117,0.12);}

.serviceExcerpt h3	{
	text-align: center;
	margin-bottom: 2vw;
}

/*@media (max-width: 1500px) {
  .serviceExcerpt p {font-size: 90%;line-height: 1.2em;}
}*/

div.readMore	{
	position: absolute;
	right: 10px;
	bottom: 15px;
}

div.readMore a.button:hover	{
	text-shadow: .5px .5px .5px #9d673c;
}

@media (max-width: 1500px)	{
.serviceExcerpt	{ width: 50%; height: 30vw; }
}

@media (max-width: 790px)	{
	.serviceExcerpt	{ width: 100%; height: auto; background-color: transparent !important; 
	padding: 2vw 4%;}
	div.readMore	{position: relative;margin: 40px 0 50px;}
}


/*HOMEPAGE - HOW I WORK WITH CLIENTS
********************************************************/

.sectionDescription	{
	margin-bottom: 100px;
}

section.how-i-work .story	{
	width: 45em;
	max-width: 75%;
	margin: 40px auto 50px;
}

section.how-i-work .story .icon	{
	width: 16vh;
	height: 16vh;
	margin: 0 auto 30px;
	background-image: url('./assets/images/katelieberman-01.svg');
	background-position: center top;
	background-repeat: no-repeat;
	-o-background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

.stories .story:nth-child(2) .icon	{ background-image: url('./assets/images/katelieberman-02.svg'); }
.stories .story:nth-child(3) .icon	{ background-image: url('./assets/images/katelieberman-03.svg'); }
.stories .story:nth-child(4) .icon	{ background-image: url('./assets/images/katelieberman-04.svg'); }

/*ABOUT PAGE
*******************************************************/

.page-about .about_inner	{
	padding-top: 0;
}

.page-about .lft_about	{
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 600px) {
	.page-about .flex {display: block;}
	.page-about .flex > div {width: 100%;}
}

/*SERVICES PAGE
*******************************************************/

.parent-pageid-10 h2.pageTitle::before {
	content: 'Services // ';
}

/*FAQ PAGE
*******************************************************/
section.faq	{
	padding: 0 4%;
}

.faq	{
	margin-bottom: 50px;
}

/*RESOURCE PAGE
*******************************************************/

.page-resources .mainContent ul	{
	list-style: none;
}
  
/*CONTACT PAGE 
*******************************************************/

p.telButton{
	margin: 1.5em 0;
}

.page-contact iframe{
	border: 1px solid var(--color-button-a-background) !important;
	/*box-shadow: 2px 2px 10px var(--color-button-a-background) !important;*/
}


	

/*FOOTER
*******************************************************/

.container.flexContainer.contact	{
	width: 90%;
	max-width: 60rem;
	min-height: 250px;
	padding: 2rem 0 1rem;
	margin: 1rem auto 0rem;
	background-color: rgba(206,221,228,0.7);
	background-color: #ead9c6;
	flex-direction: column;
	background-image: url('./assets/images/seagull-BGx3.png');
	background-image: url('./assets/images/seagull-BGx4.png');
	background-image: url('./assets/images/kate-contact copy-01.jpg');
	background-image: url('./assets/images/kate-contact-03.svg');
	/*background-image: url('./assets/images/kate-contact-04-75pc.png');*/

	background-position: center bottom;
	background-repeat: no-repeat;
}


.container.flexContainer.contact .footerForm	{
	padding: 2rem;
}

@media (min-width: 769px)	{
	.container.flexContainer.contact	{
		flex-direction: row;
	}
}

.container.flexContainer.contact .footerForm h2.sectionHeader,
.container.flexContainer.contact .footerForm.text p	{
	width: 100%;
	max-width: 100%;
	display: block;
	padding: 0 1rem;
	margin: 2rem auto 0;

}

.container.flexContainer.contact .footerForm.text p	{
	color: var(--color-text);
	text-align: left;
	padding: 0 .7rem 0 1.8rem;
	line-height: 1.5em;
}

.footerForm	{
	width: 50%;
}
section.footer a.telLink	{
	color: #222;
}

section.footer  a.telLink:hover	{
	color: BLACK;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

@media (max-width: 768px){
	.footerForm	{width: 100%;}
	.container.flexContainer.contact .footerForm h2.sectionHeader {padding-bottom: 1rem;}
	.container.flexContainer.contact .footerForm.text p	{padding: 0 1.0rem 0 1.3rem;}
	.container.flexContainer.contact .footerForm{padding:  1rem 2rem;}
}

.wpcf7 textarea	{
	height: 7rem;
}

p.copyright	{
	text-align: center;
	font-size: .8rem !important;
	margin: 0 auto 2px !important;
}
p.credit {
	text-align:center;
}

@media (min-width:651px){
	.showmobile{
		display:none;
	}
	/*.sub_service .service:nth-child(odd){
		margin-right: 12px;
	}
	.sub_service .service:nth-child(even){
		margin-left: 12px;
	}*/
}
@media only screen and (max-width: 482px)
{
	.about_section{
		padding-left:10px;
		padding-right:10px;
	}
	.about_content{
	padding-left: 10px;
	padding-right: 10px;
	text-align: left;
}

}
@media (max-width:650px){
	.showdesk{
		display:none;
	}
}

.caret {
display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}