/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/
/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */
.siti-block-from-blog {
  position: relative;
  margin: 8rem 0; }
  .siti-block-from-blog > section {
    margin: auto;
    max-width: 110rem; }
    .siti-block-from-blog > section::before {
      content: '\00a0';
      background: #0054A4;
      padding: 15rem 40rem;
      position: absolute;
      right: 0;
      top: 0;
      z-index: -1; }
  .siti-block-from-blog header {
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    padding: 2rem;
    position: relative; }
    @media screen and (min-width: 665px) {
      .siti-block-from-blog header {
        -ms-flex-direction: row;
            flex-direction: row;
        -ms-flex-pack: end;
            justify-content: flex-end; } }
    @media screen and (min-width: 1280px) {
      .siti-block-from-blog header {
        padding: 0; } }
    .siti-block-from-blog header h2 {
      background: #0054A4;
      text-align: left; }
      @media screen and (min-width: 665px) {
        .siti-block-from-blog header h2 {
          padding: 4.7rem 8rem 5rem 3rem; } }
      @media screen and (min-width: 768px) {
        .siti-block-from-blog header h2 {
          -ms-flex: 0 1 50%;
              flex: 0 1 50%; } }
    .siti-block-from-blog header p {
      margin: 0; }
    .siti-block-from-blog header h2, .siti-block-from-blog header a {
      color: #fff; }
  .siti-block-from-blog a:hover {
    text-decoration: underline; }

.siti-media-object {
  background: #fff;
  position: relative;
  padding: 1rem; }
  @media screen and (min-width: 665px) {
    .siti-media-object {
      display: -ms-flexbox;
      display: flex;
      margin-top: -3rem; } }
  @media screen and (min-width: 1023px) {
    .siti-media-object {
      padding: 0 0 4rem 4rem; } }
  .siti-media-object h2 {
    margin-bottom: 2rem; }

.siti-media-object__image {
  margin-bottom: 2rem; }

@media screen and (min-width: 1023px) {
  .siti-block-from-blog__mo {
    margin-right: 4rem; } }

.siti-block-from-blog__mo img {
  display: block;
  height: auto;
  width: 100%;
  max-width: 250px;
  margin-right: -7rem;
  margin-left: 1rem; }
  @media screen and (min-width: 479px) {
    .siti-block-from-blog__mo img {
      width: auto; } }
  @media screen and (max-width: 1280px) and (min-width: 1023px) {
    .siti-block-from-blog__mo img {
      margin-right: -4rem;
      max-width: 220px; } }
  @media screen and (max-width: 1023px) and (min-width: 768px) {
    .siti-block-from-blog__mo img {
      margin-right: -1rem;
      max-width: 220px;
      margin-top: -1rem; } }
  @media screen and (max-width: 768px) and (min-width: 665px) {
    .siti-block-from-blog__mo img {
      margin-right: -1rem;
      max-width: 160px; } }

.siti-block-from-blog__mo img.wp-post-image {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; }

.siti-block-from-blog__excerpt {
  margin-top: 2rem; }
  .siti-block-from-blog__excerpt .more-link {
    display: inline-block; }

@media screen and (min-width: 665px) {
  .siti-media-object__image {
    -ms-flex-order: 2;
        order: 2; } }

@media screen and (min-width: 665px) {
  .siti-media-object__text {
    -ms-flex-order: 1;
        order: 1; } }

@media screen and (min-width: 768px) {
  .siti-media-object__text {
    padding-top: 2rem; } }

.siti-block-from-blog__post {
  padding: 0 2rem; }

.siti-block-from-blog__meta {
  display: block; }
  .siti-block-from-blog__meta > * {
    display: block; }
  .siti-block-from-blog__meta a {
    margin-bottom: 1.5rem; }
  @media screen and (min-width: 665px) {
    .siti-block-from-blog__meta {
      display: -ms-flexbox;
      display: flex; }
      .siti-block-from-blog__meta span::after {
        content: ' | '; } }