/*
    waterproofing.ca
    Utility classes (stripped from Custom Theme style.css v1.4.2)
*/

/*------------------------------------*\
    BASE
\*------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* global box-sizing */
*,
*:after,
*:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* html element 62.5% font-size for REM use */
html {
    font-size: 62.5%;
}

body {
    font: 400 16px/1.4 "DM Sans", sans-serif;
    color: #3B3B3B;
    background: #F5F5F7;
}

img {
    max-width: 100%;
    vertical-align: bottom;
    height: auto;
}

a {
    color: #3B3B3B;
    text-decoration: none;
    transition: all 0.3s ease 0s;
}

a:hover {
    color: #0066CC;
}

p {
    margin: 0 0 20px;
}

p:last-child {
    margin: 0;
}

h1,
h2,
h3,
h4 {
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 15px;
}

h1 {
    font-size: 42px;
}

h2 {
    font-size: 28px;
}

h3 {
    font-size: 20px;
}

.clear:before,
.clear:after {
    content: ' ';
    display: table;
}

.clear:after {
    clear: both;
}

.wrapper {
    max-width: 1380px;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
    position: relative;
}

.wrapper.size-1080 {
    max-width: 1120px;
}

.wrapper.size-960 {
    max-width: 1000px;
}

.wrapper.fullwidth {
    max-width: 100%;
}

