@charset "UTF-8";

.movivel {
    border: 1px solid #231f20;
    cursor: move;
    font-size: 20px;
    height: 30px;
    text-align: center;
    width: 31px;
    color:white;
}

.movivel:hover{
	border: 2px dashed #000;
	color: black;
}
		
.movendo{
	border: 2px dashed #000;
	background-color: rgba(0, 0, 255, 0.1);
	font-size:15px;
	text-align:center;
	width: 25px;
	height:25px;
}

.principal{
  background-color:rgb(253,213,1);
  margin-top:10px;
  margin-bottom:10px;
  margin: 0 auto;
}

.class_top_jogo{
  background-image: url(../imagens/top.png);
  background-repeat: no-repeat;
  border:0px solid rgb(0,0,0);
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(255,255,255);
  font-weight: bold;
  display: block;
  width:730px;
  height:58px;
  padding-top:5px;
}

.class_area_jogo{
	background-color: white;	
  	width: 100%px; 
  	height: 370px;   	
}

.area_vogala{
  background-color:rgb(0,147,221);
  border:1px solid  rgb(253,213,1);
  position:absolute;
  text-align:center;
  width:50px;
  height:20px;  
}

.area_vogale{
  background-color:rgb(0,147,221);
  border:1px solid  rgb(253,213,1);
  position:absolute;
  text-align:center;
  width:50px;
  height:20px;  
}

.area_vogali{
  background-color:rgb(0,147,221);
  border:1px solid  rgb(253,213,1);
  position:absolute;
  text-align:center;
  width:50px;
  height:20px;  
}

.area_vogalo{
  background-color:rgb(0,147,221);                                           
  border:1px solid  rgb(253,213,1);
  position:absolute;
  text-align:center;
  width:50px;
  height:20px;  
}

.area_vogalu{
  background-color:rgb(0,147,221);
  border:1px solid  rgb(253,213,1);
  position:absolute;
  text-align:center;
  width:50px;
  height:20px;  
}

.area_imagem{
  border:0px solid  rgb(253,213,1);
  width:150px;
  height:195px; 
  margin: 0 auto;
}

.area_deixar_vogal{
	border: 1px solid rgb(0, 0, 0);
	height: 40px;
    margin: 0 auto;
    padding: 20px 55px;
    width: 40px;
    display: grid;
    justify-content: center;
    align-content: center;   
}

.area_deixar_vogal .movivel{color:black}

.class_bota_tipo{
   width:370px;
   font-size:70;    
}

.botao_jogar_novamente{
  background-color:rgb(0,147,221);
  border:1px solid rgb(13,106,165);
  color: rgb(255,255,255);
  font-size:30;
  font-weight: bold;                                                    
  display: block;  
}

.area_botoes_inicio{
  padding-top:100px;
}

.linha_comentar{
  width:730px;
  height:30px;  
}

.link_comentar{
  color:rgb(255,255,255);
}

.sapo{
  border:1px solid rgb(255,255,255);
  position:relative;
  width:25px;
  height:23px;
  top:20;
  left:160;  
}

.letraA{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:8;
  left:230;
}

.letraB{
  border:1px solid rgb(255,255,255);
  position:relative;
   text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-18;
  left:290;
  margin-bottom:-18;
}

.letraC{
  border:1px solidrgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-3;
  left:340;
  margin-bottom:-3;
}

.letraD{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:9;
  left:355;
}

.letraE{
  border:1px solid rgb(255,255,255);
  position:relative;
   text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:16;
  left:325;
}

.letraF{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-5;
  left:260;
  margin-bottom:-5;
}

.letraG{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-25;
  left:203;
  margin-bottom:-25;
}

.letraH{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-10;
  left:148;
  margin-bottom:-10;
}

.letraI{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:8;
  left:120;
}

.letraJ{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:21;
  left:110;
}

.letraK{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:23;
  left:152;
}

.letraL{
  border:1px solid rgb(255,255,255);
  position:relative;
  font-family: Arial,sans-serif;
  text-align:center;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-9;
  left:213;
  margin-bottom:-9;
}

.letraM{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-39;
  left:268;
  margin-bottom:-39;
}

