@font-face {

    font-family: 'SaitakIranSans';

    src: url('/assets/fonts/iransans/IRANSansWeb(FaNum).eot');

    src: url('/assets/fonts/iransans/IRANSansWeb(FaNum).eot?#iefix') format('embedded-opentype'),

         url('/assets/fonts/iransans/IRANSansWeb(FaNum).woff2') format('woff2'),

         url('/assets/fonts/iransans/IRANSansWeb(FaNum).woff') format('woff'),

         url('/assets/fonts/iransans/IRANSansWeb(FaNum).ttf') format('truetype');

    font-weight: normal;

    font-style: normal; 

}

@font-face {

    font-family: 'SaitakIranSans';

    src: url('/assets/fonts/iransans/IRANSansWeb(FaNum)_Medium.eot');

    src: url('/assets/fonts/iransans/IRANSansWeb(FaNum)_Medium.eot?#iefix') format('embedded-opentype'),

         url('/assets/fonts/iransans/IRANSansWeb(FaNum)_Medium.woff2') format('woff2'),

         url('/assets/fonts/iransans/IRANSansWeb(FaNum)_Medium.woff') format('woff'),

         url('/assets/fonts/iransans/IRANSansWeb(FaNum)_Medium.ttf') format('truetype');

    font-weight: bold;

    font-style: normal; 

}

@font-face {

    font-family: 'SaitakIranSans';

    src: url('/assets/fonts/iransans/IRANSansWeb(FaNum)_Light.eot');

    src: url('/assets/fonts/iransans/IRANSansWeb(FaNum)_Light.eot?#iefix') format('embedded-opentype'),

         url('/assets/fonts/iransans/IRANSansWeb(FaNum)_Light.woff2') format('woff2'),

         url('/assets/fonts/iransans/IRANSansWeb(FaNum)_Light.woff') format('woff'),

         url('/assets/fonts/iransans/IRANSansWeb(FaNum)_Light.ttf') format('truetype');

    font-weight: 200;

    font-style: normal; 

}



*{margin:0 auto;padding:0;}

.clear {clear: both;}

