/* ================================
HEADER WEX 
================================ */
#head-ombra {
	height:8vh;
}
#head {
	position: fixed;
	top: 0; left:0;
	width:100%;
	height: 8vh;
	display: flex; 
	z-index: 100;
background-color:#eee;
}
#head > div {
	position: relative;
}
#head > div > a {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0; left:0;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #232323;
}
#head > div.mmex {
	width:10%;
}
#head > div.logex {
	width:20%;
	background-image:url('../../_pic/logo/musadea.png')
}
@media all and (max-width: 1199.98px) and (min-width: 992px) {
    #head > div > a > span {
        font-size: 0.8rem;
    }
}

@media all and (max-width: 991.98px) and (min-width: 768px) {
    #head > div > a > span {
        font-size: 0.6rem;
    }
}

@media all and (max-width: 767.98px) {
    #head > div > a > span {
        display: none;
    }
	#head > div.mmex {
	width:15%;
	}
	#head > div.logex {
	width:15%;
	background-image:url('../../_pic/logo/musadea-loghino.png')
	}

}
/* ================================
PANTAMUSA
================================ */
.panta {
	height: 86vh;
	display: flex;
}
.panta-1 {width: 50%;}
.panta-2 {width: 50%;}

@media all and (max-width: 576px){
.panta {
	flex-direction: column;
	height: 86vh;
}
.panta-1 {width: 100%; height: 50%;}
.panta-2 {width: 100%; height: 50%; font-size:0.6rem;}
}

/* ===========================
PANTALLA 
=========================== */

#pantalla {
	position:relative;
	width:100%;
	height:84vh;
background-color::#333;
}
#panta-footer {
	position:relative;
	width:100%;
	height:6vh;
background-color:#333;
	display:flex;
}
#panta-footer h4 {
	color:white;
	margin:auto;
}
#panta-footer h4 > span {
	color:#ff6600;
}

/* ===========================
CONTOBOX 
=========================== */
nav {display: block;}
nav ul, nav ol {
	list-style: none;
	list-style-image: none;
	margin: 0;
	padding: 0;
}
nav.contobox {
	width: 100%;
	height: 44vh;
-moz-box-shadow:1px 1px 12px #000;
-webkit-box-shadow:1px 1px 12px #000;
box-shadow:1px 1px 12px #000;
}
.gridex {
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	flex-flow: row wrap;
}
.gridex li {
	width: 20%;
	height: 50%;
	position:relative;
	background-color: rgba(0,153,204,0);
-webkit-box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.6);
-moz-box-shadow: inset 0 0 1px 0 rgba(0,0,0,0.6), inset 0 0 0 1px rgba(0,0,0,0.6);
box-shadow: inset 0px 0px 1px 0px rgba(0,0,0,0.6),inset 0 0 0 1px rgba(0,0,0,0.6);
}
.gridex li a {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0; left: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	font-family: "Bernardo Moda";
	text-transform: uppercase;
	font-size: 1.2rem;
	font-weight:600;
	color:rgba(255,255,255,0.8);
}
.gridex li a span{
	width:100%;
	height:25%;
	background-color:rgba(51,51,51,0.65);
	display:flex;
	justify-content:center;
	align-items:center;
}
.gridex.new li a span {
	font-size: 0.8rem;
	text-align:center;
}

.gridex li a:hover{
font-weight:900;
color:rgba(255,255,255,1);
background-color: rgba(0,0,0,0.6);
}

@media all and (max-width: 768px){
nav.contobox {height: 100vh;} 
.gridex li {width:50%; height:20%;}
.gridex li a{font-size: 0.8rem;}
}
@media all and (max-width: 768px){
nav.contobox {height: 150vh;} 
}

.musa-boutique {
  font-family: "Dynalight", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 2.5rem;
}