/* ------------------------------------------------------------ */
 /* ----------------------- MAIN SETUP */

 html {
 	font-size: 62.5%;
 }

 body {
    background-color: #6390a1 !important;
  }

 *,
 *:before,
 *:after {
 	box-sizing: border-box;
	 font-family: Arial;
 }

 .bOut,
 .bIn {
 	position: relative;
 	left: 0;
 	z-index: 100;
 	width: 100%;
 	height: auto;
 	float: none;
 }

 .bIn {
 	max-width: 1000px;
 	margin: 0 auto;
 	/* padding: 1.3rem; */
 	background-color: #6390a1;
 }

 /***********************************************************************************/
 /*  Grid
/***********************************************************************************/

 .phaseStep {
 	background-color: #6390a1;
 	float: left;
 	width: 100%;
 	padding: 0;
 	margin: 0
 }

 .container {
 	width: 100%;
 	padding: 0;
 	margin: 0 auto
 }

 .column {
 	float: left;
 	padding: 0 1rem;
 	display: block;
 }

 .container {
 	padding: 0 !important;
 	max-width: 120rem
 }

 .pageMedia.column {
 	padding: 0
 }

 .lowGutter {
 	padding-left: .5rem;
 	padding-right: .5rem
 }

 @media screen and (max-width: 468px) {
 	.sm1 {
 		width: 25%
 	}

 	.sm2 {
 		width: 50%
 	}

 	.sm3 {
 		width: 75%
 	}

 	.sm4 {
 		width: 100%
 	}
 }

 @media screen and (min-width: 469px) and (max-width:768px) {
 	.md1 {
 		width: 8.33333333333%
 	}

 	.md2 {
 		width: 16.6666666667%
 	}

 	.md3 {
 		width: 25%
 	}

 	.md4 {
 		width: 33.3333333333%
 	}

 	.md5 {
 		width: 41.6666666667%
 	}

 	.md6 {
 		width: 50%
 	}

 	.md7 {
 		width: 58.3333333333%
 	}

 	.md8 {
 		width: 66.6666666667%
 	}

 	.md9 {
 		width: 75%
 	}

 	.md10 {
 		width: 83.3333333333%
 	}

 	.md11 {
 		width: 91.6666666667%
 	}

 	.md12 {
 		width: 100%
 	}
 }

 @media screen and (min-width: 769px) {
 	.lg1 {
 		width: 8.33333333333%
 	}

 	.lg2 {
 		width: 16.6666666667%
 	}

 	.lg3 {
 		width: 25%
 	}

 	.lg4 {
 		width: 33.3333333333%
 	}

 	.lg5 {
 		width: 41.6666666667%
 	}

 	.lg6 {
 		width: 50%
 	}

 	.lg7 {
 		width: 58.3333333333%
 	}

 	.lg8 {
 		width: 66.6666666667%
 	}

 	.lg9 {
 		width: 75%
 	}

 	.lg10 {
 		width: 83.3333333333%
 	}

 	.lg11 {
 		width: 91.6666666667%
 	}

 	.lg12 {
 		width: 100%
 	}
 }

 /* ------------------------------------------------------------ */
 /* ----------------------- PHASE MANAGEMENT */

 .phasesMask,
 .phasesRail,
 .gamePhase,
 .phaseStep {
 	/* height: 90vh; */
   height: 100vh;
 }

 .phasesMask {
 	overflow: hidden;
 	width: 100%;
 	position: relative;
 }

 .phasesRail {
 	width: 500%;
 	position: relative;
 	-webkit-transition: all 300ms ease;
 	-moz-transition: all 300ms ease;
 	-ms-transition: all 300ms ease;
 	-o-transition: all 300ms ease;
 	transition: all 300ms ease;
 }

 .gamePhase-1 .phasesRail {
 	width: 500%;
 	position: relative;
 	-webkit-transform: translateX(0);
 	-moz-transform: translateX(0);
 	-ms-transform: translateX(0);
 	-o-transform: translateX(0);
 	transform: translateX(0);
 }

 .gamePhase-2 .phasesRail {
 	-webkit-transform: translateX(-20%);
 	-moz-transform: translateX(-20%);
 	-ms-transform: translateX(-20%);
 	-o-transform: translateX(-20%);
 	transform: translateX(-20%);
 }

 .gamePhase-3 .phasesRail {
 	-webkit-transform: translateX(-40%);
 	-moz-transform: translateX(-40%);
 	-ms-transform: translateX(-40%);
 	-o-transform: translateX(-40%);
 	transform: translateX(-40%);
 }

 .gamePhase-4 .phasesRail {
 	-webkit-transform: translateX(-60%);
 	-moz-transform: translateX(-60%);
 	-ms-transform: translateX(-60%);
 	-o-transform: translateX(-60%);
 	transform: translateX(-60%);
 }

 .gamePhase-5 .phasesRail {
 	-webkit-transform: translateX(-80%);
 	-moz-transform: translateX(-80%);
 	-ms-transform: translateX(-80%);
 	-o-transform: translateX(-80%);
 	transform: translateX(-80%);
 }

 .gamePhase {
 	float: left;
 	width: 20%;
 }

 #setupPhase {}

 #searchPhase {}

 #combiPhase {}

 #sancPhase {}

 #resultsPhase {}

 /* ------------------------------------------------------------ */
 /* ----------------------- STEP MANAGEMENT */

 .phaseStep {
 	width: 100%;
 	/* border: 1px solid rgb(203, 221, 170); */
    position: relative;
 	-webkit-transition: all 300ms ease;
 	-moz-transition: all 300ms ease;
 	-ms-transition: all 300ms ease;
 	-o-transition: all 300ms ease;
 	transition: all 300ms ease;
 }

 .phase-1-step-2 .gamePhase-1 .phaseStep,
 .phase-2-step-2 .gamePhase-2 .phaseStep,
 .phase-3-step-2 .gamePhase-3 .phaseStep,
 .phase-4-step-2 .gamePhase-4 .phaseStep,
 .phase-5-step-2 .gamePhase-5 .phaseStep {
 	-webkit-transform: translateY(-100%);
 	-moz-transform: translateY(-100%);
 	-ms-transform: translateY(-100%);
 	-o-transform: translateY(-100%);
 	transform: translateY(-100%);
 }

 .phase-1-step-3 .gamePhase-1 .phaseStep,
 .phase-2-step-3 .gamePhase-2 .phaseStep,
 .phase-3-step-3 .gamePhase-3 .phaseStep,
 .phase-4-step-3 .gamePhase-4 .phaseStep,
 .phase-5-step-3 .gamePhase-5 .phaseStep {
 	-webkit-transform: translateY(-200%);
 	-moz-transform: translateY(-200%);
 	-ms-transform: translateY(-200%);
 	-o-transform: translateY(-200%);
 	transform: translateY(-200%);
 }

 .phase-1-step-4 .gamePhase-1 .phaseStep {
     -webkit-transform: translateY(-300%);
     -moz-transform: translateY(-300%);
     -ms-transform: translateY(-300%);
     -o-transform: translateY(-300%);
     transform: translateY(-300%);
  }

 /* ------------------------------------------------------------ */
 /* ----------------------- TIME MANAGEMENT */

 .timer {
	width: fit-content;
	height: 4%;
	margin: 1% auto 3%;
  visibility: visible;
 }

 .countdown-wrapper-time {
	transform: translate(-50%);
	counter-reset: #fff;
	font-weight: bold;
 }

 .countdown-circle {
	border-color: #fff !important;
	background-color: #0000 !important;
 }