a {text-decoration: none;color: #444444;}

a:hover{color: #007588;}

:focus {outline: none;}

.clear10 {clear: both;height: 10px;}

.red_color {color:#cc0000;}

a.chatwa {

    position: fixed;

    bottom: 50px;

    right: 50px;

    width: 64px;

    height: 64px;

    background: url('/assets/images/chatwa.png') no-repeat center;

    background-size: 100% auto;

    cursor: pointer

}



body {

    direction: rtl;

    background:#fff;

    font: 1em SaitakIranSans;

    font-weight: 200;  

    line-height: 1.8;

    color: #444;

    padding-top: 70px;

}



.fix_loading {

    position: fixed;

    top:0;

    left: 0;

    width: 100%;

    height: 100%;

    background: #fff url('https://www.customerbox.ir/assets/images/loading.gif') no-repeat center;

    background-size: 1% auto;

    z-index: 11;

    opacity: 0.9;

}



.container {

    width: 90%;

    height: auto;

    max-width: 1200px;

    position: relative;

}



.centeralign {

    text-align: center;

    font-size: 120%;

}



.text_container {

    min-height: 200px;

    line-height: 34px;

    color: #666;

    font-size: 1em;

    font-weight: 200;

    line-height: 1.8;

    padding: 50px 0;

    text-align: justify;

}



.text_container h2 {

    text-align: right;

    line-height: 1.8;

}



.text_container img {

    max-width: 100%;

}



.text_container ul {

    padding-right: 60px;

    padding-bottom: 10px;

}



.text_container ul li {

    line-height: 1.8;

    padding: 7px 0;

}



.blog_container { padding-top: 30px;width: 80%;max-width: 800px;}



.product_container {background:#f9f9f9;padding-bottom: 50px;}



.price_button {

    width: auto;

    height: 34px;

    background: #444;

    position: relative;

    padding-right:85px;

    padding-left: 15px;

    color:#fff;

    font-size: 14px;

    line-height:34px;

    display: inline-block;

}



.price_button .title {

    position: absolute;

    top:0;

    right: 0;

    background:#007588;

    height: 100%;

    width: 65px;

    padding-left: 5px;

    text-align: center;

}

.price_button .title i{

     width: 0;

     height: 0;

     border-top: 5px solid transparent;

     border-left: 6px solid #444;

     border-bottom: 5px solid transparent;

     position: absolute;

     left: 0;

     top: 50%;

     margin-top:-5px;

}



.seprator{

    margin-top: 10px;

    clear: both;

}



.big_seprator{

    margin-top: 30px;

    clear: both;

}



.highlight {color: #007588;}



h2.highlight {

    padding-right: 10px;

    padding-bottom: 10px;

}



/* ************** Responsive Menu **************** */

.nav_responsive {

    width: 40px;

    height: 40px;

    background: #007588 url('https://www.customerbox.ir/assets/images/menu.png') no-repeat center;

    background-size: 20px auto;

    cursor: pointer;

    position: fixed;

    top: 23px;

    left: 20px;

    display: none;

    z-index: 14;

    border-radius:3px;

}



.close_nav {background-image: url('https://www.customerbox.ir/assets/images/close.png');}



.res_nav {

    position: fixed;

    top: -100%;

    left: 0;

    width: 100%;

    height: auto;

    background:rgba(255,255,255,0.95);

    box-shadow: 0 0 12px rgba(0,0,0,0.3);

    z-index: 10;

    padding-top: 95px;

    box-sizing: border-box;

    color:#666;

    overflow: auto;

    display: none;

    text-align: right;

}



.res_nav .navicon {

    width: 40px;

    height: 40px;

    position: absolute;

    top: 10px;

    left: 10px;

    background: #138182 url('https://www.customerbox.ir/assets/images/close.png') no-repeat center;

    background-size: 20px auto;

    cursor: pointer;

    border-radius:3px;

}



.res_nav ul.base {

    list-style-type: none;

    width: 100%;

    height: auto;

}



.res_nav ul.base li a{

    display: block;

    color:#666;

    background: none;

    font-weight: normal;

    font-size: 13px;

    line-height:20px;

    border-bottom:1px solid #eee;

    padding: 10px 20px

}



.res_nav ul.base li a.selected {color: #fff;}

.res_nav ul.base li ul {

    display: none;

    background: #f9f9f9;

    margin-top: -1px;

    border-bottom:2px solid #ddd;

}



.res_nav ul.base li.have_sub a {

    background: url('https://www.customerbox.ir/assets/images/h_arrow_responsive.png') no-repeat left center;

}



.res_nav ul.base li.have_sub ul li a{

    background: none;

    padding-right: 30px;

}



.res_nav ul.base li.have_sub ul li:last-child a{

    border: 0;

}

.res_nav ul.base li.anti a{direction: ltr;text-align: left;}



/* ************** Responsive Menu **************** */





/*************** Start firstpage  ************/



.firstpage {

    text-align: center;

    color: #444444;

    background: #007588 url('https://www.customerbox.ir/assets/images/pattern.png') repeat;

    background-size: 200px auto;

    height: 800px;

    overflow: hidden;

    position: relative;

}



.scroll_down{

    width: 35px;

    height: 28px;

    position: absolute;

    bottom: 20px;

    left: 50%;

    margin-left: -17px;

    background: url('https://www.customerbox.ir/assets/images/nowruz97/arrow.png') no-repeat top center; 

    background-size: 100% auto;

    cursor: pointer;

    z-index: 4;

}



.firstpage .mess {

    width: 600px;

    height: 360px;

    background: rgba(0,0,0,0.5) url('https://www.customerbox.ir/assets/images/nowruz97/mess.png') no-repeat right bottom;

    border-radius: 3px;

    color:#fff;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-top: -180px;

    margin-left: -300px;

    text-indent: -1500px;

    overflow: hidden;

}



.firstpage .dog {

    width: 450px;

    height: 450px;

    background: url('/assets/images/nowruz97/dog.png') no-repeat center;

    background-size: 100% auto;

    position: absolute;

    cursor: pointer;

    bottom: -450px;

    left: 100px;

}





/*************** End firstpage ************/



.secondpage {

    min-height: 10px;

    padding-top: 70px;

    background:#f9f9f9;    

}



.nav{

    position: fixed;

    top: 0;

    left: 0;

    z-index: 13;

    width: 100%;

    height: 70px;

    background: #fff;

    line-height: 70px;

    border-bottom:1px solid #ddd;

    box-sizing: border-box;

}



.nav_hide {

    display: none;

}



.logo{

    float: right;

    width: 200px;

    height: 70px;

    overflow: hidden; 

    text-indent: -99999px;

    background: url('https://www.customerbox.ir/assets/images/logo.png?v=2') no-repeat center right;

    background-size: auto 60%;

}



.nav ul { 

    list-style-type: none;

    float: left;

}



.nav ul li { 

    display: inline-block;

    margin: 0 2px;

    position: relative;

}



.nav ul li a {

    width: auto;

    float: right;

    text-align: center;

    color: #444444;

    font-size: 0.9em;

    padding: 0 10px;

    line-height: 69px;

}



.nav ul li a:hover , .nav ul li a.selected {color: #007588;}

.nav ul li a.selected {border-bottom:1px solid #007588;font-weight: bold;}



.nav ul li:hover {background:#f9f9f9;}

.nav ul li:hover > ul {display: block;}



.nav ul li ul { 

    position: absolute;

    top: 70px;

    right: 0;

    background:#f9f9f9;

    display: none;

    min-width: 200px;

    box-sizing: border-box;

    box-shadow: 0 3px 6px rgba(0,0,0,0.3);

}



.nav ul li ul li {

    height: 50px;

    display: block;

    line-height: 50px;

}



.nav ul li ul li a {

    height: 50px;

    float: none;

    text-align: right;

    display: block;

    border-top:1px solid #eee;

    line-height: 50px;

}



.nav ul li ul li:first-child a {

    border: 0;

}



#footer {

    width: 100%;

    height: auto;

    background: #fcfcfc;

    padding-top: 14px;

    margin-bottom: 20px;

}



#footer .infooter {

    background:#fcfcfc;

    padding: 30px 0;

}



#footer .foot_part {

    float: left;

    width: 29.33%;

    margin: 2%;

    color:#32373e;

    font-size:12px;

    text-align: justify;

    line-height: 2.8;

}



#footer a {color:#32373e;}

#footer a:hover {color:#000;}



#footer .foot_part .title {

    color:#000;

    display: block;

    font-size: 18px;

}



#footer .social {

    text-align: center;

}

#footer .social a{

    padding:0;

    height: 50px;

    display: inline-block;

    position: relative;

    margin: 0 15px;

}



#footer .social a span {

    width: 24px;

    height: 18px;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-top: -9px;

    margin-left: -12px;

    background:url('https://www.customerbox.ir/assets/images/icons.png') no-repeat;

    background-size: 18px auto;

}



#footer .social a.ig span {background-position: 0 -36px;}

#footer .social a.fb span {background-position: 0 0;}

#footer .social a.tw span {background-position: 0 -18px;}

#footer .social a.tg span {background-position: 0 -54px;}

.social a.ig:hover {background-position: 0 -312px;}

.social a.tg:hover {background-position: 0 -336px;}

.social a.ap:hover {background-position: 0 -360px;}



#footer .form_loading{position: relative;}

#footer .newsletter {

    width: 100%;

    height: 40px;

    position: relative;

    margin-top: 20px;

}



#footer .newsletter .emailphone {

    width: 100%;

    height: 100%;

    background: rgba(255,255,255,0.7);

    direction: ltr;

    padding: 0 20px;

    padding-left: 100px;

    color:#444;

    border: 1px solid #cdcdcd;

    box-sizing: border-box;

    font-family: inherit;

    font-size: 1.3em;

    font-weight: 200;

    border-radius: 6px;

}

