/* ************************************** */
/* *************** HEADER *************** */
/* ************************************** */
@media (max-width: 1000px) {
    header .inner {
        padding-top: 88px;
    }
    .shrink-header header .inner {
        transform: translateY(-9rem);
    }
    .shrink-header header .shrink-holder {
        transform: scale(0.5) translateY(5.2em);
    }
    header .logo {
        font-size: 4.3rem;
    }
    header nav#primary {
        font-size: 1.25rem;
    }
    nav#primary.clone {
        font-size: 1.8rem;
    }
    header nav#secondary {
        padding: 16.2rem 7.25% 3rem;
    }
}
@media (max-width: 800px) {
    header .inner {
        padding-top: 25px;
        width: 88%;
        padding: 25px 6% 0;
    }
    .shrink-header header .inner {
        transform: translateY(-2.7rem);
    }
    .shrink-header header .shrink-holder {
        transform: scale(0.73) translateY(0.95em);
    }
    header .logo {
        font-size: 2.9rem;
    }
    header nav#primary:not(.clone) {
        font-size: 1rem;
        line-height: 1.5;
        transform: translateY(0rem);
        transition: transform .27s 0s;
    }
    .shrink-header header nav#primary:not(.clone) {
        pointer-events: auto;
        opacity: 1;
        transform: translateY(0.7rem);
        transition: transform .27s 0s;
    }
    nav#primary.clone {
        display: none;
    }
    .bottom-rule,
    .shrink-header header .bottom-rule {
        height: 7px;
        margin-top: 1.2rem;
        transform: scaleY(1);
    }
    .bottom-rule.rule-alt,
    .shrink-header .bottom-rule.rule-alt {
        transform: translateX(100%);
    }
        .bottom-rule.rule-alt:before {
            width: 88%;
            margin: 0 6%;
        }
}
@media (max-width: 700px) {
    .title-holder {
        display: none !important;
    }
}

/* *************************************** */
/* *************** SUB NAV *************** */
/* *************************************** */
@media (max-width: 1000px) {
    nav#secondary .overflow-x-holder > ul {
        column-count: 3;
    }
    header .mascot svg {
        width: 95px;
        height: 154px;
    }
}
@media (max-width: 800px) {
    .menuOn body {
        overflow: hidden;
    }
    header .mascot {
        display: none;
    }
    .close-menu {
        left: 6%;
        top: 9rem;
    }
    header nav#secondary {
        padding: 12rem 6% 3rem;
        width: 88%;
    }
    nav#secondary a {
        max-width: none;
    }
    .overflow-x-holder {
        width: 100%;
    }
    nav#secondary .overflow-x-holder > ul {
        column-count: 1;
    }
    nav#secondary .overflow-x-holder > ul > li > a {
        font-size: 2.7em;
        font-weight: 100;
    }
    nav#secondary .overflow-x-holder > ul > li > ul {
        padding-top: 1.1em;
        padding-bottom: 2em;
    }
        nav#secondary .overflow-x-holder > ul > li > ul li {
            padding-bottom: 0.55em;
        }
            nav#secondary .overflow-x-holder > ul > li > ul li a {
                font-size: 1.5em;
                margin-left: 0 !important;
            }
}

/* *************************************** */
/* *************** GENERAL *************** */
/* *************************************** */
@media (max-width: 1000px) {
    #content:before {
        height: 248px;
    }
}
@media (max-width: 800px) {
    #content:before {
        height: 148px;
    }
    .icons li {
        flex: 0 48px;
    }
    footer .icons svg {
        height: 24px;
    }
    footer small {
        font-size: 0.7rem;
    }
}

/* ************************************* */
/* *************** GRIDZ *************** */
/* ************************************* */
@media (max-width: 800px) {
    .gridpage {
        width: 88%;
        margin: 0% 6%;
    }
    .justified .cell .caption,
    .motion .cell .caption {
        font-size: 1.2rem;
        max-width: none;
    }
}
@media (max-width: 600px) {
    .gutter-sizer {
        width: 2.5%;
    }
    .grid-sizer,
    .motion .grid-sizer,
    .masongrid .cell,
    .motion .cell {
        width: 48.75%;
    }
    .masongrid .cell {
        margin-bottom: 2.5%;
    }
    .justified .cell .caption,
    .motion .cell .caption {
        font-size: 1rem;
        padding: 0 6% 5%;
    }
}
@media (max-width: 400px) {
    .justified .cell .caption,
    .motion .cell .caption {
        font-size: .8rem;
        padding: 0 8% 5%;
    }
}

/* ***************************************** */
/* *************** SLIDESHOW *************** */
/* ***************************************** */
@media (max-width: 600px) {
    .ui.prev,
    .ui.next {
        top: auto;
        bottom: 0;
        padding: 25px 6% !important;
        transform: none !important;
        transition: none;
    }
    .ui.next {
        transform: rotate(180deg) !important;
    }
    .slickslideshow .cell .photo {
        max-width: 100%;
        max-height: 100%;
    }
    .slickslideshow .cell .inner {
        width: 100%;
        max-width: none;
    }
}

/* ************************************* */
/* *************** ABOUT *************** */
/* ************************************* */
@media (max-width: 1280px) {
    .textpage .instagram-grid .caption {
        width: 90%;
    }
}
@media (max-width: 1024px) {
    .big-text {
        font-size: 2.2em;
    }
    .textpage .instagram-grid .caption {
        width: 100%;
    }
}
@media (max-width: 800px) {
    .textpage {
        width: 88%;
    }
    .big-text {
        font-size: 2em;
    }
    .textpage .content-holder {
        flex-wrap: wrap;
    }
    .textpage .masongrid,
    .textpage .writeup {
        flex: 1 1 100%;
    }
    ul.instagram-grid {
        flex-wrap: wrap;
    }
    .instagram-grid .cell {
        flex: 0 0 49%;
        margin-bottom: 10%;
        overflow: hidden;
    }
    .textpage .instagram-grid .caption {
        max-width: 280px;
    }
}
@media (max-width: 700px) {
    .textpage .instagram-grid .caption {
        width: 90%;
    }
}
@media (max-width: 600px) {
    .big-text {
        width: 100%;
        font-size: 1.5em;
    }
    .textpage .caption {
        width: 100%;
        padding-top: 1.3em;
    }
    .textpage .caption:before {
        margin-bottom: 0.7em;
    }
    .instagram-grid .cell {
        margin-bottom: 30px;
    }
}
@media (max-width: 450px) {
    .instagram-feed .heading {
        flex-wrap: wrap;
        padding-bottom: 2em;
    }
    .instagram-feed h2 {
        padding-bottom: 0.3em;
    }
    .instagram-feed .heading a {
        flex-basis: 100%;
    }
}
@media (max-width: 374px) {
    .instagram-grid .cell {
        flex-basis: 100%;
        margin-bottom: 14%;
    }
    .textpage .instagram-grid .caption {
        padding-top: 1.6em;
    }
}

/* ***************************************** */
/* *************** BLOG GRID *************** */
/* ***************************************** */
@media (max-width: 1280px) {
    .cell.large .post-title {
        font-size: 2.9vw;
    }
}
@media (max-width: 900px) {
    .cell.large .post-caption {
        padding-top: 0.9em;
    }
    .blog .cell .caption {
        padding: 0.8em 2% 0 2%;
        font-size: 0.7rem;
    }
}
@media (max-width: 700px) {
    .blog .grid-sizer,
    .blog .masongrid .cell {
        width: 48.75%;
    }
    .blog .gutter-sizer {
        width: 2.5%;
    }
    .blog .cell,
    .blog .cell.large {
        margin-bottom: 30px;
    }
    .blog .cell.large {
        display: block;
    }
    .blog .cell.large .caption {
        padding: 0.8em 2% 0 2%;
        font-size: 0.7rem;
    }
    .blog .cell.large .post-title {
        font-size: 1.4em;
        line-height: inherit;
    }
    .blog .cell.large .post-caption {
        padding-top: 0.7em;
    }
}
@media (max-width: 430px) {
    .blog .grid-sizer,
    .blog .masongrid .cell {
        width: 100%;
    }
    .blog .gutter-sizer {
        width: 0%;
    }
    .blog .cell.large .caption {
        max-width: 280px;
    }
}

/* ***************************************** */
/* *************** BLOG POST *************** */
/* ***************************************** */
@media (max-width: 1280px) {
    .post h1 {
        font-size: 2.9vw;
        width: 120%;
        margin: 0px auto 0px -10%;
        /* width: 15.815em;
        margin: 0px auto; */
    }
}
@media (max-width: 940px) {
    .post h1 {
        width: 100%;
        margin: 0px auto;
        font-size: 1.7rem;
    }
}
@media (max-width: 515px) {
    .post-nav {
        padding-bottom: 9%;
    }
    .post h1 {
        width: 100%;
        font-size: 1.4rem;
        margin: 0px auto;
    }
    .post-content {
        width: 100%;
    }
}