#slides {
  position: relative;
  height: 100vh;
  width: 100vw;
  margin-top: -175px; }
  @media screen and (max-width: 640px) {
    #slides {
      margin-top: 0px;
      height: 50vh !important; } }
  #slides .overlay {
    background: rgba(0, 0, 0, 0.4);
    /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1));
    /* Standard syntax */
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    padding: 0; }
    #slides .overlay .inside {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      text-align: center;
      left: 50%;
      width: 50%;
      margin-left: -25%;
      background: rgba(255, 255, 255, 0.7);
      padding: 5%;
      box-sizing: border-box; }
      @media (max-height: 1024px) {
        #slides .overlay .inside {
          padding: 3%;
          width: 68%;
          margin-left: -34%; } }
      @media screen and (max-width: 900px) {
        #slides .overlay .inside {
          left: 50%;
          width: 60%;
          margin-left: -30%; } }
      @media screen and (max-width: 640px) {
        #slides .overlay .inside {
          display: none; } }
      #slides .overlay .inside h1 {
        margin: 0px;
        text-transform: uppercase;
        font-size: 24px;
        letter-spacing: 0.02em;
        font-weight: 800; }
        @media screen and (max-width: 600px) {
          #slides .overlay .inside h1 {
            font-size: 18px; } }
        @media (max-height: 1024px) {
          #slides .overlay .inside h1 {
            font-size: 22px; } }
      #slides .overlay .inside h2 {
        font-size: 18px;
        letter-spacing: 0.02em;
        font-weight: 400;
        margin: 30px 0px; }
        @media screen and (max-width: 600px) {
          #slides .overlay .inside h2 {
            font-size: 15px; } }
        @media (max-height: 1024px) {
          #slides .overlay .inside h2 {
            font-size: 16px; } }
      #slides .overlay .inside .button {
        margin: 15px 50px 40px 50px; }
        @media screen and (max-width: 600px) {
          #slides .overlay .inside .button {
            font-size: 14px;
            margin: 15px 20px 30px 20px; } }
        @media (max-height: 1024px) {
          #slides .overlay .inside .button {
            margin-bottom: 15px; } }

#home-panels {
  padding: 50px 0px; }
  #home-panels h3 {
    text-align: center;
    margin: 0 10% 50px 10%; }
  #home-panels .homeowners,
  #home-panels .commercial {
    position: relative; }
    #home-panels .homeowners img,
    #home-panels .commercial img {
      display: block;
      width: 100%;
      height: auto; }
    #home-panels .homeowners a,
    #home-panels .commercial a {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      -webkit-transition: background 0.3s ease, color 0.3s ease;
      transition: background 0.3s ease, color 0.3s ease; }
      #home-panels .homeowners a:hover,
      #home-panels .commercial a:hover {
        background: rgba(0, 0, 0, 0.5);
        text-decoration: none; }
        #home-panels .homeowners a:hover h2,
        #home-panels .commercial a:hover h2 {
          color: white; }
      #home-panels .homeowners a h2,
      #home-panels .commercial a h2 {
        position: relative;
        left: 50%;
        top: 50%;
        margin-top: -15px;
        margin-left: -50%;
        text-align: center;
        width: 100%;
        padding: 0;
        color: #fff;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }

#slides .slides-container {
  display: none; }

#slides .scrollable {
  *zoom: 1;
  position: relative;
  top: 0;
  left: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  height: 100%; }

#slides .scrollable:after {
  content: "";
  display: table;
  clear: both; }

.slides-navigation {
  margin: 0 auto;
  position: absolute;
  z-index: 3;
  top: 46%;
  width: 100%; }

.slides-navigation a {
  position: absolute;
  display: block; }

.slides-navigation a.prev {
  left: 0; }

.slides-navigation a.next {
  right: 0; }

.slides-pagination {
  position: absolute;
  z-index: 3;
  bottom: 60px;
  text-align: center;
  width: 100%; }

.slides-pagination a {
  border: none;
  border-radius: 100%;
  width: 20px;
  height: 20px;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  background: #999;
  color: #999;
  margin: 2px 7px 2px 2px;
  overflow: hidden;
  text-indent: -100%; }

.slides-pagination a.current {
  background: #000;
  color: #000; }