@font-face {
  font-family: 'bariol regular';
  src: url('./fonts/bariol_regular-webfont.ttf');
}
@font-face {
  font-family: 'bariol bold';
  src: url('./fonts/bariol-bold-webfont.ttf');
}

html,
body {
  background-color: #ccc;
  font-family: 'bariol regular';
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

h1 {
  color: #671B8D;
  font-family: 'bariol bold';
  font-size: 5vh;
  margin-bottom: 4vh;
  margin-top: 2vh;
  text-align: center;
  text-transform: uppercase;
}

h2, .chapter-heading {
  color: #671B8D;
  font-family: 'bariol bold';
  font-size: 4vh;
  letter-spacing: .3vh;
  line-height: 1.5;
  margin: 4vh 4vw 3vh 4vw;
  text-align: center;
  text-transform: uppercase;
}

h3, .section-heading {
  color: #671B8D;
  font-family: 'bariol bold';
  font-size: 3vh;
  letter-spacing: .15vh;
  line-height: 1.3;
  margin: 3vh 3vw 3vh 3vw;
  text-transform: uppercase;
}

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

#company > h3 {
  margin: 3vh 3vw;
}

h4, .heading-small {
  color: #151515;
  font-family: 'bariol bold';
  font-size: 2.4vh;
  line-height: 1.3;
  margin: 5vh 4vw 1.5vh 4vw;
  text-transform: uppercase;
}

.company.heading-small {
  letter-spacing: unset;
  margin: 5vh 4vw 1.5vh 4vw !important;
}

/* Fixes embedded video overflow its container */
iframe {
  max-width: 100%;
}

img {
  height: auto;
  padding: 0;
  width: 100%;
}

.illustration {
  max-width: 300px;
  max-height: 300px;
}

.team-number-wrapper {
  margin-top: 2rem;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-number-wrapper h3 {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
}

li + p {
  padding-bottom: 4vh;
}
li > ul {
  margin-left: 4vw;
  padding: 0;
}

ol {
  margin: 0;
  padding: 0 0 0 4vw;
}
ol > li {
  color: #000;
  font-family: 'bariol regular';
  font-size: 2.4vh;
  margin: 0 0 2vh 0;
  padding: 0 0 0 2vw;
}

#company > ol {
  margin: 2vh 4vw 0 4vw;
}

#company > ol > ul {
  margin: 1vh 3vw 1vh 3vw;
}

p {
  color: #000;
  font-size: 2.4vh;
  font-weight: 500;
  margin: 0 4vw 2vh 4vw;
  text-align: left;
}
/* .col-sm-8 > p {
  margin: 0 0 2vh 4vw;
} */

textarea {
  resize: none !important;
}

ul {
  color: #000;
  font-size: 2.4vh;
  font-weight: 500;
  margin: 1vh 3vw 1vh 6vw;
  text-align: left;
}
/* Pad the top of all p elements that follow a ul element */
ul + p {
  padding-top: 4vh;
}

/* For cases where we use HTML5 video directly through <video> tags. */
video {
  height: auto !important;
  width: 100% !important;
}

.row {
  background: #fff;
  margin: 0;
}

.container-fluid {
  background: #fff;
  height: 100%;
  margin: 0 auto;
  max-width: 1000px;
  padding: 0;
  width: 100%;
}

.page-container {
  height: 100%;
}

.yrityskyla-illustration{
  width: 90%;
  /* height: 38vh;
  width: auto; */
}

.yrityskyla-logo{
  height: 12vh;
  margin-top: 4vh;
  margin-bottom: 6vh;
  width: auto;
}

.white {
  background-color: #fff;
}
.gray {
  background-color: #f5f5f5;
}
.pink {
  background-color: #e986ff;
}
.lilac {
  background-color: #9900cc;
}

.carousel-inner {
  height: 60vh;
  transform: translateZ(1px); /* Safari mobile fix */
}
.carousel-indicators {
  transform: translateZ(2px); /* buttons over content */
}

.carousel-control-prev,
.carousel-control-next {
  width: 5vw;
  transform: translateZ(2px); /* buttons over content */
}
.carousel-control-prev > span,
.carousel-control-next > span {
  color: #9b00c8;
  font-size: 4vmin;
  transform: translateZ(1px); /* Safari mobile fix */
}
.carousel-control-prev > span {
  padding-left: 2.5vw;
}
.carousel-control-next > span {
  padding-right: 2.5vw;
}

.carousel-indicators li {
  display: inline-block;
  width: 2vw;
  height: 2vw;
  margin: .8vh;
  text-indent: 0;
  cursor: pointer;
  border: none;
  border-radius: 50%;
  background-color: #00addc;
}

.carousel-indicators .active {
  width: 2vw;
  height: 2vw;
  margin: .8vh;
  background-color: #0d5e9f;
}

.embed-responsive-16by9,
.embedly-card {
  height: 0;
  margin: 1vh 0 6vh 0;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 2.5vh;
  position: relative;
}

.embed-responsive-16by9 > iframe,
.embed-responsive-16by9 > .embed-responsive-item,
.embedly-card > .embedly-card-hug,
.embedly-card > .embedly-card-hug > iframe {
  height: 100%;
  left: 0;
	position: absolute !important;
	top: 0;
	width: 100%;
}

/******************************************************************************
*************************** New styling starts here ***************************
*******************************************************************************/

.all-caps {
  text-transform: uppercase;
}

.score-board {
  align-items: center;
  background-color: gainsboro;
  display: flex;
  flex: 1 20%;
  flex-flow: row nowrap;
  justify-content: space-between;
  padding: 2vh 0;
}
.score-board img, .team-number-img {
  width: 6vmin;
}
.score-board span {
  color: #505050;
  font-size: 2.4vh;
  font-weight: 700;
  vertical-align: middle;
}
.svg-inline--fa {
  display: inline-block;
  font-size: 3.5vh;
  overflow: visible;
}

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

button > .svg-inline--fa {
  vertical-align: -0.275em;
}
h1 > .svg-inline--fa { /* Icon of header 1 in Pelitilanne */
  margin-right: 1vh;
  vertical-align: inherit;
}

.headerrow {
  position:fixed;
  width:100%;
  height:7vh;
  margin-top: 1vh;
  top:0;
  z-index: 1;
}

.btn{
  background-color: #12adda;
  border-radius: 0;
  color: #fff;
  font-size: 2.2vh;
  font-family: 'bariol bold';
  padding: 1vh 2vh 1vh 2vh;
  margin-top: 6vh;
  margin-bottom: 12vh;
  text-transform: uppercase;
}
.btn:focus{
  color: #fff;
}
.btn .glyphicon{
  top: .2vh;
}

 .flipper h2{
  color: #ffffff;
  font-family: 'bariol bold';
  font-size: 2.8vh;
  letter-spacing: .3vh;
  line-height: 1.3;
  margin: 0;
  text-align: center;
  text-transform: uppercase;
}
.flipper img {
  object-fit: contain;
  max-height: 25vh;
}
.flipper .back h2{
  color: #ffffff;
  font-family: 'bariol bold';
  font-size: 2.8vh;
  letter-spacing: .3vh;
  line-height: 1.3;
  margin-top: 4vh;
  text-align: center;
  text-transform: uppercase;
}
.flipper .back p {
  font-size: 2.4vh;
  color: #fff;
  font-weight: 500;
  text-align: left;
  margin:1vh .4vh 1vh .4vh;
}

