/*
  Layout Utilities for Respond themes
  */

/* support hashedit menu bar */
[editor-active] header, [editor-active] footer {
  display: none;
}

.img-responsive {
  width: 100%;
  max-width: 100%;
}

/* toggle cart */
body [respond-cart] {
  display: none !important;
}

body[show-cart="true"] [respond-cart] {
  display: inline-block !important;
}

/* entrance/exit */
[editor-active] [data-entrance] {
    visibility: visible;
}

[data-entrance] {
  visibility: hidden;
}

[data-entrance="subtle-bottom"] {
    transform: translateY(25px);
    opacity: .75;
}

[data-entrance="subtle-bottom"].has-entered {
    transform: translateY(0);
    opacity: 1;
}

[data-entrance="subtle-fade"] {
    opacity: .25;
}

[data-entrance="subtle-fade"].has-entered {
    opacity: 1;
}

/* spacing */
body .row {
  margin: 0;
  padding: 0 20px;
}

body .divider {
  text-align: center;
}

  body .divider span {
    display: inline-block;
    width: 200px;
    height: 3px;
    background: linear-gradient(45deg, rgba(80,145,199,1) 0%, rgba(130,141,150,1) 100%);
  }

body .row.full-width {
	max-width: 100%;
	padding: 25px 0 25px 0;
	margin: 0;
	padding-bottom: 0;
	margin: 0 auto;
}

  body .row.full-width .col {
    margin: 0;
    padding: 0;
  }

  body .row.top-big-spacing {
    padding-top: 100px;
    margin-top: 0;
  }

  body .row.top-half-spacing {
    padding-top: 50px;
    margin-top: 0;
  }

  body .row.bottom-big-spacing {
    padding-bottom: 100px;
    margin-bottom: 0;
  }

  body .row.bottom-half-spacing {
    padding-bottom: 50px;
    margin-bottom: 0;
  }

  body .row.top-no-spacing {
    margin-top: 0;
    padding-top: 0;
  }

  body .row.bottom-no-spacing {
    margin-bottom: 0;
    padding-bottom: 0
  }

  body .row.bottom-border {
    border-bottom: 1px solid #ddd;
  }


/* feature-icon */
body .row .feature-icon {
  margin-bottom: 50px;
}

  body .row .feature-icon span {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    color: #fff;
    border-radius: 50%;
    background: linear-gradient(45deg, rgba(80,145,199,1) 0%, rgba(130,141,150,1) 100%);
    margin: 0 auto;
  }

    body .row .feature-icon span svg {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50px;
      height: 50px;
      margin-top: -25px;
      margin-left: -25px;
      fill: currentColor;
    }

    body .row .feature-icon span i {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50px;
      height: 50px;
      margin-top: -25px;
      margin-left: -23px;
      font-size: 45px;
      fill: currentColor;
    }

/* media elements */
.media-element {
  padding-left: 120px;
  margin-bottom: 25px !important;
}

  .media-element .media-text {
    padding: 0;
    margin: 0;
  }

  .media-element .media-author:before {
    content: "-"; color: #646464;
  }

  .media-element .media-author {
    color: #888;
    padding: 5px 0 0 0; margin: 0;
  }


  .media-element .media-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    text-align: center;
  }

  .media-element .media-image img {
      max-width: 100px;
    }


/* callout */
body .row.callout {
  background: linear-gradient(45deg, rgba(80,145,199,1) 0%, rgba(130,141,150,1) 100%);
}

  body .callout h1,
  body .callout h2,
  body .callout h3,
  body .callout h4,
  body .callout h5,
  body .callout li,
  body .callout div,
  body .callout p {
    color: #fff;
  }

/* center */
body .center-content h1,
body .center-content h2,
body .center-content h3,
body .center-content h4,
body .center-content h5,
body .center-content li,
body .center-content div,
body .center-content p {
  text-align: center;
}

/* vignette component */
body .row.vignette {
  position: relative;
  overflow: hidden;
  background-size: cover;
  padding: 150px 0 150px 0;
  max-width: 100%;
}

  body .vignette img {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }

  body .vignette h1,
  body .vignette h2,
  body .vignette h3,
  body .vignette h4,
  body .vignette h5,
  body .vignette li,
  body .vignette div,
  body .vignette p {
    text-align: center;
    color: #555;
    padding: 0 50px;
    text-shadow: 1px 1px 5px rgba(255,255,255,.6);
  }

  /* vignette-white-text */
  body .vignette.vignette-white-text h1,
  body .vignette.vignette-white-text h2,
  body .vignette.vignette-white-text h3,
  body .vignette.vignette-white-text h4,
  body .vignette.vignette-white-text h5,
  body .vignette.vignette-white-text li,
  body .vignette.vignette-white-text div,
  body .vignette.vignette-white-text p {
    color: #fff;
    text-shadow: 1px 1px 5px rgba(0,0,0,.6);
  }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { }