/*
Theme Name: mortar
Theme URI: http://www.mortaragency.com/
Template: semplice
Version: 1.0
Description: Mortar, a child theme based on semplice
Author: Mark Cervarich
Author URI: http://mark.cervarich.com
*/

/*
Mortar red:  #ED4545
Mortar yellow:  #FED531
light grey: #D8D8D8
Background:  #2D2D2D
orange for reno: #DE6A34
yellow for tyra: #FCE400
*/

@import url("https://www.mortaragency.com/wp-content/themes/semplice/style.css?ver=6.8.3");

/*    NOTES ON BREAKPOINTS


Choosing to do 415px wide or less.  Will cover: 5, 6, 6+ in portrait mode.



*/

@media screen and (max-width: 768px) {
	div.logo img.logo-image {
		width: 65%;
		height: 65%;
		padding-top: 12px;
	}
}

/* need to reset a few of these styles */
#post .wysiwyg a,
.wysiwyg-ce a,
#post .wysiwyg p a,
p.quote a,
.next p a,
.previous p a,
a.page-numbers,
#category-archives nav ul li a,
.cover-headline a {
	color: inherit !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
ol,
p,
ul {
	margin-bottom: 28px;
}

body {
	font-family: "brandon-grotesque";
	color: #000000; /*  Black = #000  */
}

/* ------------------------------

   NAV BAR STUFF

  ------------------------------ */

/* hide the portfolio display button */
a.project-panel-button.menu-icon {
	display: none;
}

.container {
	background-color: #ffffff;
}

.mortar_black {
	color: #000000;
}
.mortar_white {
	color: #ffffff;
}
.mortar_yellow {
	color: #fed531;
}

/* --------------------
         h1

   "headline" is only option
   -------------------- */

h1 {
	font-size: 48px;
	letter-spacing: 3.75px;
	text-transform: uppercase;
	text-align: center;
} /* line-height: 80px; } */

/* h1 headline */
div#content_lrzv342b1 h1,             /* homepage - headline */
div.case-study-hero h1,             /* exploratorium */
div#now_you_wont_forget_any_commas {
	font-weight: 900;
}

/* --------------------
         h2
   -------------------- */
h2 {
	font-size: 45px;
	text-transform: uppercase;
	font-weight: 900;
	text-align: center;
} /* line-height: 65px; */

/* --------------------
         h3

   could be a:

   * module subhead
   * case study subhead
   * pull quote
   -------------------- */
h3 {
	font-size: 28px;
	letter-spacing: 0px;
	text-align: center;
}

/* h3 module subhead */
div#content_k9w247ife h3,            /* footer - module subhead "contact" */
div#content_7p2o46895 h3,            /* home - module subhead "work" */
div#content_0ld4uzanh h3,            /* home - module subhead "services" */
div#content_lrjmop9v1 h3,            /* home - module subhead "about" */
div.challenge-headline h3,            /* work - the challenge */
div.strategic-decision h3,            /* work - strategic decision */
div.a-ha-moment h3,                   /* work - the aha moment */
div.creative-headline h3,            /* work - the creative */
div.creative-writeup h3,            /* work - the creative */
div.full-width-creative h3,            /* work - full width creative*/
div.results h3,            /* work - the results */
div.final-quote h3,            /* work - final-quote */
div#now_you_wont_forget_any_commas {
	/* module subheads are "brandon black" */
	font-weight: 900;
	font-style: normal;
	text-transform: uppercase;
}

.pull-quote h3 {
	text-transform: none !important;
}

div.white-on-dark h3,
div.white-on-dark h4 {
	color: white !important;
}

/* h3 case study */
div.case-study-hero h3,            /* exploratorium */
div#now_you_wont_forget_any_commas {
	/* case studies are "medium" */
	font-weight: 500;
	font-style: normal;
	letter-spacing: 5px;
	text-transform: uppercase;
}

/* h3 pull quote */
div.pull-quote h3,            /* work - pull quote */
div#now_you_wont_forget_any_commas {
	/* pull quotes are "bree bold italic" */
	font-family: "bree-serif";
	font-weight: 700;
	font-style: italic;
	letter-spacing: 0.88px; /* use this for ALL other case studies */
}

/* --------------------
         h4
   -------------------- */
