/* ======================================================================================
   @UTILS -> SASS VARIABLES
   ====================================================================================== */
/* [GLOBAL BOOLEANS]
-------------------------------------------------------*/
/* For targetting old IE (IE < 9) */
/* Media query support for old IE (IE < 9) */
/* Debug mode */
/* [BASE TYPOGRAPHY]
-------------------------------------------------------*/
/* Size */
/* Line height */
/* Line height ratio */
/* Family */
/* [MORE TYPOGRAPHY]
-------------------------------------------------------*/
/* --Sizes-- */
/* Small */
/* Extra small */
/* Large */
/* Extra large */
/* Headings */
/* Families */
/* [SPACING]
-------------------------------------------------------*/
/* Base */
/* Half */
/* Third */
/* Quarter */
/* Sixth */
/* Micro */
/* Double */
/*2.5*/
/* Triple */
/* [BREAKPOINTS]
-------------------------------------------------------*/
/*
	Note: 
		-	Not ideal to set fixed breakpoints like this rather better let the design dictate breakpoints however they're usually common breakpoints in every build esp. 'Palm', and they need to be used to define the flexible width classes at specific breakpoints for the grid system (see: 'utils/widths').
		-	The breakdown for the breakpoints uses this chart as a guide: http://static.lukew.com/unified_device_design.png.
			-	Here's the thinking:
				-	Palm: smartphones and featurephones i.e. anything that can fit into the palm of a hand.
				-	Lap: typically tablets, notebooks and laptops i.e. anything that is portable that doesn't include phones.
					-	Lap small: smaller tablets/notebooks and e-readers e.g. Kindle.
					-	Lap large: larger tablets and laptops.
				-	Desk: desktop computers, TV's, etc. i.e. anything that is not portable.
					-	Desk small: smaller desktop computer monitors.
					-	Desk large:	larger desktop computer monitors, TV's, and who knows what else?
			-	Breakpoints:
				-	Palm: 	0 - 640px
				-	Lap:	641px - 1199px
					-	Lap small:	641px - 900px
					-	Lap large:	901px - 1199px
				-	Desk:	1200px +
					-	Desk small:	1200px - 1365px
					-	Desk large:	1366px +
				**	Of course the values for these breakpoints can change per build, it just boils down to the type of design, however 'Palm' would typically always use the same breakpoint as human beings palm's aren't exactly growing :) 
	
	Credit: 
		-	http://www.lukew.com/ff/entry.asp?1679
		-	https://developers.google.com/webmasters/smartphone-sites/details?hl=en
*/
/* --Start and end points-- */
/*
	Note: these vars typically won't appear outside of this partial, they're used as a way to set-up all the breakpoints easily, when declaring breakpoints in media queries througout the build most of the time the 'Readable breakpoints' are used, one exception is when media query min/max ranges are used which 'out of the box' is only for defining the flexible width classes at specific breakpoints for the grid system (see: 'utils/widths').
		
*/
/* Start points */
/* End points */
/* --Readable breakpoints-- */
/* Palm */
/* Non-palm */
/* Lap */
/* Desk */
/* --Arbitrary breakpoints-- */
/* [GRID / LAYOUT]
-------------------------------------------------------*/
/* Page container max width - don't forget to update in 'old-ie.scss' */
/* --grid- */
/* Gutter */
/*
	Note: be sure to set the vars below to 'false' if they're not needed as they generate a lot of CSS.
*/
/* Push */
/* Pull */
/* [COLOR PALETTE]
-------------------------------------------------------*/
/*$light-grey: rgba(9, 30, 66, 0.04);*/
/* Brand color */
/*light Green*/
/*Blue green*/
/* --Brand color variations: http://www.colorhexa.com/1983c0-- */
/* Base text color */
/* Link colors */
/* --Greyscale-- */
/* Light */
/* Lighter */
/* Lightest */
/* Off white */
/* Grey fill */
/* Dark */
/* Darker */
/* --feedback- */
/* Error */
/* Success */
/* Warning */
/* Info */
/* --Misc-- */
/* Attention (red) */
/* [FLEXIBLE WIDTHS]
-------------------------------------------------------*/
/* Whole */
/* Halves */
/* Thirds */
/* Quarters */
/* Fifths */
/* Sixths */
/* Eighths */
/* Tenths */
/* Twelfths */
/* [MISC]
-------------------------------------------------------*/
/* Off-screen px value */
/* `z-index` max value */
/* Border radius */
/* line 14, ../../sass/activities/audio-timepoint.scss */
.show-hide {
  margin: calc(2em + 2vw) auto calc(2em + 2vw) auto !important;
}

