﻿body {
    background: #323c4c;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'AvenirLTStd-Medium', Calibri, Arial, Helvetica, sans-serif;
    color: #323c4c;
}
h1, h2, h3 {
    text-transform: none;
}

hr.deep {
    padding-top: 30px;
    margin-bottom: 80px;
}

.service ul,
.service ul li {
    list-style: none;
    padding: 0;
    margin-left: 0;
    font-size: 1em;
}
    .service ul li::before {
        display: none;
    }
        .service ul li::after {
            content: '';
            display: block;
            width: 16px;
            height: 1px;
            background: #009cb2;
            margin-bottom: 6px;
        }
    .service ul li:last-child::after {
        display: none;
    }

    .service blockquote {
        margin: 0 0 20px;
        padding: 0;
        border: 0;
    }

        .service blockquote:before {
            content: '';
            display: block;
            width: 100px;
            height: 2px;
            background: #009cb2;
            margin-top: 0;
            margin-left: 0;
            margin-bottom: 10px;
        }

        .service blockquote p {
            font-size: 1.6em;
            line-height: 1.4;
            color: #009cb2;
        }

    .service p + blockquote:before,
    .service ul + blockquote:before {
        margin-top: 30px;
    }

.button, input[type="submit"], input[type="button"], .button:visited {
    text-transform: none;
}

.wrap.header,
.wrap.nav,
.wrap.footer {
    background: #323c4c;
}

/* header */

#login a {
    color: #fff;
}
    #login a:hover {
        color: #00c9e6;
    }

/* image text */
.imgCard {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 30px 0 60px;
    min-height: 400px
}
    .imgCard .imageHolder {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
    }
        .imgCard .imageHolder img {
            position: absolute;
            height: 100%;
            width: 100%;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            object-fit: cover;
            color: transparent;

        }
        .imgCard .imageHolder.contain img {
            object-fit: contain;
        }
.imgCard .textHolder {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    width: 50%;
    padding: 3rem 4rem 1.5rem 0;
    box-sizing: border-box;
}
    .imgCard .textHolder * {
        flex: 0 1 100%;
    }
   

/* team grid */

.grid.team {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
    margin-top: 0;
}
    .grid.team img {
        aspect-ratio: 1;
        margin-bottom: 20px;
    }
    .grid.team p {
        margin: 0;
    }
.mainPerson {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin-bottom: 20px;
}
.mainPerson .image {
    width: calc(39% - 20px);
}
.mainPerson .text {
    width: calc(61% - 20px);
}

/* icon grid */

.grid.icons {
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 30px;
    row-gap: 40px;
    margin-top: 0;
}
.grid.icons figure {
    border-right: 1px solid #ddd;
    padding-right: 30px;
}
    .grid.icons figure img {
        width: auto;
        height: 48px;
        margin-bottom: 20px;
    }
    .grid.icons figure figcaption {
       border: none;
       font-size: 0.9em;
       color: #6f6f6f;
       padding: 0;
    }

/* logo grid */

.grid.logos {
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 60px;
    row-gap: 20px;
    margin-top: 0;
}
    .grid.logos .griditem {
        display: flex;
        justify-content: center;
        align-content: center;
    }
        .grid.logos .griditem img {
            width: auto;
            max-height: 100px;
            max-width: 100%;
        }

/* two col text block */

.twoText {
    display: flex;
    justify-content: space-between;
    margin: 30px 0 60px;
}
    .twoText > div:nth-child(1) {
        width: 46%
    }
    .twoText > div:nth-child(2) {
        width: 50%
    }
    
/* big image */

.bigImage {
    margin: 30px 0;
}

/* section icon grid */

.iconGrid {
    margin: 30px 0 55px;
}

/* footer */

.wrap.footer ul li a:hover {
    color: #00c9e6;
}
.social li a:hover {
    color: #009cb2;
    opacity: 1;
}

@media only screen and (max-width: 1479px) {
    .grid.icons {
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px;
        row-gap: 30px;
    }
        .grid.icons figure {
            padding-right: 20px;
        }
}

@media only screen and (max-width: 1279px) {
    .wrap.nav {
        padding: 0 0 10px;
    }
    .grid.icons {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid.team {
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 20px;
    }
    .grid.logos {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media only screen and (max-width: 959px) {
    .grid.icons {
        grid-template-columns: repeat(4, 1fr);
        grid-gap: 20px;
        row-gap: 30px;
    }
        .grid.icons figure {
            padding-right: 20px;
        }
    .grid.logos {
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 40px;
        row-gap: 20px;
    }
    .service + .imgCard {
        margin-top: 0;
    }

        .imgCard .imageHolder {
            position: relative;
            top: auto;
            right: auto;
            aspect-ratio: 3 / 2;
            width: 100%;
            margin-bottom: 30px;
        }
            .imgCard .imageHolder.square {
                aspect-ratio: 1;
            }

        .imgCard .textHolder {
            width: 100%;
            flex-direction: column;
            padding: 0
        }
}

@media only screen and (max-width: 767px) {
    hr.deep {
        padding-top: 20px;
        margin-bottom: 40px;
    }
    .wrap.nav {
        padding: 0;
    }
    .grid.icons {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid.team {
        grid-template-columns: repeat(2, 1fr);
    }
    .mainPerson .image {
        width: calc(50% - 10px);
    }

    .mainPerson .text {
        width: calc(50% - 10px);
    }
    .grid.logos {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media only screen and (max-width: 479px) {
    .grid.team {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 20px;
    }
    .mainPerson {
        flex-direction: column;
        margin-bottom: 30px;
    }
    .mainPerson .image,
    .mainPerson .text {
        width: 100%;
    }
    .grid.icons {
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0;
        row-gap: 30px;
    }
        .grid.icons figure:nth-child(odd) {
            padding-right: 20px;
        }
        .grid.icons figure:nth-child(even) {
            border-right: none;
            padding-right: 0;
            padding-left: 20px;
        }
    .grid.logos {
        grid-template-columns: repeat(3, 1fr);
    }
    .twoText {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
        .twoText > div:nth-child(1) {
            width: 100%
        }

        .twoText > div:nth-child(2) {
            width: 100%
        }
}