h4 {
	font-size: 21px;
	font-weight: normal;
	letter-spacing: 5px;
	line-height: 32px;
}

/* h4 body copy */
div#now_you_wont_forget_any_commas {
	/* bree, thin 21px */
	font-family: "bree-serif";
	font-size: 16px;
	font-weight: 300;
	font-style: normal;
	line-height: 32px;
	color: #2d2d2d;
}

/* h4 body copy - light */
div#fake_tak_youll_never_see,
div#now_you_wont_forget_any_commas {
	/* bree, light 21px */
	font-family: "bree-serif";
	font-size: 16px;
	font-weight: 300;
	font-style: normal;
	line-height: 24px;
}

/* h4 pull quote */
div.a-ha-moment h4,       /* work - exploratorium - a-ha pull quote */
div#now_you_wont_forget_any_commas {
	/* brandon, light 21px */
	text-transform: uppercase;
	font-size: 21px;
	font-weight: 400;
	font-style: normal;
	color: #2d2d2d;
	letter-spacing: 0px;
	text-align: center;
}

/* --------------------
         h5
   -------------------- */
h5 {
	font-size: 18px;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 5px;
	text-align: center;
	line-height: 28px;
}

/* --------------------
         h6
   -------------------- */
h6 {
	font-size: 16px;
}
/* h6 headline */
div.services-box h6,       /* exploratorium services box */
div#now_you_wont_forget_any_commas {
	font-weight: 900; /* black*/
}

/* --------------------
         p
   -------------------- */
/* body copy */
p,        /* generic p's */
div.challenge-copy p,        /* work - exploratirum -  the challenge */
div#now_you_wont_forget_any_commas {
	/* bree, thin 21px */
	font-family: "bree-serif";
	font-size: 21px;
	font-weight: 300;
	font-style: normal;
	line-height: 32px;
	color: #2d2d2d;
}

/*
header,
.nav-wrapper { display: none !important; }
header,
#navbar,
#navbar-bg {
    display: none;
}

#navbar.navbar-fixed,
#navbar-bg.navbar-fixed {
    display: block;
}
*/

#navbar .controls a.close-nav .nav-icon::after,
#navbar .controls a.close-nav .nav-icon::before {
	background-color: #000;
}

#wrapper #content {
	top: 0px !important;
}

/* Let's use the custom semplice IDs in order to figure out which colors are to be used.  To do this, view source on a page.  Then look for:
<div id="content-holder">
   <div id="content_xxxxxxx" ....> .... </div>
   <div id="content_yyyyyyy" ....> .... </div>
   <div id="content_zzzzzzz" ....> .... </div>
</div>

So, you can specify how classes will behave inside that div id
*/

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

          HOME PAGE

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

/*
   Page:        homepage
   Description: Gut punch w/ background video
   Content id:  content_lrzv342b1
*/

div#content_lrzv342b1 {
	background-color: #000;
}
/* h1 headline */
div#content_lrzv342b1 h1 {
	color: #ffffff;
	margin: 0 20px 0 20px;
}
div.homepage-hero h1 {
	text-align: left !important;
	font-size: 100px !important;
	line-height: 80px;
}

/*
   Page:        homepage
   Description: Gut punch w/ background video
   Content id:  content_lrzv342b1

   Padding done in editor -- top: 30px / bottom: 300px;
   2 cols / 8 cols content / 2 cols
*/

div#content_lrzv342b1 h1 {
	color: #ffffff;
}

/*
   Page:        homepage
   Description: mission: heighten anticipation
   Content id:  content_y2ur7fnb4

   Padding done in editor -- top/bottom: 170px;
   3 cols / 6 cols content / 3 cols

   This is a "pull quote"

div#content_y2ur7fnb4 h3 {
    color: #FFFFFF;
    font-family: BreeSerif-BoldItalic;
    text-transform: none;
    font-style: italic;
}
*/

/*
   Page:        homepage
   Description: work
   Content id:  content_7p2o46895

   Description: work nav list
   Content id:  content_iweekp2rx

   Padding done in editor -- top: 100px  / bottom: 110px;
   3 cols / 6 cols content / 3 cols

   This is a selection for different case studies

*/

div#content_7p2o46895 {
	background-color: #fff; /* white = #FFF */
	text-align: center;
}

