html, body { overflow: hidden; }
#logo:not(.animating) svg { width: 70px; height: 70px; }
#logo.animating { overflow: visible; }
/*#logo path, #logo rect, #logo polygon { fill: #303030; }*/
#logo.modified path, #logo.modified polygon { fill: #fff; }
/*#logo.abstract rect { fill: #303030; }*/

#orientation-button { display: none; }

.wysiwyg:not(.svg-editor) svg { cursor: pointer; }
#logo-bar { flex: 1; text-align: center; height: 98px; }
#logo-bar { position: relative; left: 0; top: 0; transition: height .8s ease-in-out; }
#logo, #logo > svg, #logo > font:not(.static) { transition: all .5s ease-in-out; user-select: none; }

#tooltip-bar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: #303030;
    color: #fff;
    padding: 4px;
    text-align: center;
    box-shadow: 0 0 8px #c0c0c0;
    user-select: none;
    transition: height 0.5s ease-in-out;
}
#tooltip-bar > div:not(:first-child) {
    display: none;
}
#tooltip-bar.hidden { height: 0; padding: 0; }

.svg-group-editor g { pointer-events: bounding-box; opacity: 1; }
.svg-group-editor g:hover {
    opacity: .8;
    fill: #5F9F9F;
}

.svg-path-editor path,
.svg-path-editor rect,
.svg-path-editor polygon,
.svg-path-editor polyline,
.svg-path-editor ellipse,
.svg-path-editor circle { pointer-events: visiblePainted; opacity: 1; }

.svg-path-editor path:hover,
.svg-path-editor rect:hover,
.svg-path-editor polygon:hover,
.svg-path-editor polyline:hover,
.svg-path-editor ellipse:hover,
.svg-path-editor circle:hover {
    opacity: .8;
/*    fill: #5F9F9F;*/
}

.svg-logo-editor .blinking { animation: flashing 2s linear infinite; }
@keyframes flashing {
    50% {
        opacity: 0.3;
    }
}

#logo-image-select { width: 0; transition: width .8s ease-in-out; height: 0; visibility: hidden; }
#logo-image-select.expanded { width: 528px; }
#logo-image-select .grid { margin: 2em; user-select: none; }
#logo-image-select img { width: 90px; height: 90px; cursor: pointer; display: none; }
#logo-image-select img:hover { opacity: .8; }
#logo-image-select .grid .column.mobile { display: none; }
#prev-images-button, #next-images-button { opacity: 0; transition: opacity 0.5s ease-in-out; }
#image-set-label, #image-set-dropdown { opacity: 0; transition: opacity 0.5s ease-in-out; }
#logo.svg-logo-editor { line-height: 250px; cursor: auto; }
#logo.svg-logo-editor > svg { width: 250px; height: 250px; margin: 0; top: 48px; left: -10px; }
#logo.svg-logo-editor > font { top: -9px; left: -10px; cursor: text; max-width: 1000px; }
#logo.svg-logo-editor > font:focus[contenteditable="true"] { outline: 1px dotted #c0c0c0; }
#logo-editor-bar-font-formatting-menu { display: inline-block; }
#mobile-more-logo-font-menu { display: none; }
#logo-editor-bar-font-menu .menu {
    max-height: 500px !important;
    overflow-y: scroll;
}

/* Laptop */
@media only screen and (max-width: 1280px) {
    #logo-image-select.expanded { width: 371px; }
    #logo-image-select .grid { margin: 1.5em; }
/*    #logo-image-select img { width: 82px; height: 82px; }*/
    #logo-image-select img { width: 64px; height: 64px; }
}
@media only screen and (max-width: 1366px) and (max-height: 768px) {
    #logo-image-select .grid .column.laptop { display: none; }
    #logo-image-select img { width: 60px; height: 60px; }
}
/* Tablet */
@media only screen and (max-width: 1024px) {
    #logo-image-select.expanded { width: 220px; height: 100%; }
    #logo-image-select .grid { margin: 0; }
    #logo-image-select img { width: 58px; height: 58px; margin: 5px 0; }
    .svg-logo-editor svg { width: 500px; }
    .svg-logo-editor > font { max-width: 757px; }

    #logo-font:focus { animation: flashing 2s linear infinite; }
}

