/*
 *= require owl.carousel
 *= require owl.theme
 */

@import 'medium-editor/medium-editor';
@import 'medium-editor/themes/bootstrap';

.fc-snippet {
  position: fixed;
  z-index: 100;
  top: 50px;
  bottom: 110px;
  right: 0;

  width: 150px;

  padding: 20px;

  background: #f8f8f8;
  border-left: solid 1px rgba(0,0,0,.1);

  overflow: hidden;
  overflow-y: scroll;
}

.fc-snippet__btn {
  display: block;
  text-decoration: none;
  margin-bottom: 20px;

  transition: box-shadow .1s ease;

  &:hover {
    box-shadow: 0 0 0 2px rgba(0,0,0,.1);
  }
}

.fc-snippet__image {
  width: 100%;
}

.fc-controls {
  position: fixed;
  z-index: 100;
  bottom: 0;
  right: 0;

  width: 150px;

  padding: 20px;

  background: #f8f8f8;
  border-top: solid 1px rgba(0,0,0,.1);
  border-left: solid 1px rgba(0,0,0,.1);
}


.fc-tools {
  position: absolute;
  z-index: 300;
  top: 0;
  left: -40px;

  border-radius: .4em;
  background: darken(#fff, 7%);

  overflow: hidden;
}

.fc-tools--center {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

  .fc-tools__btn {
    display: inline-block;
  }
}

.fc-tools--disabled {
  z-index: 100;
}

.fc-tools__btn {
  display: block;

  font-size: 12px;
  text-align: center;
  text-transform: uppercase;

  padding: 10px;

  &:hover,
  &:focus {
    background: rgba(0,0,0,.05);
    text-decoration: none;
  }
}

.fc-tools__input {

}

.fc-tools__input--upload {
  display: none !important;
}


.fc-container {
  width: 777px;
  padding: 0 0 0 40px;
}

.fc-content {
  position: relative;
  max-width: 100%;
  height: auto !important;

  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.fc-row {
  position: relative;
}

.fc-row--flex {
  display: flex;
}

.fc-loading {
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  background: image_url('fc-loading.svg') no-repeat center rgba(#fff, .95);
}

.fc-search {
  margin-bottom: 10px;

  width: 100%;
  padding: 8px;
  border-radius: 4px;
  border: solid 1px #ccc;

  outline: none;

  &:focus {
    border-color: #999;
  }
}


[contenteditable="true"] {
  outline: none;
  min-height: 15px;

  &:focus {
    box-shadow: 0 0 0 1px rgba(0,0,0,.2);
  }

  &:empty {
    background: rgba(#000, .1);
  }
}

.ui-sortable-placeholder {
  margin: 20px 0;
  height: 80px;

  background: rgba(0,0,0,.05);
  border: dashed 2px rgba(0,0,0,.05);
}


.fc-content {
  line-height: 1.6;

  color: rgba(0,0,0,.7);
  font-family: arial, sans-serif;
  font-size: 16px;

  margin-bottom: 30px;
}


.fc-row {
  position: relative;

  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

.fc-date {
  color: lighten(#111, 50%);
  font-size: 12px;

  margin-bottom: 16px;
  padding-bottom: 16px;

  border-bottom: solid 1px rgba(#111, .06);
}

.fc-item {
  position: relative;

  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }

  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: 700 !important;
  }
}

.fc-item--border {
  margin-bottom: 16px;
  padding-bottom: 16px;

  border-bottom: solid 1px rgba(#111, .06);
}

.fc-link {
  display: none;
}

.fc-figure {
  position: relative;
  margin: 0 0 10px;

  text-align: center;

  border-radius: 4px;
  overflow: hidden;
}

.fc-image {
  margin-bottom: -7px;

  height: 100%;
  border-radius: 4px;
}

.fc-content {
  height: 144px;
  overflow: hidden;
}

.fc-time {
  line-height: 1.6;

  float: right;
  color: darken(#fff, 40%);
  font-size: 14px;
}

.fc-caption {
  color: lighten(#111, 40%);
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;

  margin: 0 0 10px;
}

.fc-title {
  display: block;
  width: 100%;
  line-height: 1.2;

  color: lighten(#111, 23%) !important;
  font-size: 16px;
  letter-spacing: -.04em;

  margin: 0;
}

.fc-title--highlight {
  padding: 8px;
  background: #333;

  color: #fff !important;
  font-size: 19px !important;
}

.fc-text {
  line-height: 1.5;

  color: lighten(#111, 30%);
  font-size: 14px;

  margin: 10px 0 0;
}


@media screen and (min-width: 460px) {
  .fc-figure {
    float: left;
    height: 112px;
    margin: 4px 16px 0 0;
  }

  .fc-caption {
    font-size: 13px;
  }

  .fc-title {
    line-height: 1.4;
    font-size: 20px;
  }

  .fc-title--small {
    font-size: 17px;
  }

  .fc-title--large {
    line-height: 1.3;
    font-size: 26px;
  }

  .fc-text {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  .fc-item--two {
    float: left;
    display: block;
    margin-right: 3.57866%;
    width: 48.21067%;

    &:nth-child(2n+1) {
      clear: left;
    }

    &:nth-child(2n) {
      margin-right: 0;
    }
  }

  .fc-item--three {
    float: left;
    display: block;
    margin-right: 3.16844%;
    width: 31.22104%;

    &:nth-child(3n+1) {
      clear: left;
    }

    &:nth-child(3n) {
      margin-right: 0;
    }
  }

  .fc-item--four {
    float: left;
    display: block;
    margin-right: 3.57866%;
    width: 22.316%;

    &:nth-child(4n+1) {
      clear: left;
    }

    &:nth-child(4n) {
      margin-right: 0;
    }
  }

  .fc-date {
    font-size: 14px;
  }

  .fc-title--highlight {
    padding: 8px 14px;
  }

  .fc-figure--block {
    float: none;
    width: 100%;
    margin: 0 16px 10px 0;

    .fc-image {
      width: 100%;
      height: auto;
    }
  }

  .fc-figure--small {
    height: 64px;
  }

  .fc-figure--large {
    height: 128px;
  }

  .fc-figure--clip {
    .fc-figure {
      width: 160px;
    }

    .fc-figure--small {
      width: 96px;
    }

    .fc-figure--large {
      width: 224px;
    }
  }
}


// slide

.fc-slide {
  .owl-controls {
    position: relative;
    height: 30px;
    line-height: 30px;

    .owl-pagination {
      position: absolute;
      top: 0;
      left: 0;

      span {
        margin: 0 10px 0 0;
        width: 10px;
        height: 10px;
        line-height: 1;
      }
    }

    .owl-buttons {
      position: absolute;
      top: 0;
      right: 0;

      div {
        margin: 0;

        color: rgba(0,0,0,.6);
        font-size: 30px;
        text-align: center;

        width: 30px;
        line-height: 1;
        padding: 0;
        border-radius: 0;
        background: none;
      }
    }
  }
}

.fc-slide__item {
  position: relative;
  overflow: hidden;
}

.fc-slide__caption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 300;
  margin: 32px;

  color: #fff;
  font-size: 16px;
  text-transform: uppercase;

  display: block;
  min-width: calc(100% - 64px);
  line-height: 1.6;

  text-shadow: 1px 1px 0 rgba(0,0,0,.5);

  &:after {
    content: "";

    position: absolute;
    bottom: -10px;
    left: 0;

    display: block;
    width: 48px;
    height: 3px;

    background: #444;
  }
}

h2.fc-slide__caption {
  font-weight: 600 !important;
}

.fc-slide__content {
  padding: 32px;
}

.fc-slide__title {
  margin: 0;

  width: 100% !important;
  line-height: 1.3;
  color: #fff !important;
  letter-spacing: -.04em;
  font-size: 33px;

  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
}

.fc-slide__text {
  margin: 8px 0 0;

  width: 100% !important;
  color: #fff;
  font-size: 19px;
  line-height: 1.6;

  text-shadow: 1px 1px 0 rgba(0,0,0,.6);
}

.fc-slide__figure {
  position: relative;
  z-index: -1;
  margin: 0;

  width: 100%;
  height: 0;
  border-radius: 6px;
  padding-bottom: 60%;

  overflow: hidden;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  &:before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;

    display: block;
    width: 100%;
    height: 100%;
    opacity: .9;
    background: rgba(#000, .4);
    background-size: 120%;
    border-radius: 4px;
  }
}

.fc-slide__image {
  position: absolute;
  width: 100%;
  min-height: 100%;
}

.fc-slide__link {
  display: none;
}

.fc-slide__content {
  position: absolute;
  z-index: 200;
  left: 0;
  bottom: 0;
  padding: 32px;

  width: 100%;
}