/* ======================================================================================
   @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 30, ../../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 40, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls__brief {
  font-size: 1.2em;
  width: 90%;
  margin: 0 auto;
  padding: 2em 0;
}
/* line 46, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls__brief ul {
  list-style-type: disc;
}
/* line 49, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls__brief ul ul {
  list-style-type: circle;
}
/* line 56, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls__brief p:first-child {
  font-weight: 500;
  font-size: 1.3em;
}
/* line 63, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls__instructions {
  font-size: 1.2em;
  margin-bottom: 2em;
  width: 90%;
}
/* line 71, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls__instructions p:first-child {
  font-weight: 500;
  font-size: 1.3em;
}
/* line 78, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls > .icon {
  color: #5A6167;
  cursor: pointer;
}
/* line 82, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .audio-controls > .icon:before {
  font-size: 1.4em;
}
/* line 87, ../../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 92, ../../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 107, ../../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 118, ../../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 131, ../../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 136, ../../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 142, ../../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 147, ../../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 155, ../../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 165, ../../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 173, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .controls-volume > .icon {
  margin: 0 .8em;
}
/* line 176, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .controls-volume > .icon:before {
  margin-right: 0;
}
/* line 183, ../../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 189, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .controls-volume > .audio-slider input[type=range] {
  height: 5px;
}
/* line 197, ../../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 207, ../../sass/activities/audio-timepoint.scss */
.c-audio-timepoint .showVolume {
  visibility: visible;
}
@media (min-width: 700px) {
  /* line 214, ../../sass/activities/audio-timepoint.scss */
  .c-audio-timepoint .audio-controls > .audio-slider {
    width: 68%;
  }
}

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

/* line 239, ../../sass/activities/audio-timepoint.scss */
.video {
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
  font-family: Roboto;
}
/* line 245, ../../sass/activities/audio-timepoint.scss */
.video__container {
  position: relative;
}
/* line 249, ../../sass/activities/audio-timepoint.scss */
.video__container video {
  width: 100%;
  border-radius: .7em;
  cursor: pointer;
}
/* line 256, ../../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 266, ../../sass/activities/audio-timepoint.scss */
.video__play--hover {
  opacity: 1 !important;
}
/* line 270, ../../sass/activities/audio-timepoint.scss */
.video__play--removed {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(1.5);
}
/* line 276, ../../sass/activities/audio-timepoint.scss */
.video__panel {
  display: flex;
  align-items: center;
  padding: 2% 0;
}
/* line 283, ../../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 292, ../../sass/activities/audio-timepoint.scss */
.video__progress--inner {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #AED432;
  border-radius: 4em;
}
/* line 302, ../../sass/activities/audio-timepoint.scss */
.video__current, .video__duration {
  flex-basis: 10%;
  box-sizing: border-box;
}
/* line 307, ../../sass/activities/audio-timepoint.scss */
.video__duration {
  text-align: right;
}

@media (max-width: 400px) {
  /* line 313, ../../sass/activities/audio-timepoint.scss */
  .video {
    font-size: 12px;
  }
}
@media (max-width: 600px) {
  /* line 320, ../../sass/activities/audio-timepoint.scss */
  .video {
    width: 100%;
  }
  /* line 323, ../../sass/activities/audio-timepoint.scss */
  .video video {
    border-radius: 0;
  }
  /* line 327, ../../sass/activities/audio-timepoint.scss */
  .video__panel {
    padding-left: 1em;
    padding-right: 1em;
  }
}
/* line 335, ../../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 349, ../../sass/activities/audio-timepoint.scss */
.register-click:hover {
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
}

/* line 364, ../../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 385, ../../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 401, ../../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 406, ../../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 420, ../../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 427, ../../sass/activities/audio-timepoint.scss */
.audio-timepoint-container > .audio-controls {
  background-color: #DCE0E4;
}
/* line 430, ../../sass/activities/audio-timepoint.scss */
.audio-timepoint-container > .audio-controls .time-lapsed, .audio-timepoint-container > .audio-controls .time-remaining {
  font-size: 1.2em;
}
/* line 435, ../../sass/activities/audio-timepoint.scss */
.audio-timepoint-container > .register-click {
  margin: 2em 0;
  position: relative;
}
/* line 440, ../../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 450, ../../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 478, ../../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 500, ../../sass/activities/audio-timepoint.scss */
.video-timepoint-container .logClickButton {
  background-color: #CD4995;
}
/* line 504, ../../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 518, ../../sass/activities/audio-timepoint.scss */
.video-timepoint-container .register-click:hover {
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.2);
}
/* line 523, ../../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 538, ../../sass/activities/audio-timepoint.scss */
.video-timepoint-container .progress-buttons a {
  color: #fff;
}

/* CURRENT CARDS-TIMEPOINT */
/* line 564, ../../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 572, ../../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 584, ../../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 597, ../../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 608, ../../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 619, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint .cards-timepoint-time span:before {
  top: 0px !important;
}
/* line 624, ../../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 631, ../../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 638, ../../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 645, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint .cards-timepoint-result span {
  font-size: 56px;
  line-height: 0;
  color: #ffffff;
}
/* line 653, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint-correct .cards-timepoint-result {
  background-color: #B7CB34;
}
/* line 658, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint-correct .cards-timepoint-time span {
  background-color: #B7CB34;
}
/* line 665, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint-incorrect .cards-timepoint-result {
  background-color: #CD4995;
}
/* line 670, ../../sass/activities/audio-timepoint.scss */
.cards-timepoint-container .cards-timepoint-incorrect .cards-timepoint-time span {
  background-color: #CD4995;
}

@media (min-width: 900px) {
  /* line 681, ../../sass/activities/audio-timepoint.scss */
  .cards-timepoint-container {
    flex-direction: column;
  }
  /* line 684, ../../sass/activities/audio-timepoint.scss */
  .cards-timepoint-container .cards-timepoint {
    /*flex-basis: 21%;
    max-width: 21%;*/
  }
}
@media (min-width: 1500px) {
  /* line 692, ../../sass/activities/audio-timepoint.scss */
  .cards-timepoint-container {
    flex-direction: column;
  }
  /* line 695, ../../sass/activities/audio-timepoint.scss */
  .cards-timepoint-container .cards-timepoint {
    /*flex-basis: 12%;
    max-width: 12%;*/
  }
}
/* line 702, ../../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 */