/**
sw assy.less

@Author: Samuraiworks
@Version: 190822
 */

/* do it assy +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 768px) {
  colgroup {
    display: none;
  }
}

/* 定義部分----------------------------------------------- */
@black-color: #30071e;
@black-color-hover: #482641;
@half-gray  : #cacacb;
@light-gray  : #E7E7E7; // #dbdbdb
@link-color : @tmPage-color4;
@vRadius:    4px;

@this-KeyColor: #FF87AF;  // 背景 #FF87AF e54698
@this-KeyColor-dark: #d44d7a;  // 背景 #FF87AF e54698
@tmPageRed: rgb(195, 0, 85);      //

@tmPage-color1: #6b253f;  // 文字等
@tmPage-color2: #599CCC;  // withMizu
@tmPage-color3: #20a2b8;  //


@tmPage-color4: @tmPageRed;  // Navi
@tmPage-color5: @this-KeyColor;  // Navi

@tmPage-color6: #0A2480;  // withBlue

@tmPage-colorA: #f5bbeb;
@tmPage-colorB: #fffeee;  //
@tmPage-colorC: rgba(153, 223, 238, 0.15);  // wrapper
@tmPage-colorD: #cc95be;  //

@main-width : 1200px;

@url-color: @tmPage-color5;

@main-color : @tmPage-color4;
@thisRed: @tmPageRed;
@thisBlue: @tmPage-color4;

.hrRed { color: @tmPageRed; }
.hrBlue { color: @tmPage-color2; }

a img {
  -webkit-transition: .3s;
  transition: .3s;
}
a:hover img {
  .opace70;
}
/* 定義部分----------------------------------------------- */
.a_borad {border-radius:9px;}
.float-right, .a_fl_R {float: right;}
.float-left, .a_fl_L {float: left;}
.a_Tcenter {text-align: center;}
.a_TRight {text-align: right !important;}
.a_TLeft {text-align: left !important;}
.a_hidden {display: none;}
.a_visi-hidden {visibility: hidden}
.display-none, .a_disp_none {	display: none;}
.a_disp_block {	display: block;}
.a_disp_inline, .inline-block, .a_ilb { display: inline-block  !important;}
.a_opace0 {opacity: 0;}
.a_prelative {position: relative;}
.a_mar00auto {margin: 0px auto;}

// todo @media (max-width = 〜px まで
@media (max-width: 768px) {
  .float-right, .a_fl_R {
    float: none;
    margin: 20px auto;
    display: block;
  }

  .float-left, .a_fl_L {
    float: none;
    margin: 20px auto;
    display: block;
  }
}