div#content_iweekp2rx {
	/* do padding in semplice editor padding-top: 80px; */
}

/* hiding these until we have more of them */
div.work-nav {
	/*display: none;*/
}

div.work-nav ul {
	list-style: none;
	text-align: center;
	padding: 0;
	margin: 0;
}

div.work-nav li {
	display: inline-block;
	padding: 0 0 0 0;
	margin: 0 10px 0 10px;
}
div.work-nav li h3 {
	font-size: 23px; /* because destinations & experiences is soooo wide */
}

div#content_iweekp2rx li:hover {
	border-bottom: 4px solid #ed4545; /* red = #ED4545 */
}

div#content_iweekp2rx a {
	display: block;
	text-transform: uppercase;
	/* brandon med 24px */
	font-weight: 500px;
	font-style: normal;
	letter-spacing: 0px;
	color: #9b9b9b !important;
}

/*
   Page:        homepage
   Description: Work blocks -- 400x400 squares
   Content id:  content_877xtu7ks


*/
/*
div#content_877xtu7ks div.masonry-span4.masonry-item {
    width: 400px;
    height: 400px;
}



div#content_877xtu7ks div.mc-sub-content-container,
div#content_877xtu7ks div.mc-sub-content-container div.wysiwyg-ce,
div#content_877xtu7ks div.mc-sub-content-container div.wysiwyg-ce div.work-grid-link {
    width: 100%;
    height: 100%;
}

div#content_877xtu7ks h4,
div#content_877xtu7ks div.work-grid-link h4 {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    text-align: center;
    color: white !important;
    text-transform: uppercase;
    font-weight: bold;
}*/

div.work-grid-link {
	text-align: center;
	cursor: pointer;
	color: white !important;
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	background-color: rgba(237, 69, 69, 0.6);
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

div.work-grid-link h4 a {
	border-bottom: 0px solid rgba(255, 255, 255, 0.3);
	background: transparent;
	margin: 170px 40px 0px 40px;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	color: #fff;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	font-size: 0px;
}

div.work-grid-link:hover {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=92)";
	filter: alpha(opacity=92);
	opacity: 0.92;
}

div.work-grid-link:hover h4 a {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=92)";
	filter: alpha(opacity=92);
	opacity: 0.92;
	color: white !important;
	font-size: 21px;
	text-align: center;
}

/*
   Page:        homepage
   Description: services
   Content id:  content_0ld4uzanh  (headline)
   Content id:  content_7gq35b4ei  (services-body)

   Padding done in editor -- top: 100px  / bottom: 110px;
   3 cols / 6 cols content / 3 cols

   For the mdash, have people use this code:
   <h3 class="mdash-red">—</h3>

*/

/*
   Page:        homepage
   Description: services headline
   Content id:  content_0ld4uzanh
*/

div.services div.services-intro,
div.services div.services-intro h4,
div.services div.services-list p {
	font-family: "brandon-grotesque";
	font-size: 16px;
	margin-bottom: 8px;
	line-height: 2.2em;
	text-align: center;
}

div.services div.services-intro h4,
div.services div.services-intro {
	font-weight: bold;
	line-height: 1.2em;
	margin-bottom: 30px;
}

/* h6 brandon reg 16 */
/*
div#content_7gq35b4ei p {
    line-height: 28px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    padding-left: 25%;
}
*/

/*
   Page:        homepage
   Description: about
   Content id:  content_lrjmop9v1

   Description: about body
   Content id:  content_vx291x5kp

   Padding done in editor -- top: 100px  / bottom: 200px;
   2 cols / 8 cols content / 2 cols

   Remove Gutter: Yes
   Fluid Layout:  No


   For the mdash, have people use this code:
   <h3 class="mdash-red">—</h3>

*/

div#content_lrjmop9v1 {
	background-color: #fff; /* white = #FFF */
}

div.about p {
	/* bree thin 21px */
	font-family: "bree-serif";
	font-size: 21px;
	font-weight: 300;
	font-style: normal;
}

/*
should be handled by mobile only at bottom
@media screen and (max-width:768px) {
    div#content_vx291x5kp p {
        font-size: 16px;
        padding: 0 10px;
    }
}
*/