.product-image {
  display: block;
  padding-bottom: 4vh;
  margin-left: auto;
  margin-right: auto;
  max-height: 50vh;
  width: unset;
}

.bubble {
  align-items: center;
  justify-content: center;
  background: unset;
  display: flex;
  flex-wrap: nowrap;
  margin: 0 4vw;
}

.bubble:not(:first-child) {
  margin-top: 4vw;
}

.bubble-image {
  flex-basis: 30%;
  flex-grow: 0;
}

.bubble-image.big {
  flex-basis: 45%;
  flex-grow: 0;
}

.row-img-left > .bubble-image {
  order: 0;
}

.row-img-right > .bubble-image {
  order: 2;
}

.bubble-image > img {
  width: 100%;
}

.bubble-container {
  display: flex;
  flex-direction: column;
}

.bubble-container > .flip-container {
  padding: 0 4vw;
}

.bubble > p {
  flex-basis: 70%;
  flex-grow: 1;
  margin: 0;
  padding: 0 0 0 4vw;
}

.row-img-right > p {
  padding: 0 4vw 0 0;
}

.bubble.single-device-row {
  justify-content: left;
}

.single-device-wrapper {
  display: flex;
  align-items: center;
}

.single-device-wrapper p {
  margin: 0;
}

.single-device-wrapper .svg-inline--fa.single-device-icon {
  margin-right: 0.5em;
}

.svg-inline--fa.single-device-icon,
.svg-inline--fa.single-device-info {
  color: #671B8D;
  font-size: 4.8vh;
}

.svg-inline--fa.single-device-info {
  font-size: 7.5vh;
}

.hoxbox {
  color: #fb701a;
  margin: 3vh 2vw 3vh 4vw;
}
.hoxbox-right {
  margin: 3vh 4vw 3vh 2vw;
}
.hoxbox img, .hoxbox-right img {
  width: 25vh;
  height: auto;
}
.hoxbox .svg-inline--fa {
  font-size: 20vh;
}

.hoxtext {
  margin: 6vh 4vw 3vh 2vw;
}
.hoxtext p {
  margin: 0 !important;
  padding: 0 !important;
}
.hoxtext div {
  padding: 0;
}
.hoxtext .hoxtext-row {
  align-items: center;
  display: flex;
  flex: 1;
  margin-top: 2vh !important;
  padding: 0;
}
.hoxtext .illustration {
  height: 17vh;
  margin: 0 !important;
  width: auto;
}

.launch {
-webkit-animation: imageSlide 0.8s ease-in;
-moz-animation: imageSlide 0.8s ease-in;
-o-animation: imageSlide 0.8s ease-in;
animation: imageSlide 0.8s ease-in;
}
.launch, .bubble img  {
  -webkit-transform:rotate(0deg) scale(1);-webkit-transition:1s;
  -moz-transform:rotate(0deg) scale(1);-moz-transition:1s;
  -o-transform:rotate(0deg) scale(1);-o-transition:1s;
  transform:rotate(0deg) scale(1);transition:1s;
}
/* .bubble p {
  font-size: 2.4vh;
  font-weight: 500;
	margin: 1vh;
  padding: 3vh 3vw 3vh 0;
} */

.team-select {
  align-items: center;
  display: flex;
  flex: 1 20%;
  flex-flow: row nowrap;
  justify-content: space-around;
  margin: 4vh 0;
}

.team-select button {
  border: none;
  background-color: transparent;
}

.team-select img {
  width: 8vmin;
}
.team-select img:hover {
  cursor: pointer;
  transform: scale(1.05);
  transition: 0.2s;
}

.team-select-headline {
  color: #232121;
  font-family: 'bariol bold';
  font-size: 2.4vh;
  margin-bottom: 4vh;
  margin-top: 5vh;
}

.info-bubble {
  align-items: center;
  background: unset;
  display: flex;
  flex: 1 50%;
  flex-flow: row nowrap;
  justify-content: space-between;
  margin: 2vh 4vw;
}
.info-bubble p {
  color: #474747;
  font-family: 'bariol regular';
  font-size: 2.4vh;
	margin: 4vh 2vw;
}
.info-bubble img {
  margin: 4vh 2vw 4vh 0;
}

.strengths-subtitle {
  font-family: 'bariol bold';
}

.background-gray > div:first-child > h4:first-child {
  margin-top: 1.5vh;
}

.popover-trigger,
.popover-trigger:hover,
.popover-trigger:active,
.popover-trigger:visited,
.popover-trigger:focus {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.exercise-icon {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.exercise-icon > img {
  width: 80px;
}

.company-logo-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/*********************************************************************************
*********************************  New styling ends here ***********************
**********************************************************************************/

/**  Rating styling starts here  **/

.starHolder {position:relative;margin:0 auto;width:100%;font-size:0;}
.starHolder .star {position:relative;width:8vmin; margin:2vmin;display:inline-block;transition:0.5s;background:#ccc; padding: 0; border: none;
  -webkit-animation-name:starOut;
  -webkit-animation-duration:0.2s;
  -webkit-animation-timing-function:ease-in;
  -moz-animation-name:starOut;
  -moz-animation-duration:0.2s;
  -moz-animation-timing-function:ease-in;
  -o-animation-name:starOut;
  -o-animation-duration:0.2s;
  -o-animation-timing-function:ease-in;
  animation-name:starOut;
  animation-duration:0.2s;
  animation-timing-function:ease-in;
}
.starHolder .star:hover {cursor:pointer;transform: scale3D(1.1, 1.1, 1.1);}
.starHolder .star img {width:100%;}

.star.yellow {background:#e985ff;;transition:0.2s;
  -webkit-animation-name:starIn;
  -webkit-animation-duration:0.2s;
  -webkit-animation-timing-function:ease-in;
  -moz-animation-name:starIn;
  -moz-animation-duration:0.2s;
  -moz-animation-timing-function:ease-in;
  -o-animation-name:starIn;
  -o-animation-duration:0.2s;
  -o-animation-timing-function:ease-in;
  animation-name:starIn;
  animation-duration:0.2s;
  animation-timing-function:ease-in; }

/* .background-gray .star {
  box-shadow:inset 0 0 0 .4vw #f5f5f5;
}
.background-gray .star img {
  box-shadow: 0 0 0 .4vw #f5f5f5;
}
.background-gray .yellow:active {
  box-shadow: 0 0 0 .4vw #f5f5f5;
}

.background-white .star {
  box-shadow:inset 0 0 0 .4vw #fff;
}
.background-white .star img {
  box-shadow: 0 0 0 .4vw #fff;
}
.background-white .yellow:active {
  box-shadow: 0 0 0 .4vw #fff;
} */

@-webkit-keyframes starIn {
      0% {-webkit-transform:scale(1);}
     40% {-webkit-transform:scale(1.2);}
     80% {-webkit-transform:scale(1.6);}
     90% {-webkit-transform:scale(1.3);}
    100% {-webkit-transform:scale(1);}
}
@-moz-keyframes starIn {
      0% {-moz-transform:scale(1);}
     40% {-moz-transform:scale(1.2);}
     80% {-moz-transform:scale(1.6);}
     90% {-moz-transform:scale(1.3);}
    100% {-moz-transform:scale(1);}
}
@-o-keyframes starIn {
      0% {-o-transform:scale(1);}
     40% {-o-transform:scale(1.2);}
     80% {-o-transform:scale(1.6);}
     90% {-o-transform:scale(1.3);}
    100% {-o-transform:scale(1);}
}
@keyframes starIn {
      0% {transform:scale(1);}
     40% {transform:scale(1.2);}
     80% {transform:scale(1.6);}
     90% {transform:scale(1.3);}
    100% {transform:scale(1);}
}

@-webkit-keyframes starOut {
      0% {-webkit-transform:scale(1);}
     40% {-webkit-transform:scale(0.9);}
     80% {-webkit-transform:scale(1.1);}
     90% {-webkit-transform:scale(0.95);}
    100% {-webkit-transform:scale(1);}
}
@-moz-keyframes starOut {
      0% {-moz-transform:scale(1);}
     40% {-moz-transform:scale(0.9);}
     80% {-moz-transform:scale(1.1);}
     90% {-moz-transform:scale(0.95);}
    100% {-moz-transform:scale(1);}
}
@-o-keyframes starOut {
      0% {-o-transform:scale(1);}
     40% {-o-transform:scale(0.9);}
     80% {-o-transform:scale(1.1);}
     90% {-o-transform:scale(0.95);}
    100% {-o-transform:scale(1);}
}
@keyframes starOut {
      0% {transform:scale(1);}
     40% {transform:scale(0.9);}
     80% {transform:scale(1.1);}
     90% {transform:scale(0.95);}
    100% {transform:scale(1);}
}

/** Animate last section  **/

#fixed-footer {
  text-align: center;
  font-size:5vh;
  color:#fff;
  max-width: 1000px;
  width: 100%;
  height: 82vh;
  background-color: #00ADDC;
  position: fixed;
  bottom: 0;
  z-index: -1;
  padding: 4vh 4vw;
  -webkit-transition:0.8s;
  -webkit-filter:brightness(20%);
  -moz-transition:0.8s;
  -moz-filter:brightness(20%);
  -o-transition:0.8s;
  -o-filter:brightness(20%);
  transition:0.8s;
  filter:brightness(20%);
}

#fixed-footer.finish {
  text-align:center;
  font-size:5vh;
  color:#fff;
  -webkit-transition:0.8s;
  -webkit-filter:brightness(100%);
  -moz-transition:0.8s;
  -moz-filter:brightness(100%);
  -o-transition:0.8s;
  -o-filter:brightness(100%);
  transition:0.8s;
  filter:brightness(100%);
}