/* line 32, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 90%;
  max-width: 600px;
  border-radius: 40px;
  background-color: #F0F5F7;
  padding: 1.2em 1.8em;
}
/* line 42, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls__brief {
  font-size: 1.2em;
  width: 90%;
  margin: 0 auto;
  padding: 2em 0;
}
/* line 48, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls__brief ul {
  list-style-type: disc;
}
/* line 51, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls__brief ul ul {
  list-style-type: circle;
}
/* line 58, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls__brief p:first-child {
  font-weight: 500;
  font-size: 1.3em;
}
/* line 65, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls__instructions {
  font-size: 1.2em;
  margin-bottom: 2em;
  width: 90%;
}
/* line 73, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls__instructions p:first-child {
  font-weight: 500;
  font-size: 1.3em;
}
/* line 80, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls > .icon {
  color: #5A6167;
  cursor: pointer;
}
/* line 84, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls > .icon:before {
  font-size: 1.4em;
}
/* line 89, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls > .time-lapsed, .c-audio-timepoint .audio-controls .time-remaining {
  margin: 0 !important;
  color: #5A6167;
}
/* line 94, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls .input-slider, .c-audio-timepoint .audio-controls > .audio-slider input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 5px;
  background-color: #fff;
  outline: none;
  padding: 0;
  margin: 0 !important;
  z-index: 1;
  position: relative;
  border: none;
}
/* line 109, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls > .audio-slider {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 55%;
  position: relative;
  top: 0;
  padding: 0;
  border: none;
  background-color: transparent;
}
/* line 120, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls > .audio-slider .slider-thumb, .c-audio-timepoint .audio-controls > .audio-slider input[type=range]::-webkit-slider-thumb {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  background-color: #7AD1ED;
  box-shadow: 0 0.2em 2rem rgba(0, 0, 0, 0.2);
}
/* line 133, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls > .audio-slider input[type=range]::-moz-range-track {
  background: rgba(9, 30, 66, 0.04);
  border: none;
}
/* line 138, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls > .audio-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  z-index: 9;
}
/* line 144, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls > .audio-slider input[type=range]:-moz-focusring {
  outline: 1px solid white;
  outline-offset: -1px;
}
/* line 149, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls > .audio-slider input[type=range]::-moz-range-thumb {
  background-color: #7AD1ED;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
}
/* line 157, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls > .audio-slider input[type="range"]::-ms-thumb {
  background-color: #7AD1ED;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  cursor: pointer;
}
/* line 167, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .controls-volume {
  position: absolute;
  top: -2.5em;
  right: 0;
  padding: 0.3em 0.2em;
  max-width: 250px;
  visibility: hidden;
}
/* line 175, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .controls-volume > .icon {
  margin: 0 .8em;
}
/* line 178, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .controls-volume > .icon:before {
  margin-right: 0;
}
/* line 185, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .controls-volume > .audio-slider .slider-thumb, .c-audio-timepoint .controls-volume > .audio-slider input[type=range]::-webkit-slider-thumb {
  width: .8rem;
  height: .8rem;
  background-color: #5A6167;
}
/* line 191, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .controls-volume > .audio-slider input[type=range] {
  height: 5px;
}
/* line 199, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .controls-volume > .audio-slider input[type=range]::-moz-range-thumb,
.c-audio-timepoint .controls-volume > .audio-slider input[type="range"]::-ms-thumb {
  background-color: #5A6167;
  width: .8rem;
  height: .8rem;
}
/* line 209, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .showVolume {
  visibility: visible;
}
@media (min-width: 700px) {
  /* line 216, ../../sass/activities/audio-timepoint.scss */
  .c-audio-timepoint .audio-controls > .audio-slider {
    width: 68%;
  }
}

/* line 237, ../../sass/activities/audio-timepoint.scss */
body {
  margin: 0;
}

/* line 241, ../../sass/activities/audio-timepoint.scss */
.video {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  font-family: Roboto;
}
/* line 247, ../../sass/activities/audio-timepoint.scss */
.video__container {
  position: relative;
}
/* line 251, ../../sass/activities/audio-timepoint.scss */
.video__container video {
  width: 100%;
  border-radius: .7em;
  cursor: pointer;
}
/* line 258, ../../sass/activities/audio-timepoint.scss */
.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: #fff;
  opacity: 0.7;
  transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
