body { 
   background: #fff; }
   
.wrap { 
   width: 1300px; 
   position: relative; }
   
header {
   top: 0;
   left: 0;
   right: 0;
   margin: 0 auto ;
   height: auto;
   padding: 25px 0 0 0;
   background: none;
   width: 100%;
   z-index: 1001;
   position: fixed;
   float: none;
   display: block; }
   
   header .wrap {
      width: 1400px; }
      
   header.sticky { 
      background: rgba(255,255,255,1);
      padding: 20px 0; 
      -webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,.2);
      box-shadow: 0 0 3px 0 rgba(0,0,0,.2);}
   
   #interior header {
      position: fixed;
      top: 0;
      background: rgba(255,255,255,1); }      
      
#logo {
   display: inline-block;
   text-align: left; 
   z-index: 1000; }
   
   #logo img {
      position: relative;
      width: 100%;
      margin: 0 auto;
      z-index: 1001;
      display: block;
      background: none;
      padding: 0;
      text-align: center;
      max-width: 340px;
      max-height: auto;}
      
      header.sticky #logo img { max-width: 220px; vertical-align: middle; }
      
.social {
   width: auto;
   position: relative;
   top: 1em;
   float: right;
   font-size: 85%; }
   
   header.sticky .social { display: none; }
   
.social .link {
   color: #505050;
   font-weight: 500;
   vertical-align: top;
   text-transform: uppercase;
   letter-spacing: 1px;
   display: inline-block;
   padding: .75em 1em;
   margin-right: 2em; }
   
   header .social .icons.purple svg { fill: #501072; }
   #stay_connected #social svg { fill: #ffffff; }
   #stay_connected h2 { color: #ffffff; }
   footer #social svg { fill: #ffffff; width: 20px; height: 20px; }
   
#searchform {
   display: none;
   vertical-align: super;
   width: auto; }
   
   input#searchinput { 
      -webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); 
      position: relative;
      display: inline-block;
      width: 300px;
      padding: .75em;}
      
   input#searchsubmit {
      width: auto; 
      padding: .75em 1.5em;
      font-size: 1em; 
      font-weight: 500;
      letter-spacing: 1px;
      display: inline-block;
      background: #505050 !important; 
      transition:            all .35s ease-in-out;    
      -webkit-transition: all .35s ease-in-out;  
      -moz-transition:    all .35s ease-in-out;  
      -o-transition:      all .35s ease-in-out;  
      -ms-transition:     all .35s ease-in-out; }
      
      input#searchsubmit:hover {
         background: #ff6900 !important; }

.social .icons {
   font-size: 1.5em;
   padding: .45em;
   display: inline-block;
   color: #505050; }
   
   .social .icons:hover {
      color: #ff6900; }

#signup {
   position: relative;
   display: inline-block;
   float: right; }
   
#emailform {
   vertical-align: super;
   width: auto; }
   
   #interior .signup {
      padding: 1.5em; }
      
   #interior .signup h1 {
      font-size: 150%; }
   
   input#Email { 
      -webkit-box-shadow:inset 0 0 0 1px rgba(0,0,0,.2);
      box-shadow:inset 0 0 0 1px rgba(0,0,0,.2); 
      position: relative;
      display: inline-block;
      width: 400px;
      padding: .75em;}
      
      #interior .signup input#Email { display: block; width: calc(100% - 1.5em); }
      
   input#emailsubmit {
      width: auto; 
      padding: .75em 1.5em;
      font-size: 1em; 
      font-weight: 500;
      letter-spacing: 1px;
      display: inline-block;
      color: white;
      text-transform: uppercase;
      background: #505050 !important; 
      transition:            all .35s ease-in-out;    
      -webkit-transition: all .35s ease-in-out;  
      -moz-transition:    all .35s ease-in-out;  
      -o-transition:      all .35s ease-in-out;  
      -ms-transition:     all .35s ease-in-out; }
      
      #interior .signup input#emailsubmit { display: block; width: 100%; padding: .75em 0; margin-top: .25em; }
      
      input#emailsubmit:hover {
         background: #ff6900 !important; }
         
   .small-action { margin: 1em 0 0 0; font-size: 90%; display:block; }


   
