.hero h1 {
    width:auto;
    float:left;
}

.hero .cats {
    float:right;
}

    .hero .cat {
        background-color:#333;
        clear:none;
        margin:0 0 2px 2px;
        font-size: 1em;
    }

.creative {
    display:grid;
    grid-template-columns: 1fr 2fr;
    grid-gap:1em;
}

    .logo {
        margin-bottom:1em;
    }

    .logo img {
        width:100%;
    }

    .intro {
        background-color:#fff;
        padding:2em;
        margin-bottom:1em;
    }

        .intro ul,
        .intro ol {
            margin:1.25em;
        }

        .intro li {
            margin-bottom:0.5em;
            padding-left:0.5em;
            line-height:1.2;
        }

    .contact {
        background-color:#fff;
        padding:2em;
        margin-bottom:1em;
    }

        .contact > a,
        .contact .social {
            float:left;
            clear:left;
            width:100%;
            display:grid;
            grid-template-columns: 25px 1fr;
            grid-gap:2em;
            margin-bottom:1em;
        }

            .contact > a {
                color:var(--pink);
            }

                .contact a p {
                    margin-top:2px;
                }

        .social div a {
            float:left;
            width:35px;
            margin:0 2px 2px 0;
        }

            .social div img:last-of-type {
                display:none;
            }

            .social div a:hover img:first-of-type {
                display:none;
            }

            .social div a:hover img:last-of-type {
                display:block;
            }

    .gallery ul,
    .gallery li {
        margin:0;
        padding:0;
        list-style: none;
    }

    .noimages {
        background-color:#eee;
        padding:2em;
    }

    .videos {
        display:grid;
        grid-gap:1em;
    }

        .video h3 {
            font-size:2em;
            font-weight:300;
            margin-bottom:0.5em;
            color:#fff;
        }

        .video iframe,
        .TextformatterVideoEmbed {
            margin:0;
        }

    .sy-caption-wrap {
        display:none;
    }

    .thumb-box {
        margin:1em 0;
    }

    .thumbs {
        display:grid;
        grid-template-columns: repeat(8,1fr);
    }

        .thumbs a img{
            filter:grayscale(1);
            width:100%;
        }

        .thumbs a img.active,
        .thumbs a:hover img {
            filter:grayscale(0);
        }

    .gallery > div:last-of-type {
        margin-bottom:0;
    }

.cantview,
.preview {
    background-color:#ccc;
    padding:2em;
}

.preview {
    margin-bottom:1em;
}

    .preview img {
        float:left;
        width:3.5em;
        margin-right:1em;
    }

    .preview p {
        float:left;
        margin:0.6em 0 0 0;
    }

@media screen and (max-width:899px) {
    .hero .cat {
        clear:right;
        float:right;
    }
}

@media screen and (max-width:649px) {

    .hero h1 {
        font-size: 3em;
    }
    .creative {
        grid-template-columns: 1fr;
    }

        .creative .left {
            display:grid;
            grid-template-columns: 1fr;
            grid-gap:1em;
        }

        .intro,
        .logo,
        .contact {
            margin:0;
        }

    .thumbs {
        grid-template-columns: repeat(6,1fr);
    }
}

@media screen and (max-width:599px) {
    .hero .cats {
        float:left;
        clear:left;
        width:100%;
        margin-top:1em;
    }

        .hero .cat {
            float:left;
            clear:none;
            margin:0 2px 2px 0;
        }
}

@media screen and (max-width:399px) {
    .thumbs {
        grid-template-columns: repeat(4,1fr);
    }

    .hero .cat {
        clear:left;
        padding:0.5em;
    }
}