mivita/_static/assets/css/header-0.css
2018-10-29 09:39:31 +01:00

251 lines
4.6 KiB
CSS

#topMain {
position:fixed;
left:0; top:0;
right:0; bottom:0;
background-color:rgba(0,0,0,0.95);
height:100%;
width:100%;
display:table;
z-index:9999;
-webkit-transform: translate3d(-100%,0,0);
transform: translate3d(-100%,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
#topMain .menu-content {
display: table-cell;
vertical-align: middle;
color:#fff;
}
#topMain .menu-content span a:hover,
#topMain .menu-content p a:hover {
color:#fff;
text-decoration:none;
}
#topMain .menu-content>.container {
position:inherit;
}
/* Shown Menu */
body.show-menu {
overflow: hidden;
}
body.show-menu #topMain {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.34s;
transition: transform 0.34s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
body.show-menu .menu-list,
body.show-menu .menu-list ul li {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
body.show-menu .menu-list ul li {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
text-decoration: none;
}
/* menu list */
.menu-list ul {
font-family:sans-serif;
}
.menu-list ul li {
line-height: 54px;
}
.menu-list ul li a {
color:#fff;
font-weight: 900;
font-size: 30px;
text-decoration:none;
letter-spacing: 2.5pt;
}
/* open button */
ul.topNavBtn {
margin:0;
}
#menu_overlay_open:not(.custom-button) {
display: block;
border: none;
padding: 0;
cursor: pointer;
z-index: 1000;
height: 35px;
width: 35px;
background: transparent;
outline: 0;
float: right;
position: relative;
margin: 0;
margin-top:50%;
}
#header.header-sm #menu_overlay_open {
margin-top:8px;
}
#header.header-md #menu_overlay_open {
margin-top:12px;
}
#header.fixed #menu_overlay_open {
margin-top:8px;
}
#menu_overlay_open:not(.custom-button):hover{
border: 0;
box-shadow:none;
}
#menu_overlay_open:not(.custom-button)>span {
-webkit-transition: all 0.1s ease 0s;
transition: all 0.1s ease 0s;
display: block;
position: absolute;
width: 25px;
height: 2px;
left: 0;
right: 0;
top:21px;
margin: auto;
background: #545454;
}
#menu_overlay_open:not(.custom-button)>span:before,
#menu_overlay_open:not(.custom-button)>span:after {
-webkit-transition: all 0.2s ease 0s;
transition: all 0.2s ease 0s;
position: absolute;
content: '';
width: 25px;
height: 2px;
background: #545454;
left: 0;
}
#menu_overlay_open:not(.custom-button)>span:after{
top: -5px;
}
#menu_overlay_open:not(.custom-button)>span:before{
bottom: -5px;
}
#menu_overlay_open:not(.custom-button)>span:before {
bottom: -5px;
}
#menu_overlay_open:not(.custom-button)>span:after {
top: -5px;
}
html.no-touch #menu_overlay_open:not(.custom-button):hover>span:after {
top: -7px;
}
html.no-touch #menu_overlay_open:not(.custom-button):hover>span:before {
bottom: -7px;
}
/* close button */
#menu_overlay_close {
color: #fff;
position: absolute;
left: 50%; margin-left:-20px;
top: 0;
font-size: 25px;
width:60px;
height:60px;
cursor: pointer;
border:0;
background-color: rgba(255,255,255,0.1);
-webkit-transition: all .300s;
-moz-transition: all .300s;
-o-transition: all .300s;
transition: all .300s;
}
#menu_overlay_close:hover {
background-color: rgba(255,255,255,0.15);
}
/* search */
#header li.search {
padding-top:35px;
}
#header li.search .search-box {
display:none;
right: 0;
top: 100%;
padding: 15px;
background: #fcfafb;
position: absolute;
border-top: solid 2px #333;
box-shadow: 5px 5px rgba(91, 91, 91, 0.2);
width: 274px;
margin: -5px 0 0 0;
z-index: 22;
}
#header li.search i.sepy {
width: 1px;
height: 25px;
background: #eaeaea;
position: relative;
margin: 0 18px 0 16px;
display: inline-block;
}
#header li.search i.fa {
color: #333;
font-size: 16px;
cursor: pointer;
position: relative;
top: -6px;
width: 15px;
height: 15px;
opacity: 0.6;
}
form.mobile-search {
display:none;
}
#header li.search .search-box form {
margin:0;
}
@media only screen and (max-width: 768px) {
/*
#topMain {
position:absolute;
}
*/
#menu_overlay_close {
left: auto; right:0;
margin-left:0;
}
.menu-list ul li a {
font-size: 27px;
}
}