@use "sass:math";

/* GLOBAL STYLE
-------------------------------------------------- */
body {
  color: #555;
  background-color: #fff;
}
a {
  color: #159bd8;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #ec1e71;
  text-decoration: underline;
}
a:focus {
  outline: none;
}
img {max-width: 100%;}


/* STYLE CODE WRAPPING
-------------------------------------------------- */
code, kbd, pre {
  font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
}

code:not([class*="language-"]) {
  padding: 2px 4px;
  font-size: 90%;
  color: #c7254e;
  white-space: pre;
  background-color: rgba(200,200,200,.2);
  border-radius: 4px;
}
pre[class*="language-"] {
  margin: 0 0 1.5rem;
}

kbd {
  padding: 2px 4px;
  font-size: 90%;
  color: #fff;
  background-color: #333;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
}

/* STYLE SPICR DEMO CONTENT
-------------------------------------------------- */

.img-responsive,
.spicr img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
hr {
  margin: 0 0 1.5em;
  /* margin-top: 1.8em; */
  margin-top: 0;
  border: 0;
  border-top: 1px dotted #ccc;
}

/* BUTTONS
-------------------------------------------------- */
.btns { display: flex; flex: 1 1 auto; justify-content: center; text-align: center; }
.btns .btn { display: inline; width: auto; } // reset width
.btns .btn+.btn {margin-left: .25rem;}
.btn { display: inline-block; /*flex: 1 0 100px;*/ padding: .5rem 1rem; line-height: 1; color: #fff; background-color: #999; border: 0; transition: all .5s linear; }
.btn.active, .btn.active:hover { background-color: #159bd8; }
.btn:hover, .btn:active, .btn:focus { color: #fff; text-decoration: none; background-color: #777;}
.btn-pink, .bg-pink {background-color: #cd1a62;} .btn-pink:hover, .btn-pink:active, .btn-pink:focus { background-color: #592673; }
.btn-olive, .bg-olive {background-color: #9c27b0;} .btn-olive:hover, .btn-olive:active, .btn-olive:focus { background-color: #159bd8; }
.btn-indigo, .bg-indigo { background-color: #592673;} .btn-indigo:hover, .btn-indigo:active, .btn-indigo:focus { color: #000; background-color: #ffd626; }
.btn-green, .bg-green { background-color: #7b9e28;} .btn-green:hover, .btn-green:active, .btn-green:focus { background-color: #cd1a62; }
.btn-red, .bg-red { background-color: #e91b1f;} .btn-red:hover, .btn-red:active, .btn-red:focus { background-color: #7b9e28; }
.btn-orange, .bg-orange { background-color: #ff5722;} .btn-orange:hover, .btn-orange:active, .btn-orange:focus { background-color: #592673; }
.btn-yellow, .bg-yellow { color: #000; background-color: #ffd626;} .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus { color: #000; background-color: #159bd8; }
.btn-blue, .bg-blue { background-color: #159bd8;} .btn-blue:hover, .btn-blue:active, .btn-blue:focus { background-color: #e91b1f; }
.btn-light, .bg-light { color: rgba(0,0,0,.75); background-color: rgba(255,255,255,.8);} .btn-light:hover, .btn-light:active, .btn-light:focus { color: rgba(0,0,0,.9); background-color: rgba(255,255,255,1);}

/* TEXT COLORS
-------------------------------------------------- */
.text-light { color: rgba(255,255,255,.8);}
.text-dark { color: rgba(0,0,0,.8);}
.text-olive { color: #9c27b0;}
.text-indigo { color: #673ab7;}
.text-green { color: #7b9e28;}
.text-red { color: #e91b1f;}
.text-yellow { color: #ffd626;}
// .text-blue { color: #2196F3;}
.text-blue { color: #159bd8;}
.text-pink { color: #e91e63;}
.text-orange { color: #ff5722;}
.text-lime { color: #cddc39;}
.text-teal { color: #009688;}
.text-strong { font-weight: bold; }

a:hover,
a:focus {
  &.text-light { color: rgba(255,255,255,1);}
  &.text-dark { color: rgba(0,0,0,1);}
  &.text-olive { color: lighen(#9c27b0,15%);}
  &.text-indigo { color: lighen(#673ab7,15%);}
  &.text-green { color: lighen(#7b9e28,15%);}
  &.text-red { color: lighen(#e91b1f,15%);}
  &.text-yellow { color: darken(#ffd626,15%);}
  &.text-blue { color: lighen(#159bd8,15%);}
  &.text-pink { color: lighen(#e91e63,15%);}
  &.text-orange { color: lighen(#ff5722,15%);}
  &.text-lime { color: darken(#cddc39,15%);}
  &.text-teal { color: lighen(#009688,15%);}
}

.text-light {
  h1,h2,h3,h4,b,strong {
    color: #fff;
  }
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Featurettes
------------------------- */
.marketing {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: 3.5em;
  margin-top: $slider-height;
  overflow: hidden;
  background: #fff;
}

.featurette-heading span {
  /*clear: both; float: left; width: 100%;*/
  font-size: 36px;
  font-weight: normal; line-height: 1.38; color: #159bd8; letter-spacing: -3px;
}

.featurette-heading span { font-size: 75%; letter-spacing: 0; }

/* footer */
footer {
  position: relative;
  z-index: 1;
}

/* CUSTOMIZE THE SPICR
-------------------------------------------------- */
#SpicrMainDemo {
  position: fixed; top: 0; right: 0; left: 0;
  z-index: 1; background: #555;
  // height: 500px
}
.spicr .lead {
  margin: 0;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}

.overlay {
  position: absolute; top: 0; right: 0; // bottom: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,.45);
}

/* .spicr-control.long-shadows .arrow-prev,
.spicr-control.long-shadows .arrow-next { padding: 0; margin: 0; background: none transparent } */

.spicr-carousel-navigation > * {
  vertical-align: text-bottom;
}

@media (min-width: 479px) {
  .spicr-control.long-shadows {
    transition: opacity .3s ease-in;
    .arrow-prev { padding: 0 5px 0 250px; margin-left: -280px; transform: translate(-100%); }
    .arrow-next { padding: 0 250px 0 5px; margin-right: -280px; transform: translate(100%); }
  }
  .spicr-control.long-shadows {
    .arrow-prev,.arrow-next {
      transition: all 1s ease-in;
    }
  }
  .spicr:hover .spicr-control.long-shadows {
    .arrow-prev,.arrow-next {
      transition-timing-function: ease-out;
      transition-duration: .3s;
    }
  }

  .spicr-control.long-shadows:focus {
    .arrow-prev,
    .arrow-next { transform: translate(0%); }
  }

  .spicr:hover {
    .spicr-control.long-shadows {
      .arrow-prev { transform: translate(0%); }
      .arrow-next { transform: translate(0%); }
    }
  }

  .spicr-control.long-shadows {
    $arrow-width: 40px;

    .spicr-icon {
      width: $arrow-width;
      height: $arrow-width;
    }
    .arrow-next, .arrow-prev {
      // margin-top: #{-$arrow-width/2};
      margin-top: math.div(-$arrow-width, 2);
      border-radius: $arrow-width;
    }
  }
  .spicr-control.long-shadows:focus {
    .arrow-prev { transform: translate(0%); }
    .arrow-next { transform: translate(0%); }
  }

  .spicr-control.long-shadows .arrow-prev,
  .spicr-control.long-shadows .arrow-next {
    display: block; width: auto; height: auto;
    background-color: rgba(0,0,0,.3);
  }
}
.spicr-carousel h4 { margin-top: 0; }

.spicr-slider { font-size: calc(.5rem + 1.5vw); line-height: calc(.6rem + 1.5vw); }
.spicr-slider h1 { margin: 0; font-size: calc(1.375rem + 1.5vw); letter-spacing: -1px; }
.spicr-slider h2 { margin: 0; font-size: calc(1.375rem + .9vw); letter-spacing: 0; }

.features-carousel .spicr-pages {
  top: .5rem;
  li { padding: .5rem 1rem; line-height: 1.5rem; }
}

@media (min-width: 768px) {
  .featurette-heading span { font-size: 24px; line-height: 1; letter-spacing: -1px; }
  .spicr-slider { font-size: 1rem; line-height: 1.8rem; }
  .spicr-slider h1 { margin: 0 0 1.5rem; font-size: 42px; line-height: 1; letter-spacing: -2px; }
  .spicr-slider h2 { margin: 0 0 1.5rem; font-size: 36px; line-height: 1; letter-spacing: -1px; }
}

@media (min-width: 980px) {
  .featurette-image {
    margin: .76em 0 1.38em;
  }
}