/* style - 960 resize */ /* globals */ body {margin:110px 0 0 0; padding:0px; color:#3c3c3b; background:#fff; font-size:16px; line-height:1.3; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; min-width:1200px; background:#f1f1e6} html {width:100%; height:100%;} .wf-loading {visibility:hidden;} .left {position:relative; float:left;} .right {position:relative; float:right;} .clear {clear:both;} .hidden {display:none;} .notMobile {display:block;} /*use this class to omit elements from the mobile version*/ .mobileOnly {display:none;} /*use this class to show elemnts on the mobile version only*/ ::selection {background:#000; color:#f89520; /* Safari */} ::-moz-selection {background:#000; color:#f89520; /* Firefox */} * {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box} /* branding */ .bg-black {background:#000000; color:#ffffff;} .black {color:#000000;} .bg-grey {background:#3c3c3b; color:#ffffff;} .grey {color:#3c3c3b;} .bg-light-grey {background:#575756; color:#ffffff;} .light-grey {color:#575756;} .bg-white {background:#ffffff; color:#3c3c3b;} .white {color:#ffffff;} .bg-green {background:#93b523; color:#ffffff;} .green {color:#93b523;} .bg-blue {background:#3fa3a6; color:#ffffff;} .blue {color:#3fa3a6;} .bg-orange {background:#f07e14; color:#ffffff;} .orange {color:#f07e14;} .bg-lilac {background:#8d89ad; color:#ffffff;} .white {color:#8d89ad;} .branding-green #banner-copy {background:rgba(147,181,35,0.6);} .branding-green .quotebox {background:#93b523;} .branding-green #contact-us {background:#f1f1e6 url(../images/bg-contact-us-green.png) bottom center no-repeat;} .branding-green #lets-chat {background:#f1f1e6 url(../images/bg-lets-chat-green.png) top center no-repeat;} .branding-green h4 {color:#93b523;} .branding-green #client-logos a span {background:rgba(147,181,35,0.8);} .branding-blue #banner-copy {background:rgba(63,163,166,0.6);} .branding-blue .quotebox {background:#3fa3a6;} .branding-blue #contact-us {background:#f1f1e6 url(../images/bg-contact-us-blue.png) bottom center no-repeat;} .branding-blue #lets-chat {background:#f1f1e6 url(../images/bg-lets-chat-blue.png) top center no-repeat;} .branding-blue h4 {color:#3fa3a6;} .branding-blue #client-logos a span {background:rgba(63,163,166,0.8);} .branding-orange #banner-copy {background:rgba(240,126,20,0.6);} .branding-orange .quotebox {background:#f07e14;} .branding-orange #contact-us {background:#f1f1e6 url(../images/bg-contact-us-orange.png) bottom center no-repeat;} .branding-orange #lets-chat {background:#f1f1e6 url(../images/bg-lets-chat-orange.png) top center no-repeat;} .branding-orange h4 {color:#f07e14;} .branding-orange #client-logos a span {background:rgba(240,126,20,0.8);} .branding-lilac #banner-copy {background:rgba(141,137,173,0.6);} .branding-lilac .quotebox {background:#8d89ad;} .branding-lilac #contact-us {background:#f1f1e6 url(../images/bg-contact-us-lilac.png) bottom center no-repeat;} .branding-lilac #lets-chat {background:#f1f1e6 url(../images/bg-lets-chat-lilac.png) top center no-repeat;} .branding-lilac h4 {color:#8d89ad;} .branding-lilac #client-logos a span {background:rgba(141,137,173,0.8);} /* columns & slices */ #container {max-width:1200px; margin:0 auto; background:#fff; overflow:hidden;} .slice {position:relative; float:left; width:100%; text-align:center;} .wrapper {position:relative; width:100%; max-width:960px; margin:0 auto; text-align:left;} .columns01 {position:relative; float:left; margin:0 1.041666666666667%; width:6.25%;} /* 60px */ .columns02 {position:relative; float:left; margin:0 1.041666666666667%; width:14.58333333333333%;} /* 140px */ .columns03 {position:relative; float:left; margin:0 1.041666666666667%; width:22.91666666666667%;} /* 220px */ .columns04 {position:relative; float:left; margin:0 1.041666666666667%; width:31.25%;} /* 300px */ .columns05 {position:relative; float:left; margin:0 1.041666666666667%; width:39.58333333333333%;} /* 380px */ .columns06 {position:relative; float:left; margin:0 1.041666666666667%; width:47.91666666666667%;} /* 460px */ .columns07 {position:relative; float:left; margin:0 1.041666666666667%; width:56.25%;} /* 540px */ .columns08 {position:relative; float:left; margin:0 1.041666666666667%; width:64.58333333333333%;} /* 620px */ .columns09 {position:relative; float:left; margin:0 1.041666666666667%; width:72.91666666666667%;} /* 700px */ .columns10 {position:relative; float:left; margin:0 1.041666666666667%; width:81.25%;} /* 780px */ .columns11 {position:relative; float:left; margin:0 1.041666666666667%; width:85.41666666666667%;} /* 820px */ .columns12 {position:relative; float:left; margin:0 1.041666666666667%; width:97.91666666666667%;} /* 940px */ .full-page {position:relative; float:left; margin:0; width:100%;} .half-page {position:relative; float:left; margin:0; width:50%;} .half-page-copy-left {position:relative; float:right; width:476px; text-align:left; padding:0 11.76470588235294% 30px 0;} .half-page-copy-right {position:relative; float:left; width:476px; text-align:left; padding:0 0 30px 11.76470588235294%;} @media (max-width:1200px){ .half-page-copy-left {width:99.16666666666667%; margin:0 0 0 0.8333333333333333%;} .half-page-copy-right {width:99.16666666666667%; margin:0 0.8333333333333333% 0 0;} } .half-page-image {background-size:cover!important;} /* up */ #up {position:fixed; top:216px; right:24px; z-index:99999; opacity:0; -webkit-transition: 0.5s; /* Safari */ transition: 0.5s;} @media (max-width:1200px){ #up {display:none;} } /* header bar */ #header {height:110px; position:fixed; z-index:999999; top:0px; -webkit-box-shadow: 0px -3px 64px -11px rgba(0,0,0,0.5); -moz-box-shadow: 0px -3px 64px -11px rgba(0,0,0,0.5); box-shadow: 0px -3px 64px -11px rgba(0,0,0,0.5);} /* logo */ #logo {padding:36px 0 0 0; z-index:99999} #logo a {opacity:0.8;} #logo a:hover {opacity:1;} /* menu */ #menu {text-align:right; padding:36px 0 16px 0; z-index:9999;} #menu-toggle, #hero-menu-toggle {display:inline-block; width:48px; margin:0 83px 0 0;} #hero-menu-toggle {height:48px; position:relative; z-index:9999999999} #hero-menu-toggle span { display:block; width:48px; height:4px; background:#3c3c3b; position:absolute; left:50%; transform:translateX(-50%); transition:all 0.3s; } #hero-menu-toggle span:first-child { top:16px; } #hero-menu-toggle span:last-child { top:28px; } #hero-menu-toggle:hover span { background:#7d9e08; } #hero-menu-toggle.open span:first-child { top:22px; transform:translateX(-50%) rotate(45deg); } #hero-menu-toggle.open span:last-child { top:22px; transform:translateX(-50%) rotate(-45deg); } #menu-popup {display:none; position:absolute; top:146px; right:140px; text-align:left; z-index:9; background:url(../images/menu-m.png) repeat-y;} #menu-t {position:absolute; top:-129px; left:0px; z-index:-1;} #menu-b {position:absolute; bottom:-16px; left:0px; z-index:-1;} #menu-popup ul {width:256px; margin:-119px 0 -5px 0; } #menu-popup a {display:block; height:40px; line-height:40px; width:236px; margin:0 0 0 10px; padding:0 17px; color:#575656; text-decoration:none; font-weight:300; text-transform:uppercase; font-size:22px;} #menu-popup a:hover {color:#fff; background-color:#f07e14;} /* banner */ #banner {height:auto; overflow:hidden; text-align:center;} #banner-arrow-wrapper {width:100%; max-width:960px; margin:0 auto; text-align:left; position:relative;} #banner #banner-arrow {position:absolute; right:1.041666666666667%; top:0px; z-index:999; width:940px; height:auto; min-height:0;} #banner-copy-wrapper {z-index:1; width:100%; position:absolute; bottom:-830px; left:0px; right:0px; text-align:center; z-index:999;} #banner-copy {max-width:940px; margin:0 auto; text-align:left; position:relative;} .item-101 #banner-copy {text-align:center;} @media (max-width:960px){ #banner-copy {width:97.91666666666667%; margin:0 1.041666666666667%;} } #banner-copy h1 {font-size:39px; text-transform:uppercase; padding:34px 5.531914893617021%; font-weight:300; line-height:1.2; margin:0;} #banner-copy h1 strong {font-weight:800;} .catid-11 #banner-copy h1 {padding:32px 5.531914893617021%;} /* case studies page */ #banner p {margin:0px;} #banner img {width:100%; height:auto;} #banner-image {position:relative; float:left; width:100%;} #banner-image img {position:relative; float:left; width:100%; height:auto;} #banner-cycle img {display:block;} #banner-nav {text-align:right; width:100%; padding:0 5.531914893617021% 0 0; z-index:500; position:absolute; bottom:12px; overflow:hidden;} #banner-nav span {font-size:40px; width:16px; height:16px; display:inline-block; color:#fff; cursor:pointer;} #banner-nav span.cycle-pager-active {color:#f07e14;} #banner-nav > * {cursor:pointer;} #banner-wwd-wrapper {position:relative; float:left; width:100%; background:#565656;} #banner-wwd-wrapper img {display:block; position:relative;} #banner-wwd-container {position:relative; float:left; width:200%; transition:1s; -webkit-transition:1s;} #banner-wwd-container img {position:relative; float:left; width:50%; height:auto;} .move-container-left {left:0; -webkit-animation:moveLeft 1s forwards; -moz-animation:moveLeft 1s forwards; -ms-animation:moveLeft 1s forwards; -o-animation:moveLeft 1s forwards; animation:moveLeft 1s forwards;} @-webkit-keyframes moveLeft { 0% {left:0;} 100% {left:-100%;} } @-moz-keyframes moveLeft { 0% {left:0;} 100% {left:-100%;} } @-ms-keyframes moveLeft { 0% {left:0;} 100% {left:-100%;} } @-o-keyframes moveLeft { 0% {left:0;} 100% {left:-100%;} } @keyframes moveLeft { 0% {left:0;} 100% {left:-100%;} } .move-container-right {left:-1920px; -webkit-animation:moveRight 1s forwards; -moz-animation:moveRight 1s forwards; -ms-animation:moveRight 1s forwards; -o-animation:moveRight 1s forwards; animation:moveRight 1s forwards;} @-webkit-keyframes moveRight { 0% {left:-100%;} 100% {left:0px;} } @-moz-keyframes moveRight { 0% {left:-100%;} 100% {left:0px;} } @-ms-keyframes moveRight { 0% {left:-100%;} 100% {left:0px;} } @-o-keyframes moveRight { 0% {left:-100%;} 100% {left:0px;} } @keyframes moveRight { 0% {left:-100%;} 100% {left:0px;} } #service-icons {position:absolute; bottom:40px; right:0px;} .si {display:inline-block; width:39px; height:39px; position:relative; float:left; background-position:bottom; margin:0 14px 0 0;} .si.active, .si:hover {background-position:top;} .si-ee {background-image:url(../images/si-ee.png)} .si-bc {background-image:url(../images/si-bc.png)} .si-cj {background-image:url(../images/si-cj.png); margin:0 14px 0 0;} /* content */ .content {padding:48px 10% 100px 0;} .quotebox {padding:48px 5% 100px 5%; color:#fff;} h1 {font-size:38px; margin:40px 0 16px 0; text-transform:uppercase; font-weight:800;} h2 {font-size:38px; margin:40px 0 16px 0; text-transform:uppercase; font-weight:800; font-family:'Arial Black', Arial, "Helvetica Neue", Helvetica, sans-serif;} h3 {font-size:17px; margin:40px 0 0px 0; text-transform:uppercase; font-weight:800;} h4 {font-size:17px; margin:40px 0 8px 0; text-transform:uppercase; font-weight:800;} p {font-size:17px; margin:0 0 0 0; line-height:1.8;} blockquote {font-family: 'Libre Baskerville', serif; font-size:32px; line-height:1.5; margin:0;} li {color:#6d6e71; line-height:1.4; font-size:17px;} a {color:#f07e14;} div[itemprop="articleBody"] p {margin:0 0 20px 0;} /* homepage content */ .itemid-101 .content {padding:48px 5% 120px 0;} .itemid-101 .quotebox {padding:48px 5% 139px 5%; background:#93b523 url(../images/bg-quotebox-green.png) no-repeat bottom right;} .itemid-101 blockquote {margin:104px 0 0 0;} .itemid-101 #content {background:url(../images/bg-quotebox-overflow-green.png) no-repeat bottom center;} /* services content */ #client-logos a {width:32.20338983050847%; height:auto; padding:0 0 31.5% 0; display:inline-block; position:relative; float:left; overflow:hidden; border:1px solid #e6e7e8; margin:10px 1.666666666666667% 0 0; background:#e6e7e8} #client-logos a:nth-child(3n+3) {margin:10px 0 0 0;} #client-logos a:last-child {margin:10px 0 80px 0;} #client-logos a:hover {border:1px solid #c4c4c4;} #client-logos a img.cs-logo {width:100%; height:auto; position:absolute; left:0; -webkit-transition: 0.5s; /* Safari */ transition: 0.5s;} #client-logos a:hover img.cs-logo {left:-100%;} #client-logos a img.cs-photo {width:100%; height:auto; position:absolute; left:100%; -webkit-transition: 0.5s; /* Safari */ transition: 0.5s;} #client-logos a:hover img.cs-photo {left:0px;} #client-logos a span {position:absolute; left:100%; top:40%; width:100%; padding:8px 8%; font-size:12px; color:#fff; font-weight:800; -webkit-transition: 0.5s; /* Safari */ transition: 0.5s;} #client-logos a:hover span {left:0;} /* case study content */ #banner-thumbs {margin:0 0 0 1.041666666666667%; width:48.95833333333333%;} #banner-thumbs img {position:relative; float:left; display:inline-block; margin:10px 2.127659574468085% 0 0; width:31.91489361702128%;} #banner-thumbs img:nth-child(3n+3) {position:relative; float:left; display:inline-block; margin:10px 0 0 0;} #banner-thumbs img:hover {cursor:pointer} .catid-11 .quotebox {padding:48px 5% 0 5%; height:320px;} .catid-11 blockquote {font-size:32px;} .catid-11 .content .item-page { -webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:40px; -moz-column-gap:40px; column-gap:40px; -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid; } .catid-11 .content .item-page p { page-break-inside: avoid; /* For Firefox. */ -webkit-column-break-inside: avoid; /* For Chrome & friends. */ break-inside: avoid; /* For standard browsers like IE. :-) */ } .catid-11 .content h1 {font-size:35px; margin:0 0 20px 0 } .catid-11 .content h2 {font-size:35px; margin:0 0 20px 0;} /* blog */.menuintegrity_blog { color: #575656; text-align:left; text-decoration: none; font-weight: 300; font-size: 22px; text-transform: uppercase;}.menuintegrity_blog li { text-decoration: none; }.item-131.current { font-weight: bold!important;}.item-132.current { font-weight: bold!important;}.item-133.current { font-weight: bold!important;}.item-134.current { font-weight: bold!important;}.menuintegrity_blog li a:link, .menuintegrity_blog li a:visited { text-decoration: none; } .integrity_blog_archive_title { margin-top: 10px;}.integrity_blog_archive_years { margin-left: 0px; cursor: pointer; text-weight: none; color: #f07e14;}.integrity_blog_archive_month {}.integrity_blog_archive_months { margin-left: 10px; cursor: pointer; color: #f07e14;}.integrity_blog_archive_posts {}.integrity_blog_archive_post { margin-left: 10px; font-size: 9pt; text-transform: none;}.blog-style h2 { font-size: 20pt; margin-top: 0px; margin-bottom: 8px; color: #575656;}.blog-style a { text-decoration: none;} .blog-style a.btn { text-decoration: none;}.blog-style p.readmore { margin-bottom: 36px;}.blog-style p { line-height: 24px; margin-bottom: 10px;}.blog-style img { max-width: 99%; max-height: 99%;}.blog-style ul, .blog-style li { list-style: disc; list-style-position: inside; margin-left: 0; padding-left: 1em; text-indent: -1em;}.blog-style ul { margin-bottom:15px;}}@media only screen and (min-width: 760px) { #blogcontainer { padding-right: 100px; border-right-width:thin; border-right-color: #C3C5C6; border-right-style: solid; } }/* .menuintegrity_blog li a:hover, .menuintegrity_blog li a:active { background-color: white; color: #f07e14; }*/ /* what we do */ #what-we-do {background:#363535 url(../images/bg-what-we-do.png) no-repeat top center; overflow:hidden;} #what-we-do-graphic {position:relative; float:left; width:100%;} #what-we-do-graphic .columns04 {width:33.3333333333%; margin:0px;} #what-we-do-graphic h3 {margin:0 0 10px 0;} #what-we-do-graphic p {font-family: 'Libre Baskerville', serif; font-size:16px; margin:0 10% 80px 0;} #what-we-do a {color:#fff; text-decoration:none;} #what-we-do a:hover {text-decoration:underline;} #what-we-do .columns04:nth-child(1) .wwd-image img {width:190%; float:right; margin:0 0 55px 0;} #what-we-do .columns04:nth-child(2) .wwd-image img {width:100%; float:left; margin:0 0 55px 0;} #what-we-do .columns04:nth-child(3) .wwd-image img {width:190%; float:left; margin:0 0 55px 0;} #what-we-do .columns04 .wwd-icon img {position:absolute; left:0px; top:1.5%; width:28%; height:auto; -moz-transition:0.6s; transition:0.6s;} #what-we-do .columns04.hover .wwd-icon img {width:34%; height:auto; margin:-3% 0 0 -3%} #what-we-do .columns04:nth-child(1) .wwd-icon img {left:2.75%;} #what-we-do .columns04:nth-child(2) .wwd-icon img {left:5.25%;} #what-we-do .columns04:nth-child(3) .wwd-icon img {left:8.5%;} /* our work */ /* old method */ #ow-nav {width:100%; max-width:1308px; margin:0 auto; left:-9000px; right:-9000px; position:absolute; background:#ff4455;z-index:9} /*top set by jQuery */ .ow-back {position:absolute; top:0; left:0;} .ow-next {position:absolute; top:0; right:0;} #ow-nav img {display:block;} #bg-what-we-do-overflow {position:absolute; left:0px; top:0px; z-index:0; left:50%; margin:-468.8px 0 0 -600px; /* margin top set by jQuery */} #our-work {background:none; overflow:hidden;} /* old solution */ #our-work-thumbs {position:relative; float:left; height:468px; -webkit-transition:left 0.5s; transition:left 0.5s; left:0px;} #our-work-thumbs a {position:relative; float:left; display:inline-block; width:200px; height:224px; text-decoration:none; overflow:hidden; margin:0 10px 10px 0;} #our-work-thumbs span {display:block; color:#fff; position:absolute; bottom:-100px; width:100%; padding:20px 10px; text-align:left; text-transform:uppercase; font-size:12px; -webkit-transition: 0.5s; /* Safari */ transition: 0.5s;} #our-work-thumbs a:hover span {bottom:72px;} /* new solution */ .our-work-carousel {position:relative; height:468px; left:0px; width:calc(100% + 130px)} .our-work-carousel div.image-col {width:200px; margin-right:10px;} .our-work-carousel a {position:relative; float:left; display:inline-block; width:200px; height:224px; text-decoration:none; overflow:hidden; margin:0 0 10px 0;} .our-work-carousel span {display:block; color:#fff; position:absolute; bottom:-100px; width:100%; padding:20px 10px; text-align:left; text-transform:uppercase; font-size:12px; -webkit-transition: 0.5s; /* Safari */ transition: 0.5s;} .our-work-carousel a:hover span {bottom:72px;} @media (max-width:1220px) { .our-work-carousel {width:calc(100% - 5%); margin-left:5%;} } .our-work-carousel span.branding-orange {background:rgba(240,126,20,0.8);} .our-work-carousel span.branding-green {background:rgba(147,181,35,0.6);} .our-work-carousel span.branding-blue {background:rgba(63,163,166,0.6);} .our-work-carousel span.branding-lilac {background:rgba(141,137,173,0.6);} /* news */ #news img {margin:30px 0 0 0;} #news h3 {margin-top:-80px;} #news p {font-size:17px; margin:0 10% 100px 0;} /* featured project */ #featured-project {} /* meet the team */ #meet-the-team {} /* contact us */ #contact-us {display:none; max-height:496px; padding:0 0 30px 0;} #contact-form {} #contact-form input, #contact-form textarea {position:relative; float:left; border:0px; padding:5px 10px; font-family:Arial, "Helvetica Neue", Helvetica, sans-serif; font-size:17px; color:#333; display:inline-block; margin:0 0 15px 0;} #contact-form input#Name {width:49.3%; margin-right:0.7%;} #contact-form input#Company {width:49.3%; margin-left:0.7%;} #contact-form input#Email {width:49.3%; margin-right:0.7%;} #contact-form input#Phone {width:49.3%; margin-left:0.7%;} #contact-form textarea {width:100%; height:150px;} #contact-form input[type="submit"] {width:auto; padding:5px 0; background:none; text-transform:uppercase; font-weight:800; color:#fff; font-size:20px;} #contact-form input[type="submit"]:hover {text-decoration:underline; cursor:pointer;} #contact-form input[type="text"]:focus, #contact-form textarea:focus {background:#f9f9bc} .rsform p.formRed {display:none;} .rsform .formError {position:relative; float:left; width:100%; font-size:18px; color:#fff; margin:0 0 20px 0;} .rsform .formError:before {content:"X"; padding:0 10px 0 0; color:#ee0000; font-weight:800;} /* maps */ .map-close { position:absolute; top:30px; right:30px;} #map-1, #map-2 {display:none;} #map-1 iframe, #map-2 iframe {display:block; height:496px; width:100%;} #map-1 .wrapper {max-width:1200px; background:#3fa3a6;} #map-2 .wrapper {max-width:1200px; background:#3fa3a6;} /* let's chat */ #lets-chat {height:494px; color:#fff;} #lets-chat p {font-size:16px;} #lets-chat a {color:#fff; text-decoration:none;} #lets-chat a:hover {text-decoration:underline;} #lets-chat p:nth-child(2) a {text-decoration:underline;} #lets-chat strong {font-weight:800;} /*footer */ #footer .wrapper {background:#565656; overflow:hidden; max-width:1200px; color:#fff;} #footer p {font-size:16px; margin:10px 0 10px 0;} /* PAGINATION BUTTONS */ div.pagination p { text-align: left; font-size: 9pt;} div.pag_button {float:left; background-color:#f07e14; background-image: -webkit-linear-gradient(top,#f07e14,#f07e14); -moz-linear-gradient(top,#f07e14,#f07e14); linear-gradient(top,#f07e14,#f07e14); border:1px solid #F0B376; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; width:auto; min-width:55px; margin:2px 2px 2px 5px; padding:3px; text-shadow:0 1px rgba(0, 0, 0, 0.1); text-align:center; font-size:1em; font-weight:bold; color:white; cursor:pointer;} div.pag_button:hover {background-color:#f07e14; border:1px solid #f07e14; background-image: -webkit-linear-gradient(top,#f07e14,#f07e14); -moz-linear-gradient(top,#f07e14,#f07e14); linear-gradient(top,#f07e14,#f07e14);} div.pag_button span {color:white; padding:0 6px 0 6px; } div.pag_button a {color:white; padding:0 6px 0 6px; } div.pag_button a:hover {text-decoration: none; color:white; } div.poff {opacity: 0.5; cursor:default;} div.poff:hover {border:1px solid #F0B376;} div.plist:hover {border:1px solid #F0B376; cursor:default;} /* fullscreen menu 2022 */ #hero-menu { overflow:hidden; position:fixed; left:0; right:0; margin:0 auto; top:-200vh; opacity:0; transition: all 0.5s; width:100vw; max-width:1200px; height:100vh; display:flex; justify-content:center; align-items:center; text-align:center; background:rgba(255, 255, 255, 0.9); z-index:999999999; } /*#hero-menu:after { content:""; position:absolute; bottom:0; left:0; width: 0; height: 0; border-style: solid; border-width: 61.5vw 0 0 75vw; border-color: transparent transparent transparent rgba(63, 163, 166, 0.1); z-index:1; }*/ #hero-menu ul { position:relative; z-index:2; } #hero-menu ul a { position:relative; display:inline-block; text-decoration:none; color:#3c3c3b; font-size:38px; font-weight: 800; text-transform:uppercase; line-height:1.7; } #hero-menu ul a:after { content:""; display:block; background:transparent; width:100%; height:8px; } #hero-menu ul a:hover:after { background:#f07e14; } @media (max-width:800px){ #hero-menu ul a { font-size:24px; } #hero-menu ul a:after { height:4px; } } /* close hero menu */ #hero-menu-wrapper { display:flex; justify-content:center; align-items:center; position:relative; width:100%; height:100vh; max-width:920px; margin:0 26px; } @media (max-width:800px){ #hero-menu-wrapper { margin:0; } }