.timerSettings {
  display: none;
}

 /* ------------------------------------------------------------ */
 /* ----------------------- GLOBAL UI */

 .btn {
 	background-color: #161616;
 	width: 120px;
 	text-align: center;
 	padding: 8px 0;
 	color: #fff !important;
 	text-decoration: none;
 	font-size: 12px;
 	border-radius: 3px;
 }

 /* ------------------------------------------------------------ */
 /* ----------------------- SETUP PHASE */

   video {
      width: 100%;
      height: auto;
   }

   .userNameUIs {
      border: 1px solid #000;
      position: relative;
	  width: 70%;
	  height: 100%;
	  margin: 0 auto;
	  background-color: #0000001c;
   }

   .userNameUI {
      margin-bottom: 4rem;
      position: relative;
      display: none;
   }

   .userNameUI:last-child {
      margin-bottom: 0;
   }

   .gameAlloc-a .userNameUI-a,
   .gameAlloc-b .userNameUI-b,
   .gameAlloc-c .userNameUI-c,
   .gameAlloc-d .userNameUI-d {
      display: block;
   }

   .userNameIn {
      position: relative;
	  margin: 2%;
   }

   .introMovCanvas {
       position: relative;
       width: 100%;
       height: auto;
       display: block;
   }

   .introMovUI {
      display: none;
      background-color: rgba(30, 30, 30, 0.802);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }

   .introMovUIactive .introMovUI {
      display: block;
   }

   .introMovUIin {
      max-width: 30%;
      margin: 0 auto;
      position: relative;
      top: 50%;
      margin-top: -2%;
   }

   .introMovUIin .btn {
      width: 46%;
      float: left;
      margin: 0 2%;
   }

   video::-webkit-media-controls-fullscreen-button {
       display: none;
   }

   .introTipsCanvas {
       position: relative;
       width: 100%;
       height: auto;
       display: block;
   }

   .introTipsUI {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       border: 1px solid red;
       overflow: hidden;
       height: 100%;
   }

   .introTipsUIin {
       max-width: 30%;
       margin: 0 auto;
       position: relative;
       top: 50%;
   }

   .introTip {
      padding: 1.3rem;
      border: 1px solid yellow;
      background-color: #f1f1f1;
      position: absolute;
      top: 0;
      -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;
       -ms-transition: all 400ms ease;
       -o-transition: all 400ms ease;
       transition: all 400ms ease;
       -webkit-transform: translateY(-500%);
        -moz-transform: translateY(-500%);
        -ms-transform: translateY(-500%);
        -o-transform: translateY(-500%);
        transform: translateY(-500%);
   }

   .intro-Tip-1 .introTip-1,
   .intro-Tip-2 .introTip-2 {
      -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
   }

   .introMapPlayerStateNo {
      display: block;
   }

   .introMapPlayerStateGo,
   .playerSetUp-a .introMapLoc-a .introMapPlayerStateNo,
   .playerSetUp-b .introMapLoc-b .introMapPlayerStateNo,
   .playerSetUp-c .introMapLoc-c .introMapPlayerStateNo,
   .playerSetUp-d .introMapLoc-d .introMapPlayerStateNo {
      display: none;
   }

   .playerSetUp-a .introMapLoc-a .introMapPlayerStateGo,
   .playerSetUp-b .introMapLoc-b .introMapPlayerStateGo,
   .playerSetUp-c .introMapLoc-c .introMapPlayerStateGo,
   .playerSetUp-d .introMapLoc-d .introMapPlayerStateGo {
      display: block;
   }

   .introMapOverlayOut {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background-color: rgba(0, 0, 0, 0.7);
     display: none;
   }

   body.playerSetUp-a.playerSetUp-b.playerSetUp-c.playerSetUp-d .introMapOverlayOut {
      display: block;
    }

    .introMapOverlay {
        top: 50%;
        position: absolute;
        width: 100%;
    }

    .introMapOverlayTxt {
      width: 30%;
      padding: 3rem;
      border: 1px solid #fff;
      text-align: center;
      color: #fff;

      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    .launchSearchPhaseBtn,
    .introMapOverlayTxt {
      margin: 0 auto;
    }

    .launchSearchPhaseBtn {
      background-color: #fff;
      color: #000 !important;
    }

   .introMapCanvas {
       position: relative;
       width: 100%;
       height: auto;
       display: block;
	   background-color: #6390a1;
   }

   .introMap {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       /* border: 1px solid red; */
       height: 100%;
   }

   .introMapIn {
       width: 100%;
       margin: 0 auto;
       position: relative;
       /* border: 1px solid rebeccapurple; */
       height: 100%;
   }

   .introMapLoc {
      min-width: 20%;
      background-color: #515466;
      position: absolute;
      padding: 0rem 1rem 1rem 1rem;
	  border-radius: 6px;
	  color: #fff;
   }

   .introMapLoc-a {
      top: 72%;
      left: 66%;
   }

   .introMapLoc-b {
      top: 42%;
      left: 12%;
   }

   .introMapLoc-c {
      top: 7%;
      left: 55%;
   }

   .introMapLoc-d {
      top: 43%;
      left: 72%;
   }
   .introMapPlayerStateGo,
   .introMapPlayerStateNo {
       background-color: #000;
       padding: 1rem;
       width: 13rem;
       text-align: center;
	   border-radius: 4px;
   }

   .introMapPlayerStateGo {
       color: #7aff7a;
   }

   .introMapPlayerStateNo {
       color: #ff7a7a;
   }

 /* ------------------------------------------------------------ */
 /* ----------------------- SEARCH PHASE */

 .searchCanvas,
 .searchAssets,
 .foundCanvas,
 .foundAssets {
 	position: relative;
 	width: 100%;
 	height: auto;
 	display: block;
 }

 .searchCanvas .searchAssets.searchAssets-a,
 .searchCanvas .searchAssets.searchAssets-b,
 .searchCanvas .searchAssets.searchAssets-c {
     overflow: hidden;
  }

 .searchCanvas .searchAssets.searchAssets-d {
 	overflow: scroll;
 }

 .foundAssets {
 	/*
 	min-height: 40px;
		*/
 	border: 1px solid #6390a100;

 }

 .gamePhase-2 .searchAssets,
 .gamePhase-2 .foundAssets {
 	display: none;
 }

 .gameAlloc-a .searchAssets-a,
 .gameAlloc-b .searchAssets-b,
 .gameAlloc-c .searchAssets-c,
 .gameAlloc-d .searchAssets-d,
 .gameAlloc-a .foundAssets-a,
 .gameAlloc-b .foundAssets-b,
 .gameAlloc-c .foundAssets-c,
 .gameAlloc-d .foundAssets-d {
 	display: block;
 }

 .searchCanvas img.bgImg {
 	width: 100%;
 	height: auto;
 	display: block;
 }

 .searchCanvas .searchAssets-d img.bgImg {
 	width: 200%;
 	height: auto;
 	max-width: inherit;
 }

 .item img.itemSearchImg,
 .item img.itemImg {
 	width: 100%;
 	height: auto;
 }

   .item img.itemSearchImg,
   .item img.itemMoveImg,
   #searchPhase .searchCanvas .item img.itemImg{
      display: none;
   }

   #searchPhase .searchCanvas .item img.itemSearchImg {
      display: block;
   }

   .item.animating img.itemSearchImg {
      visibility: hidden !important;
   }

   #searchPhase .searchCanvas .item.animating img.itemMoveImg {
      display: block;
      position: absolute;
      max-width: none;
   }

 .searchCanvas .item {
 	position: absolute;
 	width: 10%;
 	height: auto;
 	top: 50%;
 	left: 0;

 	visibility: visible;
 	opacity: 1;
 	transition: opacity 2s linear;
 }

 .searchCanvas .item.found {
 	visibility: hidden;
 	opacity: 0;
 	transition: visibility 0s 2s, opacity 2s linear;
 }

 .foundCanvas .item {
 	float: left;
 	display: none;
	min-height: 40px;
 }

 .foundCanvas .item.found {
 	display: block;
	width: 3.2% !important;
	margin-right: 0.5%;
	margin: 1%;
	display: flex;
	align-items: center;
 }

 .searchCanvas .item .itemMeta {
 	position: relative;
 }

 .searchCanvas .item .itemMeta .txt {
 	position: absolute;
 	z-index: 100;
 	top: 20%;
 	left: 110%;
 	width: 320px;
 	padding: 16px 22px;
 	background: #fff;
 	border-radius: 0 22px 22px 22px;
 	-webkit-box-shadow: -5px 5px 0px -2px #000000;
 	box-shadow: -5px 5px 0px -2px #000000;
 	border: 2px solid #000;

 	font-size: 12px;

 	display: none;

 	-webkit-transform: scale(0.5) translate(-80%, -100%);
 	-moz-transform: scale(0.5) translate(-80%, -100%);
 	-ms-transform: scale(0.5) translate(-80%, -100%);
 	-o-transform: scale(0.5) translate(-80%, -100%);
 	transform: scale(0.5) translate(-80%, -100%);

 	opacity: 0;

 	-webkit-transition: all 230ms ease;
 	-moz-transition: all 230ms ease;
 	-ms-transition: all 230ms ease;
 	-o-transition: all 230ms ease;
 	transition: all 230ms ease;
 }

 .searchCanvas .item .itemMeta .txt p {
 	font-size: 12px;
 	margin: 0;
 }

 .searchCanvas .item.item-infoAlignLeft .itemMeta .txt {
 	-webkit-transform: scale(0.5) translate(80%, -100%);
 	-moz-transform: scale(0.5) translate(80%, -100%);
 	-ms-transform: scale(0.5) translate(80%, -100%);
 	-o-transform: scale(0.5) translate(80%, -100%);
 	transform: scale(0.5) translate(80%, -100%);

 	left: inherit;
 	right: 110%;
 	border-radius: 22px 0 22px 22px;
 	-webkit-box-shadow: 5px 5px 0px -2px #000000;
 	box-shadow: 5px 5px 0px -2px #000000;
 }

 .searchCanvas .item.itemActiveSoon .itemMeta .txt {
 	display: block;
 }

 .searchCanvas .item.itemActive .itemMeta .txt {
 	opacity: 1;

 	-webkit-transform: scale(1) translate(0, 0);
 	-moz-transform: scale(1) translate(0, 0);
 	-ms-transform: scale(1) translate(0, 0);
 	-o-transform: scale(1) translate(0, 0);
 	transform: scale(1) translate(0, 0);
 }

 .searchCanvas .item .itemMeta .txt .txtUI {
 	position: absolute;
 	top: -22px;
 	right: -22px;
 	color: #000;
 	background-color: #fff;
 	border-radius: 50%;
 	width: 26px;
 	height: 26px;
 	text-align: center;
 	line-height: 1.8;
 	border: 2px solid #000;
 	font-weight: 600;
 }

 .searchCanvas .item.item-infoAlignLeft .itemMeta .txt .txtUI {
 	right: inherit;
 	left: -22px;
 }

 .itemTitle,
 .itemShortTxt {
 	display: none;
 }

 /* ------------------------------------------------------------ */
 /* ----------------------- COMBI PHASE */



 .shortTxtCanvas .itemMeta .itemImg,
 .shortTxtCanvas .itemMeta .itemSearchImg,
 .shortTxtCanvas .itemMeta .itemSearchMeta,
 .combiCanvas .itemMeta .itemSearchMeta,
 .foundCanvas .itemMeta .itemSearchMeta,
 .combiStage .itemMeta .itemSearchMeta {
 	display: none;
 }

 .shortTxtCanvas {
 	border: 1px solid lime;
 	min-height: 40px;
 	width: 30%;
 }

 .combiStage {
 	border: 1px solid blueviolet;
 	height: 110px;
 	width: 110px;
 }


 .combiMapCanvas {
      position: relative;
      width: 100%;
      height: auto;
      display: block;
    background-color: #6390a1;
  }

  .combiMap {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      /* border: 1px solid red; */
      height: 100%;
  }

  .combiMapIn {
      width: 100%;
      margin: 0 auto;
      position: relative;
      /* border: 1px solid rebeccapurple; */
      height: 100%;
  }

  .combiWaitingOut {
    position: relative;
    width: 100%;
    top: 50%;
  }

  .combiWaiting {
    position: relative;
    margin: 0 auto;
    width: 33%;
    -webkit-transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     -o-transform: translateY(-50%);
     transform: translateY(-50%);
     text-align: center;
     background-color: rgb(99 144 161 / 88%);
     padding: 2rem;
     border: 1px solid #c7bf95;
  }

  .combiWaiting h3 {
    font-size: 1.8rem;
    color: #fff;
  }

  .combiWaiting p {
    font-size: 1.6rem;
    color: #fff;
  }

 #combiPhase .foundCanvas {
	margin-top: 3.5%;
 }



 .draggable,
 .droppable {
 	border: 1px solid #000;
 	display: inline-block;
 	box-sizing: border-box;
 	vertical-align: top;
 }

 .draggable.clone {
 	background-color: #abe2a5;
 }

 .droppable.active {
 	background-color: #abe2a5;
 }

 .droppable.drop-here {
   background-color: #3498db;
 }

 .active {
 	background-color: #abe2a5;
 }

   .placeholder {
      border-style: dashed;
      background-color: transparent;
   }







