/* hero unit base */

.sama-hero-width {     /* use this on all hero units to ensure that they are the same width across the entire site. */
}

.sama-hero-fullwidth { /* used for heroes outside the .container element, which are full width */
 border-radius: 0;
}

.sama-hero-height {    /* like sama-hero-width, used to ensure that all hero units are the same height. */
min-height: 100px;
} 

.sama-hero-well {      /* make wells inside hero units partially transparent */   
 background: rgba(255,255,255,0.5); 
 font-weight: bold;
}

.sama-hero-caption {   /* a container element for text in a hero, size and margins of container set here */
  background-color: transparent;
  max-width: 500px;
  margin-left: 75px;
  margin-top: 50px;
}

.sama-hero-title {    /* the title element of the hero */
 font-size: 40pt;
 line-height: 1.25;
 color: #FFFFFF !important; /* overrides bootstrap setting */
 font-weight: bold;
 text-shadow: 0 10px 10px rgba(0,0,0,.4);
 margin-left: 75px;
}

.sama-hero-text {    /* the hero text */
 color: #FFFFFF;
 font-weight: bold;
 text-shadow: 0 10px 10px rgba(0,0,0,.4);
 font-size: 18pt;
}



.sama-hero-marketing { /* a hero unit for marketing pages */
 border-style : none;
 -moz-background-size: 100%;
}

.sama-hero-marketing img {
 padding-bottom: 2em;
}




/* RESPONSIVE CSS */

/* desktop is above, the default */

/* tablet */
@media (max-width: 979px) {
 .sama-hero-marketing {
  background-height: 100%;
 }
}

/* mobile */
@media (max-width: 767px) {
 .sama-hero-caption {
    margin-left: 0px;
    margin-top: 20px;
  }
  
 .sama-hero-title {
  font-size: 20pt;
  margin-left: 0px;
  margin-top: 0px;
 }
 
 .sama-hero-text {
  font-size: 14pt;
 }
 
 .sama-hero-height {
   max-height: inherit;
 }
}