@charset "utf-8";
/* CSS for responsive when embedded */
/* stored in S3 common-images1/css-important/ !! */
/* responsivenes Youtube version */

.h5p-multichoice .h5p-feedback-text {
    font-size: 12px!important;
    line-height: normal!important;
}

.h5p-second-wrap  .h5p-show-solution {display:inline-block;z-index:999;}
.h5p-responsiveness-test .h5p-wrapper {
  position: relative;
  width: 100%;
 border-radius:7px;
  -moz-border-radius:7px;
}

.h5p-responsiveness-test .h5p-video {
  width: 100%;
  box-sizing:content-box;
  border-radius:7px;
  -moz-border-radius:7px;
}

.h5p-responsiveness-test .h5p-overlay {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 0;
  right: 0;
box-sizing:content-box;
}

.h5p-responsiveness-test .h5p-overlay2 {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
}

.h5p-responsiveness-test .h5p-overlay3 {
position: absolute;
width: 100%;
height: 60%;
top:0;
right: 0;
opacity:0.5;
}

.h5p-responsiveness-test .h5p-overlay4 {
position: absolute;
width: 100%;
height: 40%;
top:50%;
right:0;
box-sizing:content-box;
text-align:center;
}

.h5p-responsiveness-test .h5p-first-wrap {
  position: relative;
  top: 50%;
  font-size: 1.5em;
  margin-top: -1.5em;
  text-align: center;
}

.h5p-responsiveness-test .h5p-second-wrap {
  position: absolute;
  bottom: 0;
  font-size: 1.25em;
  width: 100%;
  padding-bottom: 2em;
  text-align: center;
}

.h5p-responsiveness-test .h5p-third-wrap {
  position: relative;
  top:0;
  font-size: 1.5em;
  margin-top: -1.5em;
  text-align: center;
 /* background-color:#0F3;*/
}

.h5p-responsiveness-test .h5p-fourth-wrap {
  position: absolute;
  top:0;
  font-size: 1.5em;
  margin-top: -1.5em;
  text-align: center;
}

.h5p-responsiveness-test button {
margin: 0 1em;
-moz-border-radius:10px;
border-radius:10px;
background-color:#FFF;
padding-left:30px;
padding-right:30px;
border-style:none;
border:none;
-webkit-box-shadow: 0px 0px 19px -1px rgba(0,0,0,0.27);
-moz-box-shadow: 0px 0px 19px -1px rgba(0,0,0,0.27);
box-shadow: 0px 0px 19px -1px rgba(0,0,0,0.27);
cursor:pointer;
}


.h5p-responsiveness-test .h5p-start, .h5p-responsiveness-test .h5p-start2 {
font-size: 1.25em;
padding:15px;
padding-left:35px;
padding-right:35px;
background-color:#f79407;
color: #fff;
}

.h5p-responsiveness-test .h5p-start {
/*display:none;*/
}

.h5p-show-solution{
font-size: 1.1em;
padding:15px;
padding-left:0px;
padding-right:35px;
position:relative;
top:-5em;
display:inline-block;z-index:999;
}

.h5p-responsiveness-test .h5p-start:before, .h5p-responsiveness-test .h5p-start2:before {
    content: "\f101";
    font-family: FontAwesome;
    color: #fff;
    font-size: 1.4em;
    padding-right: 0.2em;
    top: 4px;
    left: 0;
}