.briefingBreakCanvas {
     position: relative;
     width: 100%;
     height: auto;
     display: block;
 }

 .briefingBreakUI {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     /* border: 1px solid red; */
     overflow: hidden;
     height: 100%;
 }

 .briefingBreakUIin {
     /* max-width: 30%; */
     margin: 0 auto;
     position: relative;
     top: 50%;
 }

.briefingBreakCanvas {
  display: none;
}

.briefingBreakMode .briefingBreakCanvas {
  display: block;
}

.briefingBreakMode .gamePhase-3 .uiContainer,
.briefingBreakMode .gamePhase-3 .combineUI,
.briefingBreakMode .gamePhase-3 .foundCanvas {
  display: none;
}




 /* ------------------------------------------------------------ */
 /* ----------------------- SANC PHASE  */

 .sanctionsMask,
 .sanctionsRail {
    position: relative;
    width: 100%;
  }

  .sanctionWrapper {
	width: 99%;
	margin: 0 auto;
  }

 .sanction {
 	padding: 0.75rem;
   	float: left;
 }

 .sanctionIn {
 	padding: 0.8rem;
 	border: 1px solid #0000;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center !important;
	background-color: aliceblue;
	border-radius: 8px;
 }

 .sancPreviewWrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: -1rem;
 }

 .sancPreviewWrapper .sancPreviewPrice {
	font-weight: bold;
 }

 .sancPreviewData .sancPreviewShortTxt {
	min-height: 6rem;
	font-size: 1.25rem;
	margin-bottom: 1.6rem;
 }

 .sanctionsSlideBtn {
 	position: absolute;
 	top: 50%;
 	display: none;
 }

 body.gamePhase-4 .sanctionsSlideBtn {
 	display: block;
 	width: 36px;
 }

 .sanctionsSlideLeft {
 	left: 0;
 }

 .sanctionsSlideRight {
 	right: 0;
 }

 .sanctionTotalScores {
    background-color: darksalmon;
    float: left;
    width: 100%;
 }

 body.sanctionFeedback-y .combiStage,
 .gamePhase-3 .foundCanvas .item.combined .itemSearchImg {
 	background-color: greenyellow;
 }

 body.sanctionFeedback-n .combiStage {
 	animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
 	transform: translate3d(0, 0, 0);
 	backface-visibility: hidden;
 	perspective: 1000px;
 }

 @keyframes shake {

 	10%,
 	90% {
 		transform: translate3d(-1px, 0, 0);
 	}

 	20%,
 	80% {
 		transform: translate3d(2px, 0, 0);
 	}

 	30%,
 	50%,
 	70% {
 		transform: translate3d(-4px, 0, 0);
 	}

 	40%,
 	60% {
 		transform: translate3d(4px, 0, 0);
 	}
 }

 .gamePhase-3 .foundCanvas .item,
 .combiStage .item {
 	-webkit-transition: opacity 300ms ease;
 	-moz-transition: opacity 300ms ease;
 	-ms-transition: opacity 300ms ease;
 	-o-transition: opacity 300ms ease;
 	transition: opacity 300ms ease;
 	opacity: 1;
 }

 .gamePhase-3 .foundCanvas .item.combined {
 	opacity: 0.3;
 	animation: crescendo 0.3s alternate ease-in;
 }

 .combiStage .item.removedSoon {
 	opacity: 0;
 	animation: crescendoLow 0.3s alternate;
 }

 @keyframes crescendo {
 	0% {
 		transform: scale(1);
 	}

 	70% {
 		transform: scale(1.3);
 	}

 	100% {
 		transform: scale(1);
 	}
 }

 @keyframes crescendoLow {
 	0% {
 		transform: scale(1);
 	}

 	90% {
 		transform: scale(1.1);
 	}

 	100% {
 		transform: scale(1);
 	}
 }

 .gamePhase-4 .sanction {
 	display: none;
 }

 .gamePhase-4 .sanction.unlocked {
 	display: block;
	border-radius: 8px;
 }

 .triggerPair {
 	border-top: 1px solid #555;
 }

 .triggerPair:last-child {
 	border-bottom: 1px solid #555;
 }

 .unlockingTrigger {
 	background-color: #ffff0040;
 }

 .sanction .sanctionN,
 .sanction.staged .sanctionY {
 	background-color: grey;
 }

 .sanction.staged .sanctionN,
 .sanction .sanctionY {
 	background-color: black;
 }

 .sanction.revokedOnce .sanctionN {
 	background-color: grey;
 }

 .sanction.staged .sanctionIn {
 	background-color: #60ac5b;
	color: white;
 }

 .sanction.revokedOnce .sanctionIn {
 	background-color: darkgray;
 }

 /* .sancPreviewData .sanctionN {
   display: none;
 } */

 .hide-N .sancPreviewData .sanctionN ,
 .hide-Y .sancPreviewData .sanctionY {
   display: none;
 }

 /* ------------------------------------------------------------ */
 /* ----------------------- DEV BOX */

 .toolsBtn {
 	position: fixed;
 	bottom: 20px;
 	right: 20px;

 	background-color: black;
 	width: 100px;
 	text-align: center;
 	padding: 8px 0;
 	color: #fff !important;
 	text-decoration: none;
 	font-size: 12px;
 	border-radius: 3px;

 	-webkit-transition: all 230ms ease;
 	-moz-transition: all 230ms ease;
 	-ms-transition: all 230ms ease;
 	-o-transition: all 230ms ease;
 	transition: all 230ms ease;

   display: none !important;
 }

 .showTools .toolsBtn {
 	right: 320px;
 }

 .toolsBtn {
 	position: fixed;
   z-index: 400;
 	bottom: 20px;
 	right: 20px;
 }

 .devBox {
 	position: fixed;
 	bottom: 0;
 	right: 0;
 	z-index: 200;
 	background-color: #000;
 	color: #fff;
 	width: 300px;
 	height: 550px;
 	padding: 0 20px 20px 20px;
 	overflow: scroll;
 	opacity: 0.8;
 	-webkit-transition: all 230ms ease;
 	-moz-transition: all 230ms ease;
 	-ms-transition: all 230ms ease;
 	-o-transition: all 230ms ease;
 	transition: all 230ms ease;

 	-webkit-transform: translateX(100%);
 	-moz-transform: translateX(100%);
 	-ms-transform: translateX(100%);
 	-o-transform: translateX(100%);
 	transform: translateX(100%);
 }

 .showTools .devBox {
 	-webkit-transform: translateX(0);
 	-moz-transform: translateX(0);
 	-ms-transform: translateX(0);
 	-o-transform: translateX(0);
 	transform: translateX(0);
 }

 .devBox h6,
 .devBox p {
 	font-size: 12px !important;
 	line-height: 1;
 	margin: 0;
 }

 .devBox h6 {
 	margin-top: 20px;
 	margin-bottom: 10px;
 }

 .devBox .dev-radioOption p {
 	display: inline-block;
 	margin: 0 0 0 6px;
 	position: relative;
 	top: -2px;
 }

 /* --------------------- DEV BOX END */
 /* ------------------------------------------------------------ */

 /***********************************************************************************/
 /*  Styling Jakob
/***********************************************************************************/


