/* -------------------------------------------------------- General :: Begin -------------------------------------------------------- */ .En-Raleway { font-family: 'Raleway', sans-serif; } .WM-SubText { display: inline-block; padding: 10px 25px 10px 25px; color: #fff; border-radius: 5px; margin: 3px 0px 10px 0px; } .WM-SubText.SmallPad { padding: 5px 15px 5px 15px; } .WM-SubText.XS { padding: 3px 15px 1px 15px; } .WM-LetterSpacing-5 { letter-spacing: 5px; } .WM-LetterSpacing-10 { letter-spacing: 10px; } .WM-LetterSpacing-15 { letter-spacing: 15px; } .wow { visibility: hidden; } .RotateX { transform: rotate(180deg); webkit-transform: rotate(180deg); } .Material-Shoadow-SM { box-shadow: 0 8px 10px rgba(0,0,0,0.30), 0 4px 3px rgba(0,0,0,0.22); } .InlineBlock { display: inline-block; } .CubeTransition { transition-property: all; transition-duration: .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; } .WM-Height-90 { height: 90px; } .WM-Height-110 { height: 110px; } .WM-Height-130 { height: 130px; } .WM-Width-220 { width: 220px; } .WM-Width-Full { width: 100%; } .WM-Height-Full { height: 100%; } .WM-Absolute { position: absolute; } .WM-Relative { position: relative; } .WM-Block { display: block; } .WM-InlineBlock { display: inline-block; } [class^='WM-Hover'], [class*='WM-Hover'] { transition: 0.2s; } /* -------------------------------------------------------- Align & Floats :: Begin -------------------------------------------------------- */ .WM-Align-C { text-align: center; } .WM-Align-R { text-align: right; } .WM-Align-L { text-align: left; } .WM-Float-R { float: right; } .WM-Float-L { float: left; } /* -------------------------------------------------------- Direction :: Begin -------------------------------------------------------- */ .WM-RTL { direction: rtl; } /* -------------------------------------------------------- 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; } /* -------------------------------------------------------- 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; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; background: #ff4b5a; } .WM-Input.WM-Red + .WM-Input100-Focus::before { background: #ee3552; } .WM-Input.WM-Orange + .WM-Input100-Focus::before { background: #FF6B57; } .WM-Input.WM-Purple + .WM-Input100-Focus::before { background: #ac3773; } .WM-Input.WM-Cyan + .WM-Input100-Focus::before { background: #32c5d2; } .WM-Input.WM-Green + .WM-Input100-Focus::before { background: #0d7e00; } .WM-Input.WM-Blue + .WM-Input100-Focus::before { background: #3498DB; } .WM-Input.WM-Black + .WM-Input100-Focus::before { background: #000; } .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; } /* -------------------------------------------------------- Margins :: Begin -------------------------------------------------------- */ .WM-Margin-T-5 { margin-top: 5px; } .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-L-0 { margin-left: 0 !important; } .WM-Margin-R-10 { margin-right: 10px; } .WM-Margin-R-40 { margin-right: 40px; } .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-B-30 { margin-bottom: 30px; } .WM-Margin-RL-15 { margin-left: 15px; margin-right: 15px; } /* -------------------------------------------------------- Paddings :: Begin -------------------------------------------------------- */ .WM-Padding-10 { padding: 10px; } .WM-Padding-5 { padding: 5px; } .WM-Padding-T-10 { padding-top: 10px; } /* -------------------------------------------------------- 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; } /* -------------------------------------------------------- Buttons :: Begin -------------------------------------------------------- */ .WM-Btn { outline: none !important; border: none; background: transparent; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; 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; */ line-height: 0; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; 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, 107, 87, 0.5); -moz-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(255, 107, 87, 0.5); } .WM-Btn-Cyan { 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: #000; 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: #000; 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: #000; 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.5); -moz-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(13, 126, 0, 0.5); } .WM-Btn-Blue { background-color: #3498DB; box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5); -moz-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(52, 152, 219, 0.5); } .WM-Btn-Gray { background-color: #797979; box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5); -moz-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5); -webkit-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5); -o-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5); -ms-box-shadow: 0 10px 30px 0px rgba(82, 104, 119, 0.5); } .WM-Btn i { margin-left: 5px; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; 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; } .WM-Btn-XS { min-width: 40px; padding: 0 10px; line-height: 1 !important; height: 40px !important; } .WM-Btn-XS i { margin-left: 0px; } /* .WM-Btn:hover i { -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } */ /* -------------------------------------------------------- Headers :: Begin -------------------------------------------------------- */ .WM-SH-Container { width: 100%; position: relative; text-align: right; } .WM-SH-TextFa { margin-bottom: 15px; font-size: 25px; color: #000; } .WM-SH-Line { width: 100%; height: 1px; background-color: #000; overflow: hidden; } .WM-SH-TextEn-Container { top: -12px; position: relative; display: inline-block; z-index: 14; overflow: visible; padding: 0 0px; background-color: #fff; } .WM-SH-TextEn { background-color: #000; padding: 5px 20px 5px 20px; color: #fff; z-index: 9; overflow: visible; font-size: 14px; margin: 0px 0px 0px 20px; border-radius: 3px; } .WM-SH-Description { margin-top: -7px; font-size: 14px; } /* -------------------------------------------------------- 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 .3s; margin-top: 2px; } .WM-Link:hover::after, .WM-Link.WM-Selected::after { width: 100%; } .WM-Link-Red:hover, .WM-Link-Red.WM-Selected { color: #ee3552 !important; } .WM-Link-Red::after { background: #ee3552; } .WM-Link-Green:hover, .WM-Link-Green.WM-Selected { color: #32c5d2 !important; } .WM-Link-Green::after { background: #32c5d2; } .WM-Link-Dark:hover, .WM-Link-Dark.WM-Selected { color: #000 !important; } .WM-Link-Dark::after { background: #000; } .WM-Link-Purple:hover, .WM-Link-Purple.WM-Selected { color: #ac3773 !important; } .WM-Link-Purple::after { background: #ac3773; } .WM-Link-Orange:hover, .WM-Link-Orange.WM-Selected { color: #FF6B57 !important; } .WM-Link-Orange::after { background: #FF6B57; } /* -------------------------------------------------------- Colors :: Begin -------------------------------------------------------- */ /* ---------------------------AutoMatic Generate--------------------------- */ .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 !important; } .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 !important; } .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 !important; } .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 !important; } .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 !important; } .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 !important; } .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; } /* ---------------------------AutoMatic Generate--------------------------- */ .WM-BG-LightGray, .WM-BG-Gold { color: #000 !important; } /* -------------------------------------------------------- Hover :: Grayscale -------------------------------------------------------- */ .WM-CategoryItem { display:block; overflow:hidden; position:relative; } .WM-Hover-Grayscale { cursor: pointer; -webkit-transition: all 1s ease !important; -moz-transition: all 1s ease !important; -o-transition: all 1s ease !important; -ms-transition: all 1s ease !important; transition: all 1s ease !important; } .WM-Hover-Grayscale:hover { -webkit-filter: grayscale(100%) !important; }