/* ==========================================================================
    Style Button
========================================================================== */
.cms-button-wrapper{
  display: inline-block;
  + .cms-button-wrapper{
	margin-left: 30px;
  }
  a.btn-secondary{
	&:hover{
	  background: $primary_color !important ;
	  border-color: $primary_color !important ;
	}

  }
  a:hover{
	background: $secondary_color !important;
	color: #fff !important;
	border-color: $secondary_color !important;
  }
}
.btn, button, .button, input[type="submit"] {
    @include border-radius(2px);
    font-size: 14px;
  line-height: 37px;
    margin: 0;
  height:39px;
    padding: 0 25px;
    position: relative;
  text-align: center;
  z-index: 2;
 background: $primary_color;
    @include transition(all 300ms linear 0ms);
    color: #fff;
    text-transform:uppercase;
  font-weight: 600;
  border: $primary_color solid 1px;
  @extend .custom-font-1;

  span{
	position: relative;
	z-index: 1;
  }
}
.btn:hover, button:hover, .button:hover, input[type="submit"]:hover,.btn:focus, button:focus, .button:focus, input[type="submit"]:focus {
	outline: medium none;
    text-decoration: none;
    background:$secondary_color;
  border-color: $secondary_color;
  color: #fff;
}

.btn {

	i {
	  line-height: 10px;
	  position: relative;
	  top: 1px;
	  z-index: 3;
	}
	&.btn-lg {
	  padding: 18.5px 35px;
	  min-width: 182px;
	}
	&.btn-md {
	  font-size: 15px;
	  letter-spacing: 0.075em;
	  color: #fff;
	  border-radius: 4px;
	  padding: 15px 22.5px;
	  border-color: darken($primary_color,0.05);
	}
	&.btn-normal{
	  padding: 17px 23px;
	  min-width: 172px;
	}
  	&.btn-md2{
	  padding: 18px 23px;
	  min-width: 170px;
	}
	&.btn-sm{
	  padding: 13.5px 15px;
	  min-width: 142px;
	}
  	&.btn-white{
	  padding: 19px 23px;
	  min-width: 170px;
	  background: #fff;
	  color: #222;
	  border: none;
	  text-align: center !important;
	}
  &.btn-default{
	box-shadow: 0 5px 7px rgba(#000,0.23);
	-webkit-box-shadow: 0 5px 7px rgba(#000,0.23);
  }
  &.btn-secondary{
background: $secondary_color;
	border-color: $secondary_color;
	&:hover{
	  background: $primary_color;
	  border-color: $primary_color;
	}

  }

  &.btn-gray{
	background: #c4c4c4;
	color: #ffffff;
	border-color: #c4c4c4;
	box-shadow: 0 5px 7px rgba(#000,0.23);
	-webkit-box-shadow: 0 5px 7px rgba(#000,0.23);
	&:hover{
	  border-color: $primary_color !important;
	  background: $primary_color !important;
	  color: #fff !important;
	}
  }

	&.btn-xlg {
	  padding: 21px 32.5px;
	  min-width: 192px;
	}
	&.btn-primary {
		&:hover,&:focus {
			background-color: #fff !important;
			color: $primary_color !important;
			border-color: $primary_color !important;
			outline: none;
		}
	}
	&.btn-default-alt {
	  background: transparent !important;
	  color: #fff;
	  border: #fff solid 2px;
	  line-height: 35px;
	  &:hover{
		border-color: $primary_color !important;
		color: $primary_color !important;
	  }
	}
  &.btn-trans{
	background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
	border: 1px solid #2b2e31;
	border-radius: 2px;
	color: #2b2e31;
	cursor: pointer;
	display: inline-block;
	font-size: 1.22rem;
	font-weight: normal !important;
	letter-spacing: 0.25px;
	line-height: normal;
	text-align: center;
	text-decoration: none;

  }
  &.btn-danger{
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
	&:hover{
	  color: #fff;
	  background-color: #c9302c;
	  border-color: #ac2925;
	}
  }
  &.btn-warning {
	color: #fff;
	background-color: #f0ad4e;
	border-color: #eea236;
	&:hover{
	  color: #fff;
	  background-color: #ec971f;
	  border-color: #d58512;
	}
  }
  &.btn-success {
	color: #fff;
	background-color: #5cb85c;
	border-color: #4cae4c;
	&:hover{
	  color: #fff;
	  background-color: #449d44;
	  border-color: #398439;
	}
  }
  &.btn-square{
	border-radius: 1px;
  }
  &.btn-outline{
	border: 2px solid #fff;
	background: transparent;
	color: #fff;
	text-shadow: none;
	border-radius: 0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	&:hover,&:focus {
	  background: $primary_color;
	  color: #fff;
	  border-color: $primary_color;
	}
  }
  &.btn-outline-rounded{
	border: 2px solid $primary_color;
	background: transparent;
	padding-top: 14px;
	padding-bottom: 14px;
	color: $primary_color;
	text-shadow: none;
	border-radius: 22px;
	@include box-shadow(none);
	&:hover,&:focus {
	  background: $primary_color;
	  color: #fff;
	  border-color: $primary_color;
	  &:before,
	  &:after{
		border-radius: 22px !important;
	  }
	}
  }
  &.btn-3d{
	@include box-shadow(0 5px darken($primary_color,0.1));
	color: darken($primary_color,0.1);
	border-color: darken($primary_color,0.1);
	&:hover{
	  @include box-shadow(0 3px darken($primary_color,0.1));
	  background: #fff;
	  color: darken($primary_color,0.1);
	  border-color: darken($primary_color,0.1);
	}
  }
  &.btn-3d2{
	@include box-shadow(0 5px darken($primary_color,0.1));
	border: 2px solid $primary_color;
	&:hover{
	  @include box-shadow(0 3px darken($primary_color,0.1));
	  background: $primary_color;
	}
  }
  &.btn-rounded{
	border-radius: 19px;
	&:hover{
	  background: $secondary_color;
	  text-shadow: none;
	}
	&.btn-3d2{
	 &:hover{
	   @include box-shadow(0 3px darken($primary_color,0.1));
	   background: $primary_color;
	   color: #fff;
	   border-color:$primary_color ;

	 }
	}

  }
  &.btn_color{
	span{
	  position: relative;
	  z-index: 2;
	}
	&:hover{
	  &:before{
		width: 100%;
		height: 100%;
		background: rgba(#000,0.2);
		top: 0;
		left: 0;
	  }
	}
  }
  &.btn-fill-from-top{
	span{
	  position: relative;
	  z-index: 1;
	}
	&:after {
	  width: calc(100% + 4px);
	  height: 14px;
	  bottom: -2px;
	  left: -2px;
	  background: $secondary_color;
	  border-bottom-left-radius:inherit ;
	  border-bottom-right-radius: inherit;
	  opacity: 0;

	}
	&:before{
	  display: none;
	}
	&:hover{
	  border-color: $secondary_color !important;
	  span{
		color: #fff !important;
	  }
	  &:after{
		height: calc(100% + 4px);
		border-radius: inherit;
		opacity: 1;
	  }
	}
  }
  &.btn-expand-horizontal{
	span{
	  position: relative;
	  z-index: 1;
	}
	&:before {
	  height: calc(100% + 4px);
	  width: 15px;
	  top: -2px;
	  left: -2px;
	  background: $secondary_color;
	  opacity: 0;

	}
	&:after {
	  height: calc(100% + 4px);
	 width: 15px;
	  top: -2px;
	 right: -2px;
	  background: $secondary_color;
	  opacity: 0;

	}
	&:hover{
	  border-color: $secondary_color !important;
	  span{
		color: #fff !important;
	  }
	  &:before{
		width: 53%;
		opacity: 1;
		background: $secondary_color;
	  }
	  &:after{
		width: 53%;
		opacity: 1;
	  }
	}
  }
  &.btn-fill-from-right{
	@extend .ft-helveticaneue-medium;
	span{
	  position: relative;
	  z-index: 1;
	}
	&:before {
	  height: calc(100% + 4px);
	  width: 50px;
	  top: -2px;
	  left: -2px;
	  background: $secondary_color;
	  opacity: 0;
	}
	&:after{
	  display: none;
	}
	&:hover{
	  border-color: $secondary_color !important;
	  span{
		color: #fff !important;
	  }
	  &:before{
		width: calc(100% + 4px);
		opacity: 1;
		background: $secondary_color;
	  }
	}
  }
  &.btn-expand-vertical{
		span{
		  position: relative;
		  z-index: 1;
		}
		&:before {
		  width: calc(100% + 4px);
		  height: 5px;
		  top: -2px;
		  left: -2px;
		  background: $secondary_color;
		  opacity: 0;

		}
		&:after {
		  width: calc(100% + 4px);
		  height: 5px;
		  bottom: -2px;
		  left: -2px;
		  background: $secondary_color;
		  opacity: 0;

		}
		&:hover{
		  border-color: $secondary_color !important;
		  span{
			color: #fff !important;
		  }
		  &:before{
			height: 60%;
			opacity: 1;
			background: $secondary_color;
		  }
		  &:after{
			height: 60%;
			opacity: 1;
		  }
		}
	  }
  &.btn-fill-from-left{
	span{
	  position: relative;
	  z-index: 1;
	}
	&:before {
	  height: calc(100% + 4px);
	  width: 52px;
	  top: -2px;
	  right: -2px;
	  background: $secondary_color;
	  opacity: 0;
	}
	&:after{
	  display: none;
	}
	&:hover{
	  border-color: $secondary_color !important;
	  span{
		color: #fff !important;
	  }
	  &:before{
		width: calc(100% + 4px);
		opacity: 1;
		background: $secondary_color;
	  }
	}
  }
  &.btn-expand-diagonal{
	overflow: hidden;
	span{
	  position: relative;
	  z-index: 1;
	}
	&:before {
	  height: 200px;
	  width: 200px;
	  top: -50px;
	  left: -186px;
	  @include transform(rotate(-20deg));
	  background: $secondary_color;
	  opacity: 0;

	}
	&:after {
	  height: 200px;
	  width: 200px;
	 bottom: -50px;
	  right: -186px;
	  @include transform(rotate(-20deg));
	  background: $secondary_color;
	  opacity: 0;

	}
	&:hover{

	  border-color: $secondary_color !important;
	  span{
		color: #fff !important;
	  }
	  &:before{
		width: 300px;
		opacity: 1;
		background: $secondary_color;
		top: -50px;
		left: -186px;
		height: 200px;
	  }
	  &:after{
		width: 300px;
		opacity: 1;
	  }
	}
  }
  &.btn-fill-from-bottom{
	span{
	  position: relative;
	  z-index: 1;
	}
	&:after {
	  width: calc(100% + 4px);
	  height: 13px;
	  top: -2px;
	  left: -2px;
	  background: $secondary_color;
	  opacity: 0;

	}
	&:before{
	  display: none;
	}
	&:hover{
	  border-color: $secondary_color !important;
	  span{
		color: #fff !important;
	  }
	  &:after{
		height: calc(100% + 4px);
		opacity: 1;
	  }
	}
  }
&.btn-facebook,
&.btn-google,
&.btn-twitter,
&.btn-likedin{
  background: none;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  padding: 0;
max-width: 120px;
  border: none;
  text-transform: none;
  height: auto;
  i{
	width: 29px;
	height: 29px;
	border-radius: 50%;
	background: #3c5b9c;
	color: #fff;
	line-height: 29px;
	text-align: center;
	padding: 0 !important;
	font-size: 14px;
	float: left;
	margin-right: 8px;

  }
  span{
	float: right;
	margin-top: 1px;
	width: calc(100% - 37px);
	display: inline-block;
	white-space: pre-wrap;
	text-align: left;
  }
  &:hover{
	background:none !important;
	border:none !important;
	color: $primary_color !important;
	i{
	  background: $primary_color;
	}
  }
}
  &.btn-google{
	i{
	  background: #f4511e;
	}
  }
  &.btn-twitter{
	i{
	  background: #2daae2;
	}
  }
  &.btn-likedin{
	i{
	  background: #0173b2;
	}
  }
}
.cms-button-wrapper a:nth-child(2) {
	margin-left: 18px;
}
a.purchase{
	@include border-radius(15px);
	padding: 10px 27px;
	margin-right: 12px;
}
a.see-more{
	@include border-radius(15px);
	padding: 8px 27px;
}
.rev_slider_wrapper {
	.btn {
		@include transition(all 300ms linear 0ms !important);
	}
}
.largeredbtn {
  font-size: 14px;
  line-height: 18px;
  border-radius: 5px;
  color: #fff !important;
  text-decoration: none;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  border: 2px solid #fff;
  background: transparent;
}
.btn-icon{
  width: 70px;
  height: 70px;
  border-radius: 2px;
  display: block;
  background: rgba(#1b1a1a,0.9);
  color: #fff;
  @include transition(all 300ms linear 0ms);
  text-align: center !important;
  span{
	font-size: 40px;
	line-height: 70px;
	background: -webkit-linear-gradient($primary_color, #efd631);
	background:    -moz-linear-gradient($primary_color, #efd631);
	background:     -ms-linear-gradient($primary_color, #efd631);
	background:      -o-linear-gradient($primary_color, #efd631);
	background:         linear-gradient($primary_color, #efd631);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  }
  &:hover{
	background: $primary_color;
	span{
	  background: none;
	  color: #fff;
	  -webkit-text-fill-color: #fff;
	}
  }
  &.style2{
	background: rgba(#fff,0.05);
	span{
	  background: none;
	  color: $primary_color;
	  -webkit-text-fill-color: $primary_color;
	}
	&:hover {
	  background: $primary_color;
	  color: #fff;
	  span{
		color: #fff;
		-webkit-text-fill-color: #fff;
	  }
	}
  }

}
.btn-icon2{
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: block;
  background: rgba(#fff,0.2);
  color: #fff;
  text-align: center !important;
  @include transition(all 300ms linear 0ms);
  i{
	font-size: 48px;
	line-height: 68px !important;
	float: left;
	width: 100% !important;
  }
  &:hover{
	background: $primary_color;
	i{
	  color: #fff;
	}
  }
}
.btn-icon-down{
  border: 2px solid #fff;
  cursor: pointer;
  color: #fff;
  width: 59px;
  height: 59px;
  display: block;
  text-align: center !important;
  border-radius: 50%;
  background: transparent;
  @include transition(all .7s ease-in-out);
  i{
	font-size: 29px !important;
	text-align: center;
	width: 100%;
	line-height: 55px !important;
	display: block;
  }
  &:hover{
	border-color: $primary_color;
	opacity: 1;
	color: $primary_color;
  }

}
.btn-icon-down2{
 i{
   font-size: 23px;
   &:hover{
	 color: #fff;
   }
 }
}
/* ==========================================================================
    End Style Button
========================================================================== */