/*
Theme Name:  Salient
Description: Styles for the "Button" shortcode element.
*/

.n-sc-button[class*="gradient"] {
  background-color:transparent!important;
  opacity:1;
  box-shadow:none
}

.n-sc-button[class*="gradient"]:after,
.n-sc-button[class*="gradient"][class*="see-through"]:after{
   position:absolute;
    content:' ';
    top:-2%;
    left:-1%;
    width:101.5%;
    height:104%;
    transform-origin:right;
    -webkit-transform-origin:right;
    -ms-transform-origin:right;
    transform:scale(0,1);
    -webkit-transform:scale(0,1);
    -ms-transform:scale(0,1);
    -ms-transition:transform 0.38s cubic-bezier(.2,0.95,.4,0.95),background-size 0.38s ease;
    transition:transform 0.38s cubic-bezier(.2,0.95,.4,0.95),background-size 0.38s ease;
    -webkit-transition:transform 0.38s cubic-bezier(.2,0.95,.4,0.95),background-size 0.38s ease;
    z-index:-1
}
.n-sc-button[class*="see-through"][class*="gradient"]:after,
.n-sc-button[class*="gradient"]:hover:after {
   background-size:225% 100%!important;
    background-position:right!important
}

.n-sc-button[class*="see-through"][class*="gradient"]:hover:after,
.n-sc-button[class*="gradient"]:after {
  background-position:left!important;
  background-size:100% 100%!important
}

.n-sc-button[class*="see-through"][class*="gradient"]:hover:after{
   transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -ms-transform:scale(1,1);
    transform-origin:left;
    -webkit-transform-origin:left;
    -ms-transform-origin:left;
}

.n-sc-button[class*="gradient"]:after{
   transform:scale(1,1);
    -webkit-transform:scale(1,1);
    -ms-transform:scale(1,1);
    transform-origin:left;
    -webkit-transform-origin:left;
    -ms-transform-origin:left;
}

