@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

//Selector Variables
$container: "#wideSlider";
$slider: ".heroSlider";


/* THEME STYLES */
#{$container} {
  max-width: 1920px;
  margin: 0 auto;
  #{$slider}, #{$slider} .rsOverflow {height: 425px !important;}  
  #{$slider} { }
  .rsBullets { bottom: 30px;}
  .rsContent {
    display: table-row;
    > div {
      padding: 40px 0 0;
      display: table-cell;
      vertical-align: middle;
      width: 50%;
    }
  }
  .slideImg {
    text-align: right;
    img {
      border: 5px solid rgb(143, 185, 232);
      border: 5px solid rgba(255, 255, 255, 0.25);
      width: 97%;
      -webkit-background-clip: padding-box;
         -moz-background-clip: padding;
              background-clip: padding-box;
    }
  }
  .title {
    font: normal 45px/60px "Merriweather", serif;
    color: #fff;
    margin-right: 30px;
  }
  .subtitle {
    font-size: 18px;
    line-height: 21px;
    margin-right: 30px;
  }
  .btn {
    font-size: 18px;
    padding: 7px 15px;
  }
  .rsArrow {
    width: 36px; height:72px; top: 50%;
    &:hover {
      .rsArrowIcn {
        color: #2986EE;
      }
    }
  }
  .rsArrowIcn {
    width: 36px; height:72px; margin-top: -36px; margin-left: -18px; background: none; font-size: 72px; color: white; text-align: center;
    &:after { display: inline-block; font-family: FontAwesome; }
  }
  .rsArrowLeft .rsArrowIcn:after { content:"\f104";}
  .rsArrowRight .rsArrowIcn:after { content:"\f105";}
  .rsArrowLeft { margin-left: -75px;}
  .rsArrowRight { margin-right: -75px;}
}

@media all and (min-width: 768px) and (max-width: 979px) {
  #{$container} {
    #{$slider}, #{$slider} .rsOverflow {height: 370px !important;}
    .rsBullets { bottom: 20px;}
    .title { font: normal 35px/45px "Merriweather", serif; }
  }
}

@media all and (max-width: 767px) {
  #{$container} {
    // #{$slider}, #{$slider} .rsOverflow {height: 370px !important;}
    .rsContent {
      display: block;
      > div {
        display: block;
        width: 100%;
        padding: 10px 0 0;
        &.slideImg {
          padding: 10px 20px 0;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
        }
      }
    }
    .rsArrow { display:none !important;}
    .title { 
      font: normal 28px/35px "Merriweather", serif; 
      margin: 0 20px;
    }
    .subtitle { 
      font-size: 17px;
      line-height: 20px;
      margin: 0 20px;
    }    
    .btn {
      font-size: 15px;
      padding: 5px 10px;
      position: absolute;
      left: 20px;
      bottom: 20px;
      z-index: 50;
    }
    .slideImg img { 
      border: none;
      width: 100%;
    }
    .rsBullets { display: none;}
  }
}

@media all and (max-width: 640px) {
  #{$container} {
    .slideImg {
      text-align: center;
      img {
        width: auto;
        max-height: 260px;
        margin: 0 auto;
      }
    }
  }
}
@media all and (-webkit-device-pixel-ratio: 2) and (max-width: 640px) and (orientation: portrait) {
  #{$container} {
    #{$slider}, #{$slider} .rsOverflow {height: 460px !important;}
  }
}
@media all and (max-width: 640px) and (orientation: landscape) {
  #{$container} {
  #{$slider}, #{$slider} .rsOverflow {height: 320px !important;}    
    .slideImg {
      text-align: right;
      img {
        width: auto;
        max-height: 200px;
        margin: 0;
      }
    }
  }
}
@media all and (max-width: 480px) and (orientation: landscape) {
  #{$container} {
  #{$slider}, #{$slider} .rsOverflow {height: 300px !important;}    
    .slideImg {
      text-align: right;
      img {
        width: auto;
        max-height: 160px;
        margin: 0;
      }
    }
  }
}

@media all and (min-width: 1200px) {
  #{$container} {
    #{$slider}, #{$slider} .rsOverflow {height: 505px !important;}
    .rsContent > div { padding: 60px 0 0;}
    .rsBullets { bottom: 70px;}
    .title {
      font: normal 50px/60px "Merriweather", serif;
    }
  }
}