html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizelegibility;
    font-feature-settings: "liga", "kern";
    font-family: 'gilroybold';
    line-height: 1.5;
}

.fadein {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.fadein.lazyloaded {
    opacity: 1;
}

.blur-up {
    will-change: filter, opacity, transform;
    filter: blur(3px);
    transition: transform 1s, opacity 1s, blur 0.3s;
    opacity: 0;
    transform: scale(0.95);
    transform-origin: center;
}

.blur-up:not(.lazyload) {
    opacity: 1;
    transform: scale(1);
}

.blur-up.lazyloaded {
    filter: blur(0);
}

.spinner {
    background: rgba(0, 0, 0, 0.03) url("../images/ui/spinner.svg") no-repeat center;
}

::-moz-selection {
    color: white;
    background: black;
    text-shadow: none;
}

::selection {
    color: white;
    background: black;
    text-shadow: none;
}

.custom-background:after {
    content: "";
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    z-index: -3;
    background-attachment: scroll;
    min-height: 100vh;
    height: calc(100vw * 16 / 9);
}

@media (orientation: landscape) {
    .custom-background:after {
        height: calc(100vw * 3 / 4);
    }
}

[id=wrapper] .page-header>*:first-child:not(img):not(form):not(figure):not(div),
[id=sidebar]>*>*:first-child:not(img):not(form):not(figure):not(div),
[id=footer] .container>*:first-child:not(img):not(form):not(figure):not(div) {
    margin-top: -0.25em;
}

[id=wrapper] .page-header>*:last-child:not(img):not(form):not(figure):not(div),
[id=sidebar]>*>*:last-child:not(img):not(form):not(figure):not(div),
[id=footer] .container>*:last-child:not(img):not(form):not(figure):not(div) {
    margin-bottom: -0.25em;
}

[id=sidebar] a {
    position: relative;
    display: inline-block;
}

[id=sidebar] a:before,
[id=sidebar] a:after {
    content: "";
    position: absolute;
    top: -0.5em;
    right: -0.75em;
    bottom: -0.5em;
    left: -0.75em;
    display: block;
}

[id=sidebar] a:before {
    transform-origin: right 0;
    transform: scaleX(0);
    transition: transform 0.3s, transform-origin 0.3s;
    background: black;
    z-index: -1;
}

[id=sidebar] a:hover {
    color: white;
    transition: color 0.15s 0.15s;
}

[id=sidebar] a:hover:before {
    transform-origin: left 0;
    transform: scaleX(1);
    transition: transform-origin 0s, transform 0.3s;
}

[id=sidebar] a:hover:after {
    z-index: 1;
}

[id=sidebar]>* {
    position: relative;
}

[id=sidebar]> :before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: calc((.75rem + 1.25vw)*-1);
    z-index: -2;
    transition: background 0.2s ease;
    background-color: rgba(255, 255, 255, 0);
}

[id=sidebar]> :hover:before,
[id=sidebar]> :focus:before {
    background-color: white;
}

.single [id=main] {
    position: relative;
    max-width: 60em;
    margin-left: auto;
    margin-right: auto;
}

.single [id=main]:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    margin: calc((.75rem + 1.25vw)*-1);
    background: white;
}

h1,
h2,
fieldset legend,
h3,
h4,
h5,
h6 {
    margin: 1rem 0;
    font-family: 'gilroybold';
}

h1:not([class]),
h2:not([class]),
fieldset legend:not([class]),
h3:not([class]),
h4:not([class]),
h5:not([class]),
h6:not([class]) {
    max-width: 60rem;
}

h1 {
    font-weight: 600;
    line-height: 1.25;
}

h1 {
    font-size: 1.29616rem;
}

@media screen and (min-width: 37.5rem) {
    h1 {
        font-size: calc(1.29616rem + 1.86118 * ((100vw - 37.5rem) / 42.5));
    }
}

@media screen and (min-width: 80rem) {
    h1 {
        font-size: 3.15733rem;
    }
}

h2,
fieldset legend {
    font-weight: 600;
    line-height: 1.375;
}

h2,
fieldset legend {
    font-size: 1.21477rem;
}

@media screen and (min-width: 37.5rem) {
    h2,
    fieldset legend {
        font-size: calc(1.21477rem + 1.15383 * ((100vw - 37.5rem) / 42.5));
    }
}

@media screen and (min-width: 80rem) {
    h2,
    fieldset legend {
        font-size: 2.36859rem;
    }
}

