@charset "utf-8";
img.load{ position:fixed; top:50%;left:50%; transform: translate(-50%,-50%); z-index:12} 
*{font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif} 
body{ padding:0; margin:0}
div.topo{ top:0;width:100%; height:60px; display:flex; flex-direction:row; justify-content:space-between; position:relative; background-color:rgba(0,51,102,1.00)}
div.topop{ width:100%; height:30px; position:relative; background-color:rgba(0,51,102,1.00)}
div.topop>p{color:white; text-indent:10px; font-weight:700; line-height:30px; vertical-align:middle; width:100%;margin:0; height:30px}
div.all{ position: fixed; top:0;left:0; width:100%; height:100%; background-color:rgba(221,219,219,0.73);z-index:10}
div.topo>.titulo{ height:inherit;color:white; line-height:60px;font-size:20px; font-weight:700;margin-right:10px}
div.cont{ width:80%; max-width:800px; margin:auto; position:relative}
.hide{display:none}
div.intro>p:nth-child(1){ text-align:justify}
div.intro>p:nth-child(2){ width:100%  }
div.intro>p:nth-child(2) button{ width:100%; height:35px; font-size:21px}
div.lang{ display:flex; width:100%; flex-direction: row; justify-content:flex-end}
div.popup>.conteudo{ width:90%; height:80%; margin: 4px auto}
p.infob{  width:100%; margin-top:7%; display:flex; flex-direction:row; justify-content:space-around}

@media only screen and (min-width:500px){ 
p.infob >button{ width:45%; height:35px; font-weight:700}
div.intro{  margin:auto; font-size:19px; padding:10px}
div.pergunta{ position:relative; padding:20px 0 20px 0; border-bottom:rgba(218,218,218,0.90) solid 1px}
 div.pergunta>span{ font-weight:700; margin-right:40px; padding-right:10px;   font-size:33px;float:left; height:95px; line-height:95px; text-align:center; width:30px;  border-right:rgba(58,95,212,0.26) solid 1px}
 
 div.pergunta span.longo{ height:140px; line-height:140px}
 div.pergunta>p:nth-child(2){ font-size:18px; font-weight:600}
 div.pergunta>p:nth-child(3)> select{ width:180px; font-size:18px}
  div.pergunta textarea{ width:75%}
  div.last{border-bottom:none}
   div.submeter{ width:100%; margin-top:40px; height:60px}
   div.submeter button{ width:100%; margin:auto; height:45px; font-weight:700}
   div.popup{ position:absolute; left:50%;  transform: translate(-50%,-50%);
 background-color:white; width:350px; min-height:180px; z-index:11; border:1px solid rgba(148,146,146,0.79); box-shadow:rgba(118,111,111,0.76) 6px 6px 6px  }
 }


@media only screen and (max-width:500px){ 
p.infob >button{ width:43%; height:35px; font-weight:700}
div.popup{ position:absolute; left:50%; transform: translate(-50%,-50%);
 background-color:white; width:80%; min-height:180px;; z-index:11; border:1px solid rgba(148,146,146,0.79); box-shadow:rgba(118,111,111,0.76) 6px 6px 6px  }
 
div.intro{  margin:auto; font-size:15px; padding:5px}
div.cont{ width:95%}
div.intro>p:nth-child(2) button{ width:100%; height:35px; font-size:17px}
div.pergunta{ position:relative; height:100px; padding-bottom:30px; border-bottom:rgba(218,218,218,0.90) solid 1px}

 div.pergunta>span{ font-weight:700; margin-right:15px; padding-right:7px;   font-size:26px;float:left; height:95px; line-height:95px; text-align:center; width:30px;  border-right:rgba(58,95,212,0.26) solid 1px}

 div.pergunta>p:nth-child(2){ text-align:justify;font-size:16px; font-weight:600}
 div.pergunta>p:nth-child(3)> select{ width:150px; font-size:16px}
 div.pergunta span.longo{ height:140px; line-height:140px}
 div.pergunta textarea{ width:75%}
   div.last{border-bottom:none}
    div.submeter{ width:100%; margin-top:40px; height:60px}
   div.submeter button{ width:100%; margin:auto; height:40px; font-weight:700}
   
 

 
 }