* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;

}


body {
display: -ms-grid;
display: grid;
margin:0;
padding:0;
max-width: 100vw;
font-family: 'Montserrat', sans-serif;
-webkit-perspective-origin: 0% 50%;
        perspective-origin: 0% 50%;
-webkit-perspective: 800px;
        perspective: 800px;

}

.navheads {
display: -ms-grid;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.navheads h2 {
color: white;
}

.const {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
}

.imglogo {
position: relative;
z-index: 1;
top:0;    
height:12vmin;
width:50vmin;
top:0;
margin-top: 1vh;
background-color: teal;
-webkit-box-shadow: 1vmin 1vmin 1vmin grey;
        box-shadow: 1vmin 1vmin 1vmin grey;
}

#logo, #navs {
position: relative;
z-index: 1;
}

#logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
    -ms-flex-direction: row;
        flex-direction: row;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
}

#logo h2 {
margin:0;
margin-left:5vmin;
padding: 0 0.8vmin 0 0.8vmin;
border-style: solid;
border-width:3vmin;
border-color: #3a3947;

color: white;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
font-size: 4vmin;
background-color: ORANGERED;
text-align: center;

}


nav {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
z-index: 1;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
position: absolute;
top:0;
left: 0;
bottom: 0;
background-color: #353441; 
-webkit-transform: translateX(-100%); 
    -ms-transform: translateX(-100%); 
        transform: translateX(-100%);   
opacity: 0;
visibility:hidden; 
}


nav ul li:hover > ul {
opacity:1;
visibility: visible;
}

nav ul li span {
margin-right: 2vw;
line-height: 10vh;
text-align: center;
}

nav, main {
-webkit-transition: -webkit-transform 0.8s ease-out;
transition: -webkit-transform 0.8s ease-out;
-o-transition: transform 0.8s ease-out;
transition: transform 0.8s ease-out;
transition: transform 0.8s ease-out, -webkit-transform 0.8s ease-out;
} 


nav.menu-active {
-webkit-transform: translateX(0);
    -ms-transform: translateX(0);
        transform: translateX(0);
}

a {
text-decoration: none;
color:white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
} 


main h1 {
font-size: 4vmin;
font-weight: 300;
letter-spacing: 1px;
color: #fff;
text-transform: uppercase;
text-align: center;
background-color: #353441;
cursor: pointer;
height:8vmin;
width:8vmin;
background-size: cover;

}

nav li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 2vh;
color: #9dc6d1;
line-height: 10vh;
width:100%;
background-color: #353441;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

nav ul li {
font-size: 3vmin;
}

nav ul ul {
width:25vw;
position: absolute;
opacity: 0;
visibility:hidden;
left:100%;
}

nav li:nth-of-type(2n) {
background-color: #3a3947;
}

#act, nav li:hover {
background: ORANGERED;
  color: white;   
}

nav ul {
margin: 0;
padding: 0;
/* opacity: 0;
visibility:hidden; */
}

main {
z-index: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: -ms-grid;
display: grid;
-webkit-transform-origin: 0% 50%;
    -ms-transform-origin: 0% 50%;
        transform-origin: 0% 50%;
}

.sub1 li  {
font-size: 2.5vmin;
}