/*  estilos para meu site de panoramas */

:root{
    /* cor de fundo padrão */
    --cor_fundo: #a0b7a0;
    --vermelho_borda: #ff0000;
    --fundo_menu: #79d5b7;
    --fundo_menu_h: #78e3be;
    --fundo_menu_item: #7adee3;
    --fmenu_sup_ativo: #04AA6D;
    --tmenu_sup_ativo: white;
    /* medidas */
    --larg_menu_item: 150px;  /* largura do menu, deslocamento */
    /*  variáveis para barra de navegação - luishcq */
    --barranav-altura: 28px;  /* melhor valor, barra de progresso do reveal inteira,
                                 mas fica um espaço abaixo deste mesmo tamanho */
}


/*    não estou usando
.detalhe {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
*/

body {
  background-color: var(--cor_fundo);
}

/*div.menusuperior ul {
  list-style-type: none;
  margin: 0;
  padding: 3;
  overflow: hidden;
  background-color: #38444d;
}*/

div.menusuperior li {
  float: left;
}

div.menusuperior ul {
    list-style-type: none;
    margin: 0;
    margin-top: -var(--barranav-altura);
    overflow: hidden;
    font-family: "Sorce Sans Pro", Helvetica, sans-serif;
    background-color: var(--fundo_menu);
    /*border: 2px solid var(--vermelho_borda);*/
    padding: 3px 0px;
    height: auto;
}

li.dropmenu-top {
  display: inline-block;
}

.dropmenu-top a {
  color: blue;
  padding: 3px 0px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.dropmenu-top:hover .dropmenu-itens {
  display: block;
}

.right.dropmenu-top {
   float: right;
}

.menusuperior li a, .dropbtn {
  display: inline-block;
  width: var(--larg_menu_item);
  padding: 3px 0px;
  text-decoration: none;
  text-align: center;
  float: left;
  color: blue;
}

.dropmenu-itens {
  display: none;
  /*display: inline-block;*/
  position: absolute;
  background-color: var(--fundo_menu);
  width: var(--larg_menu_item);
  box-shadow: 0px 0px 16px 0px rgba(0,0,120,0.45);
  z-index: 10;
  text-align: center;
}

.dropmenu-itens a {
  color: blue;
  padding: 8px 3px!important;
  text-decoration: none;
  display: block;
  text-align: left;
  box-sizing: border-box;
}

.dropmenu-itens p {
  color: black;
  padding: 3px;
  text-decoration: none;
  display: block;
  text-align: center;
}

li a:hover, .dropmenu-itens:hover .dropbtn   {
  background-color: var(--fundo_menu_h);
  color: white;
}

/*  desativado, talvez usar com JavaScript
li a.active {
  background-color: var(--fmenu_sup_ativo);
  color: var(--tmenu_sup_ativo);
}
*/

.dropmenu-itens a:hover {
  background-color: var(--fundo_menu_item);
}

/*.item-side:hover {
  color: black;
  padding: 3px;
  text-decoration: none;
  display: block;
  background-color: var(--fundo_menu)!important;
}*/

.item-side:hover {
  color: black;
}

.item-side:hover .dropmenu-side {
  display: block;
}

.dropmenu-side {
  display: none;
  position: absolute;
  background-color: var(--fundo_menu);
  width: var(--larg_menu_item);
  box-shadow: 0px 0px 16px 0px rgba(120,0,0,0.45);
  z-index: 10;
  text-align: center;
  /*translate: 150px;*/
}

.dropmenu-side.desce {
  translate: var(--larg_menu_item) var(--valor_descer);
}

/* para centralizar imagens em páginas, p. ex. de detalhes de um tour
 * vide https://www.w3schools.com/howto/howto_css_image_center.asp
 */
/*.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}*/

/* para várias imagens lado a lado com um título acima, e para
 * tabelas, como na página Panoramas.html e
 * para mostrar (prévia) alguns detalhes de tour virtual */
    * {
        box-sizing: border-box;
    }
	
	table {
		border: 1px solid #fff;
		border-collapse: collapse;
		font-size: 18px;
	}

	table th,
    table td {
		width: 200px;
		padding: 14px;
		border: 1px solid #fff;
		vertical-align: middle;
	}

	img.centered { 
        display: block; 
        margin: 0; 
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
    }
            
    .colunapictable {   /* Note a largura de 25%, permitindo 4 colunas */
        float: left;
        width: 25.0%;
        padding: 1px;
        font-size:  0px;
        margin: 0;
    }

    /* Clearfix (clear floats) */
    .linhapictable {
        content: "";
        clear: both;
        display: table;
        font-size: 0px;
        margin: 0 auto;
        padding: 0px;
    }
    
    p.titfig {
        margin-top: 20px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
    }
/* final dos estilos usados em Panoramas.html e prévia de detalhes de tour */



/* centralizar textos */
.p-center {
  text-align: center;
}

.flexboxOnParentDiv{    /* de https://stackoverflow.com/questions/38030040/center-image-in-a-link */
  display:flex;
  justify-content:center;
}

/*   para centralizar uma img, div no centro e meio da página, na horizontal e vertical
 *   vide https://codepen.io/alephao/pen/mdPRYqZ */
.CentralizaHV {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

 /*
 * classe para criar bordas ao redor de imagens (fora do reveal)
 */
img.molduraS {
  border: 1px solid #44f;
 }


/*@media screen and (max-width: 900px) {
  .menusuperior li a {float: none;}
}*/