@font-face { font-family:"arrow"; src: url(../res/fonts/icomoon.ttf); } .barba-container { position:relative; } .nav-bar-section { position:fixed; top:0; left:0; width:100%; z-index: 999; transition: all .5s ease; } .align-everything { display:flex; align-items: center; } .nav-computer { display:block; } .nav-mobile-top { display:none; } .nav-mobile-bottom { display:none; } .nav-mobile-bottom-hide { display:none; } .side-nav-wrapper { display:none; transition:all .5s ease; } #nav-bar { display:inline-block; width:70%; } #nav-bar-list { list-style: none; margin:0; padding:0; width:80%; display:flex; justify-content: flex-end; align-items: flex-end; } .nav-item { display:inline-block; padding:1% 5px 1% 5px; margin-right:1%; background-color: transparent; transition: border-bottom .2s ease; border-bottom:3px solid transparent; position:relative; white-space: nowrap; } .nav-item:last-child { margin-right:3%; } .nav-item:hover { border-bottom:3px solid #247400; } .nav-item:nth-child(3):hover .arrow-container { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); transform-origin: center; } .nav-item:nth-child(3):hover .drop-down { opacity:1; pointer-events: all; } .nav-item:nth-child(3) { position:relative; } .drop-down { opacity:0; pointer-events: none; background-color:#fff; position:absolute; top:100%; left:0px; width:100%; text-align: center; box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.25); border-top:3px solid #247400; transition:opacity .2s ease; } .drop-p { font-size:1.5rem; padding:13% 0 13% 0; } .drop-down-p-scrolling { font-size:1.2rem; padding:10% 0 10% 0; } .drop-down-padding a { text-decoration: none; color:#003467; } .drop-down-break { width:100%; border:1px solid rgba(0, 52, 103, 0.33); } .arrow-container { display:inline-block; transition:transform .2s ease; } .icon-Arrow:before { content: "\e900"; font-family:"arrow"; font-size:1.3rem; } .CurrentPage { border-bottom:3px solid #247400; } .contact-us { display:inline-block; font-size:1.7rem; outline:0; border:0; background-color:#56AC2F; color:#fff; padding:1%; cursor:pointer; font-family: "Roboto", sans-serif; font-weight:400; white-space: nowrap; text-align: center; transition:all .5s ease; } .contact-us:hover { background-color:#336EA7; } #cookies-wrapper { width:100%; position:fixed; bottom:0; background-color:#020202; opacity:0.9; transition:all 0.4s ease; } #message-wrap { padding:1% 5%; display:flex; justify-content: space-between; } #message-wrap p { font-size:1.5rem; color:white; width:60%; } #cookie-btn-wrap { width:40%; display:flex; align-items: center; justify-content: center; } #cookie-btn-wrap button { font-size:1.7rem; color:black; padding: 1% 10%; background-color:#ef0; border-radius: 10px; cursor:pointer; border:0; } #cookie-btn-wrap button:hover { background-color:#eefb3a; } @media only screen and (max-width: 1400px) { .align-content-center { width:90%; } #logo-wrap { margin:0; } .logo { width:70%; } .logo-scrolling { width:40%; } .nav-a { font-size:1.8rem; } .nav-a-scrolling { font-size:1.8rem; } .contact-scrolling { font-size:2rem; } } @media only screen and (max-width: 1200px) { .logo { width:70%; } .nav-a { font-size:1.9rem; } .nav-a-scrolling { font-size:1.8rem; } .contact-scrolling { font-size:2rem; } } @media only screen and (max-width: 850px) and (orientation: landscape) { .logo { width:70% !important; } .nav-bar-scrolling { padding:0%; } .logo-scrolling { padding:0; width:50% !important; height:auto; } .nav-a-scrolling { font-size:1.3rem; } .contact-scrolling { font-size:1.5rem; } } @media only screen and (max-width: 650px) and (orientation: landscape) { .logo-mobile { width:40% !important; } .social-media { height:40% !important; } .side-nav-wrapper { width:35vw !important; height:150vh !important; } .nav-bar-scrolling { height:20% !important; } #cookies-wrapper { bottom:0 !important; } } @media only screen and (max-width: 650px) { .nav-bar-scrolling { background-color:transparent !important; box-shadow: none !important; height:13% !important; } html, body { overflow-x: hidden; z-index:1; } .dim-background { position:fixed; top:0; left:0; width:100%; height:100%; background-color:black; opacity:0; pointer-events: none; z-index:1; } .nav-bar-scrolling { background-color:transparent; padding:0%; padding-top:1%; height:13%; box-shadow: none; } .logo-scrolling { padding:0; width:50%; height:auto; } .nav-a-scrolling { font-size:1.3rem; } .contact-scrolling { font-size:1.5rem; } .nav-padding-scrolling { padding-top:1%; } .nav-computer { display:none !important; } .nav-bar-section { position:absolute; top:0; left:0; } .nav-mobile-top { display:block; width:100%; height:100%; pointer-events:none; padding-top:15px; } .logo-mobile-align { width:100%; height:100%; } #logo-wrap { width:50%; height:100%; display:inline-block; margin:0; } .align-content-mobile { width:95%; margin:0 auto; height:100%; display:flex; align-items: center; justify-content: space-between; } #hamburger-icon { display:flex; justify-content: flex-end; align-items: center; float:right; width:45%; height:100%; } .hamburger-container { display: inline-block; cursor: pointer; pointer-events:all; z-index:2; } .bar1 { width: 25px; height: 5px; background-color: #265b8f; margin: 6px 0; transition: 0.4s; border-radius:25px; margin-left:auto; } .bar2, .bar3 { width: 35px; height: 5px; background-color: #265b8f; margin: 6px 0; transition: 0.4s; border-radius:25px; } .change .bar1 { -webkit-transform: rotate(-45deg) translate(-9px, 6px); transform: rotate(-45deg) translate(-9px, 6px); width:35px; background-color:#fff; } .change .bar2 {opacity: 0;} .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); background-color:#fff; } .side-nav-wrapper { position:absolute; top:0; right:-60vw; width:60vw; height:100vh; background-color:#265b8f; display:block; z-index:1; overflow-x: hidden; } .side-nav-relative { position:relative; width:100%; height:100%; } .side-nav-wrapper-show { right:0; } .side-nav-padding { padding-top:10%; height:50%; } .social-media { position:absolute; bottom:10px; cursor:pointer; display: block; width:90%; margin-left:5%; } .social-media-wrap { width:100%; height:100%; display:flex; justify-content: space-between; align-items: flex-end; } .social-media-side-nav { font-size:6rem; color:white } .social-media-side-nav:hover { opacity:0.9; } #side-list-wrap { display: inline-block; width:100%; height:100%; } #side-nav-list { list-style: none; width:90%; padding:0; margin:0 auto; margin-top:50px; height:100%; } .side-nav-item { display: inline-block; width:100%; height:15%; text-align: center; transition: all 0.5s ease; margin-bottom:5%; } .side-nav-item:hover { background-color:#377abb; } .arrow-mobile-container { display:inline-block; } .align-mobile-arrow { display:flex; width:100%; height:100%; align-items: center; justify-content: flex-end; } .icon-arrow-mobile:before { content: "\e900"; font-family:"arrow"; color:#fff; font-size:2rem; } .side-nav-image-wrap { width:30%; height:100%; display:inline-block; float:left; } .side-nav-image-wrap div { width:100%; height:100%; } .side-nav-image { width:auto; height:100%; } .side-nav-image:first-child { width:auto; height:80%; } .side-nav-a-wrap { display:inline-block; width:55%; height:100%; vertical-align: top; } .side-nav-a-wrap div { display:flex; align-items: center; width:100%; height: 100%; } @keyframes rotateArrow { from{transform:rotate(0deg);} to{transform:rotate(180deg);} } @keyframes rotateArrowBack { from{transform:rotate(180deg);} to{transform:rotate(0deg);} } .rotate-service { animation-name: rotateArrow; animation-duration: .5s; animation-iteration-count: 1; transform:rotate(180deg); } .rotate-service-out { animation-name: rotateArrowBack; animation-duration: .5s; animation-iteration-count: 1; transform:rotate(0deg); } @keyframes side-services { 0% { height:0%; } 100% { height:30%; } } @keyframes side-services-out { 0% { height:30%; } 100% { height:0%; } } .side-nav-services { width:80%; height:0; margin-left:auto; background-color:#184a7b; } .side-nav-services-anim { animation-name: side-services; animation-duration: .5s; animation-iteration-count: 1; height:30%; } .side-nav-services-anim-out { animation-name: side-services-out; animation-duration: .5s; animation-iteration-count: 1; height:0%; } .side-services-container { width:100%; height:50%; overflow: hidden; } .no-border { border:0; } .side-services-p p { color:#fff; font-size:2rem; } .side-services-img img { width:50%; height:auto; } .side-services-img { display:inline-block; width:30%; height:100%; } .side-services-img div { width:100%; height:100%; } .side-services-p { display:inline-block; width:70%; height:100%; vertical-align: top; } .side-services-p div { width:100%; height:100%; } .side-nav-a { text-decoration: none; color:#fff; font-size:2rem; width:100%; height:100%; } .side-nav-item-border { border:1px solid #56ac2f; border-radius: 25px; width:100%; } .nav-mobile-bottom-hide { display:none; position:fixed; left:0; bottom:0; height:20vw; width:100%; background: #377abb; z-index:1; } .nav-mobile-bottom { display:block; position:fixed; left:0; bottom:0; height:20vw; width:100%; background: #377abb; z-index:1; } #nav-bottom-align { margin: 0 auto; width:90%; height:100%; display:flex; justify-content: space-between; align-items: center; } .nav-bottom-img-wrap { width:25%; height:80%; cursor:pointer; } .nav-bottom-img-wrap:hover .nav-bottom-img { height:120%; } .nav-bottom-img-wrap:hover p { font-size:1.7rem; } .nav-img-split { display:block; width:100%; height:50%; } .nav-img-bot-height { width:100%; height:100%; } .nav-bottom-img { width:auto; height:100%; } .nav-img-bot-height p { color:#fff; font-size:1.5rem; } #cookies-wrapper { bottom:20vw; } #message-wrap { flex-direction: column; } #message-wrap p { width:100%; } #cookie-btn-wrap { width:100%; margin-top:10px; } #cookie-btn-wrap button { padding:5px 6%; } } @media only screen and (max-width: 400px) { .side-nav-wrapper { width:80vw; right:-80vw; } .side-nav-wrapper-show { right:0; } .side-nav-item { height:20%; } .side-nav-image:first-child { height:60%; } .side-nav-a { font-size:2.5rem; } .icon-arrow-mobile:before { font-size:2.5rem; } .side-nav-services { width:95%; } .side-services-img img { width:60%; } .side-services-p p { font-size:2.5rem; } .social-media-side-nav { font-size:5rem; } .side-nav-services { width:90%; } @keyframes side-services { 0% { height:0%; } 100% { height:40%; } } @keyframes side-services-out { 0% { height:40%; } 100% { height:0%; } } .side-nav-services-anim { height:40%; } .social-media-side-nav { font-size:4rem; } }