// utilities

body {

    // @include bp(x-large-desktop) {border-top: 2px solid orange;}
    // @include bp(large-desktop) {border-top: 2px solid blue;}
    // @include bp(desktop) {border-top: 2px solid red;}
    // @include bp(tablet) {border-top: 2px solid green;}
    // @include bp(mobile) {border-top: 2px solid pink;}
}

.full-tablet {
    // @include bp(tablet) { width: 100% !important;}
    @include bp(ipad) { width: 100% !important;}
}

.full-phone {
    // @include bp(mobile) { width: 100% !important;}
    @include bp(iphone) { width: 100% !important;}
}

.show-desktop {
    @include bp(x-large-desktop) {display: block !important;}
    @include bp(large-desktop) {display: block !important;}
    @include bp(desktop)       {display: block !important;}
}

.show-tablet {
    // @include bp(tablet) {display: block !important; }
    @include bp(ipad)   {display: block !important; }
}

.show-phone {
    // @include bp(mobile) {display: block !important;}
    @include bp(iphone) {display: block !important;}
}

.hide-desktop {
    @include bp(x-large-desktop) {display: none !important;}
    @include bp(large-desktop) {display: none !important;}
    @include bp(desktop)       {display: none !important;}
}

.hide-tablet {
    // @include bp(tablet) {display: none !important;}
    @include bp(ipad)   {display: none !important;}
}

.hide-phone {
    // @include bp(mobile) {display: none !important;}
    @include bp(iphone) {display: none !important;}
}

.force-right {
    float: right !important;
}

.mobile-right {
    // @include bp(mobile) {float: right !important;}
    @include bp(iphone) {float: right !important;}
}

.tablet-right {
    // @include bp(tablet) {float: right !important;}
    @include bp(ipad) {float: right !important;}
}

.force-left {
    float: left !important;
}

.mobile-left {
    // @include bp(mobile) {float: left !important;}
    @include bp(iphone) {float: left !important;}
}

.tablet-left {
    // @include bp(tablet) {float: left !important;}
    @include bp(ipad) {float: left !important;}
}


#hamburger {
    position: absolute;
    display: none;
    top: 0;
    margin: 0px 0 0 0;
    padding: 0 5px 0;
    height: 70px;
    width: 60px;
    right: 62px;
    z-index: 100;
    text-align: center;
    line-height: 30px;
    background: $light-grey;

    @include bp(tablet) { display: block;}
    @include bp(mobile) { display: block;}

    p {
        margin: 0px;
        padding: 0px;
        line-height: 30px;
        font-size: em(19, 16);
    }

    button {
        position: relative;
        height: 16px;
        width: 18px;
        margin: 4px 0 0 0;
        padding: 0px;
        border: 0px;
        background: transparent;
        font-size: 0;
        top: 20px;

        &:focus{
            outline: none;
        }

        #rect1, #rect2, #rect3 {
            float: left;
            position: relative;
            width: 100%;
            height: 3px;
            background-color: #1d1d1d;
            transition: all 0.2s ease-out;

            &.hidden {
                max-height: 0px;
            }

            &.revealed {
                max-height: 100px;
            }

            &.showRect {
                display: block;
                margin: 2px 0 1px 0;
            }

            &.hideRectX {
                display: none;
            }

            &.topRectX {
                margin: 8px 0 8px 0;
                transform: rotate(45deg);
            }

            &.bottomRectX {
                margin: -11px 0 4px 0;
                transform: rotate(-45deg);
            }
        }
    }
}