.mp-level {
    background-color: #019ee1;
}



#page-container {

    background-image: url(../../img/backs/back-blue.jpg);



    }


    .stage-map-holder.zoomed {
      /* transform: translate(-15%, -65%) scale(1); */
}

.map_overla2y {
  background-image: url(../../img/map-3-o-2.png);
}




#reveal2 {
	display:block;
}

.answered #reveal {
    /* display:block; */
}



.answered.reveal #reveal {
    /*display:none;*/
}



    .aspect-ratio-box {
    height: 0;
    padding-top: 140%;
    position: relative;
    /* transform-origin: center center; */
    /* transform: scale(0.5); */
    height: 100%;
}

.card .aspect-ratio-box {
    /* background-image: url(../../img/card-red-back.jpg); */
    /* background-size: cover; */
    /* background-position: center; */
}
.aspect-ratio-box-inside {
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100%; */
    /* height: 100%; */
    /* padding: 0 10px; */
    right: 0;
    bottom: 0;
    perspective: 400px;
}



.drop_zone {
    position:absolute;
    /* bottom: 0; */
    /*background-color: rgba(255,255,255,.2);*/
    /* height: 100px; */
    width: 12vw;
    /* height: 80%; */
    transition: width 0.8s cubic-bezier(0.15, 0.8, 0.3, 1);
    z-index: 1;
    top: 8vw;
    /* transform: translateY(-50%); */
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* justify-content: center; */
    /* align-items: center; */
    background-size: 8vw;
    background-repeat: no-repeat;
    background-position: center 1vw;
    display: none;
    bottom: 8vw;
}

.drop_zone.hover {
    background-color: rgba(255,255,255,.4);
}


.drop_zone > img {
    width: 100%;
    height:auto;
}
#droppable-true {
    left: -1px;
    /*border-radius: 0 10px 10px 0;*/
    background-image: url(../../img/TRUE-w.png);
    /*background-color: rgba(255, 255, 255, .25);*/
    background-color: rgba(0, 176, 80, 1);
}

div#droppable-true {}

#droppable-false {
    right: -1px;
    /*border-radius: 10px 0 0 10px;*/
    background-image: url(../../img/FALSE-w.png);
    /*background-color: rgba(255, 255, 255, .25);*/
    background-color: rgba(239, 54, 86, 1);

}

.drop_zone_inner {
	/* background: #eee; */
	position: absolute;
	top: 30%;
	left: 30%;
	right: 30%;
	bottom: 30%;
}

.reveal #droppable-true {
    /*background: rgba(0, 176, 80, .9);*/
    width: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.2);
}
.reveal #droppable-false {
    /*background: rgba(239, 54, 86, 0.9);*/
    width: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.2);
}

#droppable-true p,
#droppable-false p {
    color: #fff;
    /* padding: 10px; */
}




.dragnabbit {
    position: absolute;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.15, 0.8, 0.3, 1);
    touch-action: none;
    width: 0;
    height: 0;
    left: 50%;
    top: 50%;
    display: none;
}

.reveal .dragnabbit {
    transition: transform 0.4s cubic-bezier(0.15, 0.8, 0.3, 1), left 0.4s cubic-bezier(0.15, 0.8, 0.3, 1), top 0.4s cubic-bezier(0.15, 0.8, 0.3, 1);
}


body:not(.reveal) .dragnabbit {
    cursor: -webkit-grab;
    cursor: grab;
	
}

.dragnabbit1.last-drag .dragnabbit {
    z-index: 99;
}


body:not(.reveal) .dragnabbit.last-drag.drag {
    transform: scale(1.25);
    
}

body:not(.reveal) .dragnabbit.last-drag.drag .card-inner {
box-shadow: 0 10px 20px rgb(0 0 0 / 40%);
}


body.moving,
body.moving .dragnabbit {
	cursor: none;
}


body:not(.reveal) .dragnabbit.dropped[data-status="true"],
body:not(.reveal) .dragnabbit.last-drag.dropped[data-status="true"] {
    transform: scale(0.5) rotate(-15deg);
}
body:not(.reveal) .dragnabbit.dropped[data-status="false"],
body:not(.reveal) .dragnabbit.last-drag.dropped[data-status="false"] {
    transform: scale(0.5) rotate(15deg);
}