.countdown-wrapper {
	position: relative;
	transform: translate(-50%);
}


/* --------------------- PHASE 1 ------------------------------------------*/

#setupPhase .phaseStep-1 {
	background-color: #6390a1;
	/* z-index: -2;  auskommentiert von Ben, macht Username Input Felder unerreichbar. */
}

#setupPhase .menuBG {
	display: block;
	opacity: 0.2;
}

.menuBG {
	position: absolute;
	left: 0;
	z-index: -1;
}

#setupPhase form .nameInput {
	margin-bottom: 1%;
 	height: 3vh;
	user-select: text !important;
}

#setupPhase .logoContainer {
	display: flex;
	justify-content: space-around;
	margin-bottom: 4%;
	width: 30%;
	margin: 0 auto;
}

#setupPhase .submitNameBtn {
	background-color: #60ac5b;
	color: #000 !important;
	font-weight: bold;
	letter-spacing: 0.1rem;
}


 /* --------------------- PHASE 2 ------------------------------------------*/

.quitSearchUI {
	border-radius: 0px !important;
	font-size: 1rem;
	right: 0px;
	position: fixed;
}

#searchPhase {
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.searchUI {
	display: flex;
	margin-bottom: 2%;
	justify-content: space-between;
	width: 100%;
	align-items: center;
	top: 2.25%;
	position: absolute;
	z-index: 10;
}