.h5p-responsiveness-test .h5p-answer {
font-size:1.2em;
margin-bottom:10px;
opacity:1.0;
-moz-border-radius:5px;
border-radius:5px;
margin-left:20px;
background-color:#0aabff;
color:#fff;
box-shadow: 0 0 10px #000;
padding-left:35px;
padding-right:35px;
width:80%;
}
.h5p-responsiveness-test .h5p-answer:hover {opacity:0.9;}
.h5p-responsiveness-test .h5p-answer:active {opacity:1.0;}
.h5p-responsiveness-test .h5p-answer:before {
    content: "\f06e";
    font-family: FontAwesome;
    color: #fff;
    font-size: 1.0em;
    padding-right: 0.5em;
    top: 4px;
    left: 0;
}
.h5p-responsiveness-test .h5p-answer:active:before {color: #fff;opacity:1.0;}



.h5p-responsiveness-test .h5p-score {
position:relative;
  box-shadow: 0 0 10px #000;
  padding: 0.3em 1.0em;
  margin: 0;
  font-size: 0.9em;
  background: #fff;
  display: inline-block;
  /*
  top:-50%;
  right:20%;
  */
  margin:auto;
   max-height:80px;
   opacity:0.8;
}

.h5p-responsiveness-test .h5p-click-pointers {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.75em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.h5p-responsiveness-test .h5p-click-point {
  position: absolute;
  background: transparent;
  width: 1em;
  height: 1.5em;
  margin: 0 0 0 -0.2em;
  padding: 0;
  font-size: 1.25em;
  line-height: 1.5em;
}

.h5p-responsiveness-test .h5p-click-point:before {
  font-family: FontAwesome;
  content: "\f0e7";
  font-size: 1.5em;
  text-shadow: 0 0 0.5em #fff;
  color: #ffa200;
}

.h5p-responsiveness-test .h5p-time-line {
  background: #333;
  height: 0;
  -wekbit-transition: height 0.2s linear;
  -moz-transition: height 0.2s linear;
  transition: height 0.2s linear;
}
.h5p-responsiveness-test .h5p-time-line.h5p-visible {
  height: 1em;
}
.h5p-time-frame {
  position: absolute;
  background: #13a126;
  height: 1em;
  border-left: #5fca6b 1px solid;
  border-right: #5fca6b 1px solid;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  background: -webkit-linear-gradient(right, #17701c, #00a308);
  background: -moz-linear-gradient(right, #17701c, #00a308);
  background: -o-linear-gradient(right, #17701c, #00a308);
  background: linear-gradient(right, #17701c, #00a308);
}

.h5p-responsiveness-test .h5p-label {
  position: absolute;
  font-size: 1.25em;
  bottom: 1.25em;
  left: 0;
  padding: 0 0.5em;
  background: #333;
  background: rgba(51, 51, 51, 0.9);
  opacity: 0;
  visibility: hidden;
  max-width: 15em;
  -webkit-transition: visibility 0s 0.2s, opacity 0.2s;
  -moz-transition: visibility 0s 0.2s, opacity 0.2s;
  transition: visibility 0s 0.2s, opacity 0.2s;
}
.h5p-responsiveness-test .h5p-right .h5p-label { left: auto; right: 0;}
.h5p-responsiveness-test .h5p-time-frame:hover .h5p-label {
 opacity: 1;
 visibility: visible;
 -webkit-transition: opacity 0.2s;
 -moz-transition: opacity 0.2s;
 transition: opacity 0.2s;
}
.h5p-responsiveness-test .h5p-label:after { content: "";  position: absolute; left: 0.5em; border: 0.625em solid transparent; border-top-width: 0.625em; border-top-color: #333;
  border-top-color: rgba(51, 51, 51, 0.9);
  border-bottom: 0;
  top: 100%;
}
.h5p-responsiveness-test .h5p-right .h5p-label:after { left: auto; right: 0.5em;}
.h5p-responsiveness-test .h5p-text { color: #fff; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; line-height: 1.5em;}
.h5p-responsiveness-test .h5p-section {position: absolute; height: auto;  font-size: 0.75em; line-height: 1.5em; color: #fff; text-align: center;}



/*h5p youtube iframe IMPORTANT */
.h5p-video div[style] {
	position: relative;
	padding-bottom: 56.25%; 
	padding-top: 25px;
	height: 0!important;
	width: 100%!important;
}
.h5p-video div iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


@media (max-width: 768px) {
/*h5p responsiveness*/
.h5p-responsiveness-test .h5p-answer {font-size:1.0em;margin-bottom:7px;opacity:0.6;margin-left:10px;padding-left:25px;padding-right:25px;width:55%;}
.h5p-responsiveness-test .h5p-answer:before {font-size: 0.9em;padding-right: 0.5em;top: 4px;left: 0;}
.h5p-responsiveness-test .h5p-second-wrap {font-size: 1.1em;width: 100%;padding-bottom:1em;}
.h5p-responsiveness-test .h5p-click-point {width:1.0em;height: 1.2em;padding: 0;font-size: 1.1em;line-height: 1.2em;}
.h5p-responsiveness-test .h5p-click-point:before {font-size: 1.1em;text-shadow: 0 0 0.5em #fff;}
.h5p-responsiveness-test .h5p-click-pointers { height: 1.19em;}
.h5p-responsiveness-test .h5p-start2 {font-size:1.1em;padding:10px;padding-left:20px;padding-right:20px;}
.h5p-show-solution{font-size: 0.8em;padding:6px;padding-left:0px;padding-right:15px;position:relative;margin-top:10px;}
}

@media (max-width: 480px) { 
.h5p-responsiveness-test .h5p-answer {font-size:0.9em;margin-left:8px;padding-left:25px;padding-right:25px;width:50%;}
.h5p-responsiveness-test .h5p-answer:before {font-size: 0.8em;padding-right: 0.5em;top: 4px;left: 0;}
.h5p-responsiveness-test .h5p-second-wrap {font-size: 0.95em;width: 100%;padding-bottom:1em;}
.h5p-responsiveness-test .h5p-click-point {width:0.9em;height: 1.1em;padding: 0;font-size: 1.0em;line-height: 1.2em;}
.h5p-responsiveness-test .h5p-click-point:before {font-size: 1.1em;text-shadow: 0 0 0.5em #fff;}
.h5p-responsiveness-test .h5p-click-pointers { height: 1.15em;}
.h5p-responsiveness-test .h5p-start2 {font-size:0.95em;padding:7px;padding-left:15px;padding-right:15px;margin-top: 15px;}
.h5p-show-solution{font-size:0.90em;padding:6px;padding-left:0px;padding-right:15px;position:relative;margin-top:10px;top:0em;}
.h5p-responsiveness-test .h5p-score {padding: 0.3em 0.5em;font-size: 0.8em;max-height:80px;opacity:0.8;}

}