/*

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

}