.letraN{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-26;
  left:327;
  margin-bottom:-26;
}

.letraO{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:8;
  left:348;
}

.letraP{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:16;
  left:317;
}

.letraQ{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-5;
  left:258;
  margin-bottom:-5;
}

.letraR{
  border:1px solid rgb(255,255,255));
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-25;
  left:198;
  margin-bottom:-25;
}

.letraS{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-20;
  left:140;
  margin-bottom:-20;
}

.letraT{
  border:1px solid rgb(255,255,255));
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-16;
  left:85;
  margin-bottom:-16;
}

.letraU{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:10;
  left:63;
}

.letraV{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:20;
  left:65;
}

.letraW{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:27;
  left:98;
}

.letraX{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:3;
  left:158;
}

.letraY{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-29;
  left:217;
  margin-bottom:-29;
}

.letraZ{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-46;
  left:265;
  margin-bottom:-46;
}

.sapo2{
  border:1px solid rgb(255,255,255);
  position:relative;
  text-align:center;
  font-family: Arial,sans-serif;
  color:rgb(253,213,1);
  font-weight: bold;
  display: block;
  width:25px;
  height:23px;
  top:-46;
  left:340;
}

.area_link{
  border:1px solid rgb(255,255,255);
  width:23px;
  height:22px;
}

.area_transp_jogo{
  position:absolute;
  width:100%;
  background-color:rgb(4,86,136);
  opacity:0.65;
	-moz-opacity: 0.65;
	filter: alpha(opacity=60);
  z-index:2;  
  visibility: hidden;
}

.area_adm{
  position:absolute;
  color:rgb(255,255,255);
  text-align:center;
  font-family: Arial,sans-serif;
  font-size:17;
  font-weight: bold;
  width:200px;
  height:100px;
  visibility: hidden;
  background-color:rgb(4,86,136);
  z-index:3;   
}

.botao_verifica{
  background-color:rgb(0,147,221);
  border:1px solid rgb(255,255,255);
  color:rgb(255,255,255);
  text-align:center;
  font-family: Arial,sans-serif;
  font-size:17;
  font-weight: bold;
}

.area_fim{
  padding-top:150px;
  color:red;
  text-align:center;
  font-family: Arial,sans-serif;
  font-size:20;
  font-weight: bold;
}

.area_adm2{
  margin-top:5px;
}

.erro_letra{
   color:rgb(255,0,0);
  text-align:center;
  font-family: Arial,sans-serif;
  font-size:15;
  font-weight: bold;  
}

.escondido{
  visibility: hidden;
}

.container h1{color:rgb(254,158,19);font-size:30px;}
.container audio{display: none}
.area_top_jogo{text-align:center;  width: 100%;  padding: 5px 0px;background-color: rgb(106,106,230);border-radius: 6px;   }
.area_top_jogo h2{color:rgb(254,158,19) !important;;font-size:35px;}

#areaBTT{float: right;margin-right: 10px;}
#areaBTT a{cursor: pointer;color:black}

.telaCheia{background:url("https://www.educajogos.com.br/layout-2017/img/camada.jpg") scroll center bottom;width: 100%;position: fixed;top: 0px;left: 0px;z-index: 1999;height:100%;max-width:unset;}

.fimJogo{color: white;}

@media (max-width: 576px) {
	.container h1{font-size:20px}
	.container h2{font-size:20px}	
	.col-lg-8{padding-right: 0px!important;}
	.movivel{margin: 0px 5px}
}

@media (min-width: 577px) and (max-width: 768px) {
	.container h1{font-size:20px}
	.area_top_jogo h1{margin: 5px 0px}
	.class_area_jogo{height: unset}
	.movivel{margin: 0px 5px}
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
}


#drop_zone {
    background-color: #eee;
    border: #999 1px solid ;
    width: 200px;
    height: 80px;
    padding: 8px;
    font-size: 19px;
  }
  
  .objects {
    display: inline-block;
    background-color: #FFF3CC;
    border: #DFBC6A 1px solid;
    width: 50px;
    height: 50px;
    margin: 10px;
    padding: 8px;
    font-size: 18px;
    text-align: center;
    box-shadow: 2px 2px 2px #999;
    cursor: move;
  }