/* In order to use this import, make sure you have the bourbon setting on "true" in
 * gulpfile.js/theming.config.js
 * @import "bourbon";
 */
/* In order to use this import, make sure you have the bourbonneat setting on "true" in
 * gulpfile.js/theming.config.js
 * @import "neat";
 */
/* In order to use this import, make sure you have the breakpoint setting on "true" in
 * gulpfile.js/theming.config.js
 * @import "breakpoint";
 */
/* Animation definitions */
.paragraph--media--full-width {
  max-width: 100%;
  width: 1210px;
  margin: 0 auto;
  padding: 0;
}

.paragraph--media--full-width .bg-dotted {
  display: none;
}

@media (min-width: 50rem) {
  .paragraph--media--full-width .bg-dotted {
    display: block;
    height: 264px;
    width: 319px;
    z-index: -1;
    position: absolute;
  }
}

@media (min-width: 50rem) and (min-width: 50rem) {
  .paragraph--media--full-width .bg-dotted {
    -webkit-transform: translateX(-40px) translateY(-40px);
    -ms-transform: translateX(-40px) translateY(-40px);
    transform: translateX(-40px) translateY(-40px);
  }
}

.paragraph--media--full-width img, .paragraph--media--full-width video {
  width: 480px;
  height: auto;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
  margin-top: 30px;
}

@media (min-width: 50rem) {
  .paragraph--media--full-width img, .paragraph--media--full-width video {
    margin-top: 0;
  }
}

/*# sourceMappingURL=maps/paragraph--media--full-width.css.map */