.swFlexCenter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.swFlexCenterL {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
}
.swFlexCenterR {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}
/*text colour*/
.px_fff { color: #fff !important; text-shadow: 1px 1px 1px #666; }
.px_000 { color: @black-color !important; text-shadow: 1px 1px 1px #fff; }
.px_fff_shadcha { color: #fff !important; text-shadow: 1px 1px 1px #766142; }
.px_uspink { color: #906 !important; text-shadow: 1px 1px 1px #fff; }
.px_ao { color: @tmPage-color6 !important; text-shadow: 1px 1px 1px #fff;}
.px_aomid { color: @tmPage-color4 !important; text-shadow: 1px 1px 1px #fff !important; }
.px_mizu { color: @tmPage-color2 !important; text-shadow: 1px 1px 1px #fff; }
.px_midr { color: @tmPage-color3!important; text-shadow: 1px 1px 1px #fff !important; }
.px_666 { color: #666 !important; text-shadow: 1px 1px 1px #fff; }
.px_org { color: #e56b0d !important; text-shadow: 1px 1px 1px #fff; }
.px_aka { color: @tmPageRed !important; text-shadow: 1px 1px 1px #fff; }
.px_pink { color: #e96c95 !important; text-shadow: 1px 1px 1px #fff; } // @this-KeyColor UP
.px_pink2 { color: @this-KeyColor-dark !important; text-shadow: 1px 1px 1px #fff !important; }
.px_cha { color: #a47402 !important; text-shadow: 1px 1px 1px #fff; }
.px_ki { color: #e6e321 !important; }
.px_bold { font-weight: bold !important; }
[class^="px_"] { /* セレクタ名の前方一致 */
  font-weight: bold;
}


a { cursor: pointer }
a:link    {
    color: @link-color;
}
a:visited {
  //color: lighten(@link-color, 19%);
  color: #793963;
}
a:hover,
a:focus,
a:active  {
  text-decoration: underline;
}

.meiryo {
 font-family: "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.mincho {
  //font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.gothic {
  font-family:"Lucida Grande","Lucida Sans Unicode","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ",Meiryo,"MS Pゴシック",Helvetica,Arial,Verdana,sans-serif;
}
.maru-goth {
  font-family: "Hiragino Maru Gothic Pro", "HG丸ゴシックM-PRO", verdana, arial, sans-serif;
}
.hiragino {
  font-family: 'Lato', Arial, Helvetica, sans-serif;
}

.add-fixed {
  // notice sp-slide だな。 ダメな原因!!! ++++++++
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
  //background-color: rgba(105, 175, 235, 0.3);
}

.ribbonMix (@ribboncolor : @this-KeyColor-dark) {
  position: absolute;
  display: inline-block;
  min-width: 10em;
  height: 24px;
  line-height: 24px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  padding: 0 15px 0 20px;
  background-color: @ribboncolor;
  a, a:hover, a:visited {
    color: #fff;
  }
  &::before,
  &::after {
    content: '';
    position: absolute;
  }
  &::before {
    top: 100%;
    left: 0;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: transparent;
    border-right-color: darken(@ribboncolor, 15%);
  }
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: -12px;
    height: 0;
    width: 0;
    border: 12px solid @ribboncolor;
    border-right-color: transparent;
  }

}  // ribbon

[class^="ribbon-"] {
  .ribbonMix();
  position: absolute;
  left: -15px;
  top:  -9px;
  z-index: 333;
}

.ribbon-this-KeyColor {
  .ribbonMix(@this-KeyColor);
}

.ribbon-this-KeyColor-dark {
  .ribbonMix(@this-KeyColor-dark);
}
.ribbon-tmPage-color2 {
  .ribbonMix(@tmPage-color2);
}


// utils
hr.forSp {
  display: none;
}
br.forSp, span.forSp, i.forSp {
  display: none;
}
br.forPc, span.forPc, div.forPc {
  display: inline;
}

.pcImg { display: block !important;}
.spImg { display: none !important;}
.pcBlock { display: block }
.spBlock { display: none }
.pcInline { display: inline-block }
.spInline { display: none }


@media screen and (max-width: 768px) {
  // utils
  hr.forSp {
    display: block;
  }
  br.forSp, span.forSp, .sp i.forSp {
    display: inline;
  }
  br.forPc, span.forPc, div.forPc {
    display: none;
  }

  .pcImg { display: none !important;}
  .spImg { display: block !important;}
  .pcBlock { display: none }
  .spBlock { display: block }
  .pcInline { display: none }
  .spInline { display: inline-block }

  img.w100 {
    max-width: 100%;
    height: auto;
  }

}  // @media screen and (max-width: 768px)

@media screen and (max-width: 320px) {

} // @media screen and (max-width: 320px)

.photoFrame {
  box-shadow: 0 0 5px #ccccdc;
  border: 7px solid #fff;
  border-radius: 11px;
}

.flexibleBox {
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */
}

.forAnchor {
  position: absolute;
  top: -65px;
  left: 0;
  width: 3px;
  height: 3px;
  .mobile & {
    top: -35px;
  }
}
#satoyama #Story {
  .forAnchor {
    top: -120px;
    .mobile & {
      top: -75px;
    }
  }
}

// fixup forAnchor に統合
// CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法
//section:before,
.anchorPosition:before {
  content: " ";
  //margin-top: -55px;
  height: 30px;
  display: block;
  visibility: hidden;
}

.mobile .anchorPosition:before {
  height: 75px;
}

.mobile .shortAnchor.anchorPosition:before,
.shortAnchor.anchorPosition:before {
  height: 1em;
}

// todo @media (max-width = 〜px まで
@media (max-width: 768px) {
  /** fixme safari iphone で だめっぽいぞ fixHeight.js に変えた
   */
  .row-eq-height {
    /*display: -webkit-flex; !* Safari *!
    display: flex;
    flex-wrap: wrap;*/
  }
}



/* sw set assy +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* Material iconsを利用する */
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* 推奨サイズ */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;

  /* WebKitブラウザサポート */
  -webkit-font-smoothing: antialiased;
  /* Chrome、Safariサポート */
  text-rendering: optimizeLegibility;
  /* Firefoxサポート */
  -moz-osx-font-smoothing: grayscale;
  /* IEサポート */
  font-feature-settings: 'liga';
}

.palt {
  font-feature-settings : "palt" 1;
}
.palt-not {
  font-feature-settings : "palt" 0 !important;
}

/* 【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー */
// https://tech.recruit-mp.co.jp/front-end/tips-ellipsis/
// Variables
@container-bg: #eee;
@font-size-base: 14px;
@line-height-computed: 1.4;
@lines-to-show: 3;
// Reset
.ellipsis-container p { margin: 0; }
// Multiline text this ellipsis
// Supported IE and Firefox
.ellipsis-container {
  background: #eee;
  overflow: hidden;
  width: 100%;
  p {
    font-size: @font-size-base;
    height: @font-size-base * @line-height-computed * @lines-to-show;
    line-height: @line-height-computed;
    position: relative;
    &:before,
    &:after {
      background: #eee;
      position: absolute;
    }
    &:before {
      content: "...";
      top: @font-size-base * @line-height-computed * (@lines-to-show - 1);
      right: 0;
    }
    &:after {
      content: "";
      height: 100%;
      width: 100%;
    }
  }
}
/* 【複数行にも対応】長過ぎる文字列を省略して末尾を三点リーダー */


.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5,
.col-xs-2-5, .col-sm-2-5, .col-md-2-5, .col-lg-2-5,
.col-xs-3-5, .col-sm-3-5, .col-md-3-5, .col-lg-3-5,
.col-xs-4-5, .col-sm-4-5, .col-md-4-5, .col-lg-4-5 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-1-5 {
    width: 20%;
    float: left;
}
.col-xs-2-5 {
    width: 40%;
    float: left;
}

.col-xs-3-5 {
    width: 60%;
    float: left;
}

.col-xs-4-5 {
    width: 80%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-1-5 {
        width: 20%;
        float: left;
    }
    .col-sm-2-5 {
        width: 40%;
        float: left;
    }
    .col-sm-3-5 {
        width: 60%;
        float: left;
    }
    .col-sm-4-5 {
        width: 80%;
        float: left;
    }
}
@media (min-width: 1202px) {
    .col-md-1-5 {
        width: 20%;
        float: left;
    }
    .col-md-2-5 {
        width: 40%;
        float: left;
    }
    .col-md-3-5 {
        width: 60%;
        float: left;
    }
    .col-md-4-5 {
        width: 80%;
        float: left;
    }
}
/*@media (min-width: 1200px) {
    .col-lg-1-5 {
        width: 20%;
        float: left;
    }
    .col-lg-2-5 {
        width: 40%;
        float: left;
    }
    .col-lg-3-5 {
        width: 60%;
        float: left;
    }
    .col-lg-4-5 {
        width: 80%;
        float: left;
    }
}   */

/* hover Opacity */
.opace70 {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;

}

/* ------------------------------------------------------------
  Clearfix
------------------------------------------------------------ */
/* new clearfix */
.clf:before,
.clf:after {
    content: "";
    display: table;
}
.clf:after {clear: both;}
/* For IE 6/7 (hasL) */
.clf {zoom: 1;}


.uline {
    font-weight: bold;
    background: linear-gradient(rgba(0,0,0,0) 50%,#ffff88 0%);
}
.uline2 {
    font-weight: bold;
    background: linear-gradient(rgba(0,0,0,0) 50%, #ffe1f3 0%);
}
.uline3 {
    font-weight: bold;
    background: linear-gradient(rgba(0,0,0,0) 50%, #ebf6ff 0%);
}
.boxShadow {
  @shadowColor: #6e5c69;
  -ms-box-shadow:     0px 0px 31px @shadowColor;
  -moz-box-shadow:    0px 0px 31px @shadowColor;
  -webkit-box-shadow: 0px 0px 31px @shadowColor;
  box-shadow:         0px 0px 31px @shadowColor;
}

.forBoxShadow {
  @shadowColor: #b7adb4;
  -ms-box-shadow: 0 0     4px @shadowColor;
  -moz-box-shadow: 0 0    4px @shadowColor;
  -webkit-box-shadow: 0 0 4px @shadowColor;
  box-shadow:         0 0 4px @shadowColor;
}

.imgBoxShadow {
  @shadowColor: #b7a5b1;
  -ms-box-shadow: 0 0     5px @shadowColor;
  -moz-box-shadow: 0 0    5px @shadowColor;
  -webkit-box-shadow: 0 0 5px @shadowColor;
  box-shadow:         0 0 5px @shadowColor;
}
.imgBoxShadow-better {
  box-shadow: 0 2.5rem 2rem -2rem hsl(346, 8%, 59%);
}
// Single Corner Border Radius
.border-top-left-radius(@vRadius) {
  -webkit-border-top-left-radius: @vRadius;
      -moz-border-radius-topleft: @vRadius;
          border-top-left-radius: @vRadius;
}
.border-top-right-radius(@vRadius) {
  -webkit-border-top-right-radius: @vRadius;
      -moz-border-radius-topright: @vRadius;
          border-top-right-radius: @vRadius;
}
.border-bottom-right-radius(@vRadius) {
  -webkit-border-bottom-right-radius: @vRadius;
      -moz-border-radius-bottomright: @vRadius;
          border-bottom-right-radius: @vRadius;
}
.border-bottom-left-radius(@vRadius) {
  -webkit-border-bottom-left-radius: @vRadius;
      -moz-border-radius-bottomleft: @vRadius;
          border-bottom-left-radius: @vRadius;
}

//Liner
.gradLiner(@topcol:#000000, @bottomcol:#ffffff) {
  background: @topcol;
  background: -moz-linear-gradient(top, @topcol 0%, @bottomcol 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@topcol), color-stop(100%,@bottomcol));
  background: -webkit-linear-gradient(top, @topcol 0%,@bottomcol 100%);
  background: -o-linear-gradient(top, @topcol 0%,@bottomcol 100%);
  background: -ms-linear-gradient(top, @topcol 0%,@bottomcol 100%);
  background: linear-gradient(to bottom, @topcol 0%,@bottomcol 100%);
// IE
  //filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@topcol),argb(@bottomcol))); // IE9 and down
}

.mainGrad1 { //メインのグラデ 薄いパターン
  @Grads : #ffffff;
  @GradsA: #f5f5f5;
  @GradsB: #eaeaea;
  @GradsC: #dadada;

  background: @GradsA;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsA 77%, @GradsB 95%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads), color-stop(77%,@GradsA), color-stop(95%,@GradsB), color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsA 77%, @GradsB 95%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%, @GradsA 77%, @GradsB 95%, @GradsC 100%);
  // IE
  //filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", @Grads, @GradsB)); // IE9 and down
}
.mainGrad1Rev { //メインのグラデ 薄いパターン
  @GradsC : #ffffff;
  @GradsB: #f5f5f5;
  @GradsA: #ffffff;
  @Grads: #EAEAEA;

  background: @GradsA;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsA 55%, @GradsB 95%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads), color-stop(55%,@GradsA), color-stop(95%,@GradsB), color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsA 55%, @GradsB 95%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%, @GradsA 55%, @GradsB 95%, @GradsC 100%);
  // IE
  //filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", @Grads, @GradsB)); // IE9 and down
}
.mainGrad1RevOpace { //メインのグラデ 薄いパターン
  @GradsC: rgba(255, 255, 255, 0.75);
  @GradsB: rgba(245, 245, 245, 0.75);
  @GradsA: rgba(255, 255, 255, 0.65);
  @Grads: rgba(234, 234, 234, 0.75);

  background: @GradsA;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsA 55%, @GradsB 75%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads), color-stop(55%,@GradsA), color-stop(75%,@GradsB), color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsA 55%, @GradsB 75%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%, @GradsA 55%, @GradsB 75%, @GradsC 100%);
  // IE
  //filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", @Grads, @GradsB)); // IE9 and down
}

.mainGrad2 { //メインのグラデ2
  @Grads : #FFFFFF;
  @GradsA: #FBFBFB;
  @GradsB: #F8F8F8;
  @GradsC: #F5F5F5;

  background: @GradsA;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads), color-stop(50%,@GradsA), color-stop(95%,@GradsB), color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);

  // IE
  //filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", @Grads, @GradsB)); // IE9 and down
}


.mainGrad2Rev { //メインのグラデ2
  @GradsC: #FFFFFF;
  @GradsB: #FBFBFB;
  @GradsA: #F8F8F8;
  @Grads: #F5F5F5;

  background: @GradsA;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads), color-stop(50%,@GradsA), color-stop(95%,@GradsB), color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);

  // IE
  //filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)", @Grads, @GradsB)); // IE9 and down
}

.mainGrad3 { //メインのグラデ thisパターン
  @Grads : #2E40A5;
  @GradsA: #192C7B;
  @GradsB: #102469;
  @GradsC: #061A53;

  background: @GradsA;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads), color-stop(50%,@GradsA), color-stop(95%,@GradsB), color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
}


.mainGrad4 { //thisパターン
  @Grads : lighten(@tmPageRed, 9%);
  @GradsA: @tmPageRed;
  @GradsB: darken(@tmPageRed, 5%);
  @GradsC: darken(@tmPageRed, 11%);

  background: @GradsA;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads), color-stop(50%,@GradsA), color-stop(95%,@GradsB), color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
}


.mainGrad5 { //
  @Grads : #FFF799;
  @GradsA: #FFE275;
  @GradsB: #FFD35C;
  @GradsC: #FFCC50;

  background: @GradsA;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads), color-stop(50%,@GradsA), color-stop(95%,@GradsB), color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);

}