#footer .newsletter .emailphone:focus  {background: rgba(250,250,255,0.8);}



#footer .newsletter input[type="text"]:-ms-input-placeholder {text-align: right;font-size: 75%;}

#footer .newsletter input[type="text"]::-webkit-input-placeholder {text-align: right;font-size: 75%;}

#footer .newsletter input[type="text"]:-moz-placeholder {text-align: right;font-size: 75%;}

#footer .newsletter input[type="text"]::-moz-placeholder {text-align: right;font-size: 75%;}





#footer .newsletter .submit{

    position: absolute;

    top: 2px;

    left: 2px;

    width: 90px;

    height: 36px;

    background: #ddd;

    background-size: 20px auto;

    border-radius: 6px;

}

#footer .newsletter .submit:hover{background:#007588;}



#footer .newsletter .submit input{

    border: 0;

    background: none;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    cursor: pointer;

    color: #444;

    font-family: inherit;

    font-size: 1.2em;

    font-weight: 200;

}



#footer .newsletter .submit input:hover{color: #fff;}



#footer .alert {

    width: 100%;

    height: auto;

    z-index: 1;

    display: none;

    line-height: 220%;

    padding: 5px 10px;

    box-sizing: border-box;

    cursor: pointer;

    color:#444;

    font-size: 1em;

}



#footer .error_message_newsletter {color: #cc0000;}

#footer .success_message_newsletter{color: #006600;}





#certificates {

    width: 100%;

    position: relative;

    background: #fcfcfc;

    height: auto;

    text-align: center;

    padding:20px 0;

}



#certificates .container {direction: ltr;}



#certificates a {

    display: inline-block;

    width: auto;

    padding: 0 15px;

    padding-top: 45px;

    font:9px Arial;

    line-height: 20px;

    color:#53565f;

    position: relative;

    text-align: center;

    white-space: nowrap;

    opacity: 0.7;

}

#certificates a:hover {opacity:1;color: #53565f;}

#certificates a .icon {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 35px;

    background: url('https://www.customerbox.ir/assets/images/certificates.png') no-repeat top center;

}



#certificates a.responsive .icon {background-position: center 0;}

#certificates a.html5 .icon {background-position: center -35px;}

#certificates a.css3 .icon {background-position: center -70px;}

#certificates a.gtmetrix .icon {background-position: center -105px;}

#certificates a.alexa .icon {background-position: center -140px;}

#certificates a.mellat .icon {background-position: center -175px;}

#certificates a.shetab .icon {background-position: center -210px;}



.sharing, .pagein .sharing {text-align:center;margin-top:25px;}

.sharing .title, .pagein .sharing .title {font-size:15px;}

.sharing a, .pagein .sharing a {

    display:inline-block;

    width:24px;

    height:24px;

    margin:10px 3px 0 0;

    background:url(https://www.customerbox.ir/images/fb.png) no-repeat top center;

    border-radius:2px;

}

.sharing a.tw, .pagein .sharing a.tw {background-image: url(https://www.customerbox.ir/images/tw.png);}

.sharing a.gp, .pagein .sharing a.gp {background-image: url(https://www.customerbox.ir/images/gp.png);}

.sharing a:hover, .pagein .sharing a.tw:hover {background-position: bottom center;}



/* *********** SLIDER ************ */



#slider {

    width: 100%;

    height: 470px;

    color:#444;

    position: relative;

    box-sizing: border-box;

    overflow: hidden;

}



.slide a{cursor: pointer;}



#slider .details , #slider .photo{

    width: 50%;

    height: 400px;

    float: right;

}



#slider .photo{

    height: 400px;

    float: left;   

    display: block;

    position: relative;

}



#slider .details{

    box-sizing: border-box;

    color: #2c2c2c;

    line-height: 180%;

}



#slider .details h3{

    color: #4a2e1e;

    font-size: 2em;

    margin-bottom: 40px;

    margin-top: 100px;

}



#slider .details b{

    font-size: 1.6em;

    font-weight: 200;

    margin-top: 100px;

}





#slider .buttons a.button{

    background: #4a2d1d;

    color: #fff;

    height: 100px;

    padding: 12px;

    border-radius: 3px;

    margin-left: 10px;

}



#slider .buttons a.button:hover{

    opacity: 0.85;

}



#slider .photo img{

    float: left;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50% , -50%);

    max-width: 100%;

    max-height: 100%;

    width: auto;

    height: auto;

}



#slider .bulbs {

    position: absolute;

    bottom: 30px;

    left: 50%;

    width: auto;

    height: 16px;

    z-index: 2;

}



#slider .bulbs .swiper-pagination-bullet {

    cursor: pointer;

    width: 16px;

    height: 16px;

    background: #007588;

    opacity: 0.3;

    border-radius:8px;

    margin-left: 7px;

    float: right;

}

#slider .bulbs .swiper-pagination-bullet:hover{opacity:0.8;}

#slider .bulbs .swiper-pagination-bullet-active, #slider .bulbs .swiper-pagination-bullet-active:hover {opacity:1;cursor: default}





.features{

    width: 100%;

    text-align: center;

    margin-top: 100px;

}



