/*
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: .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 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;}
}