.wrapper {
  @include breakpoint(small) {
    @include padding(2em, 0);
  }

  > .inner {
    width: 55em;
    margin: 0 auto;

    @include breakpoint(large) {
      width: 90%;
    }

    @include breakpoint(medium) {
      width: 100%;
    }
    > p, header {
      width: 40em;

      @include breakpoint(large) {
        width: 45em;
      }

      @include breakpoint(medium) {
        width: 90%;
      }
    }
  }
}

twentytwenty-wrapper img {
  width: 100%;

}
@include breakpoint(small) {
  .features {
    li {
      padding: 1em;

      h3,
      p {
        text-align: left;
      }
    }
  }
}
/* Section Three */

#three .inner {
  width: 60em;

  @include breakpoint(large) {
    width: 100%;
  }
  @include breakpoint(medium) {
    width: 100%;
  }
}

// menu small devices

#menu {
  background: #60768B;
  ul {

    > li {

      > a {
        @include breakpoint(small) {
          line-height: 2em;
        }
        font-family: 'Open Sans', sans-serif;
        font-weight: bold;
      }
    }
  }
}

// rewrite link colors
a {
  color: #4f85bb;
}

.wrapper.style3 {
  background: #3D4955;
}

// quotes
blockquote {
  border-left: solid 0px _palette(border);
  font-style: normal;
  font-size: 1.2em;
  line-height: 2.1em;
  margin: 0 0 _size(element-margin) 0;
  padding: 2em;
  background-color:#ddd;

  @include breakpoint(small){
    font-size: 1em;
    padding: 1em;
  }
}

.video-container {
  background-color:"#cad2d3";
}

canvas {
    margin: 0 auto;
}