@font-face {
    font-family: 'DosisBold';
    src: url('../fonts/dosis-bold.eot');
    src: url('../fonts/dosis-bold.eot') format('embedded-opentype'),
         url('../fonts/dosis-bold.woff') format('woff'),
         url('../fonts/dosis-bold.ttf') format('truetype'),
         url('../fonts/dosis-bold.otf') format('opentype'),
         url('../fonts/dosis-bold.svg#DosisBold') format('svg');
}
@font-face {
    font-family: 'DosisRegular';
    src: url('../fonts/dosis-regular.eot');
    src: url('../fonts/dosis-regular.eot') format('embedded-opentype'),
         url('../fonts/dosis-regular.woff') format('woff'),
         url('../fonts/dosis-regular.ttf') format('truetype'),
         url('../fonts/dosis-regular.otf') format('opentype'),
         url('../fonts/dosis-regular.svg#DosisRegular') format('svg');
}

/*-------------------------------GENERAL----------------------------------*/
#OED {
	position: relative;
	width: 1024px;
	height: 768px;
	overflow: hidden;
}

#page-cover,
#page-select,
#page-game,
#page-score {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-size: 100%;
	background-repeat: no-repeat;
}

#page-select,
#page-game,
#page-score {
	display: none;
}

#page-cover { background-image: url('../imgs/img_capa.png'); }
#page-select { background-image: url('../imgs/img_bg.png'); }
#page-game { background-image: url('../imgs/img_tabuleiro_v3.png'); }
#page-score { background-image: url('../imgs/img_bg_feedback.png'); }

/*-------------------------------COVER----------------------------------*/
#enunciado {
	display: block;
	margin: 0 auto;
	margin-top: 180px;
	width: 400px;
	height: 122px;
	text-align: left;
}
#enunciado > p {
	padding: 0 40px;
	font-family: DosisBold, Arial, sans-serif;
	font-size: 23px;
	line-height: 29px;
	color: #00acd7;
	color: white;
}
#btn-start {
	display: block;
	margin: 0 auto;
	width: 160px;
	height: 160px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url('../imgs/btn_iniciar_up.png');
	text-align: center;
	cursor: pointer;
}
#btn-start:active {
	background-image: url('../imgs/btn_iniciar_down.png');
}
#btn-start > p {
	padding: 66px 0;
	font-family: DosisBold, Arial, sans-serif;
	font-size: 30px;
	color: #00acd7;
}

/*-------------------------------SELECT----------------------------------*/
#select-title {
	display: block;
	margin-left: 156px;
	width: 621px;
	height: 269px;
	background-image: url('../imgs/img_selecao_grupos.png');
	background-size: 100%;
	background-repeat: no-repeat;
}
#select-title > p {
	padding-top: 129px;
	padding-left: 185px;
	font-family: DosisBold, Arial, sans-serif;
	font-size: 28px;
	color: white;
}

#select-holder {
	width: 100%;
	margin-top: 20px;
	text-align: center;
}
.select-boxes {
	display: inline-block;
	margin: 0 15px;
	width: 265px;
	height: 334px;
	background-size: 100%;
	background-repeat: no-repeat;
}
.select-boxes > p {
	margin-top: 260px;
	font-family: DosisBold, Arial, sans-serif;
	font-size: 28px;
	color: white;
	text-align: center;
}
#select2 { background-image: url('../imgs/img_grupo2.png'); }
#select3 { background-image: url('../imgs/img_grupo3.png'); }
#select4 { background-image: url('../imgs/img_grupo4.png'); }

.select-btns {
	display: block;
	margin: 0 auto;
	margin-top: -5px;
	width: 100px;
	height: 100px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url('../imgs/btn_checkbox.png');
	cursor: pointer;
}
.select-btns:active {
	background-image: url('../imgs/btn_checkbox_down.png');
}

/*-------------------------------GAME----------------------------------*/
#btn-home {
	position: absolute;
	top: 270px;
	left: 45px;
	width: 80px;
	height: 80px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url('../imgs/btn_home_up.png');
	cursor: pointer;
}
#btn-home:active {
	background-image: url('../imgs/btn_home_down.png');
}

#btn-back {
	display: none;
	position: absolute;
	top: 270px;
	left: 45px;
	width: 80px;
	height: 80px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url('../imgs/btn_voltar_up.png');
	cursor: pointer;
}
#btn-back:active {
	background-image: url('../imgs/btn_voltar_down.png');
}

#instructions {
	position: absolute;
	top: 0px;
	left: 470px;
	width: 465px;
	background-color: #792477;
}
#instructions > p {
	padding: 14px 25px;
	font-family: DosisBold, Arial, sans-serif;
	font-size: 18px;
	line-height: 23px;
	color: white;
}

