/* 
Creates a DSA style button. See pattern library for structure.
*/

  .btn {
    border-radius: 0px!important;
  }

 .large_button {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    word-wrap: normal;
    white-space: normal!important;
}

.width_100p {
  width: 100%;

}

  .large_button .btn,
  .large_button.explore_orange .btn {
    font-family: gineso-condensed,sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    /*font-size: 18px !important;*/
    letter-spacing:4px;
    line-height:24px;
    padding: 8px 12.5px 8px 12.5px;
    text-decoration: none !important;
    background: #C64600;
    color: #ffffff;
    word-wrap: break-word;

  }

  .large_button .btn:focus,
  .large_button.explore_orange .btn:focus {
    outline-offset: 5px;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: #c64600;
  }

  .large_button .btn:hover,
  .large_button .btn:active,
  .large_button.explore_orange .btn:hover,
  .large_button.explore_orange .btn:active {
    color: #c64600!important;
    background-color: transparent!important;
    border-color: #c64600!important;
  }


  /**/



  .large_button.maroon .btn,
  .large_button.live_maroon .btn {
    background-color: #861f41;
    border-color: #861f41;
    color: #fff;
    box-shadow: none;
  }

  .large_button.maroon .btn:focus,
  .large_button.live_maroon .btn:focus {
    outline-offset: 5px;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: #861f41;
  }

  .large_button.maroon .btn:hover,
  .large_button.maroon .btn:active,
  .large_button.live_maroon .btn:hover,
  .large_button.live_maroon .btn:active {
    color: #861f41!important;
    background-color: transparent!important;
    border-color: #861f41!important;
  }


  /**/


  .large_button.gray .btn,
  .large_button.wb-blue .btn,
  .large_button.wb-green .btn,
  .large_button.wb-maroon .btn,
  .large_button.wb-orange .btn,
  .large_button.wb-purple .btn,
  .large_button.well-being .btn,
  .large_button.wb-red .btn,
  .large_button.well-being .btn,
  .large_button.practice_gray .btn {
    background-color: #5E6062;
    border-color: #5E6062;
    color: #fff;
    box-shadow: none;
  }

  .large_button.gray .btn:focus,
  .large_button.wb-blue .btn:focus,
  .large_button.wb-green .btn:focus,
  .large_button.wb-maroon .btn:focus,
  .large_button.wb-orange .btn:focus,
  .large_button.wb-purple .btn:focus,
  .large_button.well-being .btn:focus,
  .large_button.wb-red .btn:focus,
  .large_button.well-being .btn:focus,
  .large_button.practice_gray:focus {
    outline-offset: 5px;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: #5E6062;
  }

  .large_button.gray .btn:hover,
  .large_button.gray .btn:active,
  .large_button.wb-blue .btn:hover,
  .large_button.wb-blue .btn:active,
  .large_button.wb-green .btn:hover,
  .large_button.wb-green .btn:active,
  .large_button.wb-maroon .btn:hover,
  .large_button.wb-maroon .btn:active,
  .large_button.wb-orange .btn:hover,
  .large_button.wb-orange .btn:active,
  .large_button.wb-purple .btn:hover,
  .large_button.wb-purple .btn:active,
  .large_button.well-being .btn:hover,
  .large_button.well-being .btn:active,
  .large_button.wb-red .btn:hover,
  .large_button.wb-red .btn:active,
  .large_button.well-being .btn:hover,
  .large_button.well-being .btn:active,
  .large_button.practice_gray .btn:hover,
  .large_button.practice_gray .btn:active {
    color: #5E6062!important;
    background-color: transparent!important;
    border-color: #5E6062!important;
  }


  /**/


  .large_button.purple .btn {
    background-color: #642667;
    border-color: #642667;
    color: #fff;
    box-shadow: none;
  }

  .large_button.purple .btn:focus {
    outline-offset: 5px;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: #642667;
  }

  .large_button.purple .btn:hover,
  .large_button.purple .btn:active {
    color: #642667!important;
    background-color: transparent!important;
    border-color: #642667!important;
  }


  /**/


  .large_button.teal .btn {
    background-color: #406A73;
    border-color: #406A73;
    color: #fff;
    box-shadow: none;
  }

  .large_button.teal .btn:focus {
    outline-offset: 5px;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: #406A73;
  }

  .large_button.teal .btn:hover,
  .large_button.teal .btn:active {
    color: #406A73!important;
    background-color: transparent!important;
    border-color: #406A73!important;
  }


  /**/


  .large_button.pink .btn {
    background-color: #B9004F;
    border-color: #B9004F;
    color: #fff;
    box-shadow: none;
  }

  .large_button.pink .btn:focus {
    outline-offset: 5px;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: #B9004F;
  }

  .large_button.pink .btn:hover,
  .large_button.pink .btn:active {
    color: #B9004F!important;
    background-color: transparent!important;
    border-color: #B9004F!important;
  }


  /**/


  .large_button.turquoise .btn {
    background-color: #28C0B0;
    border-color: #28C0B0;
    color: #000;
    box-shadow: none;
  }

  .large_button.turquoise .btn:focus {
    outline-offset: 5px;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: #28C0B0;
  }

  .large_button.turquoise .btn:hover,
  .large_button.turquoise .btn:active {
    color: #000!important;
    background-color: transparent!important;
    border-color: #28C0B0!important;
  }


  /**/


  .large_button.sunset .btn {
    background-color: #ED8B00;
    border-color: #ED8B00;
    color: #000;
    box-shadow: none;
  }

  .large_button.sunset .btn:focus {
    outline-offset: 5px;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: #D57D00;
  }

  .large_button.sunset .btn:hover,
  .large_button.sunset .btn:active {
    color: #000!important;
    background-color: transparent!important;
    border-color: #D57D00!important;
  }


  /**/


  .large_button.yellow .btn {
    background-color: #F7EA48;
    border-color: #F7EA48;
    color: #000;
    box-shadow: none;
  }

  .large_button.yellow .btn:focus {
    outline-offset: 5px;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: #DED341;
  }

  .large_button.yellow .btn:hover,
  .large_button.yellow .btn:active {
    color: #000!important;
    background-color: transparent!important;
    border-color: #DED341!important;
  }


  /**/


  .large_button.cadet .btn,
  .large_button.blue .btn {
    background-color: #003C71;
    border-color: #003C71;
    color: #fff;
    box-shadow: none;
  }

  .large_button.cadet .btn:focus,
  .large_button.blue .btn:focus {
    outline-offset: 5px;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: #003C71;
  }

  .large_button.cadet .btn:hover,
  .large_button.cadet .btn:active,
  .large_button.blue .btn:hover,
  .large_button.blue .btn:active {
    color: #003C71!important;
    background-color: transparent!important;
    border-color: #003C71!important;
  }




  /**/


  .large_button.black .btn {
    background-color: #000;
    border-color: #000;
    color: #fff;
    box-shadow: none;
  }

  .large_button.black .btn:focus {
    outline-offset: 5px;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: #000;
  }

  .large_button.black .btn:hover,
  .large_button.balck .btn:active {
    color: #000!important;
    background-color: transparent!important;
    border-color: #000!important;
  }


  /**/


  .large_button.white .btn {
    background-color: #fff;
    border-color: #fff;
    color: #000;
    box-shadow: none;
  }

  .large_button.white .btn:focus {
    outline-offset: 5px;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: #000;
  }

  .large_button.white .btn:hover,
  .large_button.white .btn:active {
    color: #fff!important;
    background-color: transparent!important;
    border-color: #fff!important;
  }


  /**/


  .large_button.red .btn {
    background-color: firebrick;
    border-color: firebrick;
    color: #fff;
    box-shadow: none;
  }

  .large_button.red .btn:focus {
    outline-offset: 5px;
    outline-style: dashed;
    outline-width: 2px;
    outline-color: firebrick;
  }

  .large_button.red .btn:hover,
  .large_button.red .btn:active,{
    color: firebrick!important;
    background-color: transparent!important;
    border-color: firebrick!important;
  }


  /**/