.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:rgb(240,240,240);

  @include breakpoint(small){
    line-height: 1.9em;
    font-size: 1em;
    padding: 1em;
  }
  li {
    margin-bottom: 1em;
  }
}

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

canvas {
  margin: 0 auto;
}
.inner img {
  width: 100%;
}

#header  {
  h1 {

    a::before {
      content: '';
      background: url("images/inc-logo.png");
      background-repeat: no-repeat;
      position: relative;
      display: inline-block;
      width: 30px;
      height: 30px;
      background-size: 20px;
      top: 7px;

    }
  }
}

#banner {
  @include breakpoint(small){
    padding: 7em .5em 5em .5em;
  }

}