#fixed-footer .endingScreen {
  -webkit-transform:scale(0.5);
  -moz-transform:scale(0.5);
  transform:scale(0.5);
  -webkit-transition:0.8s;
  -moz-transition:0.8s;
  -o-transition:0.8s;
  transition:0.8s;
}

#fixed-footer .endingScreen.finish {
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  transform:scale(1);
  -webkit-transition:0.8s;
  -moz-transition:0.8s;
  -o-transition:0.8s;
  transition:0.8s;
}

#fixed-footer .finish {
  -webkit-transition:0.8s;
  -webkit-filter:brightness(100%);
  -moz-transition:0.8s;
  -moz-filter:brightness(100%);
  -o-transform:scale(1);
  -o-transition:0.8s;
  -o-filter:brightness(100%);
  transition:0.8s;
  filter:brightness(100%);
}

.vertical-center {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 85%;
}
/* animation rules for those jumping on bubbles. */

@-webkit-keyframes imageSlide {
      0% {-webkit-transform:scale(0);}
     80% {-webkit-transform:scale(1.1);}
     90% {-webkit-transform:scale(0.95);}
    100% {-webkit-transform:scale(1);}
}
@-moz-keyframes imageSlide {
      0% {-moz-transform:scale(0);}
     80% {-moz-transform:scale(1.1);}
     90% {-moz-transform:scale(0.95);}
    100% {-moz-transform:scale(1);}
}
@-o-keyframes imageSlide {
      0% {-o-transform:scale(0);}
     80% {-o-transform:scale(1.1);}
     90% {-o-transform:scale(0.95);}
    100% {-o-transform:scale(1);}
}
@keyframes imageSlide {
      0% {transform:scale(0);}
     80% {transform:scale(1.1);}
     90% {transform:scale(0.95);}
    100% {transform:scale(1);}
}

/** Scrolling effect starts here **/

/* .scrollTrigger {
  -webkit-transition:0.8s;
  -moz-transition:0.8s;
  -o-transition:0.8s;
  transition:0.8s;
  -webkit-perspective: 5000px;
  -moz-perspective: 5000px;
  -o-perspective: 5000px;
  perspective: 5000px;
}

.content1, .content2 {
   width:100%;
  -webkit-animation-delay:0.2s;
  -moz-animation-delay:0.2s;
  -o-animation-delay:0.2s;
  animation-delay:0.2s;
  -webkit-opacity:0;
  -moz-opacity:0;
  -o-opacity:0;
  opacity:0;
}
.content1 {
  height:100%;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  -o-transform-origin: center top;
  transform-origin: center top;
  -webkit-transform: translateY(0%) rotateX(-80deg);
  -moz-transform: translateY(0%) rotateX(-80deg);
  -o-transform: translateY(0%) rotateX(-80deg);
  transform: translateY(0%) rotateX(-80deg);
}
.content2 {
  height:100%;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  -o-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-transform: translateY(0%) rotateX(80deg);
  -moz-transform: translateY(0%) rotateX(80deg);
  -o-transform: translateY(0%) rotateX(80deg);
  transform: translateY(0%) rotateX(80deg);
}
.illustration {
  height: 32vh;
  margin: 7.5vw 3vw 3.75vw 3vw;
  width: auto;
}
.col-sm-4 > .illustration {
  height: auto;
  margin: 0 4vw 2vh 0;
  width: 90%;
}
h1 + .illustration,
h2 + .illustration,
h3 + .illustration,
h4 + .illustration,
p + .illustration {
  height: 36vh;
  margin: 0 3vw 3.75vw 3vw;
  width: auto;
}
a > .illustration:hover {
  transform: scale(1.05);
  transition: 0.25s;
}
.illustration-page-width {
  height: auto;
  margin: 0 4vw 2vh 4vw;
  width: 90%;
}
.onScreen {
  -webkit-transition:1s;
  -moz-transition:1s;
  -o-transition:1s;
  transition:1s;
  -webkit-opacity:1;
  -moz-opacity:1;
  -o-opacity:1;
  opacity:1;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateY(0%) rotateX(0deg);
  -moz-transform: translateY(0%) rotateX(0deg);
  -o-transform: translateY(0%) rotateX(0deg);
  transform: translateY(0%) rotateX(0deg);
  -webkit-transition-delay:0.3s;
  -moz-transition-delay:0.3s;
  -o-transition-delay:0.3s;
  transition-delay:0.3s;
} */
/** Scrolling effect ends here  **/

.zero-padding{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.spacer-60{
  height:6vh;
}
.spacer-40{
  height:4vh;
}

/* Footer styles */

#class-name {
  font-size: 2.4vh;
  font-weight: bold;
}

