// Colors
$ht-main-color_name: 					'green';
$ht-main-color_variant-m200: 	'300';
$ht-main-color_variant-m100: 	'400';
$ht-main-color_variant: 			'500';
$ht-main-color_variant-p100: 	'600';
$ht-main-color_variant-p200: 	'700';
$ht-main-color_variant-p300: 	'800';

$ht-main-color-m100: 	material-color($ht-main-color_name, $ht-main-color_variant-m100);
$ht-main-color-m200: 	material-color($ht-main-color_name, $ht-main-color_variant-m200);
$ht-main-color: 			material-color($ht-main-color_name, $ht-main-color_variant);
$ht-main-color-p100: 	material-color($ht-main-color_name, $ht-main-color_variant-p100);
$ht-main-color-p200: 	material-color($ht-main-color_name, $ht-main-color_variant-p200);
$ht-main-color-p300: 	material-color($ht-main-color_name, $ht-main-color_variant-p300);

$ht-color: 			material-color("grey", "800");
$ht-bg-color:	 	material-color("grey", "100");

$facebook-color:	 	#3b5999;
$googleplus-color: 	#dd4b39;
$youtube-color:			#cd201f;
$twitter-color: 		#55acee;
$instagram-color: 	#e4405f;


// Borders
$ht-border_color: #eaeaea;
$ht-border: 1px solid $ht-border_color;


// Screens
$screen-xs:         480px !default;
$screen-xs-min:     $screen-xs !default;
$screen-sm:         768px !default;
$screen-sm-min:     $screen-sm !default;
$screen-md:         992px !default;
$screen-md-min:     $screen-md !default;
$screen-lg:         1200px !default;
$screen-lg-min:     $screen-lg !default;
$screen-xl: 				1440px;
$screen-xl-min:     $screen-xl !default;

$screen-xs-max:			($screen-sm-min - 1) !default;
$screen-sm-max:			($screen-md-min - 1) !default;
$screen-md-max:			($screen-lg-min - 1) !default;
$screen-lg-max:			($screen-xl-min - 1) !default;

// @media (min-width: $screen-xs-min){}
// @media (min-width: $screen-sm-min){}
// @media (min-width: $screen-md-min){}
// @media (min-width: $screen-lg-min){}
// @media (min-width: $screen-xl-min){}

