/*
* Cirrus 0.5.31
* Stanley Lim, Copyright 2017
* https://spiderpig86.github.io/Cirrus
*/
/* ANIMATIONS */

/* Spinning loading animation */
@-webkit-keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

@keyframes loading {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}

/* Hover animation */
.hover-grow { /* Mouse leave */
  transition-duration: .32s;
}

.hover-grow:hover { /* Mouse enter */
      transform: scale(1.1);
    transition-duration: .08s;
}

/* Loading button position relatively for loading spinner location */
.animated.loading {
  position: relative;
}

/* Loading Spinner, align center by default */
.animated.loading:after {
    border: 2px solid #ccc;
    border-radius: 50%;
    border-right-color: transparent;
    border-top-color: transparent;
    content: "";
    display: block;
    height: 1rem;
    width: 1rem;
    margin-left: -10px;
    margin-top: -10px;
    position: absolute;
    left: 50%;
    top: 50%;
      -webkit-animation: loading 500ms infinite linear;
    animation: loading 500ms infinite linear;
}

.animated.loading.loading-white:after {
    border-left-color: #fff;
    border-bottom-color: #fff;
}

/* Align spinner left */
.animated.loading.loading-left:after {
  left: 2rem;
  right: auto;
}

.animated.loading.loading-left {
  padding-left: 4rem;
}

/* Align spinner right */
.animated.loading.loading-right:after {
  left: auto;
  right: 2rem;
  
}

.animated.loading.loading-right {
  padding-right: 4rem;
}

/* Hide text in loading button */
.animated.loading.hide-text {
    color: transparent !important;
}

/* Heart animation */
@-webkit-keyframes pound {
  to {
    transform: scale(1.1);
  }
}
@keyframes pound {
  to {
    transform: scale(1.1);
  }
}

.animated.pulse {
    animation: pound 0.35s infinite alternate;
    -webkit-animation: pound 0.35s infinite alternate;
    vertical-align: baseline;
}

