/*** Created by finalstar on 12/13/2016. */
@charset "utf-8";
/* CSS Document */
/*--------------------------------------------- font ----------------------------*/
@font-face {
    font-family: 'textFont';
    font-style: normal;
    font-weight: normal;
    src: url('siteFile/includes/font/IRANSansWeb.eot');
    src: url('siteFile/includes/font/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('siteFile/includes/font/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('siteFile/includes/font/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('siteFile/includes/font/IRANSansWeb.ttf') format('truetype');
}
@font-face {
    font-family: 'titleFont';
    font-style: normal;
    font-weight: normal;
    src: url('siteFile/includes/font/IRANSansWeb_Bold.eot');
    src: url('siteFile/includes/font/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
    url('siteFile/includes/font/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
    url('siteFile/includes/font/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('siteFile/includes/font/IRANSansWeb_Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'enTextFont';
    src: url('siteFile/includes/font/HelveticaLTLight.ttf');
}
@font-face {
    font-family: 'enTitleFont';
    src: url('siteFile/includes/font/HelveticaCEBold.ttf');
}

/*--------------------------------------------- reset ----------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body{ line-height: 1; }
table { border-collapse: collapse; border-spacing: 0; }
input,button,textarea{ padding: 0; font-family: textFont; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

html,body{ width: 100%; height: 100%; direction: rtl; }
*{ box-sizing: border-box; }

.mainBox{ max-width: 1050px; padding: 0 25px; margin: auto; position: relative; }
.mainBox2{ max-width: 1250px; padding: 0 25px; margin: auto; position: relative; }

::-webkit-input-placeholder{ opacity: 1; text-align: right; }
:-moz-placeholder{ opacity: 1; text-align: right; }
::-moz-placeholder{ opacity: 1; text-align: right; }
:-ms-input-placeholder{ opacity: 1; text-align: right; }
input[type="tel"],input[type="email"],input[type="password"]{ direction: ltr; }
input[type="email"]{ font-family: enTextFont; }

::-moz-selection { background: #01b5f0; color: #FFFFFF; }
::selection { background: #01b5f0; color: #FFFFFF; }
input::-moz-selection { background: #f1f1f1; color: #000000; }
input::selection { background: #f1f1f1; color: #000000; }

.ltext{ direction: ltr; display: inline-block; }
.enFont{ font-family: enTextFont !important; direction: ltr!important; }
a{ text-decoration: none; transition: all .3s linear; }

.likeIcon.active{ opacity: .2; }

.noResult{ line-height: 28px; margin: 30px 0; color: #af0000; font-family: titleFont; font-size: 19px; text-align: center; }

/* comma */
.infoComma span:after{ content: "، "; display: inline-block; }
.infoComma span:last-child:after{ display: none; }

/* company color */
.companyColor{ color: #01b5f0; }

/* page title 1 */
.pageTitle1{ line-height: 38px; font-family: titleFont; font-size: 25px; color: #2d2c32; }
.pageTitle1.white{ color: #FFFFFF; }
.pageTitle1.marginTitle{ margin: 40px auto 20px auto; }

/* page title 2 */
.pageTitle2{ line-height: 38px; font-family: titleFont; font-size: 21px; color: #2d2c32; }

/* border bottom */
.afterBorder:after{ content: ""; width: 55px; height: 3px; margin: 10px 0 0 0; background: #01b5f0; display: block; }
.afterBorderWhite:after{ content: ""; width: 70px; height: 3px; margin: 10px 0 0 0; background: #FFFFFF; display: block; }

/* link button */
.linkButton{ line-height: 35px; padding: 0 10px; border: 1px solid #01b5f0; color: #01b5f0; font-family: titleFont; font-size: 15px; background: transparent; text-align: center; display: inline-block; transition: all .3s linear; }
.linkButton:hover{ background: #01b5f0; color: #ffffff; }

/* header */
#navMenuOpen{ width: 30px; height: 24px; position: absolute; top: 25px; left: 25px; display: none; cursor: pointer; z-index: 11; }
#hamburgerInner{ width: 30px; height: 4px; margin: auto; background-color: #ffffff; border-radius: 4px; position: absolute; top: 0; bottom: 0; transition: transform .15s ease; }
#hamburgerInner:before{ content: ""; width: 30px; height: 4px; background-color: #ffffff; border-radius: 4px; position: absolute; top: -8px; transition: transform .7s cubic-bezier(0,0,0.58,1); }
#hamburgerInner:after{ content: ""; width: 30px; height: 4px; background-color: #ffffff; border-radius: 4px; position: absolute; bottom: -8px; transition: transform .7s cubic-bezier(0,0,0.58,1); }
#navMenuOpen.active{ transform: rotate(-270deg); }
#navMenuOpen.active #hamburgerInner:before{ transform: translate3d(-6px,0,0) rotate(135deg) scaleX(.7); }
#navMenuOpen.active #hamburgerInner:after{ transform: translate3d(-6px,0,0) rotate(-135deg) scaleX(.7); }

header{ width: 100%; border-bottom: 1px solid #ffffff; display: grid; grid-template-columns: 1fr 220px 1fr; align-items: center; position: absolute; top: 0; right: 0; z-index: 10; }
#headerCatBox{ height: 100%; line-height: 38px; font-family: titleFont; font-size: 14px; display: grid; grid-template-columns: 100px repeat(3,1fr); }
.headerCat{ height: 100%; padding: 0 10px; text-align: center; color: #ffffff; border-left: 1px solid #ffffff; display: grid; align-items: center; cursor: pointer; transition: all .3s linear; }

#responsiveHeader{ width: 100%; border-bottom: 1px solid #ffffff; display: grid; grid-template-columns: auto 220px; align-items: center; position: absolute; top: 0; right: 0; z-index: 10; }
#responsiveHeaderCatBox{ height: 100%; line-height: 38px; font-family: titleFont; font-size: 14px; display: grid; grid-template-columns: repeat(2,150px); }
.responsiveHeaderCat{ height: 100%; padding: 0 10px; text-align: center; color: #ffffff; border-left: 1px solid #ffffff; display: grid; align-items: center; cursor: pointer; transition: all .3s linear; }

.subMenu{ width: 100%; background: rgba(255,255,255,.8); position: absolute; top: 100%; right: 0; display: grid; grid-template-columns: repeat(12,1fr); opacity: 0; visibility: hidden; transition: all .3s linear; }
.subMenu a{ padding: 10px 10px; color: #5d5e60; position: relative; display: block; overflow: hidden; }
.subMenu a img{ max-width: 90px; margin: auto; display: block; transition: all .3s linear; }
.subMenu a section{ margin-top: 15px; opacity: 0; transition: all .3s linear; }
.subMenu a:hover{ background: #ffffff; }
.subMenu a:hover img{ max-width: 60px; }
.subMenu a:hover section{ opacity: 1; }

.headerCat:hover{ background: rgba(255,255,255,.8); color: #5d5e60; }
.headerCat:hover .subMenu{ opacity: 1; visibility: visible; }

#headerLogo,#responsiveHeaderLogo{ max-width: 160px; padding: 5px 10px; margin: auto; display: block; }
#headerLogo img,#responsiveHeaderLogo img{ max-width: 100%; display: block; }

#headerSearchForm{ width: 100%; height: 100%; display: grid; grid-template-columns: auto 70px; }
#headerSearchForm input{ padding: 0 10px; font-family: textFont; font-size: 15px; color: #5d5e60; border: none; background: rgba(255,255,255,.75); }
#headerSearchForm button{ padding: 10px 10px; border: none; background: none; cursor: pointer; transition: all .3s linear; }
#headerSearchForm button img{ width: 40px; margin: auto; display: block; }
#headerSearchForm button:hover{ background: #01b5f0; }

#fillterMenuCover{ width: 100vw; height: 100vh; background: rgba(0,0,0,.8); position: fixed; top: 0; right: 0; z-index: 11; display: none; }
.headerCatSubList{ width: 250px; max-width: 100%; height: 100vh; padding: 50px 0 40px 0; background: #ffffff; border-left: 1px solid #06328a; position: fixed; top: 0; right: -250px; z-index: 12; transition: all .5s linear; }
.headerCatSubList.noBottomPadding{ padding-bottom: 0; }
.headerCatSubList.open{ right: 0; }
.headerCatSubListOver{ height: 100%; overflow: auto; }

.checkedListDropDown{ display: none; }

.headerFormButton{ width: 100%; height: 40px; margin: auto; display: block; position: absolute; bottom: 0; left: 0; right: 0; cursor: pointer; }

.headerCatSubHead{ width: 100%; line-height: 50px; padding: 0 15px; font-family: titleFont; font-size: 15px; color: #ffffff; background: #06328a; position: absolute; top: 0; right: 0; display: grid; grid-template-columns: auto 34px; grid-gap: 0 10px; align-items: center; }
.headerCatSubClose{ width: 20px; margin: auto; display: block; cursor: pointer; }

.headerCatSubList a{ line-height: 40px; padding: 0 15px; font-family: textFont; font-size: 15px; color: #2d2c32; border-bottom: 1px dotted #06328a; display: grid; grid-template-columns: 10px auto; grid-gap: 0 5px; align-items: center; }
.headerCatSubList a:before{ content: ""; width: 0; height: 0; border-style: solid; border-width: 7px 8px 7px 0; border-color: transparent #06328a transparent transparent; display: inline-block; opacity: .2; transition: all .3s linear; }
.headerCatSubList a:last-child{ border-bottom: none; }
.headerCatSubList a:hover{ color: #ffffff; background: #01b5f0; }
.headerCatSubList a:hover:before{ opacity: 1; border-color: transparent #ffffff transparent transparent; }

@media only screen and (max-width: 1200px){
    #navMenuOpen{ display: block; }
    header{ width: 100%; height: 100vh; padding: 0 25px; background: #01b5f0; border-bottom: none; grid-template-columns: 100%; align-items: flex-start; position: absolute; top: -100%; opacity: 0; transition: all .5s linear; overflow: auto; }
    header.open{ top: 0; opacity: 1; }
    #headerCatBox{ grid-template-columns: 100%; grid-gap: 10px 0; order: 1; }
    .headerCat{ border: 1px solid #ffffff; text-align: right; }
    .subMenu{ padding-bottom: 10px; background: none; position: static; grid-template-columns: repeat(4,1fr); grid-gap: 10px 10px; opacity: 1; visibility: visible; }
    .subMenu a{ color: #ffffff; text-align: center; border: 1px dotted #ffffff; }
    .subMenu a img{ display: none; }
    .subMenu a section{ margin-top: 0; opacity: 1; }

    .headerCat:hover{ background: none; color: #ffffff; }
    .subMenu a:hover{ background: none; }

    #headerLogo{ width: 170px; max-width: 100%; padding: 5px 10px; margin: 15px 0 25px 0; display: block; order: 0; }
    #headerSearchForm{ height: auto; margin: 10px 0 0 0; padding: 0 0 25px 0; display: grid; order: 2; }
}
@media only screen and (max-width: 1000px){
    .subMenu{ grid-template-columns: repeat(3,1fr); }
}
@media only screen and (max-width: 700px){
    header,#responsiveHeader{ background: #06328a; }
    #headerSpace{ height: 46px; }
    .subMenu{ grid-template-columns: repeat(2,1fr); }
}
@media only screen and (max-width: 540px){
    #responsiveHeader{ grid-template-columns: repeat(2,1fr); }
    #responsiveHeaderCatBox{ grid-template-columns: 100%; }
    .responsiveHeaderCat:first-child{ display: none; }
}

/* index slider */
/*
#indexSlider{ height: 100vh; min-height: 410px; position: relative; overflow: hidden; }
.indexSlideBox{ width: 100%; height: 100%; padding: 40px 0; background: #f1f2f6; position: absolute; opacity: 0; transition: all .5s linear; z-index: 0; }

.indexSlideImg{ width: 100%; height: 100%; background-size: cover !important; background-position: 0 50% !important; background-repeat: no-repeat !important; position: absolute; top: 0; right: 0; transform-origin: 0 50%; transition: all 7s linear; z-index: -1; }
.indexSlideBox:nth-child(4n) .indexSlideImg,.indexSlideBox:nth-child(4n+1) .indexSlideImg{ transform: scale(1.08); }

.indexSlideImgRes1{ width: 100%; height: 100%; background-size: cover !important; background-position: 50% 50% !important; background-repeat: no-repeat !important; position: absolute; top: 0; right: 0; display: none; z-index: -1; }
.indexSlideBox .mainBox2{ height: 100%; display: flex; align-items: center; }
*/
.indexSlideBox{ position: relative; display: block; z-index: 1; }
.indexSlideImg{ width: 100%; display: block; }
.indexSlideInfo{ width: 100%; height: 100%; position: absolute; top: 0; right: 0; z-index: 1; }

.bigSlideTxt{ width: 100%; max-width: 550px; line-height: 24px; font-family: textFont; font-size: 15px; color: #FFFFFF; }
.bigSlideTxt h2{ line-height: 68px; margin-bottom: 15px; font-family: titleFont; font-size: 48px; position: relative; opacity: 0; transform: translateY(100px); transition: all 1s cubic-bezier(0,0,0.58,1); overflow: hidden; }
.bigSlideTxt section{ opacity: 0; transform: translateY(70px); transition: all .8s cubic-bezier(0,0,0.58,1); }
.bigSlideTxt a{ width: 140px; line-height: 30px; margin-top: 25px; color: #ffffff; border: 2px solid #ffffff; font-family: titleFont; font-size: 15px; text-align: center; display: block; opacity: 0; transform: translateY(40px); transition: all .7s cubic-bezier(0,0,0.58,1); }
.bigSlideTxt a:hover{ background: #06328a !important; color: #FFFFFF !important; transition: all .3s linear; transition-delay: 0s; }

#indexSlider .owl-next{ width: 40px; height: 120px; margin: auto; font-size: 50px; color: #FFFFFF; background: rgba(0,0,0,.15); position: absolute; top: 0; bottom: 0; left: 0; transition: all .2s linear; z-index: 3; cursor: pointer; }
#indexSlider .owl-prev{ width: 40px; height: 120px; margin: auto; font-size: 50px; color: #FFFFFF; background: rgba(0,0,0,.15); position: absolute; top: 0; bottom: 0; right: 0; transition: all .2s linear; z-index: 3; cursor: pointer; }
#indexSlider .owl-prev:hover,#indexSlider .owl-next:hover{ background: #01b5f0; }

/*
.indexSlideBox.active{ opacity: 1; z-index: 2; }

.indexSlideBox.active:nth-child(4n) .indexSlideImg,.indexSlideBox.active:nth-child(4n+1) .indexSlideImg{ transform: scale(1); }
.indexSlideBox.active:nth-child(4n+2) .indexSlideImg,.indexSlideBox.active:nth-child(4n+3) .indexSlideImg{ transform: scale(1.08); }

.indexSlideBox.active h2,.indexSlideBox.active section,.indexSlideBox.active a{ transform: translateY(0px); opacity: 1; }

.indexSlideArrow{ width: 40px; height: 120px; margin: auto; background: rgba(0,0,0,.15); position: absolute; top: 0; bottom: 0; transition: all .2s linear; z-index: 3; cursor: pointer; }
.indexSlideArrow:hover{ background: #01b5f0; }
#indexSlideRight{ right: 0; }
#indexSlideRight:after{ content: ""; width: 6px; height: 6px; padding: 4px; margin: auto; border: solid #FFFFFF; border-width: 0 4px 4px 0; transform: rotate(-45deg); position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: inline-block; }
#indexSlideLeft{ left: 0; }
#indexSlideLeft:after{ content: ""; width: 6px; height: 6px; padding: 4px; margin: auto; border: solid #FFFFFF; border-width: 0 4px 4px 0; transform: rotate(135deg); position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: inline-block; }
*/
@media only screen and (max-width: 600px){
    /*
    .indexSlideImg{ display: none; }
    .indexSlideImgRes1{ display: block; }
    */
    .bigSlideTxt h2{ line-height: 40px; padding-bottom: 0; margin-bottom: 25px; font-size: 27px; text-align: center; }
    .bigSlideTxt h2:after{ display: none; }
    .bigSlideTxt section{ display: none; }
    .bigSlideTxt a{ margin: auto; }
}

/* index Search Form */
#indexSearchFormBox{ display: none; }
.siteSearchBox{ padding: 50px 50px; margin-top: 60px; border: 1px solid #797979; }
#searchBoxForm{ height: 40px; background: #7e7d80; display: grid; grid-template-columns: auto 40px; align-items: center; }
#searchBoxForm input{ width: 100%; padding: 0 5px; border: none; background: none; color: #FFFFFF; display: block; }
#searchBoxForm button{ width: 100%; padding: 7px; border: none; background: none; display: block; cursor: pointer; transition: all .3s linear; }
#searchBoxForm button:hover{ background: #01b5f0; }

.searchBoxInfo{ margin-top: 40px; }
.searchBoxLink{ max-height: 200px; margin-top: 20px; display: grid; grid-template-columns: repeat(5,1fr); grid-gap: 5px 5px; overflow: auto; }
.searchBoxLink a{ line-height: 34px; padding: 0 5px; font-family: titleFont; font-size: 13px; color: #000000; background: #f1f1f1; display: block; }
.searchBoxLink a.searchBoxLinkGrid{ display: grid; grid-template-columns: 25px auto; grid-gap: 0 5px; align-items: center; }
.searchBoxLink a img{ width: 100%; display: block; }

.searchBoxInfo form{ margin-top: 20px; }
.searchBoxCheckedOver{ max-height: 200px; overflow: auto; }
.searchBoxFormBtn{ width: 100%; margin-top: 15px; }
@media only screen and (max-width: 1200px) {
    #indexSearchFormBox{ display: block; }
}
@media only screen and (max-width: 840px) {
    .searchBoxLink{ grid-template-columns: repeat(3,1fr); }
}
@media only screen and (max-width: 550px) {
    .searchBoxLink{ grid-template-columns: repeat(2,1fr); }
}
@media only screen and (max-width: 400px) {
    .searchBoxLink{ grid-template-columns: 100%; }
}

/* index about */
#indexAbout{ min-height: calc(100vh - 60px); margin-top: 60px; display: grid; grid-template-columns: 100%; align-items: center; }

#indexAboutGrid{ display: grid; grid-template-columns: 450px auto; align-items: center; justify-content: center; grid-gap: 30px 50px; }
#indexAboutImg{ min-height: 300px; background-size: cover !important; background-position: 50% 50% !important; background-repeat: no-repeat !important; }
#indexAboutTxt a{ margin-top: 20px; }
@media only screen and (max-width: 850px) {
    #indexAboutGrid{ grid-template-columns: 300px auto; grid-gap: 10px 30px; }
    #indexAboutImg{ min-height: 200px; }
    #indexAboutTxt{ max-width: none; }
}
@media only screen and (max-width: 650px) {
    #indexAboutGrid{ grid-template-columns: 100%; }
    #indexAboutTxt h2{ font-size: 21px; }
}

/* index last news */
.indexLastNews{ margin-top: 40px; }
.indexLastNews .pageTitle1{ margin-bottom: 20px; }
.indexWeblogLink a{ width: 100%; max-width: 320px; margin: 30px auto 0 auto; display: block; }
@media only screen and (max-width: 650px){
    .indexLastNewsHeader{ grid-template-columns: 100%; }
    .indexLastNewsHeader a{ display: none; }
}

/* news list */
.newsListGrid{ margin-top: 30px; display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 30px 20px; }
.newsListImg{ position: relative; overflow: hidden; display: block; }
.newsListImg img{ max-width: 100%; display: block; transition: all .3s linear; }
.newsListTitle{ margin-top: 10px; }
.newsListTitle a{ line-height: 34px; font-size: 17px; font-family: titleFont; color: #2d2c32; display: block; }
.newsListBody{ line-height: 24px; margin-top: 10px; font-family: textFont; font-size: 14px; color: #636364; }

.newsListImg img:hover{ -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.newsListTitle a:hover{ color: #01b5f0; }
@media only screen and (max-width: 810px){
    .newsListGrid{ grid-template-columns: repeat(2,1fr); }
}
@media only screen and (max-width: 580px){
    .newsListGrid{ grid-template-columns: 100%; }
}

/* product list */
.productListGrid{ margin-top: 30px; display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 30px 20px; }
.productListImg{ position: relative; overflow: hidden; display: block; }
.productListImg img{ max-width: 100%; display: block; transition: all .3s linear; }
.productListTitle{ margin-top: 10px; }
.productListTitle a{ line-height: 34px; font-size: 17px; font-family: titleFont; color: #2d2c32; display: block; }
.productListBody{ line-height: 24px; margin-top: 10px; font-family: textFont; font-size: 14px; color: #636364; }

.productListImg img:hover{ -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.productListTitle a:hover{ color: #01b5f0; }
@media only screen and (max-width: 950px){
    .productListGrid{ grid-template-columns: repeat(2,1fr); }
}
@media only screen and (max-width: 700px){
    .productListGrid{ grid-template-columns: 100%; }
}

/* footer contact */
#footerContact{ line-height: 24px; font-family: textFont; font-size: 15px; background: #00a889; color: #ffffff; }
#footerContact .mainBox{ display: grid; grid-template-columns: auto 280px 200px; grid-gap: 0 30px; }
#footerContact a{ color: #ffffff; }

#footerContactBox{ padding: 30px 0; display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 10px 20px; align-items: center; }
.footerCotactInfo{ display: grid; grid-template-columns: 22px auto; grid-gap: 0 5px; align-items: center; }
.footerCotactInfo img{ max-width: 100%; display: block; }
#footerContactBox a:hover{ color: #06328a; }

#footerSocial{ padding: 30px 0; border: solid #0b6c6b; border-width: 0 1px 0 1px; display: flex; align-items: center; justify-content: center; }
#footerSocial a{ width: 30px; margin-right: 3px; display: block; }
#footerSocial a img{ max-width: 100%; display: block; }
#footerSocial a:hover{ background: #06328a; }

#footerContactLink{ width: 100%; padding: 30px 0; display: grid; justify-content: flex-end; align-items: center; }
#footerContactLink a{ width: 170px; line-height: 34px; border: 1px solid #ffffff; font-family: titleFont; display: block; text-align: center; }
#footerContactLink a:hover{ background: #0b6c6b; border-color: #0b6c6b; }
@media only screen and (max-width: 1000px){
    #footerContactBox{ grid-template-columns: 100%; }
}
@media only screen and (max-width: 850px){
    #footerContact .mainBox{ grid-template-columns: repeat(2,1fr); }
    #footerContactBox{ grid-column: 2 span; border-bottom: 1px solid #177692; }
    #footerSocial{ border-width: 0 0 0 1px; }
    #footerContactLink{ justify-content: inherit; }
    #footerContactLink a{ width: 90%; margin: auto; }
}
@media only screen and (max-width: 600px){
    #footerContact .mainBox{ grid-template-columns: 100%; }
    #footerContactBox{ grid-column: 1 span; border-bottom: none; }
    #footerSocial{ border-width: 1px 0 1px 0; }
}

/* company logo */
#companyLogoOver{ padding: 30px 0; position: relative; overflow: hidden; }
#companyLogo{ display: flex; align-items: center; justify-content: space-evenly; flex-wrap: wrap; }
#companyLogo a{ width: 115px; padding: 5px 10px; display: block; }
#companyLogo a img{ max-width: 100%; display: block; }

/* footer */
footer{ line-height: 24px; padding: 80px 0; font-size: 14px; font-family: textFont; color: #b8b8b8; background: #06328a; }
footer .mainBox{ display: grid; grid-template-columns: auto 270px 300px; grid-gap: 50px 40px; }

#footerLogo{ width: 120px; position: absolute; top: 40px; left: -130px; display: block; }
#footerLogo img{ width: 100%; display: block; }

.footerHead{ line-height: 30px; margin-bottom: 20px; font-family: titleFont; font-size: 17px; color: #ffffff; }

#footerAboutLink{ margin-top: 10px; text-align: left; }
#footerAboutLink a{ width: 100%; }

#footerMenu{ display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 0 10px; }
#footerMenu a{ line-height: 30px; font-family: textFont; font-size: 14px; color: #b8b8b8; display: inline-block; }
#footerMenu a:hover{ color: #ffffff; }

#newslettersInfo{ margin-top: 15px; font-family: titleFont; font-size: 15px; color: #ffffff; text-align: center; }
#newslettersForm{ display: grid; grid-template-columns: 55px auto; align-items: center; }
#newslettersForm ::-webkit-input-placeholder{ text-align: left; }
#newslettersForm :-moz-placeholder{ text-align: left; }
#newslettersForm ::-moz-placeholder{ text-align: left; }
#newslettersForm :-ms-input-placeholder{ text-align: left; }
#newslettersForm input{ height: 40px; padding: 0 5px; font-size: 17px; color: #7e7d80; border: none; background: #28405d; display: block; order: 1; }
#newslettersForm button{ height: 40px; background: #28405d; border: none; text-align: center; display: grid; align-items: center; justify-content: center; transition: all .2s linear; cursor: pointer; }
#newslettersForm button img{ width: 15px; display: block; }
#newslettersForm button:hover{ background: #01b5f0; }
@media only screen and (max-width: 1340px){
    #footerLogo{ width: 170px; margin: auto; position: static; grid-column: 3 span; }
}
@media only screen and (max-width: 1000px){
    #footerLogo{ grid-column: 1 span; }
    footer .mainBox{ grid-template-columns: 100%; }
}

/* footer strip */
#footerStrip{ padding: 3px 0; line-height: 28px; background: #0d0f16; font-size: 14px; color: #FFFFFF; text-align: center; }
#diaakoLink{ color: #FFFFFF; display: inline-block; }
#diaakoLink:after{ content: "/"; margin: 0 5px; color: #332f2f; display: inline-block; }
#diaakoLink:hover{ color: #01b5f0; }

/* end view text */
.readText{ line-height: 24px; font-family: textFont; font-size: 16px; color: #636364; text-align: justify; text-justify: auto; }
.readText h1{ line-height: 30px; margin: 0 0 15px 0; font-family: titleFont; font-size: 23px; color: #01b5f0; }
.readText h2,.readText h3,.readText h4,.readText h5,.readText h6{ line-height: 30px; margin: 40px auto 10px auto; font-family: titleFont; font-size: 21px; color: #01b5f0; }
.readText h2:first-child,.readText h3:first-child,.readText h4:first-child,.readText h5:first-child,.readText h6:first-child{ margin-top: 0; }

.readText ol,.readText ul{ padding-right: 25px; }
.readText img{ max-width: 100%; margin: 20px auto; display: block; }
.readText img:first-child{ margin: 0 auto 30px auto; }
.readText a{ color: #01b5f0; display: inline-block; }
.readText a:hover{ color: #636364; }

/* page banner */
#pageBanner{ height: 450px; padding-top: 70px; background-position: 50% 50% !important; background-repeat: no-repeat !important; background-size: cover !important; }
@media only screen and (max-width: 600px){
    #pageBanner{ height: 200px; padding-top: 10px; }
}

/* paging */
.pagination{ margin-top: 30px; font-family: titleFont; display: flex; align-items: center; justify-content: flex-start; direction: ltr; }
.pagination li{ margin-right: 3px; display: block; }
.pagination span,.pagination a{ width: 34px; height: 34px; line-height: 34px; color: #FFFFFF; background: #1c1a1a; font-size: 13px; text-align: center; border-radius: 50%; display: block; }
.pagination li:last-child{ margin-right: 0; }
.pagination a:hover{ background: #e6e7e8; }
.pagination li.active span{ background: #01b5f0; }

/* social box */
#shareViewPage{ line-height: 30px; padding: 5px 10px; margin-top: 20px; background: #06328a; color: #ffffff; font-family: titleFont; font-size: 15px; display: grid; grid-template-columns: 100px auto; align-items: center; justify-content: flex-end; }
#shareViewPageLink{ display: flex; align-items: center; }
#shareViewPageLink a{ width: 34px; height: 34px; padding: 1px; margin-right: 5px; border: 2px solid #ffffff; border-radius: 50%; display: block; }
#shareViewPageLink a img{ max-width: 100%; display: block; }
#shareViewPageLink a:hover{ background: #01b5f0; }

/* barchasb Box Link */
#barchasbBoxLink{ font-size: 0; }
#barchasbBoxLink a{ padding: 0 10px; margin: 2px 0; background: #dbdbdb; display: inline-block; }
#barchasbBoxLink a h3{ margin: 0; font-size: 12px; color: #474747; transition: all .3s linear; }
#barchasbBoxLink a:hover{ background: #01b5f0; }
#barchasbBoxLink a:hover h3{ color: #ffffff; }

/* navigation */
#pageNavigation{ line-height: 24px; padding-right: 15px; color: #ffffff; font-family: textFont; font-size: 14px; position: relative; }
#pageNavigation:before{ content: ""; width: 0; height: 0; border-top: 8px solid transparent; border-right: 10px solid #01b5f0; border-bottom: 8px solid transparent; position: absolute; top: 4px; right: 0; display: inline-block; }
#pageNavigation a{ color: #ffffff; }
#pageNavigation a:after{ content: "/"; margin: 0 3px; color: #ffffff; display: inline-block; }
#pageNavigation a:last-child::after{ display: none; }
#pageNavigation a:hover{ color: #01b5f0; }

/* product show */
#productShowGrid{ display: grid; grid-template-columns: auto 350px; grid-gap: 0 30px; align-items: flex-start; }
#productShow{ margin-top: 40px; }
#productShowImg{ padding: 20px; border: 5px solid #dddddd; grid-row: 3 span; position: relative; }
#productShowImg img{ width: 100%; max-width: 400px; display: block; }
#productShowCode{ line-height: 33px; padding: 0 7px; background: #dddddd; color: #022662; font-family: titleFont; font-size: 15px; position: absolute; bottom: -5px; left: -5px; }
#productShowTabSlide{ margin-top: 20px; }
#productShowTabGrid{ background: #063289; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; }
.productShowTab{ padding: 10px 5px; font-family: titleFont; color: #ffffff; border-left: 2px solid #ffffff; text-align: center; cursor: pointer; }
.productShowTab:last-child{ border-left: none; }
.productShowTab.active{ background: #ebebeb; color: #636364; }
.productShowTabInfo{ padding: 20px 10px; border-top: 2px solid #ffffff; background: #ebebeb; display: none; }

#productInfoGrid{ line-height: 24px; background: #ebebeb; display: grid; grid-template-columns: 130px 1fr 130px 1fr 100px 1fr; }
#productInfoGrid>section{ padding: 10px 5px; border: 1px solid #ffffff; }
#productInfoGrid>section:nth-child(2n+1){ font-family: titleFont; background: #06328a; color: #ffffff; }
@media only screen and (max-width: 900px){
    #productShowGrid{ grid-template-columns: 100%; grid-gap: 20px 0; }
    #productShowImg{ grid-row: 1 span; }
}
@media only screen and (max-width: 800px){
    #productInfoGrid{ grid-template-columns: 100px 1fr 100px 1fr }
}
@media only screen and (max-width: 600px){
    #productInfoGrid{ grid-template-columns: 100px 1fr }
}

/* product album */
#proAlbumOver{ overflow: hidden; }
#proAlbum{ display: flex; justify-content: space-between; align-items: flex-start; transition: all 1s cubic-bezier(0,0,0.58,1); }
.proAlbumImg{ height: 90px; border: 2px solid #FFFFFF; background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; cursor: pointer; transition: all .2s linear; }
.proAlbumImg:hover{ -webkit-filter: grayscale(100%); filter: grayscale(100%); }

#proAlbumBigShow{ width: 100%; height: 100%; background: rgba(0,0,0,.95); position: fixed; top: 100%; right: 0; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; z-index: -1; transition: opacity linear .3s; }
#proAlbumBigShow.open{ top: 0; visibility: visible; opacity: 1; z-index: 10; }
#proAlbumBigShowClose{ width: 30px; position: absolute; top: 20px; right: 20px; display: block; cursor: pointer; }
#proAlbumBigShowImg{ max-width: 90% !important; max-height: 90% !important; display: block; }

.proAlbumShowArrow{ width: 40px; height: 40px; margin: auto; background: rgba(0,0,0,.15); position: absolute; top: 0; bottom: 0; transition: all .2s linear; z-index: 3; cursor: pointer; }
.proAlbumShowArrow:hover{ background: #01b5f0; }
#proAlbumShowNext{ right: 20px; }
#proAlbumShowNext:after{ content: ""; width: 6px; height: 6px; padding: 4px; margin: auto; border: solid #FFFFFF; border-width: 0 4px 4px 0; transform: rotate(-45deg); position: absolute; top: 0; bottom: 0; left: 0; right: 8px; display: inline-block; }
#proAlbumShowPre{ left: 20px; }
#proAlbumShowPre:after{ content: ""; width: 6px; height: 6px; padding: 4px; margin: auto; border: solid #FFFFFF; border-width: 0 4px 4px 0; transform: rotate(135deg); position: absolute; top: 0; bottom: 0; left: 8px; right: 0; display: inline-block; }

/* product list */
#productListPage{ max-width: 1350px; padding: 0 25px; margin: auto; }
#productListPageGrid{ display: grid; grid-template-columns: 250px auto; grid-gap: 50px 40px; }

#productFilter{ margin-top: 30px; padding: 0 0 5px 0; background: #fbfbfb; }
.productFilterBox{ padding-top: 40px; margin-top: 25px; position: relative; }
.productFilterBox:first-child{ margin-top: 0; }
.productFilterBoxOver{ max-height: 220px; overflow: auto; }
.productFilterTitle{ width: 100%; line-height: 40px; font-family: titleFont; font-size: 16px; text-align: center; background: #062854; color: #ffffff; position: absolute; top: 0; right: 0; }
.productFilterChecked{ line-height: 20px; padding: 8px 5px; font-family: textFont; font-size: 14px; border-bottom: 1px dotted #06328a; display: grid; grid-template-columns: 17px auto; grid-gap: 5px 5px; }
.productFilterSubCat{ line-height: 30px; padding: 0 10px; text-align: center; font-family: titleFont; font-size: 14px; color: #ffffff; background: #01b5f0; border-bottom: 2px solid #ffffff; }
.productFilterSubCat.checkedListOpen{ padding: 0 10px 0 25px; text-align: right; cursor: pointer; position: relative; }
.productFilterSubCat.checkedListOpen:after{ content: ""; width: 0; height: 0; margin: auto; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid #ffffff; position: absolute; top: 0; bottom: 0; left: 10px; transition: all .3s linear; }
.productFilterSubCat.checkedListOpen.open:after{ transform: rotateZ(180deg); }

#PriceRangeFilterHead{ line-height: 20px; padding: 0 5px; margin-top: 7px; font-family: textFont; font-size: 15px; display: grid; grid-template-columns: repeat(2,1fr); align-items: center; }
#PriceRangeFilterHead section:last-child{ text-align: left; }
#rangUiSlide{ width: calc(100% - 30px); margin: 7px auto; }

#productFilterBtn{ margin-top: 25px; padding: 0 5px; }
#productFilterBtn.productFilterBtnGrid{ display: grid; grid-template-columns: 120px auto; grid-gap: 0 5px; align-items: center; }
#productFilterBtn button{ width: 100%; display: block; cursor: pointer; }

@media only screen and (max-width: 850px){
    #productListPageGrid{ grid-template-columns: 100%; }
}

/* contact us */
#contactShow{ margin-top: 40px; }
#contactUs{ display: grid; grid-template-columns: auto 450px; grid-gap: 0 50px; }
#contactForm .pageTitle2{ margin-top: 0; color: #01b5f0; }
#contactForm input{ width: 100%; height: 35px; padding: 0 5px; margin-bottom: 5px; font-size: 16px; color: #414042; font-family: textFont; border: 1px solid #c2c2c2; display: block; }
#contactForm textarea{ width: 100%; height: 200px; padding: 0 5px; line-height: 20px; border: 1px solid #c2c2c2; color: #414042; font-family: textFont; font-size: 14px; resize: none; display: block; }
#contactForm button{ width: 150px; margin-top: 10px; cursor: pointer; }

#contactUsInfo{ line-height: 20px; font-family: textFont; font-size: 14px; color: #414042; }
#contactUsInfoBox>section{ margin-top: 12px; display: grid; grid-template-columns: 40px auto; }
#contactUsInfoBox>section>section:first-child{ font-family: titleFont; }
#contactUsInfoBox a{ color: #414042; }
#contactUsInfoBox a:hover{ color: #01b5f0; }

#contactIframe{ width: 100%; height: 450px; margin-top: 80px; display: block; }

@media only screen and (max-width: 820px){
    #contactUs{ grid-template-columns: 100%; grid-gap: 50px 0; }
}

/* about */
#aboutShow{ margin-top: 40px; }

/* about modiran */
#aboutModiran{ padding: 80px 0; margin-top: 80px; background: #01b5f0; }
#aboutModiran .pageTitle1{ margin-top: 0; }
#aboutModiranSlideBox{ position: relative; }
#aboutModiranOver{ margin: auto; overflow: hidden; position: relative; }
#aboutModiranSlide{ margin: auto; display: grid; align-items: center; transition: all .3s linear; }
.aboutModiranBox{ width: 200px; padding: 0 10px; text-align: center; }
.aboutModiranBox img{ max-width: 100%; margin: 0 auto 10px auto; border-radius: 50%; display: block; }
.aboutModiranName{ line-height: 30px; font-size: 18px; font-family: titleFont; color: #000000; }
.aboutModiranTitle{ line-height: 20px; font-size: 15px; font-family: textFont; color: #FFFFFF; }

.aboutModiranArrow{ width: 40px; height: 40px; margin: auto; position: absolute; top: 0; bottom: 0; z-index: 5; display: none; cursor: pointer; transition: all .3s linear; }
#aboutModiranRight{ right: 0; }
#aboutModiranLeft{ left: 0; }
.aboutModiranArrow:hover{ opacity: .7; }
@media only screen and (max-width: 820px){
    #contactUs{ grid-template-columns: 100%; grid-gap: 50px 0; }
}

/* comment */
#commentTitleTxt{ line-height: 30px; font-family: titleFont; font-size: 15px; }
#commentTitleTxt span{ padding: 0 20px; background: #00a889; color: #ffffff; display: inline-block; transition: all .2s linear; }
#commentTitleTxt span:hover{ background: #022662; }
.commentBox{ padding-right: 45px; }
.commentHead{ line-height: 30px; margin: 30px 0 10px 0; font-family: titleFont; font-size: 12px; border: 1px solid #d1d3d4; border-right: none; border-left: none; display: flex; align-items: center; position: relative; }
.commentHead img{ width: 40px; margin: auto; position: absolute; top: 0; bottom: 0; right: -45px; }
.commentName{ width: calc(100% - 150px); }
.commentDate{ width: 150px; direction: ltr; }
.commentTxt{ line-height: 25px; padding: 25px 10px 30px 10px; margin-bottom: 30px; color: #777777; font-family: textFont; font-size: 14px; border: 1px solid #d1d3d4; border-radius: 15px; position: relative; }
.commentReplyBtn{ width: 30px; height: 30px; padding: 5px; background: #39b54a; border-radius: 50%; position: absolute; left: 40px; bottom: -15px; cursor: pointer; transition: all .3s linear; }
.commentReplyBtn img{ width: 100%; display: block; }
.commentReplyBtn:hover{ background: #01b5f0; }
.commentReplyInfo{ height: 30px; line-height: 30px; font-family: titleFont; font-size: 12px; background: #FFFFFF; border: 1px solid #d1d3d4; border-radius: 15px; position: absolute; top: -15px; right: 20px; display: flex; align-items: center; }
.commentReplyInfo img{ width: 30px; margin-left: 5px; display: block; }
.commentReplyInfo section{ width: calc(100% - 30px); padding-left: 10px; display: inline-block; }
.openComment{ cursor: pointer; }

/* comment form */
#commentForm{ width: 100%; max-height: 100vh; padding: 30px 0; margin: auto; background: #f1f2f2; box-shadow: 0 0 20px #444444; position: fixed; top: 0; right: 0; left: 0; overflow: auto; z-index: 999; display: none; }
#commentForm .mainBox{ overflow: visible; }
#commentForm form{ max-width: 1000px; margin: auto; display: block; }
#commentForm .commentHead{ margin: 0 45px 15px 0; }
#commentFormIn{ margin-bottom: 15px; display: flex; align-items: center; }
#commentFormIn input{ width: 32%; padding: 0 5px; line-height: 30px; font-size: 12px; font-family: textFont; border: 1px solid #9d9fa2; border-radius: 15px; display: block; }
#commentFormIn input:nth-child(2){ margin: 0 2%; }
#commentForm textarea{ width: 100%; height: 200px; padding: 0 5px; margin-bottom: 15px; font-size: 12px; font-family: textFont; border: 1px solid #9d9fa2; border-radius: 15px; resize: none; display: block; }
#commentFormBtn button{ line-height: 30px; font-family: titleFont; font-size: 15px; border: none; background: none; cursor: pointer; transition: all .3s linear; }
#commentFormBtn button:nth-child(2){ margin-right: 30px; }
#commentSend{ color: #39b54a; }
#commentReset{ color: #e64640; }
#commentFormBtn button:hover{ color: #808285; }
#insertCommentAnswer{ line-height: 40px; padding: 30px 0; text-align: center; font-family: titleFont; font-size: 17px; color: #444444; display: none; }
#insertCommentAnswer button{ line-height: 30px; font-family: titleFont; font-size: 18px; border: none; background: none; color: #39b54a; cursor: pointer; transition: all .3s linear; }
@media only screen and (max-width: 500px) {
    #commentFormIn{ display: block; }
    #commentFormIn input{ width: 100%; }
    #commentFormIn input:nth-child(2){ margin: 15px auto; }
}


/* check box */
/* The container */
.container { width: 20px; height: 20px; border-radius: 50%; display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; }
/* Hide the browser's default checkbox */
.container input { position: absolute; top: -100%; opacity: 0; cursor: pointer; }
/* Create a custom checkbox */
.container .checkmark { width: 20px; height: 20px; position: absolute; top: 0; bottom: 0; left: 0; background-color: #cccccc; transition: all .2s linear; }
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark { background-color: #01b5f0; }
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark { background-color: #06328a; }
/* Style the checkmark/indicator */
.container .checkmark:after { content: ""; width: 3px; height: 8px; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 2px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); display: none; }
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after { display: block; }

/* responsive table */
.dailyNeedOver{ max-height: 290px; overflow: auto; }
.dailyNeed{ width: 100%; line-height: 24px; margin: auto; font-family: textFont; font-size: 15px; color: #636364; }
.dailyNeed tr:first-child{ line-height: 34px; font-family: titleFont; background: #06328a; color: #ffffff; }
.dailyNeed tr:nth-child(2n){ background: #dcddde; }
.dailyNeed td{ padding: 8px 5px; vertical-align: top; }
.dailyNeed td:nth-child(2),.dailyNeed td:nth-child(3){ text-align: center; }
.dailyNeed td:last-child{ width: 140px; }
.dailyNeed a{ color: #939598; display: block; }

#dailyNeedComment{ margin-top: 10px; }

@media only screen and (max-width: 500px) {
    .dailyNeed,.dailyNeed tbody,.dailyNeed tr,.dailyNeed td{ width: 100% !important; line-height: 30px; display: block; }
    .dailyNeed tr:first-child{ display: none; }
    .dailyNeed td{ border-bottom: 1px dotted #d3d5d8; }
    .dailyNeed td:nth-child(2),.dailyNeed td:nth-child(3){ text-align: right; }
    .dailyNeed td:before{ font-family: titleFont; color: #01b5f0; }
    .dailyNeed td:nth-child(1):before{ content: "اجزا: "; }
    .dailyNeed td:nth-child(2):before{ content: "مقدار: "; }
    .dailyNeed td:nth-child(3):before{ content: "نیاز روزانه: "; }
    .dailyNeed a{ text-align: right; display: inline-block !important; }
}

/* masraf */
#meghdarMasraf{ margin-top: 20px; }
#meghdarMasraf>section:first-child{ line-height: 34px; padding: 10px 5px; font-family: titleFont; font-size: 19px; color: #ffffff; background: #06328a; text-align: center; }
#meghdarMasraf>section:last-child{ line-height: 24px; padding: 10px 5px; font-family: textFont; font-size: 15px; color: #636364; background: #dcddde; }

/* instagram last post */
#instagramLastPostTitle{ margin-top: 80px; }
#instagramLastPostGrid{ margin-top: 30px; display: grid; grid-template-columns: repeat(8,1fr); grid-gap: 0; align-items: flex-start; }
#instagramLastPostGrid a{ position: relative; display: block; }
#instagramLastPostGrid a img{ width: 100%; display: block; }
.instagramLastPostDetail{ width: 100%; line-height: 24px; padding: 5px 5px; font-family: textFont; font-size: 13px; color: #ffffff; background: rgba(0,0,0,.7); position: absolute; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; }
.instagramLastPostDetail img{ width: 20px !important; margin: 0 10px 0 4px; display: block; }
.instagramLastPostDetail img:first-child{ margin-right: 0; }
@media only screen and (max-width: 1100px) {
    #instagramLastPostGrid{ grid-template-columns: repeat(4,1fr); }
}
@media only screen and (max-width: 600px) {
    #instagramLastPostGrid{ grid-template-columns: repeat(2,1fr); }
}