.article-comic {
    margin: 28px 0;
}

@media (min-width: 900px) {
    .article-comic {
        margin-left: -100px;
        margin-right: -100px;
    }
}

@media (min-width: 900px) and (min-width: 700px) {
    .article-comic .comic-panel-images {
        display: table;
        border-collapse: collapse;
        width: 100%;
    }
}
/* override froala img styles */
.article-comic .comic-panel .comic-panel-cell img  {
    display: block;
    margin-left:0;
    margin-right:0;
    max-width:none;
}
@media (min-width: 900px) {
    .article-comic .comic-panel .comic-panel-cell img  {
        margin: 0 auto;
    }
}

@media (min-width: 900px) and (min-width: 700px) {
    .article-comic .comic-panel-cell {
        display: table-cell;
        vertical-align: middle;
    }
}

.article-comic .caption p,
.article-comic .source p {
    font-family: "proxima-nova", Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-size: 0.75rem;
    line-height: 1.5;
    margin: 15px 0 0;
}

.article-comic .source {
    color: #9b9b9b;
    margin: 15px 0 30px;
}


.is-article-edit-mode-enabled .text-block-content > [draggable],
.is-article-edit-mode-enabled .comic-panel-row[draggable] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* Required to make elements draggable in old WebKit */
    -khtml-user-drag: element;
    -webkit-user-drag: element;
  }

  .is-article-edit-mode-enabled .comic-panel-row[draggable] { 
    margin-bottom: 10px;
  }


.is-article-edit-mode-enabled .text-block-content > [draggable],
.is-article-edit-mode-enabled .comic-panel-row[draggable] {
    cursor:move;
    border: 1px dashed #ddd;
    margin-top: 5px;
    margin-bottom: 5px;
}

.is-article-edit-mode-enabled .text-block-content > [draggable]:hover,
.is-article-edit-mode-enabled .text-block-content > [draggable]:focus,
.is-article-edit-mode-enabled .comic-panel-row[draggable]:hover,
.is-article-edit-mode-enabled .comic-panel-row[draggable]:focus
 {
    background-color: #EAFBFF;
    border-color: #0097BD;
}

.is-article-edit-mode-enabled .text-block-content > [draggable].dragElem,
.is-article-edit-mode-enabled .comic-panel-row[draggable].dragElem {
    opacity: 0.8;
}

.text-block-content > [draggable].over,
.comic-panel-row[draggable].over {
    border-top: 2px solid blue;
  }


  .article-layout-mode-menu,
  .comic-layout-mode-menu {
    display:none;
    position:fixed;
    top: 90px;
    right: 50%;
    transform: translateX(820px);
    background-color: #EAFBFF;
    border: 2px solid #0097BD;
    width: 240px;
    z-index: 70;
  }

  .article-layout-mode-menu h4, 
  .comic-layout-mode-menu h4 {
    margin-top: 10px;
    text-align:center;
    text-transform: uppercase;
  }

  .article-layout-mode-menu__menu-grid,
   .comic-layout-mode-menu__menu-grid {
    display:grid;
    font-size: 0.9rem;
  }

  .article-layout-mode-menu__menu-grid-item,
  .comic-layout-mode-menu__menu-grid-item {
    padding: 8px;
    border-top: 1px solid #55d5f5;
  }

  .article-layout-mode-menu__menu-grid-item select {
    margin: 1px 0 0 0;
    padding: 0;
  }

  .js-insert-html-block {
    padding:2px;
    border: 1px dashed #ddd;
    background-color: #fff;
  }

  .comic-layout-mode-menu .js-insert-html-block {
    display:flex;
    justify-content:center
  }

  .comic-layout-mode-menu .js-insert-html-block img {
    width: 70px;
  }


  .js-insert-html-block:hover,
  .js-insert-html-block:focus {
    border: 1px dashed #7031f4;
   }

   .block-controls {
        visibility: hidden;
        position: absolute;
        right: 10px;
        z-index: 9;
        display: flex;
        flex-direction: column;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        background-color: #fff;
   }

   .is-enabled-editor button {
    display:none;
   }
   .is-article-edit-mode-enabled .text-block-content > .is-enabled-editor.fr-box {
    cursor: text;
    background-color: lightyellow;
    margin: 5px;
    padding: 5px;
   }

   .block-controls button {
        padding: 5px;
        border-radius:50%;
   }

   .block-controls .hidden-btn {
     display: none;
   }

   /* .block-controls.enableEditor button {
    display: none;
   }
   .block-controls.enableEditor button.hidden-btn {
    display: block;
   } */

   .block-controls .fa {
     pointer-events:none;
   }

   .text-block-content > * {
        position: relative;
    }

    .comic-panel-row {
        position: relative;
    }

    .isMagazineArticle .text-block-content > *:focus .block-controls,
    .isMagazineArticle .text-block-content > *:focus-within .block-controls,
    .isComicBook .comic-panel-row:focus .block-controls,
    .isComicBook .comic-panel-row:focus-within .block-controls { 
        visibility: visible;
    }


  @media only screen and (min-width: 1100px) {
    .is-article-edit-mode-enabled .isMagazineArticle .article-layout-mode-menu--visible,
    .is-article-edit-mode-enabled .isComicBook .comic-layout-mode-menu--visible {
        display:block;
    }
} */

.__shake {
	animation: shake .4s linear;
}


.newsletter-content-hero {
   background-size: 450px 450px;
   height:215px;
}

.hide-article-info {
	display:none;
}

.article-info {
    margin: 0 auto;
    max-width: 50rem;
}

.text-block-content {
    margin-bottom: 30px;
}

figure.text-block-figure.-left,  
figure.text-block-figure.-right,
aside.article-promo.-left,
aside.article-promo.-right {
    z-index: 1;
}