/* line 268, ../../sass/activities/audio-timepoint.scss */
.video__play--hover {
  opacity: 1 !important;
}
/* line 272, ../../sass/activities/audio-timepoint.scss */
.video__play--removed {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(1.5);
}
/* line 278, ../../sass/activities/audio-timepoint.scss */
.video__panel {
  display: flex;
  align-items: center;
  padding: 2% 0;
}
/* line 285, ../../sass/activities/audio-timepoint.scss */
.video__progress {
  flex: 1;
  margin: 0 10px;
  border-radius: 4em;
  height: .5em;
  background-color: #F0F3F6;
  position: relative;
  overflow: hidden;
}
/* line 294, ../../sass/activities/audio-timepoint.scss */
.video__progress--inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #AED432;
  border-radius: 4em;
}
/* line 304, ../../sass/activities/audio-timepoint.scss */
.video__current, .video__duration {
  flex-basis: 10%;
  box-sizing: border-box;
}
/* line 309, ../../sass/activities/audio-timepoint.scss */
.video__duration {
  text-align: right;
}

@media (max-width: 400px) {
  /* line 315, ../../sass/activities/audio-timepoint.scss */
  .video {
    font-size: 12px;
  }
}
@media (max-width: 600px) {
  /* line 322, ../../sass/activities/audio-timepoint.scss */
  .video {
    width: 100%;
  }
  /* line 325, ../../sass/activities/audio-timepoint.scss */
  .video video {
    border-radius: 0;
  }
  /* line 329, ../../sass/activities/audio-timepoint.scss */
  .video__panel {
    padding-left: 1em;
    padding-right: 1em;
  }
}
/* line 337, ../../sass/activities/audio-timepoint.scss */
.register-click {
  align-self: center;
  width: 15vw;
  height: 15vw;
  background-color: #CD4995;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  min-height: 80px;
  min-width: 80px;
  max-width: 120px;
  max-height: 120px;
  transition: 300ms ease-out;
  /* transform: scale(0.5) */
}
/* line 351, ../../sass/activities/audio-timepoint.scss */
.register-click:hover {
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
}

/* line 366, ../../sass/activities/audio-timepoint.scss */
.video-timepoint-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  /*&:before {
      content: 'Activity';
      position: absolute;
      top: -1em;
      left: 4.5em;
      padding: .6em 2.2em;
      background-color: #AED432;
      border-radius: 4em;
      font-weight: 500;
      font-size: 1.2em;
  }*/
}

/* line 387, ../../sass/activities/audio-timepoint.scss */
.ClickCapture, .audio-timepoint-container > .register-click, .video-timepoint-container .register-click {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 15vw;
  height: 15vw;
  background-color: #CD4995;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  min-height: 80px;
  min-width: 80px;
  max-width: 120px;
  max-height: 120px;
  transition: 300ms ease-out;
  /* transform: scale(0.5) */
}
/* line 403, ../../sass/activities/audio-timepoint.scss */
.ClickCapture:hover, .audio-timepoint-container > .register-click:hover, .video-timepoint-container .register-click:hover {
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
}
/* line 408, ../../sass/activities/audio-timepoint.scss */
.ClickCapture > .icon:before, .audio-timepoint-container > .register-click > .icon:before, .video-timepoint-container .register-click > .icon:before {
  font-size: 5em;
  top: 4px;
  color: #fff;
}

/* line 422, ../../sass/activities/audio-timepoint.scss */
.audio-timepoint-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2vw;
  font-family: Calibri, Arial, Helvetica, sans-serif, Roboto;
}
/* line 429, ../../sass/activities/audio-timepoint.scss */
.audio-timepoint-container > .audio-controls {
  background-color: #DCE0E4;
}
/* line 432, ../../sass/activities/audio-timepoint.scss */
.audio-timepoint-container > .audio-controls .time-lapsed, .audio-timepoint-container > .audio-controls .time-remaining {
  font-size: 1.2em;
}
/* line 437, ../../sass/activities/audio-timepoint.scss */
.audio-timepoint-container > .register-click {
  margin: 2em 0;
  position: relative;
}
/* line 442, ../../sass/activities/audio-timepoint.scss */
.audio-timepoint-container > .register-click .ripple-effect {
  position: absolute;
  background-color: #8d2762;
  border-radius: 50%;
  opacity: 0.8;
  padding: 0em;
}

/* line 452, ../../sass/activities/audio-timepoint.scss */
.ripple-animation {
  animation: pulse 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) alternate;
}