/* Bounce animations */
@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1); /* Ease-out based on power of four */
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1); /* Ease-out based on power of four */
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.animated.bounce {
  animation-name: bounce;
  -webkit-animation-name: bounce;
  transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }
  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    transform: scale3d(.9, .9, .9);
  }
  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    transform: scale3d(.97, .97, .97);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.animated.bounceIn {
  animation-name: bounceIn;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animated.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.infinite.alternate {
  animation-direction: alternate;
}

.animated.paused {
  -webkit-animation-play-state: paused !important; /* Safari 4.0 - 8.0 */
    animation-play-state: paused !important;
}
/* BUTTONS */

/* Button styling */
/* Un-themed */
.btn, button, [type=submit] {
  margin: 0 auto; 
  display: block;
  line-height: 1.2rem;
  overflow: hidden;
  padding: .5rem 1.0rem;
  width: auto;
  border: 1px solid transparent;
  border-radius: .25rem;
  cursor: pointer;
  text-align: center;
  -webkit-transition: all .3s;
  transition: all .3s;
  -moz-transition: all .3s;
  background-color: #F66;
  color: #FFF;
  font-size: 1.0rem;
  letter-spacing: .03rem;

  font-family: Montserrat;
  font-weight: 400;
  min-width: 2rem;
}

.btn:hover, button:hover, [type=submit]:hover {
  -webkit-transition: all .3s;
  transition: all .3s;
  -moz-transition: all .3s;
  background: #F99;
}

/* Removed 0.5.4 - too blurry and distracting */
/* button.btn-animated:hover, [type=submit].btn-animated:hover, .btn.btn-animated:hover {
   -webkit-transform: scale(1.01);
         transform: scale(1.01);
} */

.btn:active, button:active, [type=submit]:active {
  -webkit-transition: 0.1s ease;
  transition: 0.1s ease;
  background: #ddd;
}

/* Make the loading circle, if present, white when button is active */
.btn.loading:active:after, button.loading:active:after, [type=submit].loading:active:after {
  -webkit-transition: 0.1s ease;
  transition: 0.1s ease;
  border: 2px solid #fff;
  border-radius: 50%;
  border-right-color: transparent;
  border-top-color: transparent;
}

button.btn-animated:active, [type=submit].btn-animated:active, .btn.btn-animated:active {
   -webkit-transform: scale(0.99);
    transform: inherit, scale(0.99); 
}

.btn:focus, button:focus, [type=submit]:focus {
  outline: none;
}

.btn:disabled, button:disabled, [type=submit]:disabled {
  cursor: not-allowed;
  background-color: #d7d7da; /* Make it darker than the other input colors */
  color: #fff;
}

.btn:disabled:hover, button:disabled:hover, [type=submit]:disabled:hover {
  background-color: #d7d7da; /* Make it darker than the other input colors */
}

button.btn-close {
  background-color: rgba(10,10,10,.2);
  border: none;
  border-radius: 290486px;
  cursor: pointer;
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 0;
  height: 20px;
  outline: 0;
  position: relative;
  vertical-align: top;
  width: 20px;
  padding: 0;
  min-width: 20px;
}

button.btn-close:hover {
  background-color: rgba(10,10,10,.3);
}

/* Render the x in the close button */
button.btn-close::before, button.btn-close::after {
  background-color: #fff;
  content: "";
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -webkit-transform-origin: center center;
  transform-origin: center center;
}

button.btn-close::before {
  height: 2px;
  width: 50%;
}

button.btn-close::after {
  height: 50%;
  width: 2px;
}

/* Accent button disabled */
.btn-accent:disabled {
    background-color: #f03d4d;
    color: #fff;
    border-color: #c21b2b;
    opacity: .6;
}

.btn-accent:disabled:hover {
    background-color: #f03d4d;
    color: #fff;
    border-color: #c21b2b;
}

/* Adds small margin around buttons */
.btn-container {
  margin: 0.5rem;
  overflow: visible;
}

/* Different styles */

/* Outline (white) */
.btn-outline {
    color: #fff;
    background: transparent;
    -webkit-transition: all .3s;
    transition: all .3s;
    border: 1px solid #fff;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
}

.btn-outline:hover,
.btn-outline:active {
      background: rgba(255, 255, 255, 0.35);
    color: #fff;
  -webkit-transition: all .3s;
  transition: all .3s;
}

/* Inverted outline (dark) */
.btn-outline-inverted {
  border: 1px solid #222;
  color: #222;
  background: transparent;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.btn-outline-inverted:hover,
.btn-outline-inverted:active {
  color: #fff;
  background: #222;
}

/* Transparent Background */
.btn-transparent {
  background: transparent;
  color: #999;
  border: 0;
}

.btn-transparent:hover {
  background: rgba(0, 0, 0, .1);
  color: #999;
  -webkit-transform: none;
          transform: none;
}

.btn-transparent:active {
  background: rgba(0, 0, 0, .3);
  color: #f5f5f5;
  -webkit-transform: none;
          transform: none;
}

/* Light gray */
.btn-light {
  background: #eee;
  color: #333;
}

.btn-light:hover {
  background: #e0e0e0;
}

.btn-light:active {
   background: #dbdbdb;
}

/* Dark Gray */
.btn-dark {
  background: #444;
  color: #fff;
  border: 0;
}

.btn-dark:hover {
  background: #3a3a3a;
}

.btn-dark:active {
  background: #303030;
}

/* Black */
.btn-black {
  background: #000;
  color: #fff;
}

.btn-black:hover {
  background: #000;
}

.btn-black:active {
  background: #000;
}

/* Right of input */
.has-controls.input:not([class*="left action"])>button:last-child, .has-controls.input:not([class*="left action"])>.btn:last-child>.btn {
    border-radius: 0 .28571429rem .28571429rem 0;
}

.has-controls.input:not([class*="right action"])>button:last-child, .has-controls.input:not([class*="right action"])>.btn:last-child>.btn {
    border-radius: .28571429rem 0 0 .28571429rem ;
}


/* News */

.news {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
    display: block;
    position: relative;
    overflow: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
	margin-bottom: 10px;
    backface-visibility: hidden;
}

.news:hover {
    box-shadow: 0 4px 6px rgba(10, 10, 10, 0.1), 0 0 12px 2px rgba(10, 10, 10, 0.1);
    -webkit-transition: all .3s;
    transition: all .3s;
}

.slide-up:hover .news-image {
   transform: translateY(-40px);
}

.news:hover .news-image:after {
  opacity: 0;
}

.news-image {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
      border-radius: 5px 5px 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.news-image:after {
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  top: 0;
  left: 0;
  right: 0;
  -webkit-transition: all 500ms;
  transition: all 500ms;
  bottom: 0;
}

.news-container {
  display: block;
  position: relative;
  height: 40%;
  min-height: 150px; /* So it appears in html5 standards mode */
}

.news .title-container .title, .news .title-container .subtitle {
  color: #F66;
  margin: 1rem auto;
}

.news .title-container {
  position: absolute;
  bottom: 1rem;
  width: 100%;
  padding: 0 1rem;
}

.news .title-container .title {
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: .2rem;
}

.news .action-bar {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .5rem;
    border-top: 1px solid #E0E0E0;
    box-sizing: border-box;
    -webkit-transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* Add some padding to the buttons */
.news .action-bar button,
.news .action-bar .btn,
.news .action-bar [type=submit] {
  margin: 0 .5rem;
}

.news .action-bar + .news-footer {
  padding: 1rem 0;
  border-top: 1px solid #E0E0E0;
}

.news button, .news .btn {
  display: inline-block;
  display: inline-block;
border-color: transparent;
}

.news button:hover, .news .btn:hover {
  -webkit-transform: none;
          transform: none;
}

.news button:focus, .news .btn:focus {
  -webkit-transform: none;
          transform: none;
}

/* CARDS */

.card {
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
    display: block;
    position: relative;
    overflow: hidden;
    -webkit-transition: all .3s;
    transition: all .3s;
    backface-visibility: hidden;
}

.card:hover {
    box-shadow: 0 4px 6px rgba(10, 10, 10, 0.1), 0 0 12px 2px rgba(10, 10, 10, 0.1);
    -webkit-transition: all .3s;
    transition: all .3s;
}

.slide-up:hover .card-image {
   transform: translateY(-40px);
}

.card:hover .card-image:after {
  opacity: 0;
}

.card-image {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
      border-radius: 5px 5px 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.card-image:after {
  content: "";
  display: block;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.1);
  top: 0;
  left: 0;
  right: 0;
  -webkit-transition: all 500ms;
  transition: all 500ms;
  bottom: 0;
}

.card-container {
  display: block;
  position: relative;
  height: 40%;
  min-height: 332px; /* So it appears in html5 standards mode */
}

.card .title-container .title, .card .title-container .subtitle {
  color: #fff;
  margin: 1rem auto;
}

.card .title-container {
  position: absolute;
  bottom: 1rem;
  width: 100%;
  padding: 0 1rem;
}

.card .title-container .title {
  font-weight: 600;
  font-size: 1.3rem;
  margin-bottom: .3rem;
  text-shadow: 2px 2px 0px #000000;
}

.card .action-bar {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: .5rem;
    border-top: 1px solid #E0E0E0;
    box-sizing: border-box;
    -webkit-transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: left 200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* Add some padding to the buttons */
.card .action-bar button,
.card .action-bar .btn,
.card .action-bar [type=submit] {
  margin: 0 .5rem;
}

.card .action-bar + .card-footer {
  padding: 1rem 0;
  border-top: 1px solid #E0E0E0;
}

.card button, .card .btn {
  display: inline-block;
  display: inline-block;
border-color: transparent;
}

.card button:hover, .card .btn:hover {
  -webkit-transform: none;
          transform: none;
}

.card button:focus, .card .btn:focus {
  -webkit-transform: none;
          transform: none;
}

/* More card components in second example */
.mobile-title {
  position: absolute;
  left: 0;
  background-color: #FFF;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  width: 100%;
      padding: 1rem 0;
      backface-visibility: hidden;
}

.card:hover .mobile-title {
  margin-top: -7rem;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.card:hover .card-body {
  opacity: 1;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.card-body {
  opacity: 0;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.card-footer {
  position: relative;
    margin: .5rem auto;
    font-size: .75rem;
    color: #9FA5A8;
}

.card p {
    margin: 1rem 0;
    /*max-height: 8rem; /* Prevents ridiculously looking cards */
}

/*
    NOTE: To have cards with the same height, place the card class with col-x classes and have the parent have fluid-container.
*/

/* Card Title Bar */
.card-head {
    align-items: stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    box-shadow: 0px 1px 8px 1px rgba(10, 10, 10, 0.07);
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
}

.card-head-title {
  align-items: center;
  -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    font-weight: 700;
    padding: 0 1rem;
}

/* TILES */
/* More flexible layout for cards using flexbox */

.tile {
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  align-content: space-between; /* Ensure space between child elements of card tile */
  -webkit-align-content: space-between;
  align-items: flex-start; /* Push elements to the top of container instead of center/bottom */
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  -ms-flex-line-pack: justify; /* Evenly distribute lines */
}

.tile p {
  font-size: .9rem;
}

.tile .tile-icon, .tile .tile-buttons {
  flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
}

/* Override the default behavior where buttons display as blocks */
.tile .tile-buttons button,
.tile .tile-buttons .btn,
.tile .tile-buttons [type=submit] {
  display: inline-block;
  margin: .1rem; /* Reduce space used by buttons, default .5rem */
}

.tile .tile-container {
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
}

/* Add spacing between the elements in between */
.tile .tile-container:not(:first-child) {
  padding-left: 1rem;
}

.tile .tile-container:not(:last-child) {
  padding-right: 1rem;
}

.tile .tile-title {
  line-height: 1.1rem;
  font-weight: bolder;
  margin: 0.1rem auto;
}

.tile .tile-subtitle {
  line-height: 2rem;
  opacity: .7;
  margin: 0.1rem auto;
}

/* Force elements to align at the center vertical height */
.tile.tile-center {
  align-items: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
}

.tile.tile-center .tile-container { /* Shrink the text to fit inside the tile */
  overflow: hidden;
}

/* Keep the text from overflowing */
.tile.tile-center .tile-title,
.tile.tile-center .tile-subtitle.no-wrap {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 0;
}

/* Reduce margins for paragraph in card body */
.card-body p {
  margin: 1rem 0 !important;
}
/* CODE */

code {
  padding: .3rem;
  margin: .5em 0;
  overflow: auto;
  background: #ffdadd;
  color: #dc4753;
  border-radius: 3px;
}

/* Dark theme for code */
code.dark {
  background: #242424;
  color: #fff;
}

code:before {
    color: #acb3c2;
    content: attr(data-lang);
    font-size: .9rem;
    position: absolute;
    right: 1rem;
    top: .7rem;
}

pre > code {
  font-size: 14px;
  display: block;
  padding: 2rem 1.5rem 1rem;
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  direction: ltr;
  text-align: left;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
 border-left: .3rem solid #f03d4d;
 margin: 0;
     position: relative;
}

/* BASE STYLING FOR CIRRUS*/

* {
  margin: 0;
  padding: 0;
  /* Prevent setting borders from increasing the size of an elrement */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  border: none;
  height: 100%;
}

/* Nunito Sans for the font */
body {
  letter-spacing: 0.01rem;
  line-height: 1.8; /* Globally adjust line height */
  font-size: 1rem;
  font-weight: 400;
  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  letter-spacing: 0.01rem;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
  color: #374054;
}

/* Remove bullets from unordered lists */
ul {
  list-style: none;
}

/* Setting up embedded content */
img,
embed,
object,
audio,
video {
  max-width: 100%;
  height: auto;
}

/* remove iframe borders */
iframe {
  border: 0;
  outline: 0;
}

article,
aside,
figure,
footer,
header,
hgroup,
section {
  display: block;
}

.accent {
  background: -webkit-linear-gradient(top, #FF5F6D, #FFC371);
  background: linear-gradient(to bottom, #FF5F6D, #FFC371);
  color: #fff;
}

.accent-horiz {
  background: -webkit-linear-gradient(left, #FF5F6D, #FFC371);
  background: linear-gradient(to right, #FF5F6D, #FFC371);
}

.accent-ticket {
  background: -webkit-linear-gradient(top, #FF5F6D, #FFC371);
  background: linear-gradient(to bottom, #FF5F6D, #FFC371);
  color: #fff;
}


/* Selection Color */
::-moz-selection { /* Code for Firefox */
    background: rgba(0, 161, 255, 0.2);
}

::selection {
    background: rgba(0, 161, 255, 0.2);
}

/* When focusing any element */
:focus {

    outline: none;
}
/* FONT */

@import url('https://fonts.googleapis.com/css?family=Nunito:200,300,400,600,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  /* color: #363636; */ /* Removed 0.5.4, creates color inconsistencies */
}

h1 {
  font-size: 4rem; /* 64px */
  letter-spacing: .05rem;
    text-shadow:1px 2px 1px #000;  
}

h2 {
  font-size: 3.0rem;
}

h3 {
  font-size: 2.5rem;
}

h4 {
  font-size: 2.0rem;
}

h5 {
  font-size: 1.5rem;
}

h6 {
  font-size: 1.0rem;
}

.shadow {
  text-shadow:1px 2px 1px #000;
}

.strong {
  font-weight: 700;
}

.light {
  font-weight: 200;
  font-family: 'Nunito Sans';
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    line-height: 1.3em;
    margin: 1rem 0;
}

.content h6 {
    line-height: 1.5em;
}

.title {
  font-weight: bolder;
}

.title:not(:last-child), .subtitle:not(:last-child) {
    margin-bottom: 1rem;
}

.accent .subtitle {
    color: rgba(255, 255, 255, 0.9);
}

.title + .subtitle { /* Make the subtitlte closer to the title */
    margin-top: -1.25rem;
    /* font-size: 90%; */ /* Removed 0.5.4 */
}

p, article, blockquote {
  font-size: 1rem;
  line-height: 2rem;
  margin: 1rem 0;
}

.content > p:last-of-type {
  margin-bottom: 2rem;
}

blockquote {
  background-color: #f5f5f5;
  border-left: 5px solid #dbdbdb;
  padding: 1rem 2rem;
  border-radius: 3px;
}

blockquote p {
  margin: 0;
  font-size: 0.95rem;
}

/* Use default line-height for these texts and when line-height-inherit is specified */
.card-tile p, .card-tile article, .card-tile blockquote,
p.line-height-inherit, article.line-height-inherit, blockquote.line-height-inherit {
  line-height: inherit !important;
}

cite {
  opacity: 0.7;
}

/* Weights */
.font-thin {
  font-weight: 200;
}

.font-light {
  font-weight: 300;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.rtl {
  direction: rtl;
}

.white {
  color: #fff !important;
}

.red {
  color: #c7025d !important;
}

.faded {
  opacity: 0.75;
}

.italics {
  font-style: italic;
}

/* Font Awesome */
.icon { /* Usually used in spans */
  display: inline-block;
  font-size: 21px; /* Best font sizes are multiples of 7 */
  /* height: 100%; */ /* Removed since this caused the glyph to take up too much height */
  line-height: 1.5rem;
  text-align: center;
  vertical-align: top;
  width: 1.5rem;
  vertical-align: baseline; /* Experiment */
}

.icon .fa {
    font-size: inherit;
    vertical-align: middle;
}

.icon.x-small {
  margin: .55rem 0 0 0.1rem;
}

.icon.small {
  margin: .95rem 0 0 0.1rem;
}

.fa {
    font-size: 21px; /* Font sizes in multiple of 7s since they render the best */
    text-align: center;
    /* vertical-align: top; */ /* Removed 0.5.4 as it caused alignment issues */
}

.fa.x-small {
  font-size: 7px;
}

.fa.small {
  font-size: 14px;
}

.fa.large {
  font-size: 28px;
  padding: 0.5rem 0;
}

.fa.x-large {
  font-size: 35px;
  padding: 1rem 0;
}

.fa.xx-large {
  font-size: 42px;
    padding: 2rem 0;
}

.info {
    display: block;
    font-size: 0.75rem;
    color: #979797;
}

.info.inline { /* Keeps the extra info inline */
    display: inline-block;
    margin-left: .5rem;
}

.info.success {
  color: #4CAF50;
}

.info.error {
  color: #F44336;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* Other text elements */
abbr[title] {
    border-bottom: .1rem dotted;
    cursor: help;
    text-decoration: none;
}

kbd {
    background: #394558;
    border-radius: .2rem;
    color: #fff;
    display: inline-block;
    line-height: 1;
    padding: 0.5rem;
    vertical-align: baseline;
}

/* MOBILE */

@media (max-width: 650px) {
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2.0rem;
  }
  h3 {
    font-size: 2.0rem;
  }
  h4 {
    font-size: 1.5rem;
  }
  h5 {
    font-size: 1.3rem;
  }
  h6 {
    font-size: 1rem;
  }
  p, article, blockquote {
      margin: 1rem 0;
  }
}

/* FOOTER */

footer {
    width: 100%;
    padding: 6rem 0;
    background: #111;
    text-align: center;
    margin-top: 5rem;
}

footer a {
    font-weight: bolder;
    color: #fff;
}

footer p {
    color: #848484;
}

footer ul {
    margin: 0.5rem 0; /* Remove the left margin seen in global style */
}

footer h6 {
    text-align: center;
    letter-spacing: 0;
    position: relative;
    padding-bottom: 10px;
}

footer .footer-list-title {
    font-size: 75%;
    text-transform: uppercase;
    font-weight: bolder;
    color: #ddd;
}

footer .footer-list-title:after {
    content: "";
    display: block;
    width: 10%;
    margin: auto;
    border-bottom: 2px solid;
    border-color: #343b49;
}

footer ul a .list-item, footer .list-item {
      margin: 0.1rem;
    color: #888;
    transition: all .3s;
    font-size: 75%;
    text-transform: uppercase;
}

footer.footer-fixed {
    bottom: 0;
    position: fixed;
}
/* FORMS */

input[type="name"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="file"], select {
  width: 100%;
  border: 1px solid #ddd;
  padding: .8rem;
  box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
  border-radius: 3px;
  color: #5a5a5a;
  font-family: 'Nunito Sans';
  font-size: .85rem;
  letter-spacing: .02rem;
  box-sizing: border-box;
  transition: all .3s;
  outline: none;
    padding: .85rem 1.1rem;
}

input[type="search"] {
    -webkit-appearance: none; /* Fix Safari issue */
}

textarea, textarea[type=text] {
  width: 100%;
  border: 1px solid #ddd;
  padding: .8rem;
  box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
  border-radius: 3px;
  color: #5a5a5a;
  font-family: 'Nunito Sans';
  font-size: .85rem;
  letter-spacing: .02rem;
  box-sizing: border-box;
  transition: all .3s;
  outline: none;
  margin: .5rem 0;
   padding: 1rem 1.3rem;
    min-height: 8rem;
    line-height: 1.5rem;
}

input[type="color"] {
    width: 100%;
    border: 1px solid #ddd;
    box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
    outline: none;
    padding: .55rem 0.8rem;
    position: relative;
    background: #fff;
    height: 3rem;
    border-radius: 3px;
}

input[type="name"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="file"]:focus, select:focus, textarea:focus, textarea[type=text]:focus,
input[type="text"].input-focused,
.input-focused { 
    box-shadow: inset 0px 1px 8px rgba(0,0,0,0.1);
    border-color: rgba(0, 102, 255, 0.5);
}

select:not([multiple]) {
    -webkit-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 9 12"><path fill="#5e6c75" d="M0.722,4.823L-0.01,4.1,4.134-.01,4.866,0.716Zm7.555,0L9.01,4.1,4.866-.01l-0.732.726ZM0.722,7.177L-0.01,7.9,4.134,12.01l0.732-.726Zm7.555,0L9.01,7.9,4.866,12.01l-0.732-.726Z"/></svg>'); /* Add the up/down arrows for the multiselect */
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

select[multiple] option {
    padding: .2rem .4rem;
}

/* Search field */
input[type="search"], input.search {
    background-repeat: no-repeat;
    background-position: left 0.6rem center;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#000" fill-opacity="0.4" d="M14.891,14.39l-0.5.5a0.355,0.355,0,0,1-.5,0L9.526,10.529a5.3,5.3,0,1,1,2.106-4.212,5.268,5.268,0,0,1-1.1,3.21l4.362,4.362A0.354,0.354,0,0,1,14.891,14.39ZM6.316,2.418a3.9,3.9,0,1,0,3.9,3.9A3.9,3.9,0,0,0,6.316,2.418Z"/></svg>'); /* NEEDS FIXING */
    padding-left: 32px;
}

input:disabled, input:disabled:hover, select:disabled, textarea:disabled {
    background-color: #f3f3f6;
    cursor: not-allowed;
    border: 1px solid #f3f3f6;
}

label:first-child:not(:last-child):not(.form-group-label) {
    margin-right: 0.5rem;
}

label:not(:first-child):not(:last-child):not(.form-group-label) {
    margin: 0 0.5rem;
}

label:last-child:not(:first-child):not(.form-group-label) {
    margin-left: 0.5rem;
}

/* Required asterisk */
.required { /* Use this in a span or a div */
    position: relative;
    top: 1px;
    font-weight: bold;
    color: #f03c69;
    padding-left: .1rem;
}

.label:not(:last-child) {
    margin-bottom: 0;
}

.label {
    color: #4a4a4a;
    display: inline-block; /* changed from block */
    font-weight: bold;
    margin-top: .8rem;
}

.text-success {
    border-color: #4CAF50 !important;
}

.text-dark {

}

.input-success {
    background-color: rgba(0, 224, 0, 0.05);
}

.text-error {
    border-color: #F44336 !important;
}

.input-error {
    background-color: rgba(244, 67, 54, 0.05);
}

/* Input Field Sizes */
input[type].input-xsmall, select.input-xsmall {
    font-size: 0.65rem;
    padding: .35rem .9rem;
}

input[type].input-small, select.input-small {
    font-size: 0.75rem;
    padding: .55rem 1rem;
}

input[type].input-large, select.input-large {
    font-size: 1.5rem;
}

input[type].input-xlarge, select.input-xlarge {
    font-size: 2rem;
}

/* Select sizes */
select.input-xsmall {
    padding: .65rem 0.9rem;
}

select.input-small {
    padding: .75rem 1rem;
}

select.input-large {
    padding: .95rem 1.2rem;
}

select.input-xlarge {
    padding: 1.05rem 1.3rem;
}

/* Used for when the input controls have another control adjacent to it but we want to position it inside the input field like font-awesome glyphs. As of 0.5.2, it is the default container for input fields. */
.input-control {
  position: relative;
    margin: 0.5rem 0;
}

/* Hold Font Awesome glyphs inside input fields */
/* More sizes coming soon */
input[type].input-contains-icon,
input[type].input-contains-icon-left { /* input[type].input-contains-icon supported for legacy 0.5.2 and below */
    padding-left: 2.75rem;
}

input[type].input-contains-icon-right {
    padding-right: 2.75rem;
}

input[type].input-contains-icon.input-xsmall,
input[type].input-contains-icon-right.input-xsmall {
    padding-left: 2rem;
}

input[type].input-contains-icon.input-xsmall ~ .icon,
input[type].input-contains-icon-left.input-xsmall ~ .icon,
input[type].input-contains-icon-right.input-xsmall ~ .icon.icon-right {
    line-height: 1.75rem;
    width: 1.75rem;
    font-size: 7px;
}

input[type].input-contains-icon.input-small,
input[type].input-contains-icon-right.input-small {
    padding-left: 2.5rem;
}

input[type].input-contains-icon.input-small ~ .icon,
input[type].input-contains-icon-left.input-small ~ .icon,
input[type].input-contains-icon-right.input-small ~ .icon.icon-right {
    line-height: 2rem;
    width: 2.5rem;
    font-size: 14px;
}

input[type].input-contains-icon.input-large,
input[type].input-contains-icon-right.input-large {
    padding-left: 3rem;
}

input[type].input-contains-icon.input-large ~ .icon,
input[type].input-contains-icon-left.input-large ~ .icon,
input[type].input-contains-icon-right.input-large ~ .icon.icon-right {
    line-height: 3.5rem;
    width: 3.5rem;
    font-size: 28px;
}

input[type].input-contains-icon.input-xlarge,
input[type].input-contains-icon-right.input-xlarge {
    padding-left: 3.5rem;
}

input[type].input-contains-icon.input-xlarge ~ .icon,
input[type].input-contains-icon-left.input-xlarge ~ .icon,
input[type].input-contains-icon-right.input-xlarge ~ .icon.icon-right {
    line-height: 2.5rem;
    width: 3.75rem;
    font-size: 35px;
}

.input-contains-icon ~ .icon:not(.icon-right),
.input-contains-icon-left ~ .icon.icon-left { /* Nomral input only */
    position: absolute;
    left: 0;
    top: 0;
    width: 3rem;
    line-height: 2.75rem;
    vertical-align: baseline;
    z-index: 1;
}

.input-contains-icon-right ~ .icon.icon-right {
    position: absolute;
    pointer-events: none;
    line-height: 2.75rem;
    vertical-align: baseline;
    top: 0;
    right: 0;
    width: 3rem;
    z-index: 1;
}

/* Form section just adds extra spacing between form elements tiled vertically */
.form-section:not(:last-child) {
    margin-bottom: 0.5rem;
}

/* A flexbox version of form-section for inline forms */
.form-section.section-inline {
    display: flex;
}

.form-section.section-inline label:not(.form-group-label),
.form-section.section-inline button {
    align-items: center;
    flex-grow: 0; /* Keep it from taking up extra space */
    display: flex;
    flex-shrink: 0;
}

.form-section.section-inline input,
.form-section.section-inline .section-body {
    align-items: center;
    flex-grow: 1;
}

/* Form groups that group inputs with other controls. */
.form-group {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex; /* Using flexbox for form group */
    margin: 0.5rem 0; /* Add margin to the container since they have been removed from children */
}

/* Fixes the text width being cut off */
.form-group .form-group-btn {
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

/* This is just an extended portion of an input which is just like a label and is read only */
/* This will style the controls if they are the leftmost control in the form group for labels, inputs, and buttons. */
.form-group .form-group-label:first-child:not(:last-child), .form-group .form-group-input:first-child:not(:last-child), .form-group .form-group-btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Style the middle controls */
.form-group .form-group-label:not(:first-child):not(:last-child), .form-group .form-group-input:not(:first-child):not(:last-child), .form-group .form-group-btn:not(:first-child):not(:last-child) {
    border-radius: 0;
    margin-left: -.1rem;
    margin-right: -.1rem; /* Remove spacing in middle controls */
}

/* Handles right most control in form group */
.form-group .form-group-label:last-child:not(:first-child), .form-group .form-group-input:last-child:not(:first-child), .form-group .form-group-btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -.1rem;
}

/* Form group controls */
.form-group-label {
    border-radius: .2rem;
    padding: .8rem;
    background: #f8f9fa;
    border: 1px solid #ddd;
    color: #909090;
    user-select: none;
}

.form-group-label.label-xsmall {
    font-size: 0.55rem;
    padding: .35rem .9rem;
}

.form-group-label.label-small {
    font-size: 0.75rem;
    padding: .55rem 1rem;
}

.form-group-label.label-large {
    font-size: 1.5rem;
}

.form-group-label.label-xlarge {
    font-size: 2rem;
}

/* Keeps inputs in form group above other components */
.form-group-input {
    z-index: 1;
}

/* Change place holder color */
::-moz-placeholder {
    color: #a9a9a9; /* Lighter than the default */
}

::-webkit-input-placeholder {
    color: #a9a9a9; /* Lighter than the default */
}

@media screen and (max-width: 768px) {
    /* Remove flex in form-section */
    .form-section.section-inline {
        display: inherit;
    }
}
/* Separate CSS file, but same part as Layout */

/* The base container that is similar in structure to a card but more flexible */
.frame {
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    /* border: .1rem solid #ececec; */
    box-shadow: 0 0.05rem 0.2rem rgba(69, 77, 93, .3);
}

/* For the frame header and footer, use flex display */
.frame .frame-header,
.frame .frame-footer {
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    padding: 1rem;
}

/* The frame navbar can be used with level or header classes to create a navigation menu */
.frame .frame-nav {
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
}

.frame .frame-body {
    flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    overflow-y: auto; /* Show the scrollbar when needed */
    padding: 0 1.5rem;
}

.frame .frame-title {
    color: #374054;
    font-size: 1rem;
    margin: 0.5rem auto;
}

.frame .frame-subtitle {
    color: rgba(55, 64, 84, 0.6);
    font-size: .85rem;
    margin: 0.25rem auto;
}
/* HEADER */
.header {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 0;
    width: 100%;
    z-index: 100;
    margin-bottom: 20px; 
    box-shadow: 0 3px 15px rgba(57, 63, 72, 0.1);
    background: #fff;
    max-height: 100vh;
}

/* Hader dar theme */
.header-dark {
	width: 100%;
    background-color: rgba(0, 0, 0, 0.87);
}

.header-clear {
    background-color: transparent;
    box-shadow: none;
}

/* Add transition to nav menu when it drops down */
.header.header-animated .header-nav {
    -webkit-transition: background 0.4s ease, height 0.4s ease;
    transition: background 0.4s ease, height 0.4s ease;
    -webkit-transition-property: background, height;
    transition-property: background, height;
    -webkit-transition-duration: 0.4s, 0.4s;
    transition-duration: 0.4s, 0.4s;
    -webkit-transition-timing-function: ease, ease;
    transition-timing-function: ease, ease;
    -webkit-transition-delay: initial, initial;
    transition-delay: initial, initial;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.header-brand {
    -webkit-overflow-scrolling: touch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    max-width: 100vw;
    min-height: 3.25rem;
    overflow-x: auto;
    overflow-y: hidden;
}

/* The container that contains all the header menu components. Child of header */
.header-nav {
    /* Flex display 768px and higher */
    overflow: auto;
}

/* Styles for header menu (aka the nav bar) */
.nav-menu {
    -webkit-transition: all .3s;
    transition: all .3s;
}


/* Allow the user to scroll through navbar items if it exceeds nav-left, nav-center, or nav-right widths */
.nav-overflow-x {
    -webkit-box-pack: inherit;
	-ms-flex-pack: inherit;
	justify-content: inherit;
    overflow-x: scroll;
}

/* Static header at the top of the screen */
.header-fixed {
    position: fixed;
    top: 0; /* Change this if you want to float the header somewhere else */
}

/* Wrapper to vertically center header items */
.nav-item {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all .3s;
    transition: all .3s;
    padding: 0 .3rem;
    cursor: pointer;
}

.nav-item a {
    width: 100%;
}

.nav-item a:hover {
    width: 100%;
	color: #CCC!important;
}

/* Hover effect for header elements when appropriate */
.header:not(.header-clear) .nav-item:not(.no-hover):hover,
.header:not(.header-clear) .nav-item:not(.no-hover).hovered {
     -webkit-transition: all .3s;
     transition: all .3s;
    background-color: transparent;
}

.header:not(.header-clear) .nav-item.active, /* active:hover removes the transition effect when hoveirng over the dropdown menu */ 
.header:not(.header-clear) .nav-item.active:hover {
    background-color: transparent;
}

/* HEADER DROP DOWN MENU */
.nav-item .dropdown-menu {
    background-color: #fff;
    position: absolute;
    top: 95%;
    /*right: 0; /* Unable to solve problem when we have multiple drop down menus */
    z-index: 1000;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-clip: padding-box;
    border: 1px solid #eee;
    border-radius: 0 0 4px 4px;
    -webkit-box-shadow: 0 0.5rem 1rem rgba(10, 10, 10, 0.1);
    box-shadow: 0 0.5rem 1rem rgba(10, 10, 10, 0.1);
}

/* Add border radius to whole menu with clear header */
.header.header-clear .nav-item .dropdown-menu {
    border-radius: 4px;
}

/* Just add a transition in general */
.nav-item .dropdown-menu.dropdown-animated {
    -webkit-transition: all .2s;
    transition: all .2s;
}

/* Dropdown menu location adjustment located below for sizes above phones */

/* Dropdown menu indicator */
.nav-item.has-sub .nav-dropdown-link::after {
    border: 2px solid #f03d4d; /* Must be first to create the triangle shape */
    border-right: 0; /* Create the triangle effect */
    border-top: 0;
    display: block;
    height: 0.5em;
    width: 0.5em;
    content: " ";
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    pointer-events: none;
    margin-top: -0.435em;
    right: 1.125em;
    top: 50%;
    position: absolute;
}

/* Add room for the dropdown chevron pseudoelement */
.nav-item.has-sub .nav-dropdown-link {
    padding-right: 2.5rem;
    position: relative;
}

/* Dark dropdown menu theme */
.nav-item .dropdown-menu.dropdown-dark,
.header-dark .dropdown-menu{
    background-color: rgba(0, 0, 0, 0.87);
    border: 1px solid #333;
    color: #fff;
}

.dropdown-menu.dropdown-shown,
.nav-item.active {
    opacity: 1;
}

.dropdown-menu > li > a {
    display: block;
        padding: .5rem 1rem;
    clear: both;
    line-height: 1.42857143;
    white-space: nowrap;
}

/* Theme for dark menu */
.header-dark .nav-item a,
.header-dark .dropdown-menu > li > a {
    color: #fff;
}

.dropdown-menu > li {
  margin: 0;
    -webkit-transition: all .3s;
     transition: all .3s;
}

.dropdown-menu > li:hover {
    -webkit-transition: all .3s;
     transition: all .3s;
      background-color: rgba(144, 144, 144, 0.15);
}

.dropdown-menu > li:active {
    -webkit-transition: all .3s;
     transition: all .3s;
      background-color: rgba(144, 144, 144, 0.25);
}

.dropdown-menu > li:last-child {
    margin-bottom: 0;
}

.dropdown-menu .dropdown-menu-divider {
    border: none;
    background-color: rgba(144, 144, 144, 0.15);
    height: 1px;
    margin: 0.5rem 0;
}

.nav-btn {
    cursor: pointer;
    display: block;
    height: 3.5rem;
    position: relative;
    width: 3.5rem;
}

@media screen and (min-width: 769px) {
    .header {
        -webkit-box-align: stretch; /* Box Align and align items to stretch to make nav-items fill up parent height */
        -ms-flex-align: stretch;
        align-items: stretch;
        display: -webkit-box; 
        display: -ms-flexbox;
    }
    
    .header-nav {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 0;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch; /* Make items fill up all available space regardless of width https://drafts.csswg.org/css-align/ */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        text-align: center;
        width: 100%;
        top: 0;
        overflow: visible; /* Only visible for showing dropdown menus, hidden for mobile */
    }

    /* These styles can also be used on menus in the body */
    .nav-left, .nav-right {
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        -ms-grid-row-align: stretch;
        align-items: stretch;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        /*overflow: hidden;*/
    }

    /* Align items to the left */
    .nav-left {
            display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        /*overflow: hidden;
        overflow-x: auto;*/
        white-space: nowrap;
    }

    /* Align items to the right */
    .nav-right {
        display: -webkit-box;
        display: -ms-flexbox;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        /*overflow: hidden;
        overflow-x: auto;*/
        white-space: nowrap;
    }

    /* Centering items, best used when nav-brand is not used to prevent offset */
    .nav-center {
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* Hide hamburger button */
    .nav-btn {
        display: none;
    }

    .nav-item {
        position: relative; /* Include for helping dropdown menu positioning */
    }

    /* Expand link area for desktop views so it is easier to click */
    .nav-item a {
        padding: 0.5rem 1rem;
    }

    .nav-item .dropdown-menu {
        opacity: 0;
        pointer-events: none; /* Make cursor not respond to menu links when not displayed */
    }

    .nav-item .dropdown-menu.dropdown-animated {
        -webkit-transform: translateY(-5px); /* Used for transitional drop down effect */
        transform: translateY(-5px);
    }

    .nav-item .dropdown-menu.dropdown-shown,
    .nav-item.toggle-hover:hover .dropdown-menu,
    .nav-item .dropdown-menu.dropdown-animated.dropdown-shown,
    .nav-item.toggle-hover:hover .dropdown-animated.dropdown-menu  {
        opacity: 1;
        -webkit-transform: none; /* Used for transitional drop down effect */
        transform: none;
        pointer-events: auto;
    }

    /* Align dropdown menu to the left side of the parent nav-item for header-left */
    .nav-left .has-sub .dropdown-menu {
        left: 0;
        right: auto;
    }

    /* Align dropdown menu to the right side of the parent nav-item for header-right */
    .nav-right .has-sub .dropdown-menu {
        left: auto;
        right: 0;
    }
}

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

    /* Add scrolling support in header */
    .header {
        display: flex;
        flex-direction: column;
    }

    .header-brand .nav-item:first-child {
        padding: 0 1rem; /* Add padding to the first child, usually the logo */
    }

    /* Hide dropdon menu on mobile */
    .header-nav {
        height: 0;
    }

    /* Show the dropdown */
    .header-nav.active {
        height: 100vh;
		background: rgba(0, 0, 0, 0.7);
    }

  /* Remove flex for mobile devices */
    .nav-item.has-sub {
        display: block;
    }

.nav-item.has-sub .dropdown-menu.dropdown-shown {
    border-radius: 0;
    box-shadow: none;
    display: block;
    position: relative;
    top: 1rem;
    float: none;
    border: none;
    background: transparent;
  }

  .nav-item.has-sub .dropdown-menu.dropdown-dark {
        background-color: rgba(0, 0, 0, 0.17);
        border: 0;
        color: #fff;
    }

    /* Hide the menu by default in mobile view (overflow on header-right can expose it) */
    .nav-item.has-sub .dropdown-menu {
        display: none;
    }

  /* Make the menu items larger in the dropdown menu */
  .header-nav .nav-item {
    padding: 1rem;
  }

  /* Get rid of extra spaces */
  .header-nav .nav-item > a {
    padding: 0;
    width: 100%; /* Stretch the link to span the entire list item */
  }

  /* Hamburger button */
  .nav-btn {
    cursor: pointer;
    display: block;
    position: relative;
    margin-left: auto;
  }

  .nav-btn span {
        background-color: #4D565F;
    display: block;
    height: 2px;
    left: 50%;
    margin-left: -7px;
    position: absolute;
    top: 50%;
    -webkit-transition: none 86ms ease-out;
    transition: none 86ms ease-out;
    -webkit-transition-property: background, left, opacity, -webkit-transform;
    transition-property: background, left, opacity, -webkit-transform;
    transition-property: background, left, opacity, transform;
    transition-property: background, left, opacity, transform, -webkit-transform;
    width: 15px;
  }

  /* Line spacing in hamburger button */
  .nav-btn span:nth-child(1) {
    margin-top: -6px;
  }

  .nav-btn span:nth-child(2) {
    margin-top: -1px;
  }

  .nav-btn span:nth-child(3) {
    margin-top: 4px;
  }
  
  /* Hamburger button on active */
    .nav-btn.active span:nth-child(1) {
        margin-left: -5px;
        transform: rotate(45deg);
        transform-origin: left top;
    }

    .nav-btn.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-btn.active span:nth-child(3) {
        margin-left: -5px;
        transform: rotate(-45deg);
        transform-origin: left bottom;
    }

  /* Hide drop down menu items */
  .nav-left, .nav-center, .nav-right {
      overflow: hidden;
  }
}

@media screen and (min-width: 1003px) {
    .header {
        padding: 0 2rem;
    }
}
/* HEADER */

.content {
  max-width: 60em;
  margin: 0 auto 1.5em;
  width: 90%;
}

.content-no-padding { /* Content without the extra margin at the bottom */
  max-width: 60em;
  margin: 0 auto;
  width: 80%;
}

/* Content that centers in parent and fills parent div without the extra vertical margin */
.content-fluid {
  width: 100%;
  margin: 0 auto;
}

.fullscreen {
   top:0;
   right:0;
   bottom:0;
   left:0;
   height: 100vh;
}

/* This works well with panel */
section {
    display: block;
}

.panel {
    padding: 2.5em 0;
}

/* This works well with spans and maybe even hr */
.divider {
  display: block;
  height: 2px;
  position: relative;
  border-top: none;
  margin-top: 2rem;
  margin-bottom: 2rem;
  background: #eee;
      width: 100%;
}

.divider-short {
  max-width: 15rem;
  width: 100%;
}

/* Hero image div */
.hero-img {
  /* Specify the backgroud image yourself */
  background-size: cover;
}

.parallax-img {
  background-attachment: fixed !important;
}

.hero { /* Parent of hero-body */
  -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* Important to stretch height of hero-body */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column; /* Stack the items in the container */
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.hero-body {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; /* Tells the hero-body to take up the entire space */
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding: 3rem 1.0rem;
    -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

space {
  display: block;
  width: 100%;
  height: 1rem;
}

space.large {
  padding: 1rem 0;
}

space.x-large {
  padding: 2rem 0;
}

/* Use for spacing out elements vertically */
.row {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-width: 100%;
    padding: .5rem;
}

.row:after {
  content: '';
  clear: both;
  display: table;
}

/* GRID */
.row .col-1 {
  width: 8.33333333%;
}

.row .col-2 {
  width: 16.66666667%;
}

.row .col-3 {
  width: 25%;
}

.row .col-4 {
  width: 33.33333333%;
}

.row .col-5 {
  width: 41.66666667%;
}

.row .col-6 {
  width: 50%;
}

.row .col-7 {
  width: 58.33333333%;
}

.row .col-8 {
  width: 66.66666667%;
}

.row .col-9 {
  width: 75%;
}

.row .col-10 {
  width: 83.33333333%;
}

.row .col-11 {
  width: 91.66666667%;
}

.row .col-12 {
  width: 100%;
}

/* Column offsets on the left side */
.row .offset-1 {
  margin-left: 8.33333333%;
}

.row .offset-2 {
  margin-left: 16.66666667%;
}

.row .offset-3 {
  margin-left: 25%;
}

.row .offset-4 {
  margin-left: 33.33333333%;
}

.row .offset-5 {
  margin-left: 41.66666667%;
}

.row .offset-6 {
  margin-left: 50%;
}

.row .offset-7 {
  margin-left: 58.33333333%;
}

.row .offset-8 {
  margin-left: 66.66666667%;
}

.row .offset-9 {
  margin-left: 75%;
}

.row .offset-10 {
  margin-left: 83.33333333%;
}

.row .offset-11 {
  margin-left: 91.66666667%;
}

.row .offset-12 {
  margin-left: 100%;
}

/* Auto align col-n to left in fluid-container */
.fluid-container .offset-right {
  margin-left: 0;
  margin-right: auto;
}

/* Auto align col-n to middle in fluid-container */
.fluid-container .offset-center {
  margin-left: auto;
  margin-right: auto;
}
/* Auto align col-n to right in fluid-container */
.fluid-container .offset-left {
  margin-left: auto;
  margin-right: 0;
}

/* Use in parent div of fluid col */
.fluid-container {
  display: flex;
  overflow: auto;
}

/* Wrap controls instead on overflow */
.fluid-container.wrap {
  -webkit-align-items: center;
    align-items: center;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    -ms-flex-align: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* Resizes elements in a row equally given the number of elements located in it */
.fluid-container .col-fluid {
    display: block;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
}

/* No expansion for specific col-fluid columns */
.fluid-container .col-fluid.no-flex {
    flex-grow: 0;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    -ms-flex-negative: 0;
}

/* Some offset values */
.row [class^='col-'], .row [class*=" col-"] {
  float: left; /* Keeps the elements in 1 row */
  padding: 0 .5rem;
}

/* Columns without the spacing */
.row [class^='col-'].no-space, .row [class*=" col-"].no-space {
  padding: 0;
}

/* Ignore overflow in columns */
.row.expand {
    -webkit-flex-wrap: nowrap; /* Remove wrapping of the columns by default */
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto; /* Can be disabled to remove scroll bar */
}

/* Only for divs with .expand so they can go past the parent div width */
.row.expand [class^='col-'], .row.expand [class*=" col-"] {
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}

/* Known to cause spacing issues in columns */
/*.row [class^='col-']:first-child, .row [class*=" col-"]:first-child{
  margin-left: 0;
}*/
 
/* Used for aligning controls next to each other */
.row.has-controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

/* Divider for multiple elements in a div */
.divided >.fluid-container:not(.row), .divided >.row [class^='col-'] {
    box-shadow: -1px 0 0 0 rgba(34,36,38,.15);
}

/* Remove border in first child */
.divided >.row [class^='col-']:first-child, .divided >.row [class^='col-']:first-child {
    box-shadow: none;
}

.level {
    -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.level-left {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start; /* Start for left */
  margin-right: 1rem;
}

.level-right {
    -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end; /* End for right */
}

.level-item { /* Centers items */
      -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Used to stretch the contents of div in level to fill */
.level-content {
  -ms-flex-preferred-size: auto;
    flex-basis: auto;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    text-align: left;
    width: 100%;
}

/* PAGINATION */
/* Parent contianer for page navigation */
.pagination {
  display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
}

/* Use for the major pagination meant to display about 2 items */
.pagination-item {
  -webkit-flex: 1 0 50%; /* Flex to fill */
  -ms-flex: 1 0 50%;
  flex: 1 0 50%;
}

.pagination .pagination-item *[disabled] {
    cursor: pointer;
    opacity: .5;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.pagination .pagination-item {
  margin: 1rem .1rem;
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
}

.pagination .pagination-item.pagination-next {
  text-align: right;
}

.pagination .pagination-item.pagination-prev {
  text-align: left;
}

.pagination-item-subtitle {
  opacity: 0.7;
  margin: 0 !important; /* Needed to override style after formatting paragraph update */
}

/* Color the selected pagination item with accent color */
.pagination .pagination-item.short.selected {
  background-color: #f03d4d;
  color: #fff;
}

.pagination .pagination-item.short.selected a {
  color: #fff;  
}

.pagination .pagination-item.short * {
  display: inline-block;
}

/* Used to display many pagination items */
.pagination .pagination-item.short {
  margin: .2rem;
  border-radius: .1rem;
  -webkit-flex: 0; /* Flex to fill */
  -ms-flex: 0;
  flex: 0;
}

/* Not good but CSS does not have heading selectors. Need to move to SASS */
.pagination .pagination-item:hover p,
.pagination .pagination-item:hover h1,
.pagination .pagination-item:hover h2,
.pagination .pagination-item:hover h3,
.pagination .pagination-item:hover h4,
.pagination .pagination-item:hover h5,
.pagination .pagination-item:hover h6,
.pagination .pagination-item:hover *:not([disabled]) {
  transition: all .3s;
  color: #f03d4d;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
}

/* Width CSS */
.w-10 {
  width: 10%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 30%;
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-70 {
  width: 70%;
}

.w-80 {
  width: 80%;
}

.w-90 {
  width: 90%;
}

.w-100 {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .level-right {
      margin-left: 1rem;
  }

  /* Keep all level children the same height */
  .level.fill-height {
      -webkit-box-align: stretch; /* Box Align and align items to stretch to make nav-items fill up parent height */
      -ms-flex-align: stretch;
      align-items: stretch;
      display: -webkit-box; 
      display: -ms-flexbox;
  }
}

/* MOBILE */
@media screen and (max-width: 768px) {
    .row {
	  margin: 0;
	  padding: 0;
    }

    .row [class^='col-']:not(.ignore-screen), .row [class*=" col-"]:not(.ignore-screen) { /* Remove the grid structure for smaller screens */
      width: 100%;
      margin-top: 1rem;
      margin-left: 0;
    }

    /* Increase space with cards */
    .fluid-container  [class^='col-']:not(.ignore-screen), .row [class*=" col-"]:not(.ignore-screen) {
      margin-top: 1rem;
    }

    .fluid-container {
      display: inherit;
    }

    /* Dividers for mobile layout */
    .divided >.fluid-container:not(.row), .divided >.row [class^='col-'] {
    box-shadow: none;
  }
  

  .level.ignore-screen, .level-left.ignore-screen, .level-right.ignore-screen {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
  }
}

/* LINKS */

a {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  color: #c7025d;
  text-decoration: none;
  padding: 2px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

a:hover {
  color: #7C8B9A;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  -webkit-backface-visibility:hidden;
  		  backface-visibility:hidden;
}

a,a:visited,a:hover,a:active{
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
	text-decoration:none;
}

.subtitle a {
  padding: 0; /* Removes weird offset in subtitle links */
}

a.display-block {
  display: block;
}

a.underline {
  text-decoration: underline;
}

/* Animated links */
.u, .utb {
  position: relative; /* So the psuedo-elements are positioned correctly */
}

/* Underline */

.u:after {
  content: "";
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      position: absolute;
      height: 0.1rem;
      width: 0;
      background: #7C8B9A;
      bottom: -0.25em;
}

.u:hover:after {
  width: 100%
}

.u-LR:after { /* Left to Right */
  left: 0;
}

.u-RL:after { /* Right to Left */
  right: 0;
}

.u-RL:hover:after {
  width: 100%;
}

.u-C:after { /* Center Outwards */
  left:50%;
  -webkit-transform:translateX(-50%);
          transform:translateX(-50%);
}

/* Underline top and bottom */
.utb:before, .utb:after {
  content: "";
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      position: absolute;
      height: 0.1rem;
      width: 0;
      background: #7C8B9A;
}

.utb:before {
  top: -0.25em;
}

.utb:after {
  bottom: -0.25em;
}

.utb:hover:before, .utb:hover:after {
  width: 100%;
}

.utb-LR:before, .utb-LR:after {
  left: 0;
}

.utb-RL:before, .utb-RL:after {
  right: 0;
}

.utb-C:before, .utb-C:after {
  left: 50%;
  -webkit-transform:translateX(-50%);
          transform:translateX(-50%);
}

/* Opposite start */
.utb-OLR:before { /* Suffix denotes border transition direction for the top border (left to right). Bottom border will be the opposite direction */
  left: 0;
}

.utb-OLR:after {
  right: 0;
}

.utb-ORL:before {
  right: 0;
}

.utb-ORL:after {
  left: 0;
}

/* Links with square borders */

/* Please note that usquare is the parent span (not div) which would create the left and right borders. The link (.utb-OLR) gets nested within this */

.usquare{
  box-sizing:border-box; /* keeps the border from resizing the link */
  margin-left: 0.4rem;
  position: relative;
  overflow: hidden;
}

.usquare a{
  position: static;
  padding: 0.2rem 0.4rem;
}

.usquare:before, .usquare:after{
  content: "";
  box-sizing: border-box;
  transition: 0.25s all ease;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  width: 2px;
  width: 0.1 rem;
  height: 0;
  background: #7C8B9A;
}

.usquare:before{
  left: 0;
  bottom: -0.2rem;
}

.usquare.delay:before{
  transition-delay: 0.6s;
}

.usquare:after{
  right: 0;
  top: -0.2rem;
}

.usquare.delay:after{
  transition-delay: 0.2s;
}

.usquare a:before {
  left:0;
  transition: 0.25s all ease;
}

.usquare a:after {
  right:0;
  transition: 0.25s all ease;
}

.usquare.delay a:after {
  transition: 0.25s all ease 0.4s;
}

.usquare:hover:before, .usquare:hover:after{
  height:calc(100% + 0.4rem); /* Makes the left and right borders */
}

.usquare:hover a:before, .usquare:hover a:after{
  width:100%;
}

/* Makes the regular link have slightly more padding */
.btn-link {
  padding: 0.5rem;
}
/* LISTS */

ul {
  list-style: disc outside;
  margin: 2.5rem 0 0.5rem 1.5rem;
}

ol {
  list-style: decimal outside;
  margin: 0 0 0.5rem 1.5rem;
}

/* Handle nesting */
ul ul, ol ul, ul ol, ol ol {
  margin: 1rem 0 1rem 1rem;
}

/* Nested list bullet types */
ul ul {
  list-style-type: circle;
}

ul ul ul {
  list-style-type: square;
}

ol ol {
  list-style: lower-alpha;
}

ol ol ol {
  list-style: upper-roman;
}

/* Description lists */

dl {
  margin: 1rem 0;
}

/* Detail title */
dt {
  font-weight: bold;
}

dd {
    margin-left: 1rem;
}

li {
  margin: 0.35rem 0;
}

/* Exclude margin in menus */
li:not('.dropdown-menu li'):last-child {
  margin-bottom: 1em;
}

/* MISC */
ul.no-bullets {
  list-style: none;
}

/* MENU LISTS */
.menu {
  font-size: 1rem;
}

ul.menu {
  list-style: none;
  margin: .5rem 0;
}

/* Style headers to have even space distribution. */
.menu-title:not(:first-child) {
  margin-bottom: 1rem;
}

.menu-title:not(:last-child) {
  margin-top: 1rem;
}

/* Style menu items */
.menu .menu-item a {
  color: #555;
  display: block;
  padding: 0.5em 0.75em;
  border-radius: 3px;
  font-size: 0.85rem;
  cursor: pointer;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.menu .menu-item:hover > a {
  background: rgba(208, 208, 208, 0.3);
  color: #d43644;
  -webkit-transition: all .2s;
  transition: all .2s;
  
}

.menu .menu-item.selected > a {
  color: #fff;
  background: #f03d4d;
}

.menu .menu-item .menu-addon {
  padding: 0.3rem;
  z-index: 1;
  position: relative;
  color: #374054;
  cursor: pointer;
  float: left;
  margin-right: .1rem;
  -webkit-transition: all .2s;
  transition: all .2s;
}

/* Darken on hover to differentiate from menu-item */
.menu .menu-item .menu-addon:hover {
  background-color: rgba(60, 60, 60, 0.25);
  -webkit-transition: all .2s;
  transition: all .2s;
}

.menu .menu-item .menu-addon.right {
  float: right;
  margin-right: 0;
  margin-left: .1rem
}

.menu .menu-item.selected .menu-addon {
  color: #fff;
}

/* Style sub menus inside a menu */
.menu .menu-item ul {
    border-left: 1px solid #dbdbdb;
    margin: 0.75rem;
    padding-left: 0.75rem;
}

/* Menu item divider */
.menu .divider {
    border-top: .1rem solid #eee;
    height: .1rem;
    margin: 1rem 0;
}

/* Title for the section separated by the divider */
.menu .divider:after {
  content: attr(data-label); /* Text that will be displayed */
  background: #fff;
  color: #b7b7b7;
  display: inline-block;
  padding: 0 .7rem;
  margin: .5rem;
  font-size: .7rem;
  -webkit-transform: translateY(-1.1rem);
    transform: translateY(-1.1rem);
}

/* Dropdown menu for dropdown buttons */
.menu-dropdown {
  display: inline-block;
  position: relative;
}

.menu-dropdown .menu {
  position: absolute;
  top: 75%;
  left: 0;
  -webkit-animation: slide-down .2s ease 1;
  animation: slide-down .1s ease 1;
  background: #fff;
  border-radius: .2rem;
  -webkit-box-shadow: 0 0.1rem 0.4rem rgba(69, 77, 93, .3);
          box-shadow: 0 0.1rem 0.4rem rgba(69, 77, 93, .3);
  margin: 0;
  opacity: 0;
  min-width: 15rem;
  padding: 0.25rem 0.5rem;
  -webkit-transform: translateY(.5rem);
  transform: translateY(.5rem);
  z-index: 10;
  pointer-events: none; /* Remove pointer events to prevent mouse hover to show menu even though it is not visible */
  overflow: hidden;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.menu-dropdown.dropdown-right .menu {
  left: auto;
  right: 0;
}

/* Allow for shown and :focus selectors for JS and native CSS transitions */
.menu-dropdown.shown .menu,
.menu-dropdown .btn-dropdown:focus + .menu,
.menu-dropdown .menu:hover {
  display: block;
  opacity: 1;
  top: 100%;
  z-index: 100;
  pointer-events: auto; /* Restore pointer events */
  height: auto;
  -webkit-transition: all .2s;
  transition: all .2s;
}

.menu-dropdown .btn-group .btn-dropdown:nth-last-child(2) {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}

/* TREE */
/* Tree Navigation Menu */
.tree {
  margin: 0;
}

/* The title of the tree menu */
.tree .tree-item .tree-item-header {
  display: block;
  padding: .25rem .5rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600; /* Keep styling consistent with menu-items */
}

/* The dropdown glyph of the tree menu */
.tree .tree-item .tree-item-header .icon {
  -webkit-transition: all .2s;
  transition: all .2s;
}

/* Expand the tree-item-body (has menu-items) */
.tree .tree-item input:checked ~ .tree-item-body {
  max-height: 100vh;
}

/* Rotate the dropdown glyph */
.tree .tree-item input:checked ~ .tree-item-header .icon {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

/* Container for the menu-items of the tree menu */
.tree .tree-item .tree-item-body {
  max-height: 0; /* Hidden at first */
  margin-left: 1.5rem;
  overflow: hidden;
  -webkit-transition: all .2s;
  transition: all .2s;
}

/* TODO: Docs */
/* The body that will encompass the tree-nav and tree-nav-content */
.tree-nav-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

/* A fixed menu on the side with a tree component */
.tree-nav {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  padding: 2rem 1rem 2rem 2rem;
  min-width: 15rem;
  height: 100vh;
  overflow: auto;
}

/* The container for the tree component to prevent it from overflowing */
.tree-nav .tree-nav-container {
  overflow-y: auto;
  top: 4rem;
  bottom: 1rem;
}

/* Darkened area that will close the navbar when clicked for mobile only */
.tree-nav + .tree-nav-close {
  display: none; /* Not needed in desktop */
}

/* Push document body further right to account for sidebar space */
.tree-nav + .tree-nav-content {
    max-width: 100%;
    padding: 2rem;
    -ms-flex: 1 0 auto;
    -webkit-box-flex: 1;
            flex: 1 0 auto;
    overflow: auto;
    margin: 0;
}

/* The body where all other HTML components are entered if a tree-nav is used */
.tree-nav-content {
  width: 100%;
  overflow: auto;
  margin: 0;
  padding: 2rem;
}

/* Decrease font-weight in tree-nav menu-items */
.tree-item-body .menu .menu-item a {
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  /* Hide the menu to the side by default */
  .tree-nav {
    height: 100%;
    left: 0;
    overflow-y: auto;
    padding: 3rem 1.5rem;
    position: fixed;
    top: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: transform .2s ease, -webkit-transform .2s ease;
    -webkit-transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
    transition: -webkit-transform .2s ease;
    z-index: 400;
  }

  /* Open the menu from the side */
  /* Use a link and add the id of this element as the url */
  .tree-nav:target {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: transform .2s ease, -webkit-transform .2s ease;
    -webkit-transition: -webkit-transform .2s ease;
    transition: -webkit-transform .2s ease;
    transition: transform .2s ease;
  }

  /* Create the area to click to close the menu */
  .tree-nav .tree-nav-close {
    background: rgba(0, 0, 0, .15);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 300;
  }

  /* Show the darkened area when the tree nav menu is clicked */
  .tree-nav:target + .tree-nav-close {
    display: block;
    background: rgba(0, 0, 0, .15);
    height: 100%;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 300;
  }

  /* Reset max-width in mobile */
  .tree-nav + .tree-nav-body {
    max-width: inherit;
  }

  /* Header bar for mobile websites with the tree-nav */
  .tree-nav-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(248, 249, 250, .8);
    height: 3.5rem;
    padding: .75rem .5rem;
    text-align: center;
    z-index: 300;
  }
}
/* MEDIA CSS */
/* Handles images, videos, figures, etc */

/* Altered, originally just video in 0.4.6 */
video.video-fullscreen {
  position: absolute;
  height: 100vh;
  object-fit: cover;
  width: 100%;
  z-index: -1;
}

/* Add to parent container to make media child fill container */
.media-stretch {
    display: block;
    padding: 0;
    overflow: hidden;
    width: 100%;
    position: relative;
}

/* Add pseudoclass to allow media to have height (default height is 0) */
.media-stretch::before {
    content: "";
    display: block;
    padding-bottom: 56.25%; /* 9 / 16  for 16:9 ratio */
}

/* Force media embed to fill parent container */
.media-stretch iframe,
.media-stretch embed,
.media-stretch object {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%; /* Make sure media does exceed or go under boundary limit */
    height: 100%;
}

/* For HTML5 video objects */
.media-stretch video {
    height: auto;
    max-width: 100%;
    width: 100%;
}

/* Alternate media ratios */
.media-stretch.rat-4-3::before {
    padding-bottom: 75%;
}

.media-stretch.rat-1-1::before {
    padding-bottom: 100%;
}

/* FIGURES */
/* For flexible media display */
.fig {
    margin: 0 0 0.5rem 0; /* Small margin at the bottom */
}

.fig .fig-caption {
    margin-top: 1rem;
}

/* IMAGES */
.img-stretch {
    max-width: 100%;
    height: auto;
    display: block;
}

.img-cover {
    object-fit: cover;
}

.img-contain {
    object-fit: contain;
}

/* Avatar */
.avatar {
    border-radius: 50%;
    position: relative;
    display: block;
    margin: auto;
    font-size: 1rem;
    font-weight: lighter;
    width: 3.2rem;
    height: 3.2rem;
    background-color: #f03d4d;
    overflow: hidden;
}

/* Draw text on image just like in Gmail */
.avatar:before {
    content: attr(data-text);
    color: #fff;
    /* Removed z-index: 1, makes text blurry */
    left: 50%;
    top: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

.avatar.img-xsmall {
    font-size: .8rem;
    width: 1.6rem;
    height: 1.6rem;
}

.avatar.img-small {
    font-size: 1rem;
    height: 2.4rem;
    width: 2.4rem;
}

.avatar.img-large {
    font-size: 2rem;
    height: 4.8rem;
    width: 4.8rem;
}

.avatar.img-xlarge {
    font-size: 2.6rem;
    height: 6.4rem;
    width: 6.4rem;
}

.avatar img.padded {
    padding: .5rem;
    width: 100%;
}

/* The base of the modal dialog, which is an overlay of the webpage */
.modal {
    position: fixed; /* Scrolls with the user */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0; /* Initially hidden */
    padding: 1rem;
    display: none; /* Doesn't block the elements underneath */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; /* Vertical centering */
    pointer-events: none; /* Prevent any pointer events made to modal while hidden */
}

/* When the modal dialog is visible */
.modal:target, .modal.shown {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
    z-index: 999;
    pointer-events: auto; /* Re-enable pointer events */
}

/* The div in the modal dialpog used to create the translucent background */
.modal:target .modal-overlay,
.modal.shown .modal-overlay {
    position: absolute; /* Absolute inside of the modal container */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    background: rgba(54, 59, 68, 0.5);
}

/* The modal dialog body with the text itself */
.modal-content {
    background: #fff;
    padding: 0;
    display: block;
    border-radius: 3px;
    box-shadow: 0 .4rem 1rem rgba(54, 59, 68, .3);
    z-index: 1;
    color: #374054;
    max-width: 40rem; /* 640px */
}

/* Different size modals */
.modal.modal-small .modal-content {
    max-width: 20rem; /* 320px */
}

.modal.modal-large .modal-content {
    max-width: 60rem; /* 960px */
}

.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5,
.modal-content h6 {
    color: #374054;
}

.modal:target .modal-container,
.modal.shown .modal-container {
  -webkit-animation: slide-down .2s ease 1;
  animation: slide-down .2s ease 1;
  z-index: 1;
}

/* Restrict width  */
.modal-content.small {
    max-width: 32rem;
}

.modal-content .modal-header {
    padding: 1rem 3rem;
}

.modal-content .modal-header .modal-title {
    font-weight: bolder;
    font-size: 1.2rem;
}

.modal-content .modal-body {
    padding: 1rem 3rem;
    overflow-y: auto;
    max-height: 50vh; /* Max height is 50% of viewport height which prevents dialog from extetnding past screen */
    position: relative;
}

.modal-content .modal-footer {
    padding: 1rem 3rem;
}

/* MODAL ANIMATIONS */
.modal.modal-animated--dropdown {
    -webkit-animation: slide-down .2s ease 1;
    animation: slide-down .2s ease 1;
}

/* Visible state */
.modal.modal-animated--zoom-in, .modal.modal-animated--zoom-out {
    display: -webkit-box; /* Force dialog to appear in the center */
    display: -ms-flexbox;
    display: flex;
    opacity: 0;
    transition: 300ms all ease;
}
.modal:target.modal-animated--zoom-in, .modal:target.modal-animated--zoom-out {
    opacity: 1;
    transition: 300ms all ease;
}
.modal.modal-animated--zoom-in .modal-content {
    transform: scale(0.8);
    transition: 300ms all ease;
}
.modal:target.modal-animated--zoom-in .modal-content, .modal:target.modal-animated--zoom-out .modal-content {
    transform: scale(1);
    transition: 300ms all ease;
}

.modal.modal-animated--zoom-out .modal-content {
    transform: scale(1.2);
    transition: 300ms all ease;
}

/* Keyframes for slide down animation */
@-webkit-keyframes slide-down{
    0%{
        opacity:0;
        -webkit-transform:translateY(-3rem);
        transform:translateY(-3rem)
    }
    100%{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
@keyframes slide-down{
    0%{
        opacity:0;
        -webkit-transform:translateY(-3rem);
        transform:translateY(-3rem)
    }
    100%{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}
/* PLACEHOLDER */
/* Designed to be embedded in any parent container as placeholder when content is absent. */

.placeholder {
    background: rgba(231, 234, 241, 0.5);
    border-radius: 3px;
    text-align: center;
    padding: 3rem 2rem;
    color: #6c7892; /* Lighter than original text color */
    display: block;
}

/* Not sure if needed */
.placeholder-icon {
    text-align: center;
}

.placeholder .placeholder-title,
.placeholder .placeholder-subtitle {
    margin: 1rem auto;
}

.placeholder .placeholder-subtitle {
    opacity: 0.7;
    margin: 0 !important;
}

/* Place buttons here for the placeholder */
.placeholder .placeholder-commands {
    margin-top: 1rem;
}
/* TABLE */
table {
  margin: 0 auto;
  border-spacing: 5px;
  margin-top: 30px;
  background: #FFF;
  color: #666;
  line-height: 1.2em;
  border-radius: 10px;            /* CSS3‘�ˆÄ */
  -webkit-border-radius: 10px;    /* Safari,Google Chrome—p */
  -moz-border-radius: 10px;       /* Firefox—p */
}

.tbl-r02 th {
  padding: 8px 10px;
  font-weight: normal;
  color: #F00;
  border-right: #CCC;
}

.tbl-r02 td {
  padding: 8px 10px;
  background: #eee;
}

.tbl-r02 td:last-child {
  background: #FFF;
}
 
@media screen and (max-width: 768px) {
  .tbl-r02 {
    width: 100%;
  }
  .tbl-r02 th,
  .tbl-r02 td {
    display: block;
    width: 100%;
  }
}


/* TABS AND TAB CONTAINER */
.tab-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden;
    overflow-x: auto; /* Allow scrollbar to be visible if the width of the tabs exeeds container */
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowarp;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    font-size: 0.85rem;
}

/* Tabs are embedded inside an unordered list */
.tab-container ul {
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; /* Move tab items to left side  */
    display: -webkit-box; /* Flow the elements */
    margin: 0.5rem; /* Override the behavior for standard ul and add equal padding */
    border-bottom: 1px solid #eee; /* Bottom border of tabs */
    list-style: none;
}

.tab-container li {
    display: block; /* Keep the tabs from extending too far */
    cursor: pointer;
    margin: 0;
    -webkit-flex: 1 0 0;
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    text-align: center;
}

.tab-container li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-bottom: 1px solid #eee;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding: 0.5rem 1rem;
    -webkit-transition: all .3s;
    transition: all .3s;
    color: #374054;
    display: block;
    border-bottom-color: rgba(197, 197, 197, 0.63);
    border-width: 2px;
    margin-bottom: -1px; /* Get rid of any remaining border lines */
    background: #fff;
}

.tab-container li:hover a {
    border-bottom-color: rgba(240, 61, 77, 0.6);
    -webkit-transition: all .3s;
    transition: all .3s;
}

.tab-container li.selected a {
    border-bottom-color: #f03d4d;
    color: #f03d4d;
    border-width: 2px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

/* Shift tabs to the center */
.tab-container.tabs-center ul {
    justify-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
}

/* Shift tabs to the right */
.tab-container.tabs-right ul {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

/* Depth tab styles */
.tab-container.tabs-depth ul {
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1);
    border-bottom: 0;
}

/* Classic tab styles */
.tab-container.tabs-classic ul {
    border-bottom-color: #dbdbdb;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-radius: 3px 3px 0 0; /* Only round the top left and right corners */
    -webkit-transition: all .3s;
    transition: all .3s;
}

.tab-container.tabs-classic li:not(.selected) a:hover {
    background: rgb(240, 240, 240);
    -webkit-transition: all .3s;
    transition: all .3s;
}

.tab-container.tabs-classic li a {
    border: 1px solid transparent;
    border-bottom-color: #dbdbdb;
    border-radius: 3px 3px 0 0;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.tab-container.tabs-classic li.selected a {
    color: #f03d4d;
    border-color: #dbdbdb;
    border-bottom-color: transparent !important;
}

/* Tabs that fill the width */
.tab-container.tabs-fill li {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-negative: 0;
        flex-shrink: 0; /* Disable shrinking to original width */
}

/* Override the -webkit-box display that sizes tab items based on text */
.tab-container.tabs-fill ul {
    display: flex; /* Equal size tabs */
}

/* Different tab sizes */
.tab-container.tabs-xsmall {
    font-size: 0.6rem;
}

.tab-container.tabs-small {
    font-size: 0.75rem;
}

.tab-container.tabs-large {
    font-size: 1.25rem;
}

.tab-container.tabs-xlarge {
    font-size: 1.5rem;
}

/* Font Awesome Integration */
.tab-container .icon:first-child { /* Left icon */
    margin-right: .75rem;
}

.tab-container .icon:last-child { /* Right icon */
    margin-left: .75rem;
}

/* IN PROGERSS */
.toast {
    display: block;
    width: 100%;
    padding: 1rem;
    background: rgba(49, 59, 80, 0.9);
    border: 1px solid #313b50;
    border-radius: 2px;
    color: #fff;
    position: relative;
    margin: 0.5rem;
}

.toast p {
    margin: 0;
}

.toast.translucent {
    opacity: .5;
}

.toast.translucent:hover {
    opacity: 1;
}

.toast .btn-close {
    position: absolute;
    right: 1rem;
    top: 1rem;
}       

/* TOAST TYPES */
.toast.primary {
    background: rgba(240, 61, 77, 0.9);
    border-color: #f03d4d;
}

.toast.success {
    background: rgba(64, 179, 84, 0.9);
    border-color: #40b354;
}

.toast.warning {
    background: rgba(255, 204, 0, 0.9);
    border-color: #ffcc00;
}

.toast.error {
    background: rgba(255, 59, 48, 0.9);
    border-color: #ff3b30;
}

/* Add the rest later */

.toast a {
    color: #fff;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.toast a:hover {
    opacity: .8;
    transition: all .3s;
}


/* TOOLTIPS */
.tooltip {
  position: relative; /* let's the pseudoelement that we are displaying relative to the button. */
  overflow: visible; /* Allows the pseudoelement to be shown */
  white-space: nowrap; /* Keeps the button text from wrapping and getting too large */
}

/* This is the psuedoelement that creates the tooltip */
.tooltip:after, .tooltip.tooltip-top:after {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  color: #fff;
  font-size: .6rem;
  background: rgba(69, 77, 93, .9);
  content: attr(data-tooltip); /* Retrieves the data specified in this element property and displays it as text */
  display: block;
  line-height: 1rem;
  text-transform: none;
  overflow: hidden;
  padding: .4rem .8rem;
  opacity: 0; /* Hide the element */
  text-overflow: ellipsis;
  max-width: 15rem;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  transition: all .2s ease;
      -webkit-transition: all .2s ease;
      -moz-transition: all .2s ease;
      -ms-transition: all .2s ease;
      -o-transition: all .2s ease;
  z-index: 200;
  pointer-events: none;
  bottom: 100%; /* Pushes the tooltip above the button */
  left: 50%; /* Horizontally center it */
  border-radius: .2rem;
}

/* Handles the on hover event of the button and then modifies the associated tooltip accordingly. */
.tooltip:focus::after, .tooltip:hover::after {
      opacity: 1;
      -webkit-transform: translate(-50%, -.5rem);
      transform: translate(-50%, -.5rem);
      transition: all .2s ease;
      -webkit-transition: all .2s ease;
      -moz-transition: all .2s ease;
      -ms-transition: all .2s ease;
      -o-transition: all .2s ease;
}

/* Tooltip top left */
.tooltip.tooltip-top-left:after {
  -webkit-transform: translate(-65%, 0);
  transform: translate(-65%, 0);
}

.tooltip.tooltip-top-left:hover::after,
.tooltip.tooltip-top-left:focus::after {
  -webkit-transform: translate(-125%, -.5rem);
  transform: translate(-125%, -.5rem);
}

/* Tooltip top right */
.tooltip.tooltip-top-right:after {
  -webkit-transform: translate(15%, 0);
  transform: translate(15%, 0);
}

.tooltip.tooltip-top-right:hover::after,
.tooltip.tooltip-top-right:focus::after{
  -webkit-transform: translate(25%, -.5rem);
  transform: translate(25%, -.5rem);
}

/* Tooltip bottom */
.tooltip.tooltip-bottom::after {
  top: 100%;
  transform: translate(-50%, -1rem); /* Moves tooltip to the center horizontally and shifts tooltip down */
  -webkit-transform: translate(-50%, -1rem);
  -moz-transform: translate(-50%, -1rem);
  -ms-transform: translate(-50%, -1rem);
  -o-transform: translate(-50%, -1rem);
  bottom: auto;
}

.tooltip.tooltip-bottom:hover::after,
.tooltip.tooltip-bottom:focus::after {
  transform: translate(-50%, .5rem);
  -webkit-transform: translate(-50%, .5rem);
  -moz-transform: translate(-50%, .5rem);
  -ms-transform: translate(-50%, .5rem);
  -o-transform: translate(-50%, .5rem);
}

/* Tooltip bottom left */
.tooltip.tooltip-bottom-left:after, {
  top: 100%;
  -webkit-transform: translate(-65%, -1rem);
  transform: translate(-65%, -1rem);
  bottom: auto;
}

.tooltip.tooltip-bottom-left:hover::after,
.tooltip.tooltip-bottom-left:focus::after {
  -webkit-transform: translate(-125%, .5rem);
  transform: translate(-125%, .5rem);
}

/* Tooltip bottom right */
.tooltip.tooltip-bottom-right:after {
  top: 100%;
  -webkit-transform: translate(0%, -1rem);
  transform: translate(0%, -1rem);
  bottom: auto;
}

.tooltip.tooltip-bottom-right:hover::after,
.tooltip.tooltip-bottom-right:focus::after {
  -webkit-transform: translate(10%, .5rem);
  transform: translate(10%, .5rem);
}

/* Tooltip right */
.tooltip.tooltip-right::after {
  left: 100%;
  bottom: 50%;
  transform: translate(-1rem, 50%);
  -webkit-transform: translate(-1rem, 50%);
  -moz-transform: translate(-1rem, 50%);
  -ms-transform: translate(-1rem, 50%);
  -o-transform: translate(-1rem, 50%);
}

.tooltip.tooltip-right:hover::after,
.tooltip.tooltip-right:focus::after {
  transform: translate(.5rem, 50%);
  -webkit-transform: translate(.5rem, 50%);
  -moz-transform: translate(.5rem, 50%);
  -ms-transform: translate(.5rem, 50%);
  -o-transform: translate(.5rem, 50%);
}

/* Tooltip Left */
.tooltip.tooltip-left::after {
  right: 100%;
  bottom: 50%;
  left: auto; /* Needed to work */
  transform: translate(1rem, 50%);
  -webkit-transform: translate(1rem, 50%);
  -moz-transform: translate(1rem, 50%);
  -ms-transform: translate(1rem, 50%);
  -o-transform: translate(1rem, 50%);
}

.tooltip.tooltip-left:hover::after,
.tooltip.tooltip-left:focus::after {
  transform: translate(-.5rem, 50%);
  -webkit-transform: translate(-.5rem, 50%);
  -moz-transform: translate(-.5rem, 50%);
  -ms-transform: translate(-.5rem, 50%);
  -o-transform: translate(-.5rem, 50%);
}

/* UTILS */
/* Utility classes to help solve some very annoying issues */

.this-inline {
  display: inline;
}

.this-inline-block {
  display: inline-block;
}

.this-inline-flex {
  display: -webkit-inline-bpx;
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;
}

.this-block {
  display: block;
}

/*
   When using floats, clearfix allows the container to automatically resize so that
   other elements are not blocked by children.
*/

.clearfix:after {
  clear: both;
  content: " ";
  display: table;
}

/* This is mainly to keep elements from overlapping when using floats */
.clear-left {
  clear: left;
}

.clear-right {
  clear: right;
}

.clear-both {
  clear: both;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

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

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-mt{
	margin-top: 50px;
}



/* Center element - best used for hero bodies or text */
.center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
      margin: 0 auto;
  flex-wrap: wrap;
}

.center-alt, .center-alt:hover, .center-alt:active { /* If flexbox method fails, this works for elements with unknown dimensions */
  position: absolute;
 top: 50%;
 left: 50%;
 -webkit-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
}

.vertical-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
          align-items: center;
  vertical-align: middle;
}

.horizontal-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.this-overlay {
  bottom:0;
  left: 0;
  right: 0;
  top: 0;
  position: absolute;
}

.hide-overflow {
  overflow: hidden !important;
  overflow-x: hidden;
  overflow-y: hidden;
}

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

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.hide {
  display: none !important;
}

.disabled {
  cursor: not-allowed;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.box {
  background-color: white;
  border-radius: 3px;
  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 2px rgba(10, 10, 10, 0.1);
  display: block;
  padding: 1rem;
}

.box:not(:last-child) {
  margin-bottom: 1rem;
}

.fill-width {
  width: 100%
}

.no-margin {
  margin: 0 !important;
}

.no-padding {
  padding: 0 !important;
}

/* Round the corners of the element */
.round {
  border-radius: .1rem;
}

/* Turns element into a circle */
.circle {
  border-radius: 50%;
}

/* Responsiveness and Element Hiding */

/* Do the actual balancing only on larger screens */
@media screen and (min-width: 769px) {
.level, .level-left, .level-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

/* Hide elements based on screen size */
@media screen and (max-width: 450px) {
  .hide-mobile {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  /* Hide on devices that are tablets or smaller */
  .hide-tablet {
    display: none !important;
  }
}

@media screen and (min-width: 451px) and (max-width: 768px) {
  .hide-tablet-only {
    display: none !important;
  }
}

@media screen and (min-width: 769px) {
  /* Hide element on laptops, desktops, etc */
  .hide-desktop {
    display: none !important;
  }
}

.pl10{
	padding-left: 10px!important;
}

.pt10{
	padding-top: 10px!important;
}

.pt20{
	padding-top: 20px !important;
}

.pt30{
	padding-top: 30px!important;
}

.pt50{
	padding-top: 50px!important;
}

.pb10{
	padding-bottom: 10px!important;
}

.pb20{
	padding-bottom: 20px!important;
}

.ml10{
	margin-left: 10px!important;
}

.mt10{
	margin-top: 10px!important;
}

.mt20{
	margin-top: 20px !important;
}

.mt30{
	margin-top: 30px!important;
}

.mt50{
	margin-top: 50px!important;
}
.mb10{
	margin-bottom: 10px!important;
}

.mb20{
	margin-bottom: 20px!important;
}

.br-mb{
	display: none;
}

.pc-display{
	display: none;
}

.mb-display{
	display: block;	
}

.photo-border{
	border-radius: 10px; 
}


@media screen and (min-width: 769px) {
.br-mb{
	display: block;
}

.pc-display{
	display: block;
}

.mb-display{
	display: none;
}
}