.menu-toggle {position: absolute; padding: 0.8em; top: 30px; right: 5%; cursor: pointer;}

.hamburger, .hamburger::before, .hamburger::after {content: ''; display: block; background: #ffffff; height: 3px; width: 2em; border-radius: 3px; -webkit-transition: all ease-in-out 350ms; transition: all ease-in-out 350ms;}
.hamburger::before {-webkit-transform: translateY(-7px); transform: translateY(-7px);}
.hamburger::after {-webkit-transform: translateY(4px); transform: translateY(4px);}
.open .hamburger {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.open .hamburger::before {display: none;}
.open .hamburger::after {-webkit-transform: translateY(-1px) rotate(-90deg); transform: translateY(-1px) rotate(-90deg);}


#navbar {position:fixed; top:0; left:0; display:block; width:100%; z-index:9999999999; width:100%}


nav {margin: 0; padding: 0;}
nav > ul {display: block; list-style-type: none; padding: 0; margin: 0; display: none; text-align:center}
nav > ul.opening {display: block; height:calc(100vh); background:url(../images/trans90.png) repeat; padding-top:150px}
nav > ul > li {font-size:24pt; line-height:36px; font-weight: 700;}
nav a {color: #cccccc; display: block; text-decoration: none;}
nav a:hover, nav a:focus {color:#FFFFFF}
.site-nav--icon {font-size: 1.4em; margin-right: 1em; width: 1.1em; text-align: right; color: rgba(255,255,255,.4);}

nav > ul > li.active a{color: #ffffff; font-weight:bold}


.scroller_anchor {position:relative !important; top:0; left:0; width:100%}

.menusociallinks {position:fixed; bottom:18px; right:18px; display:block; background:transparent !important}
.menusociallinks > li {display:inline-block; vertical-align:middle; margin: 0 8px;}
.menusociallinks > li a {opacity: 0.7;
transition: opacity 0.2s ease;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;}
.menusociallinks > li a:hover {opacity: 1;
transition: opacity 0.2s ease;
-webkit-transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;}
.bottom-textfpmenu {position:fixed; bottom:28px; left:28px;  font-size:9pt; color:#CCCCCC}

/* 
If the menu has to be fixed at TOP 
.scroller_anchor {position:fixed !important; top:0; left:0; width:100%}
*/

.site-nav {position:relative}



@media screen and (min-width: 300px) {
nav > ul.opening {padding-top:50px}
nav > ul > li {font-size:14pt; line-height:36px;}
.menusociallinks {position:relative; bottom:0; right:0; margin:20px auto; text-align:center}
.bottom-textfpmenu {position:relative; bottom:0; left:0; margin:0; text-align:center}
}


@media screen and (min-width: 768px) {
nav > ul.opening {padding-top:150px}
nav > ul > li {font-size:24pt; line-height:36px; margin-bottom:20px !important}
}

@media screen and (min-width: 1024px) {
.menusociallinks {position:fixed; bottom:18px; right:18px; margin:0}
.bottom-textfpmenu {position:fixed; bottom:28px; left:28px; margin:0; text-align:left}
}