$main-color         : #000;
$link-default-color : #000;
$title-color        : #ee660f;
$subtitle-color     : #414042;
$dark-color         : #272425;
$gray-color1        : #f0f0f0;
$gray-color2        : #ebebee;
$mecury1            : #e5e5e5;
$mecury2            : #d5d2d1;
$light-blue         : #55607f;

$highlight-color-red: #f94c43;
$disabled-color     : #939393;

$fb-color           : #3b5999;
$twitter-color      : #55acee;
$pinterest-color    : #bd081c;
$google-plus-color  : #dd4b39;
$youtube-color      : #cd201f;
$instagram-color    : #e4405f;

@mixin textOpacity($opacity: 0.7, $color: #fff) {
  opacity: $opacity;
  color: $color;
}

@mixin socialColor($bg, $color: #fff) {
  background-color: $bg;
  color: $color;
}

.text-opacity07 {
  @include textOpacity($opacity: 0.7, $color: #fff);
}

.fbbg, .fbbg-hover:hover {
  @include socialColor($fb-color);
}

.twitterbg, .twitterbg-hover:hover {
  @include socialColor($twitter-color);
}

.pinterestbg, .pinterestbg-hover:hover {
  @include socialColor($pinterest-color);
}

.google-plusbg, .google-plusbg-hover:hover {
  @include socialColor($google-plus-color);
}

.youtubebg, .youtubebg-hover:hover {
  @include socialColor($youtube-color);
}

.instagrambg, .instagrambg-hover:hover {
  @include socialColor($instagram-color);
}



.depth1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

@mixin shadow1() {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}




.make-row-flex {
  display: flex;
  flex-wrap: wrap;
}


.nopaddingX {
  padding-left: 0;
  padding-right: 0;
}

.fullscreen-overlay {
  width           : 100%;
  height          : 100vh;
  position        : fixed;
  top             : 0;
  left            : 0;
  z-index         : 4;
  background-color: rgba($dark-color, 0.5);
  display         : none;

  &.active {
    display: block;
  }
}

body {
  &.active-100vh {
    height: 100vh;
    overflow: hidden;
  }
}
.button {
  border-radius: 0;
  padding: 6px 15px;
  cursor: pointer;
}
.button-block {
  display: block;
  width: 100%;
}
.dark-button {
  border: 1px solid $dark-color;
  background-color: $dark-color;
  color: #fff;
  &:hover {
    background-color: #fff;
    color: $dark-color;
  }
}

.dark-button-o {
  border: 1px solid $dark-color;
  background-color: #fff;
  color: $dark-color;
  &:hover {
    background-color: $dark-color;
    color: #fff;
  }
}


.frm-100 {
  width: 100% !important;
}
.frm-66 {
  width     : 66.6666% !important;
  box-sizing: border-box;
}
.frm-50 {
  width     : 50% !important;
  box-sizing: border-box;
}
.frm-33 {
  width     : 33.3333% !important;
  box-sizing: border-box;
}
.frm {
  padding: 8px;
  input,
  textarea,
  select {
    width  : 100%;
    padding: 8px;
    border : 1px solid $disabled-color;
    &:focus {
      border-color: $dark-color;
    }
  }
  float: left;
}


// CUSTOM CHECKBOX / RADIO BUTTON
label.custom-checkbox,
label.custom-radio {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  input {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    &:checked + .fake-input {
      border-color: #333;
      &:before {
        transform: translate(-50%, -50%) rotate(45deg) scale(1);
      }
    }
  }

  .fake-input {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 1px solid darken($gray-color1, 20%);
    vertical-align: middle;
    position: relative;

    &:before {
      content: '';
      display: inline-block;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(45deg) scale(0);
      transition: all 0.2s;
    }
  }

  .text {
    margin-left: 4px;
    display: inline-block;
    vertical-align: middle;
  }

}

label.custom-checkbox {
  .fake-input {
    border-radius: 4px;
    &:before {
      width: 4px;
      height: 8px;
      border-right: 2px solid #333;
      border-bottom: 2px solid #333;
    }
  }
}

label.custom-radio {
  .fake-input {
    border-radius: 50%;
    &:before {
      width: 8px;
      height: 8px;
      background-color: #333;
      border-radius: 50%;
    }
  }
}
// END CUSTOM CHECKBOX / RADIO BUTTON