.features .title{

    display: inline-block;

    font-size: 2em;

    border-bottom: 1px solid #007588;

    width: auto;

}



.features .feature{

    text-align: justify;

    text-align-last: center;

    width: 25%;

    height: 350px;

    font-size: 0.8em;

    color: #6a6a6a;

    display: inline-block;

    float: right;

    padding: 30px;

    box-sizing: border-box;

    overflow: hidden;

    position: relative;

}



.features .feature .icon{

    position: relative;

    width: 128px;

    height: 128px;

}

.features .feature .icon span {

    width: 80px;

    height: 80px;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-top: -40px;

    margin-left: -40px;

    background: url('https://www.customerbox.ir/assets/images/feature.png') no-repeat;

    background-size: auto 800%;

    opacity: 0.8;

}



.features .feature .icon1 span { background-position: 0 0; }

.features .feature .icon2 span { background-position: 0 -80px; }

.features .feature .icon3 span { background-position: 0 -160px; }

.features .feature .icon4 span { background-position: 0 -240px; }

.features .feature .icon5 span { background-position: 0 -320px; }

.features .feature .icon6 span { background-position: 0 -400px; }

.features .feature .icon7 span { background-position: 0 -480px; }

.features .feature .icon8 span { background-position: 0 -560px; }



.features .feature b{

    font-size: 1.1em;

    font-weight: 400;

    display: block;

    text-align: center;

    margin-top: 20px;

}



.cat_header {

    width: 100%;

    height: auto;

    padding: 50px 0;

    text-align: right;

    box-sizing: border-box;

    background:#007588 url('https://www.customerbox.ir/assets/images/pattern.png') repeat;

    background-size: 200px auto;

    margin-top: 70px;

    background-attachment: fixed;

    color:#fff;

    border-bottom:5px solid #333;

}



.cat_header .container {

    min-height: 120px;

}



.cat_header h1 {

    font-weight: normal;

    font-size: 1.5em;

    display: inline-block;

    width: auto;

    background: rgba(0,0,0,0.5);

    position: absolute;

    top: 50%;

    left: 50%;

    padding: 10px 20px;

    transform: translate(-50%, -50%);

    border-radius:3px;

    cursor: default;

}





.product {

    width: 32.33%;

    margin: 0.5%;

    height: 350px;

    background:#fff;

    color: #444;

    padding: 20px;

    font-size:0.8em;

    box-sizing: border-box;

    position: relative;

    float: right;

    border: 1px solid #f3f3f3;

    padding-top: 250px;

}



.product:hover {

    box-shadow: 0 0 5px rgba(0,0,0,0.1);

}



.product .cover{

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 240px;

    background-repeat: no-repeat;

    background-position: left top;

    background-size:  auto 100%;

    overflow: hidden;

}



.product h2 {font-size:1.4em;}

.product h3 {font-size:1em;font-weight: normal;}

.product h2 span {margin: 0 4px;}

.product_code{color: #555;font-size: 10px;line-height: 20px;}

.code{font-family: arial;}



.tag {

    display: inline-block;

    padding: 0 10px;

    border-radius: 3px;

    cursor: default;

    font-weight: normal;

    font-size: 12px;

    line-height:22px;

}




.tag_float {

    position: absolute;

    top: 35px;

    left: 0;

}



.p_details{

    color:#666;

    padding-bottom: 50px;

}



.product_header {

    width: 100%;

    height: 180px;

    text-align: center;

    background: #007588 url('https://www.customerbox.ir/assets/images/pattern.png') repeat center;

    background-size: 200px auto;

    box-sizing: border-box;

    margin: 70px 0 20px 0;

    background-attachment: fixed;

    position: relative;

}



.product_header h1 {

    color:#fff;

    text-shadow: 0 0 5px rgba(0,0,0,0.7);

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    background: rgba(0,0,0,0.5);

    padding: 3px 15px;

    border-radius:  3px;

}



.yalda{

    width: 24%;

    height: 350px;

    padding: 5px 10px;

    padding-top: 260px;

    color: #555;

    border: 0;

    border-bottom:1px solid #ddd;

}



.yalda:hover {

    box-shadow: 0 0 7px rgba(0,0,0,0.1);

    border-bottom-color:#007588;

    color:#007588;

}



.yalda h2 {

    font-size:16px;

}

.product h3 {

    font-size:12px;

    font-weight: normal;

    line-height:18px;

    padding-bottom:10px;

}



.yalda .cover{

    height: 250px;

}



.yalda .price {text-align: center;}

.yalda .old_price{

    color: #555555;

    font-size: 12px;

    text-decoration: line-through;

    margin-left: 5px;

}

.yalda .now_price{

    color: #333333;

    font-size: 16px;

}



.yalda_features{

    background: #007588;

    color: #fff;

    font-size: 16px;

    line-height: 180%;

    width: 100%;

    text-align: center;

    height: 270px;

    box-sizing: border-box;    

}



.yalda_features .feature{

    text-align: justify;

    text-align-last: center;

    width: 25%;

    display: inline-block;

    float: right;

    box-sizing: border-box;

    overflow: hidden;

    position: relative;

}



.yalda_features .feature .icon{

    position: relative;

    width: 128px;

    height: 128px;

    margin-bottom: 15px;

    text-align-last: center;

}

.yalda_features .feature .icon span {

    width: 80px;

    height: 80px;

    position: absolute;

    top: 50%;

    right: 18%;

    background: url('https://www.customerbox.ir/assets/images/features.png') no-repeat;

    background-size: auto 400%;

}



.yalda_features .feature .icon1 span { background-position: 0 0; }

.yalda_features .feature .icon2 span { background-position: 0 -80px; }

.yalda_features .feature .icon3 span { background-position: 0 -160px; }

.yalda_features .feature .icon4 span { background-position: 0 -240px; }





#box_content {

    padding-top: 20px;       

}



