body {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2rem;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body.page-home {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.logo {
    font-family: 'Cinzel', serif;
    font-size: 25px;
}


a {
    color: #70c8e0;
}
a:hover {
    color: #00d1b2;
}

ol {
    padding-left: 10px;
}
ol ol {
    padding-left: 25px;
    list-style: lower-alpha;
}


.flex-direction-column {
    flex-direction: column;
}
.is-abby-blue {
    background-color: #209cee;
}
.hero.is-abby-blue .title,
.hero.is-warning .title {
    color: #fff;
}

.wow { visibility: hidden; }

.navbar-wrapper.columns,
.navbar-wrapper.columns .column {
    padding: 0;
    margin: 0;
}
.navbar-menu .navbar-about:hover {
    background-color: #209cee;
    color: #fff;
}
.navbar-menu .navbar-resume:hover {
    background-color: #00d1b2;
    color: #fff;
}
.navbar-menu .navbar-contact:hover {
    background-color: #ffdd57;
    color: #fff;
}

@media screen and (min-width: 1088px) {
    .navbar-wrapper.columns,
    .navbar-wrapper.columns .column {
        padding: 0;
        margin: 0;
    }
}

.hero {
    margin-bottom: 40px;
}

.page {
    margin: 0 20px;
    width: auto;
    max-width: 700px;
}
.page-resume .page {
    max-width: 900px;
}
.page ul {
    list-style: disc outside;
    margin: 1em 0 1em 2em;
}
.page ol ul {
    padding-left: 25px;
    margin-top: 5px;
}
.page p {
    margin-bottom: 1em;
}
.page h2 {
    font-size: 1.6rem;
    margin-bottom: .6rem;
    color: #209cee;
}

/*.page-home {
    background-image: url(/assets/images/abby-bg-mobile.jpg);
    background-size: cover;
    background-position: center 230px;
    background-repeat: no-repeat;
}*/
.page-home {
    background-image: url(/assets/images/abby-bg-mobile.jpg);
    background-size: 310px;
    background-position: left 300px;
    background-repeat: no-repeat;
}
@media screen and (min-width: 842px) {
    .page-home {
        background-image: url(/assets/images/abby-vona-bg.jpg);
        background-size: cover;
        background-position: top+52px right;
    }
}
/*.page-home .navbar {
    background-color: #;
}*/
.work-wrapper {
    position: relative;
}

.work-wrapper .work-item {
    //max-width: 450px;
    margin: 40px auto;
}
.work-wrapper .work-item h2 {
    font-size: 100%;
}
.work-wrapper .work-item .columns {
    flex-direction: column;
    display: flex;
}
.work-wrapper .work-item .columns .column {
    padding: 0 20px;
}
/*.work-wrapper .work-item:nth-child(odd) .columns .column:first-child {
    padding: 20px;
    border-right: solid 1px #ccc;
}
.work-wrapper .work-item:nth-child(even) .columns .column:first-child {
    padding: 20px;
    border-left: solid 1px #ccc;
}*/
.work-wrapper .work-item:after {
    display: block;
    content: " ";
    white-space: pre;
    margin: 0 auto;
    width: 1px;
    background: #ccc;
    margin-top: 30px;
}
.work-wrapper .work-item .work-meta {
    border-bottom: solid 1px #e8e8e8;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    margin-top: 0px;
}
.work-wrapper .work-item .work-meta .work-date {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.work-wrapper .work-item .work-meta .work-date h2 {
    color: hsl(171, 100%, 41%);
    font-weight: bold;
}

.work-wrapper .work-item .work-meta p {
    text-transform: uppercase;
    letter-spacing: 0.3rem;
    color: #7b7b7b;
    margin-bottom: 0;
    font-size: 0.9rem;
}

.work-wrapper .work-item img {
    box-shadow: 3px 3px 12px 0px rgba(10,10,10,.1);
}
.work-wrapper .work-item .caption {
    display: block;
    font-style: italic; 
    padding: 0 20px;
    font-size: 11px;
    margin-bottom: 30px;
}
.work-wrapper .work-item .caption a:after {
    display: inline-block;
    content: ' ';
    white-space: pre;
    background-color: #70c8e0;
    -webkit-mask-image: url(/assets/vendor/font-awesome/svgs/solid/external-link-alt.svg);
    mask-image: url(/assets/vendor/font-awesome/svgs/solid/external-link-alt.svg);
    background-size: cover;
    width: 11px;
    height: 11px;
    margin-left: 5px;
    position: relative;
    top: 2px;
}
.work-wrapper .work-item img.no-shadow {
    box-shadow: none;
}

@media screen and (min-width: 769px) {
    .page {
        margin: 0 auto;
        width: 80%;
    }
    .work-wrapper:after {
        content: " ";
        white-space: pre;
        display: block;
        background: #ccc;
        width: 1px;
        height: 100%;
        position: absolute;
        left: 50%;
        top: 0;
    }
    .work-wrapper .work-item:after {
        display: none;
        content: '';
    }
    .work-wrapper .work-item .columns .column {
        padding: 0px;
    }
    .work-wrapper .columns .column > p {
        padding: 0 20px;
    }
    .work-wrapper .work-item .columns {
        flex-direction: row;
        display: flex;
    }
    .work-wrapper .work-item:nth-child(odd) .columns .column:first-child{
        margin-bottom: 60px;
    }
    .work-wrapper .work-item:nth-child(even) .columns {
        flex-direction: row-reverse;
        display: flex;
    }
    .work-wrapper .work-item:nth-child(even) .columns .column:last-child {
        text-align: right;
    }
    .work-wrapper .work-item .work-meta {
        margin-top: 0px;
        padding: 20px;
    }
}


/* Sections */
.section.section-about,
.section.section-footer-callout {
    padding: 6rem 1.5rem;
}
.section-about .column{
    padding: 0 5%;
}
.section.section-footer-callout {
    padding: 6rem 4rem;
    font-size: 28px;
    background: url('/assets/images/polka-light-blue.png');
    margin-top: 3rem;
}
.section.section-footer-callout-title {
    font-family: 'Sawarabi Mincho', sans-serif;
}
.section-footer-callout-title a {
    background: #fff;
    padding: 20px 5px;
    position: relative;
    display: block;
}

.section.section-services-blocks {
    padding: 0;
}
.section-services-blocks .column {
    padding: 0;
    min-height: 300px;
}
.section-services-blocks .column > a {
    height: 100%;
    width: 100%;
    flex-direction: column;
    min-height: 300px;
}

.section-services-blocks .columns {
    min-height: 400px;
}
.section-services-blocks .columns:nth-child(even) {
    flex-direction: column-reverse;
    display: flex;
}
.section-services-blocks .columns h2 {
    font-size: 24px;
    color: #fff;
}
.bg-pink {
    background: #C91873;
}
.bg-blue {
    background: #0B7DC9;
}
.bg-green {
    background: #31B519;
}

.section-blog-preview {
    background: #F4F4F4;
}
.section-blog-preview .column {
    margin-bottom: 20px;
    padding-left: 5%;
    padding-right: 5%;
}
.section-blog-preview .date {
    font-size: 14px;
    font-weight: bold;
    color: #626262;
    margin-bottom: 10px;
}
.section-blog-preview .title {
    font-size: 24px;
    margin-bottom: 10px;
}

.section.section-footer-callout {
    text-align: center;
}

.section.section-footer {
    color: #111;
    padding: 4rem;
}
.page-contact .section.section-footer {
    color: #111;
    padding: 1rem 4rem;
}
.page-home .section.section-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    display: none;
}


/* Overrides */

/* Add-Ons */
.hero.hero-large {
    min-height: 250px;
    color: #fff;
    background: #4276d0;
}
.hero.hero-x-large {
    min-height: 400px;
    color: #fff;
    background: #4276d0;
}

.is-vcentered {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar {
    position: fixed;
    width: 100%;
    box-shadow: 0 8px 16px rgba(10,10,10,.1);
}



/* Animations */

.section-services-blocks .column > a h4 {
    -webkit-transition: transform 1s; /* Safari */
    transition: transform 1.4s, opacity 1s;
    transition-timing-function: ease;
    transform: translatey(30px);
    opacity: 0;
    color: #fff;
}
.section-services-blocks .column > a:hover h4 {
    transform: translatey(5px);
    opacity: 1;
}
.section-services-blocks .column > a h2 {
    -webkit-transition: transform 1s; /* Safari */
    transition: transform 1s;
    transition-timing-function: ease;
}
.section-services-blocks .column > a:hover h2 {
    transform: translatey(-20px);
}
.section-services-blocks .column > a .bottom-border-reveal {
    width: 0;
    height: 1px;
    background: #fff;

    -webkit-transition: width 1s, transform 1s; /* Safari */
    transition: width 1s, transform 1s;
    transition-timing-function: ease;
}
.section-services-blocks .column > a:hover .bottom-border-reveal {
    width: 50%;
    transform: translatey(-10px);
}


.navbar-menu {
    //transform: translateY(-2em);
    z-index: -1;
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
    opacity: 0;
}
.navbar-menu.is-active {
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s; 
    opacity: 1;
}

@media screen and (min-width: 769px) {
    .section-services-blocks .columns:nth-child(even) {
        flex-direction: row;
    }
    .navbar-menu {
        //transform: translateY(-2em);
        opacity: 1;
    }
}


.postcard-wrapper {
    background-image: linear-gradient(135deg, #00d1b2 25%, #f0f0f0 25%, #f0f0f0 50%, #00d1b2 50%, #00d1b2 75%, #f0f0f0 75%, #f0f0f0 100%);
    background-size: 56.57px 56.57px;
    padding: 10px;
    margin-bottom: 30px;
}
.postcard-wrapper .postcard {
    background: #edf7f8;
    padding: 30px 10px 10px 10px;
}

.postcard-wrapper .stamp {
    position: absolute;
    width: 120px;
    top: 0px;
    right: 20px;
}

.postcard input,
.postcard textarea {
    background: none, transparent;
    border-radius: 0;
    box-shadow: none;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #225569;
}
.postcard input:active,
.postcard textarea:active {
    border-bottom: 2px solid #1c4454;
}
.postcard input:hover,
.postcard textarea:hover {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #1c4454;
}

.postcard .postcard-contact {
    padding: 0px 40px 40px 40px;
}
.postcard .postcard-message {
    padding: 0px 40px;
}
@media screen and (min-width: 769px) {
    .postcard .postcard-message {
        padding: 76px 40px 40px 40px;
    }
    .postcard .postcard-contact {
        padding: 80px 40px 40px 40px;
    }
}

.countryCode {
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 41px;
    left: 60px;
    font-size: 28px;
}


.home-wrapper {
    position: relative;
}
.home-wrapper .home-heading {
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}
.home-wrapper .home-heading h2 {
    font-size: 2.5rem;
}
.home-wrapper .home-heading h5 {
    font-size: 1.5rem;
}
.home-wrapper .home-cta {
    margin-top: 1rem;
}
@media screen and (min-width: 842px) {
    .home-wrapper .home-heading {
        margin-top: 13%;
        margin-left: 148px;
        max-width: 300px;
        padding: 0;
    }
}

/* Forms */
.field {
    margin-bottom: .75rem;
}
.contact-form {
    margin: 20px 0;
}

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


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

/* Gallery */

.photo-gallery-wrapper {
    width: 100%;
    height: 100%;
    padding: 1rem;

    display: block;
}
.photo-gallery-wrapper .cell {
    margin-bottom: 2rem;
}
.photo-gallery-wrapper .cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.cell--1 {
  grid-column: 1 / 6;
  grid-row: 1 / 9;
}


.cell--2 {
  grid-column: 6 / 13;
  grid-row: 1 / 5;
}

.cell--3 {
    grid-column: 6 / 9;
    grid-row: 5 / 9;
}

.cell--4 {
  grid-column: 12 / -1;
  grid-row: 1 / 4;
}

.cell--5 {
  grid-column: 1 / 4;
  grid-row: 6 / 11;
}

.cell--6 {
  grid-column: 4 / 6;
  grid-row: 6 / 7;
}

.cell--7 {
  grid-column: 4 / 6;
  grid-row: 7 / 11;
}

.cell--8 {
  grid-column: 1 / 6;
  grid-row: 11 / -1;
}

.cell--9 {
  grid-column: 6 / 12;
  grid-row: 11 / -1;
}

.cell--10 {
  grid-column: 9 / 12;
  grid-row: 4 / 11;
}

.cell--11 {
  grid-column: 12 / 13;
  grid-row: 4 / 6;
}

.cell--12 {
  grid-column: 13 / -1;
  grid-row: 4 / 6;
}

.cell--13 {
  grid-column: 12 / -1;
  grid-row: 6 / 13;
}

.cell--14 {
  grid-column: 12 / -1;
  grid-row: 13 / -1;
}

@media screen and (min-width: 769px) {
    .photo-gallery-wrapper .cell {
        margin-bottom: 0;
    }
    .photo-gallery-wrapper {
        width: 100%;
        height: 100%;
        padding: 0;

        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: repeat(14, 1fr);

        row-gap: 1rem;
        column-gap: 1rem;
    }

}

.colored-box {
    position: relative;
    display: block;
    margin-bottom: 50px;
}
.colored-box p:last-child {
    margin-bottom: 0;
}

.colored-box .colored-box-content {
    background: #fff;
    padding: 30px;
    z-index: 1;
    display: block;
    box-shadow: 1px 1px 13px 1px rgba(0, 0, 0, 0.15);
    border: 1px #dadada solid;
    border-radius: 5px;
}
.colored-box .colored-box-content:after {
    content: ' ';
    white-space: pre;
    background: rgba(0,0,0,0);
    display: block;
    width: 60%;
    height: 300px;
    z-index: -1;
    position: absolute;
    bottom: -170px;
    right: -180px;
    border-radius: 5px;
}

.colored-box:nth-child(even) .colored-box-content:after {
    left: -180px;
    right: 0;
}

.colored-box.colored-box-blue .colored-box-content:after {
    background: #209cee;
}
.colored-box.colored-box-cyan .colored-box-content:after {
    background: #00d1b2;
}
.colored-box.colored-box-yellow .colored-box-content:after {
    background: #ffdd57;
}
.colored-box.colored-box-green .colored-box-content:after {
    background: hsl(141, 53%, 53%);
}
.colored-box.colored-box-dark-blue .colored-box-content:after {
    background: hsl(217, 71%, 53%);
}
.colored-box.colored-box-red .colored-box-content:after {
    background: hsl(348, 100%, 61%);
}

.alumni .columns {
    height: 100%;
    min-height: 170px;      
}
.alumni > .columns {
    margin-bottom: 60px;
}

.alumni img {
    max-width: 200px;
}

.is-column-on-mobile {
    flex-direction: column;
}

.colored-box .colored-box-content.has-abby-about-background {
    background: #fff;
}
.colored-box .colored-box-content.has-abby-about-background h2 {
    text-align: center;
}
.about-image {
    display: block;
    max-width: 300px;
    /*border: solid 1px #ccc; */
    box-shadow: 1px 1px 5px 0px #ccccccc4;
    margin: 20px auto;
    border-radius: 5px;
}
.about-image img {
    border-radius: 5px;
    margin-bottom: -7px;
}
@media screen and (min-width: 769px) {
    .colored-box .colored-box-content.has-abby-about-background {
        background: url('/assets/images/about_image.jpg'), #fff;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .alumni > .columns:first-child .column {
        margin-bottom: 60px;
    }
    .is-column-on-mobile {
        flex-direction: row;
    }
    .colored-box .colored-box-content.has-abby-about-background h2 {
        text-align: left;
    }
    .about-image {
        display: none;
    }
}