.footerrow {
  background-color: gainsboro;
  bottom: 0;
  height: 6vh;
  max-width: 1000px;
  position: fixed;
  width: 100%;
  display:flex;
  align-items: center;
  padding: 0 2vw 0 2vw;
}
.footerrow > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 30%;
  flex-grow: 1;
}
.footerrow > .footer-left {
  justify-content: flex-start;
}
.footerrow > .footer-left > div:first-child {
  padding-right: 3vw;
}
.footerrow > .logout {
  justify-content: flex-end;
}
.footerrow > .indicators {
  justify-content: center;
}
/* Safari fix */
.footerrow::after,
.footerrow::before {
  display: none;
}
.footerrow a {
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 3.5vh;
}
.footerrow a {
  border-radius: 50% !important;
  height: 2.5vh;
  width: 2.5vh;
}
.footerrow .btn-home {
  margin-right: 3vw;
}
.footerrow .home span:hover,
.footerrow .logout span:hover{
  height: 2.625vh;
  width: 2.625vh;
}
button.btn-logout,
button.btn-home {
  border: none;
  background-color: transparent;
}
.footerrow .svg-inline--fa {
  font-size: 3.5vh;
  vertical-align: middle;
}
.footerrow .svg-inline--fa:hover {
  transform: scale(1.05);
  transition: 0.25s;
}

.page-active {
  background-color: #bbb9b9;
  margin: 0 .8vh;
}

.page-noactive {
  background-color: #3b3b3a;
  margin: 0 .8vh;
}
.page-noactive:hover {
  background-color: #000;
}

a.disabled-link {
  cursor: not-allowed;
}

.dark{
  color:#3b3b3a;
}

/* .go-nextChapter {
  background-color: #12adda;
  border-radius: 0;
  color: #fff;
  font-size: 2.2vh;
  font-family: 'bariol bold';
  padding: 1vh 2vw 1vh 2vw;
  margin-top: 6vh;
  margin-bottom: 12vh;
	transition: 0.1s;
  text-transform: uppercase;
} */
.go-nextChapter:focus {
  color: #fff;
}
.container {
  display:inline-block;
}

.background-white{
  background-color: #fff;
  margin-bottom: 0;
  padding-top: 4vh;
  padding-bottom: 6vh;
}

.background-gray{
  background-color: #f5f5f5;
  margin-bottom: 0;
  padding-top: 5vh;
  padding-bottom: 5vh;
}
.background-pink{
  background-color: #fdf3ff;
  margin-bottom: 0;
  padding-top: 5vh;
  padding-bottom: 5vh;
}

.theme {
  padding-top: 0;
  padding-bottom: 2vh;
}

.role-scroller {
  padding-bottom: 0;
}

.pentagon-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 2vh 8vw;
}

.pentagon {
  position: relative;
  flex-grow: 0;
  width: 200px;
}

.pentagon-text {
  font-size: 2rem;
  font-family: 'bariol bold';
  color: #fff;
  position: absolute;
  top: 32%;
  left: 50%;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.pentagon > svg {
  width: 100%;
}

.purple-heading {
  background: #671B8D;
  border-radius: 0;
	color: #fff;
  font-family: 'bariol regular';
  padding: .5vh 1vh;
  font-size: 3vh;
  text-transform: none;
  text-align: left;
  margin: 1vh 0 2vh 0;
  line-height: 1.4;
}

/* Pipopeli section colors */
.pipopeli-blue {
  background-color: #00ADDC;
}
.pipopeli-yellow {
  background-color: #FFDD61 !important;
}
.pipopeli-orange {
  background-color: #FB701A;
}
.pipopeli-green {
  background-color: #8CC83C;
}
.pipopeli-blue,
.pipopeli-yellow,
.pipopeli-orange,
.pipopeli-green {
  color: rgba(0,0,0,0.8);
}

/***************************************/
/* ------------- FLIP BOX -------------*/
/* entire container, keeps perspective */
/*-------------------------------------*/
/***************************************/

.flip-container {
  perspective: 1000px;
  transform-style: preserve-3d;
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;
  padding:1px;
}
/*  UPDATED! flip the pane when hovered */
.flip-container:hover .back,
.flip-container:focus .back {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);

}
.flip-container:hover .front,
.flip-container:focus .front {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

.flip-container, .front, .back {
  width: 100%;
  min-height: 38vh;
 }

.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}
.flipper .svg-inline--fa {
  color: #fff;
  font-size: 12vh;
  margin-top: 6vh;
  margin-bottom: 6vh;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: 0.6s;
  -ms-transition: 0.6s;
  -webkit-transition: 0.6s;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
}

/*  UPDATED! front pane, placed above back */

.front {
  z-index: 2;
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  text-align: left;
  vertical-align: middle;
  background-color:#269ed8;
  padding: 4vh .4vh .4vh .4vh;
}

.bg-img {
  -webkit-transition:0.4s;
  -moz-transition:0.4s;
  -o-transition:0.4s;
  transition:0.4s;
  background: url('../../assets/img/card-corner-grey.png') no-repeat right bottom;
  background-size: 30px 30px;
}

/* front colors of flippers */
.flipbox-pink{
  background-color:#E986FF;
}
.flipbox-blue{
  background-color:#00ADDC;
}
.flipbox-dark-pink{
  background-color:#9900CC;
}

/************ back, initially hidden pane *************/

.back {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  font-family: 'bariol regular';
  letter-spacing: .15vh;
  padding: 0 4% 2% 10%;
}

.back p{
  font-size: 2.4vh;
  color:#fff;
}

.rating-title {
  font-size: 2.7vh;
  font-family: 'bariol bold';
  color: #671B8D;
  letter-spacing: .15vh;
  line-height: 1.3;
  margin-top: 6vh;
}

#foo
{
  margin:0 auto;
  width:40%;
}
.star-rating {
  width:100%;
  text-align:center;
  margin-top: 4vh;
}
.star-rating .fa-star{
  line-height:3.2vh;
  font-size:2.6em;
  margin: 0 1.5vh;
}

#checked{
  color:#e985ff;
}
#un-checked{
  color:#7e92a5;
}

/********* Chapter 1.1 css ends here *************************************************
****************************************************************************************/


/********* Chapter 1.2 css starts here *************************************************
****************************************************************************************/
/*

/**********************  style for the botton selection starts here  ******************/

.holder {
  width:90%;
  margin:0 auto;
  text-align:center;
}
.violet, .blue {
  border:none;
  margin:.4vh;
  padding:.7vh 1vh;
  color:#fff;
  font-size: 2.4vh;
}
.violet:hover, .blue:hover {
  cursor:pointer;
}
.violet {
  background:#E986FF;
  transition:0.3s;
}
.blue {
  background:#00ADDC;
  transition:0.3s;
}
.violet.active {
  background:#9900CC;
  color:#FFF;
  transition:0.5s;
}
.blue.active {
  background:#0D5E95;
   color:#FFF;
   transition:0.5s;
 }
.blue.active2 {
  background:#FFF;
  border:.2vh solid #0D5E95;
  color:#0D5E95;
  transition:0.5s;
}
.status {
  text-align:center;
  margin:1vh;
}
.empty, .full {
  width:2vh;
  height:2vh;
  border-radius:100%;
  background:#b1b0b0;
  margin:.8vh;
  display:inline-block;
}
.kiinnostukset .full {
  background:#9900CC;
}
.vahvuudet .full {
  background:#0D5E95;
}
.allSelected {
  background:#fb701a;
}
.help {
  text-align:center;
  font-size: 2.4vh;
  color: #000;
  font-weight:700;
  margin-top: 3vh;
  margin-bottom: 2vh;
}

