﻿/* ----------------
   ----- MENU -----
   ---------------- */

/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
@media (max-width: 575px) {...}
 
Small devices (landscape phones, 576px and up) 
@media (min-width: 576px) and (max-width: 767px) {...}
 
Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint 
@media (min-width: 768px) and (max-width: 991x) {...}
 
Large devices (desktops, 992px and up) 
@media (min-width: 992px) and (max-width: 1199px) {...}
 
Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {...} */




.aMenu {
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    /*color: #747C84 !important;*/
    font-weight: 500 !important;
}

.aMenu:hover {
    /*text-decoration: underline;*/
    color: #000 !important;
    opacity: 1.0 !important;
}

.aMenuActive {
    color: #000 !important;
    opacity: 1.0 !important;
    font-weight: 700 !important;
}


.imgMenu {
    display: none; /* inline-block */
    vertical-align: middle;
    margin-right: 5px;
}



/* ---------------
   ----- NEW -----
   --------------- */
   
/* Extra small devices (portrait phones) */
@media only screen and (max-width: 575px) {
	.menuLat {  
		position: fixed;
		top: 70px;
		margin: 0px;
		padding: 10px 20px;
		width: 100%; 
		height: calc(100% - 70px);
		overflow-y: auto;
		background-color: #fff;
		font-size: 30pt; 
		z-index: 998; 
	}
	.btnMenu {
		font-size: 18pt;
		width: 200px;
		vertical-align: middle;
	}
	.menuLat img {
		vertical-align: middle;
	}
	#divCorpo { 
		text-align: left;
		width: calc(100% - 40px); 
		margin: 90px 20px 20px 20px;
	}
}
			
/* Small devices (landscape phones) */
@media only screen and (min-width: 576px) and (max-width: 767px) {
	.menuLat { 
		margin: 0px;
		padding: 10px 20px;
		width: 100%; 
		background-color: #fff;
		font-size: 30pt;  
		position: fixed;
		top: 80px;
		height: calc(100% - 80px);
		overflow-y: auto;
		z-index: 999;
	}
	.btnMenu {
		font-size: 18pt;
		width: 200px;
		vertical-align: middle;
	}
	.menuLat img {
		vertical-align: middle;
	}
	#divCorpo { 
		text-align: left;
		width: calc(100% - 40px); 
		margin: 90px 20px 20px 20px;
	}
}

/* Medium devices (tablets) The navbar toggle appears at this breakpoint */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.menuLat { 
		position: fixed; 
		left: 10px; 
		top: 120px; 		    	
		width: 150px;		    	
		border: 0px;
		border-color: #C0C0C0;
		z-index: 999;
	}
	.btnMenu {
		font-size: 12pt;
		width: 125px;
		vertical-align: middle;
	}
	.menuLat img {
		vertical-align: middle;
	}
	#divCorpo { 
		text-align: left;
		width: calc(100% - 40px); 
		margin: 90px 20px 20px 20px;
	}
}

/* Large devices (desktops) */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.menuLat { 
		position: fixed; 
		left: 10px; 
		top: 120px; 		    	
		width: 150px;		    	
		border: 0px;
		border-color: #C0C0C0;
		z-index: 999;
	}
	.btnMenu {
		font-size: 12pt;
		width: 125px;
		vertical-align: middle;
	}
	.menuLat img {
		vertical-align: middle;
	}
	#divCorpo { 
		text-align: left;
		width: calc(100% - 40px); 
		margin: 90px 20px 20px 20px;
	}
}
			
/* Extra large devices (large desktops) */
@media only screen and (min-width: 1200px) {
	.menuLat { 
		position: fixed; 
		left: 10px; 
		top: 120px; 		    	
		width: 150px;		    	
		border: 0px;
		border-color: #C0C0C0;
		z-index: 999;
	}
	.btnMenu {
		font-size: 12pt;
		width: 125px;
		vertical-align: middle;
	}
	.menuLat img {
		vertical-align: middle;
	}
	#divCorpo { 
		text-align: left;
		width: calc(100% - 40px); 
		margin: 90px 20px 20px 20px;
	}
}  





/* ---------------
   ----- OLD -----
   --------------- 

/* Smartphone *
@media only screen and (min-width: 321px) and (max-width: 480px) {
	.menuLat { 
		margin: 0px;
		padding: 10px 20px;
		width: 100%; 
		background-color: #fff;
		font-size: 30pt;  
		position: fixed;
		top: 80px;
		height: calc(100% - 80px);
		overflow-y: auto;
	}
	#divCorpo { 
		text-align: left;
		width: calc(100% - 40px); 
		margin: 130px 20px 20px 20px;
	}
	.btnMenu {
		font-size: 18pt;
		width: 200px;
	}
}
			
/* Tablet *
@media only screen and (min-width: 481px) and (max-width: 768px) {
	.menuLat { 
		margin: 0px;
		padding: 100px 20px 10px 20px ;
		width: 400px;
		background-color: #fff; 
		color: #fff; 
		font-size: 30pt; 
		overflow-y: auto;
	}
	#divCorpo { 
		text-align: left;
		width: calc(100% - 40px); 
		margin: 130px 20px 20px 20px;
	}
	.btnMenu {
		font-size: 18pt;
		width: 200px;
	}
}
			
/* Desktop *
@media only screen and (min-width: 769px) {
	.menuLat { 
		position: fixed; 
		left: 10px; 
		top: 120px; 		    	
		width: 150px;		    	
		border: 0px;
		border-color: #C0C0C0;
	}
	#divCorpo { 
		text-align: left;
		width: calc(100% - 190px); 
		margin: 130px 20px 20px 170px;
	}
	.btnMenu {
		font-size: 12pt;
		width: 125px;
	}
}   */