@font-face{
    font-family:'IRsanslight';
    src:url('../font/IRANSans-Light-web.eot'); /* IE9 Compat Modes */
    src:url('../font/IRANSans-Light-web.woff'); /* Pretty Modern Browsers */
    src:url('../font/IRANSans-Light-web.ttf'); /* Safari, Android, iOS */
}

*{margin:0;padding:0;box-sizing:border-box;border:none;outline:none;list-style-type:none;}
*::-webkit-scrollbar{background-color:#f0f0f2;width:5px;}
*::-webkit-scrollbar-thumb{background-color:#c1c2c6;border-radius:45px;}
*::-webkit-scrollbar-thumb:hover{background-color:#c1c2c6;border-radius:45px;}
*::-o-scrollbar{background-color:#f0f0f2;width:4px;border-radius:45px;}
*::-o-scrollbar-thumb{background-color:#c1c2c6;border-radius:45px;}
*::-o-scrollbar-thumb:hover{background-color:#c1c2c6;border-radius:45px;}

body{font-family:'IRsanslight';background-color:#FFFFFF;overflow-x:hidden;}

/*header*/
@media screen and (min-width:1000px){
    .header{top:0;width:100%;height:55px;background-color:#FFFFFF;position:fixed;text-align:center;z-index:5;border-bottom:1px solid #f1f1f1;}
    .header-content{display:inline-flex;padding:0 15px;width:100%;height:100%;max-width:1300px;margin:auto;}
    .header-content-right, .header-content-left, .header-content-center{display:inline-flex;flex-wrap:nowrap;margin:auto;position:relative;height:40px;}

    .header-content-right{margin-left:50px;}
    .header-content-center{width:100%;}
    .header-content-left{width:auto;flex-direction:row-reverse;margin-right:50px;}

    .menu-bar{margin:3px 7px 5px 33px;}
    .Basket, .sign-in{margin:auto 20px;margin-left:0;width:38px;height:100%;}
    .sign-in{width:125px;}
    .before-login{border:1px solid #F1F1F1;width:100%;border-radius:5px; margin:auto;height:100%;padding:2px;}
    .before-login:hover{background-color:#F1F1F1;}
    .before-login span{display:inline-flex;flex-wrap:nowrap;padding:7px 0;font-size:12px;right:2px;}
    .before-login strong{width:100%;height:20px;padding:0;}
    .before-login i{top:-3px;left:-5px;width:26px;height:26px;font-size:25px;}
    .heart-point:hover{animation:Tapesh .4s;animation-fill-mode:both;animation-iteration-count:1000;color:#ef4056;}
    .heart-point, .bookmark-point{margin:auto 3px;width:38px;height:100%;}
    .heart-point span, .bookmark-point span, .Basket span{
        position:absolute;top:-2px;width:auto;min-width:15px;padding:0 1px 0 1px;height:14px;border-radius:10%;background-color:#ef4056;z-index:1;
        font-size:11px;color:white;font-weight:bold;cursor:pointer;
    }
    .SearchBar{width:100%;height:38px;}
    .SearchBar input{height:38px;}
    .logo{margin:auto;background-size:199px 38px;width:199px; height:38px;}
    
    .wrap{margin:80px auto auto auto;}

}
@media screen and (max-width:1000px){
    .header{top:0;width:100%;height:44px;background-color:white;position:fixed;text-align:center;z-index:5;border-bottom:1px solid #f1f1f1;}
    .header-content{display:inline-flex;width:100%;height:100%;max-width:1300px;margin:auto;}
    .header-content-right, .header-content-left, .header-content-center{display:inline-flex;flex-wrap:nowrap;margin:auto;position:relative;height:30px;}
    
    .header-content-right{margin:5px 15px auto auto;}
    .header-content-center{display:none;}
    .header-content-left{margin:5px auto auto 15px;width:auto;flex-direction:row-reverse;}

    .menu-bar{margin:-2px 15px 0 33px;}
    .Basket, .sign-in{margin:-3px 20px;margin-left:0;width:28px;height:100%;padding:0;}
    .sign-in{margin:0 20px 0 0;width:115px;}
    .before-login{border:1px solid #F1F1F1;width:100%;border-radius:5px; margin:auto;height:100%;line-height:10px;}
    .before-login:hover{background-color:#F1F1F1;}
    .before-login span{display:inline-flex;flex-wrap:nowrap;padding:7px 0;font-size:12px;right:2px;}
    .before-login strong{width:100%;height:25px;padding:0;}
    .before-login i{top:-5px;left:-5px;width:25px;height:25px;font-size:24px;}
    .heart-point:hover{animation:Tapesh .4s;animation-fill-mode:both;animation-iteration-count:1000;color:#ef4056;}
    .heart-point:hover span{top:1px;background-color:#fff;border:1px solid #ef4056;color:#ef4056;}
    .heart-point, .bookmark-point{margin:-19px 4px;width:40px;height:100%;}
    .heart-point.shakes span, .bookmark-point.shakes span{top:1px;}
    .heart-point span, .bookmark-point span{
        position:absolute;top:34px;width:auto;min-width:15px;padding:7px 1px 0 1px;height:14px;border-radius:10%;background-color:#ef4056;z-index:1;
        font-size:11px;color:white;font-weight:bold;cursor:pointer;
   }
    .Basket span{
        position:absolute;top:-5px;width:auto;min-width:15px;padding:0 1px 0 1px;height:14px;border-radius:10%;background-color:#ef4056;z-index:1;
        font-size:11px;color:white;font-weight:bold;cursor:pointer;
   }
    .SearchBar{width:100%;margin:-12px 15px auto 5px;height:25px;}
    .SearchBar input{height:25px;}
    .SearchBar i{color:white;font-size:12px;position:absolute;left:-17px;top:6px;z-index:1;}
    .logo{background-size:140px 28px;width:140px; height:28px;}
    
    .wrap{margin:67px auto auto auto;}

}
@media screen and (max-width:445px){
    .header{top:0;width:100%;height:44px;background-color:white;position:fixed;text-align:center;z-index:5;border-bottom:1px solid #f1f1f1;}
    .header-content{display:inline-flex;width:100%;height:100%;max-width:1300px;margin:auto;}
    .header-content-right, .header-content-left{display:inline-flex;flex-wrap:nowrap;margin:auto;position:relative;height:30px;}
    
    .header-content-right{margin:5px 10px auto auto;}
    .header-content-center{display:none;}
    .header-content-left{margin:5px auto auto 10px;width:auto;flex-direction:row-reverse;}

    .menu-bar{margin:-2px 15px 0 33px;}
    .Basket, .sign-in{margin:-3px 20px;margin-left:0;width:28px;height:100%;padding:0;}
    
    .sign-in{padding:0;width:25px;}
    .before-login{border:none;background-color:none;}
    .before-login:hover{background-color:white;}
    .before-login i{top:-1px;left:-5px;width:25px;height:25px;font-size:24px;}
    .sign-in strong{display:none;}
    .logo{background-size:100px 20px;width:100px; height:20px;margin:auto;}
    
    .wrap{margin:67px auto auto auto;}

}
@media screen and (max-width:280px){
    .header-content-left, .header-content-center{display:none;}
    .header-content-right{width:100%;margin:5px;}
    .Basket, .sign-in{margin:-3px auto;margin-left:0;width:28px;height:100%;padding:0;}
    .menu-bar{margin:-2px 15px 0 33px;}
    .sign-in{margin-left:12px;}
}

.close{position:absolute;color:#f1f1f1;font-size:40px;font-weight:bold;transition:0.3s;}
.close:hover,.close:focus{color:#bbb;text-decoration:none;cursor:pointer;}
.lines-button{
    position:absolute;float:right;margin:-4px 0 0 0;overflow:hidden;width:25px;height:35px;font-size:0;text-indent:-9999px;-webkit-appearance:none;
    -moz-appearance:none;appearance:none;box-shadow:none;border-radius:none; border:none;cursor:pointer;-webkit-transition:background 0.3s;transition:background 0.3s;
}
.lines-button span{display:block;position:absolute;left:0;right:0;height:5px;background:gray;border-radius:0.57143rem;}
.lines-button span::before, .lines-button span::after{position:absolute;display:block;left:0;width:100%;height:5px;background-color:gray;border-radius:0.57143rem;content:"";}
.lines-button span::before{top:-9px;}
.lines-button span::after{bottom:-9px;}
.lines{background:none;}
.lines span{-webkit-transition:background 0s 0.3s;transition:background 0s 0.3s;}
.lines span::before, .lines span::after{-webkit-transition-duration:0.3s, 0.3s;transition-duration:0.3s, 0.3s;}
.lines span::before{-webkit-transition-property:top, -webkit-transform;transition-property:top, transform;}
.lines span::after{-webkit-transition-property:bottom, -webkit-transform;transition-property:bottom, transform;}
.lines.close{background:none;}
.lines.close span{visibility:hidden;}
.lines.close span::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);visibility:visible;}
.lines.close span::after{bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);visibility:visible;}
.LoginBar{
    padding:10px;width:100%;background-color:#ffffff10;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    height:calc(100% + 10px);overflow:hidden;position:fixed;top:-10px;z-index:6;left:-100%;
}
.LoginBar-animation-open{animation:LoginBar-animation-open 0.9s;animation-iteration-count:1;animation-fill-mode:both;}
.LoginBar-animation-close{animation:LoginBar-animation-close 0.9s;animation-iteration-count:1;animation-fill-mode:both;}
@keyframes LoginBar-animation-open{
  0%{left:-100%;}
  100%{left:0;}
}
@keyframes LoginBar-animation-close{
  0%{left:0;}
  100%{left:-100%;}
}
.box-center{
    width:400px;height:420px;top:45%;left:50%;margin-left:-200px;margin-top:-210px;border:1px solid #fff;
    border-radius:5px;position:absolute;background-color:#fff;background:rgba(225,225,225,.9);padding:25px 35px;
}
.close-button, .back-LoginBar, .back-password{
    overflow:hidden;position:absolute;border:none;padding:0;width:2.5em;height:2.5em;border-radius:50%;
    background:transparent;color:#ef4056;font:inherit;text-indent:100%;cursor:pointer;right:20px;top:20px;
}
.close-button:before, .close-button:after{
    position:absolute;top:15%;left:calc(50% - .0625em);width:0.125em;
    height:70%;border-radius:0.125em;transform:rotate(45deg);background:currentcolor;content:'';
}
.close-button:after{transform:rotate(-45deg);}
.close-button:focus{outline:solid 0 transparent;box-shadow:0 0 0 2px #8ed0f9;}
.close-button:hover{background:rgba(29, 161, 142, .1);}
.back-LoginBar:before, .back-LoginBar:after, .back-password:before, .back-password:after{
    position:absolute;right:8px;display:block;content:"";width:16px;height:15px;border-top:2px solid #ef4056;
    border-left:2px solid #ef4056;transform:rotate(135deg);top:10px;}
.back-LoginBar:after, .back-password:after{width:2px;height:22px;background-color:#ef4056;transform:rotate(90deg) translate(15px, 4px);left:0;top:-9px;right:14px;}
.back-LoginBar:focus, .back-password:focus{outline:solid 0 transparent;box-shadow:0 0 0 2px #8ed0f9;}
.back-LoginBar:hover, .back-password:hover{background:rgba(29, 161, 142, .1);}
.login-box-text{color:#000;line-height:25px;}
.titr-login{color:#fff;}
.internal-logo{background-image:url("../image/HeaderIcons/19ketab2.png");background-repeat:no-repeat;width:180px;height:36px;margin:auto;margin-bottom:20px;}
.toggle-password{float:right;margin-top:18px;position:absolute;z-index:4;}
.Login-input-low-height .toggle-password{margin-top:11px;}
.Login-input{margin-bottom:40px;}
.Login-input input{height:55px;border-radius:8px;}
.Login-input .input-group-addon{background-color:#ef4056;border:none;border-radius:8px 0 0 8px;}
.Login-input i{margin:0;padding:0;color:white;font-size:40px;}
.Login-input-low-margin{margin-bottom:30px;}
.Login-input-low-height input{height:40px;}
.Login-input-low-height i{height:20px;margin:0;padding:0;color:white;font-size:20px;}
.save-login{position:absolute;top:285px;font-size:12px;left:35px;color:#ef4056;}
.save-login input{accent-color:#ef4056;}
.forget-login{display:flex;position:absolute;margin-top:55px;left:35px;font-size:12px;cursor:pointer;}
.forget-login i{margin-right:7px;width:auto;height:auto;}
.GetSigninInfoP1 button i{position:absolute;margin-top:-19px;left:30px;}
.loginbar-button{padding:12px;background-color:#ef4056;color:#fff;width:100%;border-radius:8px;}
.reset-password{padding:12px;background-color:#ef4056;color:#fff;width:100%;border-radius:8px;}
.SendCodeRP, .SendCodeSignup{cursor:pointer;}
.disabled{background-color:#d66473;cursor:not-allowed;pointer-events:none;}
.TimerText{font-size:12px;}
.after-login .dropdown{position:relative;left:-80px;}
.after-login .dropdown:hover .dropdown-menu{display:block;margin:17px -100% 0 0;}
.SearchBar .input-group-addon{background-color:#ef4056;}
.SearchBar img{margin:0;}
.logo{background-image:url("../image/HeaderIcons/19ketab2.png");background-repeat:no-repeat;}
.header-hang{width:100%;height:25px;background-color:white;border-bottom:1px solid #F1F1F1;line-height:2px;}
.header-hang-content{display:inline-flex;width:100%;height:100%;max-width:1300px;padding:8px 15px 8px 15px;margin:auto;}
/*End header*/

button:disabled{background-color:#d66473;cursor:not-allowed;}
.page-mask{background:rgba(0, 0, 0, 0.5);position:fixed;top:0;right:0;bottom:0;left:0;z-index:2;}
.disabledbutton{pointer-events:none;}
.is-hidden{display:none;}
.is-visible{display:block;}
.titr{font-size:18px;}
.text-right{text-align:right;}
.text-left{text-align:left;}
.text-white{color:#fff;}
.text-blue{color:blue;}
.error{font-size:12px;color:#ef4056;text-align:right;line-height:14px;position:absolute;top:calc(100% + 3px);right:5px;z-index:50;}

.NotificationArea{position:fixed;top:0;display:flex;flex-direction:column;width:250px;z-index:10;left:calc(50% - 125px);padding-top:90px;pointer-events:none}
.NotificationArea:empty{top:-300px}
.notification{
    padding:10px;border-radius:5px;background:rgba(0, 0, 0, .7);color:#fff;font-size:12px;width:100%;word-wrap:break-word;margin-bottom:15px;
    -webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none
}
.notification .close{position:absolute;margin-top:-2px;left:7px;font-size:10px;color:#fff;pointer-events:auto;cursor:pointer}
.notification i{font-size:18px}

.spinner{width:25px;height:25px;border-radius:50%;border:5px solid #406cef;border-top-color:#efe340;animation:spin .7s linear infinite;position:absolute;margin-top:-3px;left:50px;}
@keyframes spin{to{transform:rotate(360deg);}}

.shimmer{background-image:linear-gradient(90deg,#EEEEEE 0%, #EEEEEE 40%, #DDDDDD 50%, #DDDDDD 55%, #EEEEEE 65%, #EEEEEE 100%);background-size:400%;animation:shimmer 1500ms infinite;}
@keyframes shimmer{from{background-position:100% 100%;}  to{background-position:0 0;}}

.sidebar{
    width:300px;position:fixed;background-color:#fff;
    right:-300px;overflow-y:auto;overflow-x:hidden;direction:ltr;z-index:4;
}


.wrap{width:100%;max-width:1300px;position:relative;overflow:hidden;display:flex;flex-wrap:wrap;height:100%;padding:0;}
.main-content{margin:0 auto 0 0;width:100%;}
@media screen and (min-width:1000px){
    .sidebar{padding:0;height:calc(100% - 85px);margin-top:3px;border:1px solid #e2efef;border-radius:5px;}
    .main-content-animation-open{
        animation:main-content-animation-open 0.5s;
        animation-iteration-count:1;animation-fill-mode:both;
   }
    .main-content-animation-close{
        animation:main-content-animation-close 0.5s;
        animation-iteration-count:1;animation-fill-mode:both;
   }
}
@media screen and (max-width:1000px){
    .sidebar{padding:0 10px;z-index:6;height:100%;top:0;}
}
.sidebar-animation-open{
    animation:sidebar-animation-open 0.5s;
    animation-iteration-count:1;animation-fill-mode:both;
}
.sidebar-animation-close{
    animation:sidebar-animation-close 0.5s;
    animation-iteration-count:1;animation-fill-mode:both;
}
@keyframes sidebar-animation-open{
  0%{right:-300px;}
  100%{right:0;}
}
@keyframes sidebar-animation-close{
  0%{right:0;}
  100%{right:-300px;}
}
@keyframes main-content-animation-open{
  0%{width:calc(100% - 300px);}
  100%{width:100%;}
}
@keyframes main-content-animation-close{
  0%{width:100%;}
  100%{width:calc(100% - 300px);}
}
.sidebar-panel{
    padding:0 10px;
    margin:0;
}
.titlepanel{
    margin:auto;
    width:100%;
    height:40px;
    background-color:#ef4056;
    border-radius:5px 5px 0 0 ;
    color:#fff;
}
.MainMenu, .Menu, .SubMenu{
    cursor:pointer;
    width:100%;
    text-align:right;
    border-bottom:1px solid #fff;
    transition:0.4s;
}
.MainMenu:after , .Menu:after{
    content:'\002B';
    float:left;
    margin-right:5px;
}
.MainMenuExplin{
    font-size:12px;
    color:yellow;
}
.MainMenu{
    background-color:#34CDCD;
    color:#fff;
    padding:10px 10px 10px 10px;
    font-size:14px;
}
.Menu{
    background-color:#96E434;
    color:#000;
    padding:9px 10px 9px 10px;
    font-size:13px;
}
.SubMenu{
    background-color:#D6E135;
    color:#000;
    padding:8px 10px 8px 10px;
}
.MainMenu:hover,.active-MainMenu{
    border-bottom:none;
    background-color:#96E434;
    color:#fff;
    font-size:15px;
}
.Menu:hover, .active-menu{
    background-color:#D6E135;
    color:#fff;
    font-size:14px;
}
.SubMenu:hover{
    background-color:#D42F52;
    color:#fff;
    font-size:13px;
}
.active-menu{
    border:1px solid #000;
    border-radius:5px 5px 0 0;
    border-bottom:none;
}
.active-MainMenu:after{
    color:#fff;
    font-size:15px;
    content:"\2212";
}
.active-menu:after{
    color:#fff;
    font-size:14px;
    content:"\2212";
}
.MainMenu_body, .Menu_body{
    border-radius:0 0 5px 5px; 
    border-top:none;
}
.MainMenu_body{
    background-color:#96E434;
}
.Menu_body{
    border:1px solid #000;
    background-color:#D6E135;
    border-top:none;
}




.slider{
  width:calc(100% - 14px);margin:auto;
  position:relative;
  background:#aaa;
  color:#fff;
  font-size:2rem;border-radius:0 0 5px 5px;
}
.slider-inner{border-radius:0 0 5px 5px;
  padding-top:35%;
  position:relative;
  overflow:hidden;
}
.slides{
  background:#aaa;
  position:absolute;
  left:0;
  top:0;
  right:0;
  bottom:0;
  transform:translate3d(0, 0, 0);
}
.slides:first-child{
  z-index:2;
}
.reverse .slides{
  transform:translate3d(-100%, 0, 0);
}
.forwards .slides{
  transform:translate3d(100%, 0, 0);
}
.slides.offLeft{
  transform:translate3d(-100%, 0, 0);
}
.slides.offRight{
  transform:translate3d(100%, 0, 0);
}

.slides.active{
  transform:translate3d(0%, 0, 0);
}
.slides.active,
.slides.offLeft,
.slides.offRight{
  transition:transform var(--slider-speed) linear;
  xtransition-duration:var(--slider-speed);
}

.slides:nth-child(odd){
  background:#aaa;
}
.slides img{
  object-fit:cover;
  width:100%;
  height:100%;
  display:block;
}
.prev,
.next{display:none;
    position:absolute;z-index:1;
  margin:-15px 10px 5px 0;
  border:inset 5px solid #4c2c2c;
  padding:5px 10px;
  background:#fefefe;
  border-radius:1px;
  box-shadow:0 0 10px rgba(0, 0, 0, 0.5);
  cursor:pointer;
}
.prev:hover,
.next:hover,
.prev:focus,
.next:focus{
  background:#000;
  color:#fff;
  outline:0;
}

.prev:not(.trans-end),
.next:not(.trans-end){
  cursor:wait;
  opacity:0.5;
}

/* captions if needed */
figure.slides{
  margin:0;
  padding:0;
}
.caption{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.caption span{
  padding:20px;
  background:rgba(0, 0, 0, 0.5);
}

@media (hover:none){
  .slider-inner{
    display:flex;
    padding-top:0;
    height:70vh;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -ms-scroll-snap-coordinate:0 0;
    scroll-snap-coordinate:0 0;
    -ms-scroll-snap-points-x:repeat(100%);
    scroll-snap-points-x:repeat(100%);
    -ms-scroll-snap-type:x mandatory;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
 }
  .slider-inner .slides{
    position:relative;
    flex:1 0 100%;
    width:100%;
    transform:none;
    scroll-snap-align:start;
 }
  #previous,
  #next{
    display:none;
 }
}
@media only screen and (min-width:1000px){
    .ScrollX-wrapper{position:relative;overflow:hidden;padding:5px;border:1px solid #e2efef;border-radius:5px;}
    .HeaderBox{margin:-7px -7px 0 0;background:rgb(64,239,129);background-color:#4056EF;border-radius:5px 5px 0 0;color:#FFF;}
}
@media only screen and (max-width:1000px){
    .ScrollX-wrapper{position:relative;overflow:hidden;}
    .ScrollX-wrapper:not(.HeaderBox){padding:10px;}
    .HeaderBox{margin:-7px -7px 0 0;background:rgb(64,239,129);background-color:#4056EF;width:100vw;color:#FFF;}
}
.hs::-webkit-scrollbar{width:0;height:0;}
.hs{display:flex;flex-wrap:nowrap;overflow-x:scroll;overflow-y:hidden;justify-content:space-bettwen;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;margin:0;}
.ScrollX-wrapper:not(.list){padding:5px 0 5px 0;}
.HeaderBox .ScrollX-header{position:relative;right:10px;top:-10px;}
.loading-Menu .HeaderBox{margin-top:15px;border-radius:18px 0 0 18px;width:auto;padding:0 0 0 15px;}
.tag{border:1px solid #ef4056;border-radius:3px;padding:6px 5px;font-size:12px;margin:5px 2px;flex-grow:1;text-align:center}
.tag:hover{background-color:#ef4056;color:#fff}

.ScrollX-header{padding:0; margin-right:10px;display:flex;align-items:center;width:100%;}
.ScrollX-headline{font-size:17px;margin-bottom:-1px;flex:1;}
.ScrollX-item{max-width:165px;
    flex-grow:0;flex-shrink:0;flex-basis:165px;margin:5px;display:flex;justify-content:center;align-items:center;flex-direction:column;
    position:relative;user-select:none;border:1px solid #aaa;border-radius:20px 20px 10px 10px;padding:5px;box-shadow:0 1px 1px 0 rgba(0,0,0,0.6);transition:0.5s;
}
.ScrollX-item.more{border-radius:5px;background-color:#000;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0.4;color:white;flex-grow:1;}
.ScrollX-item:hover{box-shadow:0 3px 3px 0 rgba(0,0,0,0.6);}
.ScrollX-item:hover .card-title{color:#ef4056;}
.ScrollX-item-image-wrapper{
    position:relative;width:100%;height:0;padding-bottom:100%;
    border:1px solid #aaa;border-radius:12px 12px 5px 5px;overflow:hidden;-webkit-transition: all 1.2s ease-in;
}

@media screen and (min-width:700px){
    .DetailBar{position:fixed;display:flex;justify-content:center;background-color:#ffffff10;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);width:100%;height:100%;overflow-y:auto;top:0;opacity:0;z-index:-1;transform:scale(0, 0);padding:10px;}
    .DetailBar-content{background-color:#fff;position:relative;width:100%;max-width:1300px;height:calc(35vw - 65px) ;margin:auto auto;padding:10px;border:2px solid #ef4056;border-radius:5px;}
    .DetailImage{position:relative;width:35vw;max-width:450px;height:35vw;max-height:450px;float:left;border:1px solid #ef4056;border-radius:8px;overflow:hidden;}
    .DetailImage img{width:35vw;max-width:450px;height:35vw;max-height:450px;object-fit:cover;}
    .DetailImage img:hover{object-fit:contain;}
    .DetailTitle{background-color:#ef4056;font-size:20px;font-weight: 900;height:auto;text-align:center;width:calc(100% - 35vw - 10px);min-width:calc(100% - 460px);border-radius:5px;color:#fff;z-index:5;padding:6px 5px;}
    .DetailBar-buy{background-color:#ef4056;font-size:20px;font-weight: 900;height:auto;text-align:center;width:calc(100% - 35vw - 10px);min-width:calc(100% - 460px);border-radius:5px;color:#fff;z-index:5;padding:6px 5px;}
    .DetailDescription{width:calc(100% - 35vw - 10px);min-width:calc(100% - 460px);height:100%;max-height:calc(35vw - 180px);margin:5px 0;border-radius:5px;text-align:center;z-index:5;}
    .DetailDescription-content{width:100%;height:calc(35vw - 280px);overflow-y:auto;text-align:justify;text-justify:inter-word;line-height:35px;border:1px solid #ef4056;border-radius:5px;padding:5px 10px;margin-bottom:5px;}
    .DetailInfo{
        display:inline-flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between;margin:0 -5px 5px 0;
        height:auto;text-align:center;width:calc(100% + 10px);border-radius:5px;padding:0;
    }
    .DetailInfoC{border:1px solid #ef4056;border-radius:5px;padding:6px 5px;min-width:100px;margin:0 5px 5px 5px;flex-grow:1;justify-content:space-between;height:auto;}
}
@media screen and (max-width:699px){
    .DetailBar{position:fixed;display:flex;justify-content:center;background-color:#fff;width:100%;height:100%;overflow-y:auto;top:0;opacity:0;z-index:-1;transform:scale(0, 0);}
    .DetailBar-content{position:absolute;width:100%;height:100vh;margin:0;padding-bottom:30px;overflow-y:auto;padding-bottom:55px;}
    .DetailImage{width:100vw;height:auto;max-height:85vh;overflow:hidden;position:sticky;top:-50px;z-index:-1;}
    .DetailImage img{width:100vw;height:auto;}
    .close-DetailBar{position:fixed;top:15px;}
    .DetailTitle{background-color:#ef4056;font-size:16px;font-weight: 900;height:auto;min-height:40px;text-align:center;width:100%;color:#fff;z-index:5;padding:6px 8px;}
    .DetailBar-buy-m{position:fixed;bottom:0;background-color:#ef4056;font-size:18px;font-weight: 900;height:45px;text-align:center;width:100%;color:#fff;padding:10px;z-index:110;opacity:0.8;box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;}
    .DetailBar-buy-m:click{opacity:1;}
    .DetailBar-buy{display:none;}

    .detail-all{width:100%;height:100%;background-color:#fff;}
    .DetailDescription{width:calc(100% - 30px);height:auto;margin:10px 15px 0 0;border-radius:5px;text-align:center;}
    .DetailDescription-content{width:100%;overflow-y:auto;text-align:justify;text-justify:inter-word;line-height:35px;border:1px solid #ef4056;border-radius:5px;padding:5px 10px;margin-bottom:5px;}
    .DetailInfo{
        display:inline-flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between;margin:0 -5px 5px 0;
        height:auto;text-align:center;width:calc(100% + 10px);border-radius:5px;padding:0;
    }
    .DetailInfoC{border:1px solid #ef4056;border-radius:5px;z-index:5;padding:6px 5px;min-width:100px;margin:5px;flex-grow:1;justify-content:space-between;}
}
.close-DetailBar{top:15px;right:calc(100% - 50px);z-index:11;background-color:#e3e3e3;border:1px solid #000;}
.DetailBar-animation-open{animation:DetailBar-animation-open 0.5s ease;animation-iteration-count:1;animation-fill-mode:both;}
.DetailBar-animation-close{animation:DetailBar-animation-close 0.5s ease;animation-iteration-count:1;animation-fill-mode:both;}
@keyframes DetailBar-animation-open{
    0%{transform:scale(0, 0);border-radius:50%;}5%{transform:scale(0.05, 0.05);border-radius:45%;}
    10%{transform:scale(0.1, 0.1);border-radius:40%;}15%{transform:scale(0.15, 0.15);border-radius:35%;}
    20%{transform:scale(0.2, 0.2);border-radius:30%;}25%{transform:scale(0.25, 0.25);border-radius:25%;}
    30%{transform:scale(0.3, 0.3);border-radius:20%;}35%{transform:scale(0.35, 0.35);border-radius:15%;}
    40%{transform:scale(0.4, 0.4);border-radius:10%;}45%{transform:scale(0.45, 0.45);border-radius:5%;}
    50%{transform:scale(0.5, 0.5);border-radius:0;}55%{transform:scale(0.55, 0.55);}
    60%{transform:scale(0.6, 0.6);}65%{transform:scale(0.65, 0.65);}
    70%{transform:scale(0.7, 0.7);}75%{transform:scale(0.75, 0.75);}
    80%{transform:scale(0.8, 0.8);}85%{transform:scale(0.85, 0.85);}
    90%{transform:scale(0.9, 0.9);}95%{transform:scale(0.95, 0.95);}
    100%{transform:scale(1, 1);}
}
@keyframes DetailBar-animation-close{
    0%{transform:scale(1, 1);}5%{transform:scale(0.95, 0.95);}
    10%{transform:scale(0.9, 0.9);}15%{transform:scale(0.85, 0.85);}
    20%{transform:scale(0.8, 0.8);}25%{transform:scale(0.75, 0.75);}
    30%{transform:scale(0.7, 0.7);}35%{transform:scale(0.65, 0.65);}
    40%{transform:scale(0.6, 0.6);}45%{transform:scale(0.55, 0.55);}
    50%{transform:scale(0.5, 0.5);border-radius:5%;}55%{transform:scale(0.45, 0.45);border-radius:10%;}
    60%{transform:scale(0.4, 0.4);border-radius:15%;}65%{transform:scale(0.35, 0.35);border-radius:20%;}
    70%{transform:scale(0.3, 0.3);border-radius:25%;}75%{transform:scale(0.25, 0.25);border-radius:30%;}
    80%{transform:scale(0.2, 0.2);border-radius:35%;}85%{transform:scale(0.15, 0.15);border-radius:40%;}
    90%{transform:scale(0.1, 0.1);border-radius:45%;}95%{transform:scale(0.05, 0.05);border-radius:50%;}
    100%{transform:scale(0, 0);}
}


.ScrollX-item-image{pointer-events:none;position:absolute;width:100%;height:100%;object-fit:cover;transition:.2s;}
.ScrollX-item-image-wrapper:hover img{transform:scale(1.2);}
.ScrollX-arrows{align-self:center;left:25px;margin-bottom:-25px;position:absolute;z-index:1;}
.ScrollX-arrows .fa{padding:0;margin:0;width:30px;height:35px;}
.ScrollX-arrows .arrow:before{display:inline-block;vertical-align:middle;background-size:contain;width:18px;height:12px;cursor:pointer;}
.ScrollX-arrows .arrow.disable:before, .menu-selector-arrows .arrow.disable:before{color:#e3e3e3;}
.ScrollX-arrows .arrow.fa-angle-right:before{margin-right:10px;}
.ScrollX-item-description{width:100%;align-self:flex-start;height:110px;}
.ScrollX-item-description hr{position:absolute;bottom:6px;width:calc(100% - 10px);}
.ScrollX-item-description .comment{position:absolute;left:40px;bottom:42px;z-index:1;transition:0.7s;border-radius:50%;width:30px;height:30px;}
.ScrollX-item-description .bookmark{position:absolute;left:0;bottom:40px;z-index:1;transition:0.7s;border-radius:50%;width:30px;height:30px;}

.detail{position:absolute;background-color:#fff;width:37px;height:37px;border-radius:50%;z-index:1;top:1px;left:1px;border:1px solid #aaa;border-top:0;border-left:0;}
.detail .fa{top:0;right:1px;font-size:14px;transition:.3s;}
.detail .fa:hover{transform:scale(1.3);}
.detail-hide-border-h{position:absolute;background-color:#FFF;width:5px;height:15px;left:0;top:16px;z-index:2;}
.detail-hide-border-v{position:absolute;background-color:#FFF;width:15px;height:5px;left:16px;top:0;z-index:2;}

.share{position:absolute;background-color:#fff;width:37px;height:37px;border-radius:50%;z-index:1;top:1px;right:1px;border:1px solid #aaa;border-top:0;border-right:0;}
.share .fa-send-o{top:0;left:-2px;font-size:14px;transition:.3s;}
.share .fa-send-o:hover{transform:scale(1.3);}
.share:hover{z-index:2;}
.share:hover .share-hide-border-h{z-index:3;}
.share:hover .share-hide-border-v{z-index:3;}
.share:hover .media-icons{position:absolute;opacity: 1;pointer-events: auto;top:35px;}
.share .media-icons{
    position: absolute;left:0;top:30px;background: #f1f1f1;width:auto;text-align:center;display:flex;align-items:center;flex-direction:column;
    justify-content:space-around;border-radius:5px;opacity:0;pointer-events:none;box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);transition: all 0.3s ease;
}
.doc-share:hover .media-icons{position:absolute;opacity: 1;pointer-events: auto;top:-105px;}
.doc-share .media-icons{
    position: absolute;left:0;top:-140px;background: #f1f1f1;width:auto;text-align:center;display:flex;align-items:center;flex-direction:column;color:#000;
    justify-content:space-around;border-radius:5px;opacity:0;pointer-events:none;box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);transition: all 0.3s ease;
}
.share-hide-border-h{position:absolute;background-color:#FFF;width:5px;height:19px;right:0;top:12px;z-index:2}
.share-hide-border-v{position:absolute;background-color:#FFF;width:19px;height:5px;right:12px;top:0;z-index:2}

@media (hover:none) and (pointer:coarse){.ScrollX-arrows{display:none;}.ScrollX-headline{font-size:15px;}}
@media only screen and (max-width:1000px){.ScrollX-arrows{display:none;}.ScrollX-headline{font-size:15px;}}
.card-title{position:absolute;width:152px;right:0;margin:5px 5px;height:68px;font-size:11px;text-align:justify;text-justify:inter-word;}
.otherIcon{margin-top:5px;width:35px;height:35px;margin-right:75%;position:absolute;border:1px solid #aaa;padding:5px;display:inline-block;position:relative;}

.card-price{width:100%;left:10px;text-align:left;position:absolute;bottom:6px;color:green;display:block;z-index:2;color:#fff;font-weight:900;}
.basket-button{position:absolute;width:calc(100% - 10px);height:30px;background-color:#ef4056;z-index:0;bottom:5px;right:5px;border-radius:5px;z-index:1;transition:0.1s;box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);}
.basket-button i{position:absolute;right:-8px;bottom:-10px;color:#fff;z-index:1;transition:0.7s;}
.basket-button:not(.active):hover{transform:scale(1.03);}
.basket-button.active{opacity:.8;cursor:no-drop;filter: blur(1px);-webkit-filter: blur(1px);width:calc(100% - 35px);font-weight:200;font-size:12px;}
.del-basket {position:absolute;bottom:1px;left:-16px;font-size:25px;opacity:0.7;}
.del-basket i{font-size:25px;opacity:0.7;}
    
.ZoomImg:not(.doc-img){position:absolute;background-color:#fff;width:32px;height:32px;border-radius:50%;z-index:1;border:1px solid #fff;right:3px;bottom:3px;opacity:.8;transition:0.7s;}
#ZoomImg .close{position:fixed; top:5px;right:20px;}
.ZoomImg:hover,.heart:hover{opacity:1;}
.ZoomImg .spinner{position:absolute;right:3px;margin-top:3px;}
.detail .spinner{position:absolute;right:5px;margin-top:5px;}
.zoomicon{position:absolute;margin-top:-4px;right:-8px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}
.modalImage-content{border-radius:15px;}
.heart{position:absolute;background-color:#fff;width:32px;height:32px;border-radius:50%;z-index:1;border:1px solid #fff;bottom:3px;left:3px;opacity:.8;transition:0.7s;}
.heart .fa:hover{animation:Tapesh .4s;animation-fill-mode:both;animation-iteration-count:1000;}
@keyframes Tapesh{
  0%{transform: scale(1)}
  100%{transform: scale(1.1)}
}
.hearticon{position:absolute;bottom:-12px;left:-15px;}
.heart span.active, .heart-point i.active{color:#ef4056;animation:Tapesh .4s;animation-fill-mode:both;animation-iteration-count:1000;}
.bookmark.active, .bookmark-point i.active{color:green;}
.list .hs{flex-wrap:wrap;overflow:hidden;}
.list .hs:after{content:"";flex:auto;flex-basis:170px;}
.list .hs .ScrollX-item:after{max-width:170px;flex-basis:170px;}
@media screen and (min-width:700px){
    .list .hs{justify-content:space-between;}
}
@media screen and (max-width:700px){
    .list .hs{justify-content:space-around;}
}

.list .ScrollX-arrows{display:none;}
.list .ScrollX-item:last-child{flex-grow:1;}

.Category{padding-bottom:15px;width:100%;}
.CategoryIcon{flex-grow:0;flex-shrink:0;flex-basis:60px;margin:0 15px;display:flex;justify-content:center;align-items:center;flex-direction:column;
    position:relative;user-select:none;;border-radius:50%;padding:5px;background-color:#ef4056;opacity:0.8;transition:0.3s;}
.CategoryIcon:first-child{margin-right:15px;}
.CategoryIcon-image-wrapper{position:relative;width:100%;padding-bottom:100%;border-radius:5px;margin-top:0;}
.CategoryIcon-image{position:absolute;margin-top:5px;right:5px;width:80%;height:80%;transition:.8s;}
.CategoryIcon-description{position:absolute;width:auto;margin-top:calc(100% + 15px);font-size:9px;color:#aaa;transition:.8s;}
.CategoryIcon:hover img{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}
.CategoryIcon:hover .CategoryIcon-description{font-size:10px;color:#ef4056;}
.CategoryIcon:hover{opacity:1;}

li:empty{height: 0;border: none;box-shadow:none;margin-top:-25px;}
li:empty:hover{box-shadow:none;}

.all{width:calc(100% - 14px);}
@media screen and (min-width:900px){
    .half{position:relative;width:calc(50% - 14px);float:right;display:flex;flex-wrap:wrap;overflow:hidden;}
    .third{position:relative;width:calc(33% - 14px);float:right;display:flex;flex-wrap:wrap;overflow:hidden;}
    .fourth{position:relative;width:calc(25% - 14px);float:right;display:flex;flex-wrap:wrap;overflow:hidden;}
    .ThirdofFourth{position:relative;width:calc(75% - 14px);float:right;display:flex;flex-wrap:wrap;overflow:hidden;}
    .padding-set1{padding-top:1px; padding-bottom:1px;}
    .padding-set2{padding-top:2px; padding-bottom:2px;}
    .padding-set3{padding-top:3px; padding-bottom:3px;}
    .padding-set4{padding-top:4px; padding-bottom:4px;}
    .padding-set5{padding-top:5px; padding-bottom:5px;}
    .padding-set6{padding-top:6px; padding-bottom:6px;}
    .padding-set7{padding-top:7px; padding-bottom:7px;}
    .padding-set8{padding-top:8px; padding-bottom:8px;}
    .padding-set9{padding-top:9px; padding-bottom:9px;}
    .padding-set10{padding-top:10px; padding-bottom:10px;}
    .padding-set11{padding-top:11px; padding-bottom:11px;}
    .padding-set12{padding-top:12px; padding-bottom:12px;}
    .padding-set13{padding-top:13px; padding-bottom:13px;}
    .padding-set14{padding-top:14px; padding-bottom:14px;}
    .padding-set15{padding-top:15px; padding-bottom:15px;}
    .padding-set16{padding-top:16px; padding-bottom:16px;}
    .padding-set17{padding-top:17px; padding-bottom:17px;}
    .padding-set18{padding-top:18px; padding-bottom:18px;}
    .padding-set19{padding-top:19px; padding-bottom:19px;}
    .padding-set20{padding-top:20px; padding-bottom:20px;}
    .padding-set21{padding-top:21px; padding-bottom:21px;}
    .padding-set22{padding-top:22px; padding-bottom:22px;}
    .padding-set23{padding-top:23px; padding-bottom:23px;}
    .padding-set24{padding-top:24px; padding-bottom:24px;}
    .padding-set25{padding-top:25px; padding-bottom:25px;}
    .padding-set26{padding-top:26px; padding-bottom:26px;}
    .padding-set27{padding-top:27px; padding-bottom:27px;}
    .padding-set28{padding-top:28px; padding-bottom:28px;}
    .padding-set29{padding-top:29px; padding-bottom:29px;}
    .padding-set30{padding-top:30px; padding-bottom:30px;}
    .half .hs{width:100%;}
}
@media screen and (max-width:900px){.half, .third, .fourth, .ThirdofFourth{width:calc(100% - 14px);}}

.breadcrumb{display:flex;flex-wrap:nowrap;border-radius:5px;margin:0;background:#fff;height:65px;overflow:hidden;overflow-x:scroll;}
.breadcrumb a{
    width:auto;white-space:nowrap;display:flex;font-size:12px;padding:1px 40px 0 10px;
    position: relative;border:2px solid #ef4056;margin:5px 0;border-left:none;
}
.breadcrumb a:first-child{margin-right:-10px;padding:7px 0 0 30px;border-radius: 0 5px 5px 0;}
.breadcrumb a:first-child i{position:absolute;right:5px;z-index:2;}
.breadcrumb a:last-child{border-radius: 5px 0 0 5px;padding-left: 10px;margin-left:45px;}
.breadcrumb a.active,.breadcrumb a:hover{background: #ef4056;color:#fff;}
.breadcrumb a:not(.active):after{
    content: '';position: absolute;top:0;left: -17px;width:35px;height:36px;transform:scale(0.72) rotate(-135deg);z-index: 1;
	background:#fff;box-shadow: 2px -2px 0 0 #ef4056,3px -3px 0 2px rgba(255, 255, 255, 0);border-radius: 0 5px 0 50px;
}
.breadcrumb a:hover:after{background-color:#ef4056;color:#fff;box-shadow: 2px -2px 0 0 #fff,3px -3px 0 2px rgba(255, 255, 255, 0);}
.breadcrumb .fa{width:20px;height:20px;padding:0;position:absolute;right:18px;top:7px;}

.placer{background:#fff;position:fixed;width:100%;z-index:3;right:0;top:0;}
.placer-content{max-width:1300px;margin:0 auto;}
@media screen and (min-width:1000px){
    .placer-content.ScrollX-wrapper{padding-top:85px;border-bottom:none;}
    .menu-selector-arrows{position:absolute;top:-1px;background-color:#40EF81;height:45px;border-top:1px solid #e3e3e3;color:#FFF;}
    .right-arrows{padding:12px 0 0 0;border-left:1px solid #e3e3e3;border-radius:15px 0 0 0;}
    .left-arrows{padding:12px 3px 0 0;border-right:1px solid #e3e3e3;border-radius:0 15px 0 0;left:-4px;}
    .menu-selector-arrows .fa{padding:0;width:25px;height:25px;}
    .hs > .menu-selector{margin-right:60px;}
    .hs > .menu-selector ~ .menu-selector{margin-right:3px;}
}
@media screen and (max-width:1000px){
    .placer-content.ScrollX-wrapper{padding-top:70px;border-bottom:none;}
    .hs > .menu-selector{margin-right:15px;}
    .hs > .menu-selector ~ .menu-selector{margin-right:3px;}
    .menu-selector-arrows{display:none;}
}
.menu-selectors{position:relative;margin-bottom:-5px;cursor:pointer;z-index:40;}
.menu-selector{font-size:12px;width:auto;white-space:nowrap;padding:15px 8px;margin:0 3px;cursor:pointer;text-align:center;line-height:7px;transition:0.5s;}
.menu-selector:hover{color:#ef4056;border-bottom:4px solid #e3e3e3;transition:0.2s;}
.menu-selector.active{color:#ef4056;border-bottom:4px solid #ef4056;transition:0.2s;}
.menu-selector:last-child{margin-left:280px;}
.under-placer{margin-top:45px;}
.Scroll-Loader{min-height:300px;}


.loading-doc section{width:100%;height:auto;overflow:hidden;}

@media screen and (min-width:700px){
    .loading-doc{
        display:flex;flex-direction:row;justify-content:center;background-color:#fff;width:100%;height:auto;overflow:hidden;
        padding:55px 5px 5px 5px;border:1px solid #e3e3e3;border-radius:5px;align-items:stretch;flex-shrink:1;
    }
    .doc-detail{width:calc(100% - 35vw);min-width:calc(100% - 450px);height:100%;float:left;padding:5px;}
    .doc-button{position:absolute;width:calc(100% - 35vw);min-width:calc(100% - 488px);background-color:#ef4056;color:#fff;text-align:center;border-radius:5px;padding:10px 10px;cursor:pointer;}
    
    .doc-img{width:35vw;max-width:450px;height:35vw;max-height:440px;float:left;padding:5px;transition:0.3s;}
    .doc-img img{width:100%;object-fit:cover;float:right;padding:0;border-radius:5px;border:1px solid #ef4056;}
    .doc-img img:hover{object-fit:contain;}
    .doc-img-box{
        display:flex;flex-direction:row;justify-content:space-around;align-items:stretch;width:100%;height:auto;margin:10px 0;border-radius:5px;
        float:right;padding:5px;transition:0.3s;color:#fff;background-color:#40EFD9;
    }
    .doc-img-box i.fa{padding:0;margin:0;}
    .doc-img-box i.fa-send-o{padding:7px 0;margin:0;}
    .doc-img-box i b{font-family:'IRsanslight', Fallback, sans-serif;font-size:13px;color:#fff;}

    .doc-img-box .doc-bookmark.active{color:green;}
    .doc-img-box .doc-heart.active{color:#ef4056;}
    .doc-title{width:100%;height:auto;background-color:#4056EF;color:#fff;border-radius:5px 5px 0 0;text-align:center;padding:10px 10px;cursor:pointer;box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);}
    .doc-title h1{font-weight:900;font-size:16px;margin:0;}
    .doc-description{border:1px solid #ef4056;border-radius:0 0 5px 5px;line-height:30px;text-align:justify;text-justify:inter-word;margin-bottom:10px;overflow:hidden;}
    .doc-description h2{padding:0 10px 10px 0;font-size:18px;font-weight:600;line-height:20px;margin:0;}
    .doc-description .doc-info{padding:10px 10px;}
    .doc-description .doc-basket{padding:10px 10px;}
    .doc-description p{height:246px;box-shadow: rgba(0, 0, 0, 0.35) 0px -50px 36px -28px inset;overflow-y:auto;padding:10px 10px;}
    
    .doc-comment{border:1px solid #ef4056;border-radius:0 0 5px 5px;padding:10px 10px;line-height:30px;text-align:justify;text-justify:inter-word;margin-bottom:10px;overflow:hidden;overflow-y:auto;}
    .doc-info{
        display:flex;flex-direction:row;flex-wrap:wrap;margin:10px -5px 10px 0;align-items:stretch;justify-content:space-between;
        flex-shrink:1;width:calc(100% + 10px);
    }
    .doc-info-content{
        border-radius:5px;width:150px;border-radius:5px;margin:0 5px 10px 5px;background-color:#40EFD9;color:#fff;
        padding:10px;text-align:center;height:auto;font-weight:700;flex-grow:1;opacity:.7;font-weight:900;
    }
    .doc-info-content:hover{opacity:1;}
    .doc-info-content span:last-child{color:#fff;}
    .IconHolder{position:static;display:flex;align-items:center;justify-content:center;width:100%;padding:5px 0 0 0;}
    .doc-info-content i{font-size:30px;}
    .doc-basket{width:100%;height:40px;background-color:#ef4056;flex-grow:1;border-radius:0 0 5px 5px;transition:all 0.3s;margin-top:5px;}
    .doc-basket::before{content:"";position:absolute;top:0;left:0;background-color:#ffffff33;width:0;height:100%;border-radius:5px;transition:all 0.3s}
    .doc-basket:hover::before{width:100%;}
    .doc-basket:hover{transform:scale(1.01);}
    .doc-basket-f{display:none}
}
@media screen and (max-width:700px){
    .loading-doc{
        display:flex;flex-flow:column wrap;background-color:#fff;width:100vw;height:auto;overflow:hidden;
        padding:35px 0 5px 0;
    }
    .doc-detail{width:100%;height:100%;}
    .doc-button{position:absolute;width:calc(100% - 35vw);min-width:calc(100% - 488px);background-color:#ef4056;color:#fff;text-align:center;border-radius:5px;padding:10px 10px;cursor:pointer;}
    
    .doc-img{width:100vw;height:100vw;}
    .doc-img img{width:100%;padding:0;object-fit:cover}

    .doc-img-box{
        display:flex;flex-direction:row;justify-content:space-around;align-items:stretch;height:auto;margin:-46px 0;width:100vw;
        float:right;padding:5px;transition:0.3s;color:#fff;background: linear-gradient(to bottom, transparent 0%, black 100%);position:absolute;
    }
    .doc-img-box i.fa{padding:0;margin:0;}
    .doc-img-box i.fa-send-o{padding:7px 0;margin:0;}
    .doc-img-box i b{font-family:'IRsanslight', Fallback, sans-serif;font-size:13px;color:#fff;text-shadow:none}

    .doc-img-box .doc-bookmark.active{color:green;text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;}
    .doc-img-box .doc-heart.active{color:#ef4056;text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;}
    
    .doc-title{width:100%;height:auto;background-color:#4056EF;color:#fff;text-align:center;padding:10px 10px;cursor:pointer;box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);}
    .doc-title h1{font-weight:900;font-size:16px;margin:0;line-height:25px;}
    .doc-description{padding:10px 15px;line-height:30px;text-align:justify;text-justify:inter-word;margin-bottom:10px;overflow:hidden;}
    .doc-description .breadcrumb{margin-left:-15px}
    .doc-description h2{padding:0 10px 10px 0;font-size:18px;font-weight:600;line-height:20px;margin:0;}
    .doc-info{display:flex;flex-direction:row;flex-wrap:wrap;margin:0 0 10px 0;align-items:stretch;justify-content:space-between;width:100%;}
    .doc-info-content{
        border-radius:5px;width:150px;border-radius:5px;margin:0 5px 10px 5px;background-color:#40EFD9;color:#fff;
        padding:10px;text-align:center;height:auto;font-weight:700;flex-grow:1;opacity:.7;font-weight:900;
    }
    .doc-info-content:hover{opacity:1;}
    .doc-info-content span:last-child{color:#fff;}
    .IconHolder{position:static;display:flex;align-items:center;justify-content:center;width:100%;padding:5px 0 0 0;}
    .doc-info-content i{font-size:30px;}
    
    .doc-basket{background-color:#ef4056;flex-grow:1;border-radius:5px;transition:all 0.3s;margin:20px 0;}
    .doc-basket::before{content:"";position:absolute;top:0;left:0;background-color:#ffffff33;width:0;height:100%;border-radius:5px;transition:all 0.3s}
    .doc-basket:hover::before{width:100%;}
    .doc-basket:hover{transform:scale(1.01);}
    
    .doc-basket-f{position:fixed;right:0;bottom:0;height:50px;background-color:#ef4056;flex-grow:1;transition:all 0.3s;z-index:5;opacity:.95;padding:17px;}
    .doc-basket-f::before{content:"";position:absolute;top:0;left:0;background-color:#ffffff33;width:0;height:100%;border-radius:5px;transition:all 0.3s}
    .doc-basket-f:hover::before{width:100%;}
}

.box-HeaderBox{position:absolute;right:7px;margin-top:15px;padding:0 0 0 15px;height:40px;width:300px;border-radius:18px 0 0 18px;}

.loading-Menu .box-HeaderBox ~ .hs{margin-top:60px;}
.box-item{height:267px;width:170px;border-radius:5px;}

.box-text{width:calc(100% - 5px);height:20px;border-radius:5px;margin:10px 5px;}
.box-text:first-child{margin-right:50px;width:calc(100% - 50px);}
.box-text:last-child{width:calc(55% - 35px);}

.box-text1{width:calc(100% - 5px);height:20px;border-radius:5px;margin:10px 5px;}
.box-text1:first-child{margin-right:50px;width:calc(100% - 50px);}
.box-text1:last-child{width:calc(55% - 35px);}

.loading {
    z-index:1;
  position: absolute;
  height: 2em;
  width: 2em;
  margin: auto;
  top: 100px;
  left: 100px;
  bottom: 300px;
  right:100px;
}
.loading:not(:required):after {
  content: '';
  display: block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(239, 64, 86, 1) 1.5em 0 0 0, rgba(239, 64, 86, 1) 1.1em 1.1em 0 0, rgba(239, 64, 86, 1) 0 1.5em 0 0, rgba(239, 64, 86, 1) -1.1em 1.1em 0 0, rgba(239, 64, 86, 0.5) -1.5em 0 0 0, rgba(239, 64, 86, 0.5) -1.1em -1.1em 0 0, rgba(239, 64, 86, 1) 0 -1.5em 0 0, rgba(239, 64, 86, 1) 1.1em -1.1em 0 0;
  box-shadow: rgba(239, 64, 86, 1) 1.5em 0 0 0, rgba(239, 64, 86, 1) 1.1em 1.1em 0 0, rgba(239, 64, 86, 1) 0 1.5em 0 0, rgba(239, 64, 86, 1) -1.1em 1.1em 0 0, rgba(239, 64, 86, 1) -1.5em 0 0 0, rgba(239, 64, 86, 1) -1.1em -1.1em 0 0, rgba(239, 64, 86, 1) 0 -1.5em 0 0, rgba(239, 64, 86, 1) 1.1em -1.1em 0 0;
}
@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}