@font-face {
  font-family: 'Quicksand';
  src: url("/fonts/quicksand-regular-webfont.eot");
  src: url("/fonts/quicksand-regular-webfont.eot?#iefix") format("embedded-opentype"), url("/fonts/quicksand-regular-webfont.woff2") format("woff2"), url("/fonts/quicksand-regular-webfont.woff") format("woff"), url("/fonts/quicksand-regular-webfont.ttf") format("truetype"), url("/fonts/quicksand-regular-webfont.svg#quicksandregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* line 13, ../sass/base.scss */
.flash_card_container {
  background: #3a7ecd;
  background-image: url("/pictures/shattered.png");
  border-right: 5px solid #17547c;
  border-left: 4px solid rgba(255, 255, 255, 0.5);
  border-top: 4px solid rgba(255, 255, 255, 0.5);
  border-bottom: 5px solid #17547c;
  border-radius: 19px;
  width: 600px;
  height: 700px;
  margin: 0px auto;
  padding: 8px;
  box-sizing: border-box;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35) inset, 0 0 5px black;
  user-select: none;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
}
/* line 34, ../sass/base.scss */
.flash_card_container .flash_card_inner_container {
  position: relative;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-direction: column;
  justify-content: space-around;
  -webkit-justify-content: space-around;
  background: #e6f6ff;
  background-image: url("/pictures/shattered_light.png");
  border-radius: 12px;
  box-shadow: 0 0 7px black inset;
  border-left: 2px solid #17547c;
  border-right: 2px solid #4388b5;
  border-bottom: 2px solid #4388b5;
  border-top: 2px solid #17547c;
  height: 100%;
  overflow: hidden;
}
/* line 55, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .title_container {
  margin: auto;
  text-align: center;
  font-size: 32px;
  height: 32px;
  font-family: 'Quicksand';
  text-transform: uppercase;
  color: #064b6e;
  text-shadow: 1px 1px 7px #fff, -1px -1px 11px #fff, 0 0 17px #fff;
}
/* line 66, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .count_container {
  padding-top: 20px;
  margin: auto;
  text-align: center;
  font-size: 24px;
  font-family: 'Quicksand';
  color: #064b6e;
  text-shadow: 1px 1px 7px #fff, -1px -1px 11px #fff, 0 0 17px #fff;
}
/* line 76, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: space-around;
  -webkit-justify-content: space-around;
}
/* line 86, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .card_container {
  position: relative;
}
/* line 89, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .card_container .card {
  position: relative;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  -ms-perspective: 1000px;
  margin: auto;
  width: 320px;
  height: 400px;
  display: none;
  font-size: 25px;
  font-family: 'Quicksand';
}
/* line 104, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .card_container .card.apply_flip .content {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
}
/* line 111, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .card_container .card.apply_flip .content .card_front {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
  animation: stayvisible 0.5s both;
  -webkit-animation: stayvisible 0.5s both;
  -moz-animation: stayvisible 0.5s both;
  -o-animation: stayvisible 0.5s both;
  -ms-animation: donothing 0.5s;
  -ms-transition: visibility 0s linear 0.17s;
  visibility: hidden;
}
/* line 127, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .card_container .card.apply_flip .content .card_back {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
  animation: stayvisible 0.5s both;
  -webkit-animation: stayvisible 0.5s both;
  -moz-animation: stayvisible 0.5s both;
  -o-animation: stayvisible 0.5s both;
  -ms-animation: donothing 0.5s;
  -ms-transition: visibility 0s linear 0.17s;
  visibility: visible;
}
/* line 146, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .card_container .card .content {
  transition: 0.5s ease-out;
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
  -ms-transition: 0.5s ease-out;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  position: relative;
  width: 100%;
  height: 100%;
}
/* line 161, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .card_container .card .content .card_front, .flash_card_container .flash_card_inner_container .center_container .card_container .card .content .card_back {
  /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  -ms-backface-visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 296px;
  padding: 8px;
  cursor: pointer;
  background-color: #3a7ecd;
  background-image: url("/pictures/shattered.png");
  border-right: 5px solid #17547c;
  border-left: 4px solid rgba(255, 255, 255, 0.5);
  border-top: 4px solid rgba(255, 255, 255, 0.5);
  border-bottom: 5px solid #17547c;
  border-radius: 19px;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35) inset, 0 0 5px black;
}
/* line 185, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .card_container .card .content .card_front {
  /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
  animation: stayvisible 0.5s both;
  -webkit-animation: stayvisible 0.5s both;
  -moz-animation: stayvisible 0.5s both;
  -o-animation: stayvisible 0.5s both;
  -ms-animation: donothing 0.5s;
  -ms-transition: visibility 0s linear 0.17s;
  visibility: visible;
}
/* line 198, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .card_container .card .content .card_back {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
  animation: stayvisible 0.5s both;
  -webkit-animation: stayvisible 0.5s both;
  -moz-animation: stayvisible 0.5s both;
  -o-animation: stayvisible 0.5s both;
  -ms-animation: donothing 0.5s;
  -ms-transition: visibility 0s linear 0.17s;
  visibility: hidden;
}
/* line 215, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .card_container .card .content .front_content_background, .flash_card_container .flash_card_inner_container .center_container .card_container .card .content .back_content_background {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: white;
  height: 382px;
  border-radius: 12px;
  box-shadow: 0 0 7px black inset;
  border-left: 2px solid #17547c;
  border-right: 2px solid #4388b5;
  border-bottom: 2px solid #4388b5;
  border-top: 2px solid #17547c;
  padding: 0px 16px 16px 16px;
  overflow: auto;
}
/* line 233, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .card_container .card .content .front_content_background span, .flash_card_container .flash_card_inner_container .center_container .card_container .card .content .back_content_background span {
  margin: auto;
  text-align: center;
}
/* line 238, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .card_container .card .content .front_content_background img, .flash_card_container .flash_card_inner_container .center_container .card_container .card .content .back_content_background img {
  display: block;
  max-width: 150px;
  max-height: 150px;
  margin: 16px auto;
}
/* line 247, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .card_container .card:nth-child(1) {
  display: block;
}
/* line 252, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .prev_arrow, .flash_card_container .flash_card_inner_container .center_container .next_arrow {
  font-size: 82px;
  color: #17547c;
  cursor: pointer;
  text-shadow: 0 0 5px #fff;
  transition: color 0.2s linear;
  z-index: 2;
}
/* line 260, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .prev_arrow:hover, .flash_card_container .flash_card_inner_container .center_container .next_arrow:hover {
  color: #3d8ec3;
}
/* line 265, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .center_container .prev_arrow {
  z-index: 2;
}
/* line 270, ../sass/base.scss */
.flash_card_container .flash_card_inner_container .website_logo {
  position: absolute;
  bottom: 10px;
  right: 5px;
}

@keyframes stayvisible {
  from {
    visibility: visible;
  }
  to {
    visibility: visible;
  }
}
@-webkit-keyframes stayvisible {
  from {
    visibility: visible;
  }
  to {
    visibility: visible;
  }
}
@-moz-keyframes stayvisible {
  from {
    visibility: visible;
  }
  to {
    visibility: visible;
  }
}
@-o-keyframes stayvisible {
  from {
    visibility: visible;
  }
  to {
    visibility: visible;
  }
}
@-ms-keyframes donothing {}