h3 {
    font-weight: 500;
}

h3 {
    font-size: 1.13849rem;
}

@media screen and (min-width: 37.5rem) {
    h3 {
        font-size: calc(1.13849rem + 0.6384 * ((100vw - 37.5rem) / 42.5));
    }
}

@media screen and (min-width: 80rem) {
    h3 {
        font-size: 1.77689rem;
    }
}

h4 {
    font-weight: 500;
}

h4 {
    font-size: 1.067rem;
}

@media screen and (min-width: 37.5rem) {
    h4 {
        font-size: calc(1.067rem + 0.266 * ((100vw - 37.5rem) / 42.5));
    }
}

@media screen and (min-width: 80rem) {
    h4 {
        font-size: 1.333rem;
    }
}

h5 {
    font-weight: 500;
}

h5 {
    font-size: 1rem;
}

@media screen and (min-width: 37.5rem) {
    h5 {
        font-size: calc(1rem + 0 * ((100vw - 37.5rem) / 42.5));
    }
}

@media screen and (min-width: 80rem) {
    h5 {
        font-size: 1rem;
    }
}

h6 {
    font-weight: 500;
}

h6 {
    font-size: 0.93721rem;
}

@media screen and (min-width: 37.5rem) {
    h6 {
        font-size: calc(0.93721rem + -0.18702 * ((100vw - 37.5rem) / 42.5));
    }
}

@media screen and (min-width: 80rem) {
    h6 {
        font-size: 0.75019rem;
    }
}

a {
    color: inherit;
    text-decoration: none;
}

a:focus {
    outline: none;
}

small {
    font-size: 0.75rem;
}

@media (max-width: 640px) {
    pre {
        overflow: hidden;
    }
}

p,
ul,
dl,
ol,
blockquote {
    margin: 1.25em 0;
}

p:not([class]),
ul:not([class]),
dl:not([class]),
ol:not([class]),
blockquote:not([class]) {
    max-width: 60rem;
}

ul {
    list-style-type: square;
}

hr {
    border: none;
    border-bottom: 2px dashed black;
    margin: calc(.75rem + 1.25vw) 0;
}

fieldset {
    border: 1rem solid rgba(0, 0, 0, 0.02);
    margin-left: -1rem;
    margin-right: -1rem;
    padding: calc(.75rem + 1.25vw);
}

fieldset legend {
    border: 1rem solid rgba(0, 0, 0, 0.02);
    margin-bottom: 0;
    background-color: white;
    padding: 0.25em 0.5em;
}

fieldset>* {
    margin-left: auto;
    margin-right: auto;
}

figure {
    margin: 0;
}

figure[style] {
    max-width: 100%;
}

img,
svg {
    max-width: 100%;
    height: auto;
    border: 0;
}

table {
    background: rgba(0, 0, 0, 0.02);
    width: 100%;
}

table th,
table td {
    padding: 0.75em 1em;
}

table th:not(:last-child),
table td:not(:last-child) {
    border-right: 0.5rem solid white;
}

table tr:not(:last-child) td,
table tr:not(:last-child) th {
    border-bottom: 0.5rem solid white;
}

table th {
    background: rgba(0, 0, 0, 0.02);
}

table td {
    font-size: 0.875em;
}

table th,
table caption {
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.1em;
}

table caption {
    padding: 1.25em 0.5em 0;
}

ol,
ul {
    padding: 0;
    list-style-position: inside;
}

ol li+li,
ul li+li {
    margin-top: 0.5em;
}

[id=main] .entry {
    font-family: 'gilroybold';
}

[id=main] .entry a {
    text-decoration: underline;
}

.container,
body:not(.has-gallery):not(.single-format-gallery):not(.page-template-gallery) [id=wrapper],
.single-format-gallery [id=sidebar],
.page-template-gallery [id=sidebar] {
    max-width: 100rem;
    padding-left: calc(.75rem + 1.25vw);
    padding-right: calc(.75rem + 1.25vw);
    margin-left: auto;
    margin-right: auto;
}

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

[id=wrapper] {
    flex: 1;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding-top: calc(.75rem + 1.25vw);
    padding-bottom: calc((.75rem + 1.25vw)*2);
}

@media (min-width: 1020px) {
    body:not(.has-gallery) [id=wrapper],
    body:not(.single-format-gallery) [id=wrapper],
    [id=wrapper] body:not(.page-template-gallery) {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }
}