.canvasses {
	position: absolute;
	top: 0px;
	left: 140px;
}
#game-map {
	position: absolute;
	top: 0px;
	left: 140px;
	width: 840px;
	height: 100%;
}
#points-holder {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.pieces {
	position: absolute;
	width: 60px;
	height: 60px;
	background-size: 100%;
	background-repeat: no-repeat;
}
#player1 { top: 65px; left: 70px; background-image: url('../imgs/img_peao_01.png'); }
#player2 { top: 65px; left: 130px; background-image: url('../imgs/img_peao_02.png'); }
#player3 { top: 65px; left: 190px; background-image: url('../imgs/img_peao_03.png'); }
#player4 { top: 65px; left: 245px; background-image: url('../imgs/img_peao_04.png'); }

.points {
	position: absolute;
	width: 60px;
	height: 60px;
	text-indent: -20000px;
	/*border: 1px solid red;*/
}
.active-points {
	cursor: pointer;
	/*border: 1px solid green;*/
}

.markers {
	position: absolute;
	background-position: top;
	background-repeat: no-repeat;
}
.markers[data-player="1"][data-x="2"][data-y="1"] { top: 350px; left: 220px; width: 78px; height: 71px; background-image: url('../imgs/img_entregaazul_01.png'); }
.markers[data-player="1"][data-x="4"][data-y="3"] { top: 620px; left: 587px; width: 94px; height: 76px; background-image: url('../imgs/img_entregaazul_02.png'); }
.markers[data-player="1"][data-x="3"][data-y="4"] { top: 438px; left: 732px; width: 66px; height: 117px; background-image: url('../imgs/img_entregaazul_03.png'); }

.markers[data-player="2"][data-x="0"][data-y="1"] { top: 122px; left: 222px; width: 114px; height: 75px; background-image: url('../imgs/img_entregalaranja_01.png'); }
.markers[data-player="2"][data-x="1"][data-y="4"] { top: 185px; left: 703px; width: 94px; height: 96px; background-image: url('../imgs/img_entregalaranja_02.png'); }
.markers[data-player="2"][data-x="3"][data-y="2"] { top: 490px; left: 406px; width: 112px; height: 67px; background-image: url('../imgs/img_entregalaranja_03.png'); }

.markers[data-player="3"][data-x="1"][data-y="4"] { top: 187px; left: 740px; width: 61px; height: 91px; background-image: url('../imgs/img_entregalilas_01.png'); }
.markers[data-player="3"][data-x="3"][data-y="1"] { top: 436px; left: 159px; width: 86px; height: 117px; background-image: url('../imgs/img_entregalilas_02.png'); }
.markers[data-player="3"][data-x="3"][data-y="2"] { top: 419px; left: 405px; width: 76px; height: 138px; background-image: url('../imgs/img_entregalilas_03.png'); }

.markers[data-player="4"][data-x="0"][data-y="4"] { top:  45px; left: 767px; width: 61px; height: 100px; background-image: url('../imgs/img_entregaverde_01.png'); }
.markers[data-player="4"][data-x="1"][data-y="2"] { top: 149px; left: 405px; width: 84px; height: 132px; background-image: url('../imgs/img_entregaverde_02.png'); }
.markers[data-player="4"][data-x="3"][data-y="4"] { top: 440px; left: 693px; width: 103px; height: 119px; background-image: url('../imgs/img_entregaverde_03.png'); }

.off-markers { background-position: bottom; }

/*-------------------------------GAME POPUP----------------------------------*/
#popup-layer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.87);
	display: none;
}
#popup {
	position: relative;
	display: block;
	width: 794px;
	height: 395px;
	margin: 185px auto;
	background-size: 100%;
	background-repeat: no-repeat;
}
#popup > p {
	padding: 150px 120px 0 175px;
	font-family: DosisBold, Arial, sans-serif;
	font-size: 36px;
	line-height: 40px;
}
.pop1 { background-image: url('../imgs/img_popup_azul.png'); }
.pop1 > p { color: #24b5f9; }
.pop2 { background-image: url('../imgs/img_popup_laranja.png'); }
.pop2 > p { color: #f26922; }
.pop3 { background-image: url('../imgs/img_popup_lilas.png'); }
.pop3 > p { color: #ab1d74; }
.pop4 { background-image: url('../imgs/img_popup_verde.png'); }
.pop4 > p { color: #21d535; }

#btn-close {
	position: absolute;
	top: 60px;
	right: 25px;
	width: 95px;
	height: 95px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url('../imgs/btn_close.png');
	cursor: pointer;
}
#btn-close:active {
	background-image: url('../imgs/btn_close_down.png');
}

/*-------------------------------POPUP WINNERS----------------------------------*/
#popup-win {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.87);
	background-repeat: no-repeat;
	background-position: center 25%;
	background-image: url('../imgs/img_fdbck_winner_v2.png');
	display: none;	
}

#popup-win-txt {
	width: 777px;
	height: 146px;
	margin: 0 auto;
	margin-top: 315px;
	font-family: DosisBold, Arial, sans-serif;
	font-size: 36px;
	line-height: 39px;
	color: #4d4d4d;
}

