@import url("../css/fontawesome-all.min.css");
@font-face{font-family:"Font Awesome 5 Pro";font-style:normal;font-weight:300;font-display:auto;src:url(../fonts/fa/fontawesome/webfonts/fa-light-300.eot);src:url(../fonts/fa/fontawesome/webfonts/fa-light-300d41d.eot?#iefix) format("embedded-opentype"),url(../fonts/fa/fontawesome/webfonts/fa-light-300.woff2) format("woff2"),url(../fonts/fa/fontawesome/webfonts/fa-light-300.woff) format("woff"),url(../fonts/fa/fontawesome/webfonts/fa-light-300.ttf) format("truetype"),url(../fonts/fa/fontawesome/webfonts/fa-light-300.svg#fontawesome) format("svg")}
    @font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:auto;src:url(../fonts/fa/fontawesome/webfonts/fa-brands-400.eot);src:url(../fonts/fa/fontawesome/webfonts/fa-brands-400d41d.eot?#iefix) format("embedded-opentype"),url(../fonts/fa/fontawesome/webfonts/fa-brands-400.woff2) format("woff2"),url(../fonts/fa/fontawesome/webfonts/fa-brands-400.woff) format("woff"),url(../fonts/fa/fontawesome/webfonts/fa-brands-400.ttf) format("truetype"),url(../fonts/fa/fontawesome/webfonts/fa-brands-400.svg#fontawesome) format("svg")}




html,body{max-width: 100vw; }
      h3{color:#004e78}
      body{background-color: #fff;overflow-x: hidden;}

     
        .bgheader{background-color: #42648d; width: 100%; height: 13px;position: fixed;top: 0;z-index: 1;}

        header.port-header{ display: flex; justify-content: space-between;  padding: 13px; width: 85%; height:60px; background-color: #fff; box-shadow: 0px 5px 5px rgba(0,0,0,.2);  margin: 0 auto;
          border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; z-index: 9990;
        }
          a.open-port-panel-nav{ display: none; color:white; font-size:1.7em;}
        main.port-main{ 
          display: flex;
          flex-wrap: wrap;

          padding-top: 0px;
        

      }
      @media(max-width: 592px){
        .bgheader{display: none}
        main.port-main{

          flex-wrap: nowrap;
        }
        

      }
        
        
        


        section.panel{ position: relative;  z-index: 9989}


        nav.port-panel-nav{
          position: relative;
          
          margin-left: -80vw;
          background-color: #004e78;
          height: 100%;
          width: 80vw;

        }
          nav.port-panel-nav.o ul{/*display:block;*/ box-shadow: 10px 0px 10px rgba(0,0,0,0.2); padding-top: 35px; padding-bottom: 35px}
          nav.port-panel-nav ul:not(nav.port-panel-nav ul li ul){margin: 0; padding: 0px;list-style: none; 
            width: 80%; height: calc(100vh - 63px); position: fixed; top: 48px; padding-bottom: 20px; overflow-y: auto; overflow-x: hidden; 
            background-color: #f5f5f5;
            box-sizing: border-box;
            border-right: 1px solid #004e78;
            border-top: 1px solid #42648d;
            background-color: #fff;
          }
          nav.port-panel-nav ul li{display: block; border-bottom:1px solid #ccc; }
           nav.port-panel-nav ul li a{ display:block; padding:10px; text-decoration: none; color:#004e78;  }
           nav.port-panel-nav ul li a i{float: right; margin-top: 5px}
          nav.port-panel-nav ul li ul{/*display: none;*/ 
            overflow-x: hidden;
            overflow-y: scroll;
            margin: 0; padding: 0;
            position: absolute; top:0px; 
            width:100%;min-height: 100%; right: -100%;
            background-color: #f5f5f5
          }
          nav.port-panel-nav ul li ul li a{ display:block; background-color: #004e78;color:white;}

          nav.port-panel-nav ul h5{padding: 3px 10px ; display: flex; align-items: center; width: 80vw; top: 49px; background-color: #004e78; color:white; margin: 0 0 1px 0; position: relative; }
          nav.port-panel-nav ul h5 a{ padding:0 7px !important; margin-right: 10px!important; width:28px; height: 28px; text-align: center;   background-color: #fff !important; color:#004e78 !important; border-radius: 3px;}
          
          nav.port-panel-nav ul li ul li{border-bottom-color: #dadce2}
          nav.port-panel-nav ul li ul li:nth-child(even) a{
            background-color: #fff;color:#004e78;
          }
          nav.port-panel-nav ul li ul li:nth-child(odd) a{
            background-color: #fff;color:#004e78;
          }
          nav.port-panel-nav ul h5 a i{text-align: center; margin-left: -10px}
a.open-port-panel-cart{color:white;font-size:1.5em;}
a.open-port-panel-cart:hover{color: #004e78}
          @media(max-width: 592px){
            a.open-port-panel-nav{display: inline;/* margin: 3px 0 0 10px*/}
           
           .port-panel-nav{}
          }
          .fixed-top-nav{top: 66px}



          header.port-header div.logo a{text-decoration: none; color:white; font-size:1.3em; /*background-color: #fc0*/}
          header.port-header div.logo a img{margin-top: -5px}
          @media(max-width: 592px){
            header.port-header{height: 48px; padding: 5px 10px; width: 100% /*94 idi*/}
            header.port-header div.logo a img{ max-height: 38px !important; margin-top: 0px}
          }
          nav.port-main-nav{

            /*width: 100%; display:table;  background-color: #fc0*/    font-family: 'SF Display Heavy', sans-serif;
    letter-spacing: -0.6px;
          }
          div.cartnav{  margin-left: -120px;}          
nav.port-main-nav *{
  transition: all 250ms ease-in-out;
}
           nav.port-main-nav ul{padding-bottom: 0px; margin: 0; padding: 0 0px; position: relative; }
           nav.port-main-nav ul li{display: inline;}
          /* nav.port-main-nav ul li ul{
            max-height: 80vh;
            overflow-x: hidden;
            overflow-y: auto;
           }*/
           nav.port-main-nav ul li a{padding:7px !important; background-color:#fff;  }
          nav.port-main-nav ul:not(nav.port-main-nav ul li ul){margin-top:10px }
          nav.port-main-nav ul li:not(nav.port-main-nav ul li ul li) { padding: 10px }
          nav.port-main-nav ul li.act:not(nav.port-main-nav ul li ul li.act){
            border-radius: 3px;
            /*border-top-right-radius: 4px;
            border-top-left-radius: 4px;*/
          background-color: #fff;
          }
          nav.port-main-nav ul li ul:not(nav.port-main-nav ul li ul li ul){
margin-top: 7px;
            
          }
          nav.port-main-nav ul li ul{
            box-shadow: 3px 5px 7px rgba(0,0,0,0.2);
          }
          
          nav.port-main-nav ul li:not(nav.port-main-nav ul li ul li){  position: relative; display: inline; margin-right: 0px;}

          /*nav.port-main-nav ul li:hover ul:not(nav.port-main-nav ul li ul li ul){display: block;}
          nav.port-main-nav ul li ul li{display: inline-block;}
          nav.port-main-nav ul li ul li:hover ul{display: block;}
*/
nav.port-main-nav ul li ul.o li ul{display: none;}
nav.port-main-nav ul li ul.o li.act ul:not(nav.port-main-nav ul li ul.o li.act ul li ul){display: block; margin: 0; padding: 0 0px; background-color: #fff;}

          nav.port-main-nav ul li ul{display: none; position: absolute; left: 0; background-color: #004e78; min-width: 250px; }
          nav.port-main-nav ul ul h5{display: none;}
          nav.port-main-nav ul li ul li{ position: relative;display: block; border-bottom: 1px solid #082e6c}
          nav.port-main-nav ul li ul li a,
          nav.port-main-nav ul li ul li ul li a{display: block;padding:2px 7px; }
nav.port-main-nav ul li ul li.act,
nav.port-main-nav ul li ul li a:hover{background-color: #004e78; color:#fff;}
          /*nav.port-main-nav ul li ul li:hover,
          nav.port-main-nav ul li ul li ul li:hover{background-color: #fff; }
          nav.port-main-nav ul li ul li:hover a,
          nav.port-main-nav ul li ul li ul li:hover a{color:#004e78;}*/
/*nav.port-main-nav ul li ul li ul{max-height: 80vh; overflow-y: auto; position: absolute;}*/
          nav.port-main-nav ul li ul li ul{position: absolute; left: 100%; top: 0}
          nav.port-main-nav ul li a{text-decoration: none; color:#004e78;}
          nav.port-main-nav ul li a i:not(nav.port-main-nav ul li ul li a i){transform:rotate(90deg); margin-left: 10px; 
            font-size: .600em;
            
            font-weight: lighter !important;
          }
          nav.port-main-nav ul li ul li a i{float: right; margin-top: 3px }

          header.port-header i.fa{ 
          -webkit-text-stroke: 2px #004e78;
          }
          header.port-header ul li ul li.act i.fa:not(header.port-header ul li ul li ul li i.fa),
          header.port-header ul li ul li ul li.act i.fa{ 
          -webkit-text-stroke: 1px #6cb530;
          }
          nav.port-main-nav ul li.act i.fa:not(nav.port-main-nav ul li ul li i.fa){-webkit-text-stroke: 1px #6cb530;}


          @media(min-width:592px) and (max-width: 991px){
            nav.port-main-nav ul li a span:not(.fa){display: none;}
            nav.port-main-nav ul{margin-top: 0px !important;}

            nav.port-main-nav ul li:not(nav.port-main-nav ul li ul li){margin-right: 11px;  }
            nav.port-main-nav ul li a:not(nav.port-main-nav ul li ul li a){
              font-size: 1.5em
            }
          }



.port-container{padding-left: 25px; padding-right: 25px; padding-bottom: 60px; }
.port-content{background-color: #fff; border-radius:7px; }

.port-nav{position: relative; height: 100vh;  }
.port-prolist{
  position: relative;
  z-index: 9;
/*    position: fixed;
    top: 100px;
    max-height: 80vh;
    width: 250px; 
    overflow-y: auto;*/
  }
  .product_list{ position: relative; z-index: 8}
@media(max-width: /*592px*/ 768px){

  .port-nav{overflow-y: hidden; /*height:40px;*/ display: flex; height: 75px;}
  .port-nav ul.port-prolist{ display: flex; margin: 0; padding: 0; width:auto; height: 70px; background-color: #fff; }
  .port-nav ul.port-prolist li{ float: left; display: inline; min-width: 250px; margin-right: 10px; background-color: /*#fff*/;  }
  .port-nav ul.port-prolist li a{display: block; width:100%; }
 
    ul.port-prolist li.parent{background-color: transparent;}
    ul.port-prolist li.parent a:not(ul.scub li a){
      display:none;
    }
    ul.port-prolist li ul.scub li.parent a:not(ul.port-prolist li ul.scub li.parent ul.scub li a){display: none;}
  }
ul.sub.scub{
  display: flex;
  height: 50px
}



 section.panel-right{ position: fixed;  top: 0; right: -300px;  height: 100%; width: 300px;  background-color: #fff;  z-index: 9991; }
      section.panel-right.o{box-shadow: -40px 0 40px rgba(0,0,0,.3);}
      section.panel-right h5.panel-title{ padding: 0 0 0 20px ; height: 38px; line-height: 38px; background-color: #dadce2; color:#004e78; }
      section.panel-right h5.panel-title a{float: right; width: 38px; text-align: center; background-color:white; color:#004e78;}
      section.panel-right nav.port-panel-cart{
        position: relative;
        margin: 0;
        padding: 0;
        top: -4px;
        height: 100%;
        /*background-color: #fc0;*/
/*        overflow-y: auto;*/

      }

  body{
    scrollbar-width: auto;
    scrollbar-color: #0f57a3 #dadce2;
  }
  /* Chrome, Edge, and Safari */
  body::-webkit-scrollbar {
    width: 16px;
  }
  body::-webkit-scrollbar-track {
    background: #dadce2;
  }
  body::-webkit-scrollbar-track:hover{
    background: #004e78;
  }
  body::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 10px;
    border: 1px solid #dadce2;
  }
  body::-webkit-scrollbar-thumb:hover{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
  }

   nav.port-panel-cart ul{
    scrollbar-width: auto;
    scrollbar-color: #dadce2 #fff;
  }
  /* Chrome, Edge, and Safari */
   nav.port-panel-cart ul::-webkit-scrollbar {
    width: 9px;
  }
   nav.port-panel-cart ul::-webkit-scrollbar-track {
    background: #fff;
  }


/*nav.port-panel-cart ul::-webkit-scrollbar-track:hover*/ 
nav.port-panel-cart ul::-webkit-scrollbar-thumb:hover{
    background: #ccc;
  }

   nav.port-panel-cart ul::-webkit-scrollbar-thumb {
    background-color: #dadce2;
    border-radius: 10px;
    border: 1px solid #fff;
  }

      section.panel-right nav.port-panel-cart ul{

        position: relative;
        margin: 0;
        padding: 10px 5px  10px  5px;
        top: 0;
        height: calc(100% - 150px);
        /*background-color: #fc0;*/
        overflow-y: auto;        
      }
      section.panel-right nav.port-panel-cart .top-shadow:before{
        content: '';
        position:absolute;
        top:-3px;
        left:0;
        width: calc(100% - 9px);
        height:30px;
        background-image:linear-gradient(180deg, #ffffff 0%, #ffffff60 60%, #ffffff00 100%);
        z-index: 9999;
        /*box-shadow:  0px 40px 60px rgba(0,0,0,.7);*/
      }

      section.panel-right nav.port-panel-cart .bottom-shadow:before{
        content: '';
        position:absolute;
        bottom:150px;
        left:0;
        width: calc(100% - 9px);
        height:30px;
        background-image:linear-gradient(0deg, #fff 0%, #ffffff60 60%, #ffffff00 100%);
        z-index: 9999;
        /*box-shadow:  0px 40px 60px rgba(0,0,0,.7);*/
      }

      section.panel-right nav.port-panel-cart ul li{
        display: flex;
        padding: 3px; border-bottom:1px solid #dadce2
      }
      section.panel-right nav.port-panel-cart ul li:nth-child(odd){
        background-color: #f5f5f5;
      }
      section.panel-right nav.port-panel-cart ul li figure{
        width:40%;
      }


picture.x01 img{ border-radius: 4px; }
picture.x01 img{}

      section.panel-right nav.port-panel-cart ul li a.pn{
        
      }
      div.pu{position: relative; width: 98px; height: 28px; display: flex; margin-bottom: 3px}
      .pu input.form-control{position: relative; margin-left:-3px; z-index: 1; height: 28px; padding: 0 5px;  
        border-top-right-radius:    6px !important;
        border-bottom-right-radius: 6px !important;
      }
      .pu button.m{display: none;
        
      }
        .pu button.r{ position: relative; background-color: red; color:#fff;}

      .pu button.p{ right: 0; margin-left: -10px; position: absolute; z-index: 2;
        border-top-right-radius:    3px !important;
        border-bottom-right-radius: 3px !important;
      }
      .pu button.m, .pu button.r {
        border-top-left-radius:    3px !important;
        border-bottom-left-radius: 3px !important; 
        z-index: 2}

      .pu button.p:hover,.pu button.m:hover{background-color: #004e78; color:#fff;}
      
      .pu button{border:1px solid #dadce3;  height: 31px;}
      .pd .pu{float: left;}
      .pd .pn{float: left;width: 100%;}
      .pd .u{float: left;}

div.inline-group span.badge.bg-danger,
div.inline-group span.badge.bg-success{border-top-right-radius: 0px !important; border-bottom-right-radius:0px !important }
div.inline-group span.badge.bg-dark{border-top-left-radius: 0px !important; border-bottom-left-radius:0px !important }


      section.panel-right .cart-total{
        padding:7px 20px 0 0;
        width: 100%;
        height: 60px;
        text-align: right;
        background-color: #f5f5f5;
      }
      section.panel-right .go-to{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 1px;
        padding: 10px 0;
        background-color: #dadce2;
      }
      @media(max-width: 592px){
        section.panel-right{right: -80vw; width: 80vw; }
      }

      @media(max-width: 592px){
        section.panel-right .go-to a{
          margin-right: 3px;
          font-size:.775em;
        }
      }
          
      footer.port-footer{position:relative;}

footer.port-footer{
    /*border-top: 1px solid #004e78;*/
    position: fixed; bottom: 0;
    width: 100%;
    height: 48px;
    z-index: 9988;  
  }
  footer.port-footer nav.port-mf-nav{display: none;}
  footer.port-footer nav.port-mf-nav ul{ display: flex; margin: 0; padding: 0 0px; list-style: none;box-shadow: 0px -10px 24px rgba(0,0,0,0.3)}
  footer.port-footer nav.port-mf-nav ul li{   display: inline; width: 20%; height: 100%; margin: 0; padding: 0; text-align: center;}
  footer.port-footer nav.port-mf-nav ul li a{ position: relative; display: block;  height: 80px; font-size:1.3em; background-color: #fff;  color:#004e78;  text-align: center; /*border-radius: 4px;  border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;*/ border-left: 1px solid #dadce2; border-right: 1px solid #fff;/**/ }
  footer.port-footer nav.port-mf-nav ul li:first-child a{border-left: 0px}
  footer.port-footer nav.port-mf-nav ul li a span{ width: 100%; float: left; margin-top: -5px; font-size:.545em; /*bottom: 10px; position: absolute;*/}
/*  footer.port-footer nav.port-mf-nav ul li:nth-child(2) a{ border-top-right-radius: 28px}
  footer.port-footer nav.port-mf-nav ul li:nth-child(3) a{ border-radius: 48px}
  footer.port-footer nav.port-mf-nav ul li:nth-child(4) a{ border-top-left-radius: 28px}*/
@media(max-width: 592px){

  footer.port-footer nav.port-mf-nav{ display: block;  }
}

.btn.plus,.btn.minus{background-color: #1c1c1c !important; color:#fff !important; width:35px;}
.btn.plus:hover,.btn.minus:hover{ outline: none !important; box-shadow: inset 0px 21px 20px rgba(255,255,255,.7), 0px 0px 0px rgba(0,0,0,0); border-color:#1c1c1c;}
.btn.plus:focus,.btn.plus:active,.btn.minus:focus,.btn.minus:active{box-shadow: inset 0px 0px 20px rgba(255,255,255,.4), 0px 0px 0px rgba(0,0,0,0) !important; outline: none;}






.port-prolist{list-style: none;}

            //.port-prolist li:first-child ul.sub{display: block;}
            ul.sub{display: none;list-style: none; padding-left: 20px; }
            ul.sub.active{display: block;}
            .port-prolist li {border-bottom: 1px solid #ccc;}
            .port-prolist li:last-child{border-bottom: none;}
            .port-prolist li a{ display: block; padding: 7px 0px 7px 5px;  text-decoration: none; position: relative;}
            .port-prolist li a.act{background-color: #f5f5f5}
            .port-prolist li a i{position: absolute; right: 7px; top: calc(50% -  9px) }
            .port-prolist li ul{margin:3px  0px 3px 0px;}
            .port-prolist li ul li a{ display: block; background-color:transparent; }
            .port-prolist li a img{width:40px; height: 40px; border:1px solid #ccc; border-radius: 4px; margin-right: 7px;}
            



.port-panel-cart ul li{transition-duration: 1s}

            div.port-product{ position: relative;/* background-color: #fc0;*/   }
            
            h3.port-product-name{ position: absolute; width: 100%; background-color: rgba(255,255,255,0.9);  opacity:1;padding:20px 10px; text-align: center;z-index: 3; bottom: 0 }
            h3.port-product-name a{color:#42648d; }
            h3.port-product-name a:hover{color:#1c1c1c; }
            div.port-product:hover h3.port-product-name {margin:auto; display: flex ; justify-content: center; align-items: center;  z-index: 3; border-radius: 4px; opacity: 0; }
            div.port-product-actions{ margin-top: 25px; position: relative; z-index: 2; padding: 0 20px; display: flex; justify-content: space-around; z-index: 4; }
            div.port-product-actions a{font-size:1.7em;}

            div.port-product .price-port{display: flex; justify-content: center; }
            div.port-product .price-port span:not(span.prc,span.cr){text-decoration: line-through;}
            div.port-product .price-port h4 span.prc,.price-port h4 span.cr{color:#1c1c1c;}
            /*a.pictures{ max-width: 100%; max-height: 100%; background-color: #fc0; display: block; overflow: hidden;}*/
            picture{/*transition: 1.5s 2.1s ease all;*/ }
            picture source{ }
            picture.primary, picture.secondary{max-width: 100%; min-width: 100%;  overflow: hidden;  }
            picture.primary img,picture.secondary img{border:none; max-width: 100%;  border-radius: 4px }
            picture.primary   img{z-index: 2}
            picture.secondary img{z-index: 1; display: none;opacity: 0; }
            div.port-product:hover picture.primary img{/*min-width: 200%; max-height:auto;   */ display: none;}
            div.port-product:hover picture.secondary img{transition: 1.5s 2.1s ease all; display: block; opacity: 1; transform:scale(1.13);  box-shadow: 0px 0px 10px rgba(0,0,0,0.3) }
            /*div.port-product:hover h3.port-product-name{bottom: 0;}*/

@media(max-width: 768px){
  h3.port-product-name{ position: absolute; width: 100%; background-color: rgba(255,255,255,0.9);  opacity:0;padding:20px 10px; text-align: center; }
            
            div.port-product:hover h3.port-product-name {margin:auto; display: flex ; justify-content: center; align-items: center;  z-index: 3; border-radius: 4px; opacity: 0; }
}

div.port-product  *{
  transition: all 250ms ease-in-out;
}

            /*div.port-product:hover div.port-product-actions{ margin-top: 25px; }*/
div.port-product:hover{
  z-index: 2
}
@media(max-width: 592px){
  div.port-product:hover h3.port-product-name{font-size: 1.1em; height: 65%;}
  div.port-product-actions{ margin-top: 10px; }
}




/* 
h4.breadcrumb span{ margin-left: 7px; margin-right: 7px;}
h4.breadcrumb span:last-child{margin-left: 0 !important}



h4.breadcrumb::-webkit-scrollbar,
h4.breadcrumb::-webkit-scrollbar
{
  width: 3px;
  height: 3px;
  background-color: #dadce2;
}

h4.breadcrumb{
  background-color: transparent;
  margin: 13px 0 0 0;

  height: 23px;
  display: flex;
  flex-direction: row;
  flex-flow: row nowrap;
  
  width: 100%;
  //display: inline-flex;
  //flex-direction: column;
  

  overflow-y: hidden;

}
h4.breadcrumb span{display: flex; justify-content: center; float: left; padding: 0;   }

h4.breadcrumb span:last-child{ margin-left: 10px; white-space: nowrap;}

h4.breadcrumb a{ height: 35px; white-space: nowrap; width: auto; float: left; display: flex; justify-content: center; }


@media(max-width: 768px){
  h4.breadcrumb.product{position: relative; margin-top:-58px; z-index: 999; display: flex; align-items: center;}
  
}
*/

.swiper-button-next .fa,.swiper-button-prev .fa{display: none !important}






.button {
 
  letter-spacing: 1px;
  background: none;
  color: white;
  position: relative;
  outline: none;
  border: none;
  height: 38px;
  line-height: 25px;
  width: 210px;
  font-size: 14px;
  z-index: 2;
  transition: 0.01s 0.23s ease-out all;
  overflow: hidden;
}
.button.btn-black:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgb(1,1,1);
  z-index: -1;
  transition: 0.3s ease-in all;
}
.button.btn-info:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgb(73, 203, 230);
  z-index: -1;
  transition: 0.3s ease-in all;
}

.button.btn-primary:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgb(20,60,160);
  z-index: -1;
  transition: 0.3s ease-in all;
}

.button.btn-warning:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgb(252, 231, 0);
  z-index: -1;
  transition: 0.3s ease-in all;
}
.button.btn-black:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgb(0,0, 0);
  z-index: -1;
  transition: 0.3s ease-in all;
}


.button.btn-success:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgb(30,180,90);
  z-index: -1;
  transition: 0.3s ease-in all;
}

.button:after {
  content: "";
  position: absolute;
  left: -5%;
  top: 5%;
  height: 90%;
  width: 5%;
  background: white;
  z-index: -1;
  transition: 0.3s 0.02s ease-in all;
}
.button:hover {
  cursor: pointer;
  color: transparent !important;
}
.button:hover:before {
  left: 100%;
  width: 25%;
}
.button:hover:after {
  left: 100%;
  width: 70%;
}
.button:hover .icon-right.after:after {
  left: -80px;
  color: white;
  transition: 0.2s 0.2s ease all;
}

.button:hover .icon-right.after:before {
  left: -104px;
  top: 14px;
  opacity: 0.2;
  color: white;
}


.icon-right {
  position: absolute;
  top: 0;
  right: 0;
}
.icon-right:after {
  font-family: "FontAwesome";
  content: "→";
  font-size: 24px;
  display: inline-block;
  position: relative;
  top: 18px;
  right: 20px;
  transform: translate3D(0, -50%, 0);
}
.icon-right.after:after {
  left: -250px;
  color: black;
  transition: 0.15s 0.25s ease left, 0.5s 0.05s ease color;
}
.icon-right.after:before {
  content: "Tıklayınız";
  position: absolute;
  left: -230px;
  top: 4px;
  opacity: 0;
  transition: 0.2s ease-in all;
}
.button.pp{float: right; max-width: 40px;}
.button.pp:hover .icon-right.after:after{
  left:-5px !important;
}.button.pp:hover .icon-right.after:before{
  content: '';
  left:-235px !important;
}