*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-align: center;
}
.scene {
	min-height: 637px;
}
.gameSlideup > *{
  display: none;
}
.gameSlideup, .gameSlidedown {
	overflow: hidden;
	transition: max-height .5s ease-in-out;
	max-height: 0;
	margin: 0 auto;
}
.gameSlidedown {
	display: block;
	border-radius: 4px;
	max-height: 637px;
	/*max-width: 1279px;*/
	position: relative;
	top: 10%;
	/*width: 90%;*/
}
.gameSlidedown img{
	max-width: 56vw;
	display: block;
	margin: auto;
}
.menu{
	position: absolute;
	bottom: 37%;
	width: 100%;
	height: 10%;
}
#introScene > .menu{
	position: absolute;
	bottom: 2%;
	width: 100%;
	height: 10%;
}
.mapContainer > div.menu{
  position: absolute;
  top: 2.5vw;
  width: 12vw;
  height: 35vw;
  left: 1.5vw;
}

.button{  
 max-width: 177px;
 max-height: 78px;
 width: 30%;
 height: 100%;
 margin-bottom: 10%;
 color: #FFF;
 background-size: contain;
 background-repeat: no-repeat;
 background-color: transparent;
 border: none;
 outline: none;
 cursor: pointer;
 position: relative;
 transition: all 0.3s ease-in-out;
}
.button:hover{
  transform: scale(1.1);
}
#btn_start{
	background-image: url(./images/start_button.png);
	width: 10vw;
	box-shadow: 1px 2px 5px #333;
	height: 2.5vw;
	border-radius: 25px;
}
#randcolours{
  background-image: url(./images/colors_button.png);
  width: 10vw;
  height: 2.5vw;
  box-shadow: 1px 2px 5px #333;
  border-radius: 25px;
}
#assemble{
  background-image: url(./images/order_button.png);
  width: 10vw;
  height: 2.5vw;
  box-shadow: 1px 2px 5px #333;  
  border-radius: 25px;
}
#btn_next{
	background-image: url(./images/next_button.png);
	width: 10vw;
	box-shadow: 1px 2px 5px #333;
	height: 2.5vw;
	border-radius: 25px;
	background-size: contain;
	background-position: center;
}
#nextguide{
	background-image: url(./images/next_button.png);
	width: 10vw;
  height: 2.5vw;
	box-shadow: 1px 2px 5px #333;
	border-radius: 25px;
	background-size: contain;
	background-position: center;
}
#reset{
  background-image: url(./images/back_button.png);
  width: 10vw;
  height: 2.5vw;
  box-shadow: 1px 2px 5px #333;
  border-radius: 25px;
  position: absolute;
  bottom: 1.5vw;
  left: 1vw;
}
.mapContainer {
 	/*margin: 10px;*/
	position: relative;
	display: inline-block;
	padding: 0;
	box-sizing: border-box;
	text-align: center;
	/*width: 90%;*/
	/*max-width: 1278px;*/
	overflow: hidden;
}
.mapContainer img{
	max-width: 56vw;
	display: block;
}
#msgBox{
  max-width: 30vw;
  position: relative;
  bottom: 9vw;
  font-size: .8vw;
  font-family: Raleway, sans-serif;
  margin: 0 auto;
  text-align: justify;
  left: 12%;
}
.geometrics{
	/*transform: scale(50%);*/
	filter: drop-shadow(rgba(0, 0, 0, 0.5) 3px 0px 3px);
	z-index: 3;
}
#triangle1 {
	width: 0;
	height: 0;
	border-top: 5vw solid transparent;
	border-bottom: 5vw solid transparent;
	border-right: 5vw solid red;
	
	position: absolute;
	left: 7.3vw;
	top: 16vw;
}

#triangle2 {
	width: 0px;
	height: 0px;
	border-left: 5vw solid transparent;
	border-right: 5vw solid transparent;	
	border-top: 5vw solid red;
	position: absolute;
	left: 2.3vw;
	top: 16vw;
}

#triangle3 {
	width: 0px;
	height: 0px;
	border-top: 2.5vw solid transparent;
	border-bottom: 2.5vw solid transparent;	
	border-left: 2.5vw solid red;
	position: absolute;
	left: 4.8vw;
	top: 18.5vw;
}

#triangle4 {
	width: 0px;
	height: 0px;
	border-left: 2.5vw solid transparent;
	border-right: 2.5vw solid transparent;	
	border-bottom: 2.5vw solid red;
	position: absolute;
	left: 7.3vw;
	top: 23.5vw;
}

#triangle5 {
	width: 0;
	height: 0;
	border-bottom: 5vw solid red;
	border-right: 5vw solid transparent;
	position: absolute;
	left: 2.3vw;
	top: 21vw;
}