.big_price {

    font-size: 32px;

    text-align: center;

    margin-top: 40px;

    cursor: default;

    font-weight: bold;

}



.big_price span {

    border:1px solid #007588;

    border-radius: 70px;

    padding: 3px 40px;

}



.big_price a {

    font-size:11px;

    color:#cc0000;

    margin-top: 5px;

}



.big_price small {

    font-size: 14px;

}



.numeric {

    float: left;

    width: 20%;

    text-align: center;

    color:#444;

    padding-bottom: 10px;

    cursor: default;

    border-radius: 5px;

    font-size: 2.5em;

    padding-top: 20px;

    direction: ltr;

    box-sizing: border-box;

}

.numeric:hover {background:#f9f9f9;}



.numeric small {

    font-size: 0.4em;

    font-weight: 300;

    direction: rtl;

    display: block;

}



.numeric .number img {

    max-height: 24px;

}



.absolute_loading, .row_tiny .success, .row_tiny .error {

    position: absolute;

    top: 0;

    left: 0;

    background: rgba(255,255,255,0.7) url('https://www.customerbox.ir/assets/images/tiny_loading.gif') no-repeat center;

    width: 100%;

    height: 100%;

    z-index: 3;

    display: none;

    padding:  10px;

    box-sizing: border-box;

}





.product_page .big_side .absolute_loading {

    background-color: rgba(249,249,249,0.7);

}





.ltr {direction: ltr;}





.floated {

    float: left;

    width: 450px;

    height: auto;

    margin-right: 30px;

    margin-top: 40px;

}



.notification {

    padding: 10px;

    width: 99%;

    background: #fdfdfd;

    border-radius: 5px;

    border:1px solid #007588;

    box-sizing: border-box;

    font-size: 14px;

    margin-bottom: 10px;

}

.notification_full {width: 100%;}



.notification b {

    color:#333;

    font-size: 16px;

}



.flex_mkr {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.flex_mkr:after {

  content: ' ';

  flex: 1;

}



a.blog_load{

    color: #444;

    font-size: 0.8em;

    box-sizing: border-box;

    flex: 0 1 calc(25% - 10px);

    border: 1px solid #eee;

}



a.blog_load .photo{

    width: 100%;

    display: block;

}



a.blog_load .info{

    padding: 5px 20px;

    box-sizing: border-box;

}

  

a.blog_load b {

    color:#333;

    font-size: 16px;

    font-weight: bold;

    line-height: 1.8;

    overflow: hidden;

    display: block;

    margin-top: 10px;

}



a.blog_load small {

    color:#777;

    font-size: 10px;

}

   

a.blog_load span{

    color: #555;

    height: 120px;

    overflow: hidden;

    display: block;

    line-height:200%;

    font-size: 0.9em;

    margin-top: 10px;

}

  

.more{

    position: absolute;

    left: 25%;

    bottom: 15px;

    width: 50%;

    color: #007588;

    text-align: center;

    background: #f9f9f9;

    border: 1px solid #007588;

    border-radius: 20px;

    font-size: 0.9em;

    font-weight: 400;

    padding: 2px 0;

    box-sizing: border-box;

}

  

.more:hover{background: #007588;color: #fff;}





.product_page {

    background:#f9f9f9;   

    position: relative;

}



.product_page .code {

    position: absolute;

    top: 70px;

    left: 0px;

    font-size: 12px;

    text-align: left;

    font: inherit;    

}



.product_page .code .en {display: inline-block;font:14px Arial;}



.product_page h1 {line-height:40px;}

.product_page h3 {

    line-height:30px;

    padding-bottom:7px;

    margin-bottom:15px;

    border-bottom:1px solid #eee;

    margin-top: 40px;

}



.product_page h1 small, .product_page h3 small {

    display: block;

    font-weight: normal;

    color:#333;

    font-size:14px;

}



.product_page .flex_maker {

    display: flex;

}



.product_page .big_side {

    width: 70%;

    box-sizing: border-box;

    padding-left: 20px;

    position: relative;

}



.product_page .small_side {

    width: 30%;

    box-sizing: border-box;

    padding-right: 20px;

}



.product_page .gallery {

    margin-top: 20px;

}



.product_page .gallery a:first-child{

    width: 100%;

    height: auto;

    display: block;

}



.product_page .gallery a img {

    width: 100%;

    display: block;

}

.product_page .gallery .thumbs {

    display: flex;

    flex-wrap: wrap;

    margin-top: 10px;

}

.product_page .gallery .thumbs a {

    flex: 0 1 calc(16.6666% - 10px);

    margin: 5px;

}



.product_page .gallery .thumbs a:hover {

    box-shadow: 0 0 7px rgba(0,0,0,0.2);

}



label {

    line-height: 18px;

    display: block;

}



.textput {

    width: 100%;

    height: 40px;

    background:#fff;

    border:1px solid #eee;

    border-radius:3px;

    font: inherit;

    display: inline-block;

    padding: 5px 15px;

    font-size: 12px;

    margin-top: 7px;

    box-sizing: border-box;

}



.small_side .price_input {

    text-align: left;

    direction: ltr;

    font-size: 14px;

}



.small_side .product_option {

  background:#fff;

  border-radius:5px;

  box-sizing: border-box;

  overflow: hidden;

  position: relative;

  padding: 10px 100px;

  font-size: 12px;

  border-bottom:1px solid #eee;

  min-height: 100px;

}



.small_side .product_option .option_photo {

  overflow: hidden;

  position: absolute;

  height: 80px;

  width: 80px;

  top: 50%;

  right: 10px;

  margin-top: -40px;

  border-radius:5px;

}



.small_side .product_option .option_photo img {

    position: absolute;

    height: 100%;

    width: auto;

    top: 0;

    left: 50%;

    transform: translate(-50%, 0);

}



.small_side .product_option .textput {

    height: 30px;

    width: 80px;

    cursor: pointer;

}



.small_side .product_option .qty_select {

    position: absolute;

    width: 80px;

    height: 40px;

    overflow: hidden;

    top: 50%;

    left: 10px;

    margin-top: -20px;

}



.small_side .option_group {

    margin-top: 20px;

}



.small_side .option_group h4 {

    display: block;

    line-height: 1.5;

}



.small_side .option_group small {

    display: block;

    font-size:11px;

    line-height: 1.8;

    margin-bottom:7px;

}



.price_estimate {

    background:#fff;

    margin-top:20px;

    border:1px solid #eee;

    border-radius:5px;

    padding:10px;

    text-align:center;

    position: relative;

    overflow: hidden;

}

.price_estimate .prices {

    display:flex;

    margin-top:20px;

}

.price_estimate .price_part small {

    display:block;

    line-height:1.6;

}

.price_estimate .price_part {

    box-sizing: border-box;

    width: 50%;

}

.price_estimate .price_part:first-child {

    border-left:1px solid #ddd;

}

.price_estimate .price_part b {

    display:block;

    font-size:18px;

    line-height:1.8;

}

.group_error {

    display: block;

    font-size: 11px;

    font-weight: bold;

    display: none;

    color:#aa0000;

    padding:5px 10px;

    border:1px solid #aa0000;

    background:#fff4f4;

    border-radius: 3px;

    margin-bottom: 5px;

}



.blurer_active {

    filter: blur(2px);

}



.error_estimate {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    color:#cc0000;

    display: none;

}



.error_estimate .text {

    position: absolute;

    top: 50%;

    left: 10%;

    width: 80%;

    text-align: center;

    transform: translate(0, -50%);

    z-index: 3;

    font-weight: bold;

}



.price_estimate .subput {

    display: block;

    margin-top: 10px;

    background:#007588;

    color:#fff;

    border-radius: 5px;

}



.part {

    width: 33.33%;

    padding: 10px;

    box-sizing: border-box;

    float: right;

    position: relative;

    min-height: 100px;

}



.part25 {width: 25%;}

.part_full {width: 100%;}

.part_50 {width: 50%;}

.part75 {width: 75%;}

.part_full .subput {float: left;}



.part label {

    display: block;

    line-height: 36px;

    color:#444;

    position: relative;

    height: 36px;

}



.part label small {

    display: inline;

    line-height: 36px;

    height: 36px;

}





.part label.required {

    padding-right: 10px;

}



.part .textput{

    width: 100%;

    border-radius: 3px;

    background:#fff;

    border:1px solid #ddd;

    font: inherit;

    height: 42px;

    padding: 5px 15px;

    box-sizing: border-box;

}



.part .textput_en {

    direction: ltr;

}



.part .textput:focus {border-color:#aaa;}



.part .textput::placeholder {

    color:#999;

    text-align: right;

    direction: rtl;

}



#part_submit label {height:10px;}



.part .subput {

    width: auto;

    color: #fff;

    font-weight: bold;

    background: #007588;

    border: 0;

    cursor: pointer;

    border-radius: 3px;

    height: 40px;

    padding: 0 40px;

    font: inherit;

}



.part .subput:hover {opacity: 0.8;}



.part label i {

    width: 4px;

    height: 4px;

    border-radius: 100%;

    background:#cc0000;

    display: inline-block;

    margin-right: 3px;

    position: absolute;

    top: 50%;

    right: 0;

    margin-top: -2px;

}





#part_region {display: none;}



.note {

    padding: 20px;

    border:1px solid #ddd;

    border-radius: 5px;

    margin: 10px;

}



.big_success_message {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    padding: 40px;

    box-sizing: border-box;

    text-align: center;

    background: #f9f9f9;

    z-index: 3;

    padding-top: 340px;

    display: none;

}



.big_success_message i {

    position: absolute;

    top: 40px;

    left: 50%;

    width: 300px;

    height: 300px;

    margin-left: -150px;

    background: url('/assets/images/12.gif') no-repeat center;

    background-size: 100% auto;

    opacity:0.8;

}



.big_success_message b {

    display: block;

    font-size: 22px;

    color:#3eb601;

}



.big_success_message a {

    border-bottom:1px dashed #aaa;

    padding-bottom:3px;

}



.tag_posts {

  display: flex;

  flex-wrap: wrap;

}



.tag_posts .post {

  flex: 0 1 24%;

  margin: 0 0.5%;

  padding: 20px 10px;

  box-sizing: border-box;

  overflow: hidden;

  max-height:400px;

  margin-bottom: 20px;

  box-shadow: 0 0 5px rgba(0,0,0,0.2);

  border-radius: 7px;

  font-size: 12px;

  line-height: 1.7;

}



.tag_posts .post h2 {

  font-size: 18px;

  line-height: 1.4;

  height: 70px;

}



.tag_posts .post img {

  width: 100%;

  height: auto;

}



.tag_posts .post .tags {

  display: none;

}







@media all and (max-width: 900px) {

    .nav ul {display: none;}

    .res_nav {display: none;}

    .nav_responsive {display: block;}



    #footer .foot_part {

        width: 100%;

        font-size:12px;

        line-height: 2;

    }

    

    #footer .foot_part .title {

        font-size: 16px;

    }

    

    .product_page .code {

        position: relative;

        top: auto;

        left: auto;

        text-align: center;

        display: block;

    }



    .product_page .big_side {

        width: 100%;

        padding-left: 0;

    }

    

    .product_page .small_side {

        width: 100%;

        padding-right: 0;

    }    



    .product_page .flex_maker {

        display: block;

    }

    

    .blurer_big .part {

        width: 100%;

    }

    .product_page h1 {

        text-align: center;

    }



}



@media all and (max-width: 800px) {

    .row_title {width: 100%;margin-bottom:7px;background:#fcfcfc;}

    .numeric {width:33.33%;}

    .floated {

        float: none;

        width: 450px;

        height: auto;

        margin-right: auto;

        margin-top: 0;

    }

    .product {width: 49%;}

    a.blog_load{flex: 0 1 calc(50% - 10px);}

}

@media all and (max-width: 700px) {

    .features .feature{width: 50%;}



    #slider .details , #slider .photo{

        width:100%;

        height: 150px;

        float: none;

    }

    #slider .photo{height: 250px;}

    #slider .details h3{

        font-size: 1.4em;

        margin-top: 10px;

        margin-bottom: 20px;

    }

    #slider .details .des{font-size: 0.95em;}

    #slider .details b{font-size: 1em;}

    

    .yalda_features {

        font-size: 13px;

        height: 400px;

    }

    

    .yalda_features .feature {

        padding: 0 10px;

        box-sizing: border-box;

        width: 50%;

    }

    

    .yalda_features .feature .icon{

        position: relative;

        width: 80px;

        height: 80px;

    }

    .yalda_features .feature .icon span {

        width: 60px;

        height: 60px;

    }

    

    .yalda_features .feature .icon1 span { background-position: 0 0; }

    .yalda_features .feature .icon2 span { background-position: 0 -60px; }

    .yalda_features .feature .icon3 span { background-position: 0 -120px; }

    .yalda_features .feature .icon4 span { background-position: 0 -180px; }

}







@media all and (max-width: 500px) {

    .firstpage .logo{

        width: 300px;

        height: 76px;

        background-size: auto 60%;

        margin-top: 40px;

    }

    .suprise{font-size: 1.5em;margin-top: 30px;}

    .secondpage .details .title{ font-size: 1.3em;}

    .p_details .photo img{width: 90%;margin: 0;}

    .call_form {width: 240px;padding:10px;}

    .p_details .gallery .photo { width: 49.5%}

    .row_tiny {width: 49%;height: 250px;}

    .row_tiny .buy_button {font-size:0.5em;}

    .numeric {font-size:2em;}

    .floated {width: auto;max-width: 100%;}

    a.blog_load{flex: 0 1 calc(100% - 10px);}

    

    .yalda_features {

        height: auto;

        padding-bottom: 40px;

    }

    .product {

        margin: 0;

        margin-bottom: 10px;

        width: 100%;

        height: auto;

    }

    a.chatwa {

        bottom: 25px;

        right: 25px;

    }

}



@media all and (max-width: 400px) {

    .gift{background-size: 80% auto;}

    .suprise{font-size: 1.3em;}

    

    .yalda_features .feature {

        float: none;

        display: block;

        padding: 0 10px;

        box-sizing: border-box;

        width: 100%;

    }

    

}





/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */

.tooltipster-default {

	border-radius: 5px; 

	border: 2px solid #333;

	background: #333;

	color: #fff;

}



.tooltipster-light {

	border-radius: 5px; 

	border: 2px solid #fff;

	background: #fff;

	color: #444;

}



.tooltipster-light-bordered {

	border-radius: 5px; 

	border: 2px solid #777;

	background: #fff;

	color: #444;

 }



.tooltipster-ajax {

	background: #333;

    border-radius: 2px;

    height: 288px;

	color: #444;

}



/* Use this next selector to style things like font-size and line-height: */

.tooltipster-content{

    direction: rtl;

	font-family: inherit;

	font-size: 11px;

	line-height: 24px;

	padding: 0 5px;

	overflow: hidden;

    box-sizing: border-box;

}



.tooltipster-ajax .tooltipster-content{

    padding: 3px;

}



.tooltipster-light-bordered .tooltipster-content{padding: 10px;text-align: justify;}



/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */

.tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {

	/* border-color: ... !important; */

}





/* This is the base styling required to make all Tooltipsters work */

.tooltipster-base {

	padding: 0;

	font-size: 0;

	line-height: 0;

	position: absolute;

	left: 0;

	top: 0;

	z-index: 10;

	cursor: default;

	width: auto;

	overflow: visible;

}

.tooltipster-base .tooltipster-content {

	overflow: hidden;

}





/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */

.tooltipster-arrow {

	display: block;

	text-align: center;

	width: 100%;

	height: 100%;

	position: absolute;

	top: 0;

	left: 0;

	z-index: -1;

}

.tooltipster-arrow span, .tooltipster-arrow-border {

	display: block;

	width: 0; 

	height: 0;

	position: absolute;

}

.tooltipster-arrow-top span, .tooltipster-arrow-top-right span, .tooltipster-arrow-top-left span {

	border-left: 8px solid transparent !important;

	border-right: 8px solid transparent !important;

	border-top: 8px solid;

	bottom: -7px;

}

.tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-top-left .tooltipster-arrow-border {

	border-left: 9px solid transparent !important;

	border-right: 9px solid transparent !important;

	border-top: 9px solid;

	bottom: -7px;

}



.tooltipster-arrow-bottom span, .tooltipster-arrow-bottom-right span, .tooltipster-arrow-bottom-left span {

	border-left: 8px solid transparent !important;

	border-right: 8px solid transparent !important;

	border-bottom: 8px solid;

	top: -7px;

}

.tooltipster-arrow-bottom .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {

	border-left: 9px solid transparent !important;

	border-right: 9px solid transparent !important;

	border-bottom: 9px solid;

	top: -7px;

}

.tooltipster-arrow-top span, .tooltipster-arrow-top .tooltipster-arrow-border, .tooltipster-arrow-bottom span, .tooltipster-arrow-bottom .tooltipster-arrow-border {

	left: 0;

	right: 0;

	margin: 0 auto;

}

.tooltipster-arrow-top-left span, .tooltipster-arrow-bottom-left span {

	left: 6px;

}

.tooltipster-arrow-top-left .tooltipster-arrow-border, .tooltipster-arrow-bottom-left .tooltipster-arrow-border {

	left: 5px;

}

.tooltipster-arrow-top-right span,  .tooltipster-arrow-bottom-right span {

	right: 6px;

}

.tooltipster-arrow-top-right .tooltipster-arrow-border, .tooltipster-arrow-bottom-right .tooltipster-arrow-border {

	right: 5px;

}

.tooltipster-arrow-left span, .tooltipster-arrow-left .tooltipster-arrow-border {

	border-top: 8px solid transparent !important;

	border-bottom: 8px solid transparent !important; 

	border-left: 8px solid;

	top: 50%;

	margin-top: -7px;

	right: -7px;

}

.tooltipster-arrow-left .tooltipster-arrow-border {

	border-top: 9px solid transparent !important;

	border-bottom: 9px solid transparent !important; 

	border-left: 9px solid;

	margin-top: -8px;

}

.tooltipster-arrow-right span, .tooltipster-arrow-right .tooltipster-arrow-border {

	border-top: 8px solid transparent !important;

	border-bottom: 8px solid transparent !important; 

	border-right: 8px solid;

	top: 50%;

	margin-top: -7px;

	left: -7px;

}

.tooltipster-arrow-right .tooltipster-arrow-border {

	border-top: 9px solid transparent !important;

	border-bottom: 9px solid transparent !important; 

	border-right: 9px solid;

	margin-top: -8px;

}





/* Some CSS magic for the awesome animations - feel free to make your own custom animations and reference it in your Tooltipster settings! */



.tooltipster-fade {

	opacity: 0;

	-webkit-transition-property: opacity;

	-moz-transition-property: opacity;

	-o-transition-property: opacity;

	-ms-transition-property: opacity;

	transition-property: opacity;

}

.tooltipster-fade-show {

	opacity: 1;

}



.tooltipster-grow {

	-webkit-transform: scale(0,0);

	-moz-transform: scale(0,0);

	-o-transform: scale(0,0);

	-ms-transform: scale(0,0);

	transform: scale(0,0);

	-webkit-transition-property: -webkit-transform;

	-moz-transition-property: -moz-transform;

	-o-transition-property: -o-transform;

	-ms-transition-property: -ms-transform;

	transition-property: transform;

	-webkit-backface-visibility: hidden;

}

.tooltipster-grow-show {

	-webkit-transform: scale(1,1);

	-moz-transform: scale(1,1);

	-o-transform: scale(1,1);

	-ms-transform: scale(1,1);

	transform: scale(1,1);

	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 

	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 

	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 

	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 

	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

}



.tooltipster-swing {

	opacity: 0;

	-webkit-transform: rotateZ(4deg);

	-moz-transform: rotateZ(4deg);

	-o-transform: rotateZ(4deg);

	-ms-transform: rotateZ(4deg);

	transform: rotateZ(4deg);

	-webkit-transition-property: -webkit-transform, opacity;

	-moz-transition-property: -moz-transform;

	-o-transition-property: -o-transform;

	-ms-transition-property: -ms-transform;

	transition-property: transform;

}

.tooltipster-swing-show {

	opacity: 1;

	-webkit-transform: rotateZ(0deg);

	-moz-transform: rotateZ(0deg);

	-o-transform: rotateZ(0deg);

	-ms-transform: rotateZ(0deg);

	transform: rotateZ(0deg);

	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 1);

	-webkit-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 

	-moz-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 

	-ms-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 

	-o-transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4); 

	transition-timing-function: cubic-bezier(0.230, 0.635, 0.495, 2.4);

}