.mainGrad6 { //
  @Grads : #daffef;
  @GradsA: #dafcff;
  @GradsB: #d0e9ec;
  @GradsC: #c9ebfe;

  background: @GradsA;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads), color-stop(50%,@GradsA), color-stop(95%,@GradsB), color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
}

.mainGrad7 { //
  @Grads : #1f8827;
  @GradsA: #1e7412;
  @GradsB: #175c10;
  @GradsC: #1e7412;

  background: @GradsA;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads), color-stop(50%,@GradsA), color-stop(95%,@GradsB), color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
}


.mainGrad8 { //
  @Grads : #ff9f0e;
  @GradsA: #ee9904;
  @GradsB: #dd7d03;
  @GradsC: #c57303;

  background: @GradsA;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads), color-stop(50%,@GradsA), color-stop(95%,@GradsB), color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%, @GradsA 50%, @GradsB 95%, @GradsC 100%);
}


.mainGrad9 { //
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eab92d+0,f5d205+10,eab92d+40,f5d205+60,f5d205+66,eab92d+85,c79810+99 */
  background: #eab92d; /* Old browsers */
  background: -moz-linear-gradient(77deg, #de9f1b 0%, #f5d205 10%, #eab92d 40%, #f5d205 60%, #f5d205 66%, #eab92d 85%, #c79810 99%); /* FF3.6-15 */
  background: -webkit-linear-gradient(77deg,  #de9f1b 0%,#f5d205 10%,#eab92d 40%,#f5d205 60%,#f5d205 66%,#eab92d 85%,#c79810 99%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(77deg,  #de9f1b 0%,#f5d205 10%,#eab92d 40%,#f5d205 60%,#f5d205 66%,#eab92d 85%,#c79810 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  //filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=0 ); /* IE6-9 */

}

.mainGrad10 { //
  background: #eab92d; /* Old browsers */
  background: -moz-linear-gradient(11deg,  #eab92d 0%, #f5d205 10%, #eab92d 40%, #f5d205 60%, #ffe446 66%, #eab92d 85%, #c79810 99%); /* FF3.6-15 */
  background: -webkit-linear-gradient(11deg,  #eab92d 0%,#f5d205 10%,#eab92d 40%,#f5d205 60%,#ffe446 66%,#eab92d 85%,#c79810 99%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(11deg,  #eab92d 0%,#f5d205 10%,#eab92d 40%,#f5d205 60%,#ffe446 66%,#eab92d 85%,#c79810 99%);

}


.mainGradERH2 { //erhred
  @Grads : #a70002;
  @GradsA: #8f0308;
  @GradsB: #8f0308;
  @GradsC: #b90020;

  background-color: @tmPageRed;

  background: @GradsA;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 66%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads), color-stop(50%,@GradsA), color-stop(66%,@GradsB), color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsA 50%, @GradsB 66%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%, @GradsA 50%, @GradsB 66%, @GradsC 100%);
}


// for Font Awesome icons
.mainGrad11 {
  @Grads : #f8f4e0;
  @GradsA: #ede871;
  @GradsB: #e6e321;
  @GradsC: #d4c907;

  background: @GradsA;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsA 33%, @GradsB 77%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads), color-stop(33%,@GradsA), color-stop(77%,@GradsB), color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsA 33%, @GradsB 77%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%, @GradsA 33%, @GradsB 77%, @GradsC 100%);
}

