/*
* Modena Responsive CSS
*
* @package Modena
* @since Modena 1.0.0
*/

@media all and (max-width: 1024px) {
  header.mobile-header {
    display: flex;
    height: auto;
    flex-flow: column nowrap;
    background: rgba(255,255,255,.95);
  }
  header.mobile-header #navigation ul ul {
    flex-flow: column nowrap;
    top: 156px;
    left: 0;
    right: 0;
  }
  header.mobile-header #navigation ul ul li {
    position: relative;
    display: block;
    min-width: 100% !important;
    height: 40px;
    padding-top: 10px;
    padding-bottom: 20px;
    text-align: center;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
  }
  .top-header {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,.1);
  }
  .top-header .logo {
    padding-left: 10px;
  }
  header.mobile-header #navigation {
    padding: 0 0 10px;
  }
  header.mobile-header #navigation li {
    padding-top: 5px;
    padding-bottom: 5px;
  }
  .grid {
    max-width: 100%;
  }
  .widget .searchform input[type="text"] {
    max-width: 76%;
  }
  iframe,
  embed {
    min-height: 360px;
    line-height: 0;
  }
  .blog iframe,
  .blog embed,
  .archive iframe,
  .archive embed,
  .page iframe,
  .page embed {
    min-height: 360px;
  }
  aside {
    max-width: 286px;
  }
}
@media all and (max-width: 768px) {
  .home .has-text-align-right,
  .home .has-text-align-left,
  .home .has-text-align-center {
    text-align: center !important;
    padding: 0 10% !important;
  }
  #respond input[type="submit"] {
    margin-left: auto;
    margin-right: auto;
  }
  .search .article .searchform {
    width: 276px;
    max-width: 276px;
  }
  .search .article .searchform input[type="text"] {
    width: 210px;
    max-width: 210px;
  }
  .error404 .grid .searchform {
    width: 276px;
    max-width: 276px;
  }
  .error404 .grid .searchform input[type="text"] {
    width: 210px;
    max-width: 210px;
  }
  article .modena-sticky {
    margin: -55px auto 30px !important;
  }
  .grid__row--tablet {
    display: block;
    flex-flow: column nowrap;
    justify-content: space-between;
    align-items: center;
    -ms-align-items: center;
  }
  .grid .grid__item--8 {
    display: block;
    max-width: 100% !important;
    order: 1 !important;
    -webkit-order: 1 !important;
    -moz-order: 1 !important;
    -ms-order: 1 !important;
    -o-order: 1 !important;
    clear: both;
    height: auto;
    min-height: 100vh;
  }

  .grid .grid__item--4 {
    display: block;
    max-width: 100% !important;
    order: 2 !important;
    -webkit-order: 2 !important;
    -moz-order: 2 !important;
    -ms-order: 2 !important;
    -o-order: 2 !important;
    clear: both;
    height: auto;
    min-height: 100vh;
  }
  .grid__item {
    margin: auto;
    justify-content: center;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .comments-closed {
    text-align: center;
  }
  .article__content {
    margin: 0 5%;
    padding: 40px 5% 12px;
  }
  form p {
    flex-flow: column nowrap;
    justify-content: center;
    align-content: center;
  }
  form p label {
    align-self: center;
  }
  form p input[type="submit"],
  form p button[type="submit"] {
    max-width: 60%;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 50px;
  }
  .page-template-template-full-width-php .article {
    padding: 0 1% 12px;
    box-shadow: none;
    margin-top: -20px;
  }

  .page-template-template-full-width-php .article > img {
    margin-bottom: 40px;
  }

  dl dt {
    width: 40%;
  }
  dl dd {
    margin-left: 45%;
    margin-bottom: 1em
  }
  aside {
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  aside {
    max-width: 360px;
    margin: -20px auto 60px;
  }
  iframe,
  embed {
    min-height: 380px;
    line-height: 0;
  }
  .blog iframe,
  .blog embed,
  .archive iframe,
  .archive embed,
  .page iframe,
  .page embed {
    min-height: 380px;
  }
  .masonry iframe,
  .masonry embed {
    min-height: 180px !important;
  }
  #pagination {
    margin-bottom: 60px !important;
  }

  .archive #pagination {
    margin-top: 60px;
  }
  .archive #pagination {
    margin-bottom: 40px !important;
  }
  #back-to-top {
    left: 47.575% !important;
    right: 47.575% !important;
  }
  #commentform {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .widget {
    display: block;
    width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  aside.right-sidebar .widget,
  aside.left-sidebar .widget {
    padding: .1em 0 2em;
  }
  .grid__item--1,
  .grid__item--2,
  .grid__item--3,
  .grid__item--4,
  .grid__item--5,
  .grid__item--6,
  .grid__item--7,
  .grid__item--8,
  .grid__item--9,
  .grid__item--10,
  .grid__item--11,
  .grid__item--12 {
    flex-basis: 100%;
    max-width: 100%;
    margin: auto;
    padding: 0;
  }
  .grid__row--phone,
  .grid__row--tablet {
    flex-direction: column;
    margin: auto;
  }
  .masonry .masonry__post .article .img-responsive  {
    margin-bottom: -45px !important;
  }
  .masonry .masonry__post .article__content--title {
    margin: -30px auto 0 !important;
  }
  .masonry .masonry__post .article__content--title,
  .masonry .masonry__post .article__content--title a {
    padding-top: 15px;
    font-size: 1.25rem;
    padding-bottom: 5px;
  }
  .masonry .masonry__post .format-link .article__content--body a:first-of-type {
    font-size: 1rem !important;
  }
  .blog .masonry .masonry__post .format-quot bloquote,
  .blog .masonry .masonry__post .format-quotep {
    font-size: 1rem !important;
    line-height: normal !important;
  }
  .masonry .masonry__post .article__content p {
    margin: 5px auto;
    padding-left: 20px;
    padding-right: 20px;
  }
  #footer {
    flex-flow: column nowrap;
    padding-top: 20px;
    padding-bottom: 80px;
  }
  #footer .top {
    top: auto;
    bottom: 20px;
  }
}
@media all and (max-width: 460px) {  
  .home .has-text-align-right,
  .home .has-text-align-left,
  .home .has-text-align-center {
    text-align: center !important;
    padding: 0 10% !important;
  }
  #pagination {
    margin-bottom: 60px !important;
  }
  #back-to-top {
    position: fixed;
    display: block;
    width: 32px;
    height: 32px;
    left: 45.75% !important;
    right: 45.75% !important;
    margin-bottom: 20px;
  }
  header .search-form .searchform input[type="text"].wide {
    width: 160px;
    max-width: 160px;
    padding: 0 10px;
  }
  .blog .article .img-responsive,
  .archive .article .img-responsive,
  .page .article .img-responsive,
  .masonry .masonry__post .article .img-responsive,
  .blog-full .article .img-responsive  {
    margin-bottom: 20px !important;
  }
  .article__content--title {
    margin: -30px auto 0 !important;
  }
  .article__content--title,
  .article__content--title a {
    padding-top: 15px;
    font-size: 1.25rem;
    padding-bottom: 5px;
  }
  .format-link .article__content--body a:first-of-type {
    font-size: 1rem;
  }
  .blog .format-quote bloquote,
  .blog .format-quote p {
    font-size: 1rem;
    line-height: normal;
  }
  .blog blockquote,
  .blog-full .article blockquote,
  .masonry .masonry__post .article blockquote {
    margin: 0;
  }
  .blog .format-quote .page-title {
    font-size: 1rem;
    margin: -10px auto 20px;
  }
  .article__content p {
    margin: 5px auto;
    padding-left: 20px;
    padding-right: 20px;
  }
  iframe,
  embed {
    min-height: 210px;
    line-height: 0;
  }
  .blog iframe,
  .blog embed,
  .archive iframe,
  .archive embed,
  .page iframe,
  .page embed,
  .masonry iframe,
  .masonry embed {
    min-height: 210px !important;
  }
  aside.left-sidebar .widget,
  aside.right-sidebar .widget {
    padding: .1em 0 2em;
    margin: 0 auto;
  }
  .masonry {
    column-gap: normal;
    column-count: 1;
    -webkit-column-gap: normal;
    -webkit-column-count: 1;
  }
  .masonry .masonry__post {
    display: block;
  }
  .masonry__pagination {
    margin-top: 30px;
  }
  .article__content {
    width: 100%;
    margin-top: -21px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .sticky .article__content {
    width: 97.75%;
  }
  .gallery-container .flexslider .slides li a {
    margin-top: -60px;
  }
  .flexslider .flex-prev, .flexslider .flex-next {
    top: 28%;
  }
  aside {
    max-width: 360px;
    margin: -20px auto 60px;
  }
}

@media all and (max-width: 320px) {
  .home .has-text-align-right,
  .home .has-text-align-left,
  .home .has-text-align-center {
    text-align: center !important;
    padding: 0 5% !important;
  }
  header .search-form .searchform input[type="text"].wide {
    width: 100px;
    max-width: 100px;
    padding: 0 10px;
  }
  #pagination {
    margin-bottom: 60px !important;
  }
  #back-to-top {
    position: fixed;
    display: block;
    width: 32px;
    height: 32px;
    left: 44% !important;
    right: 44% !important;
    margin-bottom: 20px;
  }
  .page h3.page-title {
    margin-top: 65px !important;
  }
  #respond input[type="submit"] {
    margin-left: auto;
    margin-right: auto;
  }
  #commentform {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  iframe,
  embed {
    min-height: 160px;
    line-height: 0;
  }
  .blog iframe,
  .blog embed,
  .archive iframe,
  .archive embed,
  .page iframe,
  .page embed,
  .masonry iframe,
  .masonry embed {
    min-height: 160px !important;
  }
  .widget {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-right: 0;
    padding-left: 0;
  }
  .widget li a {
    text-align: center;
  }
}