/* Description: Header Version: 1.0 Author: BeeSoft - Web & Mobile Solutions Author URI: http://www.beesoft.it /* ============================================================================================== HEADER ============================================================================================== */ .header { position: absolute; position: fixed; top: 0; left: 0; width: 100%; z-index: 999; @include transition(0.6s); .logo { img { max-width: 100%; @include transition(0.6s); } float:left; } // Wide Screen @media only screen and (min-width: 1280px) { .logo { img { max-width: 75%; } } } // Laptop 15"/13" @media only screen and (min-width: 1280px) and (max-width: 1440px) { .logo { img { max-width: 90%; } } } } /* ============================================================================================== MAIN NAVBAR ============================================================================================== */ .navbar { @include transition( 0.4s ease-in-out ); .navbar-nav { li { a { font-size: 0.93rem; color: $color-white-text; font-weight: 600; padding: 0 0.5rem; margin: 0 0.5rem; position: relative; &:before { content: ''; width: 100%; height: 4px; background: $color-palette1; position: absolute; left: 0; bottom: -8px; @include opacity(0); @include transition(0.8s); } &:hover { color: $color-white-text; &:before { @include opacity(1); } } } &.current-menu-item { a { color: $color-white-text; &:before { @include opacity(1); } } } } } // Wide Screen @media only screen and (min-width: 1280px) { .navbar-nav { li { a { font-size: 1.08rem; padding: 0 0.8rem; margin: 0 0.8rem; letter-spacing: 1px; } } } } // Laptop 15"/13" @media only screen and (min-width: 1280px) and (max-width: 1440px) { .navbar-nav { li { a { font-size: 0.93rem; padding: 0 0.633rem; margin: 0 0.633rem; letter-spacing: 0; } } } } } /* ============================================================================================== SIDENAV ============================================================================================== */ .toggle-sidenav { position: relative; display: inline-block; img { width: 40px; height: 40px; @include border-radius(50%); @include transition( 1s cubic-bezier(.71,.72,0,.9) ); } &:hover { img { @include rotate(90); -webkit-box-shadow: 0px 0px 20px lightyellow; box-shadow: 0px 0px 20px lightyellow; } } } .sidenav { width: 250px; height: 100%; position: fixed; top: 0; right: -250px; background: $color-palette1; z-index: 987; @include transition( 0.6s ease-in-out ); ul { padding: 0; margin: 0; list-style: none; li { border-bottom: 1px solid rgba(255,255,255,0.1); a { width: 100%; display: inline-block; color: $color-white-text; font-size: 0.93rem; padding: .75rem 1.25rem; font-weight: 600; &:hover { background: $color-palette2; } } &.menu-item-has-children, &.has_children { & > a { background: $color-palette2; border-bottom: 1px solid rgba(255,255,255,0.1); } ul { li { a { background: $color-palette1; padding-left: 4rem; border-bottom: 3px solid transparent; font-weight: normal; &:hover { background: $color-palette3; border-bottom: 3px solid $color-white; } } &:last-child { border-bottom: none; } &.current-menu-item { a { background: $color-palette3 !important; border-bottom: 3px solid $color-white !important; } } } } } } } // Wide Screen @media only screen and (min-width: 1280px) { width: 300px; right: -300px; ul { li { a { font-size: 1.08rem; padding: .75rem 2rem; } &.has_children { ul { li { a { padding-left: 3.5rem; border-bottom: 3px solid transparent; &:hover { border-bottom: 3px solid $color-white; } } } } } } } } // Laptop 15"/13" @media only screen and (min-width: 1280px) and (max-width: 1440px) { width: 250px; right: -250px; ul { li { a { font-size: 0.93rem; padding: .75rem 1.25rem; } &.has_children { ul { li { a { padding-left: 2.5rem; } } } } } } } // Smartphone Portrait @media only screen and (max-width: 767px) { width: calc( 100vw - 70px ); right: -100%; max-height: 100vh; overflow-y: scroll; } } .sidenav-open { .toggle-sidenav, .navbar { @include translateX( -200px ); } .sidenav { right: 0; } // Wide Screen @media only screen and (min-width: 1280px) { .toggle-sidenav, .navbar { @include translateX( -300px ); } } // Laptop 15"/13" @media only screen and (min-width: 1280px) and (max-width: 1440px) { .toggle-sidenav, .navbar { @include translateX( -250px ); } } // Smartphone Portrait @media only screen and (max-width: 767px) { .header { .logo { img { @include opacity(0); } } } .toggle-sidenav { @include translateX( calc( -100vw + 70px ) ); } } } /* ============================================================================================== SCROLLING ============================================================================================== */ .scrolling { .header { background: rgba( 21,21,21, 0.55 ); } } .page-heading { height: 125vh; height: 100vh; .area-text { h1 { font-size: 3.5rem; font-weight: 600; color: $color-white-text; } p { font-size: 1.4rem; color: $color-white-text; font-weight: 400; } } .scrolldown-arrow { position: absolute; bottom: 1.5rem; left: 50%; @include translateX(-50%); z-index: 7; i { font-size: 2rem; color: $color-white; @include transition(0.6s); } &:hover { i { @include translateY(.5rem); } } } &.color-dark-layer { &:before { @include opacity(0.25); z-index: 3; } .container-fluid { z-index: 5; } } &.page-heading-video { height: 95vh; height: 100vh; position: relative; & > .container-fluid { position: relative; z-index: 4; } .page-heading-video-player { position: absolute; top: 0; left: 0; overflow: hidden; height: 100%; width: 100%; .videoBG { position: absolute; } } } &.page-heading-pic { height: 95vh; height: 89vh; position: relative; & > .container-fluid { position: relative; z-index: 4; } .page-heading-video-player { position: absolute; top: 0; left: 0; overflow: hidden; height: 100%; width: 100%; .videoBG { position: absolute; } } } &.product-heading-pic { height: 300vh; position: relative; & > .container-fluid { position: relative; z-index: 4; } } &.page-heading-map { width: 80%; height: 100vh; display: block; margin: 0 auto; #elitronMap { height: 95vh; height: 100vh; position: relative; z-index: 1; } .leaflet-popup-content { h6, p { font-family: $font1; font-weight: 300; line-height: 120%; margin: 0; font-size: 1.066rem; } h6 { color: $color-palette1; margin-bottom: 0.5rem; font-weight: 600; } } .scrolldown-arrow { i { color: $color-palette1; } } } &.page-heading-smaller { height: 70vh; height: 100vh; } // Wide Screen @media only screen and (min-width: 1280px) { height: 150vh; height: 100vh; &.page-heading-video { .page-heading-video-player { .videoBG { width: 100%; height: auto; /*width: auto; height: 100%;*/ } } } } // Laptop 15"/13" @media only screen and (min-width: 1280px) and (max-width: 1440px) { height: 125vh; height: 100vh; &.page-heading-video { .page-heading-video-player { .videoBG { width: auto; height: 100%; } } } } // Tablet & Smartphone Common rules @media only screen and (max-width: 991px), only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) { } // Tablet Portrait @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) { height: 75vh; } // Smartphone Portrait @media only screen and (max-width: 767px) { .area-text { h1 { font-size: 3rem; } p { font-size: 1.066rem; } } } // Smartphone Landscape @media only screen and (min-width: 480px) and (max-width: 767px) { height: 150vh; } } .page-heading2 { .area-text { h1 { font-size: 3.5rem; font-weight: 600; color: $color-white-text; } p { font-size: 1.4rem; color: $color-white-text; font-weight: 400; } } .scrolldown-arrow { position: absolute; bottom: 1.5rem; left: 50%; @include translateX(-50%); z-index: 7; i { font-size: 2rem; color: $color-white; @include transition(0.6s); } &:hover { i { @include translateY(.5rem); } } } &.color-dark-layer { &:before { @include opacity(0.25); z-index: 3; } .container-fluid { z-index: 5; } } &.page-heading-video { height: 95vh; height: 100vh; position: relative; & > .container-fluid { position: relative; z-index: 4; } .page-heading-video-player { overflow: hidden; height: 100%; width: 100%; .videoBG { position: absolute; } } } &.page-heading-pic2 { } &.product-heading-pic { height: 300vh; position: relative; & > .container-fluid { position: relative; z-index: 4; } } &.page-heading-smaller { height: 70vh; height: 100vh; } // Wide Screen @media only screen and (min-width: 1280px) { height: 150vh; height: 100vh; &.page-heading-video { .page-heading-video-player { .videoBG { width: 100%; height: auto; /*width: auto; height: 100%;*/ } } } } // Laptop 15"/13" @media only screen and (min-width: 1280px) and (max-width: 1440px) { height: 125vh; height: 100vh; &.page-heading-video { .page-heading-video-player { .videoBG { width: auto; height: 100%; } } } } // Tablet & Smartphone Common rules @media only screen and (max-width: 991px), only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) { } // Tablet Portrait @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait) { height: 75vh; } // Smartphone Portrait @media only screen and (max-width: 767px) { .area-text { h1 { font-size: 3rem; } p { font-size: 1.066rem; } } } // Smartphone Landscape @media only screen and (min-width: 480px) and (max-width: 767px) { height: 150vh; } }