/*------------------------------------------------------------------ Project: o2switch Version: 1.0 Last change: Assigned to: /**==========================================**/ /** Table of Content /**==========================================**/ /** ** General Settings ** Header & Navigation ** Responsive Settings /** =======================================================**/ /** General Settings **/ /** =======================================================**/ /* Body padding required The fixed navbar will overlay your other content, unless you add padding to the top of the */ body { font-family: 'Montserrat', sans-serif; font-weight: normal; background-color: #18191B; } html, body { height:100%; } /* Effects */ /* body { opacity: 1; -webkit-transition: 1s opacity; -moz-transition: 1s opacity; -ms-transition: 1s opacity; -o-transition: 1s opacity; transition: 1s opacity; } body.fade-out { opacity: 0; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } */ .btn-effect{ -webkit-border-radius: 20px; border-radius: 20px; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; background-color: #F09746; cursor: pointer; } .btn-effect:hover{ background-color: rgba(102, 102, 102, 1); -webkit-border-radius: 0; border-radius: 0; } html{ background-color: #FFF; } /** =======================================================**/ /** Fonts **/ /** =======================================================**/ .raleway{ font-family: "Raleway"; } /** =======================================================**/ /** Colors **/ /** =======================================================**/ .orange{ color: #f0913a; } .white{ color: #fff; } a { outline: none !important; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; transition: 0.3s ease; } a:hover, a:active, a:focus { color: inherit; outline: none !important; text-decoration: none; } html.no-scroll { overflow: hidden !important; } .display-table { position: relative; z-index: 1; display: table; width: 100%; height: 100%; } .display-table-cell { display: table-cell; vertical-align: middle; } .section-description { margin-bottom: 60px; } .overflow-hidden { overflow: hidden; } .square-img { display: block; width: 100%; height: auto; background-position: center; background-size: cover; } .noborder{ border:none !important; } .nomargin { margin: 0 !important; } .nomargin-right { margin-right: 0 !important; } .nomargin-left { margin-left: 0 !important; } .nomargin-bottom { margin-bottom: 0 !important; } .margin-top-5 { margin-top: 5px; } .margin-top-10 { margin-top: 10px; } .margin-top-15 { margin-top: 15px; } .margin-top-20 { margin-top: 20px; } .margin-top-25 { margin-top: 25px; } .margin-top-30 { margin-top: 30px; } .margin-top-35 { margin-top: 35px; } .margin-top-40 { margin-top: 40px; } .margin-top-45 { margin-top: 45px; } .margin-top-50 { margin-top: 50px; } .margin-top-55 { margin-top: 55px; } .margin-top-60 { margin-top: 60px; } .margin-top-65 { margin-top: 65px; } .margin-top-70 { margin-top: 70px; } .margin-top-75 { margin-top: 75px; } .margin-top-80 { margin-top: 80px; } .margin-top-85 { margin-top: 85px; } .margin-top-90 { margin-top: 90px; } .margin-top-95 { margin-top: 95px; } .margin-top-100 { margin-top: 100px; } .margin-bottom-5 { margin-bottom: 5px; } .margin-bottom-10 { margin-bottom: 10px; } .margin-bottom-15 { margin-bottom: 15px; } .margin-bottom-20 { margin-bottom: 20px; } .margin-bottom-25 { margin-bottom: 25px; } .margin-bottom-30 { margin-bottom: 30px; } .margin-bottom-35 { margin-bottom: 35px; } .margin-bottom-40 { margin-bottom: 40px; } .margin-bottom-45 { margin-bottom: 45px; } .margin-bottom-50 { margin-bottom: 50px; } .margin-bottom-55 { margin-bottom: 55px; } .margin-bottom-60 { margin-bottom: 60px; } .margin-bottom-65 { margin-bottom: 65px; } .margin-bottom-70 { margin-bottom: 70px; } .margin-bottom-75 { margin-bottom: 75px; } .margin-bottom-80 { margin-bottom: 80px; } .margin-bottom-85 { margin-bottom: 85px; } .margin-bottom-90 { margin-bottom: 90px; } .margin-bottom-95 { margin-bottom: 95px; } .margin-bottom-100 { margin-bottom: 100px; } .nopadding { padding: 0 !important; } .nopadding-right { padding-right: 0 !important; } .nopadding-left { padding-left: 0 !important; } .nopadding-top { padding-top: 0 !important; } .nopadding-bottom { padding-bottom: 0 !important; } .padding-top-5 { padding-top: 5px; } .padding-top-10 { padding-top: 10px; } .padding-top-15 { padding-top: 15px; } .padding-top-20 { padding-top: 20px; } .padding-top-25 { padding-top: 25px; } .padding-top-30 { padding-top: 30px; } .padding-top-35 { padding-top: 35px; } .padding-top-40 { padding-top: 40px; } .padding-top-45 { padding-top: 45px; } .padding-top-50 { padding-top: 50px; } .padding-top-55 { padding-top: 55px; } .padding-top-60 { padding-top: 60px; } .padding-top-65 { padding-top: 65px; } .padding-top-70 { padding-top: 70px; } .padding-top-75 { padding-top: 75px; } .padding-top-80 { padding-top: 80px; } .padding-top-85 { padding-top: 85px; } .padding-top-90 { padding-top: 90px; } .padding-top-95 { padding-top: 95px; } .padding-top-100 { padding-top: 100px; } .padding-bottom-5 { padding-bottom: 5px; } .padding-bottom-10 { padding-bottom: 10px; } .padding-bottom-15 { padding-bottom: 15px; } .padding-bottom-20 { padding-bottom: 20px; } .padding-bottom-25 { padding-bottom: 25px; } .padding-bottom-30 { padding-bottom: 30px; } .padding-bottom-35 { padding-bottom: 35px; } .padding-bottom-40 { padding-bottom: 40px; } .padding-bottom-45 { padding-bottom: 45px; } .padding-bottom-50 { padding-bottom: 50px; } .padding-bottom-55 { padding-bottom: 55px; } .padding-bottom-60 { padding-bottom: 60px; } .padding-bottom-65 { padding-bottom: 65px; } .padding-bottom-70 { padding-bottom: 70px; } .padding-bottom-75 { padding-bottom: 75px; } .padding-bottom-80 { padding-bottom: 80px; } .padding-bottom-85 { padding-bottom: 85px; } .padding-bottom-90 { padding-bottom: 90px; } .padding-bottom-95 { padding-bottom: 95px; } .padding-bottom-100 { padding-bottom: 100px; } .text-light { font-weight: 300 !important; } .text-bold { font-weight: bold !important; } .text-white { color: #fff !important; } .pull-left-xs { float: left !important; } @media (min-width: 768px) { .pull-left-sm { float: left !important; } } @media (min-width: 992px) { .pull-left-md { float: left !important; } } @media (min-width: 1199px) { .pull-left-lg { float: left !important; } } .pull-right-xs { float: right !important; } @media (min-width: 768px) { .pull-right-sm { float: right !important; } } @media (min-width: 992px) { .pull-right-md { float: right !important; } } @media (min-width: 1999px) { .pull-right-lg { float: right !important; } } /** ==============================================**/ /** Header & Navigation /** ==============================================**/ /* Top Menu */ .top-navbar{ min-height: 40px; background-color: #282828; z-index: 1031; } .top-header-menu{ margin: 10px; } .top-header-menu-left{ float: left; } .top-header-menu-right{ float: right; } .top-header-menu-left, .top-header-menu-right, .top-header-menu-left a, .top-header-menu-right a{ color: #a6a6a6; } .top-header-menu, .phone{ list-style: none; } .top-header-menu li a { padding: 0px 10px; font-size: 12px; } .top-header-menu li{ display: inline-block; vertical-align: middle; } .top-header-menu li:last-child { border-right: none; } .top-header-menu li a:hover{ color: #fff; } .top-header-menu-wrapper{ } .top-header-menu-right .left, .top-header-menu-right .right{ display: inline-block; vertical-align: middle; padding: 10px 0; } .phone{ width: 195px; background-color: #333333; margin-left: 27px; margin-right: 15px; } .phone img{ max-width: 25px; height: auto; margin: 0px 13px; } .phone i{ font-size: 20px; position: relative; right: -15px; top: 1px; font-weight: bold; } .phone .phone-number{ cursor: pointer; } .phone.open > .dropdown-menu { display: block; background-color: #333333; margin-top: 0; -webkit-border-top-left-radius: 0; border-top-left-radius: 0; -webkit-border-top-right-radius: 0; border-top-right-radius: 0; border-color: #333333; width: 100%; } .navbar-nav .dropdown .dropdown-menu .col-md-3:last-child .sub-item-wrapper .sub-item{ border: none; } /* Sticky navbar */ .navbar{ border-left: 0; border-right: 0; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; } .sticky-navbar.affix { position: fixed; top: 0; width: 100%; z-index: 100; } .sticky-navbar{ border:none; background-color: #181818; margin-bottom: 0; } .sticky-navbar.affix + .main{ padding-top:70px; } .sticky-navbar .sub-header-menu .navbar-nav > .active > a, .sticky-navbar .sub-header-menu .navbar-nav > .active > a:focus, .sticky-navbar .sub-header-menu .navbar-nav > .active > a:hover, .sticky-navbar .sub-header-menu .navbar-nav > .open > a, .sticky-navbar .sub-header-menu .navbar-nav > .open > a:focus, .sticky-navbar .sub-header-menu .navbar-nav > .open > a:hover{ color: #fefefe; background-color: initial; } .sticky-navbar .sub-header-menu .navbar-nav > li > a:focus, .sticky-navbar .sub-header-menu .navbar-nav > li > a:hover{ color: #f0913a; } .sticky-navbar .sub-header-menu .navbar-nav > li:last-child{ margin-right: 0; } /* For collapse menu (Mega menu) */ .sub-header-menu .nav, .sub-header-menu .collapse, .sub-header-menu .dropup, .sub-header-menu .dropdown { position: static; } .sub-header-menu{ width: 49%; } .sticky-navbar .header-btn-wrapp{ width: 30%; text-align: right; } .sub-header-menu .container { position: relative; } .sub-header-menu .dropdown-menu { left: auto; padding: 0; } .sub-header-menu .dropdown-content { padding: 20px 30px; } .sub-header-menu .dropdown.dropdown-fw .dropdown-menu { left: 0; right: 0; } .sticky-navbar .logo-wrapper{ width: 25%; z-index: 1033; text-align: left; } .logo-wrapper > .logo{ position: relative; top: -5px; /* left: 10%; */ } .affix .logo-wrapper > .logo{ top: 5px; } .logo-wrapper > .logo > img{ display: inline-block; max-height: 70px; } .sub-header-menu .dropdown-menu{ background-color: #333; border: none; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } .sub-header-menu .navbar-nav > li { text-transform: uppercase; margin-right: 20px; } .sub-header-menu .navbar-nav > li > a{ padding-top: 25px; padding-bottom: 25px; color: #fefefe; font-size: 14px; -webkit-transition: .7s; -moz-transition: .7s; -o-transition: .7s; -ms-transition: .7s; transition: .7s; } .sub-header-menu .navbar-nav > li::after{ width: 10px; height: 10px; -webkit-border-radius: 50%; border-radius: 50%; background: #333333; content: " "; position: absolute; /* left: -15px; */ top: 50%; margin-top: -5px; } .sub-header-menu .navbar-nav > li:last-child::after{ display: none; } .sub-header-menu .navbar-nav > li:hover::after{ background-color: #3F3E3E; } .sub-header-menu{ text-align: center; } .sub-header-menu{ text-align: right; } /* Sticky button */ .header-btn.left-btn-st img{ width: 20px; position: static; height: 17px; } .affix .header-btn.left-btn, .affix .header-btn.right-btn, .left-btn-st, .right-btn-st, .dropdown-st{ display:none; } .header-btn.left-btn-st, .header-btn.right-btn-st{ padding: 5px; } .header-btn.right-btn-st img{ position: relative; left:-3px; } .affix .phone{ margin-left: 25px; padding: 10px 0; } .affix .phone a{ color: #a6a6a6; } .affix .header-btn, .affix .phone{ display: inline-block; vertical-align: middle; text-align: left; } .header-btn, .header-btn:active, .header-btn:focus{ margin: 0 5px; padding: 5px 20px; font-size: 14px; text-transform: uppercase; color: #fefefe; border: 2px solid #f0913a; -webkit-border-radius: 20px; border-radius: 20px; cursor: pointer; overflow: hidden; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; -ms-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; /* -moz-transition: background-size 0.7s; -ms-transition: background-size 0.7s; -o-transition: background-size 0.7s; transition: background-size 0.7s; */ } .header-btn:hover{ color: #fefefe; -webkit-border-radius: 0; border-radius: 0; } .hvr-shutter-in-horizontal{ display: inline-block; vertical-align: middle; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; } .hvr-shutter-in-horizontal:active, .hvr-shutter-in-horizontal:focus, .hvr-shutter-in-horizontal:hover { -webkit-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; } .header-btn-inv{ color: #fff; background: -webkit-linear-gradient(#f0913a, #f0913a) left no-repeat, -webkit-linear-gradient(#f0913a, #f0913a) right no-repeat #181818; background: -o-linear-gradient(#f0913a, #f0913a) left no-repeat, -o-linear-gradient(#f0913a, #f0913a) right no-repeat #181818; background: linear-gradient(#f0913a, #f0913a) left no-repeat, linear-gradient(#f0913a, #f0913a) right no-repeat #181818; -webkit-background-size: 0 100%; -o-background-size: 0 100%; background-size: 0 100%; } .header-btn-normal{ background: -webkit-linear-gradient(#181818, #181818) left no-repeat, -webkit-linear-gradient(#181818, #181818) right no-repeat #f0913a; background: -o-linear-gradient(#181818, #181818) left no-repeat, -o-linear-gradient(#181818, #181818) right no-repeat #f0913a; background: linear-gradient(#181818, #181818) left no-repeat, linear-gradient(#181818, #181818) right no-repeat #f0913a; -webkit-background-size: 0 100%; -o-background-size: 0 100%; background-size: 0 100%; } .header-btn img{ width: 16px; height: 16px; position: relative; top: -2px; left: -7px; } .affix.sticky-navbar .header-btn img{ width: 20px; } /* Effects */ .sub-header-menu .effect{ opacity: 0; width: 0px; left: auto; height: 1.5px; bottom: 20px; /* -webkit-box-shadow: 0px 0px 3px 0.5px #f0913a; box-shadow: 0px 0px 3px 0.5px #f0913a; */ background: #f0913a; position: absolute; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; } .sub-header-menu .effect::before{ width: 3px; height: 1.5px; /* -webkit-box-shadow: 0px 0px 3px 0.5px #f0913a; box-shadow: 0px 0px 3px 0.5px #f0913a; */ -webkit-border-radius: 50%; border-radius: 50%; background: #f0913a; content: " "; position: absolute; left: -10px; top: 0px; } .dropdown-menu span{ display: block; } .dropdown-menu .col-md-3{ padding: 0; } .sub-item{ border-right: 2px solid #999; padding: 0 30px; } .sub-item-wrapper{ color:#feffff; cursor: pointer; display: inline-block; height: 100%; width: 100%; margin: 0 auto; padding: 20px 0; } .sub-item-wrapper:hover{ background-color: #FFF; -webkit-box-shadow: 0px 0px 0px 4px #fff; box-shadow: 0px 0px 0px 4px #fff; } .sub-item-wrapper:hover .sub-item{ border-right: 2px solid transparent; } .sub-item-wrapper:active{ } .sub-item-wrapper:hover .sub-item .sub-item-left{ color: #333; } .sub-item .sub-item-left, .sub-item .sub-item-right{ display: inline-block; vertical-align: middle; font-size: 13px; text-transform: none; } .sub-item .sub-item-title{ font-size: 14px; margin-bottom:15px; } .sub-item .sub-item-left{ max-width: 45px; width: 100%; } .sub-item .sub-item-right{ width: calc(100% - 60px); margin-left: 10px; font-family: 'Raleway', sans-serif; font-weight: 400; } /* Open when hover */ /* .sub-header-menu .dropdown:hover .dropdown-menu { display: block; } */ /* .dropdown-fw.open + .dropdown-menu-mobbile-wrapp{ display: block; } */ .sticky-navbar .dropdown-menu-mobbile-wrapp{ display: none; } .toggle-button .right{ display: none; } /* Footer */ footer{ background-color: #18191B; color: #fff; font-family: 'Lato', sans-serif; padding: 60px 0; } footer .orange{ color:#fe971e; } footer .grey{ color: #CCC; } footer .dark-grey{ color: #555; } footer .light-grey{ color: #838384; } footer hr{ border-top: 1px solid #555; } footer .widget { padding: 0 15%; border-right: 2px solid #303030; line-height: 24px; } footer .widget .widget-title{ font-size: 18px; font-weight: bold; } .widget-1 .widget-wrapper{ background-image: url("../img/contact-map.png"); -webkit-background-size: contain; -o-background-size: contain; background-size: contain; background-position: center; background-repeat: no-repeat; } .widget-1 .widget-content, .widget-2 .widget-content{ color: #CCC; font-size: 14px; margin: 25px auto; } .widget-2{ background-image: url("../img/footer-3.png"); background-position: center; background-repeat: no-repeat; background-size: contain; } .widget-1 .widget-flags-area{ margin-top: 10px; } .widget-1 .widget-flags-item{ padding: 2px 0; } .widget-1 .widget-flags-item img{ padding-right: 5px; } .widget-3 .widget-content{ margin-top: 25px; } .widget-3 .list-title{ font-size: 18px; color: #fff; } .widget-3 .widget-wrapper{ margin-top: -25px; } .widget-3 .widget-wrapper{ background-image: url("../img/footer-w3-bg.png"); -webkit-background-size: contain; -o-background-size: contain; background-size: contain; background-position: center; background-repeat: no-repeat; } /* Search */ .search{ margin: 20px auto; } .search input{ background-color: #FFF; -webkit-box-shadow: 3px 3px 0px 0px #f0913a; box-shadow: 3px 3px 0px 0px #f0913a; height: 35px; border: none; font-family: 'Lato'; font-size: 12px; font-style: italic; width: 190px; color: #6e6e6e; text-indent: 10px; } .search button{ background-color: #f0913a; border: 1px solid #f0913a; padding: 5px; color: #fff; font-family: 'Lato'; font-size: 20px; display: inline-block; vertical-align: middle; margin-left: 10px; } /* Vertical align */ /* .vhaling-wrapp { min-height: 355px; position: relative; } .vhaling{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; margin: 0 auto; } */ /* nav bar effects icons */ /* Navbar */ .navbar-toggle { border: none; background: transparent !important; } .navbar-toggle:hover { background: transparent !important; } .navbar-toggle .icon-bar { width: 35px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .navbar-toggle .top-bar { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 10% 10%; -moz-transform-origin: 10% 10%; -ms-transform-origin: 10% 10%; -o-transform-origin: 10% 10%; transform-origin: 10% 10%; } .navbar-toggle .middle-bar { opacity: 0; } .navbar-toggle .bottom-bar { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 10% 90%; -moz-transform-origin: 10% 90%; -ms-transform-origin: 10% 90%; -o-transform-origin: 10% 90%; transform-origin: 10% 90%; } .navbar-toggle.collapsed .top-bar { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .navbar-toggle.collapsed .middle-bar { opacity: 1; } .navbar-toggle.collapsed .bottom-bar { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } /* Main area */ .main{ } .jumbotron{ height: 1000px; background: none; }