@charset "utf-8";
/* CSS Document */

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

}

 

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

}
 

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

}


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

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

}
@font-face {
    font-family: 'kokilaregular';
    src: url('fonts/kokila-webfont.eot');
    src: url('fonts/kokila-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/kokila-webfont.woff2') format('woff2'),
         url('fonts/kokila-webfont.woff') format('woff'),
         url('fonts/kokila-webfont.ttf') format('truetype'),
         url('fonts/kokila-webfont.svg#kokilaregular') 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';}
img{ border:none;}

.helpBt{    
    width: 60px;
    height: 59px;
    margin-top: 20px;
    float: right;
    margin-right: 15px;
    bottom: 43px;
    right: 37px;
    background: url(images/ico_help.png) no-repeat;
    z-index: 3;
}


.vollkorn{
    font-family:'vollkorn';
}


.lusitana{
    font-family:'lusitana';
}

.block{
  display:block;
}

.inline-block{
  display: inline-block;
}

.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:#014b25;    height: 65px; position:absolute; top:50%; font-family:'interstateregular';  padding:20px 0px 20px 0px;  margin-top:-35px; }
.msg-img-alert{ width:100%; background:#014b25; position:absolute; top:40%;  margin-top: -10%; font-family:'interstateregular';  padding: 20px 0px 50px 0px;}
.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:#11663b;
    color: #fff;
    font-size: 18px;
    border-radius: 5px;
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -60px;
    cursor: pointer;
  }

.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;
}

#container{ 
    border: solid #014b25 13px;
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    min-height: 680px;
      
    min-width: 840px;
    padding: 0px;
}
#container.inicial{ bottom:20px; margin-bottom:0px; padding:0px 0px 0px 0px;}
#logo{ display: block;    width: 723px;    margin: 0 auto; }
#logo2{ display: block;    width: 320px;    margin: 0 auto; float: left; }
#logo2 img{  width: 392px!important }
#logo img{	 width: 515px!important;
			display: block;
    		margin: 0 auto;
		}
#menu-principal{ position:absolute; bottom:20px;  left:35px; right:35px; background:#075b35; height:200px;}

.tituloJogo{ font-size:42px; text-align:center; position:absolute; width:100%; top:0px; margin-top:-195px; color:#0a311b;font-family: 'Vollkorn', cursive; }
#texto-home{font-family:'TektonProBoldExt'; text-align:center; width:100%; margin-top:10px;}
#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:48px; font-family: 'kokilaregular', sans-serif;font-weight:bold; }
.t3{color:#2f2b28; font-family: 'Lusitana', sans-serif;font-size:32px; text-align:center;}
.center{ text-align:center; } 
.row{ width:100%; float:left; clear:both;}
.row-titulo{ margin-top: 5px;}
h1{color:white; font-size:32px;font-family: 'Vollkorn', cursive; font-weight: lighter;}


/*
--- caça palavras
*/
.risca{ text-decoration:line-through; color:#999;}
.texto-caca-palavras{ font-family:'Vollkorn';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: 0px;}
.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: 5px;
    float: right;
    display: inline-block;
     
}
.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;
  display: block;
  margin: 10px auto;

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

  background: white;
    border-radius: 6px;
    width: 148px;
    height: 103px;
    display: inline-block;
    margin: 1px;
    cursor: pointer;
    text-align: center;
    position: relative;
    perspective: 500px;
    -webkit-perspective: 500;
}
.figura img{
    margin: 1px;
}
.label-pontos{
    font-family: 'Lusitana';
} 
.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; 
  width: 100%;
} 
.area-pecas{
	 
	 
	float: none; 
  width: 70%;
}
.area-texto{ 
    display: inline-block;
    float: left;
    color: #FFF; 
    background-color: #808285;
    width: 25%;
    margin: 1%;
    padding: 1%;
    min-width: 100px;
}
.text-left{
    text-align: left;
}

@media screen and (max-height: 710px) {
  .tituloJogo{	
  	font-size:33px;
  }
  #logo img {
    width: 550px!important;
  }

}

/*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:#11663b; 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:#658664; 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  (max-width:  1314px  ) {
   .area-pecas {
     
    float: none;
    width: 930px;
  }
}

@media screen and (min-width: 1314px) and (max-width: 1650px) {
   .area-pecas {
     
    float: none;
    width: 1248px;
  }
}