.dragnabbit2.dropped:not(.last-drag) {
    transition: top 0.4s cubic-bezier(0.15, 0.8, 0.3, 1), left 0.4s cubic-bezier(0.15, 0.8, 0.3, 1);
}

.reveal .dragnabbit {
	transition: transform 0.4s cubic-bezier(0.15, 0.8, 0.3, 1), top 0.4s cubic-bezier(0.15, 0.8, 0.3, 1), left 0.4s cubic-bezier(0.15, 0.8, 0.3, 1);
}


.reveal .dragnabbit.dropped,
.reveal .dragnabbit.last-drag.dropped {
    transform: scale(1);
}

body:not(.reveal) .dragnabbit.dropped.hover[data-status="true"] {
    transform: scale(0.65) rotate(-15deg);
    z-index: 99999 !important;
}

body:not(.reveal) .dragnabbit.dropped.hover[data-status="false"] {
    transform: scale(0.65) rotate(15deg);
    z-index: 99999 !important;
}


.card-inner2::after {
    content: ' ';
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate(1px,1px);
    transition: opacity 0.4s cubic-bezier(0.15, 0.8, 0.3, 1), transform 0.4s cubic-bezier(0.15, 0.8, 0.3, 1.2);
}
.card-inner2::after {
    background: #000;
    opacity: 0.5;
    /*box-shadow: 0 0px 30px 5px #000;*/
}

.dragnabbit.rounded .card,
.dragnabbit.rounded .card-inner,
.card-inner2::after,
.card-shadow {
    /* border-radius: 5px; */
}

.card {
    display: inline-block;
    /* color: #292A18; */
    position: absolute;
    /* line-height: 1.1; */
    transform: translate(-50%,-50%) scale(1);
    left: 50%;
    top: 50%;
    /* text-align: center; */
    /* padding: 0em 0 0.125em; */
    /* box-shadow: 0 5px 20px rgb(0 0 0 / 20%); */
    /* border-radius: 5px; */
    width: 30px;
    height: 30px;
    transition: transform 0.4s cubic-bezier(0.15, 0.8, 0.3, 1);
}

.wrong:not(.cardZoom):not(.checked) .flip-card-front:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0.45;
	background-image: url(../../img/wrong.svg);
	background-position: center center;
	width: 200%;
	height: 200%;
	background-size: cover;
	/*background-color: rgba(255,255,255,0.5);*/
}

.zoomed .cardZoom .card {
	width: 200vw;
    height: 200vh;
    background-color: rgba(0,0,0,0.5);
}

.cardZoom .card {
	/* transform: translate(-50%,-50%) scale(2); */
}

.card-inner,
.card-shadow {
    /* background: #ccc; */
    left: 50%;
    top: 50%;
    width: 13vw;
    height: 18vw;
    position: absolute;
    z-index:2;
}


#droppable-false .dragnabbit[data-answer="false"][data-status="false"]:not(.cardZoom) .flip-card-front,
#droppable-true .dragnabbit[data-answer="true"][data-status="true"]:not(.cardZoom) .flip-card-front {
    /* box-shadow: rgb(0 0 0 / 80%) 0px 2px 10px; */
}

#droppable-false [data-answer="false"][data-status="false"] .flip-card-back,
#droppable-true [data-answer="true"][data-status="true"] .flip-card-back {
    /* border: solid 1px #fff; */
}

.dropped .card-inner {
    
}

.card-inner {
    /*transition: transform 0.4s cubic-bezier(0.15, 0.8, 0.3, 1.2);*/
    transform: translate3d(-50%,-50%,0);
    touch-action: none;
    /* border-radius: 5px; */
    /* overflow: hidden; */
    box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
}

.card-shadow {
    transform: translate(-50%,-50%);
    background: #000;
    z-index:1;
    opacity: 0;
    /*
    transition: opacity 0.2s ease-in-out, transform 0.4s cubic-bezier(0.15, 0.8, 0.3, 1.2);
    opacity: 0;
    */
      -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
}

.reveal .card-shadow {
    display: none;
}

.ui-draggable-dragging2 .card-inner::after {
    transform: translate(10%,10%) scale(0.9);
}


.drag2 .card-inner {
    transform: translate3d(-40%,-50%,10px);
}

.drag .card-shadow {
    opacity: 0.25;
}