.searchProgressBar {
	margin-left: 1.7%;
}

.quitSearchUI {
	height: fit-content;
	padding: 0.5%;
	/* margin-right: 1%; */
  width: 27rem;
}

#searchPhase p {
	text-align: center;
}

#searchPhase .searchProgressBar {
	border-radius: 4px;
	background-color: #505468e0;
	padding: 0.75rem;
}

#searchPhase .progressUnit {
	width: 1.5rem;
	height: 1.5rem;
	margin: 0 0.4rem !important;
}

#searchPhase .timer {
	left: 50%;
/*	transform: translateX(-50%); */
	position: fixed !important;
}

#searchPhase .foundCanvas {
	display: none;
}

#searchPhase .searchAssets .overlayModeUIclose {
	background-color: #fff;
	border-radius: 6px;
}

#searchPhase .searchAssets .itemType-media.inOverlay {
	display: flex !important;
	flex-direction: column !important;
	width: 20% !important;
}

#searchPhase .searchAssets .itemType-target.inOverlay {
	width: 20% !important;
}

#searchPhase .phaseStep-2 .itemType-info.inOverlay.itemActive {
	display: flex !important;

}

#searchPhase .phaseStep-2 .itemType-target.inOverlay.itemActive {
	width: 20%;
}

#searchPhase .phaseStep-2 .searchAssets-a .itemType-info.inOverlay.itemActive .itemOverlayImg {
	width: 22rem;
}

