@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: 'indie_flower';
    src: url('fonts/indieflower-webfont.eot');
    src: url('fonts/indieflower-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/indieflower-webfont.woff2') format('woff2'),
         url('fonts/indieflower-webfont.woff') format('woff'),
         url('fonts/indieflower-webfont.ttf') format('truetype'),
         url('fonts/indieflower-webfont.svg#indie_flowerregular') format('svg');
    font-weight: normal;
    font-style: normal;

}



@font-face {
    font-family: 'open_sans';
    src: url('fonts/opensans-bold-webfont.eot');
    src: url('fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-bold-webfont.woff2') format('woff2'),
         url('fonts/opensans-bold-webfont.woff') format('woff'),
         url('fonts/opensans-bold-webfont.ttf') format('truetype'),
         url('fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');
    font-weight: bold;
    font-style: normal;

}




@font-face {
    font-family: 'open_sans';
    src: url('fonts/opensans-light-webfont.eot');
    src: url('fonts/opensans-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-light-webfont.woff2') format('woff2'),
         url('fonts/opensans-light-webfont.woff') format('woff'),
         url('fonts/opensans-light-webfont.ttf') format('truetype'),
         url('fonts/opensans-light-webfont.svg#open_sanslight') format('svg');
    font-weight: light;
    font-style: normal;

}