/*
   Page:        homepage
   Description: footer
   Content id:  content_k9w247ife

   Description: footer - main

   Remove Gutter: Yes
   Fluid Layout:  No

*/

/* Mortar logo - has padding in editor */

div.mortar-footer h2 {
	font-size: 36px;
	text-transform: uppercase;
	font-weight: 700;
	text-align: left;
	letter-spacing: 7px;
}

div.mortar-footer a:hover {
	color: #aaaaaa !important;
}

div.mortar-footer p {
	color: #ffffff; /* white = #FFFFFF */
}
@media screen and (max-width: 768px) {
	div.mortar-footer p {
		font-size: 16px;
		line-height: 26px;
	}
}

/*
http://mortarv2.pcfog.com/wp-content/uploads/newsletter-form.png
/wp-content/uploads/newsletter-signup.jpg
*/

#newsletter-signup {
	width: initial;
}
#newsletter-signup {
	margin-left: 0px;
	margin-right: 12px;
	margin-bottom: 18px;
}

/* ---- */

#newsletter-signup {
	width: 440px;
	float: left;
}
#newsletter-signup h3 {
	font-family: "NewsGothicBT-BoldCondensed";
	font-weight: normal !important;
	font-size: 18px;
	color: #000000;
	padding-top: 0px;
	margin-top: 0px;
}
#newsletter-signup .input-back {
	float: left;
	width: 344px;
	height: 70px;
	background: url("/wp-content/uploads/newsletter-signup-v2.jpg") 0 0
		no-repeat;
}
#newsletter-signup .input-back input {
	color: #b2b2b2;
	font-family: Arial;
	font-size: 18px;
	margin-top: 26px;
	margin-left: 26px;
	width: 294px;
	border: none;
}
#newsletter-signup a#submit-newsletter {
	display: block;
	float: left;
	width: 96px;
	height: 70px;
	background: url("/wp-content/uploads/newsletter-signup-v2.jpg") -344px 0 no-repeat;
}
#newsletter-signup a#submit-newsletter:hover {
	background: url("/wp-content/uploads/newsletter-signup-v2.jpg") -344px bottom
		no-repeat;
}

.fb-video,
.live-video {
	height: 545px;
}

@media screen and (max-width: 1200px) {
	.fb-video,
	.live-video {
		height: 440px;
	}
}

@media screen and (max-width: 980px) {
	.fb-video,
	.live-video {
		height: 340px;
	}
}

/*
   For the mdash, have people use this code:
   <div class="divider_bar color"><span style="color:#FFFFFF;">—</span></div>

*/
div.divider_bar {
	width: 28px;
	height: 4px;
	font-size: 0px;
	border-style: solid;
	border-width: 0 0 4px 0;
	margin: 0 auto;
}
/*
   For the services side bar, have people use this code:
   <div class="divider_bar services color"><span style="color:#FFFFFF;">—</span></div>

*/
div.divider_bar.services {
	width: 45px;
	margin: 0;
}

div.divider_bar.black,
div.divider_bar_services.black {
	border-color: #000000; /* black = #00000 */
}
div.divider_bar.orange,
div.divider_bar_services.orange {
	border-color: #de6a34; /* orange= #DE6A34 */
}
div.divider_bar.red,
div.divider_bar_services.red {
	border-color: #ed4545; /* red = #ED4545 */
}
div.divider_bar.white,
div.divider_bar_services.white {
	border-color: #ffffff; /* white = #FFFFFF */
}
div.divider_bar.yellow,
div.divider_bar_services.yellow {
	border-color: #fed531; /* yellow = #FED531  #FBD600 */
}
div.divider_bar.tyrayellow,
div.divider_bar_services.tyrayellow {
	border-color: #fce400; /* yellow = #FCE400 */
}
div.divider_bar.hastings,
div.divider_bar_services.hastings {
	border-color: #ffb700;
}
div.divider_bar.sumologic,
div.divider_bar_services.sumologic {
	border-color: #0197d6;
}
div.divider_bar.blue,
div.divider_bar_services.blue {
	border-color: #1aa4d2; /* blue = #1AA4D2 */
}
div.divider_bar.varian,
div.divider_bar_services.varian {
	border-color: #21c7ff; /* blue = #1AA4D2 */
}

