$topoPad: 15px;
$lhTopo : $altTopo_mb - 2*$topoPad;
$alt_barra_topo: 3px;
.top_bar {
    background-color: $azul_escuro; height: $alt_barra_topo;
}
section.topo {
	background-color: $cor_topo; color: $azul_escuro; position: relative; left: 0; top: 0; width: 100%; height: $altTopo_mb; z-index: 9999;
    border-top: solid 0 $azul_escuro;
	a {
		color: inherit; text-decoration: none;
	}
	.inner {
		width: 100%; max-width: $lar_max_conteudo; margin: 0 auto; height: $altTopo_mb; padding: $topoPad; position: relative; 
		#menu_mobile_toggle {
			float: left; height: 100%; width: 20%; line-height: $lhTopo; font-size: 1.75em; cursor: pointer;
		}
		#logo_ph {
			float: left; width: 60%; height: 100%;  text-align: center;
			picture {
				display: inline-block;
					img {
					height: 100%; width: auto; display: inline-block; 
				}
			}
		}
		#lang_selector {
			float: right; height: 100%; width: 20%; line-height: $lhTopo; text-align: right;
		}
		#menu {
			display: none;
		}
	}	
}
ul#menu_mobile {
	position: fixed; left: 0; top: 0; height: 100%; border-top: solid $alt_barra_topo $azul_escuro; background-color: #FFF; width: 100%; display: none; z-index: 2002; padding-top: $altTopo_mb + $alt_barra_topo;
	li {
		display: block; width: 100%; line-height: 2.5em; border-bottom: solid 1px #D6D6D6;
		a {
			padding: 0 20px; text-transform: uppercase; text-decoration: none; color: $azul_escuro; font-family: $font_menu; font-size: 1em; display: block;
		}
		a.on {
			color: $azul_claro;
		}
	}
}
$topoPad: 20px;
$lhTopo : $altTopo_tb - 2*$topoPad;
$alt_barra_topo : 5px;
@media only screen and ($cssdevicetext : 768px) { 
    .top_bar {
   height: $alt_barra_topo;
}
	section.topo {
		 height: $altTopo_tb; 
		.inner {
			height: $altTopo_tb; padding: $topoPad; 
			#menu_mobile_toggle {
				display: none;
			}
			#logo_ph {
				text-align: left; width: 25%;
			}
			#lang_selector {
				height: $lhTopo * 1/3; line-height: 1; 
			}
			#menu {
				 height: $lhTopo * 2/3; width: 75%; display: block; clear: right; float: right;
				ul {
					width: 100%; height: $lhTopo * 2/3; text-align: right;
					li {
						display: inline-block;height: $lhTopo*2/3; vertical-align: bottom; font-size: 0.9em; font-family: $font_menu; margin-right: 20px; position: relative;
						&:before {
							content: '\200B';
						/*   content: '';
						  margin-left: -0.25em; */
						  display: inline-block;
						  height: 100%; 
						  vertical-align: bottom;
						}
						&:last-child {
							margin-right: 0;
						}
						&.on:after {
							content: "";
						    display: block;
						    border: 10px solid transparent;
						    border-bottom-color: $cor_seta;
						    position: absolute;
						    bottom: -$topoPad - 1;
						    left: 50%;
						    margin-left: -10px;
                            
						}
                        &.on.sec1:after {
                                border: none !important;
                            }
						a {
							font-family: inherit !important;
							position: relative;
                            color: $azul_escuro;
                            font-weight: 700;
						}
						a:hover {
							color: $azul_claro;
                            font-weight: 700;
						}
						&.on a {
							color: $azul_claro;
                            font-weight: 700;
						}
					}
				}
			}
		}
	}
	section#topo1 {
		position: relative;	
	}
}
$topoPad : 20px;
$lhTopo : $altTopo_dt - 2*$topoPad;
@media only screen and ($cssdevicetext : 1024px) { 
	section.topo {
		height: $altTopo_dt; 
		.inner {
			height: $altTopo_dt; padding: $topoPad; 
			#lang_selector {
				height: $lhTopo * 1/3; line-height: 1; 
			}
			#menu {
				 clear: right; float: right; height: $lhTopo * 2/3; display: block; 
				ul {
					width: 100%; height: 100%;
					li {
						font-size: 1em; text-transform: uppercase; height: $lhTopo*2/3; 
						a.on:after {
						    bottom: -$topoPad;
						    bottom: 0; 
						}
					}
				}
			}
		}
	}
}