#searchPhase .phaseStep-2 .searchAssets-b .itemType-info.inOverlay.itemActive .itemOverlayImg {
	width: 22rem;
}

#searchPhase .phaseStep-2 .searchAssets-c .itemType-info.inOverlay.itemActive .itemOverlayImg {
	width: 16rem;
}

#searchPhase .phaseStep-2 .searchAssets-d .itemType-info.inOverlay.itemActive .itemOverlayImg {
	width: 20rem;
}

#searchPhase .phaseStep-2 .item-302.itemType-info.inOverlay.itemActive .itemOverlayImg,
#searchPhase .phaseStep-2 .item-2098.itemType-info.inOverlay.itemActive .itemOverlayImg {
	width: 18rem;
}

#searchPhase .item-695 .itemSearchImg,
#searchPhase .item-2086 .itemSearchImg {
	transform: rotate(-34deg);
}

#searchPhase .itemMeta .itemImg {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 8% !important;
}

.searchCanvas .inOverlay .itemSearchImg {
	display: none !important;
}

.searchCanvas .searchAssets-a .itemTitle {
	width: max-content;
	margin: 0 auto;
	transform: translateX(0%) !important;
	font-size: 2rem;
	font-weight: bold;
}

.searchCanvas .searchAssets-b .itemTitle {
	width: max-content;
	margin: 0 auto;
	transform: translateX(0%) !important;
	font-size: 2rem;
	font-weight: bold;
}

.searchCanvas .searchAssets-c .itemTitle {
	width: max-content;
	margin: 0 auto;
	transform: translateX(0%) !important;
	font-size: 2rem;
	font-weight: bold;
}

.searchCanvas .searchAssets-d .itemTitle {
	width: max-content;
	margin: 0 auto;
	font-size: 2rem;
	font-weight: bold;
}

.searchCanvas .searchAssets-a .itemShortTxt {
	margin: 0 auto;
	transform: translateX(0%) !important;
	font-size: 1.25rem;
}

.searchCanvas .searchAssets-b .itemShortTxt {
	margin: 0 auto;
	transform: translateX(0%) !important;
	font-size: 1.25rem;
}

.searchCanvas .searchAssets-c .itemShortTxt {
	margin: 0 auto;
	transform: translateX(0%) !important;
	font-size: 1.25rem;
}

.searchCanvas .searchAssets-d .itemShortTxt {
	margin: 0 auto;
	font-size: 1.25rem;
}

.item-149.inOverlay .itemImg,
.item-2150.inOverlay .itemImg {
	width: 6rem !important;
}


 /* --------------------- PHASE 3 ------------------------------------------*/