body{
	font-family: 'Open Sans', sans-serif;
}
.ht-card{
	display: block;
}
.ht-depth-1{
	background-color: #fff;
	@include box-shadow(0 1px 2px 0 rgba(#000,.08));
}
.ht-bgcover{ 
	@include background-size(cover); 
	background-position: 50% 50%; 
}
.ht-rectangle{
	position: relative;
	display: block;
	&:after {
	  content: "";
	  display: block;
	  padding-bottom: 100%;
	}
	.ht-inner{
  	display: block;
		position: absolute;
  	top: 0; left: 0; right: 0; bottom: 0;
	}
	&.ratio-11{ &:after { 	padding-bottom: 100%; } }
	&.ratio-32{ &:after { 	padding-bottom: 66.6666%; } }
	&.ratio-23{ &:after {		padding-bottom: 150%; } }
	&.ratio-21{ &:after {		padding-bottom: 50%; } }
	&.ratio-12{ &:after { 	padding-bottom: 200%; } }
}
// margin
.ht-mg0{		margin: 0px 	!important; }

.ht-mgt0{		margin-top: 0px 	!important; }
.ht-mgt4{		margin-top: 4px 	!important; }
.ht-mgt8{		margin-top: 8px 	!important; }
.ht-mgt12{	margin-top: 12px 	!important; }
.ht-mgt16{	margin-top: 16px 	!important; }
.ht-mgt20{	margin-top: 20px 	!important; }
.ht-mgt24{	margin-top: 24px 	!important; }

.ht-mgb0{		margin-bottom: 0px 		!important; }
.ht-mgb4{		margin-bottom: 4px 		!important; }
.ht-mgb8{		margin-bottom: 8px 		!important; }
.ht-mgb12{	margin-bottom: 12px 	!important; }
.ht-mgb16{	margin-bottom: 16px 	!important; }
.ht-mgb20{	margin-bottom: 20px 	!important; }
.ht-mgb24{	margin-bottom: 24px 	!important; }

.ht-mgl0{		margin-left: 0px 		!important; }
.ht-mgl4{		margin-left: 4px 		!important; }
.ht-mgl8{		margin-left: 8px 		!important; }
.ht-mgl12{	margin-left: 12px 	!important; }
.ht-mgl16{	margin-left: 16px 	!important; }
.ht-mgl20{	margin-left: 20px 	!important; }
.ht-mgl24{	margin-left: 24px 	!important; }

.ht-mgr0{		margin-right: 0px 		!important; }
.ht-mgr4{		margin-right: 4px 		!important; }
.ht-mgr8{		margin-right: 8px 		!important; }
.ht-mgr12{	margin-right: 12px 	!important; }
.ht-mgr16{	margin-right: 16px 	!important; }
.ht-mgr20{	margin-right: 20px 	!important; }
.ht-mgr24{	margin-right: 24px 	!important; }


// padding
.ht-pd0{		padding: 0px 	!important; }
.ht-pd4{		padding: 4px 	!important; }
.ht-pd8{		padding: 8px 	!important; }
.ht-pd12{		padding: 12px 	!important; }
.ht-pd16{		padding: 16px 	!important; }
.ht-pd20{		padding: 20px 	!important; }
.ht-pd24{		padding: 24px 	!important; }

.ht-pdt0{		padding-top: 0px 		!important; }
.ht-pdt4{		padding-top: 4px 		!important; }
.ht-pdt8{		padding-top: 8px 		!important; }
.ht-pdt12{	padding-top: 12px 	!important; }
.ht-pdt16{	padding-top: 16px 	!important; }
.ht-pdt20{	padding-top: 20px 	!important; }
.ht-pdt24{	padding-top: 24px 	!important; }

.ht-pdb0{		padding-bottom: 0px 	!important; }
.ht-pdb4{		padding-bottom: 4px 	!important; }
.ht-pdb8{		padding-bottom: 8px 	!important; }
.ht-pdb12{	padding-bottom: 12px 	!important; }
.ht-pdb16{	padding-bottom: 16px 	!important; }
.ht-pdb20{	padding-bottom: 20px 	!important; }
.ht-pdb24{	padding-bottom: 24px 	!important; }

.ht-pdl0{		padding-left: 0px 	!important; }
.ht-pdl4{		padding-left: 4px 	!important; }
.ht-pdl8{		padding-left: 8px 	!important; }
.ht-pdl12{	padding-left: 12px 	!important; }
.ht-pdl16{	padding-left: 16px 	!important; }
.ht-pdl20{	padding-left: 20px 	!important; }
.ht-pdl24{	padding-left: 24px 	!important; }

.ht-pdr0{		padding-right: 0px 		!important; }
.ht-pdr4{		padding-right: 4px 		!important; }
.ht-pdr8{		padding-right: 8px 		!important; }
.ht-pdr12{	padding-right: 12px 	!important; }
.ht-pdr16{	padding-right: 16px 	!important; }
.ht-pdr20{	padding-right: 20px 	!important; }
.ht-pdr24{	padding-right: 24px 	!important; }

.ht-fz11{	font-size: 11px !important; }
.ht-fz12{	font-size: 12px !important; }
.ht-fz13{	font-size: 13px !important; }
.ht-fz14{	font-size: 14px !important; }
.ht-fz16{	font-size: 16px !important; }
.ht-fz18{	font-size: 18px !important; }
.ht-fz24{	font-size: 24px !important; }

.ht-feedback-page{
  .ht-form-control{
    height: 36px;
    padding: 7px 12px;
    line-height: 20px;
    font-size: 14px;
    border-color: #ddd;
    border-radius: 2px;
    @include transition(all .2s ease-in-out);
    // &.input-sm{
    //   height: 32px;
    //   padding: 6px 16px;
    //   font-size: 13px;
    //   line-height: 18px;
    // }
    &.form-lg{
      height: 40px;
      padding: 8px 12px;
      font-size: 16px;
      line-height: 22px;
    }
    &:focus{
      border-color: #ccc;
      outline: none;
    }
  }
  .ht-form-control,
  .ht-form-control:focus {
    color: $ht-color;
    box-shadow: 0 0 0 0 transparent !important;
    @include box-shadow(0 0 0 0 transparent);
  }
  .ht-btn{
    height: 36px;
    padding: 8px 16px;
    line-height: 18px;
    font-size: 14px;
    // background-color: transparent;
    border: 1px solid;
    border-radius: 2px;
    text-align: center;
    @include transition(all .2s ease-in-out);
    &, &:focus, &:active{
      outline: none;
    }
    .ht-icon{
      margin-top: -3px;
      font-size: 18px;
      line-height: 22px;
      display: inline-block;
      vertical-align: top;
    }
    i{
      font-size: 18px;
      line-height: 18px;
      display: inline-block;
      vertical-align: top;
    }
    &.no-bdrd{
      border-radius: 0;
    }
    &:active, &.active{
      outline: none;
      outline-offset: 0;
      @include box-shadow(0 0 0 0 transparent);
    }
    &.btn-sm{
      height: 32px;
      padding: 6px 16px;
      font-size: 13px;
      line-height: 18px;
    }
    &.btn-xs{
      height: 28px;
      padding: 4px 14px;
      font-size: 12px;
      line-height: 18px;
    }
    &.ht-btn-default{
      color: $ht-color;
      background-color: material-color('grey','50');
      border-color: $ht-border_color;
      // &:active{
      //   background-color: material-color('grey','200');
      // }
    }
    &.ht-btn-primary{
      color: #fff;
      background-color: $ht-main-color;
      border-color: transparent;
      i{
        color: #fff;
      }
      // &:active{
      //   background-color: $ht-main-color-p100;
      // }
      &.darker-100{
        background-color: $ht-main-color-p100;
        // &:active{
        //   background-color: $ht-main-color-p200;
        // }
      }
      &.darker-200{
        background-color: $ht-main-color-p200;
        // &:active{
        //   background-color: $ht-main-color-p300;
        // }
      }
    }
    &.ht-btn-accent{
      color: #fff;
      background-color: material-color('blue','500');
      border-color: transparent;
      i{
        color: #fff;
      }
      // &:active{
      //   background-color: material-color('blue','600');
      // }
    }
    &.ht-btn-grey{
      color: $ht-color;
      background-color: material-color('grey','200');
      border-color: material-color('grey','200');
      // &:active{
      //   background-color: material-color('grey','300');
      //   border-color: material-color('grey','300');
      // }
    }
    &.ht-btn-link{
      color: $ht-color;
      background-color: transparent;
      border-color: transparent;

    }
    &:active{
      opacity: .8;
    }
    &.btn-icon{
      padding-left: 0;
      padding-right: 0;
      i{
        display: inline-block;
        vertical-align: top;
        line-height: 18px;
        font-size: 18px;
        // color: material-color('grey','600');
      }
    }
    &.ht-btn-facebook{
      color: #fff;
      background-color: $facebook-color;
      border-color: transparent;
    }
    &.ht-btn-google{
      color: #fff;
      background-color: $googleplus-color;
      border-color: transparent;
    }
    .social-icon{
      display: inline-block;
      margin-right: 12px;
      padding-right: 12px;
      vertical-align: top;
      line-height: 18px;
      border-right: 1px solid rgba(#fff,.12);
    }
  }
  .feedback-wrapper{
    max-width: 1200px;
    margin: 0 auto;
  }

  .ht-section{
    display: block;
    margin: 0 6px 12px;
    padding: 12px;
    &.full-width{
      margin-left: -6px;
      margin-right: -6px;
    }
    .section-header{
      padding-bottom: 12px;
      margin-bottom: 16px;
      &.has-bdb{
        border-bottom: $ht-border;
      }
      .sh-title{
        margin-bottom: 0;
      }
      .sh-actions{
        a{
          display: inline-block;
          margin: 0 0 0 8px;
          padding: 2px 4px;
          line-height: 20px;
          font-size: 14px;
          color: material-color('grey','600');
          i{
            display: inline-block;
            vertical-align: top;
            line-height: 18px;
            font-size: 18px;
            color: material-color('grey','500');
          }
          span{
            margin-left: 4px;
            display: inline-block;
            line-height: 20px;
            font-size: 13px;
          }
          &:active{
            background-color: material-color('grey','200');
          }
        }
      }
    } 
  }
  .social-post-card{
    .news-header{
      margin: 0 0 12px;
      .news-title{
        margin: 0 0 5px;
        line-height: 24px;
        font-size: 18px;
        font-weight: 600;
        a{
          color: material-color('grey','900');
        }
      }
      .news-meta{
        font-size: 0;
        span{
          display: inline-block;
          vertical-align: top;
          line-height: 16px;
          font-size: 12px;
          color: material-color('grey','600');
          &:after{
            content: "\2022";
            display: inline-block;
            padding: 2px 7px 0;
            line-height: 14px;
            font-size: 10px;
            color: material-color('grey','400');
          }
          &:last-child{
            &:after{
              display: none;
            }
          }
        }
        a{
          color: material-color('blue','500');
          font-weight: 600;
        }
      }
    }
      
    .card-header{
      margin: 0 0 0;
      padding: 0 32px 0 56px;
      min-height: 44px;
      position: relative;
      .user-avatar{
        position: absolute;
        top: 0; left: 0;
        width: 44px;
        height: 44px;
        background-color: material-color('grey','400');
        border-radius: 50%;
      }
      .user-title{
        margin: 0 0 2px;
        padding: 2px 0 0;
        line-height: 22px;
        font-size: 16px;
        font-weight: 600;
      }
      .post-meta{
        margin: 0 0 0;
        line-height: 16px;
        font-size: 12px;
        color: material-color('grey','600');
      }
      .post-action{
        position: absolute;
        top: 4px; right: 0;
        button{
          margin: 0;
          padding: 0;
          height: 28px;
          width: 28px;
          font-size: 18px;
          text-align: center;
          color: material-color('grey','600');
          background-color: transparent;
          border: 0;
          i{
            display: inline-block;
            vertical-align: top;
            line-height: 24px;
          }
        }
        .dropdown-menu{
          li{
            a{
              .icon-left{
                display: inline-block;
                width: 16px;
                margin-right: 5px;
                text-align: center
              }
            }
          }
        }
      }
    }
    .card-content{
      margin-top: 12px;
      
      img{
        display: inline-block !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
      }
      .post-content{
        line-height: 21px;
        font-size: 14px;
        p{
          margin: 0 0 7px;
          // &:last-child{
          //  margin-bottom: 0;
          // }
        }
        .read-more{
          color: material-color('grey','400');
        }
      }
      .post-title{
        margin: 0 0 8px;
        line-height: 24px;
        font-size: 18px;
        font-weight: 600;
      }
      .post-attachment{
        margin: 12px 0 0;
        a{
          position: relative;
          display: block;
          img{
            display: block;
          }
          .ht-inner{
            background-color: material-color('grey','300');
          }
          &:active{
            opacity: .85;
          }
          .more-items{
            display: block;
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-color: rgba(#000,.5);
            .ht-text{
              position: absolute;
              top: 50%; left: 0; right: 0;
              margin-top: -40px;
              line-height: 80px;
              font-size: 48px;
              color: #fff;
              text-align: center;
            }
          }
        }
        &.has-multi-items{
          margin-left: -1px;
          margin-right: -1px;
          .single-item{
            float: left;
            padding: 1px;
          }
          &.has-02-items{
            .single-item{
              width: 50%;
            }
          }
          &.has-03-items{
            .single-item{
              width: 33.3333%;
              &:first-child{
                width: 66.6666%;
              }
            }

          }
          &.has-04-items{
            .single-item{
              width: 33.3333%;
              &:first-child{
                width: 100%;
              }
            }
          }
          &.has-05-items{
            .single-item{
              width: 33.3333%;
              &:first-child,
              &:nth-child(2){
                width: 50%;
              }
            }
          }
          &.has-06-items{
            .single-item{
              width: 33.3333%;
            }
          }
          &.has-07-items{
            .single-item{
              width: 25%;
              &:first-child,
              &:nth-child(2),
              &:nth-child(3){
                width: 33.3333%;
              }
            }
          }
        }
      }
      .post-action-count{
        margin-top: 12px;
        line-height: 16px;
        font-size: 0;
        color: material-color('grey','600');
        span, a{
          display: inline-block;
          font-size: 12px;
          vertical-align: top;
          line-height: 16px;
        }
        .like-count{
          i{
            display: inline-block;
            vertical-align: top;
            line-height: 15px;
            margin-right: 5px;
            width: 15px;
            font-size: 8px;
            text-align: center;
            color: #fff;
            background-color: material-color('blue','500');
            border-radius: 7px;
          }
        }
        .comment-share-count{
          span{
            &:after{
              content: "\2022";
              display: inline-block;
              vertical-align: top;
              padding: 2px 4px 0;
              line-height: 14px;
              font-size: 10px;
              color: material-color('grey','400');
            }
            a{
              color: material-color('grey','600');
            }
            &:last-child{
              &:after{
                display: none;
              }
            }
          }
        }
      }
    }
    .card-footer{
      margin-top: 10px;
      margin-bottom: -8px;
      padding: 8px 0 0;
      border-top: $ht-border;
      @include display-flex;
      .single-action{
        @include flex-grow(1);
        @include flex-basis(0);
        i{
          color: material-color('grey','500');
        }
      }
      .post-action{
        display: block;
        padding: 4px 0;
        height: 28px;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        color: material-color('grey','600');
        i{
          display: inline-block;
          position: relative;
          top: -1px;
          margin: 0 4px 0 0;
          font-size: 14px;
        }
        &.active{
          box-shadow: 0 0 0;
          &,i{
            color: material-color('blue','500');
          }
        }
      }
    }
    .post-comments{
      margin: 12px -12px 0;
      padding: 12px 0 0;
      border-top: $ht-border;
      .single-comment{
        position: relative;
        padding: 0 0 0 40px;
        min-height: 32px;
        .user-avatar{
          position: absolute;
          top: 0; left: 0;
          width: 32px;
          height: 32px;
          background-color: material-color('grey','300');
          border-radius: 50%;
        }
        .comment-main{
          padding: 6px 10px;
          background-color: material-color('grey','100');
          border-radius: 12px;
          .user-title{
            margin: 0 0 3px;
            font-size: 12px;
            font-weight: 600;
            line-height: 16px;
            color: material-color('grey','900');
          }
          .comment-content{
            font-size: 13px;
            line-height: 18px;
            color: material-color('grey','700');
          }
        }
        .comment-meta{
          margin-top: 2px;
          padding: 3px 10px;
          line-height: 16px;
          font-size: 0;
          span{
            display: inline-block;
            vertical-align: top;
            line-height: 16px;
            font-size: 11px;
            color: material-color('grey','500');
            &:after{
              content: "\2022";
              padding: 2px 5px 0;
              line-height: 14px;
              font-size: 8px;
              line-height: 14px;
              color: material-color('grey','300');
            }
            &:last-child:after{
              display: none;
            }
            a{
              font-weight: 600;
              color: material-color('grey','600');
            } 
          }
        }
        .comment-attachment{
          margin-top: 3px;
          a{
            display: inline-block;
            vertical-align: top;
          }
          img{
            display: inline-block;
            vertical-align: top;
            max-width: 100%;
            max-height: 128px;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #eee;

          }
        }
        .add-comment-form{
          position: relative;
          .form-group{
            position: relative;
            margin: 0 32px 0 0;
            .form-control{
              padding: 6px 12px;
              padding-right: 38px;
              line-height: 18px;
              font-size: 13px;
              border-color: #ddd;
              resize: none;
              background-color: material-color('grey','50');
              border-radius: 12px;
              overflow: hidden;
              &:focus{
                background-color: #fff;
                border-color: #ddd;
              }
            }
          }
          .reply-add-file{
            display: block;
            position: absolute;
            bottom: 0; right: 0;
            margin: 0;
            height: 32px;
            width: 36px;
            text-align: center;
            border-radius: 12px;
            cursor: pointer;
            i{
              display: inline-block;
              vertical-align: top;
              font-size: 14px;
              line-height: 32px;
              color: material-color('grey','500');
            }
          }
          .reply-submit{
            display: block;
            position: absolute;
            top: 0; right: -36px;
            height: 32px; width: 32px;
            font-size: 18px;
            text-align: center;
            background-color: transparent;
            border: 0;
            i{
              display: inline-block;
              line-height: 32px;
              vertical-align: top;
              color: material-color('blue','500');
            }
          }
          .image-preview{
            margin-top: 5px;
            border-radius: 12px;
            .single-image{
              display: inline-block;
              vertical-align: top;
              position: relative;
              border-radius: 8px;
              overflow: hidden;
              img{
                display: block;
                max-width: 100%;
                max-height: 96px;
              }
              .delete-file{
                display: block;
                position: absolute;
                top: 0; right: 0;
                line-height: 22px;
                width: 24px;
                text-align: center;
                color: material-color('grey','50');
                text-shadow: 0 1px 2px rgba(#000,.24);
                i{
                  display: inline-block;
                  vertical-align: top;
                  line-height: 22px;
                }
              }
            }
          }
          &.small-size{
            .form-control{
              padding: 5px 10px;
              font-size: 13px;
            }
            .reply-add-file{
              height: 30px;
              width: 32px;
              i{
                line-height: 30px;
              }
            }
            .reply-submit{
              top: 0; right: -34px;
              height: 30px; width: 30px;
              font-size: 15px;
              i{
                line-height: 30px;
              }
            }
            .image-preview{
              margin-top: 3px;
              border-radius: 12px;
              .single-image{
                img{
                  max-height: 80px;
                }
              }
            }
          }
        }
      }
      .load-more-reply{
        margin: 4px 0 8px 50px;
        font-size: 12px;
        a{
          color: material-color('blue','500');
        }
      }
      .load-reply{
        margin-top: 4px;
        padding-top: 2px;
        a{
          line-height: 20px;
          font-size: 12px;
          color: material-color('grey','600');
        }
      }
      hr{
        margin: 12px;
      }
      ul{
        list-style: none;
        margin: 0;
        padding: 0;
        &.main-ul{
          margin: 0 12px ;
          // padding: 12px 0 0;
          // border-top: $ht-border;
          & > li{
            margin-bottom: 12px;
            &:last-child{
              margin-bottom: 0;
            }
          }
        }
        &.inner-ul{
          margin-left: 40px;
          & > li{
            margin-bottom: 8px;
            &:last-child{
              margin-bottom: 0;
            }
          }
          .single-comment{
            padding: 0 0 0 32px;
            min-height: 24px;
            .user-avatar{
              width: 24px;
              height: 24px;
            }
            &.has-reply-form{
              .user-avatar{
                top: 3px;
              }
            }
          }
        }
      }
    }
  }

  .social-post-form{
    hr{
      margin: 8px 0;
    }
    .form-group{
      margin-bottom: 8px;
      position: relative;
      .user-avatar{
        position: absolute;
        top: 0; left: 0;
        width: 44px;
        height: 44px;
        background-color: material-color('grey','300');
        border-radius: 50%;
      }
      .post-content-input{
        margin: 0 0 12px;
        padding: 0 0 0 56px;
        width: 100%;
        min-height: 48px;
        line-height: 19px;
        font-size: 14px;
        border-color: transparent;
        resize: none;
      }
    }
    .attachment-preview{
      padding: 2px 0;
      margin: 12px 0 4px;
      font-size: 0;
      .single-item{
        display: inline-block;
        vertical-align: top;
        position: relative;
        width: 96px; height: 96px;
        margin: 0 8px 8px 0;
        background-color: material-color('grey','300');
        border: $ht-border;
        .delete-item-btn{
          display: block;
          position: absolute;
          top: 0; right: 0;
          height: 20px;
          width: 20px;
          line-height: 20px;
          text-align: center;
          color: material-color('grey','50');
           text-shadow: 0 1px 2px rgba(#000,.24);
          i{
            display: inline-block;
            vertical-align: top;
            line-height: 20px;
            font-size: 16px;
          }
          &:active{
            background-color: material-color('red','500');
          }
        }
      }
    }
    .add-attachment-btn{
      margin-top: 6px;
      border-radius: 14px;
    }
  }


  .ht-login-section{
    margin: 24px 0 24px;
    padding: 24px;
    background-color: #fafafa;
    border: 2px dashed #ddd;
    .ht-title{
      margin: 0 0 8px;
      line-height: 30px;
      font-size: 24px;
      font-weight: 600;
      color: #333;
    }
    .ht-subtitle{
      margin: 0 0 0;
      font-size: 14px;
      color: #777;
    }
    .btn-wrapper{
      margin: 20px 0 0;
      text-align: center;
      a{
        display: inline-block;
        max-width: 320px;
      }
    }
  }
  $facebook-color:    #3b5999;
  $googleplus-color:  #dd4b39;
  .ht-btn-facebook{
    color: #fff;
    background-color: $facebook-color;
    border-color: transparent;
    &:hover{
      color: #fff;
      background-color: darken($facebook-color,4%);
    }
    &:focus,&:active{
      color: #fff;
    }
  }
  .ht-btn-google{
    color: #fff;
    background-color: $googleplus-color;
    border-color: transparent;
    &:hover{
      color: #fff;
      background-color: darken($googleplus-color,4%);
    }
    &:focus,&:active{
      color: #fff;
    }
  }
  .ht-social-icon-in-btn{
    display: inline-block;
    margin-right: 12px;
    padding-right: 12px;
    vertical-align: top;
    line-height: 18px;
    border-right: 1px solid rgba(#fff,.12);
  }
}