@import url(normalize.css);
@import url(topnav.css);
@import url("mobile-menu.css");
@import url(l2-style.css);
@import url(footer.css);
@import url(form-style.css);
@import url(print.css);


@import url("https://use.typekit.net/ebm1esg.css");
 
/* 
Usual Light
font-family: usual, sans-serif;
font-weight: 300;
font-style: normal;

Usual Light Italic
font-family: usual, sans-serif;
font-weight: 300;
font-style: italic;

Usual
font-family: usual, sans-serif;
font-weight: 400;
font-style: normal;

Usual Italic
font-family: usual, sans-serif;
font-weight: 400;
font-style: italic;

Usual Medium
font-family: usual, sans-serif;
font-weight: 600;
font-style: normal;

Usual Medium Italic
font-family: usual, sans-serif;
font-weight: 600;
font-style: italic;

Usual Bold
font-family: usual, sans-serif;
font-weight: 700;
font-style: normal;

Usual Bold Italic
font-family: usual, sans-serif;
font-weight: 700;
font-style: italic;


*/


/* main site styles - last edited on 04-01-21
----------------------------------------------- */

html { min-height: 100%; margin-bottom: 0; background: #303030; }
body { background-color: #fff; color: #787878; font: 13px/1.375em usual, helvetica, arial, sans-serif; 
 -webkit-text-size-adjust: 100%;
 -moz-osx-font-smoothing: grayscale;
 -webkit-font-smoothing: antialiased; 
 text-align: center; margin: 0; padding: 0; overflow-x: hidden; }


h1, h2, h3, h4, h5 { color: #303030; font-family: usual, helvetica, arial, sans-serif; }
article, aside, p, li { color: #787878; font-family: usual, helvetica, arial, sans-serif; font-weight: 300; }

h1, h2, h3, h4 { font-weight: 600; clear: both; }

h1, h2 { font-size: 46px; line-height: 1.125em; text-align: center; padding-top: 5px; padding-bottom: 0; margin-top: 0px; margin-bottom: 0px; }
h3, h4 { font-size: 23px; line-height: 1.125em; text-align: center; padding-top: 5px; padding-bottom: 0; margin-top: 0px; margin-bottom: 0px; }
 

p, li { font-size: 18px; line-height: 1.5em; font-weight: 300; }
p.intro { font-size: 23px; line-height: 1.5em; }
p.smaller, li.smaller { font-size: 15px; line-height: 1.5em; }

.center { text-align: center !important; }

h1 + p { padding-top: 1px; margin-top: 1px; }
h2 + p { padding-top: 1px; margin-top: 1px; }

p + h1 { padding-top: 13px; }
p + h2 { padding-top: 13px; }

.linetop { clear: both; margin-top: 25px; padding-top: 13px; border-top: 1px solid #e5e7e8; }

div  { margin-top: 0; margin-bottom: 0; padding: 0; border: none; border-width: 0; }
img { text-decoration: none; margin: 0; padding: 0; border: none; border-width: 0; outline: none; outline-width: 0; }

img.nofloat { float: none; }
img.floatright { float: right; }
img.floatleft { float: left; }

.row { width: 100%; min-width: 320px; display: block; margin: 0 auto; overflow: hidden; }

div#page { background-color: #fff; text-align: center; min-width: 320px; width: 100% !important; height: auto; min-height: 700px; margin: 0; padding: 0; float: left; clear: both; overflow: hidden; }
div#page-container { min-width: 320px; width: 100% !important; clear: both; margin: 0 auto; padding: 0; } 

div#page.inside { min-height: 300px; }

#content { width: 100%; min-height: 250px; clear: both; padding-top: 60px; padding-bottom: 50px; overflow: hidden; }
#content.tall { min-height: 530px; }
#content article { text-align: center; float: none; width: 100%; max-width: 640px; margin-right: auto; margin-left: auto; }

div#page.inside #content { width: 100%; min-height: 400px; }

.container { width: 100% !important; text-align: center; clear: both; margin: 0 auto; padding: 0; overflow: hidden; }
.stories { max-width: 1170px; text-align: center; clear: both; margin: 0 auto; padding: 0 15px; display: block; overflow: hidden; }
.short { width: 100%; max-width: 980px; }

a:link, a:visited { font-weight: 400; color: #808080; text-decoration: none; }
a:hover, a:active { color: #303030; text-decoration: none; 
 -webkit-transition: color .3s;
    -moz-transition: color .3s;
      -o-transition: color .3s;
     -ms-transition: color .3s;
         transition: color .3s; }
		
a.learnmore:link, a.learnmore:visited { color: #303030; font-weight: 400; }
a.learnmore:hover, a.learnmore:active { color: #808080; }

a.subscribe { font: 600 19px/28px 'Source Sans Pro', Arial, sans-serif; text-align: center; text-decoration: none; border: none; margin: 0; padding-right: 20px; padding-left: 20px; width: auto; height: 31px; display: inline-block;
 -webkit-border-radius: 17px;
    -moz-border-radius: 17px; 
         border-radius: 17px;
}
a.subscribe:link, a.subscribe:visited { color: #fff; }
a.subscribe:hover, a.subscribe:active { color: #fff; }

a.subscribe { background-color: #808080; }
a.subscribe:hover { background-color: #d6001c;
  -webkit-transition: background-color .5s;
     -moz-transition: background-color .5s;
       -o-transition: background-color .5s; 
      -ms-transition: background-color .5s;
          transition: background-color .5s;
}

.red { color: #d6001c !important; }
.white { color: #fff !important; }
.black { color: #000 !important; }
.gray { color: #999 !important; } 

.gray-bg { background-color: #F1F1F1 !important; }

.caps { text-transform: uppercase; }
.flush { margin-top: 0px; }

div.clear { display: block !important; width: 100% !important; clear: both !important; }
p.clear { display: block !important; width: 100% !important; clear: both !important; }

div.clear:before, .clearfix:before
div.clear:after, .clearfix:after { content: " "; display: table; } 

.center { text-align: center !important; }
.nowrap { white-space: nowrap !important; }
.pen-text { max-width: 780px; margin-right: auto; margin-left: auto; }

/* multi col support ---*/
.col-2-wrap, .col-3-wrap { width: 100%; display: block; min-height: 100% !important; overflow: hidden; margin: 30px 0; }

.col-2 { float: left; width: 48.75%; margin: 0; position: relative; z-index: 1; }
.col-2 + .col-2 { float: right; }

.col-2-3 { width: 74.2%; float: left; margin: 0; position: relative; z-index: 1; }
.col-2-3 figure.tech img.floatright { float: right; }
.col-1-3 { width: 25.79%; float: left; margin: 0; position: relative; z-index: 1; }

.col-2-3 + .col-1-3 { float: right; }

.col-2 figure, .col-3 figure, .col-2-3 figure, .col-1-3 figure, 
.col-2 img, .col-3 img, .col-2-3 img, .col-1-3 img { max-width: 100%; height: auto; display: block; margin: 0 auto; padding: 0; }

.tech img { width: 100%; max-width: 570px; }

#three .col-2 { min-height: 625px; }
#three .col-2 figure { width: 100%; }
#three .col-2 img { max-height: none; display: block; }

.col-3 { background: #fff; text-align: center; width: 31.665%; padding: 0.665%; margin: 0 auto 25px auto; float: none; position: relative; }

.col-content { padding: 20px 25px 0 25px; overflow: hidden; }

.flex-evenly-v { display: flex; flex-wrap: wrap; align-content: space-between; align-items: flex-end;  }
#three .flex-evenly-v figure { align-self: flex-end !important; }
#five .flex-evenly-v { display: inline-flex; text-align: center; }
#five .flex-evenly-v .col-content { display: block; margin-right: auto; margin-left: auto; }
#five .col-3-wrap { margin-top: -15px; } 

.no-min-height { min-height: 100% !important; }

/*
Responsive ----------------------------------- */

@media only screen and (max-width: 1180px) {
#three .col-2 { min-height: 620px; }
}

@media only screen and (max-width: 1024px) {
#three .col-2 { min-height: 615px; }
}

@media only screen and (max-width: 980px) {
div#page { width: 100% !important; max-width: 100%; }
div#page-container, div.container { width: 100%; max-width: 100%; margin-right: 0; margin-left: 0; }
.stories { max-width: none; padding: 0 10px; }
	
}

@media only screen and (max-width: 840px) {
 #three .col-2 { min-height: 610px; }
.pen-text { max-width: none; width: auto; padding-right: 15px; padding-left: 15px; }
}

@media only screen and (max-width: 780px) {
h1, h2 { font-size: 36px; }
p.intro { font-size: 21px; }
p { font-size: 16px; }
#three .col-2 { min-height: 550px; }
}

@media only screen and (max-width: 700px) {
.col-2-wrap, .col-3-wrap { margin: 0; }
.col-2, .col-3  { float: none !important; clear: both !important; width: 100% !important; max-width: 100% !important; margin: 15px auto; padding: 0; }
.col-2 + .col-2 { float: none !important; clear: both !important; }
.col-2-wrap + .col-2-wrap { margin-top: -15px; }

.col-2-3, .col-1-3 { float: none !important; clear: both !important; width: 100% !important; max-width: 100% !important; margin: 15px auto; padding: 0; }
.col-2-3 + .col-1-3 { float: none !important; clear: both !important; }	
	
.col-2-3 figure.tech img.floatright { float: none; max-width: 360px; margin: auto; }
	
.tech img { max-width: 360px; }
	
}

@media only screen and (max-width: 650px) {
.full-width { }
}

@media only screen and (max-width: 480px) {

}

/*
END ----------------------------------- */