#mobile-font-edit { display: none; }
#logo-image-select .grid .button:not(.icon) { display: none; }
/* Phone - Landscape */
@media only screen and (max-width: 1000px) {
    #top, #logo-bar { height: 104px; }
    #image-set-label { display: none; }
    #logo-image-select img { width: 40px; height: 40px; }
    .ui.grid>.row { padding-bottom: 0; padding-top: 0.5rem; }
    #logo-image-select .ui.violet.icon.button > span { display: none; }
    #logo.svg-logo-editor > svg { width: 110px; top: 48px; }
    #logo.svg-logo-editor > font { max-width: 238px; top: -48px; }
    #logo-image-select .grid .column.laptop { display: block; }

    #mobile-font-edit {
        background: #000;
        display: block;
        position: absolute;
        text-align: center;
        width: 38px;
        height: 38px;
        line-height: 45px;
        vertical-align: middle;
        overflow: hidden;
        border-radius: 2px;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        z-index: 1;
    }
    #mobile-font-edit > i { margin: 0; color: #fff; font-size: 26px; }
    #mobile-font-edit::after {
        content: "";
        position: absolute;
        right: 4px;
        bottom: 4px;
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 4px 5px 0 5px;
        border-color: #000000 transparent transparent transparent;
        transform: rotate(0deg);
    }

    /* Smaller iPhones, e.g. iPhone 8 Plus */
    @media only screen and (max-height: 736px) {
        .svg-logo-editor svg { width: 250px; }
    }
    @media only screen and (max-width: 400px) {
        .svg-logo-editor svg { width: 200px; }
    }

    /* iPhone fix */
    .ui.label { position: relative; top: -3px; }

    #checkout-modal > .image.content > .image { display: none; }
    #checkout-modal > .image.content > .description > table { margin: 0 auto; }

    #logo-editor-bar-font-menu .menu { max-height: 200px !important; }
}
@media only screen and (max-width: 1000px) and (max-height: 450px) {
    #logo-image-select .grid .column.landscape { display: none; }
    .bold-button, .italicize-button { display: none !important; }
    #tooltip-bar { width: auto; }
}
/* Phone - Portrait */
#checkout-bar { display: none; }
@media only screen and (max-width: 450px) {
    #top.stacked { flex-direction: column; }
    #logo-image-select { transition: height .8s ease-in-out; }
    #logo-image-select.expanded { height: 300px; width: 100%; }
    #logo-image-select img { width: 50px; height: 50px; }
    #logo-image-select .grid .button:not(.icon) { display: inline-block; }
    #tooltip-bar { top: 54px; }

    .clr-picker { left: 0 !important; }

    .bold-button, .italicize-button,
    .font-up, .font-down, .font-left, .font-right,
    i.text.width.icon { display: none !important; }

    .ui.grid>.row { padding-bottom: 0; padding-top: 0.5rem; }

    #checkout-bar {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 54px;
        background: #fff;
        box-shadow: 0 0 8px #c0c0c0;
        padding: 0 7px;
        vertical-align: middle;
    }
    #checkout-bar > button { z-index: 1000; }
    #logo-editor-bar .buy-button { display: none; }
}
/* Phone - Portrait - iPhone SE */
@media only screen and (max-width: 375px) {
    #logo-image-select img { width: 32px; height: 32px; }
}
/* Phone - Portrait - Samsung Galaxy S8+ */
@media only screen and (max-width: 360px) {
    .violet.icon.button { width: 32px; }
    .violet.icon.button .retweet { margin-left: -3px !important; }
    i.text.icon { display: none; }
}
/* Reset */
@media only screen and (min-width: 1279px) {
    #logo-image-select .grid .column.mobile { display: block; }
    #gallery-navigation-row .column.mobile { display: none !important; }
}

#logo-editor-bar {
    z-index: 1;
/*    height: 0;*/
    line-height: 54px;
    transition: height .5s ease-in-out;
    background: #fff;
    vertical-align: middle;
    padding: 0 7px;
    box-shadow: 0 0 8px #c0c0c0;
    visibility: hidden;
    user-select: none;
}
#logo-editor-bar .buy-button,
#checkout-bar .buy-button { float: right; margin: 9px 8px 0 0; }
.shopping.cart.icon { display:inline-block;padding-right:20px; }
#logo-select-box, #logo-element-color-button, #logo-editor-bar-font-menu { display: none; }
#logo-editor-general-buttons { display: inline-block; }