h4,
h5,
.ylw > p   {
  margin: 0;
}


/* gray line dividing videos */
.videos__border {
  width: 100%;
  clear: both;
  margin: 40px 0px;
}

/* Spacing */
.x-pad-bottom {
  margin-bottom: 0px !important;
}

/* Useful CSS */
.img-control {
  max-width: 165px !important;
}

/*============================================================
  GRID - 1200px
  ============================================================*/
.container {
  width: 1200px;
}
.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
}
.container .grid-1 {
  width: 80px;
}
.container .grid-2 {
  width: 180px;
}
.container .grid-3 {
  /* width: 280px; */
}
.container .grid-4 {
  width: 380px;
}
.container .grid-5 {
  width: 480px;
}
.container .grid-6 {
  width: 760px;
}
.container .grid-7 {
  width: 680px;
}
.container .grid-8 {
  width: 780px;
}
.container .grid-9 {
  width: 880px;
}
.container .grid-10 {
  width: 980px;
}
.container .grid-11 {
  width: 1080px;
}
.container .grid-12 {
  width: 1180px;
}

.offset-by-one {
  margin-left: 40px;
}

/*============================================================
  GRID - 960px
  ============================================================*/
@media only screen and (min-width: 960px) and (max-width: 1199px) {
  .container {
    width: 960px;
  }
  .container .grid-1 {
    width: 60px;
  }
  .container .grid-2 {
    width: 140px;
  }
  .container .grid-3 {
    /* width: 220px; */
  }
  .container .grid-4 {
    width: 300px;
  }
  .container .grid-5 {
    width: 380px;
  }
  .container .grid-6 {
    width: 460px;
  }
  .container .grid-7 {
    width: 540px;
  }
  .container .grid-8 {
    width: 620px;
  }
  .container .grid-9 {
    width: 700px;
  }
  .container .grid-10 {
    width: 780px;
  }
  .container .grid-11 {
    width: 860px;
  }
  .container .grid-12 {
    width: 940px;
  }

  .offset-by-one {
    margin-left: 40px;
  }
}

/*============================================================
  GRID - 720px
  ============================================================*/
@media only screen and (min-width: 720px) and (max-width: 959px) {
  .container {
    width: 720px;
  }
  .container .grid-1 {
    width: 40px;
  }
  .container .grid-2 {
    width: 100px;
  }
  .container .grid-3 {
    width: 160px;
  }
  .container .grid-4 {
    width: 220px;
  }
  .container .grid-5 {
    width: 280px;
  }
  .container .grid-6 {
    width: 340px;
  }
  .container .grid-7 {
    width: 400px;
  }
  .container .grid-8 {
    width: 460px;
  }
  .container .grid-9 {
    width: 520px;
  }
  .container .grid-10 {
    width: 580px;
  }
  .container .grid-11 {
    width: 640px;
  }
  .container .grid-12 {
    width: 700px;
  }

  .offset-by-one {
    margin-left: 40px;
  }
}

/*============================================================
  GRID - 719px and Below
  ============================================================*/
@media only screen and (max-width: 719px) {
  .container {
    width: 90%;
  }
  .grid-1,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6,
  .grid-7,
  .grid-8,
  .grid-9,
  .grid-10,
  .grid-11,
  .grid-12 {
    width: 100%;
    margin: 0;
  }
  .container .grid-1,
  .container .grid-2,
  .container .grid-3,
  .container .grid-4,
  .container .grid-5,
  .container .grid-6,
  .container .grid-7,
  .container .grid-8,
  .container .grid-9,
  .container .grid-10,
  .container .grid-11,
  .container .grid-12 {
    width: 100%;
  }

  .offset-by-one {
    margin-left: 0px;
  }

  .clean-2.button,
  .clean-2.button:visited {
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    margin: 10px 0px 40px;
    width: 100%;
    float: right;
    text-align: center;
  }
  .clean-2.button:hover {
    background-color: #fff;
    border: 1px solid #fff;
    color: #20779c;
    margin: 10px 0px 40px;
    width: 100%;
    float: right;
    text-align: center;
  }
}