#combiPhase .phaseStep-2 {
	background-color: #6390a1;
	}

.btnQuitPhase-3 {
	border-radius: 0px !important;
	font-size: 1rem !important;
	right: 0px;
	position: fixed;
	border-radius: 0px !important;
  }

.uiContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center !important;
	margin-top: 2%;
}

#combiPhase .phaseStep-2 .comboItemTitle {
	font-size: 1.75rem;
}

#combiPhase .phaseStep-2 .comboItemTxt{
	font-size: 1.5rem;
}

.textContainer {
    width: 350px;
    padding: 10px;
    margin-top: -30px;
}

.textLeft {
    background-color: white;
    height: 15rem;
    border-radius: 14px 0 0 14px;
}

.textRight {
    background-color: white;
    height: 15rem;
    border-radius: 0 14px 14px 0px;
}

.itemMerger {
    background-color: #515466;
    height: autp;
    width: 29%;
    border-radius: 14px 14px 0px 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.itemLeft {
    background-color: white;
    margin: 20px 10px 20px 20px;
    width: 110px;
    border-radius: 14px;
    height: 110px;
}

.itemRight {
    background-color: white;
    margin: 20px 20px 20px 10px;
    width: 110px;
    border-radius: 14px;
    height: 110px;
}

#combiPhase .btn {
	background-color: #161616;
	width: 29%;
	text-align: center;
	padding: 8px 0;
	color: #fff !important;
	text-decoration: none;
	font-size: 14px;
	border-radius: 0px 0px 14px 14px;
	margin: 0 auto;
}

.droppable .item{
	height: 11rem !important;
	width: 11rem !important;
	border-radius: 14px !important;
	margin-top: -1px !important;
	margin-left: -1px !important;
	background-color: white;
}

#combiPhase .foundCanvas .found {
	background-color: #ffffffde;
	min-height: 7rem !important;
	width: 7rem !important;
	border-radius: 3px;
	margin: 0.75%;
	float: left;
	align-content: center;
	display: grid;
	border-width: 1px;
	border-color: black;
	border-style: solid;
}

.shortTxtCanvas {
	display: none;
}

.combiStage .found {
	align-content: center;
	display: grid;
  }

  .itemMerger .itemMeta {
	display: flex;
	justify-content: center;
  }

  .itemMerger img {
	width: 90% !important;
  }

  .itemWrapper {
	margin: 0 auto;
	width: 93.4%;
  }

#combiPhase .foundAssets img {
	margin-left: -12%;
	max-width: 124%;
	width: auto;
}

.itemMerger .item-149 img,
.itemMerger .item-2150 img {
	width: 34% !important;
}

.itemMerger .item-175 img,
.itemMerger .item-2138 img {
	width: 70% !important;
}

.itemMerger .item-139 img,
.itemMerger .item-2158 img {
	width: 60% !important;
}

.itemMerger .item-304 img,
.itemMerger .item-2096 img {
	width: 77% !important;
}

#combiPhase .foundAssets .item-128 img,
#combiPhase .foundAssets .item-2168 img {
	max-width: 89% !important;
	transform: rotate(5deg);
	margin-left: 8% !important;
}

#combiPhase .foundAssets .item-126 img,
#combiPhase .foundAssets .item-2170 img {
	max-width: 89% !important;
	transform: rotate(5deg);
	margin-left: 8% !important;
}

#combiPhase .foundAssets .item-153 img,
#combiPhase .foundAssets .item-2146 img {
	max-width: 86% !important;
	transform: rotate(5deg);
	margin-left: 8% !important;
}

#combiPhase .foundAssets .item-197 img,
#combiPhase .foundAssets .item-2116 img {
	max-width: 88% !important;
	transform: rotate(5deg);
	margin-left: 8% !important;
}

#combiPhase .foundAssets .item-193 img,
#combiPhase .foundAssets .item-2120 img {
	max-width: 87% !important;
	transform: rotate(5deg);
	margin-left: 8% !important;
}

#combiPhase .foundAssets .item-298 img,
#combiPhase .foundAssets .item-2102 img {
	max-width: 89% !important;
	transform: rotate(5deg);
	margin-left: 8% !important;
}

#combiPhase .foundAssets .item-175 img,
#combiPhase .foundAssets .item-2138 img {
	max-width: 74% !important;
	margin-left: 8% !important;
}

#combiPhase .foundAssets .item-149 img,
#combiPhase .foundAssets .item-2150 img {
	max-width: 35% !important;
	margin-left: 26% !important;
	transform: rotate(-40deg) !important;
}

#combiPhase .foundAssets .item-151 img,
#combiPhase .foundAssets .item-2148 img {
	max-width: 110% !important;
	margin-left: -4% !important;
}

#combiPhase .foundAssets .item-139 img,
#combiPhase .foundAssets .item-2158 img {
	max-width: 63% !important;
	margin-left: 17%;
}

#combiPhase .foundAssets .item-189 img,
#combiPhase .foundAssets .item-2124 img {
	max-width: 90% !important;
	margin-left: 8% !important;
}

#combiPhase .foundAssets .item-304 img,
#combiPhase .foundAssets .item-2096 img {
	max-width: 79% !important;
	margin-left: 8% !important;
}

#combiPhase .foundAssets .item-276 img,
#combiPhase .foundAssets .item-2112 img {
	max-width: 87% !important;
	margin-left: 8% !important;
}

#combiPhase .foundAssets .item-278 img,
#combiPhase .foundAssets .item-2110 img {
	max-width: 108% !important;
	margin-left: -6% !important;
}