/* Responsive Video */
.video-container {
  position: relative;
   padding-bottom: 56.25%; /* 16:9 */
   padding-top: 25px;
   height: 0;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.background-purple { background-color: #501072; }
.background-yellow { background-color: #ffde51; }
.background-orange { background-color: #ff6900; }
.background-green { background-color: #00bca8; }
.background-gray { background-color: #555; }


#bottom_promos {
   margin: 0 auto;
   padding: 4em 0;
   background: #eeeeee;
   width: 100%;
   text-align: center;
   position: relative;
   display: flex; }
   
   #interior #bottom_promos { }
   
   .promo { 
      position: relative;
      display:inline-block;
      color: #999;
      text-align: left;
      width: 360px;
      height: auto;
      padding: 20px;
      margin-right: 40px;
      background: white;
      -webkit-box-shadow: 0 0 0 5px rgba(0,0,0,.1);
      box-shadow: 0 0 0 5px rgba(0,0,0,.1);
      -webkit-transition: all .35s ease-in-out;
      -moz-transition: all .35s ease-in-out;
      -ms-transition: all .35s ease-in-out;
      -o-transition: all .35s ease-in-out;
      transition: all .35s ease-in-out; }
      
      .promo:hover { 
         -webkit-box-shadow: 0 0 0 5px rgba(80,16,114,1);
         box-shadow: 0 0 0 5px rgba(80,16,114,1);
         -moz-transform: scale(1.05);
         -webkit-transform: scale(1.05);
         -o-transform: scale(1.05);
         -ms-transform: scale(1.05);
         transform: scale(1.05); }
         
      .promo figure { 
         display: inline-block;
         width: 120px;
         vertical-align: middle; }
    
      .promo figure img { display: block; max-width: 100%; }
      
      @media screen and (min-width:0\0) and (min-resolution: +72dpi) {
         .promo figure img { width: 100%; max-width: 300px; }
      }
      
      .promo .text { 
         display: inline-block; 
         width: calc(100% - 145px);
         margin-left: 20px;
         vertical-align: middle; }
      .promo h3 { color: #505050; margin-bottom: .5em; }
      .promo span { color: #999; }
      
      .promo:last-child { margin: 0; }
      
.promo.large {
   width: calc(100% - 4em);
   padding: 2em;
   display: block;
   margin: 0 0 2em 0; }
   
   .promo.large:hover {
      -moz-transform: scale(1.025);
      -webkit-transform: scale(1.025);
      -o-transform: scale(1.025);
      -ms-transform: scale(1.025);
      transform: scale(1.025); }
      
   .promo.large p { color: #888; }
   
   .promo.large img.thumbnail { 
      float: left;
      margin: 0 2em 0 0; }
      
   .promo.large .box {
      float: left;
      display: inline;
      margin: 0 25px 0 0;
      width: 350px;
      background: #eee;
      padding: 24px;
      border: 1px #ccc solid; }
      
   .promo.large .box figcaption {
      margin: 1em 0 0;
      text-align: center;
      font-size: 80%;
      width: 100%;
      padding: .5em 0;}

   .promo.large .box .button {
      margin: 1em 0 0;
      text-align: center;
      font-size: 80%;
      width: 100%;
      padding: .5em 0;
      color: white; }

   .promo.large .overview, .promo.large .overview-inset {
      position: relative;
      margin-left: 425px; }
      
   .promo.large.graphical {
      background: #d1f2f1;
      width: calc(100% - 2em);
      padding: 1em; }
      
   .promo.large.graphical figure { 
      width: 100%; }
      
      
.flex-holder {
   flex: 0 0 auto;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start; }
    
.promo.share-graphics {
    flex: 0 0 46%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    text-align: center;
    background: none;
    margin: 0 4% 4% 0;
    padding: 0;
    -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,.1);
      box-shadow: 0 0 0 0 rgba(0,0,0,.1);
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box; }   
    
    .promo.share-graphics h3 { font-size: 160%; display: none; }
    
    .promo.share-graphics figure { width: 100%; margin-bottom: 0; }
    
    .promo.share-graphics figure img { 
       border: 2px rgba(0,0,0,.2) solid; }
       
      @media screen and (min-width:0\0) and (min-resolution: +72dpi) {
         .promo.share-graphics figure img { width: 100%; max-width: 150px; }
      }
      
   .flex-holder.three .promo.share-graphics {
       flex: 0 0 25%; }
    

/* Site Footer
------------------------------------ */
footer {
   background: #501072;
   color: white;
   font-weight: 400;
   padding: 2em 0; 
   position: relative;
   z-index: 99;
   text-align: center;
   margin: 0 auto; }   
   
   footer a {
      color: #00bca8; }
      
footer h1, footer .tagline {
   font-family: brandon-grotesque, sans-serif;
   line-height: 1;
   color: white;
   position: relative;
   font-size: 210%;
   font-weight: 300;
   font-style: italic;
   letter-spacing: -1px;
   margin: 0 0 1.5em 0;
   display: block; }
   
   footer h1:after, footer .tagline:after {
      content:' ';
      position: absolute;
      top:160%;
      left:50%;
      width: 20%;
      height: 1px;
      background: #a888b9;
      transform:translateX(-50%);  }
      
footer nav {
   background: #73408e;
   display:flex;
   padding: 0;
   width: 100%; }
   
   footer nav a {
      display: table-cell;
      color: white;
      font-size: 100%;
      padding: .5em 1.0em; }
      
      footer nav a:hover {
         color: white;
         background: rgba(255,255,255,.3); }
         
   footer nav a.icons {
      display: inline-block;
      font-size: 125%;
      padding: .15em .15em; }
      
      footer nav a.icons:hover {
         background: none;
         color: rgba(255,255,255,.3); }

footer .paidfor { 
   font-size: 90%;
   width: 100%; 
   margin: 1em 0 2em;
   text-align: center;  }

footer .leftcol, footer .rightcol { 
   font-size: 90%;
   display: inline-block;
   width: 49.5%;
   text-transform: none;
   vertical-align: middle; }
   
footer .leftcol { text-align: left; font-style: none; }
footer .rightcol { text-align: right; }
footer .rightcol a { color: #9f7db1; }

   