.tooltipster-fall {

	top: 0;

	-webkit-transition-property: top;

	-moz-transition-property: top;

	-o-transition-property: top;

	-ms-transition-property: top;

	transition-property: top;

	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 

	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 

	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 

	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 

	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 

}

.tooltipster-fall-show {

}

.tooltipster-fall.tooltipster-dying {

	-webkit-transition-property: all;

	-moz-transition-property: all;

	-o-transition-property: all;

	-ms-transition-property: all;

	transition-property: all;

	top: 0px !important;

	opacity: 0;

}



.tooltipster-slide {

	left: -40px;

	-webkit-transition-property: left;

	-moz-transition-property: left;

	-o-transition-property: left;

	-ms-transition-property: left;

	transition-property: left;

	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

	-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 

	-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 

	-ms-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 

	-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15); 

	transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.15);

}

.tooltipster-slide.tooltipster-slide-show {

}

.tooltipster-slide.tooltipster-dying {

	-webkit-transition-property: all;

	-moz-transition-property: all;

	-o-transition-property: all;

	-ms-transition-property: all;

	transition-property: all;

	left: 0px !important;

	opacity: 0;

}





/* CSS transition for when contenting is changing in a tooltip that is still open. The only properties that will NOT transition are: width, height, top, and left */

.tooltipster-content-changing {

	opacity: 0.5;

	-webkit-transform: scale(1.1, 1.1);

	-moz-transform: scale(1.1, 1.1);

	-o-transform: scale(1.1, 1.1);

	-ms-transform: scale(1.1, 1.1);

	transform: scale(1.1, 1.1);

}

a.inline_button{

    padding: 10px 25px;

    border-radius: 10px; 

    color:#fff;

    background:#333;

    text-decoration: none;

}

a.inline_button:hover{background:#007588;}