#popup-win-icons {
	margin-top: 0px;
	width: 100%;
	height: 111px;
	text-align: center;
}
.win-icons {
	display: inline-block;
	width: 110px;
	height: 111px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.win-icons[data-player='1'] { background-image: url('../imgs/img_winner_azul_v2.png'); }
.win-icons[data-player='2'] { background-image: url('../imgs/img_winner_laranja_v2.png'); }
.win-icons[data-player='3'] { background-image: url('../imgs/img_winner_lilas_v2.png'); }
.win-icons[data-player='4'] { background-image: url('../imgs/img_winner_verde_v2.png'); }

#btn-show-score {
	margin: 0 auto;
	margin-top: 60px;
	width: 246px;
	height: 72px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url('../imgs/btn_resumo_up_v2.png');
	color: black;
	text-align: center;
	cursor: pointer;
}
#btn-show-score:active {
	background-image: url('../imgs/btn_resumo_down_v2.png');
	color: white;
}
#btn-show-score > p {
	padding-top: 24px;
	font-family: DosisBold, Arial, sans-serif;
	font-size: 22px;
}

/*-------------------------------SCORE----------------------------------*/
#btn-play-again {
	position: absolute;
	top: 105px;
	right: 50px;
	width: 246px;
	height: 72px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: url('../imgs/btn_jogarnovamente_up_v2.png');
	color: black;
	text-align: center;
	cursor: pointer;
}
#btn-play-again:active {
	background-image: url('../imgs/btn_jogarnovamente_down_v2.png');
	color: white;
}
#btn-play-again > p {
	padding-top: 24px;
	font-family: DosisBold, Arial, sans-serif;
	font-size: 22px;
}

#table {
	width: 932px;
	height: 524px;
	margin: 0 auto;
	margin-top: 244px;
	background-repeat: no-repeat;
	background-image: url('../imgs/img_tabela.png');
	padding-top: 15px;
	padding-left: 20px;
}
.cells { 
	float: left;
	height: 100%;
	width: 191px;
	margin: 0 0.5px;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center center;
}
.cells > p {
	float: left;
	font-family: DosisBold, Arial, sans-serif;
	font-size: 22px;
	color: #4d4d4d;
	margin-top: 45px;
	margin-left: 25px;
}
.btn-flag {
	float: right;
	width: 80px;
	height: 80px;
	margin-top: 13px;
	margin-right: 10px;
	background-size: 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}

#table-title { height: 43px; }
.title {
	padding-top: 5px;
	font-family: DosisBold, Arial, sans-serif;
	font-size: 22px;
	color: #4d4d4d;
	float: none !important;
	margin: 0 !important;
}

.table-lines { height: 108px; }
.first-row { width: 127px; }

.table-lines[data-player='1'] .first-row { background-image: url('../imgs/img_avatar_feedback_azul.png'); }
.table-lines[data-player='2'] .first-row { background-image: url('../imgs/img_avatar_feedback_laranja.png'); }
.table-lines[data-player='3'] .first-row { background-image: url('../imgs/img_avatar_feedback_lilas.png'); }
.table-lines[data-player='4'] .first-row { background-image: url('../imgs/img_avatar_feedback_verde.png'); }

.table-lines[data-player='1'] .btn-flag { background-image: url('../imgs/btn_trajeto_azul_up.png'); }
.table-lines[data-player='2'] .btn-flag { background-image: url('../imgs/btn_trajeto_laranja_up.png'); }
.table-lines[data-player='3'] .btn-flag { background-image: url('../imgs/btn_trajeto_lilas_up.png'); }
.table-lines[data-player='4'] .btn-flag { background-image: url('../imgs/btn_trajeto_verde_up.png'); }
.table-lines[data-player='1'] .btn-flag:active { background-image: url('../imgs/btn_trajeto_azul_down.png'); }
.table-lines[data-player='2'] .btn-flag:active { background-image: url('../imgs/btn_trajeto_laranja_down.png'); }
.table-lines[data-player='3'] .btn-flag:active { background-image: url('../imgs/btn_trajeto_lilas_down.png'); }
.table-lines[data-player='4'] .btn-flag:active { background-image: url('../imgs/btn_trajeto_verde_down.png'); }