#combiPhase .foundAssets .item-296 img,
#combiPhase .foundAssets .item-2104 img {
	max-width: 85% !important;
	margin-left: 8% !important;
}

#combiPhase .foundAssets .item-195 img,
#combiPhase .foundAssets .item-2118 img {
	max-width: 85% !important;
	margin-left: 8% !important;
}



 /* --------------------- PHASE 4 ------------------------------------------*/

 .btnQuitPhase-4 {
	border-radius: 0px !important;
	font-size: 1rem;
	float: right;
	right: 0px;
	position: fixed;
 }

 #sancPhase .phaseStep-2 {
	background-color: #6390a1;
}

 #sancPhase .sanctionTriggerPairs {
	display: none;
 }

 #sancPhase .sancPreviewData {
	min-height: 8.5rem;
 }


#sancPhase .phaseStep-1 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
.hudContainer {
	width: 99%;
	margin: 0 auto 4rem auto;
	z-index: 3;
	position: relative;
   }

.sanctionIn  .sanctionTitle {
	font-size: 1.2rem;
	font-weight: bold;
}

.sanctionIn  .sanctionPrice {
	font-size: 1.2rem;
	font-weight: bold;
	margin-left: auto;
	letter-spacing: 0.05rem;
}

.sanctionIn  .sanctionNum {
	font-size: 1.2rem;
	font-weight: bold;
	margin-right: 1rem;
}

.sancPreviewUI {
	width: 106%;
	margin-left: -3%;
	margin-top: -4px;
}

.contIcon {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin-top: 2rem;
	min-height: 95px !important;
}

 .contWaste {
	background-color: #515466;
	border-radius: 8px;
    height: 9.5rem;
    width: fit-content;
	padding-right: 2rem;
	padding-left: 2rem;
  margin-right: 0.4rem;
}

.wScale {
	height: 8rem !important;
	width: 25rem !important;
   position: relative;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 48%;
}

 .contScale {
 	background-color: #515466;
 	border-radius: 8px;
	height: 9.5rem;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center !important;
  margin-right: 0.4rem;
  margin-left: 0.4rem;
 }

 .scale {
	height: auto;
	width: 21%;
	margin-left: 1.8rem;
	margin-right: 1.8rem;
}

 .contBudget {
 	background-color: #515466;
 	height: 9.5rem;
	width: 9.5rem;
 	display: grid;
 	align-content: center;
 	border-radius: 8px;
   margin-right: 0.4rem;
   margin-left: 0.4rem;
 }

 .bScale {
	height: 7.5rem;
	width: 7.5rem;
    position: relative;
	transform: translate(-50%, -50%);
	left: 50%;
	top: 50%;
}

 .contText {
 	background-color: #515466;
 	color: #fff;
 	height: 9.5rem;
 	border-radius: 8px;
   margin-left: 0.4rem;
 }

 h3{
	margin-top: 1rem;
 }

 .desc {
	margin-top: 0.8rem;
 }

 .sancPreviewTitle h3 {
	font-size: 1.35rem;
	margin-bottom: 2.5px;
 }

 .sancPreviewPrice {
	font-size: 1.35rem;
	margin-top: 1rem;
 }

 /* --------------------- PHASE 5 ------------------------------------------*/

#resultsPhase .phaseStep {
	/* background-color: #6390a1; */
}

#resultsPhase .resultContentWrapper {
  background-color: #6390a1;
}

.resultsBG {
	z-index: 1;
	position: absolute;
	opacity: 0.6;
	display: none;
}

.resultContentWrapper{
	display: flex;
	flex-direction: column;
}

.hWrapper {
	margin: 5% auto auto;
	width: fit-content;
	z-index: 8;
	color: white;
	position: relative;
	font-size: 2rem;
}

.scaleWrapper {
	display: flex;
	flex-direction: column;
	width: min-content;
}

.statWrapperTop {
	display: flex;
	flex-direction: row;
}

.statWrapperBot {
	display: flex;
	flex-direction: row;
}

#resultsPhase .contIcon {
	justify-content: center;
	background-color: #515466;
	border-radius: 8px;
	margin: 0px !important;
	height: auto !important;
}

#resultsPhase .column {
padding: 0;
}

#resultsPhase .contWaste {
	margin: 7.5px 1.8rem;
	width: 25rem;
}

#resultsPhase .bScale {
	transform: none;
	left: auto;
	top: auto;
	height: 7.5rem;
	width: 7.5rem;
}

#resultsPhase .contScale {
	margin: 7.5px 1.8rem;
	width: 25rem;
	justify-content: flex-start;
}

#resultsPhase .scale {
	margin: 0;
	width: 100%;
}

#resultsPhase .natureScale {
	margin: 0 1rem;
}

#resultsPhase .contBudget {
	margin: auto 2rem auto 1rem;
	height: 7.5rem;
	width: 7.5rem;
}

#resultsPhase .contText {
	width: 50%;
	margin: 0 auto;
}

.resultTextWrapper {
	background-color: #515466;
	border-radius: 8px;
	margin-left: 15px;
	color: white;
	padding: 0rem 2rem;
	width: inherit;
}

.timeCombined {
	margin: auto 2rem auto 1rem;
	height: 7.5rem;
}

.time {
	height: 7.5rem;
width: 7.5rem;
position: relative;
}

.rankingIn p {
	font-size: 1.25rem;
}

.rankingIn h2 {
	font-size: 1.75rem;
}

#resultsPhase .contIcon {
	flex-direction: column;
}

 /***********************************************************************************/
 /*  END Styling Jakob
/***********************************************************************************/