@font-face { font-family: "Montserrat-Regular"; src: url(/fonts/Montserrat-Regular.woff2?501ce09c42716a2f6e1503a25eb174c9) format("woff2"), url(/fonts/Montserrat-Regular.ttf?9c46095118380d38f12e67c916b427f9) format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "BYekan"; src: url(/fonts/BYekan.woff?15bbc3c7ef2b74fce3ec1fb330ec710c) format("woff"), url(/fonts/BYekan.otf?e99b3d2208ba86a5468a4b74cadc7651) format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "BYekan-Edited"; src: url(/fonts/BYekan-Edited.woff?e597a743b95451f3ae1e26588d481c20) format("woff"), url(/fonts/BYekan-Edited.otf?11d4f81553ce6c5378a3f91f946e9e55) format("truetype"); font-weight: normal; font-style: normal; } body { color: #5c6873; font-family: "BYekan", "Montserrat-Regular" !important; padding: 0px !important; margin: 0px !important; font-weight: 100; font-size: 17px; } a { transition: 0.2s; } a:hover { text-decoration: none !important; } /* -------------------------------------------------------- General :: Begin -------------------------------------------------------- */ .En-Raleway { font-family: "Raleway", sans-serif; } .RTL { direction: rtl; } .LTR { direction: ltr; } .RotateX { -webkit-transform: rotate(180deg); transform: rotate(180deg); webkit-transform: rotate(180deg); } .Material-Shoadow-SM { box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3), 0 4px 3px rgba(0, 0, 0, 0.22); } .CoverBG { background-size: cover !important; } .CubeTransition { transition-property: all; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .WhiteTheme .WM-SubText { background-color: #fff !important; color: #000; } .WhiteTheme .Notification { background-color: transparent !important; } [class^=WM-Hover], [class*=WM-Hover] { transition: 0.2s; cursor: pointer; } /* -------------------------------------------------------- Borders :: Begin -------------------------------------------------------- */ .WM-Border { border: 1px solid; } .WM-Border-2x { border: 2px solid; } .WM-Border-R { border-right: 1px solid; } .WM-Border-L { border-left: 1px solid; } .WM-Border-T { border-top: 1px solid; } .WM-Border-B { border-bottom: 1px solid; } /* -------------------------------------------------------- SectionTitle :: Begin -------------------------------------------------------- */ .SectionTitle .TitleFa { font-size: 1.7rem; } .SectionTitle .TitleEn span { color: #fff; padding: 5px 25px 1px 25px; border-radius: 0.2em; letter-spacing: 0.5em; } .SectionTitle .TitleEn .Line { flex-grow: 1; position: relative; } .SectionTitle .TitleEn .Line .inner { position: absolute; top: 50%; width: calc(100% - 1em); left: 0; height: 1px; } /* -------------------------------------------------------- Labels :: Begin -------------------------------------------------------- */ .WM-SubText { display: inline-block; padding: 10px 25px 5px 25px; color: #fff; border-radius: 5px; margin: 3px 0px 10px 0px; } .WM-SubText.SmallPad { padding: 3px 15px 0px 15px; } .WM-Notification { display: inline-block; text-align: center; line-height: 24px; width: 26px; height: 26px; color: #fff; border-radius: 13px; } /* -------------------------------------------------------- Navigation :: Begin -------------------------------------------------------- */ .WM-NavWrapper { z-index: 1000; box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); background: #fff; width: calc(100% - 2em); margin: 0 1em; position: fixed; top: 1em; } .WM-NavWrapper .WM-Nav { padding: 0.8em 1em; list-style: none; margin-bottom: 0; } .WM-PageNav { border-left: 1px solid #c7c8c9; padding: 3px 25px; } .modal-mask { position: fixed; z-index: 9998; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: table; transition: opacity 0.3s ease; } .modal-wrapper { display: table-cell; vertical-align: middle; } /* -------------------------------------------------------- Inputs :: Begin -------------------------------------------------------- */ .WM-Input { outline: none; border: none; } .WM-TextArea { outline: none; border: none; } .WM-TextArea:focus, .WM-Input:focus { border-color: transparent !important; } .WM-Input:focus::-webkit-input-placeholder { color: transparent; } .WM-Input:focus::-webkit-input-placeholder { color: transparent; } .WM-Input:focus:-moz-placeholder { color: transparent; } .WM-Input:focus::-moz-placeholder { color: transparent; } .WM-Input:focus:-ms-input-placeholder { color: transparent; } .WM-TextArea:focus::-webkit-input-placeholder { color: transparent; } .WM-TextArea:focus:-moz-placeholder { color: transparent; } .WM-TextArea:focus::-moz-placeholder { color: transparent; } .WM-TextArea:focus:-ms-input-placeholder { color: transparent; } .WM-Input::-webkit-input-placeholder { color: #555555; } .WM-Input:-moz-placeholder { color: #555555; } .WM-Input::-moz-placeholder { color: #555555; } .WM-Input:-ms-input-placeholder { color: #555555; } .WM-TextArea::-webkit-input-placeholder { color: #555555; } .WM-TextArea:-moz-placeholder { color: #555555; } .WM-TextArea::-moz-placeholder { color: #555555; } .WM-TextArea:-ms-input-placeholder { color: #555555; } .WM-InputWrapper { width: 100%; position: relative; border-bottom: 2px solid #d9d9d9; padding-bottom: 0px; margin-bottom: 35px; } .WM-InputLabel { font-size: 15px; color: #999999; line-height: 1.5; padding-left: 5px; } .WM-Input100 { display: block; width: 100%; background: transparent; font-size: 18px; color: #555555; line-height: 1.2; } .WM-Input100-Focus { position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .WM-Input100-Focus::before { content: ""; display: block; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; transition: all 0.4s; background: #ff4b5a; } .WM-Input.WM-Input100 { height: 40px; } .WM-InputWrapper input:disabled { cursor: not-allowed; } .WM-TextArea.WM-Input100 { min-height: 110px; padding-top: 9px; padding-bottom: 13px; } .WM-Input100:focus + .WM-Input100-Focus::before { width: 100%; } .WM-Select { background-color: transparent !important; -webkit-appearance: none; } /* -------------------------------------------------------- Buttons :: Begin -------------------------------------------------------- */ .WM-Btn { outline: none !important; border: none; background: transparent; display: flex; justify-content: center; align-items: center; padding: 0 20px; min-width: 160px; height: 50px; border-radius: 25px; font-size: 16px; color: #fff; line-height: 1.2; transition: all 0.4s; } .WM-Btn-Red { background-color: #ee3552; box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -moz-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); } .WM-Btn-Orange { background-color: #FF6B57; box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -moz-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); } .WM-Btn-Purple { background-color: #32c5d2; box-shadow: 0 10px 30px 0px rgba(250, 197, 210, 0.5); -moz-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.5); } .WM-Btn-Yellow { background-color: #ffd63a; color: #2f353b; box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5); -moz-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(234, 223, 131, 0.5); } .WM-Btn-Purple { background-color: #ac3773; color: #fff; box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5); -moz-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(172, 55, 115, 0.5); } .WM-Btn-Black { background-color: #2f353b; box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(0, 0, 0, 0.5); } .WM-Btn-White { background-color: #fff; color: #2f353b; box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2); -moz-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2); -webkit-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2); -o-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2); -ms-box-shadow: 0 10px 30px 0px rgba(255, 255, 255, 0.2); } .WM-Btn-Green { background-color: #0d7e00; box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.35); -moz-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.35); -webkit-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.35); -o-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.35); -ms-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.35); } .WM-Btn-Cyan { background-color: #32c5d2; box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.32); -moz-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.32); -webkit-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.32); -o-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.32); -ms-box-shadow: 0 10px 30px 0px rgba(50, 197, 210, 0.32); } .WM-Btn i { margin-left: 5px; transition: all 0.4s; } .WM-Btn:hover { background-color: #333333; cursor: pointer; color: #fff; box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5); -moz-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(51, 51, 51, 0.5); } .WM-Btn-RedHover:hover { background-color: #ee3552; cursor: pointer; color: #fff; box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -moz-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(255, 75, 90, 0.5); } .WM-Btn-SM { min-width: 50px; padding: 0 10px; } .WM-Btn-SM i { margin-left: 0px; } button, html [type=button], [type=reset], [type=submit] { -webkit-appearance: none; } /* -------------------------------------------------------- Links :: Begin -------------------------------------------------------- */ .WM-Link { display: inline-block; color: #000; direction: rtl; text-decoration: none; } .WM-Link::after { content: ""; display: block; width: 0; height: 2px; background: #000; transition: width 0.3s; margin-top: 2px; } .WM-Link:hover::after, .WM-Link.WM-Selected::after, .WM-Link.WM-Active::after { width: 100%; } .WM-Height-90 { height: 90px; } .WM-Height-110 { height: 110px; } .WM-Width-220 { width: 220px; } .WM-Width-100 { width: 100%; } .WM-Absolute { position: absolute; } .WM-Block { display: block; } .WM-InlineBlock { display: inline-block; } .WM-Flex { display: flex !important; } .WM-Flex > *, .WM-Inline-Flex > * { -webkit-box-flex: 1 !important; } .WM-Float-L { float: left; } .WM-Float-R { float: right; } .WM-Align-R { text-align: right; } .WM-Align-L { text-align: left; } .WM-Align-C { text-align: center; } /* -------------------------------------------------------- Margins :: Begin -------------------------------------------------------- */ .WM-Margin-T-10 { margin-top: 10px; } .WM-Margin-T-15 { margin-top: 15px; } .WM-Margin-T-20 { margin-top: 20px; } .WM-Margin-T-45 { margin-top: 45px; } .WM-Margin-T-55 { margin-top: 55px; } .WM-Margin-T-100 { margin-top: 100px; } .WM-Margin-L-10 { margin-left: 10px; } .WM-Margin-R-10 { margin-right: 10px; } .WM-Margin-BT-20 { margin-top: 20px; margin-bottom: 20px; } .WM-Margin-BT-5 { margin-top: 5px; margin-bottom: 5px; } .WM-Margin-B-10 { margin-bottom: 10px; } .WM-Margin-RL-15 { margin-left: 15px; margin-right: 15px; } /* -------------------------------------------------------- Paddings :: Begin -------------------------------------------------------- */ .WM-Padding-10 { padding: 10px; } /* -------------------------------------------------------- Fonts :: Begin -------------------------------------------------------- */ .WM-Font-12 { font-size: 12px; } .WM-Font-14 { font-size: 14px; } .WM-Font-16 { font-size: 16px; } .WM-Font-18 { font-size: 18px; } .WM-Font-20 { font-size: 20px; } .WM-Font-22 { font-size: 22px; } .WM-Font-24 { font-size: 24px; } .WM-Font-30 { font-size: 30px; } .WM-Font-36 { font-size: 36px; } .WM-Font-48 { font-size: 48px; } .WM-Font-52 { font-size: 52px; } .WM-Font-60 { font-size: 60px; } .WM-LineHeight-40 { line-height: 40px; } .WM-LetterSpacing-5 { letter-spacing: 5px; } .WM-LetterSpacing-10 { letter-spacing: 10px; } .WM-LetterSpacing-15 { letter-spacing: 15px; } /* -------------------------------------------------------- Colors :: Begin -------------------------------------------------------- */ .WM-BG-Red, .WM-Link-Red::after, .WM-Input.WM-Red + .WM-Input100-Focus::before { background-color: #ee3552; color: #fff; } .WM-Color-Red, .WM-Link-Red:hover, .WM-Link-Red.WM-Selected, .WM-Link-Red.WM-Active { color: #ee3552; } .WM-Border-Red, .WM-Hover-Red:hover { border-color: #ee3552; } .WM-BG-Orange, .WM-Link-Orange::after, .WM-Input.WM-Orange + .WM-Input100-Focus::before { background-color: #FF6B57; color: #fff; } .WM-Color-Orange, .WM-Link-Orange:hover, .WM-Link-Orange.WM-Selected, .WM-Link-Orange.WM-Active { color: #FF6B57; } .WM-Border-Orange, .WM-Hover-Orange:hover { border-color: #FF6B57; } .WM-BG-Yellow, .WM-Link-Yellow::after, .WM-Input.WM-Yellow + .WM-Input100-Focus::before { background-color: #ffd63a; color: #fff; } .WM-Color-Yellow, .WM-Link-Yellow:hover, .WM-Link-Yellow.WM-Selected, .WM-Link-Yellow.WM-Active { color: #ffd63a; } .WM-Border-Yellow, .WM-Hover-Yellow:hover { border-color: #ffd63a; } .WM-BG-Gold, .WM-Link-Gold::after, .WM-Input.WM-Gold + .WM-Input100-Focus::before { background-color: #ddcfbb; color: #fff; } .WM-Color-Gold, .WM-Link-Gold:hover, .WM-Link-Gold.WM-Selected, .WM-Link-Gold.WM-Active { color: #ddcfbb; } .WM-Border-Gold, .WM-Hover-Gold:hover { border-color: #ddcfbb; } .WM-BG-Purple, .WM-Link-Purple::after, .WM-Input.WM-Purple + .WM-Input100-Focus::before { background-color: #ac3773; color: #fff; } .WM-Color-Purple, .WM-Link-Purple:hover, .WM-Link-Purple.WM-Selected, .WM-Link-Purple.WM-Active { color: #ac3773; } .WM-Border-Purple, .WM-Hover-Purple:hover { border-color: #ac3773; } .WM-BG-Blue, .WM-Link-Blue::after, .WM-Input.WM-Blue + .WM-Input100-Focus::before { background-color: #3498DB; color: #fff; } .WM-Color-Blue, .WM-Link-Blue:hover, .WM-Link-Blue.WM-Selected, .WM-Link-Blue.WM-Active { color: #3498DB; } .WM-Border-Blue, .WM-Hover-Blue:hover { border-color: #3498DB; } .WM-BG-Green, .WM-Link-Green::after, .WM-Input.WM-Green + .WM-Input100-Focus::before { background-color: #0d7e00; color: #fff; } .WM-Color-Green, .WM-Link-Green:hover, .WM-Link-Green.WM-Selected, .WM-Link-Green.WM-Active { color: #0d7e00; } .WM-Border-Green, .WM-Hover-Green:hover { border-color: #0d7e00; } .WM-BG-Cyan, .WM-Link-Cyan::after, .WM-Input.WM-Cyan + .WM-Input100-Focus::before { background-color: #32c5d2; color: #fff; } .WM-Color-Cyan, .WM-Link-Cyan:hover, .WM-Link-Cyan.WM-Selected, .WM-Link-Cyan.WM-Active { color: #32c5d2; } .WM-Border-Cyan, .WM-Hover-Cyan:hover { border-color: #32c5d2; } .WM-BG-LightGray, .WM-Link-LightGray::after, .WM-Input.WM-LightGray + .WM-Input100-Focus::before { background-color: #e6e6e6; color: #fff; } .WM-Color-LightGray, .WM-Link-LightGray:hover, .WM-Link-LightGray.WM-Selected, .WM-Link-LightGray.WM-Active { color: #e6e6e6; } .WM-Border-LightGray, .WM-Hover-LightGray:hover { border-color: #e6e6e6; } .WM-BG-Gray, .WM-Link-Gray::after, .WM-Input.WM-Gray + .WM-Input100-Focus::before { background-color: #797979; color: #fff; } .WM-Color-Gray, .WM-Link-Gray:hover, .WM-Link-Gray.WM-Selected, .WM-Link-Gray.WM-Active { color: #797979; } .WM-Border-Gray, .WM-Hover-Gray:hover { border-color: #797979; } .WM-BG-Dark, .WM-Link-Dark::after, .WM-Input.WM-Dark + .WM-Input100-Focus::before { background-color: #2f353b; color: #fff; } .WM-Color-Dark, .WM-Link-Dark:hover, .WM-Link-Dark.WM-Selected, .WM-Link-Dark.WM-Active { color: #2f353b; } .WM-Border-Dark, .WM-Hover-Dark:hover { border-color: #2f353b; } .WM-BG-Black, .WM-Link-Black::after, .WM-Input.WM-Black + .WM-Input100-Focus::before { background-color: #2f353b; color: #fff; } .WM-Color-Black, .WM-Link-Black:hover, .WM-Link-Black.WM-Selected, .WM-Link-Black.WM-Active { color: #2f353b; } .WM-Border-Black, .WM-Hover-Black:hover { border-color: #2f353b; } .WM-BG-White, .WM-Link-White::after, .WM-Input.WM-White + .WM-Input100-Focus::before { background-color: #fff; color: #fff; } .WM-Color-White, .WM-Link-White:hover, .WM-Link-White.WM-Selected, .WM-Link-White.WM-Active { color: #fff; } .WM-Border-White, .WM-Hover-White:hover { border-color: #fff; } .WM-BG-LightGray { color: #000 !important; }