.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* box-shadow: 0 0px 5px 1px rgba(0,0,0,.1); */
}

.flip-card-front {
    /* background-color: #bbb; */
    color: black;
    border-radius: 0.5vw;
    overflow: hidden;
    background-image: url(../../img/card-backs/BACK-PURPLE.jpg);
    background-size: cover;
    background-position: center;
    transform-origin: 100% 50%;
    transition: transform 0.4s cubic-bezier(0.15, 0.8, 0.3, 1);
    transform-style: preserve-3d;
    z-index: 1;
}

.flip-card-front-background {
    position: absolute;
    width: 100%;
    height: 100%;

}

/*
*/

#droppable-true .dragnabbit .flip-card-back {
	/* transform-origin: 100%; */
}
#droppable-false .dragnabbit .flip-card-back {
	transform-origin: 0%;
}

#droppable-true .dragnabbit.cardZoom .flip-card-back {
    transform: translate(51%, 0) rotateY(0deg);
}

#droppable-false .dragnabbit.cardZoom .flip-card-back {
    transform: translate(51%, 0) rotateY(0deg);
}


#droppable-true .dragnabbit.cardZoom .flip-card-front {
    transform: translate(-51%, 0);
}

#droppable-false .dragnabbit.cardZoom .flip-card-front {
    transform: translate(-51%, 0);
}


.dragnabbit.cardZoom .flip-card-back {
    transform: translate(51%, 0) rotateY(0deg);
}

.dragnabbit.cardZoom .flip-card-front {
    transform: translate(-51%, 0);
}




.flip-card-back {
    /* background-color: #bbb; */
    /* background-image: url(img/tf-cards/1b.jpg); */
    transform: translate(100%, 0) rotateY(180deg);
    color: black;
    border-radius: 0.5vw;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transform-origin: 0 50%;
    transition: transform 0.4s cubic-bezier(0.15, 0.8, 0.3, 1);
    transform-style: preserve-3d;
}


.flip-card-back2 {
    /* background-color: #2980b9; */
    /* color: white; */
    border-radius: 5px;
    overflow: hidden;
    border: solid 1px #fff;
}

.flip-card-back {
    
}


[data-answer="true"] .flip-card-back {
    background: rgb(0, 176, 80);
}
[data-answer="false"] .flip-card-back {
    background: rgb(239, 54, 86);
}


.flip-card {
    perspective: 400px;
    width: 100%;
    height: 100%;
    /* transform: rotateX(-145deg); */
    /* perspective: 400px; */
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.15, 0.8, 0.3, 1);
    /* background-color: #fff; */
}

.dragnabbit[data-status="true"].flipped .flip-card {
    /*transform: rotateY(-180deg);*/
}
.dragnabbit[data-status="false"].flipped .flip-card {
    /*transform: rotateY(180deg);*/
}

.drop_zone_inner {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* right: 0; */
    /* bottom: 0; */
    /* background: #000; */
    /* opacity: 0.5; */
    /* z-index: 9; */
}




















section {
	position: relative;
	z-index: 1; /* needed for setting pseudo-element z-index */
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	font-size: 3rem;
}

section a {
	position: relative;
	display: inline-block;
	outline: none;
	color: #404d5b;
	vertical-align: bottom;
	text-decoration: none;
	white-space: nowrap;
}

section a::before,
section a::after {
	pointer-events: none;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}








/* Slide up */
.link-slideup {
	background: #f9f9f9;
	color: #34495e;
}

.link-slideup a {
	overflow: hidden;
	font-weight: 500;
}

.link-slideup a::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color: rgba(52,73,94,0.2);
	content: '';
	-webkit-transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	-webkit-transform: translateY(95%);
	transform: translateY(95%);
}