#square {
	width: 0;
	height: 0;
	border: 2.5vw solid transparent;
	border-bottom-color: var(--color, red);
	position: absolute;
	top:  18.5vw;
	left: 4.8vw;
}

#square:after {
	content: '';
	position: absolute;
	left: -2.5vw;
	top: 2.5vw;
	width: 0;
	height: 0;
	border: 2.5vw solid transparent;
	border-top-color: var(--color, red);
}

#parallelogram {
	width: 2.5vw;
	height: 7.5vw;
	position: absolute;
	left: 2.3vw;
	top: 16vw;
}
.top-triangle {
    width: 0;
    height: 0;
    border-bottom: 2.5vw solid red;
    border-right: 2.5vw solid transparent;
}

.middle-square {
    width: 2.5vw;
    height: 2.5vw;
    background: red;
}

.bottom-triangle {
    width: 0px;
    height: 0px;
    border-top: 2.5vw solid red;
    border-left: 2.5vw solid transparent;
}

#options {
	display: inline;
	position: fixed;
	top: 20px;
	right: 20px;
}
.gameSlidedown > .video {
	margin: 10px auto;
	width: 100%;
	position: absolute;
	display: inline-block;
	top: 20%;
	left: 0;
	right: 0;
}

#gabaritos{
  position: absolute;
  top: 3vw;
  left: 22vw;
}

#guia5{
	background-image: url(./images/gabarito/gabarito05.png);
	width: 30vw;
	height: 30vw;
	background-size: cover;
}
#guia6{
	background-image: url(./images/gabarito/gabarito06.png);
	width: 30vw;
	height: 30vw;
	background-size: cover;
}
#guia7{
	background-image: url(./images/gabarito/gabarito07.png);
	width: 30vw;
	height: 30vw;
	background-size: cover;
}
#guia8{
	background-image: url(./images/gabarito/gabarito08.png);
	width: 30vw;
	height: 30vw;
	background-size: cover;
}
#guia9{
	background-image: url(./images/gabarito/gabarito09.png);
	width: 30vw;
	height: 30vw;
	background-size: cover;
}
#guia10{
	background-image: url(./images/gabarito/gabarito10.png);
	width: 30vw;
	height: 30vw;
	background-size: cover;
}
#guia11{
	background-image: url(./images/gabarito/gabarito11.png);
	width: 30vw;
	height: 30vw;
	background-size: cover;
}
#guia12{
	background-image: url(./images/gabarito/gabarito12.png);
	width: 30vw;
	height: 30vw;
	background-size: cover;
}
#guia13{
	background-image: url(./images/gabarito/gabarito13.png);
	width: 30vw;
	height: 30vw;
	background-size: cover;
}
#guia14{
	background-image: url(./images/gabarito/gabarito14.png);
	width: 30vw;
	height: 30vw;
	background-size: cover;
}
#guia15{
	background-image: url(./images/gabarito/gabarito15.png);
	width: 30vw;
	height: 30vw;
	background-size: cover;
}
#guia16{
	background-image: url(./images/gabarito/gabarito16.png);
	width: 30vw;
	height: 30vw;
	background-size: cover;
}

@media only screen and (min-width: 700px) {
	.scene{
		position: absolute;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0,0,0,.7);
	}
	.mapContainer img {
	    max-width: 100%;
	    display: block;
	}
	.gameSlidedown {
	    display: block;
	    border-radius: 4px;
	    max-height: 637px;
	    max-width: 1279px;
	    position: relative;
	    top: -1%;
	    width: 100%;
	    height: 100%;
	}
	.gameSlidedown img {
	    max-width: 100%;
	    height: 100%;
	    display: block;
	    margin: auto;
	}
	#gabaritos {
	    position: absolute;
	    top: 9vw;
	    left: 35vw;
	}
	#video{
		width: 60%;
	}
	#introScene > .menu {
	    position: absolute;
	    margin-bottom: 15%;
	    width: 100%;
	    height: 10%;
	}
}
@media only screen and (orientation: portrait) {
	#LandscapeMsg{
		display: block !important;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		/*background-color: #fff;*/
		z-index: 1;
	}

	#LandscapeMsg h2{
		padding-top: 3em;
	}

	#landscapeMode{
		background-image: url(./images/landscapeMode.png);
		background-repeat: no-repeat;
		width: 808px;
		height: 147px;
		margin: auto;
		position: absolute;
		top: 0;
		bottom: 15%;
		left: 0;
		right: 0;
		z-index: 10000;	
	}
}
#LandscapeMsg{
	display: none;
}