@keyframes pulse {
  0% {
    padding: 0em;
    opacity: 0.8;
  }
  70% {
    opacity: 0.4;
  }
  100% {
    padding: 4em;
    opacity: 0;
  }
}
/* line 480, ../../sass/activities/audio-timepoint.scss */
.video-timepoint-container .video-timepoint-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  fill: #fff;
  font-size: .875rem;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 700;
  width: 100%;
  height: 100%;
  transition: 300ms ease-out;
}
/* line 502, ../../sass/activities/audio-timepoint.scss */
.video-timepoint-container .logClickButton {
  background-color: #CD4995;
}
/* line 506, ../../sass/activities/audio-timepoint.scss */
.video-timepoint-container .register-click {
  align-self: center;
  width: 15vw;
  height: 15vw;
  background-color: #CD4995;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  min-height: 80px;
  min-width: 80px;
  max-width: 120px;
  max-height: 120px;
  transition: 300ms ease-out;
  /* transform: scale(0.5) */
}
/* line 520, ../../sass/activities/audio-timepoint.scss */
.video-timepoint-container .register-click:hover {
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
}
/* line 525, ../../sass/activities/audio-timepoint.scss */
.video-timepoint-container .progress-buttons {
  align-self: flex-end;
  padding: 0 4em;
  background-color: #3f46ad;
  color: #fff;
  fill: #fff;
  font-size: .875rem;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 700;
  padding: 19px 40px 20px;
  /*box-shadow: 0 0 2rem rgba(0,0,0,.3);*/
  margin: 0.5em;
}
/* line 540, ../../sass/activities/audio-timepoint.scss */
.video-timepoint-container .progress-buttons a {
  color: #fff;
}

/* CURRENT CARDS-TIMEPOINT */
/* line 566, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  background-color: #FAFAFC;
  padding: 1em 0;
  /* can be removed */
  margin: 1em 0;
  /* can be removed */
}
/* line 574, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint {
  display: flex;
  /*flex-direction: column;*/
  align-items: center;
  box-sizing: border-box;
  flex-basis: 48%;
  background-color: #F0F5F7;
  border-radius: 8px;
  width: 50%;
  margin: 0.5em 0.2em;
  overflow: hidden;
}
/* line 586, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint .cards-timepoint-image {
  position: relative;
  width: 5vw;
  height: 5vw;
  max-width: 140px;
  max-height: 140px;
  min-width: 120px;
  min-height: 120px;
  background-color: #D6DEE3;
  border-radius: 50%;
  margin: 1em 0;
}
/* line 599, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint .cards-timepoint-time {
  display: flex;
  align-items: center;
  width: 70%;
  max-width: 150px;
  height: auto;
  margin: 0.5em 0;
  border-radius: 20px;
  background-color: #D6DEE3;
  overflow: hidden;
}
/* line 610, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint .cards-timepoint-time span {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  font-size: 1.3em;
  background-color: #5A6167;
  color: #ffffff;
  padding: 0.4em;
  border-radius: 50%;
}
/* line 621, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint .cards-timepoint-time span:before {
  top: 0px !important;
}
/* line 626, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint .cards-timepoint-time .timepoint-data-display {
  flex-basis: 50%;
  margin: 0 !important;
  padding: 0 !important;
}
/* line 633, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint p {
  padding: 0 1em;
  margin: 0 0 0.8em 0;
  text-align: center;
  line-height: 22px;
}
/* line 640, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint .cards-timepoint-result {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1.2em;
  background-color: #D6DEE3;
}
/* line 647, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint .cards-timepoint-result span {
  font-size: 56px;
  line-height: 0;
  color: #ffffff;
}
/* line 655, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint-correct .cards-timepoint-result {
  background-color: #B7CB34;
}
/* line 660, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint-correct .cards-timepoint-time span {
  background-color: #B7CB34;
}
/* line 667, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint-incorrect .cards-timepoint-result {
  background-color: #CD4995;
}
/* line 672, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint-incorrect .cards-timepoint-time span {
  background-color: #CD4995;
}

@media (min-width: 900px) {
  /* line 683, ../../sass/activities/audio-timepoint.scss */
  .cards-timepoint-container {
    flex-direction: column;
  }
  /* line 686, ../../sass/activities/audio-timepoint.scss */
  .cards-timepoint-container .cards-timepoint {
    /*flex-basis: 21%;
    max-width: 21%;*/
  }
}
@media (min-width: 1500px) {
  /* line 694, ../../sass/activities/audio-timepoint.scss */
  .cards-timepoint-container {
    flex-direction: column;
  }
  /* line 697, ../../sass/activities/audio-timepoint.scss */
  .cards-timepoint-container .cards-timepoint {
    /*flex-basis: 12%;
    max-width: 12%;*/
  }
}
/* line 704, ../../sass/activities/audio-timepoint.scss */
.strip-info {
  background-color: #DCE0E4;
  padding: 20px;
  margin-bottom: 0 !important;
  text-align: center;
  font-size: 1.1em;
}

/* END CURRENT CARDS-TIMEPOINT */