/* Main */ header { background: #222; padding: 0; position: fixed; top: 0; left: 0; width: 100%; z-index: 200; } header a:hover, header a:focus { color: #fbc93d; } /* Logo */ header .logo { float: left; font-family: 'Open Sans', sans-serif; padding: 13px 23px; color: #fbc93d; font-weight: 800; font-size: 22px; line-height: 30px; margin: 0; } header .logo a { color:inherit; font:inherit; text-decoration:inherit; cursor: pointer; } header .logo img { margin-right: 10px; vertical-align: middle; } header .logo:hover { text-decoration: none; background: rgba(255,255,255,0.1); } /* Navigation */ header nav { float: right; } header nav ul { padding: 0; margin: 0; } header nav ul li { display: inline-block; float: left; } header nav ul li a, header nav ul li span { text-decoration:inherit; display: inline-block; padding: 15px 20px; color: #fff; transition: 100ms; } header nav ul li a:hover, header nav ul li a:focus { text-decoration: none; background: rgba(255,255,255,0.1); } header nav ul li a.active { color: #fbc93d; pointer-events: none; cursor: default; } /* Hamburger */ header .hamburger { display: none; padding: 5px; cursor: pointer; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; transition-duration: 150ms; transition-timing-function: linear; } header .hamburger:hover { opacity: 0.7; } header .hamburger-box { width: 40px; height: 24px; position: relative; } header .hamburger-inner { top: 50%; margin-top: -2px; } header .hamburger-inner, header .hamburger-inner::before, header .hamburger-inner::after { width: 40px; height: 4px; background-color: #fff; border-radius: 4px; position: absolute; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-duration: 150ms; transition-timing-function: ease; } header .hamburger-inner::before, header .hamburger-inner::after { content: ""; display: block; } header .hamburger-inner::before { top: -10px; } header .hamburger-inner::after { bottom: -10px; } header .hamburger--slider .hamburger-inner { top: 0; } header .hamburger--slider .hamburger-inner::before { top: 10px; transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; transition-timing-function: ease; transition-duration: 200ms; } header .hamburger--slider .hamburger-inner::after { top: 20px; } header .hamburger--slider.is-active .hamburger-inner { -webkit-transform: translate3d(0, 10px, 0) rotate(45deg); -moz-transform: translate3d(0, 10px, 0) rotate(45deg); -md-transform: translate3d(0, 10px, 0) rotate(45deg); -o-transform: translate3d(0, 10px, 0) rotate(45deg); transform: translate3d(0, 10px, 0) rotate(45deg); } header .hamburger--slider.is-active .hamburger-inner::before { -webkit-transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); -moz-transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); -ms-transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); -o-transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; } header .hamburger--slider.is-active .hamburger-inner::after { -webkit-transform: translate3d(0, -20px, 0) rotate(-90deg); -moz-transform: translate3d(0, -20px, 0) rotate(-90deg); -ms-transform: translate3d(0, -20px, 0) rotate(-90deg); -o-transform: translate3d(0, -20px, 0) rotate(-90deg); transform: translate3d(0, -20px, 0) rotate(-90deg); } @media (max-width: 800px) { header nav ul li a { padding:15px; } } /* Hamburger menu starts this window width */ @media (max-width: 655px) { header nav { float: none; position: fixed; top: 56px; right: -300px; bottom: 0; width: 100%; max-width: 300px; background: #333; transition: 100ms; } header nav.visible { right: 0px; } header nav ul li { display: block; float: none; width: 100%; } header nav ul li a { display: block; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.1); } header .hamburger { display: inline-block; color: #fff; position: absolute; right: 10px; top: 13px; } } /* Alerts */ .alert { padding: 15px; border: 1px solid transparent; border-radius: 4px; } noscript .alert-danger { z-index: 40; } .alert-danger { z-index: 30; color: #f2dede; background-color: #a94442; } .alert-warning { z-index: 20; color: #fcf8e3; background-color: #8a6d3b; } .alert-success { z-index: 10; color: #dff0d8; background-color: #3c763d; } .alert.alert-header { position: relative; border-radius: 0; top: 58px; width: 100%; } .alert a { z-index: 10; color: inherit; font-weight: bold; text-decoration: underline; } .alert a:hover { color: inherit; text-decoration: none; } .alert h4 { margin-top: 0; color: inherit; } .alert > p, .alert > ul { margin-bottom: 0; } .alert > p + p { margin-top: 5px; } .alert-dismissable { padding-right: 35px; } .alert .close, .alert-dismissible .close { cursor: pointer; float: right; color: inherit; }