html { background: #081618; color: #FAF8FB; font-family: 'Work Sans', sans-serif; scroll-behavior: smooth; }
body { margin: 0; -webkit-animation-delay: 1s; -webkit-font-smoothing: subpixel-antialiased; overflow: auto; }
/*
.normal-cursor {cursor: url('../images/cursor-normal.svg'), auto;}
.hover-cursor {cursor: url('../images/cursor-hover.svg'), auto;}
*/
.cursor-arrow { cursor: url('../images/cursor-arrow.svg'), auto; }
h1, h2, h3,
h4, h5, h6 { font-weight: normal; font-style: normal; margin: 0; }
.heading1 { font-size: 8vw; font-family:'noe_display_bold' !important; }
.heading2 { font-size:40px; line-height: 55px; font-family:'noe_display_bold' !important; }
.heading3 { font-size:24px; font-family:'Work Sans'; }
.heading4 { font-size:20px; font-family:'Work Sans'; }
.heading5 { font-size:80px; font-family:'noe_display_bold' !important; }
.heading6 { font-size:24px; font-family:'noe_display_bold' !important; }
.heading7 { font-size:10px; font-family:'Work Sans'; }
p { font-size:24px; line-height: 36px; font-family:'Work Sans'; }
a { font-size: inherit; text-decoration: none; margin: inherit; padding: inherit;}
a { color: inherit; transition: color .5s ease; }
a:hover { }
img { vertical-align: bottom; width: 100%; }
strong { font-weight: 700; }
.clearspace { clear: both; }
.spacer { height: 90px; width: auto; }
.center { text-align: center; }
.divider-line { margin: 90px 0; width: 100%; height: 1px; background-color: #D0CEE9; }
.header-padding { height: 120px; display: block; clear: both; }
-webkit-scrollbar { display: none; }
.text-green { color: #0F414C; }
.text-white { color: #FAF8FB; }
.text-red { color: #ED5A61; }
.background-ui-green { background-color: #081618; }
.background-green { background-color: #0F414C; }
.background-off-white { background-color: #FAF8FB; }
.background-white { background-color: #FFFFFF; }
.background-light-green { background-color: #BFE1E1; }
.background-red { background-color: #ED5A61; }
/*-----------------------------------------------------------------
noe display bold font
-----------------------------------------------------------------*/
@font-face {font-family: "noe_display_bold";
src: url("../fonts/noe_display_bold.eot"); /* IE9*/
src: url("../fonts/noe_display_bold.?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("../fonts/noe_display_bold.woff2") format("woff2"), /* chrome、firefox */
url("../fonts/noe_display_bold.woff") format("woff"), /* chrome、firefox */
url("../fonts/noe_display_bold.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url("../nfonts/noe_display_bold.svg#NoeDisplay-Bold") format("svg"); /* iOS 4.1- */
}
/*-----------------------------------------------------------------
Global
/*-----------------------------------------------------------------*/
/*-- burger menu --*/
.overlay { z-index: 2; height: 0; width: 100%; position: fixed; top: 0; left: 0; background-color: rgb(0,0,0); background-color: #081618; overflow-x: hidden; transition: 0.6s; transition-timing-function: ease-in; }
.overlay-content { position: relative; top: 25px; width: 100%; text-align: center; }
.overlay a { text-decoration: none; font-size:40px; color: #fbfbfb; display: block; transition: 0.6s; }
.overlay a:hover,
.overlay a:focus { color: #f25a5f; }
.overlay
.closebtn { z-index: 99!important; position: absolute; top: 10px; right: 5%; }
/*.menu-divider-line { border-bottom: #0F414C 1px solid; width: 5%; margin: 5px auto 0 auto; }*/
.menu-subtext { font-size: 12px; padding: 5px 0 0 0; }
.menu-links { font-size: 6vw; margin: 0; font-family:'noe_display_bold' !important;}
/*-- Thinking slow news--*/
#newsletter-container { width: 76%; padding: 0 12%; }
.newsletter-text { box-sizing: border-box; width: 100%; padding: 90px 0; }
/*-- container--*/
.container-12 { width: 90%; height: auto; padding: 30px 5%; margin: 0 auto; display: block; overflow: auto; }
.container-10 { max-width: 1440px; width: 76%; padding: 0 12%; display: block; overflow: auto;}
.container-8 { max-width: 1440px; width: 60%; padding: 0 20%; display: block; overflow: auto; }
/*-- navbar--*/
#navbar-fixed { transition: all 0.5s ease; display: block; z-index: 1; height: 45px; width: 90%; padding: 30px 5%; margin: 0 auto; position: fixed; top: 0; left: 50%; transform: translateX(-50%); }
.navbar-left-fixed { vertical-align: top; float: left; }
.navbar-right-fixed { vertical-align: top; float: right; padding: 0; }
.logomark-absolute { vertical-align: top; height: 55px; width: auto; position: absolute; left: 5%; }
.menu-absolute { vertical-align: top; height: 24px; width: auto; position: absolute; right: 5%; }
.navbar-mobile-color { display: none; opacity: 0; background-color: #081618; color: #081618; position: fixed; top: 0; left: 0; width: 100%; height: 60px; z-index: -1; }
.navbar-mobile-color-white { display: none; opacity: 0; background-color: #FAF8FB; color: #FAF8FB; position: fixed; top: 0; left: 0; width: 100%; height: 60px; z-index: -1; }
/*--bullet-points --*/
ul { list-style: none } /*-- hides original bullet --*/
li::before {content: "•"; color: #7BBDBE; font-size: 24px; line-height: 36px; display: inline-block; width: 1em; margin-left: -1.5em}
li { padding: 2% 0; }
/*-- footer--*/
.footer { text-align: center; width: 90%; padding: 90px 5%; margin: 0 auto; }
.footer-social { width: auto; margin: 0 auto; text-align: center; }
.footer-social-icons { height: 30px; width: auto; display: inline-block; padding: 10px; }
.footer-legal { clear: both; width: auto; margin: 0 auto; padding: 10px 0; }
.footer-links { margin: 0 auto; padding: 10px; display: inline-block;}
a.heading7 { padding: 0 5px;}
.footer-links-dot { height: 6px; width: auto; display: inline-block; transform: translateY(-4px)}
/*-----------------------------------------------------------------
Home (index)
/*-----------------------------------------------------------------*/
#home-hero { z-index: 1; height: 100vh; width: 100vw; display: table-cell; vertical-align: middle; text-align: center; }
.hero-stamp { display: inline; width: 100%; min-height: 100%; position: absolute; top: 0; left: 0; z-index: -2; }
.hero-message { display: inline-block; width: 80%; height: auto; }
#home-intro { margin: 120px 0 240px 0; text-align: center; }
.home-intro-heading { margin: 0 0 30px 0; }
#home-services { margin: 120px 0 0 0; display: block; overflow: hidden; text-align: center; padding-top: }
.home-services-heading { margin: 0 0 60px 0; }
.home-services-card-left { margin: 0 1% 2% 0; }
.home-services-card-right { margin: 0 0 2% 1%; }
.home-services-card-icon { border-radius: 10px; height: 120px; width: auto; }
.home-services-card-left,
.home-services-card-right { border-radius: 10px; text-align: center; float: left; width: 39%; background-color: #091B1E; padding: 90px 5%;
transform: translateY(0px); filter: drop-shadow(5px 15px 15px rgba(0, 0, 0, 0)); transition: all 0.3s ease; }
.home-services-card-left:hover,
.home-services-card-right:hover
{ transform: translateY(-10px); filter: drop-shadow(5px 15px 15px rgba(0, 0, 0, 0.3)); transition: all 0.3s ease; }
.testimonial-image { height: 75px; width: auto!important; text-align: center; margin: 0 auto; border: 1px solid #0F414C; border-radius: 120px; }
/*-----------------------------------------------------------------
About (Who are we?)
/*-----------------------------------------------------------------*/
#about-hero { padding: 0 auto ; }
.about-simply-put { background: url('../images/stamp_animated.svg') no-repeat; background-position: center center; background-size: 80vh; height: 101vh; width: 100vw; display: table-cell; vertical-align: middle; text-align: center; }
.about-simply-put-headline { display: inline-block; width: 80%; height: auto; margin: 0 auto; }
.about-values { margin: 90px 0; text-align: center; height: auto; display: block; }
.about-values-heading { margin: 0 0 45px 0; }
.about-values-card-1,
.about-values-card-2,
.about-values-card-3 { min-height: 530px; overflow: hidden; border-radius: 10px; text-align: center; float: left; width: 26%; padding: 30px 3%; margin: 0 2% 0 0; }
.about-values-card-3 { margin: 0; }
.about-values-card-icon { height: 40px; width: auto; }
.about-core-tools { padding-top: 120px; padding-bottom: 120px; text-align: center; }
.about-core-tools-logos { width: 30%; height: auto; display: inline-block; }
.about-other-tools { padding-top: 120px; text-align: center; }
.about-other-tools-flexbox { height: 100%; overflow: auto; }
.about-other-tools-logos { width: 20%; padding: 20px; display: inline-block; }
/*-----------------------------------------------------------------
Our approach (What's our approach?)
/*-----------------------------------------------------------------*/
.abc-carousel-slide { width: 100%; height: 100vh; margin: 0 auto; display: block; overflow: auto; display: table-cell; vertical-align: middle; text-align: center; }
.abc-carousel-text { width: 60%; margin: 0 auto; padding: 90px 0; min-height: 250px;}
.work-and-experience { margin: 120px 0; }
.work-and-experience-heading { margin: 0 0 45px 0; }
.work-and-experience-card { width: 47%; float: left; }
.rounded-images { border-radius: 10px; }
.left { margin: 0 5% 10% 0; }
.right { margin: 0 0 10% 0; }
.diff { margin: 60px 0 0 0; display: block; overflow: auto; }
.diff-heading { margin: 0 0 30px 0; }
.diff-card { float: left; width: 45%; padding: 2% 5% 2% 0; margin: 0 0 45px 0; }
.diff-card-title { width: 100%; float: left; }
.diff-card-icon { float: left; height: 45px; width: auto; padding: 10px 20px 10px 0; }
.diff-card-heading { transform: translateY(15px)}
.diff-card-body { clear: both; }
/*-----------------------------------------------------------------
Services Landing (How do we help?)
/*-----------------------------------------------------------------*/
.how-do-we-do-it { padding-bottom: 90px; }
.core-services { max-width: 1440px; width: 76%; padding: 10px 12%; background-image: linear-gradient(#081618 10%, #FAF8FB 10.001%); }
.core-services-card-left { margin: 0 1% 2% 0; }
.core-services-card-right { margin: 0 0 2% 1%; }
.core-services-card-icon { border-radius: 10px; height: 120px; width: auto; }
.core-services-card-left,
.core-services-card-right { border-radius: 10px; text-align: center; float: left; width: 39%; padding: 60px 5%; min-height: 500px;
transform: translateY(0px); filter: drop-shadow(5px 15px 15px rgba(0, 0, 0, 0)); transition: all 0.3s ease; }
.core-services-card-left:hover,
.core-services-card-right:hover { transform: translateY(-10px); filter: drop-shadow(5px 15px 15px rgba(182, 182, 182, 0.3)); transition: all 0.3s ease; }
.services-agency-heading { margin: 0 0 60px 0 }
.service-agency-card-left { margin: 0 1% 2% 0; }
.service-agency-card-right { margin: 0 0 2% 1%; }
.service-agency-card-left,
.service-agency-card-right { border-radius: 10px; text-align: center; float: left; width: 39%; padding: 60px 5%; min-height: 800px;
transform: translateY(0px); filter: drop-shadow(5px 15px 15px rgba(0, 0, 0, 0)); transition: all 0.3s ease; }
.service-agency-card-left:hover,
.service-agency-card-right:hover { transform: translateY(-10px); filter: drop-shadow(5px 15px 15px rgba(182, 182, 182, 0.3)); transition: all 0.3s ease; }
/*-----------------------------------------------------------------
Service (Individual pages)
/*-----------------------------------------------------------------*/
.impact { border-radius: 10px; max-width: 1440px; padding: 4% 8%; margin: 6% 12%; display: block; overflow: auto; }
.service-button { border-radius: 6px; padding: 15px 30px; margin: 4% 0 0 0; width: auto; display: inline-block; }
/*-----------------------------------------------------------------
Contact Us (Want to talk?)
/*-----------------------------------------------------------------*/
.contact { padding-bottom: 90px; }
.contact-join { margin: 120px auto; }
/*-----------------------------------------------------------------
TO BE SORTED
/*-----------------------------------------------------------------*/
.what-do-we-do { padding-bottom: 45px; }
/*-----------------------------------------------------------------
start responsive layout
/*-----------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
/*-- footer--*/
.footer { width: 90%; padding: 45px 5%; margin: 0 auto; }
.footer-social-icons { padding: 10px; }
.footer-legal { margin: 0 auto; padding: 0 0; }
.footer-links { margin: 0 auto; padding: 5px; }
a.heading7 { padding: 0 5px;}
.about-values-card-1,
.about-values-card-2,
.about-values-card-3 { min-height: 670px; }
.core-services-card-left,
.core-services-card-right { min-height: 550px; }
.service-agency-card-left,
.service-agency-card-right { min-height: 900px; }
}
@media screen and (max-width: 1024px) {
/* home */
#home-services { text-align: center; }
.home-services-card-left { margin: 0 0 4% 0; }
.home-services-card-right { margin: 0 0 4% 0; }
.home-services-card-icon { }
.home-services-card-left,
.home-services-card-right { padding: 90px 10%; width: auto; }
.what-do-we-do { padding-bottom: 0!important; }
/* our approach */
.abc-carousel-slide { }
.abc-carousel-text { width: 80%; margin: 0 auto; padding: 45px 0; min-height: 300px;}
.work-and-experience { text-align: center; }
.work-and-experience-heading { }
.work-and-experience-card { width: 80%; float: none; }
.rounded-images { }
.left { margin: 0 auto 90px auto; }
.right { margin: 0 auto 90px auto; }
/* services landing */
.core-services { margin-top: 30px; padding: auto; }
.core-services-card-left { margin: 0 0 4% 0; }
.core-services-card-right { margin: 0 0 4% 0; }
.core-services-card-icon { }
.core-services-card-left,
.core-services-card-right { padding: 60px 10%; width: auto; min-height: 50px!important; }
/* services landing additional */
.service-agency-card-left { margin: 0 0 4% 0; }
.service-agency-card-right { margin: 0 0 4% 0; }
.service-agency-card-left,
.service-agency-card-right { padding: 60px 10%; width: auto; min-height: 50px!important; }
/* our approach */
.about-values { margin: 15px 0; }
.about-simply-put { height: 90vh; }
.about-simply-put-headline { }
.about-values-card-1,
.about-values-card-2,
.about-values-card-3 { min-height: 0; width: auto; padding: 45px 5%; margin: 0 0 3% 0; }
.about-values-card-3 { margin: 0; }
.about-values-card-icon { height: 40px; width: auto; }
.about-core-tools { padding-top: 120px; padding-bottom: 0; text-align: center; }
.about-core-tools-logos { width: 50%; padding: 0; height: auto; display: inline-block; }
.about-other-tools { padding-top: 120px; padding-bottom: 60px; text-align: center; }
.about-other-tools-flexbox { height: 100%; overflow: auto; }
.about-other-tools-logos { width: 50%; padding: 0; display: inline-block; }
.contact-join { margin: 90px auto; }
}
@media screen and (max-width: 768px) {
/*-- container--*/
.container-12 { width: 75%; height: auto; padding: 30px 13%; margin: 0 auto; display: block; overflow: auto; }
.container-10 { max-width: 1440px; width: 75%; padding: 0 13%; display: block; overflow: auto;}
.container-8 { max-width: 1440px; width: 75%; padding: 0 13%; display: block; overflow: auto; }
.how-do-we-do-it { padding-bottom: 90px; }
/* our approach */
.abc-carousel-slide { }
.abc-carousel-text { }
.work-and-experience { margin: 60px 0; }
.work-and-experience-heading { }
.work-and-experience-card { width: 80%; float: none; }
.rounded-images { }
.left { margin: 0 auto 60px auto; }
.right { margin: 0 auto 60px auto; }
.diff { }
.diff-heading { }
.diff-card { float: left; width: 100%; padding: 0 0 30px 0; margin: 0; }
.diff-card-title { }
.diff-card-icon { }
.diff-card-body { }
.contact { padding-bottom: 60px; }
}
@media screen and (max-width: 580px) {
.header-padding { height: 60px; display: block; clear: both; }
.heading1 { font-size: 15vw; font-family:'noe_display_bold' !important; }
.measurement { font-size: 13vw; }
/*-- navbar--*/
#navbar-fixed { width: 96.5%; padding: 2%; }
.navbar-right-fixed { float: right; padding: 9px 0 0 0; }
.navbar-mobile-color { display: inline-block; }
.navbar-mobile-color-white { display: inline-block; }
.container-12 { width: 90%; height: auto; padding: 10% 5%; }
.container-10 { width: 90%; height: auto; padding: 10% 5%; }
.container-8 { width: 90%; height: auto; padding: 10% 5%; }
#home-intro { margin: 90px 0; }
#home-services { margin: 60px 0 0 0; padding: 0 5% 10% 5%!important; }
.home-services-card-left,
.home-services-card-left { }
.home-services-card-right { }
.home-services-card-icon { border-radius: 10px; height: 120px; width: auto; }
/*-- stop hovering--*/
.home-services-card-right { transform: translateY(0px); filter: drop-shadow(5px 15px 15px rgba(0, 0, 0, 0)); transition: all 0.3s ease; }
.home-services-card-left:hover,
.home-services-card-right:hover
{ transform: translateY(0px); filter: drop-shadow(5px 15px 15px rgba(0, 0, 0, 0)); transition: all 0.3s ease; }
.contact-join { margin: 30px auto; }
.impact { padding: 10% 8%; margin: 0 6% 12% 6%; }
#home-hero { background: url('../images/hero-stamp.svg'); background-repeat: no-repeat; background-size: cover; background-position: center center; }
.hero-stamp { display: none; }
}