.link-slideup a:hover::before,
.link-slideup a:focus::before {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.tf {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.flip-card-front .tf {
    top: 6%;
    left: 20%;
    right: 20%;
    height: 24%;
    background-color: rgba(0,0,0,.2);
    background-image: url(../../img/true-or-false.png);
    border-radius: 0.2vw;
}

.dragnabbit[data-status="false"] .flip-card-front .tf {
	background-image: url(../../img/FALSE-w.png);
}

.dragnabbit[data-status="true"] .flip-card-front .tf {
	background-image: url(../../img/TRUE-w.png);
}


.answered.reveal .dragnabbit[data-answer="true"] .flip-card-front .tf {
	background-image: url(../../img/TRUE-w.png);
}
.answered.reveal .dragnabbit[data-answer="false"] .flip-card-front .tf {
	background-image: url(../../img/FALSE-w.png);
}

.flip-card-back .tf {
    top: 2%;
    left: 0;
    right: 45%;
    height: 32%;
    background-size: 80%;
}

.tf-icon {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    top: 6%;
    left: 0;
    right: 0;
    height: 24%;
    background-image: url(../../img/icons/icon-1.png);
}

.dragnabbit[data-answer="true"] .flip-card-back .tf {
    background-image: url(../../img/TRUE-w.png);	
}

.dragnabbit[data-answer="false"] .flip-card-back .tf {
    background-image: url(../../img/FALSE-w.png);	
}



/*
.reveal [data-answer="true"]  .flip-card-front-background {
    background: rgb(0, 176, 80);
}

.reveal [data-answer="false"]  .flip-card-front-background {
    background: rgb(239, 54, 86);
}
*/

.dragnabbit2.right,
.reveal2 .dragnabbit[data-answer="true"][data-status="true"] .flip-card-front-background,
.reveal2 .dragnabbit[data-answer="false"][data-status="false"] .flip-card-front-background {
    background: rgb(0, 176, 80);
}

.dragnabbit.wrong:not(.cardZoom) .flip-card-front-background,
.reveal2 .dragnabbit[data-answer="true"][data-status="false"] .flip-card-front-background,
.reveal2 .dragnabbit[data-answer="false"][data-status="true"] .flip-card-front-background {
    /* background: rgb(239, 54, 86); */
    /* background-image: url(../../img/card-backs/BACK-RED.jpg); */
}



.dragnabbit.wrong:not(.cardZoom) .flip-card-front {
    background-image: url(../../img/card-backs/BACK-RED.jpg);
}

.flip-card-front-background {}



.statement {
    position: absolute;
    left: .75vw;
    right: .75vw;
    bottom: 2vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75vw;
    line-height: 1;
    letter-spacing: 0.025em;
}




.flip-card-front .statement {
    font-family: 'phosphate_prosolid';
    font-size: 1.2vw;
    border-radius: 0.2vw;
    background: rgba(255,255,255,.9);
    top: 35%;
}

.flip-card-back .statement {
     top: 36%;
     font-size: 0.8vw;
     border-radius: 0.2vw;
     /* background: rgba(255,255,255,.05); */
     font-family: 'helvetica';
     font-weight: 100;
     line-height: 1.2;
}


.flip-card-back .statement p {
	margin: 0;
	padding: 0;
	color: #fff;
	margin-bottom: 0.75em;
	font-family: 'core_rhino_45_regularregular';
}

.flip-card-back .statement p.bonus {
	margin: 0;
	padding: 0;
	color: #fff;
	margin-bottom: 0.25em;
	font-size: 0.8em;
	margin-top: 0.5em;
}

.flip-card-back .statement h3 {
	margin: 0;
	padding: 0;
	color: #fff;
	margin-top: 0.5em;
	margin-bottom: 0.25em;
	font-size: 0.8em;
}

.flip-card-back .statement h3 + p.bonus {
    margin-top: 0;
}

.flip-card-back .statement p:last-child {
	margin-bottom: 0;
}



.copyright {
    position: absolute;
    bottom: 0.15vw;
    color: #fff;
    font-family: sans-serif;
    font-size: 0.5vw;
    /* width:  100%; */
    text-align: right;
    font-weight: 100;
    padding: 0 0.7vw 0 0.4vw;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
}

.copyright img {
	height: 1.5vw;
	display: inline-block;
}

.copyright span {
	display: inline-block;
	margin-left: auto;
}



#intro .page-content-holder {
	/*background-image: url(../../img/slides/Slide6.JPG);*/
}

#outro .page-content-holder {
	/* background-image: url(../../img/slides/Slide9.JPG); */
}






.stage-map {
	/* background-image: url(../../img/maps/map-1.jpg); */
}








#next-game2 {
    right: auto;
    left: -70px;
    display: none;
}

div#welcome {
    background-image: url(../../img/backs/back-pink.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}