[id=wrapper]>*+* {
    margin-top: calc((.75rem + 1.25vw)*2);
}

.has-gallery [id=wrapper],
.has-gallery [id=wrapper] main,
.single-format-gallery [id=wrapper],
.single-format-gallery [id=wrapper] main,
.page-template-gallery [id=wrapper],
.page-template-gallery [id=wrapper] main {
    padding-top: 0;
    max-width: none;
}

[id=wrapper] .gallery-grid:first-child {
    padding-top: calc((.75rem + 1.25vw)*2);
}

[id=wrapper] .gallery-grid:last-child {
    padding-bottom: calc((.75rem + 1.25vw)*2);
}

[id=wrapper] .page-header {
    text-align: center;
    margin-bottom: calc((.75rem + 1.25vw)*2);
    text-transform: uppercase;
}

@media (min-width: 1020px) {
    [id=main] {
        width: calc(100% - 280px + ((.75rem + 1.25vw)*-1*2));
        margin-right: calc((.75rem + 1.25vw)*2);
    }
    [id=main]:only-child,
    .single-format-gallery [id=main],
    .page-template-gallery [id=main] {
        width: 100%;
        margin-right: 0;
    }
}

.single [id=main]:not(:only-child)+* {
    margin-left: calc((.75rem + 1.25vw)*2);
}

[id=main]>*+* {
    margin-top: calc((.75rem + 1.25vw)*3);
}

[id=sidebar] {
    font-size: 0.75em;
    transition: color 0.15s 0.15s;
}

@media (min-width: 1020px) {
    body:not(.single-format-gallery):not(.page-template-gallery) [id=sidebar] {
        width: calc(280px);
        margin-top: 0;
    }
}

[id=sidebar]>*+* {
    margin-top: calc((.75rem + 1.25vw)*2);
}