.n-sc-button[class*="gradient"]:hover:after{
   transform:scale(0,1);
    -webkit-transform:scale(0,1);
    -ms-transform:scale(0,1);
    transform-origin:right;
    -webkit-transform-origin:right;
    -ms-transform-origin:right;
}
.n-sc-button[class*="gradient"] .start,
.n-sc-button[class*="gradient"] .hover,
.n-sc-button[class*="see-through"][class*="gradient"] .start,
.n-sc-button[class*="see-through"][class*="gradient"] .hover{
   -ms-transition:transform 0.38s cubic-bezier(.2,0.95,.4,0.95),opacity 0.38s cubic-bezier(.2,0.95,.4,0.95);
    transition:transform 0.38s cubic-bezier(.2,0.95,.4,0.95),opacity 0.38s cubic-bezier(.2,0.95,.4,0.95);
    -webkit-transition:transform 0.38s cubic-bezier(.2,0.95,.4,0.95),opacity 0.38s cubic-bezier(.2,0.95,.4,0.95)
}
.n-sc-button[class*="gradient"] .start {
   animation:gradientTextHoverHover 0.38s;
    animation-timing-function:cubic-bezier(.2,0.9,.4,0.9);
    animation-fill-mode:forwards;
    display:inline-block
}
.n-sc-button[class*="gradient"] .hover{
   position:absolute;
    display:inline;
    left:0;
    animation:gradientTextHoverOff 0.38s;
    animation-timing-function:cubic-bezier(.2,0.9,.4,0.9);
    animation-fill-mode:forwards;
    text-align:center;
    width:100%;
    opacity:0;
    z-index:0
}
.n-sc-button[class*="gradient"]:hover .hover{
   animation:gradientTextHoverHover 0.38s;
    animation-timing-function:cubic-bezier(.2,0.9,.4,0.9);
    animation-fill-mode:forwards
}
.n-sc-button[class*="gradient"]:hover .start{
   animation:gradientTextHoverOff 0.38s;
    animation-timing-function:cubic-bezier(.2,0.9,.4,0.9);
    animation-fill-mode:forwards
}
.n-sc-button[class*="see-through"][class*="gradient"] .hover{
   position:absolute;
    display:inline;
    left:0;
    text-align:center;
    width:100%;
    opacity:0;
    z-index:100
}
.n-sc-button[class*="gradient"] .start.loading{
   animation:gradientTextHoverHover 0s
}
.light .n-sc-button[class*="gradient"]:hover .hover,
.light .n-sc-button[class*="see-through"][class*="gradient"]:hover .start,
.light .n-sc-button[class*="see-through"][class*="gradient"] .start {
   background:none!important;
    -webkit-background-clip:border-box;
    -webkit-text-fill-color:#fff;
    background-clip:border-box;
}
.light .n-sc-button[class*="gradient"].no-text-grad .start {
   color:#fff!important
}
.light .n-sc-button[class*="see-through"][class*="gradient"]:hover .start,
.light .n-sc-button[class*="see-through"][class*="gradient"] .start,
.light .n-sc-button[class*="gradient"] .start {
   opacity:1!important;
    animation:none!important
}
.light .n-sc-button[class*="see-through"][class*="gradient"] .hover,
.light .n-sc-button[class*="gradient"] .hover {
   opacity:0!important;
    animation:none!important
}
@keyframes gradientTextHoverHover {
    0%{
        transform:translateX(0px);
        opacity:0
   }
    70%{
        opacity:1
   }
    100%{
        transform:translateX(0px)!important;
        opacity:1
   }
}
@keyframes gradientTextHoverOff {
    0%{
        transform:translateX(0px);
        opacity:1
   }
    70%{
        opacity:0
   }
    100%{
        transform:translateX(0px)!important;
        opacity:0
   }
}
.n-sc-button[class*="gradient"].medium.has-icon{
   padding:7px 30px
}
.n-sc-button[class*="gradient"].large.has-icon{
   padding:12px 35px
}
.n-sc-button[class*="gradient"] i{
   opacity:1;
    right:24px;
    background:inherit;
    background-size:500% 100%;
    background-position:right
}
.n-sc-button[class*="gradient"].has-icon span{
   left:-18px
}
.n-sc-button[class*="gradient"].has-icon:hover span,
.n-sc-button[class*="gradient"].has-icon:hover i{
   -ms-transform:none;
    transform:none;
    -webkit-transform:none
}
.n-sc-button[class*="gradient"].jumbo i{
   opacity:1;
    font-size:20px;
    line-height:20px;
    width:20px;
    text-align:center;
    margin-top:-10px
}
.n-sc-button[class*="gradient"].extra_jumbo i{
    width:40px
}
.n-sc-button[class*="gradient"].has-icon.extra_jumbo span{
   left:-35px
}
.n-sc-button[class*="gradient"].has-icon.jumbo span{
   left:-16px
}
.n-sc-button[class*="gradient"].has-icon.large span{
   left:-14px
}
.n-sc-button[class*="gradient"].has-icon.medium span{
   left:-13px
}
.n-sc-button[class*="gradient"].has-icon.small span{
   left:-11px
}
.n-sc-button[class*="gradient"].jumbo .hover i{
   right:8px
}
.n-sc-button[class*="gradient"].extra_jumbo .hover i{
   right:19px
}
.n-sc-button[class*="gradient"].large .hover i{
   right:5px
}
.n-sc-button[class*="gradient"].medium .hover i{
   right:3px
}
.n-sc-button[class*="gradient"].small .hover i{
   right:7px
}
.n-sc-button[class*="gradient"].jumbo .start i{
   right:-32px
}
.n-sc-button[class*="gradient"].extra_jumbo .start i{
   right:-75px
}
.n-sc-button[class*="gradient"].large .start i{
   right:-32px
}
.n-sc-button[class*="gradient"].medium .start i{
   right:-30px
}
.n-sc-button[class*="gradient"].small .start i{
   right:-30px
}
.n-sc-button[class*="gradient"].small{
   padding:5px 14px
}
.n-sc-button[class*="gradient"].medium{
   border-width:3px;
    padding:7px 15px
}
.n-sc-button[class*="gradient"].large{
   border-width:3px;
    padding:12px 22px
}
.n-sc-button[class*="gradient"].jumbo{
   border-width:4px;
    padding:21px 40px
}
.n-sc-button[class*="gradient"].extra_jumbo{
   border-width:10px;
    padding:56px 90px
}
.n-sc-button[class*="gradient"] span{
   z-index:100
}