/*** COLORS ***/
  .transparentBG { background: rgba(5, 0, 5, .65); color: #fff!important; }
  .primaryColorBG { background-color: rgba(13, 94, 146, 1); color: #fff }
  .secondaryColorBG { background-color: rgba(154, 68, 5, 1); color: #fff }



/*** GLOBAL ***/
  #width { 
    position:fixed; top:0; }

  body {
    background-color: rgba(150, 141, 141, .15);
    font-family: 'Merienda', cursive;
    font-size: 100%;
    min-width: 300px;
    position: relative;
        bottom: 0;
        top: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100%; }

  div {
    position: relative; }

  #site-container {
    height: 100%;
    margin: 0 auto;
    max-width: 60em;
    overflow: auto;
    padding: 0 1em 5em;
    position: relative; }

  /* #site-container > .row > .columns:nth-child(2) { 
      margin-top: 5em; } */

  .details { 
    font-size: 80%; }
  .center-text { 
    text-align: center; }
  .centered {
    display: block;
    margin-left: auto;
    margin-right: auto; }
  .hidden { 
    display: none!important; }
  .padding-5 { 
    padding-top: 5rem!important; }

  #message {
    margin: 1em auto;
    text-align: center; }
  #message .error,
  .error {
    color: #A90911;
    font-weight: bold;
    letter-spacing: 1px; }



/*** TYPOGRAPHY ***/
  h1, 
  h2,
  h3 { 
    margin: 0 0 .25em; }
  h1 {
    font-family: 'Luckiest Guy';
    font-size: 2.5rem;
    letter-spacing: 1.5px;
    padding-top: 5rem; }
  h2 { 
    font-family: 'Rock Salt', cursive; 
    font-size: 1.75rem; 
    font-weight: 700; 
    line-height: 2; 
    margin-top: .25em; }
  h3 { 
    font-family: 'PT Sans', sans-serif;
    font-size: 1.5rem; 
    margin-top: .25em; }
  h4 {
    font-family: 'Merienda', cursive; }
  p {
    font-family: 'Merienda', cursive; 
    font-size: 1.2rem;
    line-height: 1.25; 
    margin: 0; 
    text-align: justify; }
  a { 
    color:#1f618d; }
  a:active, 
  a:hover, 
  a:focus { 
    font-weight:700; }


/*** HEADER ***/
  header {
    background-image: url('/assets/imgs/header-background.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 400px;
    position: relative; }


/*** NAVIGATION ***/
  #tabs {
    height: 55px;
    overflow: auto;
    position: absolute;
    bottom: 0;
    width: 100%; }

  #tabs .tab {
    background-color: #000;
    border: solid 2px #fff;
    border-bottom: none;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    float: left;
    height: 55px;
    overflow: hidden;
    text-align: center; }

  #tabs .tab:nth-child(2),
  #tabs .tab:nth-child(4) {
    border-left: none;
    border-right: none; }

  #tabs .tab a {
    color: #fff;
    font-size: 80%;
    position: absolute;
      bottom: 15%;
      left: 0;
    width: 100%; }



/*** BUTTONS ***/
  button {
    margin: 2em .5em;
    width: 300px; }

  button:focus,
  .button:focus {
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
    outline: none;
  }

  button.secondaryColorBG.reverse,
  button.secondaryColorBG.reverse a {
    background-color: #fff;
    border-color: rgba(154, 68, 5, 1);
    color: rgba(154, 68, 5, 1); }

  .submitBtn {
    display: block;
    float: right;
    margin-top: 0;
    width: 100px; }
  .addBtn {
    float: right;
    margin-bottom: 2.5em;
    width: 100px; }
  .nextBtn {
    display: block;
    margin: 0 auto; }
  .nextBtn a {
    color: #fff; }
  .nextBtn a:hover {
    color: rgba(154, 68, 5, 1); }


/*** TABLES ***/
  table {
    margin: 0 auto;
    position: relative;
    width: 100%; }
  th {
    padding: .8em 0; }
  td {
    padding: .4em 0; }
  tbody tr:nth-child(even) {
    background-color: #999; }



/*** FORMS ***/
  form {
    overflow: auto; }
  form.row { 
    margin: 4em 0 0!important; }
  form .columns {
    overflow: auto;
    padding: 0; }
  form .title { 
    padding: 1.2em 0 .5em 0; }
  input {
    margin: .5em 0;
    padding: .5em 0 .5em .2em; }

  form > div:first-child input,
  form > div:first-child div {
    margin-top: 0; }
  form > div:last-child input {
    margin-bottom: 0; }

  input:focus {
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
    outline: none; }
  input[type=checkbox],
  input[type=radio] {
    height: 30px;
    width: 20%; }
  input[disabled] {
    border: none;
    background-color: transparent; }

  input.invalid {
    background-color: #ffdddd; }


/*** LOGIN & REGISTER FORM ***/
  #login,
  #register {
    margin: 0 auto;
    width: 60%; }
  a#signup {
    color: #1f618d; }
  a#signup:hover {
    text-decoration: underline; }





/*** MY ACCOUNT ***/
  #userInfo, 
  #householdInfo, 
  #personalInfo, 
  #preferences {
    margin-bottom: 2em;
    padding-left: 0;
    padding-right: 0; }


/**** FOOTER ***/
  footer {
    position: relative;
      bottom: 0;
    text-align: center;
    width: 100%; }
  footer ul {
    margin: 0;
    padding: .5em 0; }
  footer li, footer a {
    color: #fff;
    text-align: center; }
  footer .divider {
    color: #999;
    font-size: 80%;
    margin: 0 .4em; }