/**************** Css for botton selection  ends ***************/

.content {display:none;position:absolute;top:0;left:0;width:100%;height:100%;}
.content:nth-child(1) {display:block;}

.content h2, .content p {
  margin-left:16vh;
  margin-right:2.2vh;
}
.content h2 {
  font-size: 3vh;
  font-family: 'bariol bold';
  color: #2c2d30;
  margin-top:7%;
  margin-bottom: 4%;

}
.content p {
  font-size: 2.5vh;
  font-family: 'bariol regular';
  color: #2c2d30;
  margin-bottom: 2%;
  font-weight: 500;

}
.navigation {
  position:relative;
  padding:0;
  width:8vh;
  height:100%;
  margin: 0;
}

.navigation li {
  height: 10vh;
  width: 10vh;
  list-style: none;
  background-position: center center;
  background-size: 60%;
  background-repeat: no-repeat;
}


.navigation li:nth-child(1) {background-color:#cceceb; background-image:url(../../assets/img/icons/Toimitusjohtaja.svg);}
.navigation li:nth-child(2) {background-color:#f9cdd7; background-image:url(../../assets/img/icons/Viestintä.svg);}
.navigation li:nth-child(3) {background-color:#fce2bd; background-image:url(../../assets/img/icons/Myynti.svg);}
.navigation li:nth-child(4) {background-color:#a5c5e3; background-size: 50%; background-image:url(../../assets/img/icons/Tuotanto.svg);}
.navigation li:nth-child(5) {background-color:#e1b5f0; background-image:url(../../assets/img/icons/Vastuu.svg);}


/***  nav tab menu ends here **/

/********* Chapter1.2 css ends here *************************************************
****************************************************************************************/

.fa.fa-home {
  font-size: 5.8vh;
}

.fa.fa-arrow-left {
  font-size: 5.8vh;
  left: 0;
  margin-left: .8vh;
  position: fixed;
}

.fa.fa-arrow-right {
  font-size: 5.8vh;
  margin-right: .8vh;
  position: fixed;
  right: 0;
}

.footer-space {
	width:100%;
	height:80vh;
	position:relative;
	pointer-events:none;
	border-top: 2vh solid #293038;
}

.endingScreen h1 {
  font-size: 4vh;
  color: #fff;
  font-family: 'bariol bold';
  line-height: 1.5;
  letter-spacing: .3vh;
  text-transform: uppercase;
}
.endingScreen .svg-inline--fa {
  margin-top: 10vh;
  height: 30%;
  width: 100%;
}
.endingScreen img {
  height: 35vh;
  margin: 10vh auto 0 auto;
  width: auto;
}
 /******************************************************************************
 Chapter 2 style starts here
 ******************************************************************************/

.form-content {
  font-size: 2.4vh;
  margin: 6vh 6vw 0 4vw;
}
.form-content li {
  font-weight: 600;
  margin-bottom: 6vh;
}
.form-content li p:nth-child(1) {
  font-weight: 600;
}
.form-content li ul li {
  font-weight: 400;
  margin-bottom: 0;
  margin-left: 0;
}
.form-content p {
  margin: 0 0 1.5vh 0;
}
.form-content textarea {
  background-color: #fff;
  border: .2vh solid lightgray;
  border-radius: .7vh;
  font-size: 2.4vh;
  padding: 2vh 2vw;
}

.form-content button {
  margin-bottom: 0;
  margin-top: 0;
}

.form-content button:hover,
.go-nextChapter:hover,
.tarjous:hover {
  color: #fff;
  transform:scale(1.05);
  transition:0.2s;
  cursor:pointer;
}

/*******************************************************************************
        css for chapter 2.2 starts here
********************************************************************************/

/******************* style for bullet points inside the form ******************/
.tryit li::before {
  color: #000;
  content: '•';
  margin-left: -2vw;
  margin-right: 1vw;
}

.bullet-forms {
  color: #000;
  font-size: 2.4vh;
  font-weight: 500;
  list-style-type:none;
  margin: 1vh 3vw 1vh 0;
  padding-left: 4vw;
  text-align: left;
}
/******************* Quiz chapter 2.2 starts here ****************************/

.gameContainer {
  min-height: 500px;
  overflow: hidden;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  position:relative;
  -webkit-transition: 0.8s;
  -moz-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
  width: 100%;
  max-width:90vh;
  margin:0 auto;
}

.gameHolder {
  width:100%;
  height:100%;
  position:absolute;
  top:0;left:0;
  margin:0 auto;
  background:#fdf3ff;
  font-family: 'bariol regular';
  text-align:center;
  }

.gameHolder.next {
  height:100%;
  opacity:1;
  z-index:10;
  position:absolute;top:0;left:0;
  -webkit-filter:brightness(20%);
  -moz-filter:brightness(20%);
  -o-filter:brightness(20%);
  filter:brightness(20%);
  -webkit-transition:1s;
  -moz-transition:1s;
  -o-transition:1s;
  transition:1s;
  }

.gameHolder.prev {
  height:100%;
  opacity:1;
  z-index:15;
  -webkit-transition: transform 1s;
  -moz-transition: transform 1s;
  -o-transition: transform 1s;
  transition: transform 1s;
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -o-transform-origin: center left;
  transform-origin: center left;
  -webkit-transform: translateX(-50%) rotateY(-90deg);
  -moz-transform: translateX(-50%) rotateY(-90deg);
  -o-transform: translateX(-50%) rotateY(-90deg);
  transform: translateX(-50%) rotateY(-90deg);
}

.gameHolder.active {
  z-index:12;opacity:1;
  -webkit-filter:brightness(100%);
  -moz-filter:brightness(100%);
  -o-filter:brightness(100%);
  filter:brightness(100%);
  -webkit-transition: transform 0.8s;
  -moz-transition: transform 0.8s;
  -o-transition: transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform-origin: center left;
  -moz-transform-origin: center left;
  -o-transform-origin: center left;
  transform-origin: center left;
  -webkit-transform: translateX(0%) rotateY(0deg);
  -moz-transform: translateX(0%) rotateY(0deg);
  -o-transform: translateX(0%) rotateY(0deg);
  transform: translateX(0%) rotateY(0deg);
  }

  .gameHolder span.timer {
      font-size: 2.4vh;
      color: #fff;
      position: absolute;
      top: 3vh;
      right: 3%;
      background-color: #1ab394;
      padding: .5vh 1vh;
      border-radius: 20%
    }

.gameHolder span.pageNro {
    font-size: 2.4vh;
    color: #fff;
    position: absolute;
    top: 3vh;
    right: 3%;
    background-color: #1ab394;
    padding: .5vh 1vh;
    border-radius: 20%
  }
.gameHolder .navigate {display:none;}

.true {}
.false {}

.gameHolder p {
  font-size:2.5vh;
  font-weight:600;
  margin:0;
  /* height:10vh; */
  vertical-align:bottom;
  padding:10vh 4vw 10vh 4vw;
  font-family: 'bariol bold';
  text-align: center;
}
.gameHolder .answer1 {
  display:none;
  font-size:2.4vh;
  width:80%;
  margin:0 auto;
  padding:2vh 0 6vh 0;
  font-family: 'bariol bold';
}

.gameHolder .options {
  display: flex;
  flex-wrap: wrap;
  margin: 0 4vw;
}

.gameHolder .options button {
  border-radius:.4vh;
  flex: 1;
  font-weight:600;
  padding:2vh .5vh;
  font-size:2.4vh;
  border:none;
  color:#fff;
  letter-spacing: 0.04em;
  margin: .5vh;
}
.gameHolder .options button:nth-child(1) {background:#e986ff;}
.gameHolder .options button:nth-child(2) {background:#14aeda;}
.gameHolder .options button:nth-child(3) {background:#9900cc;}

.gameHolder .navigate button {
  border-radius:.8vh;
  margin:0;
  line-height:normal;
  text-transform:uppercase;
  padding:1vh 2.5vh;
  font-size:2.4vh;
  border:none;
  background:#14aeda;
  color:#fff;
  margin: 2vh 5vh;
  }

  #finalPoints h2{
    margin-top: -10vh;
    font-size: 4vh;
  }
  #finalPoints h3{
    font-size: 2.5vh;
    margin-top: 0;
  }

/* INDEX MAIN MENU */
.main-menu {
    height: 60vmin;
    width: 90%;
    margin-bottom: 17vmin;
    margin-top: 3rem;
}

.main-menu-row {
  /* Fixing main menu not showing correctly on Safari */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  height: 33.33%;
}

.main-menu-item {
  flex-basis: 48.5%;
  flex-grow: 0;
  background-color: #e986ff;
  background-position: right center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  transition: background-size 0.4s;
}

.main-menu-item:hover {
  background-size: 140% auto;
  cursor: pointer;
  text-decoration:none;
  transition:0.3s;
  text-shadow:0 0 5vh rgba(0,0,0,0.5);
}

.main-menu-row:nth-child(even) .main-menu-item {
  background-position: left center;
  text-align: right;
}

.main-menu-row:nth-child(even) .main-menu-item-content {
  padding: 0 10% 0 0;
}


.main-menu-row:not(last-child) {
  margin-bottom: 1vmin;
}

.main-menu-1 {
  background-image:url(../../assets/img/covers/otsikkokuva-1.png);
}
.main-menu-2 {
  background-image:url(../../assets/img/covers/otsikkokuva-2.png);
}
.main-menu-3 {
  background-image:url(../../assets/img/covers/otsikkokuva-3.png);
}
.main-menu-4 {
  background-image:url(../../assets/img/covers/otsikkokuva-4.png);
}
.main-menu-5 {
  background-image:url(../../assets/img/covers/otsikkokuva-5.png);
}
.main-menu-6 {
  background-image:url(../../assets/img/covers/otsikkokuva-6.png);
}

.main-menu-item-content {
  padding: 0 0 0 10%;
  display: flex;
  flex-flow: column;
  color:#fff;
  font-size:4vmin;
  line-height: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
  height:100%;
  width:auto;
  position:relative;
}

/* create a full-height inline block pseudo-element */
/* .main-menu-item-content:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
} */

.main-menu-item-number {
  font-size: 9vmin;
}

.main-menu-item:hover {
  color:#fff;
}
.main-menu-item:active {color:#fff;}
.main-menu-item:visited {color:#fff;}

.popup {
    width:100%;
    height:100%;
    text-align: center;
    background:rgba(255,255,255,0.9);
    position:fixed;
    top:0;left:0;
    font: 0/0 a;
    transform: translateZ(5px);
    display: none;
}

.popup.open {
  display: block;
}

.popup .popup-inner {
    display: inline-block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border: 1px solid #ccc;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    width:50%;min-width:250px;max-width:700px;margin:0 auto;
}

.gameHolder .navigate button, #startscreen .start {line-height:normal;}

.popup .popup-inner h2 {text-transform:uppercase;}
.popup .popup-inner p {
  line-height: 1;
  font-family: 'bariol regular', Helvetica, Arial, sans-serif;
  text-align: center;
}
.popup .popup-inner .btn {margin:5px;}
.popup .popup-inner .btn:active {color:#fff;}

.pipopeli-story-chapter {
  padding-bottom: 2%;
}

/* OVERRULES VIA WIDTH */

/* LAPTOPS
@media screen and (max-device-width: 1400px) {
  h1 {font-size: 5.25vw;}
  h2 {font-size: 4vw;}
  h3 {font-size: 3.2vw;}
  h4 {font-size: 3vw;}
  p {font-size: 3vw;}
  ul {font-size: 3vw;}
} */

/* TABLETS */
@media screen and (max-device-width: 1000px) {

.popup .popup-inner h2 {text-transform:uppercase;}
.popup .popup-inner p {color:#333;margin-bottom:20px;text-align:center;}
.popup .popup-inner .btn {margin:5px;}

  h1 {
    font-size: 6.25vw;
    margin-bottom: 5vw;
    margin-top: 6.25vw;
  }

  h2 {
    font-size: 5vw;
    letter-spacing: .375vw;
    margin: 5vw 4vw 3.75vw 4vw;
  }

  h3 {
    font-size: 3.75vw;
    letter-spacing: .1875vw;
    margin: 4vw 3vw 3.75vw 3vw;
  }

  h4 {
    font-size: 3vw;
    margin: 6.25vw 4vw 1.875vw 4vw;
  }

  .background-gray > div:first-child > h4:first-child {
    margin-top: 1.875vw;
  }

  li + p {
    padding-bottom: 5vw;
  }

  ol > li {
    font-size: 3vw;
    margin: 0 0 2.5vh 0;
    padding: 0 0 0 2.5vw;
  }

  #company > ol {
    margin: 2.5vh 5vw 0 5vw;
  }

  p {
    font-size: 3vw;
    margin: 0 4vw 2.5vw 4vw;
  }

  ul {
    font-size: 3vw;
    margin: 1.25vw 3vw 1.25vw 6vw;
  }
  /* Pad the top of all p elements that follow a ul element */
  ul + p {
    padding-top: 5vw;
  }

  .col-sm-4 > .illustration {
    width: 100%;
  }

  #finalPoints h2 {
    margin-top: -12.5vw;
    font-size: 5vw;
  }
  #finalPoints h3 {
    font-size: 3.15vw;
  }

  #fixed-footer {
    font-size: 6.25vw;
    padding: 5vw 4vw;
  }

  #fixed-footer.finish {
    font-size: 6.25vw;
  }

  .back {
    letter-spacing: .1875vw;
    min-height: 47,5vw;
  }

  .back p {
    font-size: 3vw;
  }

  .background-gray,
  .background-pink,
  .background-white {
    padding-top: 7vw;
    padding-bottom: 7vw;
  }

  .theme {
    padding-top: 0;
    padding-bottom: 0;
  }

  .role-scroller {
    padding-bottom: 0;
  }

  .bg-img {
    background-size: 30px 30px;
  }

  .blue {
    margin: .5vw;
    padding: .875vw 1.25vw;
    font-size: 3vw;
  }
  .blue.active2 {
    border: .25vw solid #0D5E95;
  }

  .btn {
    border-radius: 0;
    font-size: 2.75vw;
    margin-bottom: 15vw;
    margin-top: 7.5vw;
    padding: 1.25vw 2.5vw 1.25vw 2.5vw;
  }
  .btn .glyphicon {
    top: .25vw;
  }

  /* .bubble p {
    font-size: 3vw;
    margin: 1.25vw;
    padding: 3.75vw 3vw 3.75vw 0;
  } */

  .bullet-forms {
    font-size: 3vw;
    margin: 1.25vw 3vw 1.25vw 0;
  }

  .carousel {
    min-height: 41vh;
  }

  .carousel-indicators li {
    width: 2.5vw;
    height: 2.5vw;
    margin: 1vw;
  }

  .carousel-indicators .active {
    width: 2.5vw;
    height: 2.5vw;
    margin: 1vw;
  }

  .carousel-inner {
    height: 60vh;
    margin-bottom: 10vw;
  }

  .circle-container {
    margin: 2.5vw 8vw;
  }

  .content h2 {
    font-size: 3.75vw;
    margin-left: 20vw;
    margin-right: 2.75vw;
  }
  .content p {
    font-size: 3.15vw;
    margin-left: 20vw;
    margin-right: 2.75vw;
  }

  .embed-responsive-16by9,
  .embedly-card {
    margin: 1.25vw 0 7.5vw 0;
    padding-top: 3.15vw;
  }

  .empty {
    width: 2.5vw;
    height: 2.5vw;
    margin: 1vw;
  }

  .endingScreen h1 {
    font-size: 5vw;
    letter-spacing: .375vw;
  }

  .endingScreen img {
    height: 28vh;
  }
  .endingScreen .svg-inline--fa {
    margin-top: 12.5vw;
  }

  .headerrow {
    height: 8.75vw;
    margin-top: 1.25vw;
  }

  .fa.fa-arrow-left {
    font-size: 7.25vw;
    margin-left: 1vw;
  }

  .fa.fa-arrow-right {
    font-size: 7.25vw;
    margin-right: 1vw;
  }

  .fa.fa-home {
    font-size: 7.25vw;
  }

  .flip-container {
    min-height: 47,5vw;
  }

  .flipper h2 {
    font-size: 3.5vw;
    letter-spacing: .375vw;
  }
  .flipper .back h2 {
    font-size: 3.5vw;
    letter-spacing: .375vw;
    margin-top: 7vw;
  }
  .flipper .back p {
    font-size: 3vw;
    margin: 1.25vw .5vw 1.25vw .5vw;
  }

  .flipper .svg-inline--fa {
    font-size: 15vw;
    margin-top: 7.5vw;
    margin-bottom: 7.5vw;
  }

  .footerrow {
    height: 7.5vw;
  }
  .footerrow a {
    font-size: 4.375vw;
  }
  .footerrow #class-name {
    font-size: 3vw;
    font-weight: bold;
  }

  .footerrow a {
    height: 3.15vw;
    width: 3.15vw;
  }
  .footerrow .home span:hover,
  .footerrow .logout span:hover {
    height: 3.28125vw;
    width: 3.28125vw;
  }
  .footerrow .svg-inline--fa {
    font-size: 4.375vw;
  }

  .footer-space {
    border-bottom: 2.5vw solid #293038;
  }

  .form-content {
    font-size: 3vw;
    margin: 7.5vw 6vw 0 4vw;
  }
  /* .form-content button {
    border-radius: 0;
    font-size: 2.75vw;
    padding: 1.25vw 2vw;
  } */
  .form-content li {
    margin-bottom: 7.5vw;
  }
  .form-content p {
    margin: 0 0 1.875vw 0;
  }
  .form-content textarea {
    border: .25vw solid lightgray;
    border-radius: .875vw;
    font-size: 3vw;
    padding: 2.5vw 2vw;
  }

  .front {
    min-height: 47,5vw;
    padding: 7vw .5vw .5vw .5vw;
  }

  .full {
    width: 2.5vw;
    height: 2.5vw;
    margin: 1vw;
  }

  .gameHolder p {
    font-size: 3.15vw;
    /* height: 12.5vw; */
	  line-height: 5.2vw;
    padding: 12.5vw 4vw;
  }
  .gameHolder span.pageNro {
    font-size: 3vw;
    top: 3.75vw;
    padding: .625vw 1.25vw;
  }
  .gameHolder span.timer {
    font-size: 3vw;
    top: 3.75vw;
    padding: .625vw 1.25vw;
  }
  .gameHolder .question {
    line-height: unset;
  }
  .gameHolder .answer1 {
    font-size: 3vw;
    line-height: unset;
    padding: 2.5vw 0 7.5vw 0;
  }
  .gameHolder .navigate button {
    border-radius: 1vw;
    padding: 1.25vw 3.15vw;
    font-size: 3vw;
    margin: 2.5vw 6.25vw;
  }
  .gameHolder .options button {
    border-radius: .5vw;
    padding: 2.5vw .625vw;
    font-size: 3vw;
    margin: .625vw;
  }

  /* .go-nextChapter {
    border-radius: 0;
    font-size: 2.75vw;
    padding: 1.25vw 2vw;
    margin-top: 7.5vw;
    margin-bottom: 15vw;
  } */

  h1 + .illustration,
  h2 + .illustration,
  h3 + .illustration,
  h4 + .illustration,
  p + .illustration {
    height: 32vh;
    margin: 0 3vw 3.75vw 3vw;
    width: auto;
  }

  .help {
    font-size: 3vw;
    margin-top: 3.75vw;
    margin-bottom: 2.5vw;
  }

  .hoxbox {
    margin: 3.75vw 0 3.75vw 0;
  }
  .hoxbox img {
    width: 20vh;
    min-width: 100px;
    height: auto;
  }
  .hoxbox .svg-inline--fa {
    font-size: 25vw;
  }

  .hoxtext {
    margin: 7.5vw 4vw 3.75vw 2vw;
  }
  .hoxtext .illustration {
    height: 11vh;
    margin: 0 !important;
    width: auto;
  }

  .info-bubble {
    margin: 2.5vw 4vw;
  }
  .info-bubble p {
    font-size: 3vw;
    margin: 5vw 2vw;
  }
  .info-bubble img {
    margin: 5vw 2vw 5vw 0;
  }

  .main-menu-item {
    flex-basis: 48%;
    flex-grow: 0;
  }

  .main-menu-item {
    font-size: 4.5vw;
  }
  .main-menu-item:hover {
    text-shadow: 0 0 6.25vw rgba(0,0,0,0.5);
  }

  .navigation {
    width: 10vw;
  }
  .navigation li {
    height: 12.5vw;
    width: 12.5vw;
  }

  .pipopeli-story-chapter {
    padding-bottom: 5%;
  }

  .product-image {
    padding-bottom: 5vw;
    max-height: 62.5vw;
  }

  .rating-title {
    font-size: 3.375vw;
    letter-spacing: .1875vw;
    margin-top: 7.5vw;
  }

  .score-board {
    padding: 2.5vw 0;
  }
  .score-board span {
    font-size: 3vw;
  }

  .svg-inline--fa.single-device-icon {
    font-size: 6vw;
  }

  .svg-inline--fa.single-device-info {
    font-size: 9vw;
  }

  .spacer-40 {
    height: 5vw;
  }
  .spacer-60 {
    height: 7.5vw;
  }

  .star-rating {
    margin-top: 5vw;
  }
  .star-rating .fa-star{
    line-height: 4vw;
    margin: 0 1.875vw;
  }

  .status {
    margin: 1.25vw;
  }

  .svg-inline--fa {
    font-size: 4.375vw;
  }

  .team-select {
    margin: 5vw 0;
  }

  .team-select-headline {
    font-size: 4vw;
    margin-bottom: 5vw;
    margin-top: 6.25vw;
  }

  .violet {
    margin: .5vw;
    padding: .875vw 1.25vw;
    font-size: 3vw;
  }

  .yrityskyla-logo{
    height: 15vw;
    margin-top: 5vw;
    margin-bottom: 7.5vw;
  }
}

.background-white.responsive {
  transition: .3s all ease-in-out;
}

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

  .background-white.responsive .row-img-left {
    flex-direction: column;
  }

  .bubble-image.big {
    width: 65%;
    margin-bottom: 5vw;
  }
}

/* MOBILE PHONES */
@media screen and (max-device-width: 500px) {
	p, ul, ol, ol > li {font-size: 4.5vw;}
	h3, h4 {font-size: 4.5vw;}

  /* .yrityskyla-illustration{
    height: 24vh;
    width: auto;
  } */

  .row-img-left .bubble-image {
    margin-bottom: 5vw;
  }

  .row-img-right .bubble-image {
    margin-top: 5vw;
  }

  .bubble-image {
    max-width: 150px;
  }

  .bubble > p {
    padding: 0;
  }

  .bubble {
    flex-flow: column;
  }

	.bullet-forms {font-size: 4vw;}

  .form-content button,
  .go-nextChapter,
  .btn
  {font-size: 4vw;}

  .form-content button {margin-right: 4vw;}

	/* .main-menu-item a span {font-size: 5vw;line-height: 5vw;} */

	.score-board img, .team-number-img {width: 10vw;max-width: 10vw;}
	.score-board span {display: block;font-size: 4vw;}

	.flipper .svg-inline--fa {font-size: 24vw;margin-top: 5.5vw;margin-bottom: 7.5vw;}
	.flipper h2, .flipper .back h2 {font-size: 7.5vw;letter-spacing: .375vw;}
	.flipper .back p {font-size: 6vw;}




	.carousel-control-prev, .carousel-control-next, .carousel-indicators {transform: translateZ(2px);}

  .carousel-inner {
    height: 75vh;
    margin-bottom: 10vw;
  }

  .rating-title {font-size: 5vw;}
  .svg-inline--fa.single-device-icon {
    font-size: 9vw;
  }
  .svg-inline--fa.single-device-info {
    font-size: 13.5vw;
  }
	.starHolder .star {width: 14%;}
	.background-gray .star, .background-gray .star img {box-shadow: inset 0 0 0 4px rgb(245,245,245);}

	.team-select {width: 100%;}
	.team-select img {width: 11vmin;}

	.endingScreen h1 {font-size: 5vw;}
	.endingScreen .svg-inline--fa {margin-top:10vw;height: 25%;}

	.form-content {margin: 20px 0px 0px 0px;}
	ol {padding: 0px 5px;margin: 10px;}
	ul {padding: 0px 20px;margin: 10px;}

  .hoxbox {height: 150px;margin:0px;}
	.hoxbox .svg-inline--fa {height: 55%;margin: 25px 0px -20px 0px;width: 100%;}
	.hoxtext {margin: 1vh 4vw 3vh 4vw;}
	/* .bubble p {text-align: left;margin-left:-10px !important;font-size:3.5vw;}s */
	.info-bubble p {font-size: 4vw;}

	.info-bubble img {margin: 0px -15px 0px -20px;width: 120%;}
	.info-bubble .col-4 {padding:0px;}

	/* KIINNOSTUKSET/VAHVUUDET */
	.help {font-size: 4.5vw;}
	.violet, .blue {font-size: 3.8vw;}

	/* QUIZ BUTTON STYLES */
	.gameHolder .options button {
		width: 90% !important;
		height: auto !important;
		margin: 5px auto !important;
		display: block !important;
	}

	/* QUIZ3.1 DEFAULT HEIGHT */
	#quiz3 .gameHolder {height:550px;}
	#quiz3 .gameHolder p {height:auto;}

	/* KIERTOTALOUS STYLES */
	#matchmaking .generalHolder ul {margin: 10px 0px 10px 0px;}
	#matchmaking ul li.section .description {font-size: 4.5vw;}
	#matchmaking ul li.section .options ul li {width: 17%;}
	#matchmaking ul li.section .options div.selected {margin-left: 0px;font-size: 4.5vw;font-height:4.5vw;}

	/* PIPOPELI STYLES */
	.pipopeli-container {width: 104% !important;margin:0% -2% !important;}
	.kvartaalitHolder .header {font-size: 6vw;}
	.kvartaali tbody td:nth-child(1) {font-size: 4.5vw !important;}
  .kvartaali tbody td:nth-child(1) span {font-size: 4.5vw !important;}

  .pipopeli-story-chapter {
    padding-bottom: 8%;
  }

}

.locale-select{
  position: fixed;
  top: 10px;
  left: 20px;
  z-index: 999;
}

.empty {
  display: none;
}

.goal-list-themes > ul{
  /* list-style-type: square; */
}

.sales-arguments p {
  margin-top: 1vh;
}

.sales-arguments > ul {
  margin-left: 0;
}

.game-status-goals ol {
  margin-left: 4rem;
}

/* Fancy loader */
.lds-grid {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-grid div {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #9900cc;
  animation: lds-grid 1.2s linear infinite;
}
.lds-grid div:nth-child(1) {
  top: 8px;
  left: 8px;
  animation-delay: 0s;
}
.lds-grid div:nth-child(2) {
  top: 8px;
  left: 32px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(3) {
  top: 8px;
  left: 56px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(4) {
  top: 32px;
  left: 8px;
  animation-delay: -0.4s;
}
.lds-grid div:nth-child(5) {
  top: 32px;
  left: 32px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(6) {
  top: 32px;
  left: 56px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(7) {
  top: 56px;
  left: 8px;
  animation-delay: -0.8s;
}
.lds-grid div:nth-child(8) {
  top: 56px;
  left: 32px;
  animation-delay: -1.2s;
}
.lds-grid div:nth-child(9) {
  top: 56px;
  left: 56px;
  animation-delay: -1.6s;
}
@keyframes lds-grid {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Accordion */
.accordion {
  width: 100%;
  padding: 18px;
  margin-top: 2.5vw;
  text-align: left;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 1px;
  border: none;
  outline: none;
  color: #fff;
  background-color: #00addc;
}
.accordion::after {
  content: '\203A';
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  float: right;
  transform-origin: center center;
  transition: transform 0.2s ease-in-out;
}
.accordion.active::after {
  transform: rotate(90deg);
}

.panel {
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.panel img {
  padding-bottom: 3vw;
}


.company-numeric-list > li::marker {
  font-weight: bold;
}
.company-numeric-list > li > ul,
.company-numeric-list > li > ul > li > ul {
  padding-left: 24px;
}
.company-circle-list {
  list-style-type: disc;
}
.company-dash-list {
  position: relative;
  list-style-type: none;
}
.company-dash-list > li::before {
  /* list-style-type doesn't have dash */
  content: '-';
  position: absolute;
  margin-left: -1em;
}

.panel .challenges {
  margin-top: 4vh;
}
.panel .challenges > ol {
  margin-left: 4vw;
}