/*Fonts*/ @font-face { src: url('../fonts/Montserrat-SemiBold.otf'); font-family:'Montserrat'; font-weight:600; } @font-face { src: url('../fonts/Montserrat-Regular.otf'); font-family:'Montserrat'; font-weight:500; } /* ========================================================================== Author's custom styles ========================================================================== */ /*Colors: red = #d92131 black = #303030 */ /*Global classes*/ html,body {} html {min-height:100%; position:relative;} body {font-family:'Montserrat', 'sans-serif', 'arial'; font-weight:500;} h1 {color: #d92131;text-transform: uppercase;font-size: 1.7em;font-weight: 600; line-height:1.4em; margin-top:0; margin-bottom:15px;} h2 {color:#d92131;} h3 {color:#d92131;} h4 {color:#d92131;} h5 {color:#000;} h6 {color:#000;} p {color:#303030; line-height:1.8em; margin-bottom:20px;} a {color:#d92131; -webkit-transition:color 0.25s ease-in-out; transition:color 0.25s ease-in-out;} a:hover {text-decoration:none; color:#C01D2C;} a:focus {text-decoration:none; color:#C01D2C;} *:focus {outline:none !important;} textarea {resize:vertical;} strong, b {font-weight:600; color:#d92131;} /*Header*/ #header {min-height:330px; background:url('../img/background.jpg') no-repeat center top; background-size:cover;} #header .header {} #header .logo-container {float:left;} #header .logo-container .logo {float:left; margin-top:15px;} /*Navigation*/ #navigation {} #navigation ul {padding:0; list-style:none; list-style-image:none;} #navigation ul li {float:left; margin:0 15px;} #navigation ul li:first-child {margin-left:0;} #navigation ul li:last-child {margin-right:0;} #navigation ul li a {color:#fff; font-size:1.2em; text-shadow:1px 1px 3px #000; text-transform:uppercase; -webkit-transition:color 0.25s ease-in-out; transition:color 0.25s ease-in-out;} #navigation ul li a.active, #navigation ul li a:hover {color:#d92131;} /*Slogan*/ #header .slogan {float:left; width:100%; clear:both; margin-top:55px;} #header .slogan h2 {padding-left:130px; line-height:1.2em;display:inline-block; color: #fff; text-shadow: 2px 2px 6px #000; text-transform: uppercase; font-size: 2.8em; margin: 0; font-weight: 600;} #header .slogan h2.larger {font-size:3.4em;} #header .slogan img {display: block; float: right; margin-top: -148px; } /*Sticky footer*/ .push-bottom {position:absolute; width:100%; bottom:0;} /*Content*/ #content {margin-top:50px;} #content h1 {color: #d92131;text-transform: uppercase;font-size: 1.7em;font-weight: 600; line-height:1.4em; margin-top:0; margin-bottom:15px;} #content h2 {color: #d92131;text-transform: uppercase;font-size: 1.7em;font-weight: 600; line-height:1.4em; margin-top:0; margin-bottom:15px;} #content h3 {color: #d92131;text-transform: uppercase;font-size: 1.7em;font-weight: 600; line-height:1.4em; margin-top:0; margin-bottom:15px;} #content .content {} #content .sidebar p.user {margin-bottom:0; background:url('../img/icon/user.png') no-repeat left center; padding-left:20px;} #content .sidebar p.phone {margin-bottom:0; background:url('../img/icon/phone.png') no-repeat left center; padding-left:20px;} #content .sidebar p.mobile {margin-bottom:0; background:url('../img/icon/mobile.png') no-repeat 2px center; padding-left:20px;} #content .sidebar p.mail {background:url('../img/icon/mail.png') no-repeat left center; padding-left:20px;} #content .sidebar p.no-margin {margin-bottom:0;} #content .sidebar a.facebook {margin-bottom:7px; padding-top:2px; padding-left:30px; display:block; min-height:23px; background:url('../img/icon/facebook.png') no-repeat left center;} #content .sidebar a.pinterest {margin-bottom:7px; padding-top:2px; padding-left:30px; display:block; min-height:23px; background:url('../img/icon/pinterest.png') no-repeat left center;} #content .sidebar a.linkedin {margin-bottom:7px; padding-top:2px; padding-left:30px; display:block; min-height:23px; background:url('../img/icon/linkedin.png') no-repeat left center;} #content .sidebar a {color:#303030; -webkit-transition:color 0.25s ease-in-out; transition:color 0.25s ease-in-out;} #content .sidebar a:hover {color:#d92131;} /*Footer*/ #footer {margin-top:50px; background:url('../img/footerbg.jpg') no-repeat center top; height:123px; background-size:cover;} #footer .footer {} #footer p {color:#fff; text-shadow:1px 1px 3px #000; font-weight:500; font-size:1.0em; margin-top:52px;} #footer a {color:#fff; text-shadow:1px 1px 3px #000; font-weight:500; font-size:1.0em; margin-top:52px; -webkit-transition:color 0.25s ease-in-out; transition:color 0.25s ease-in-out;} #footer a:hover {color:#d92131;} /* ========================================================================== Media Queries ========================================================================== */ /*Mobile*/ @media (max-width: 767px) { /*Default navigation styles*/ #navigation .logo-container a {display:block;} #navigation .logo-container a img {margin:0 auto; max-width:90%; display:block; margin-top:15px;} #navigation {background-color: #FFF; ransition:width ease-in-out 0.28s; position:fixed; left:0; top:0; bottom:0; overflow:hidden; cursor:default; overflow-x:hidden; overflow-y:auto; border-right: 1px solid #d1d1d1; width:250px; height:initial; top:0px; display:block; z-index:8; left:-215px; -webkit-transition:0; transition:0;} #navigation ul {margin:0; padding:0; list-style:none; list-style-image:none;margin: 0 auto;margin-right: 0px;padding-right: 0px; position: absolute; left: 0; padding-left:15px; width:250px; padding-right:15px; padding-top:20px;} #navigation ul li {float:left; display:block; width:100%; margin:0; margin-bottom:10px;} #navigation ul li a {-webkit-transition:color ease-in-out 0.28s, background-color ease-in-out 0.28s;transition:color ease-in-out 0.28s, background-color ease-in-out 0.28s; padding:5px 0; display:block; text-transform:capitalize; font-family:Verdana; border-bottom:1px solid #000; color:#000; text-shadow:none; font-weight:600;} /*--------------------------------------------! DO NOT CHANGE VALUES OTHER THAN WIDTH AND LEFT VALUES !-------------------------------------------- */ #navigation .navigation-wrapper {position:relative; height:auto; width:250px;} ul#main-navigation {transition:left 0.4s ease-in-out; -webkit-transition:left 0.4s ease-in-out; -moz-transition:left 0.4s ease-in-out; -o-transition:left 0.4s ease-in-out;} #main-navigation.show-sub {left:-250px;} #navigation.mobile-hidden {left:-250px; -webkit-transition:left 0.28s ease-in-out; transition:left 0.28s ease-in-out;} #navigation.mobile-visible {left:0; -webkit-transition:left 0.28s ease-in-out; transition:left 0.28s ease-in-out;} /*subnavigatie*/ #navigation ul.sub-navigation {position:absolute; top:0; left:300px; width:245px; display:none;} #navigation ul.sub-navigation li:nth-child(2) a {margin-bottom:20px;} #navigation ul.hide-sub {display:block;} #navigation ul.active-sub {display:block !important;} /*--------------------------------------------! DO NOT CHANGE VALUES OTHER THAN WIDTH AND LEFT VALUES !-------------------------------------------- */ /*Nav toggle button*/ .nav-toggle-bar {position: absolute; top: 30px; right: 15px;} .nav-toggle {border:0; margin:0; padding:0; background:0;padding: 10px 10px;} .nav-toggle .icon-bar {background-color: #fff;display: block;width: 40px;height: 6px;border-radius: 15px;margin-bottom: 5px;} .nav-toggle .icon-bar:last-child {margin-bottom:0;} /*Nav back element, only visible on mobile*/ #navigation .nav-back {display:block; color:#aaa; cursor:pointer;} body .overlay {display:block; opacity:0.5; filter: alpha(opacity=50); position: fixed; height: 100%; width: 100%; background-color: #000; z-index: 7; top: 0; left: 0; right: 0; } #header {position:relative;} #header .slogan {margin-top:25px;} #header .slogan h2 {position:relative; z-index:2; padding-left:0px; font-size:4.1vw;} #header .slogan h2.larger {font-size:4.97vw;} #header .slogan img {margin-top:0; max-width:160px; position:absolute; bottom:0; right:15px;} #footer p {margin:0;} #footer p.pull-left {width:100%; display:block; clear:both; margin-top:40px;} #footer div.pull-right {float:left !important; } .main-content {margin-bottom:50px;} } /*Tablet*/ @media (min-width: 768px) and (max-width: 992px) { #header .slogan h2 {padding-left:0px; font-size:2.0em;} #header .slogan h2.larger {font-size:2.43em;} #header .slogan img {margin-top:-74px; max-width:160px;} #navigation ul li {margin:0 10px;} .main-content {margin-bottom:50px;} } /*Small Desktop*/ @media (min-width: 992px) and (max-width: 1200px) { #header .slogan h2 {padding-left:50px;} } /*Large Desktop*/ @media (min-width: 1200px) { } @media (min-width: 768px) { #navigation {float:left; margin-left:20px; margin-top:37px;} #navigation .navigation-wrapper {margin:0 auto; padding:0 15px;} #navigation .slimScrollDiv {overflow:initial !important;} #navigation ul li ul.sub-navigation {display:none; padding:0; margin:0; position: absolute; z-index: 2; background: #fff; border: 1px solid #000; padding: 5px;} #navigation ul li ul.sub-navigation.show-sub-nav {display:block;} #navigation ul li ul.sub-navigation li {display:block; margin:0; float:initial; width:100%;} #navigation li.nav-back, #navigation li.parent-menu {display:none !important;} }