@media (min-width: 640px) and (max-width: 769px) {
    [id=sidebar] {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    [id=sidebar]>[class*=search] {
        width: 100%;
    }
    [id=sidebar]>*:not([class*=search]) {
        width: calc((100% - 1.5rem - 3vw)/2);
    }
}

[id=sidebar] h1,
[id=sidebar] h2,
[id=sidebar] fieldset legend,
fieldset [id=sidebar] legend {
    font-size: 1.25em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 2px solid;
    padding-bottom: 0.5rem;
}

[id=sidebar] li {
    display: block;
    padding-left: calc(.75rem + 1.25vw);
    position: relative;
}

[id=sidebar] li:before {
    content: "";
    position: absolute;
    top: calc(.75em - 1px);
    left: 0;
    border-top: 2px solid;
    width: 4px;
}

@media (min-width: 770px) {
    .single-format-gallery [id=sidebar],
    .page-template-gallery [id=sidebar] {
        width: 100%;
        display: flex;
        flex-flow: row wrap;
    }
    .single-format-gallery [id=sidebar]>*[class*=search],
    .page-template-gallery [id=sidebar]>*[class*=search] {
        width: 100%;
    }
    .single-format-gallery [id=sidebar]>*:not([class*=search]),
    .page-template-gallery [id=sidebar]>*:not([class*=search]) {
        width: calc((100% - (.75rem + 1.25vw)*8) / 4);
    }
    .single-format-gallery [id=sidebar]>*,
    .page-template-gallery [id=sidebar]>* {
        margin: calc(.75rem + 1.25vw);
    }
}

[id=sidebar].background--dark,
[id=sidebar].background--complex,
.background--dark [id=sidebar] {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

[id=sidebar].background--dark>*:hover,
[id=sidebar].background--complex>*:hover,
.background--dark [id=sidebar]>*:hover {
    color: black;
    text-shadow: none;
}

[id=footer] {
    text-align: center;
    position: relative;
}

[id=footer] .container {
    padding: calc((.75rem + 1.25vw)*2) 0;
    min-height: 100%;
    box-sizing: border-box;
}

[id=footer] .container:after {
    left: auto;
    right: calc(.75rem + 1.25vw);
}

[id=footer] .container>* {
    display: block;
}

[id=footer] .container>*+* {
    margin-top: calc(.75rem + 1.25vw);
}

[id=footer] .footer-title {
    font-weight: 600;
    font-size: 1.5em;
}

[id=footer] .footer-entry {
    text-transform: uppercase;
    font-size: 0.75em;
}

[id=footer] .container {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[id=footer] .container:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url("images/ui/target.svg") no-repeat left top, url("images/ui/target.svg") no-repeat right top, url("images/ui/target.svg") no-repeat left bottom, url("images/ui/target.svg") no-repeat right bottom;
    margin: 0 -16px -16px;
    z-index: -1;
}

.custom-background [id=footer] {
    height: 100vh;
    overflow: visible;
}

.custom-background [id=footer] .container {
    display: flex;
    flex-direction: column;
}

.custom-background [id=footer] .container:before {
    margin: calc(.75rem + 1.25vw);
    background-image: url("http://dev.mobilemarkup.com/calibration/wp-content/themes/calibration/assets/images/ui/target-background.svg");
    background-size: contain;
    background-position: center;
}

.custom-background [id=footer] .container>*:first-child {
    margin-top: auto !important;
}

[id=footer].background--dark,
.background--dark [id=footer] {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html:not(.touchevents) .gallery-caption {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translate(-50%, 0%);
    font-size: 12px;
    color: rgba(255, 255, 255, 0);
    padding: 1.25em 1.5em;
    transition: all 0.2s ease;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
}

@media (min-width: 640px) {
    html:not(.touchevents) .gallery-caption {
        font-size: 14px;
    }
}

html:not(.touchevents) .gallery-caption:before,
html:not(.touchevents) .gallery-caption:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: black;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease 0s;
    z-index: -1;
}

html:not(.touchevents) .gallery-caption:before {
    top: auto;
    height: 3px;
    transform: scale(0, 1);
    transform-origin: bottom left;
    transition-delay: 0.6s;
}

html:not(.touchevents) .gallery-caption:after {
    transform: scale(1, 0);
    transform-origin: bottom;
    transition-delay: 0.3s;
}

html:not(.touchevents) .visible.gallery-caption,
.gallery-item:hover .gallery-caption {
    color: white;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease 0.3s;
}

html:not(.touchevents) .visible.gallery-caption:before,
.gallery-item:hover .gallery-caption:before {
    transform: scale(1, 1);
    transition-delay: 0s;
}

html:not(.touchevents) .visible.gallery-caption:after,
.gallery-item:hover .gallery-caption:after {
    transform: scale(1, 1);
}

html:not(.touchevents) .gallery-caption:empty {
    display: none;
}

.gallery-item a {
    position: relative;
}

.gallery-item a:before,
.gallery-item a:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 0 solid rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    will-change: border;
    z-index: 10;
}

.gallery-item a.active:before,
.lazy-images .gallery-item a.image-lazyloaded:before,
html:not(.lazy-images) .gallery-item a:before {
    border-width: 0.5rem;
}

.gallery-item a.active:after,
.lazy-images .gallery-item a.image-lazyloaded:after,
html:not(.lazy-images) .gallery-item a:after {
    border-width: 2px;
}

.gallery-item a:after {
    margin: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.5);
    -webkit-clip-path: polygon(0 calc(100% - 1rem), 0 100%, 1rem 100%, 1rem 0, 0 0, 0 1rem, 100% 1rem, 100% 0, calc(100% - 1rem) 0, calc(100% - 1rem) 100%, 100% 100%, 100% calc(100% - 1rem));
    clip-path: polygon(0 calc(100% - 1rem), 0 100%, 1rem 100%, 1rem 0, 0 0, 0 1rem, 100% 1rem, 100% 0, calc(100% - 1rem) 0, calc(100% - 1rem) 100%, 100% 100%, 100% calc(100% - 1rem));
}

.gallery-item a:hover:after {
    transform: scale(0.9);
    border-color: white;
}

.gallery {
    font-family: 'gilroybold';
    width: 100%;
    display: grid;
    grid-template-rows: flow;
    grid-auto-flow: dense;
}

@media (max-width: 639px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 640px) and (max-width: 1019px) {
    .gallery {
        grid-template-columns: repeat(3, 1fr);
    }
}



@media (min-width: 1260px) and (max-width: 1599px) {
    .gallery {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1600px) {
    .gallery {
        grid-template-columns: repeat(5, 1fr);
    }
}

.gallery-item {
    position: relative;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.gallery-item img,
.gallery-item a {
    display: block;
}

.vertical.gallery-item {
    grid-row: span 2;
}

.horizontal.gallery-item {
    grid-column: span 2;
}

.gallery-item a {
    display: block;
}

[class*=list] .gallery-caption,
.gallery-size-thumbnail .gallery-caption {
    display: none;
}