.overflow {
    overflow: hidden;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-white,
.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white h7,
.text-white h8,
.text-white p,
.text-white a:not(.btn) {
    color: #fff;
}

/*------------------------------------*\
    FLEX
\*------------------------------------*/

.flex {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex.column {
    flex-direction: column;
}

.flex .grow {
    flex-grow: 1;
}

.flex.center {
    align-items: center;
}

.flex.top {
    align-items: flex-start;
}

.flex.bottom {
    align-items: flex-end;
}

.flex.justify {
    justify-content: center;
}

.btn-wrap .btn:not(:last-child){
    margin-right: 10px;
}

.btn {
    display: inline-block;
    vertical-align: top;
    position: relative;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: #0066CC;
    border: 2px solid #0066cc;
    border-radius: 4px;
    outline: 0;
    padding: 9px 25px;
    transition: all 0.3s ease 0s;
}

.btn:hover,
.btn.outline:hover {
    background: #0052a3;
    border-color: #0052a3;
    color: #fff;
}

.btn.outline {
    background: #fff;
    border-color: #0066CC;
    color: #0066CC;
}

/*------------------------------------*\
    HEADER
\*------------------------------------*/

.header {
    width: 100%;
    position: relative;
    z-index: 999;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

.header.stuck {
    position: fixed;
    top: 0;
    left: 0;
    animation: fadeInDown ease-in-out 0.6s both;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.header .top {
    background: #0066cc;
    color: #fff;
    padding: 5px 0;
}

.header .top,
.header .top p,
.header .top a {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.header .middle {
    padding: 10px 0;
}

.header .logo {
    line-height: 0;
}

.nav ul {
    font-size: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav li {
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0 16px;
}

.nav a {
    font-size: 14px;
    font-weight: 700;
}

.btn-menu {
    display: none;
    padding: 0;
    border: 0;
    background: none;
    color: #3B3B3B;
    line-height: 0;
    cursor: pointer;
    margin-left: auto;
}

.btn-menu svg {
    display: block;
}

.header .logo img {
    max-height: 40px;
    width: auto;
}

.header-right {
    column-gap: 25px;
}

.search-wrap {
    column-gap: 10px;
}

.search-form {
    margin: 0 10px 0 0;
}

.search-form .input {
    width: 100%;
    max-width: 200px;
    height: 40px;
    border: 1px solid #E7E7E7;
    border-right: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 500;
    outline: 0;
}

.search-form .search-submit {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.sq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #0066cc;
    background: #fff;
    border: 1px solid #0066cc;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
}

.sq-btn svg {
    display: block;
}

.sq-btn:hover {
    color: #fff;
    background: #0066cc;
}

.sq-btn.solid,
.sq-btn.active {
    color: #fff;
    background: #0066cc;
}

.sq-btn.solid:hover {
    background: #0052a3;
    border-color: #0052a3;
}

/*------------------------------------*\
    SECTIONS
\*------------------------------------*/

.section {
    padding: 70px 0;
    position: relative;
    background: none no-repeat scroll center center transparent;
    background-size: cover;
}

.header-wrap {
    position: relative;
    background: #000;
    min-height: 590px;
}

.header-wrap .bgr {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: none no-repeat scroll center center transparent;
    background-size: cover;
    opacity: 0.5;
}

.header-wrap .wrapper {
    position: relative;
    z-index: 1;
}

.stats {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
}

.stats .stat {
    padding: 20px 40px;
    border-right: 1px solid #A7A7A7;
}

.stats .stat:last-child {
    border-right: 0;
}

.stats .number {
    display: block;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.2;
    color: #3B3B3B;
}

.stats .star {
    color: #06C;
}

.stats .label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #AFAFAF;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-box {
    background: #fff;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #E7E7E7;
}

.info-box p:not(:last-child) {
    margin: 0 0 10px;
}

.info-box > img {
    width: 100%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.info-box .info-body {
    padding: 40px;
}

.info-box .logo {
    flex: 0 0 auto;
    width: 150px;
    height: 150px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.16);
}

.info-box .verified {
    display: inline-block;
    vertical-align: top;
    margin: 7px 0 0 3px;
}

.info-box .grow {
    padding: 0 20px;
}

.rating-wrap {
    font-size: 0;
    margin: 0 0 10px;
    position: relative;
}

.rating-wrap .rating,
.rating-wrap .rating-stars::before {
    display: inline-block;
    vertical-align: middle;
    width: 90px;
    height: 18px;
    background: url('../assets/icon-stars.svg?v=2') no-repeat scroll 0 0 transparent;
    margin: 0 4px 0 0;
}

.rating-wrap .rating-stars {
    overflow: hidden;
}

.rating-wrap .rating-stars::before {
    content: '';
    background-image: url('../assets/icon-stars-hover.svg?v=2');
}

.rating-wrap > span,
.rating-wrap > a {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin: 0 0 0 4px;
}

.rating-wrap > a {
    font-weight: 700;
    color: #0066CC;
    margin: 0 0 0 12px
}

.meta-row {
    justify-content: flex-start;
    column-gap: 20px;
    margin: 20px 0 15px;
    padding: 7px 0;
    border-top: 1px solid #E7E7E7;
    border-bottom: 1px solid #E7E7E7;
}

.meta-row > p,
.info-box .meta-row > p {
    display: inline-flex;
    align-items: center;
    gap: 0 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.meta-row .social-wrap {
    margin-left: auto;
}

.social-wrap {
    font-size: 0;
}

.social-wrap a {
    display: inline-block;
    vertical-align: top;
    margin: 0 28px 0 0;
}

.social-wrap a:last-child {
    margin-right: 0;
}

.social-wrap a svg path,
.social-wrap a svg circle {
    transition: all 0.3s ease 0s;
}

.social-wrap.small a {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    margin: 0 18px 8px 0;
}

.social-wrap.small a:last-child {
    margin-right: 0;
}

.social-wrap.small a svg {
    vertical-align: top;
    width: 24px;
    height: 24px;
    margin: 0 5px 0 0;
}

.social-wrap.white a {
    margin: 0 12px 0 0;
}

.social-wrap.white a svg circle {
    fill: #fff;
    stroke: #e9e9ee;
}

.social-wrap.white a:hover svg circle {
    fill: #e9e9ee;
    stroke: #e9e9ee;
}

.link-more {
    font-weight: 500;
    color: #D61730;
}

.features {
    font-size: 14px;
    font-weight: 700;
    color: #1B5FC4;
}

.features svg {
    display: inline-block;
    vertical-align: top;
    margin: 0 5px 0 0;
}

.features span:not(:last-child) {
    margin-right: 15px;
}

.pill {
    flex: 0 0 auto;
    min-width: 90px;
    padding: 2px 5px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    color: #4DBA7D;
    background: #d2eede;
    border: 1px solid #4dba7d;
}

.pill-orange {
    color: #F3B72A;
    background: #fcedca;
    border: 1px solid #f3b72a;
}

.trust {
    column-gap: 20px;
    margin-top: 25px;
    padding: 13px 15px 13px 25px;
    background: #f5f5f7;
    border-radius: 10px;
}

.trust-left {
    column-gap: 18px;
}

.trust-question {
    font-size: 18px;
    font-weight: 700;
}

.trust-arrow {
    flex: 0 0 auto;
    line-height: 0;
}

.trust-arrow svg {
    display: block;
}

.trust-right {
    flex: 0 0 auto;
    column-gap: 10px;
}

.trust-score {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: right;
}

.trust-label {
    font-size: 10px;
    font-weight: 700;
    color: #3B3B3B;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.trust-num {
    font-size: 24px;
    font-weight: 700;
    color: #1B5FC4;
}

.trust-total {
    font-size: 16px;
    font-weight: 700;
}

.trust-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: #1B5FC4;
    border-radius: 6px;
}

.trust-badge.green {
    background: #4DBA7D;
}

.trust-badge.orange {
    background: #F3B72A;
}

.trust-badge.red {
    background: #D61730;
}

.trust-badge svg {
    display: block;
}

.footer {
    background: #fff;
    padding: 30px 0;
}

.footer-nav {
    font-size: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav li {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 500;
}

.footer-nav li:not(:last-child):after {
    content: "|";
    color: #3B3B3B;
    margin: 0 6px;
}

.menu-nav {
    background: #fff;
    border-bottom: 1px solid #ededed;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
    position: relative;
    z-index: 1;
}

.menu-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-nav a {
    display: block;
    padding: 18px;
    font-size: 14px;
    font-weight: 700;
    border-bottom: 2px solid transparent;
}

.menu-nav a:hover {
    color: #3B3B3B;
    border-color: #c1c1c1;
}

.menu-nav a.active {
    color: #0066cc;
    border-bottom-color: #0066cc;
}

/*------------------------------------*\
    ACCORDION
\*------------------------------------*/

.accordion .content {
    background: #f5f5f7;
    border-radius: 10px;
}

.accordion .content:not(:last-child) {
    margin-bottom: 15px;
}

.accordion .title {
    display: flex;
    align-items: center;
    column-gap: 10px;
    padding: 18px 25px;
    cursor: pointer;
}

.accordion .chevron {
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 5px;
    transition: transform 0.3s ease;
}

.accordion .title.active .chevron {
    transform: rotate(90deg);
}

.acc-head {
    flex: 1 1 auto;
}

.acc-name {
    display: block;
    font-weight: 700;
}

.acc-sub {
    font-size: 14px;
}

.title .acc-sub {
    display: block;
    font-size: 16px;
    max-width: 90%;
}

.title .acc-sub svg {
    width: 17px;
    height: 16px;
}

.acc-sub .star {
    margin: 0 1px;
}

.acc-meter {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    column-gap: 15px;
}

.acc-bar {
    width: 170px;
    height: 10px;
    border-radius: 100px;
    background: #d9d9d9;
    overflow: hidden;
}

.title .acc-bar {
    background: #fff;
}

.acc-bar span {
    display: block;
    height: 100%;
    background: #0066cc;
    border-radius: 100px;
}

.acc-num {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

.acc-total {
    color: #AFAFAF;
}

.accordion .items {
    max-height: 0;
    overflow: hidden;
    padding: 0 30px;
    transition: max-height 0.35s ease;
}

.accordion .items-inner {
    border-top: 1px solid #E7E7EE;
    padding: 15px 0;
}

.acc-row {
    display: flex;
    align-items: center;
    column-gap: 18px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid #E7E7EE;
    border-radius: 8px;
}

.acc-row:first-child {
    margin-top: 5px;
}

.acc-row:not(:last-child) {
    margin-bottom: 10px;
}

.accordion .items-inner > p {
    margin: 0;
    font-size: 14px;
}

.clients-say {
    background: #f5f5f7;
    border-radius: 10px;
    padding: 20px 25px 25px;
    border: 1px solid #E7E7EE;
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 35px;
    background: #fff;
    border: 1px solid #E7E7EE;
    border-radius: 10px;
    padding: 15px 20px;
}

.client-stat .acc-meter {
    column-gap: 12px;
}

.client-stat .acc-bar {
    flex: 1 1 auto;
    width: auto;
}

/*------------------------------------*\
    TOTAL TRUST
\*------------------------------------*/

.total-trust {
    padding: 30px 45px;
    background: #192438;
    border-radius: 10px;
    color: #fff;
}

.total-trust .grow {
    padding: 0 15px;
}

.total-trust .trust-badge {
    width: 64px;
    height: 64px;
}

.tt-title {
    display: block;
    font-size: 24px;
    font-weight: 700;
}

.tt-sub {
    display: block;
    font-size: 16px;
}

.tt-score-wrap {
    flex: 0 0 auto;
    text-align: right;
}

.tt-num {
    font-size: 62px;
    font-weight: 700;
    line-height: 1;
}

.tt-total {
    font-size: 30px;
    font-weight: 700;
    color: #90A1B9;
}

.tt-stars {
    justify-content: flex-end;
    column-gap: 4px;
    margin-top: 8px;
}

.tt-label {
    margin-left: 6px;
    font-weight: 700;
}

.tt-bar {
    height: 12px;
    margin: 22px 0 14px;
    border-radius: 100px;
    background: #314055;
    overflow: hidden;
}

.tt-bar span {
    display: block;
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, #549FFE, #235AF8);
}

.tt-rating {
    margin: 0;
    font-weight: 700;
    text-align: center;
    color: #4C93FD;
}

.total-trust.green .trust-badge,
.total-trust.orange .trust-badge,
.total-trust.red .trust-badge {
    background: #fff;
}

.total-trust.green .tt-bar,
.total-trust.orange .tt-bar,
.total-trust.red .tt-bar {
    background: rgba(255, 255, 255, 0.9);
}

.total-trust.green .tt-sub,
.total-trust.orange .tt-sub,
.total-trust.red .tt-sub {
    color: rgba(255, 255, 255, 0.85);
}

.total-trust.green .tt-total,
.total-trust.orange .tt-total,
.total-trust.red .tt-total {
    color: rgba(255, 255, 255, 0.75);
}

.total-trust.green .tt-rating,
.total-trust.orange .tt-rating,
.total-trust.red .tt-rating {
    color: #fff;
}

.total-trust.green {
    background: #4DBA7D;
}

.total-trust.green .trust-badge svg path {
    fill: #4DBA7D;
}

.total-trust.green .tt-bar span {
    background: #227647;
}

.total-trust.orange {
    background: #F3B72A;
}

.total-trust.orange .trust-badge svg path {
    fill: #F3B72A;
}

.total-trust.orange .tt-bar span {
    background: #917022;
}

.total-trust.red {
    background: #D61730;
}

.total-trust.red .trust-badge svg path {
    fill: #D61730;
}

.total-trust.red .tt-bar span {
    background: #910013;
}

.cta-box {
    padding: 25px 30px;
    background: #E8F2FE;
    border: 1px solid #BEDBFF;
    border-radius: 10px;
}

.cta-box .grow {
    padding: 0;
}

.widget {
    background: #fff;
    border: 1px solid #E7E7E7;
    border-radius: 10px;
}

.widget h3 {
    border-bottom: 1px solid #E7E7E7;
    padding: 25px;
    margin: 0;
}

.widget .content {
    padding: 25px;
}

.widget-foot {
    border-top: 1px solid #E7E7E7;
    padding: 25px;
    font-size: 14px;
}

.widget-line {
    font-size: 14px;
    position: relative;
    padding-left: 32px;
    margin: 0 0 15px;
}

.widget-line a {
    color: #3B3B3B;
    font-weight: 400;
    text-decoration: underline;
    margin-left: 6px;
}

.widget-line:last-child {
    margin-bottom: 0;
}

.widget-line svg {
    position: absolute;
    left: 0;
    top: 0;
}

.widget-line p {
    margin: 0;
}

.acf-map-wrap {
    position: relative;
    overflow: hidden;
}

.acf-map {
    display: block;
    width: 100%;
    height: 180px;
    border-radius: 8px;
}

.acf-map-wrap .map-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0 6px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #0066cc;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}

.directory {
    min-height: 1160px;
}

.directory .acf-map {
    height: 100%;
}

.directory .width-26 {
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    background: #fff;
    position: relative;
    z-index: 9;
    max-width: 415px;
    min-width: 415px;
}

.directory .width-74 {
    flex: 1;
}

.directory .results {
    position: relative;
    padding: 15px 20px;
    border-bottom: 1px solid #E6E6E6;
}

.directory .content {
    font-size: 14px;
    padding: 20px;
}

.directory .info-box {
    padding: 15px;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16);
    margin: 0 0 15px;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease 0s;
}

.directory .info-box:hover {
    background: #F1F1F1;
}

.directory .info-box .verified {
    margin: 2px 0 0 3px;
}

.directory .info-box p {
    font-size: 14px;
    margin: 0 0 5px;
}

.directory .info-box .meta-row {
    border: 0;
    padding: 0;
    margin: 10px 0 0;
    column-gap: 15px;
}

.directory .info-box .logo {
    background: #fff;
    width: 75px;
    height: 75px;
    padding: 0 8px;
}

.gm-style .gm-style-iw-c {
    padding: 0;
    border-radius: 10px;
    background: none;
    box-shadow: none;
}

.gm-style img {
    max-width: 100%;
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important;
}

.gm-style .gm-style-iw-tc {
    display: none;
}

.gm-style-iw-chr button {
    top: 53px;
}

.gm-style .info-box {
    width: 360px;
    padding: 15px;
}

.gm-style .info-box .verified {
    margin: 2px 0 0 3px;
}

.gm-style .info-box p {
    font-size: 14px;
    margin: 0 0 5px;
}

.gm-style .info-box .meta-row {
    border: 0;
    padding: 0;
    margin: 10px 0 0;
    column-gap: 15px;
}

.gm-style .info-box .logo {
    background: #fff;
    width: 75px;
    height: 75px;
    padding: 0 8px;
}

.btn-gallery {
    position: absolute;
    right: 30px;
    bottom: 30px;
    z-index: 9;
}

.breadcrumbs {
    margin: 15px 0 0;
}

.breadcrumbs span,
.breadcrumbs a {
    font-size: 12px;
    color: #3B3B3B;
}

.breadcrumbs .sep {
    margin: 0;
}

/*------------------------------------*\
    CLASSES
\*------------------------------------*/

.relative { position: relative; }

.static { position: static; }

.color-AFAFAF { color: #AFAFAF; }

.color-1B5FC4 { color: #1B5FC4; }

.bgr-ffffff { background-color: #fff; }

.font-size-58 { font-size: 58px; }

.font-size-24 { font-size: 24px; }

.font-size-18 { font-size: 18px; }

.font-size-14 { font-size: 14px; }

.font-weight-500 { font-weight: 500; }

.font-weight-700 { font-weight: 700; }

.gap { justify-content: initial; }

.gap-1 { gap: 0 1% }

.gap-2 { gap: 0 2%; }

.gap-3 { gap: 0 3%; }

.gap-4 { gap: 0 4%; }

.gap-5 { gap: 0 5%; }

.gap-6 { gap: 0 6%; }

.gap-7 { gap: 0 7%; }

.gap-8 { gap: 0 8%; }

.gap-9 { gap: 0 9%; }

.gap-12 { column-gap: 12px; }

.width-1  { width: 1%; }

.width-2  { width: 2%; }

.width-3  { width: 3%; }

.width-4  { width: 4%; }

.width-5  { width: 5%; }

.width-6  { width: 6%; }

.width-7  { width: 7%; }

.width-8  { width: 8%; }

.width-9  { width: 9%; }

.width-10 { width: 10%; }

.width-11 { width: 11%; }

.width-12 { width: 12%; }

.width-13 { width: 13%; }

.width-14 { width: 14%; }

.width-15 { width: 15%; }

.width-16 { width: 16%; }

.width-17 { width: 17%; }

.width-18 { width: 18%; }

.width-19 { width: 19%; }

.width-20 { width: 20%; }

.width-21 { width: 21%; }

.width-22 { width: 22%; }

.width-23 { width: 23%; }

.width-24 { width: 24%; }

.width-25 { width: 25%; }

.width-26 { width: 26%; }

.width-26-5 { width: 26.5%; }

.width-27 { width: 27%; }

.width-28 { width: 28%; }

.width-29 { width: 29%; }

.width-30 { width: 30%; }

.width-31 { width: 31%; }

.width-32 { width: 32%; }

.width-33 { width: 33%; }

.width-34 { width: 34%; }

.width-35 { width: 35%; }

.width-36 { width: 36%; }

.width-37 { width: 37%; }

.width-38 { width: 38%; }

.width-39 { width: 39%; }

.width-40 { width: 40%; }

.width-41 { width: 41%; }

.width-42 { width: 42%; }

.width-43 { width: 43%; }

.width-44 { width: 44%; }

.width-45 { width: 45%; }

.width-46 { width: 46%; }

.width-47 { width: 47%; }

.width-48 { width: 48%; }

.width-49 { width: 49%; }

.width-50 { width: 50%; }

.width-51 { width: 51%; }

.width-52 { width: 52%; }

.width-53 { width: 53%; }

.width-54 { width: 54%; }

.width-55 { width: 55%; }

.width-56 { width: 56%; }

.width-57 { width: 57%; }

.width-58 { width: 58%; }

.width-59 { width: 59%; }

.width-60 { width: 60%; }

.width-61 { width: 61%; }

.width-62 { width: 62%; }

.width-63 { width: 63%; }

.width-64 { width: 64%; }

.width-65 { width: 65%; }

.width-66 { width: 66%; }

.width-67 { width: 67%; }

.width-68 { width: 68%; }

.width-69 { width: 69%; }

.width-70 { width: 70%; }

.width-71 { width: 71%; }

.width-72 { width: 72%; }

.width-73 { width: 73%; }

.width-74 { width: 74%; }

.width-75 { width: 75%; }

.width-76 { width: 76%; }

.width-77 { width: 77%; }

.width-78 { width: 78%; }

.width-79 { width: 79%; }

.width-80 { width: 80%; }

.width-81 { width: 81%; }

.width-82 { width: 82%; }

.width-83 { width: 83%; }

.width-84 { width: 84%; }

.width-85 { width: 85%; }

.width-86 { width: 86%; }

.width-87 { width: 87%; }

.width-88 { width: 88%; }

.width-89 { width: 89%; }

.width-90 { width: 90%; }

.width-91 { width: 91%; }

.width-92 { width: 92%; }

.width-93 { width: 93%; }

.width-94 { width: 94%; }

.width-95 { width: 95%; }

.width-96 { width: 96%; }

.width-97 { width: 97%; }

.width-98 { width: 98%; }

.width-99 { width: 99%; }

.width-100 { width: 100%; }

.mt-0 { margin-top: 0; }

.mt-5 { margin-top: 5px; }

.mt-10 { margin-top: 10px; }

.mt-15 { margin-top: 15px; }

.mt-20 { margin-top: 20px; }

.mt-25 { margin-top: 25px; }

.mt-30 { margin-top: 30px; }

.mt-35 { margin-top: 35px; }

.mt-40 { margin-top: 40px; }

.mt-45 { margin-top: 45px; }

.mt-50 { margin-top: 50px; }

.mt-55 { margin-top: 55px; }

.mt-60 { margin-top: 60px; }

.mt-65 { margin-top: 65px; }

.mt-70 { margin-top: 70px; }

.mt-75 { margin-top: 75px; }

.mt-80 { margin-top: 80px; }

.mt-85 { margin-top: 85px; }

.mt-90 { margin-top: 90px; }

.mt-95 { margin-top: 95px; }

.mt-100 { margin-top: 100px; }

.mb-0 { margin-bottom: 0; }

.mb-3 { margin-bottom: 3px; }

.mb-5 { margin-bottom: 5px; }

.mb-10 { margin-bottom: 10px; }

.mb-15 { margin-bottom: 15px; }

.mb-20 { margin-bottom: 20px; }

.mb-25 { margin-bottom: 25px; }

.mb-30 { margin-bottom: 30px; }

.mb-35 { margin-bottom: 35px; }

.mb-40 { margin-bottom: 40px; }

.mb-45 { margin-bottom: 45px; }

.mb-50 { margin-bottom: 50px; }

.mb-55 { margin-bottom: 55px; }

.mb-60 { margin-bottom: 60px; }

.mb-65 { margin-bottom: 65px; }

.mb-70 { margin-bottom: 70px; }

.mb-75 { margin-bottom: 75px; }

.mb-80 { margin-bottom: 80px; }

.mb-85 { margin-bottom: 85px; }

.mb-90 { margin-bottom: 90px; }

.mb-95 { margin-bottom: 95px; }

.mb-100 { margin-bottom: 100px; }

.pt-0 { padding-top: 0; }

.pt-5 { padding-top: 5px; }

.pt-10 { padding-top: 10px; }

.pt-15 { padding-top: 15px; }

.pt-20 { padding-top: 20px; }

.pt-25 { padding-top: 25px; }

.pt-30 { padding-top: 30px; }

.pt-35 { padding-top: 35px; }

.pt-40 { padding-top: 40px; }

.pt-45 { padding-top: 45px; }

.pt-50 { padding-top: 50px; }

.pt-55 { padding-top: 55px; }

.pt-60 { padding-top: 60px; }

.pt-65 { padding-top: 65px; }

.pt-70 { padding-top: 70px; }

.pt-75 { padding-top: 75px; }

.pt-80 { padding-top: 80px; }

.pt-85 { padding-top: 85px; }

.pt-90 { padding-top: 90px; }

.pt-95 { padding-top: 95px; }

.pt-100 { padding-top: 100px; }

.pb-0 { padding-bottom: 0; }

.pb-5 { padding-bottom: 5px; }

.pb-10 { padding-bottom: 10px; }

.pb-15 { padding-bottom: 15px; }

.pb-20 { padding-bottom: 20px; }

.pb-25 { padding-bottom: 25px; }

.pb-30 { padding-bottom: 30px; }

.pb-35 { padding-bottom: 35px; }

.pb-40 { padding-bottom: 40px; }

.pb-45 { padding-bottom: 45px; }

.pb-50 { padding-bottom: 50px; }

.pb-55 { padding-bottom: 55px; }

.pb-60 { padding-bottom: 60px; }

.pb-65 { padding-bottom: 65px; }

.pb-70 { padding-bottom: 70px; }

.pb-75 { padding-bottom: 75px; }

.pb-80 { padding-bottom: 80px; }

.pb-85 { padding-bottom: 85px; }

.pb-90 { padding-bottom: 90px; }

.pb-95 { padding-bottom: 95px; }

.pb-100 { padding-bottom: 100px; }


/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/

@media only screen and (max-width: 1140px) {
    .stats .stat {
        padding: 20px;
    }

    .stats .number {
        font-size: 38px;
    }
}

@media only screen and (max-width: 980px) {
    .mobile-980-hidden,
    .header .search-form .input {
        display: none;
    }

    .search-form .search-submit {
        border-radius: 4px;
    }

    .header.search-open .header-right,
    .header.search-open .search-wrap,
    .header.search-open .search-form {
        flex-grow: 1;
    }

    .header.search-open .search-form .input {
        display: block;
        flex: 1;
        width: auto;
        max-width: none;
        font-size: 16px;
    }

    .header.search-open .search-form .search-submit {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .header.search-open .logo {
        width: 32px;
        overflow: hidden;
    }

    .header.search-open .logo img {
        max-width: none;
    }

    .header-right {
        column-gap: 12px;
    }

    .header-right .search-wrap {
        order: -1;
        padding: 0 0 0 15px;
    }

    .mobile-980-width-100 {
        width: 100%;
    }

    .mobile-980-width-48 {
        width: 48%;
    }

    .mobile-980-mb-20 {
        margin-bottom: 20px;
    }

     .mobile-980-mb-10 {
        margin-bottom: 10px;
    }

    .mobile-980-text-left {
        text-align: left;
    }

    .mobile-980-text-center {
        text-align: center;
    }

    .btn-menu {
        display: block;
    }

    .header .nav {
        justify-content: flex-end;
    }

    .header .nav ul {
        display: none;
        position: absolute;
        left: 0;
        top: 50px;
        width: 100%;
        background: #fff;
        border-top: 1px solid #e5e5e7;
        text-align: left;
        z-index: 99;
    }

    .header .nav.active ul {
        display: block;
    }

    .header .nav > ul > li {
        display: block;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #e5e5e5;
    }

    .header .nav > ul > li > a {
        display: block;
        padding: 1em 20px;
    }

    body.active-header::after {
        content: '';
        background: #000;
        opacity: 0.8;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9;
    }

    .font-size-58 {
        font-size: 42px;
    }

    .info-box .info-body {
        padding: 20px;
    }

    .info-box .logo {
        width: 100%;
        margin: 0 0 20px;
    }

    .info-box .logo.mobile-overlap {
        position: absolute;
        left: 20px;
        top: -130px;
        width: 75px;
        height: 75px;
        background: #fff;
        padding: 5px;
        z-index: 9;
    }

    .btn-gallery {
        right: 20px;
        bottom: 20px;
    }

    .info-box .grow {
        padding: 0;
    }

    .total-trust .grow {
        padding: 0 15px;
    }
    
    .meta-row {
        border-bottom: 0;
        padding: 10px 0;
    }

    .meta-row .social-wrap {
        width: 100%;
        margin: 2px 0 5px;
        border-top: 1px solid #E7E7E7;
        padding-top: 12px;
    }

    .meta-row > p,
    .info-box .meta-row > p {
        margin: 0 0 10px;
    }

    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 800px) {
    .clients-grid {
        grid-template-columns: 1fr;
    }

    .stats .stat {
        padding: 10px;
        width: 100%;
    }

    .menu-nav ul {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .menu-nav ul::-webkit-scrollbar {
        display: none;
    }

    .menu-nav li {
        flex: 0 0 auto;
    }

    .menu-nav a {
        white-space: nowrap;
        padding: 15px 14px;
    }

    .trust {
        row-gap: 15px;
        position: relative;
        padding: 25px;
    }

    .trust-question {
        padding-right: 30px;
    }

    .trust-arrow {
        position: absolute;
        right: 25px;
        top: 28px;
    }

    .trust-left {
        width: 100%;
    }

    .trust-right {
        margin: 0;
    }

    .trust-score {
        text-align: left;
    }

    .info-box .grow {
        width: 100%;
        margin: 0 0 20px;
    }

    .features span {
        margin: 0 0 10px;
        display: block;
        width: 100%;
    }

    .pill + p {
        width: 100%;
        margin-top: 5px;
    }

    .accordion .title,
    .acc-row {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .acc-head,
    .acc-meter {
        width: 100%;
    }

    .title .acc-meter {
        padding-left: 15px;
    }

    .accordion .title .acc-head {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }

    .total-trust {
        padding: 22px;
    }

    .total-trust-top {
        row-gap: 18px;
    }

    .total-trust-top .grow {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }

    .tt-score-wrap {
        width: 100%;
        text-align: left;
    }

    .tt-stars {
        justify-content: flex-start;
    }
}