@font-face {
    font-family: 'open_sans';
    src: url('fonts/opensans-regular-webfont.eot');
    src: url('fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-regular-webfont.woff2') format('woff2'),
         url('fonts/opensans-regular-webfont.woff') format('woff'),
         url('fonts/opensans-regular-webfont.ttf') format('truetype'),
         url('fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body,html{
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    background: white;
    font-family: 'Arial';
    height: 99%;
    width: 100%;
    display: block;
}

img{ border:none;}

.helpBt{     
	width: 60px;
    height: 59px;
    position: absolute;
    bottom: 30px;
    right: 43px;
    background: url(images/ico_help.png) no-repeat;
    z-index: 3;
}
.helpBt.top{ top:50px; bottom:auto;}
.miniatura{ bottom:50px; right:50px; position:absolute; }
.miniatura img{ width:150px;border:solid 10px #fff; box-shadow:#000 0px 0px 20px;}


.bg-alert,.bg-modal,.bg-alert-img{ width:100%; height:100%; position:fixed; top:0px; left:0px; background:url(images/bg.png) repeat; z-index:99; display:none;}
.msg-alert{ width:100%; background:#9a1b1f; height: 60px; position:absolute; top:50%; font-family:'interstateregular';  padding:20px 0px 20px 0px;  margin-top:-35px; }
.msg-img-alert{ width:100%; background:#000; position:absolute; display: table;  top:40%;  margin-top: -10%; font-family:'interstateregular'; padding: 20px 0px 50px 0px;}
.img-container{
    width: 50%;
    text-align: center;
    font-size: 24px;
    display: table-cell;
    vertical-align: middle;
    margin-bottom: 10px;
    }
    #txt-container{
        width:46%; padding:2%; color: #fff; display: table-cell; font-size:20px; vertical-align: middle;
    }
.txt-msg-alert{width:100%; text-align:center;font-size:24px; color:#fff; margin-bottom:10px;}
.alert-close{ 
    width: 100px;
    padding: 5px 10px 5px 10px;
    text-align: center;
    background: #656262;
    color: #fff;
    font-size: 18px;
    border-radius: 5px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -60px;
    cursor: pointer;
}

#container{ 
   border: solid #bd3927 13px; 
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    min-height: 680px;
    height: 94%;
    min-width: 840px;
    padding: 0px;
}
#container.inicial{ bottom:20px; margin-bottom:0px; padding:0px 0px 0px 0px;}
#logo{     display: inline-block;  }
#logo img{	width: 185px!important}
#menu-principal{ position:absolute; bottom:20px;  left:35px; right:35px; background:#d73627; height:200px;}

.tituloJogo{ font-size:42px; text-align:center; position:absolute; width:100%; top:0px; margin-top:-195px; color:#9b1b1f;font-family: 'indie_flower', cursive; }
#texto-home{font-family:'TektonProBoldExt'; text-align:center; width:100%; margin-top:100px;}
#texto-home p{ padding:0px 0px 0px 0px; margin:0px 0px 0px 0px ;}
.itens-menu{ cursor:pointer; width:33%; min-width:256px; height:263px; background:url(images/bg_opcs.png) no-repeat center center; position:relative; margin: -128px auto 0 auto;}
.itens-menu a{ color:#000;}
.itens-menu .icone{ width:100%; float:left; clear:both; text-align:center; margin-top:35px;}
.itens-menu .texto{width:100%; float:left; clear:both; text-align:center; font-family:'interstateregular'; font-size:20px; margin-top:15px;}

.t1{color:#2f2b28; font-size:32px; font-family: 'open_sans', sans-serif;font-weight:bold; }.t3{color:#2f2b28; font-family: 'Arial', sans-serif; font-size:20px;}
.center{ text-align:center; } 
.row{ width:100%; float:left; clear:both;}
.row-titulo{ }
h1{color:white; font-size:32px;font-family: 'indie_flower', cursive; font-weight: lighter;}


/*
--- caça palavras
*/
.risca{ text-decoration:line-through; color:#999;}
.texto-caca-palavras{ font-family:'indie_flower';color:#9b1b1f; text-align:justify;}
.texto-caca-palavras u{ font-weight:bold;}
.texto-caca-palavras img{ margin:0px 0px 10px 10px;}
.canvas-box{ margin-top: 25px;}
.letra {
	width: 35px;
	height: 35px;
	line-height: 35px;
	text-align: center;
	position: absolute;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	border: 1px solid black;
	cursor: pointer;
	background-color: #fffdf0;
	margin: -1px 0px 0px -1px;
}

.highlight {
	background-color: #FFCC00;
}

.found {
	background-color: #33CC33;
}

.canvas {
	position: relative;
	border: 1px solid black;
	margin: auto;
}

.box {
	width: 25px;
	height: 23px;
	position: absolute;
	border: 2px solid #FF0000;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
}
/*
---JOGO DA MEMÓRIA
*/
.stats {
    width: 200px;
    height: 80px;
    margin-top: 28px;
    display: inline-block;
    float: right;
     
}
.stats .inner{ margin:0px;}
.text-right{ text-align:right;}
.row{ width:100%; float:left; clear:both; padding:2px 0px 2px 0px;}
.col{ float:left;} 
.col-80{ width:79%;}
.col-0{ width:19%;}

div#box-jogo{
	
	border:#999 0px solid;
	 
	text-align:center;
	margin:0px auto;
	position:relative;

}
.totalPares{
	font-weight: bold;
}
.paresCompletos{
	font-weight: bold;
}
.movimentos{
	font-weight: bold;
}
.out-jogo-memoria{

	background:#d73627;
	border-radius:6px; 
	width:100px;
	height:100px;
	display:inline-block;
	margin:5px;
	cursor:pointer;
	text-align:center;
	-webkit-box-shadow: 0px 9px 5px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 9px 5px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 9px 5px 0px rgba(0,0,0,0.25);
	position:relative; 
	perspective: 500px;
	-webkit-perspective: 500;
}
.inner-jogo-memoria{
	width: 100%;
	height: 100%;
	position: absolute;
	perspective: 500px;
	-webkit-perspective: 500px;
	
	
	
}
.inner-jogo-memoria .figura.frente{
	z-index:2;
}

.inner-jogo-memoria .figura.atras{
	z-index:1;
}

.inner-jogo-memoria figure img{ max-width:100%; border-radius:5px;}
.inner-jogo-memoria figure{
	margin: 0;
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	
	transition: transform 1s;
	-webkit-transition: transform 1s;
	
	backface-visibility: hidden !important;
	-webkit-backface-visibility: hidden !important;
	
	transform-style: preserve-3d; 
	-webkit-transform-style: preserve-3d; 
}
.atras{
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}


.inner-jogo-memoria.ativo .figura.frente{
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
}

.inner-jogo-memoria.ativo .figura.atras{
	transform: rotateY(0deg);
	-webkit-transform: rotateY(0deg);
}
.text-center{
	text-align: center;
}
/* LAYOUT-AREA DO JOGO*/
#center-container{
	margin: 0 auto;
    display: table;
    width: 100%;
}
.area-pecas{
	 
	 
	float: none;
	padding: 5px; 
	 
}
.area-texto{
	 
	display: table-cell;
    float: none;
    color: #575757;
    background-color: #f2f2f2;
    padding: 5px 15px;
    margin: 5px;
    width: 227px;
}

/*QUEBRA CABECA*/
.itemQuebraCabeca{ }
.imagemItemQuebraCabeca{ overflow:hidden; position: absolute; border:solid 2px #00849b;box-shadow: #444 0px 0px 20px;}
.imagemItemQuebraCabecaImg{position: absolute;}
.h100{ height:100%; background:#f00}

.tableJogo{ }
.out-table{ height:0px;margin:0px auto; position:absolute; top:50%; left:50%;  border: solid 12px #fff;box-shadow: #444 0px 0px 20px; background:#00849b;}
.itemQuebraCabeca{ position:relative;}
.itemQuebraCabecaInner{ width:100%; height:100%; position:absolute; top:0px;}

.itemQuebraCabecaInner .imagemItemQuebraCabeca{ border:solid 1px #fff; box-shadow:none;}

.ui-state-highlight{ background:#f00;}
.ui-state-active{ background:#97c2c8 !important;}
.ui-draggable-dragging{ z-index:9999;}
/*modal*/
#boxModal{ display:none; width:500px; height:350px; position: fixed; top:50%; margin-top:-175px; left:50%; margin-left:-250px; background:#fff; z-index:100; box-shadow:#000 0px 0px 10px;}
.header-modal{ width:100%;  padding:5px 0px 5px 0px; background:#9b1b1f; text-align:center; color:#fff; font-size:18px; }
.conteudo-modal{font-family:'interstateregular'; font-size:14px; padding:10px; }

.bt-fechar-modal{ position:absolute; bottom:10px; left:10px; background:#cd8d8f; color:#fff; padding:3px 5px 3px 5px;font-family:'interstateregular'; border-radius:3px; cursor:pointer;}
/*animation*/
.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
} 

@-webkit-keyframes fadeInUp { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(20px); 
    } 
    100% { 
        opacity: 1; 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes fadeInUp { 
    0% { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
} 

#boxModal.fadeInUp { 
    -webkit-animation-name: fadeInUp; 
    animation-name: fadeInUp;
	display:block;

}
#boxModal.fadeOutDown { 
	display:block;
    -webkit-animation-name: fadeOutDown; 
    animation-name: fadeOutDown; 
}
@-webkit-keyframes fadeOutDown { 
    0% { 
        opacity: 1; 
        -webkit-transform: translateY(0);
		
    } 
    100% { 
        opacity: 0; 
        -webkit-transform: translateY(20px);
		} 
} 
@keyframes fadeOutDown { 
    0% { 
        opacity: 1; 
        transform: translateY(0); 
    } 
    100% { 
        opacity: 0; 
        transform: translateY(20px); 
    } 
} 


@media screen and (min-width: 720px) and (max-width: 1212px) {
  .area-pecas{width: 665px!important;}
}
@media screen and (min-width: 1212px) {
  .area-pecas{width: 1155px!important;}
}