div.divider_bar.red,
div.divider_bar_services.red {
	border-color: #ec1b1b; /* red = #ec1b1b */
}

div.divider_bar.green,
div.divider_bar_services.green {
	border-color: #99d029; /* green = #99d029 */
}

div.divider_bar.chef,
div.divider_bar_services.chef {
	border-color: #87b09a; /* chef = #87b09a */
}

div.divider_bar.couchbase,
div.divider_bar_services.couchbase {
	border-color: #e7272c;
	color: #e7272c;
}

h3.below-divider_bar,
h4.below-divider_bar {
	margin-top: 40px !important;
}

/* Let's get rid of share-box on home page -- which is on bottom */
div.share-box {
	display: none;
}

/* Let's get rid of project panel on sub pages -- right before footer */
div.project-panel {
	display: none;
}

#fullscreen-menu .menu-inner nav ul li.no-link > a:first-of-type {
	color: #000 !important;
	text-decoration: underline;
	margin-top: 20px;
	margin-bottom: 10px;
	pointer-events: none;
	cursor: default;
}

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

          CASE STUDY - Exploratorium

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

/*
   Page:        exploratorium
   Description: headline
   Content id:  content_yhr6dqdoi

   Remove Gutter: Yes
   Fluid Layout:  No
*/

div.case-study-hero h1 {
	/* h1 headline */
}

div.case-study-hero h3 {
	/* h3 case study */
}

/*
   Page:        exploratorium
   Description: services-box that needs to overlap 2 layers
   Content id:  content_y7h68l94g

		AND go away on mobile
*/

div.services-box {
	position: absolute;
	background-color: #32323d; /* bluish grey  #32323D; */
	width: 300px;
	padding: 30px;
	left: 100px;
	margin-top: -150px;
	text-transform: uppercase;
}

.services-box .services-block:nth-child(2) {
	padding-top: 25px;
}

/* h6 headline */
div.services-box p,
h6 {
	color: #ffffff; /* white = #FFFFFF */
}
div.services-box h6 {
	margin-bottom: 0px;
}
div.divider_bar.services {
	margin-bottom: 15px;
}
div.services-box p {
	font-family: "brandon-grotesque";
	font-size: 16px;
	margin-bottom: 8px;
	line-height: 1.2em;
}
@media (max-width: 1440px) {
	div.services-box {
		left: 0;
		margin-top: -200px;
	}
	div.services-box.services-box-long {
		margin-top: -245px;
	}
}

@media screen and (min-width: 1028px) and (max-width: 1600px) {
	div.services-box-long {
		left: 0px;
	}
}

@media screen and (min-width: 668px) and (max-width: 1028px) {
	div.services-box {
		left: 0px;
	}
}

/* this is the service box for small devices.
   we have it fill up a section w/ no overlap
   you NEED to specify the height in 2 places

   ALSO -- when you copy it to a new page, you'll
           need to get the #content_xxxxxxx name

*/

/* @media screen and (max-width: 1370px) {
	div.services-box-long {
		width: 220px;
	}
} */

@media screen and (max-width: 800px) {
	div.services-box {
		height: 360px;
	}
	div.services-box-long {
		height: 410px !important;
	}
	div.services-box {
		display: block;
		position: relative;
		width: 100%;
		margin-top: 0px;
		left: 0px;
	}
	div.services-box div.clear {
		clear: both;
	}
	div.services-box div.services-block {
		margin: none;
		display: block;
	}
	div.services-box div.services-block p {
		padding-left: 0px !important;
	}
}

/* for services box, on iphone 6s plus, needed to shrink padding */
@media screen and (min-width: 668px) and (max-width: 768px) {
	div.services-box {
		padding: 1.5em;
		margin-top: -125px;
	}
}

/* add in any custom CSS here for portfolios/clients */

div.services-box-reno {
	background-color: #de6a34;
}

div.services-box-tyra {
	background-color: #fce400;
}

div.services-box-hastings {
	background-color: #ffb700;
}
div.services-box-sumologic {
	background-color: #0197d6;
}

div.services-box-carondelet {
	background-color: #1aa4d2;
}

div.services-box-eat {
	background-color: #000000;
}

div.services-box-vmware {
	background-color: #9bce00;
}

div.services-box-chef {
	background-color: #5c6670;
}