.gradient-icon {
  .mainGrad11;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: initial;

  .ie &,
  .ie11 & {
    background: none;
    color: #ede871;
  }

} // .gradient-icon

.gradient-icon2 {
  .mainGrad12;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: initial;

  .ie &,
  .ie11 & {
    background: none;
    color: #72be9b;
  }

}

.mainGrad12 {
  @Grads : #72be9b;
  @GradsC: #51b38c;

  background: @Grads;
  background: -moz-linear-gradient(top,  @Grads 0%, @GradsC 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@Grads) color-stop(100%,@GradsC));
  background: -webkit-linear-gradient(top,  @Grads 0%, @GradsC 100%);
  background: linear-gradient(to bottom,  @Grads 0%,@GradsC 100%);
}


.linear { transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750); }
.ease { transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); }
.ease-in { transition-timing-function: cubic-bezier(0.420, 0.000, 1.000, 1.000); }
.ease-in-out { transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); }
.easeInQuad { transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530); }
.easeInCubic { transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); }
.easeInQuart { transition-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220); }
.easeInQuint { transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); }
.easeInSine { transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715); }
.easeInExpo { transition-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035); }
.easeInCirc { transition-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335); }
.easeInBack { transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045); }
.easeOutQuad { transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); }
.easeOutCubic { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
.easeOutQuart { transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000); }
.easeOutQuint { transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000); }
.easeOutSine { transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); }
.easeOutExpo { transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000); }
.easeOutCirc { transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000); }
.easeOutBack { transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275); }
.easeInOutQuad { transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); }
.easeInOutCubic { transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); }
.easeInOutQuart { transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); }
.easeInOutQuint { transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000); }
.easeInOutSine { transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); }
.easeInOutExpo { transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); }
.easeInOutCirc { transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860); }
.easeInOutBack { transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550); }