﻿
.essa-hang-right {
    text-align: right;
    width: 100%;
}

.essa-hang-left {
    text-align: left;
    width: 100%;
}

/* Quick guide: */
/* 0 - 480 : tn (tiny) - no Bootstrap equivalent
    480 - 767: xs (extra small) - equivalent to Bootstrap xs
    767 - 992: sm (small) - equivalent to Bootstrap sm
    992 - 1200: md (medium) - equivalent to Bootstrap medium
    1200 - onward: lg - equivalent to Bootstrap large
    */

.essa-container-medium {
    padding-left: 16px;
    padding-right: 16px;
}

.essa-container {
    padding-left: 32px;
    padding-right: 32px;
}

.essa-container-large {
    padding-left: 64px;
    padding-right: 64px;
}

.essa-pull-up-small {
    margin-top: -8px;
}

.essa-pull-up-medium {
    margin-top: -16px;
}

.essa-pull-up-large {
    margin-top: -32px;
}

.essa-pull-up-xl {
    margin-top: -64px;
}

.essa-pull-down-super-xl {
    margin-top: 128px;
}

.essa-push-out-right {
    margin-right: 24px;
}

@media only screen and (min-width: 0) and (max-width: 480px) {

    .essa-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.essa-row {
// expand to child-elements height
display: table;
    width: 100%;
}

.essa-top-row {
    padding-top: 32px;
    padding-bottom: 16px;
}

.essa-middle-row {
    padding-top: 16px;
    padding-bottom: 16px;
}

.essa-bottom-row {
    padding-top: 16px;
    padding-bottom: 32px;
}

.essa-mini-row {
    padding-top: 8px;
    padding-bottom: 8px;
}

.essa-big-row {
    padding-top: 32px;
    padding-bottom: 32px;
}

.essa-huge-row {
    padding-top: 64px;
    padding-bottom: 64px;
}


.row.essa-margin-override {
    margin-left: 0;
    margin-right: 0;
}

/* Default visibilities */
.essa-vertical-align-baseline {
    display: flexbox;
    display: flex;
    align-items: baseline;
}

.essa-vertical-align-center {
    display: flexbox;
    display: flex;
    flex-direction:row;
    align-items: center;
}

/* 0 to 480  - no boot*/
@media only screen and (min-width: 0) and (max-width: 480px) {
    .essa-visible-tn-block {
        display: block;
    }

    .essa-visible-tn-inline {
        display: inline;
    }

    .essa-visible-tn-inline-block {
        display: inline-block;
    }

    .essa-hidden-tn {
        display: none !important;
    }

    .essa-visible-xs-block {
        display: none;
    }

    .essa-visible-xs-inline {
        display: none;
    }

    .essa-visible-xs-inline-block {
        display: none;
    }


    .essa-visible-all-mobile {
        display: none;
    }

    .essa-hidden-all-mobile {
        display: block;
    }

    .essa-vertical-align-baseline-tn {
        display: flexbox;
        display: flex;
        align-items: baseline;
    }

    .essa-vertical-align-baseline-sm {
        display: inherit;
        align-items: stretch;
    }

    .essa-vertical-align-baseline-md {
        display: inherit;
        align-items: stretch;
    }

    .essa-vertical-align-baseline-lg {
        display: inherit;
        align-items: stretch;
    }

    .essa-img-responsive-at-tn {
        display: block;
        height: auto;
        max-width: 100%;
    }

    .essa-img-responsive-at-xs {
        display: block;
        height: auto;
        max-width: 100%;
    }

    .essa-img-responsive-at-sm {
        display: block;
        height: auto;
        max-width: 100% !important;
    }

    .essa-img-responsive-at-md {
        display: block;
        height: auto;
        max-width: 100%;
    }

    .essa-img-responsive-at-lg {
        display: block;
        height: auto;
        max-width: 100%;
    }
}

/* 480 to 767 */
@media only screen and (min-width : 480px) {
    .essa-visible-tn-block {
        display: none;
    }

    .essa-visible-tn-inline {
        display: none;
    }

    .essa-visible-tn-inline-block {
        display: none;
    }

    .essa-hidden-tn {
        display: inherit;
    }

    .essa-visible-xs-block {
        display: block;
    }

    .essa-visible-xs-inline {
        display: inline;
    }

    .essa-visible-xs-inline-block {
        display: inline-block;
    }

    .essa-visible-all-mobile {
        display: none;
    }

    .essa-hidden-all-mobile {
        display: block;
    }

    .essa-vertical-align-baseline-sm {
        display: flexbox;
        display: flex;
        align-items: baseline;
    }

    .essa-img-responsive-at-tn {
    }

    .essa-img-responsive-at-xs {
        display: block;
        height: auto;
        max-width: 100%;
    }

    .essa-img-responsive-at-sm {
        display: block;
        height: auto;
        max-width: 100%;
    }

    .essa-img-responsive-at-md {
        display: block;
        height: auto;
        max-width: 100%;
    }

    .essa-img-responsive-at-lg {
        display: block;
        height: auto;
        max-width: 100%;
    }
}

/* 767 to 992 */
@media only screen and (min-width : 767px) and (max-width:992px) {
    .essa-visible-tn-block {
        display: none;
    }

    .essa-visible-tn-inline {
        display: none;
    }

    .essa-visible-tn-inline-block {
        display: none;
    }

    .essa-hidden-tn {
        display: inherit;
    }

    .essa-visible-xs-block {
        display: none;
    }

    .essa-visible-xs-inline {
        display: none;
    }

    .essa-visible-xs-inline-block {
        display: none;
    }

    .essa-visible-all-mobile {
        display: none;
    }

    .essa-hidden-all-mobile {
        display: block;
    }

    .essa-vertical-align-baseline-tn {
        display: inherit;
        align-items: stretch;
    }

    .essa-vertical-align-baseline-sm {
        display: inherit;
    }

    .essa-vertical-align-baseline-md {
        display: flexbox;
        display: flex;
        align-items: baseline;
    }

    .essa-vertical-align-baseline-lg {
        display: inherit;
    }

    .essa-img-responsive-at-tn {
    }

    .essa-img-responsive-at-xs {
    }

    .essa-img-responsive-at-sm {
        display: block;
        height: auto;
        max-width: 100%;
    }

    .essa-img-responsive-at-md {
        display: block;
        height: auto;
        max-width: 100%;
    }

    .essa-img-responsive-at-lg {
        display: block;
        height: auto;
        max-width: 100%;
    }
}

/* 992 to 1200*/
@media only screen and (min-width : 992px) {
    .essa-visible-tn-block {
        display: none !important;
    }

    .essa-visible-tn-inline {
        display: none;
    }

    .essa-visible-tn-inline-block {
        display: none;
    }

    .essa-hidden-tn {
        display: inherit;
    }

    .essa-visible-xs-block {
        display: none;
    }

    .essa-visible-xs-inline {
        display: none;
    }

    .essa-visible-xs-inline-block {
        display: none;
    }

    .essa-visible-all-mobile {
        display: none;
    }

    .essa-hidden-all-mobile {
        display: block;
    }

    .essa-vertical-align-baseline-tn {
        display: inherit;
        align-items: stretch;
    }

    .essa-vertical-align-baseline-sm {
        display: inherit;
    }

    .essa-vertical-align-baseline-md {
        display: flexbox;
        display: flex;
        align-items: baseline;
    }

    .essa-vertical-align-baseline-lg {
        display: inherit;
    }

    .essa-img-responsive-at-tn {
    }

    .essa-img-responsive-at-xs {
    }

    .essa-img-responsive-at-sm {
    }

    .essa-img-responsive-at-md {
        display: block;
        height: auto;
        max-width: 100%;
    }

    .essa-img-responsive-at-lg {
        display: block;
        height: auto;
        max-width: 100%;
    }

    .essa-copy-padding-md-left {
        padding-left: 50px;
    }
}

/* Macbooks all the way up to those screens in Stanley Park they show in the summer */
@media only screen and (min-width : 1200px) {
    .essa-visible-tn-block {
        display: none !important;
    }

    .essa-visible-tn-inline {
        display: none;
    }

    .essa-visible-tn-inline-block {
        display: none;
    }

    .essa-hidden-tn {
        display: inherit;
    }

    .essa-visible-xs-block {
        display: none;
    }

    .essa-visible-xs-inline {
        display: none;
    }

    .essa-visible-xs-inline-block {
        display: none;
    }

    .essa-visible-all-mobile {
        display: none;
    }

    .essa-hidden-all-mobile {
        display: block;
    }

    .essa-vertical-align-baseline-tn {
        display: inherit;
        align-items: stretch;
    }

    .essa-vertical-align-baseline-sm {
        display: inherit;
    }

    .essa-vertical-align-baseline-md {
        display: flexbox;
        display: flex;
        align-items: baseline;
    }

    .essa-vertical-align-baseline-lg {
        display: flexbox;
        display: flex;
        align-items: baseline;
    }

    .essa-img-responsive-at-tn {
    }

    .essa-img-responsive-at-xs {
    }

    .essa-img-responsive-at-sm {
    }

    .essa-img-responsive-at-md {
    }

    .essa-img-responsive-at-lg {
        display: block;
        height: auto;
        max-width: 100%;
    }
}

/* IPad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .essa-visible-all-mobile {
        display: block;
    }

    .essa-hidden-all-mobile {
        display: none;
    }
}

/* IPhone 6 */
@media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
    .essa-visible-all-mobile {
        display: block;
    }

    .essa-hidden-all-mobile {
        display: none;
    }
}

@media only screen and (min-device-width : 540px) and (max-device-width : 960px) {
    .essa-visible-all-mobile {
        display: block;
    }

    .essa-hidden-all-mobile {
        display: none;
    }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
    .essa-visible-all-mobile {
        display: block;
    }

    .essa-hidden-all-mobile {
        display: none;
    }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .essa-visible-all-mobile {
        display: block;
    }

    .essa-hidden-all-mobile {
        display: none;
    }
}