div.services-box-explo-sos {
	background-color: #f4c00b;
}

div.services-box-coast {
	background-color: #911906;
}

div.services-box-ggu {
	background-color: #000000;
}

div.services-box-isilon {
	background-color: #0162b3;
}

div.services-box-steveandkates {
	background-color: #ffffff;
	border: 5px solid #000000;
}

div.services-box-westport {
	background-color: #ceba27;
}

div.services-box-couchbase {
	background-color: #ffffff;
}

div.services-box-varian {
	background-color: #21c7ff;
}

p#process-left {
	padding-left: 130px;
}

/*
   Page:        exploratorium
   Description: the challenge
   Content id:  content_2hh5vdkgp

   Remove Gutter: Yes
   Fluid Layout:  No
*/

div.challenge-headline h3 {
	/* h3 case study */
	color: #000; /* black = #000 */
}

div.challenge-copy p {
	/* body copy */
	color: #000; /* black = #000 */
}
@media screen and (max-width: 768px) {
	div.challenge-copy p {
		font-size: 16px;
	}
}

/*
   Page:        exploratorium
   Description: pull quote
   Content id:  content_b49ksiifm

   Padding done in editor -- top/bottom: 170px;
   2 cols / 8 cols content / 2 cols

*/

/*
   Page:        exploratorium
   Description: the ahah moment
   Content id:  content_ko718zfaj

   Padding done in editor -- top/bottom: 170px;
   2 cols / 8 cols content / 2 cols

*/

/* h4 pull quote */
div.a-ha-moment h4 {
}

/*
   Page:        exploratorium
   Description: billboards
   Content id:  content_zqm20bl9r

*/

div.full-width-creative h3 {
	/* work - exploratorium - */
	display: none;
}

iframe.sound-cloud-player {
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 768px) {
	div.creative-writeup p {
		/* work - creative writeup*/
		width: 100%;
		padding: 0 10px; /* match the mobile only paragraph padding */
	}
	p#process-left {
		padding-left: 0px;
	}
}

/*
   Page:        exploratorium
   Description: the soundcloud player - perception flipped
   Content id:  content_9vbz80yv7

*/

@media screen and (max-width: 400px) {
	#expo_perception_flipped {
		width: 290px;
	}
}

@media screen and (max-width: 768px) {
	/* sound cloud - opposit text*/
	/* should be handled by mobile only at bottom */
	/*
    div#content_9vbz80yv7 p {
        font-size: 16px;
        padding: 0 10px;
    }
*/
}

/*
   Description: the results

   Padding done in editor -- top/bottom: 170px;
   2 cols / 8 cols content / 2 cols

   This is a subhead
*/

.results h2 {
}

/* yes, the h3 comes first, then comes the h2, larger */
.results h2 {
}

div.final-quote h2 {
	font-style: italic;
	font-family: "bree-serif";
	font-weight: 800;
	font-size: 54px;
}
div.final-quote h3 {
	text-transform: uppercase;
	font-size: 28px;
}

@media screen and (max-width: 768px) {
	div.final-quote .masonry-item {
		min-height: normal !important;
		padding: none !important;
	}
}

@media screen and (min-width: 1200px) {
	h2.heighten-anticipation {
		padding: 100px 29% 100px 29%;
	}
}

/* MOBILE ONLY RULES */
@media screen and (max-width: 768px) {
	div.homepage-hero h1 {
		line-height: 45px;
		font-size: 55px !important;
	}
	h1 {
		font-size: 36px !important;
	}
	h2 {
		font-size: 30px;
	}
	h3 {
		font-size: 24px;
	}
	p {
		font-size: 16px !important;
		padding: 0 10px !important; /* maybe combine w/ home about */
	}

	div.mortar-footer h2,
	div.mortar-footer {
		text-align: center !important;
	}

	#fullscreen-menu .menu-inner nav.align-top {
		margin-top: 30px !important;
	}
	#fullscreen-menu .menu-inner nav ul li {
		padding: 5px 0;
	}
	#newsletter-signup {
		width: 352px;
	}
	#newsletter-signup .input-back {
		width: 240px;
	}
	#newsletter-signup .input-back input {
		margin-left: 15px;
		margin-top: 20px;
	}
}