/*-------------------------------------------------------------- # Mainmenu --------------------------------------------------------------*/ .navholder { position: absolute; top:80px; left:0; right:0; z-index:300; } .navholder .container {padding:0px;} /* Pull */ a#pull { cursor:pointer; display:flex; display:-webkit-flex; justify-content: space-between; align-items:center; text-align:center; justify-content:center; top:0; right:0; padding:20px 0px; z-index:4000; transition:all 0.6s; -webkit-tap-highlight-color: transparent; } a#pull .text {display:none; font-size:16px; line-height:1; margin-left:7px; color:#333; font-weight:700; text-transform:uppercase;} a#pull .pull_button {display:inline-block; width:30px; } a#pull .pull_button span { display:block; width:100%; height:2px; background:#333; margin-bottom:6px; border-radius:100px; transition:all 0.3s; } a#pull span:nth-of-type(3) {margin-bottom:0px;} .pull_active .pull_button {margin-top:6px!important;} .pull_active .pull_button span:nth-of-type(1) { transform:rotate(45deg); margin-bottom:0px!important; } .pull_active .pull_button span:nth-of-type(2) { display:none!important; } .pull_active .pull_button span:nth-of-type(3) { transform:rotate(-45deg); } /* Nav */ #mainmenu { background:#b1b1b1; display:none; } #mainmenu ul { list-style-type:none; margin:0; padding:0; } #mainmenu ul li {position:relative;} #mainmenu ul li a { padding:0px 15px; height:50px; color:#FFF; font-size:17px; display:flex; display:-webkit-flex; align-items:flex-start; justify-content:center; z-index:1; flex-direction:column; } #mainmenu ul li .trigger { width:50px; height:50px; position:absolute; top:0; right:0; display:flex; display:-webkit-flex; flex-direction:column; align-items:center; justify-content:center; z-index:3; cursor:pointer; } #mainmenu ul li .trigger:before { font-family: 'FontAwesome'; content:"\f107"; font-size:25px; color:#FFF; } #mainmenu ul li.active { background:#464645; } #mainmenu .sub-menu { display:none; background:rgba(0,0,0,0.2); } #mainmenu .sub-menu li a {height:auto; padding:15px; font-size:15px;} .sticky { position: fixed!important; top: 0!important; left:0!important; right:0!important; width: 100%!important; } .sticky, .content { margin-top:-60px!important; padding-top: 60px; } @media(min-width:768px) { .navholder {position:relative; margin-top:-50px; top:inherit;} .navholder .container {padding:0px 15px;} a#pull {display:none;} #mainmenu { display:block!important; } #mainmenu>ul { display:flex; display:-webkit-flex; align-items:flex-start; position:relative; } #mainmenu>ul>li.haschildren>a { padding-right:30px; } #mainmenu>ul>li {position:initial;} #mainmenu .sub-menu { display:block; position:absolute; left:0; right:0; top:140%; width:100%; transition:all 0.3s; opacity:0; -webkit-opacity:0; -moz-opacity:0; visibility:hidden; background:#b5c50f; /*border-top:solid 5px #781c45;*/ } #mainmenu>ul>li>a {padding:0px 20px;} #mainmenu>ul>li>a, #mainmenu>ul>li>ul>li>a {transition:background 0.3s;} #mainmenu>ul>li>ul>li:hover>a {background:#464645;} #mainmenu>ul>li:hover>a {background:#b5c50f;} #mainmenu>ul>li.haschildren>a {position:relative;} #mainmenu>ul>li.haschildren>a:after { position: absolute; right: 10px; top: 0; bottom: 0; display: flex; display: -webkit-flex; align-items: center; font-family: 'FontAwesome'; content: "\f107"; font-size: 22px; font-weight: 400; transition: all 0.3s; } #mainmenu ul li .trigger {display:none;} #mainmenu>ul>li.submenu_open .sub-menu { opacity:1; -webkit-opacity:1; -moz-opacity:1; visibility:visible; top:100%; } }