/* Minification failed. Returning unminified contents. (3256,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3257,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3258,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3259,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3260,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3261,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3262,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3263,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3264,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3265,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3266,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3267,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3268,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3269,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3270,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3271,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3272,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3273,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3274,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3275,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3276,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3277,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4114,22): run-time error CSS1039: Token not allowed after unary operator: '-accent' (4130,26): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink' (4140,33): run-time error CSS1039: Token not allowed after unary operator: '-accent' (4149,30): run-time error CSS1039: Token not allowed after unary operator: '-line' (4151,22): run-time error CSS1039: Token not allowed after unary operator: '-surface' (4152,17): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (4170,17): run-time error CSS1039: Token not allowed after unary operator: '-muted' (4181,21): run-time error CSS1039: Token not allowed after unary operator: '-ink' (4182,26): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (4590,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-fld' (4591,19): run-time error CSS1039: Token not allowed after unary operator: '-ink' (4604,27): run-time error CSS1039: Token not allowed after unary operator: '-accent' (4615,14): run-time error CSS1039: Token not allowed after unary operator: '-mint' (4952,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4953,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4954,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4955,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4956,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4957,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4958,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4959,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4960,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4961,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4962,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4963,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4964,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4965,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4966,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4967,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4968,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4969,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4970,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4971,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4972,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4973,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4988,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (5012,19): run-time error CSS1039: Token not allowed after unary operator: '-ink' (5174,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (5200,28): run-time error CSS1039: Token not allowed after unary operator: '-line' (5201,20): run-time error CSS1039: Token not allowed after unary operator: '-surface' (5202,15): run-time error CSS1039: Token not allowed after unary operator: '-faint' (5208,15): run-time error CSS1039: Token not allowed after unary operator: '-faint' (5213,20): run-time error CSS1039: Token not allowed after unary operator: '-mint-wash' (5215,15): run-time error CSS1039: Token not allowed after unary operator: '-mint' (5219,15): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (5223,20): run-time error CSS1039: Token not allowed after unary operator: '-accent' (5224,22): run-time error CSS1039: Token not allowed after unary operator: '-accent' (5226,30): run-time error CSS1039: Token not allowed after unary operator: '-accent-wash' (5230,15): run-time error CSS1039: Token not allowed after unary operator: '-ink' (5240,19): run-time error CSS1039: Token not allowed after unary operator: '-line' (5244,19): run-time error CSS1039: Token not allowed after unary operator: '-mint' (5264,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (5265,25): run-time error CSS1039: Token not allowed after unary operator: '-line' (5266,22): run-time error CSS1039: Token not allowed after unary operator: '-radius' (5267,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (5275,32): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (5286,15): run-time error CSS1039: Token not allowed after unary operator: '-accent' (5306,15): run-time error CSS1039: Token not allowed after unary operator: '-accent' (5313,21): run-time error CSS1039: Token not allowed after unary operator: '-accent-wash' (5330,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (5336,15): run-time error CSS1039: Token not allowed after unary operator: '-ink' (5340,16): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (5350,19): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (5353,14): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (5363,14): run-time error CSS1039: Token not allowed after unary operator: '-mint' (5371,14): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (5384,27): run-time error CSS1039: Token not allowed after unary operator: '-line' (5385,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (5416,21): run-time error CSS1039: Token not allowed after unary operator: '-accent' (5431,16): run-time error CSS1039: Token not allowed after unary operator: '-muted' (5436,16): run-time error CSS1039: Token not allowed after unary operator: '-accent' (5440,19): run-time error CSS1030: Expected identifier, found ':' (5440,27): run-time error CSS1031: Expected selector, found ')' (5440,27): run-time error CSS1025: Expected comma or open brace, found ')' (5445,20): run-time error CSS1030: Expected identifier, found ':' (5445,28): run-time error CSS1031: Expected selector, found ')' (5445,28): run-time error CSS1025: Expected comma or open brace, found ')' (5449,21): run-time error CSS1030: Expected identifier, found ':' (5449,29): run-time error CSS1031: Expected selector, found ')' (5449,29): run-time error CSS1025: Expected comma or open brace, found ')' (5454,27): run-time error CSS1039: Token not allowed after unary operator: '-accent' (5492,15): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (5496,15): run-time error CSS1039: Token not allowed after unary operator: '-accent' (5504,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (5513,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (5514,19): run-time error CSS1039: Token not allowed after unary operator: '-field-bg' (5515,27): run-time error CSS1039: Token not allowed after unary operator: '-line' (5516,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-fld' (5522,15): run-time error CSS1039: Token not allowed after unary operator: '-faint' (5530,22): run-time error CSS1039: Token not allowed after unary operator: '-accent' (5532,30): run-time error CSS1039: Token not allowed after unary operator: '-accent-wash' (5559,15): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (5568,19): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (5594,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (5607,22): run-time error CSS1030: Expected identifier, found ':' (5607,30): run-time error CSS1031: Expected selector, found ')' (5607,30): run-time error CSS1025: Expected comma or open brace, found ')' (5614,27): run-time error CSS1039: Token not allowed after unary operator: '-accent' (5623,29): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (5634,14): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (5652,20): run-time error CSS1039: Token not allowed after unary operator: '-surface' (5669,17): run-time error CSS1030: Expected identifier, found ':' (5669,25): run-time error CSS1031: Expected selector, found ')' (5669,25): run-time error CSS1025: Expected comma or open brace, found ')' (5674,18): run-time error CSS1030: Expected identifier, found ':' (5674,26): run-time error CSS1031: Expected selector, found ')' (5674,26): run-time error CSS1025: Expected comma or open brace, found ')' (5680,26): run-time error CSS1039: Token not allowed after unary operator: '-accent' (5710,28): run-time error CSS1039: Token not allowed after unary operator: '-line' (5712,26): run-time error CSS1039: Token not allowed after unary operator: '-field-bg' (5733,19): run-time error CSS1039: Token not allowed after unary operator: '-accent' (5749,20): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink' (5759,27): run-time error CSS1039: Token not allowed after unary operator: '-accent' (5768,27): run-time error CSS1039: Token not allowed after unary operator: '-line' (5770,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (5771,14): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (5779,15): run-time error CSS1039: Token not allowed after unary operator: '-ink' (5789,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (5800,15): run-time error CSS1039: Token not allowed after unary operator: '-ink' (5801,20): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (5855,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (5868,30): run-time error CSS1039: Token not allowed after unary operator: '-line' (5877,14): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (5886,15): run-time error CSS1039: Token not allowed after unary operator: '-mint' (5893,29): run-time error CSS1039: Token not allowed after unary operator: '-line' (5917,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (5923,29): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (5933,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (5937,16): run-time error CSS1039: Token not allowed after unary operator: '-mint' (5942,16): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (5985,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (5986,25): run-time error CSS1039: Token not allowed after unary operator: '-line' (5988,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (6001,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (6012,16): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (6035,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (6040,20): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (6041,15): run-time error CSS1039: Token not allowed after unary operator: '-ink' (6056,14): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (6069,14): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6073,15): run-time error CSS1039: Token not allowed after unary operator: '-accent-ink' (6084,29): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (6093,14): run-time error CSS1039: Token not allowed after unary operator: '-faint' (6104,27): run-time error CSS1039: Token not allowed after unary operator: '-line' (6106,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (6109,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (6115,20): run-time error CSS1039: Token not allowed after unary operator: '-field-bg' (6119,53): run-time error CSS1039: Token not allowed after unary operator: '-accent-wash' (6124,15): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6149,20): run-time error CSS1039: Token not allowed after unary operator: '-surface' (6151,15): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6152,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (6158,15): run-time error CSS1039: Token not allowed after unary operator: '-ink' (6162,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (6192,27): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6200,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (6331,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6332,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6333,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6334,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6335,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6336,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6337,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6338,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6339,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6340,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6341,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6342,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6343,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6344,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6345,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6346,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6347,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6348,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6349,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6350,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6351,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6352,2): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6367,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (6391,19): run-time error CSS1039: Token not allowed after unary operator: '-ink' (6481,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (6507,28): run-time error CSS1039: Token not allowed after unary operator: '-line' (6508,20): run-time error CSS1039: Token not allowed after unary operator: '-surface' (6509,15): run-time error CSS1039: Token not allowed after unary operator: '-faint' (6515,15): run-time error CSS1039: Token not allowed after unary operator: '-faint' (6520,20): run-time error CSS1039: Token not allowed after unary operator: '-mint-wash' (6522,15): run-time error CSS1039: Token not allowed after unary operator: '-mint' (6526,15): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (6530,20): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6531,22): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6533,30): run-time error CSS1039: Token not allowed after unary operator: '-accent-wash' (6537,15): run-time error CSS1039: Token not allowed after unary operator: '-ink' (6547,19): run-time error CSS1039: Token not allowed after unary operator: '-line' (6551,19): run-time error CSS1039: Token not allowed after unary operator: '-mint' (6571,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (6572,25): run-time error CSS1039: Token not allowed after unary operator: '-line' (6573,22): run-time error CSS1039: Token not allowed after unary operator: '-radius' (6574,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (6582,32): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (6592,20): run-time error CSS1039: Token not allowed after unary operator: '-accent-wash' (6593,15): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6613,15): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6620,21): run-time error CSS1039: Token not allowed after unary operator: '-accent-wash' (6637,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (6643,15): run-time error CSS1039: Token not allowed after unary operator: '-ink' (6647,16): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (6657,19): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (6660,14): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (6670,14): run-time error CSS1039: Token not allowed after unary operator: '-mint' (6678,14): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (6691,27): run-time error CSS1039: Token not allowed after unary operator: '-line' (6692,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-sm' (6723,21): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6738,16): run-time error CSS1039: Token not allowed after unary operator: '-muted' (6743,16): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6747,19): run-time error CSS1030: Expected identifier, found ':' (6747,27): run-time error CSS1031: Expected selector, found ')' (6747,27): run-time error CSS1025: Expected comma or open brace, found ')' (6752,20): run-time error CSS1030: Expected identifier, found ':' (6752,28): run-time error CSS1031: Expected selector, found ')' (6752,28): run-time error CSS1025: Expected comma or open brace, found ')' (6756,21): run-time error CSS1030: Expected identifier, found ':' (6756,29): run-time error CSS1031: Expected selector, found ')' (6756,29): run-time error CSS1025: Expected comma or open brace, found ')' (6761,27): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6803,15): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (6807,15): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6815,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (6824,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (6825,19): run-time error CSS1039: Token not allowed after unary operator: '-field-bg' (6826,27): run-time error CSS1039: Token not allowed after unary operator: '-line' (6827,22): run-time error CSS1039: Token not allowed after unary operator: '-radius-fld' (6833,15): run-time error CSS1039: Token not allowed after unary operator: '-faint' (6841,22): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6843,30): run-time error CSS1039: Token not allowed after unary operator: '-accent-wash' (6870,15): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (6878,19): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (6890,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (6901,22): run-time error CSS1030: Expected identifier, found ':' (6901,30): run-time error CSS1031: Expected selector, found ')' (6901,30): run-time error CSS1025: Expected comma or open brace, found ')' (6908,27): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6917,29): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (6928,14): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (6946,20): run-time error CSS1039: Token not allowed after unary operator: '-surface' (6963,17): run-time error CSS1030: Expected identifier, found ':' (6963,25): run-time error CSS1031: Expected selector, found ')' (6963,25): run-time error CSS1025: Expected comma or open brace, found ')' (6968,18): run-time error CSS1030: Expected identifier, found ':' (6968,26): run-time error CSS1031: Expected selector, found ')' (6968,26): run-time error CSS1025: Expected comma or open brace, found ')' (6974,26): run-time error CSS1039: Token not allowed after unary operator: '-accent' (6989,28): run-time error CSS1039: Token not allowed after unary operator: '-line' (6991,26): run-time error CSS1039: Token not allowed after unary operator: '-field-bg' (7044,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (7057,30): run-time error CSS1039: Token not allowed after unary operator: '-line' (7066,14): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (7075,15): run-time error CSS1039: Token not allowed after unary operator: '-mint' (7082,29): run-time error CSS1039: Token not allowed after unary operator: '-line' (7106,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (7112,29): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (7122,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (7126,16): run-time error CSS1039: Token not allowed after unary operator: '-mint' (7131,16): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (7157,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (7189,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (7190,25): run-time error CSS1039: Token not allowed after unary operator: '-line' (7192,19): run-time error CSS1039: Token not allowed after unary operator: '-shadow-lg' (7205,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (7216,16): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (7239,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (7244,20): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (7245,15): run-time error CSS1039: Token not allowed after unary operator: '-ink' (7260,14): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (7295,29): run-time error CSS1039: Token not allowed after unary operator: '-line-soft' (7304,14): run-time error CSS1039: Token not allowed after unary operator: '-faint' (7315,27): run-time error CSS1039: Token not allowed after unary operator: '-line' (7317,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (7320,14): run-time error CSS1039: Token not allowed after unary operator: '-ink' (7326,20): run-time error CSS1039: Token not allowed after unary operator: '-field-bg' (7330,53): run-time error CSS1039: Token not allowed after unary operator: '-accent-wash' (7335,15): run-time error CSS1039: Token not allowed after unary operator: '-accent' (7360,20): run-time error CSS1039: Token not allowed after unary operator: '-surface' (7362,15): run-time error CSS1039: Token not allowed after unary operator: '-accent' (7363,20): run-time error CSS1039: Token not allowed after unary operator: '-shadow-sm' (7369,15): run-time error CSS1039: Token not allowed after unary operator: '-ink' (7373,15): run-time error CSS1039: Token not allowed after unary operator: '-muted' (7388,27): run-time error CSS1039: Token not allowed after unary operator: '-ink' (7390,19): run-time error CSS1039: Token not allowed after unary operator: '-ink' (7403,27): run-time error CSS1039: Token not allowed after unary operator: '-accent' (7411,14): run-time error CSS1039: Token not allowed after unary operator: '-muted' (7481,14): run-time error CSS1039: Token not allowed after unary operator: '-faint' (7819,27): run-time error CSS1039: Token not allowed after unary operator: '-line' (7821,19): run-time error CSS1039: Token not allowed after unary operator: '-surface' (7822,14): run-time error CSS1039: Token not allowed after unary operator: '-ink-soft' (7834,20): run-time error CSS1039: Token not allowed after unary operator: '-surface' (7835,15): run-time error CSS1039: Token not allowed after unary operator: '-ink' */ @charset "utf-8"; /* CSS Document */ * { box-sizing:border-box; } html { margin:0; padding:0; -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } body { font-family: "Noto Sans", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size:14px; margin:0; padding:0; } h1, h2, h3, h4, h5, h6 { font-family: "Space Grotesk", serif; font-weight: 600; font-style: normal; } input, button, textarea, select { font-family: "Noto Sans", sans-serif; } a { text-decoration:none; } img { max-width:100%; } /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { position: relative; width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .column, .columns { width: 100%; float: left; box-sizing: border-box; } /* For devices larger than 400px */ @media (min-width: 400px) { .container { width: 90%; padding: 0; } } /* For devices larger than 550px */ @media (min-width: 550px) { .container { width: 90%; } .column, .columns { margin-left: 4%; } .column:first-child, .columns:first-child { margin-left: 0; } .one.column, .one.columns { width: 4.66666666667%; } .two.columns { width: 13.3333333333%; } .three.columns { width: 22%; } .four.columns { width: 30.6666666667%; } .five.columns { width: 39.3333333333%; } .six.columns { width: 48%; } .seven.columns { width: 56.6666666667%; } .eight.columns { width: 65.3333333333%; } .nine.columns { width: 74.0%; } .ten.columns { width: 82.6666666667%; } .eleven.columns { width: 91.3333333333%; } .twelve.columns { width: 100%; margin-left: 0; } .one-third.column { width: 30.6666666667%; } .two-thirds.column { width: 65.3333333333%; } .one-half.column { width: 48%; } /* Offsets */ .offset-by-one.column, .offset-by-one.columns { margin-left: 8.66666666667%; } .offset-by-two.column, .offset-by-two.columns { margin-left: 17.3333333333%; } .offset-by-three.column, .offset-by-three.columns { margin-left: 26%; } .offset-by-four.column, .offset-by-four.columns { margin-left: 34.6666666667%; } .offset-by-five.column, .offset-by-five.columns { margin-left: 43.3333333333%; } .offset-by-six.column, .offset-by-six.columns { margin-left: 52%; } .offset-by-seven.column, .offset-by-seven.columns { margin-left: 60.6666666667%; } .offset-by-eight.column, .offset-by-eight.columns { margin-left: 69.3333333333%; } .offset-by-nine.column, .offset-by-nine.columns { margin-left: 78.0%; } .offset-by-ten.column, .offset-by-ten.columns { margin-left: 86.6666666667%; } .offset-by-eleven.column, .offset-by-eleven.columns { margin-left: 95.3333333333%; } .offset-by-one-third.column, .offset-by-one-third.columns { margin-left: 34.6666666667%; } .offset-by-two-thirds.column, .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } .offset-by-one-half.column, .offset-by-one-half.columns { margin-left: 52%; } } /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* NOTE html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1, h2, h3, h4, h5, h6 { margin-top: 0; /* margin-bottom: 2rem;*/ } p { margin-top: 0; } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { color: #fff; } a:hover { color: #fff; /*text-decoration:underline;*/ } /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block; height: 38px; padding: 0 30px; color: #555; text-align: center; font-size: 11px; font-weight: 600; line-height: 38px; letter-spacing: .1rem; /*text-transform: uppercase;*/ text-decoration: none; white-space: nowrap; background-color: transparent; border-radius: 4px; border: 1px solid #bbb; cursor: pointer; box-sizing: border-box; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: white; border-color: #888; outline: 0; } .button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #FFF; background-color: #33C3F0; border-color: #33C3F0; } .button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #FFF; background-color: #1EAEDB; border-color: #1EAEDB; } /* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select { height: 38px; padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #fff; border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; box-sizing: border-box; } /* Removes awkward default styles on some inputs for iOS */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; } textarea { min-height: 65px; padding-top: 6px; padding-bottom: 6px; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: 1px solid #33C3F0; outline: 0; } label, legend { display: block; margin-bottom: .5rem; /*font-weight: 600;*/ } fieldset { padding: 0; border-width: 0; } input[type="checkbox"], input[type="radio"] { display: inline; } label > .label-body { display: inline-block; margin-left: .5rem; font-weight: normal; } /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ ul { list-style: circle inside; } ol { list-style: decimal inside; } ol, ul { padding-left: 0; margin-top: 0; } /*ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; font-size: 90%; }*/ /*li { margin-bottom: 1rem; }*/ /* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */ code { padding: .2rem .5rem; margin: 0 .2rem; font-size: 90%; white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; border-radius: 4px; } pre > code { display: block; padding: 1rem 1.5rem; white-space: pre; } /* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */ th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #E1E1E1; } th:first-child, td:first-child { /* padding-left: 0;*/ } th:last-child, td:last-child { /*padding-right: 0;*/ } /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ button, .button { margin-bottom: 1rem; } input, textarea, select, fieldset { /*margin-bottom: 1.5rem;*/ } /*pre, blockquote, dl, figure, table, p, ul, ol, form { margin-bottom: 2.5rem; }*/ /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ .u-full-width { width: 100%; box-sizing: border-box; } .u-max-full-width { max-width: 100%; box-sizing: border-box; } .u-pull-right { float: right; } .u-pull-left { float: left; } /* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; border-top: 1px solid #E1E1E1; } /* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Self Clearing Goodness */ .container:after, .row:after, .u-cf { content: ""; display: table; clear: both; } /* Navigation –––––––––––––––––––––––––––––––––––––––––––––––––– */ /*nav{*/ /* position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 70px; background: #3E8DA8; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); z-index: 99;*/ /*padding:5px 0; } nav .logo img { max-width:120px; } nav .navbar{ height: 100%; max-width: 1140px; width: 100%; display: flex; align-items: center; justify-content: space-between; margin: auto;*/ /* background: red; padding: 0 50px;*/ /*} .navbar .logo a{ font-size: 30px; color: #fff; text-decoration: none; font-weight: 600; } nav .navbar .nav-links{ line-height: 70px; height: 100%; } nav .navbar .links{ display: flex; margin-bottom:0; } nav .navbar .links li{ position: static; display: flex; align-items: center; justify-content: space-between; list-style: none; padding: 0 14px; } nav .navbar .links li a{ height: 100%; text-decoration: none; white-space: nowrap; color: #000; font-size: 15px; font-weight: 500; position:relative; } nav .navbar .links li a:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 3px; left: 50%; position: absolute; background: #007aff; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } nav .navbar .links li a:hover:after { width: 100%; left: 0; } .links li:hover .htmlcss-arrow, .links li:hover .js-arrow{ transform: rotate(180deg); } nav .navbar .links li .arrow{*/ /* background: red; */ /*height: 100%; width: 22px; line-height: 70px; text-align: center; display: inline-block; color: #000; transition: all 0.3s ease; margin-left:5px; } nav .navbar .links li .sub-menu{ position: absolute; top: 70px; left: 0; line-height: 40px; background: #007aff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); border-radius: 10px;*/ /* display: none;*/ /*z-index: 2; transition:all 0.5s; } nav .navbar .links li:hover .htmlCss-sub-menu, nav .navbar .links li:hover .js-sub-menu{*/ /* display: block;*/ /*} .navbar .links li .sub-menu li{ padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,0.1); } .navbar .links li .sub-menu a{ color: #fff; font-size: 15px; font-weight: 500; } .navbar .links li .sub-menu .more-arrow{ line-height: 40px; } .navbar .links li .htmlCss-more-sub-menu{*/ /* line-height: 40px; */ /*} .navbar .links li .sub-menu .more-sub-menu{ position: absolute; top: 0; left: 100%; border-radius: 0 4px 4px 4px; z-index: 1; display: none; } .links li .sub-menu .more:hover .more-sub-menu{ display: block; } .navbar .search-box{ position: relative; height: 40px; width: 40px; } .navbar .search-box i{ position: absolute; height: 100%; width: 100%; line-height: 40px; text-align: center; font-size: 22px; color: #fff; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .navbar .search-box .input-box{ position: absolute; right: calc(100% - 40px); top: 80px; height: 60px; width: 300px; background: #3E8DA8; border-radius: 6px; opacity: 0; pointer-events: none; transition: all 0.4s ease; } .navbar.showInput .search-box .input-box{ top: 65px; opacity: 1; pointer-events: auto; background: #3E8DA8; } .search-box .input-box::before{ content: ''; position: absolute; height: 20px; width: 20px; background: #3E8DA8; right: 10px; top: -6px; transform: rotate(45deg); } .search-box .input-box input{ position: absolute; top: 50%; left: 50%; border-radius: 4px; transform: translate(-50%, -50%); height: 35px; width: 280px; outline: none; padding: 0 15px; font-size: 16px; border: none; } .navbar .nav-links .sidebar-logo{ display: none; } .navbar .la-bars{ display: none; } @media (max-width:920px) { nav .navbar{ max-width: 100%; padding: 0 25px; } nav .navbar .logo a{ font-size: 27px; } nav .navbar .links li{ padding: 0 10px; white-space: nowrap; } nav .navbar .links li a{ font-size: 15px; } } @media (max-width:800px){ nav{*/ /* position: relative; */ /*} .navbar .la-bars{ display: block; } nav .navbar .nav-links{ position: fixed; top: 0; left: -100%; display: block; max-width: 270px; width: 100%; background: #fff; line-height: 40px; padding: 20px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); transition: all 0.5s ease; z-index: 1000; } .navbar .nav-links .sidebar-logo{ display: flex; align-items: center; justify-content: space-between; } .sidebar-logo .logo-name{ font-size: 25px; color: #fff; } .sidebar-logo .logo-name img { width:180px; } .sidebar-logo i, .navbar .la-bars{ font-size: 25px; color: #000; } nav .navbar .links{ display: block; margin-top: 20px; } nav .navbar .links li .arrow{ line-height: 40px; } nav .navbar .links li{ display: block; } nav .navbar .links li .sub-menu{ position: relative; top: 0; box-shadow: none; display: none; } nav .navbar .links li .sub-menu li{ border-bottom: none; } .navbar .links li .sub-menu .more-sub-menu{ display: none; position: relative; left: 0; } .navbar .links li .sub-menu .more-sub-menu li{ display: flex; align-items: center; justify-content: space-between; } .links li:hover .htmlcss-arrow, .links li:hover .js-arrow{ transform: rotate(0deg); } .navbar .links li .sub-menu .more-sub-menu{ display: none; } .navbar .links li .sub-menu .more span{*/ /* background: red; */ /*display: flex; align-items: center;*/ /* justify-content: space-between; */ /*} .links li .sub-menu .more:hover .more-sub-menu{ display: none; } nav .navbar .links li:hover .htmlCss-sub-menu, nav .navbar .links li:hover .js-sub-menu{ display: none; } .navbar .nav-links.show1 .links .htmlCss-sub-menu, .navbar .nav-links.show3 .links .js-sub-menu, .navbar .nav-links.show2 .links .more .more-sub-menu{ display: block; padding-bottom:25px; } .navbar .nav-links.show1 .links .htmlcss-arrow, .navbar .nav-links.show3 .links .js-arrow{ transform: rotate(180deg); } .navbar .nav-links.show2 .links .more-arrow{ transform: rotate(90deg); } nav .navbar .links li a { color:#000; } nav .navbar .links li .arrow { color:#000; } } @media (max-width:370px){ nav .navbar .nav-links{ max-width: 100%; } } nav .navbar .links li .sub-menu.mega-menu { position:absolute; width:100%; padding:2% 5% 5% 5%; border-radius:0; background:#fff; top:108px; border-top:solid 1px #ddd; opacity: 0; visibility: hidden; -webkit-transition: opacity 600ms, visibility 600ms; transition: opacity 600ms, visibility 600ms; } nav .navbar .links li:hover .sub-menu.mega-menu { visibility: visible; opacity: 1; padding:2% 5% 5% 5%; } .navbar .links li .sub-menu.mega-menu a { color:#000; } .navbar .links li .sub-menu.mega-menu a:after { display:none; } .navbar .links li .sub-menu.mega-menu h3 { margin: 0; font-family: "Noto Sans", sans-serif; } .navbar .links li .sub-menu.mega-menu ul li { margin:0; padding:0; } @media (max-width:800px){ nav .navbar .nav-links { max-width:100%; overflow-y:auto; } nav .navbar .links li .sub-menu.mega-menu { position:relative; top:0; background:transparent; padding:0 3%; } .navbar .links li .sub-menu.mega-menu a, .navbar .links li .sub-menu.mega-menu h3 { color:#333; } .navbar .links li .sub-menu.mega-menu h3 { margin:10px 0 0 0; line-height:30px; } .navbar .links li .sub-menu.mega-menu .three.columns { width:100%; margin:0; } nav .navbar .links li .sub-menu.mega-menu, nav .navbar .links li:hover .sub-menu.mega-menu { opacity:1!important; visibility:visible!important; } nav .navbar .links li .sub-menu.mega-menu img { display:none; } }*/ /* ========================= NAVIGATION ========================= */ nav { padding: 5px 0; } nav .logo img { max-width: 120px; } nav .navbar { max-width: 1140px; margin: auto; display: flex; align-items: center; justify-content: space-between; } .navbar .links { display: flex; margin: 0; } .navbar .links li { list-style: none; padding: 0 14px; display: flex; align-items: center; position: static; } .navbar .links li a { color: #000; font-size: 15px; font-weight: 500; text-decoration: none; position: relative; white-space: nowrap; } /* underline hover */ .navbar .links li a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 3px; background: #007aff; transition: 0.3s ease; } .navbar .links li a:hover::after { width: 100%; left: 0; } /* arrow */ .navbar .links li .arrow { width: 22px; text-align: center; margin-left: 5px; transition: 0.3s; color: #000; } /* ========================= SUB MENUS – DESKTOP ========================= */ .navbar .links li .sub-menu { position: absolute; left: 0; top: 92px; width: 100%; background: #fff; border-top: 1px solid #ddd; display: block; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 999; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); } /* show on hover (desktop only) */ .navbar .links li:hover > .sub-menu { opacity: 1; visibility: visible; } .navbar .links li:hover .arrow { transform: rotate(180deg); } /* mega menu content */ .sub-menu.mega-menu { padding: 2% 5% 5%; } .sub-menu.mega-menu a { color: #000; } .sub-menu.mega-menu a::after { display: none; } .sub-menu.mega-menu ul li { margin: 0; padding: 0; } .sub-menu.mega-menu h3 { margin: 0; font-family: "Noto Sans", sans-serif; } /* ========================= MOBILE NAV ========================= */ .navbar .la-bars { display: none; } .navbar .nav-links { line-height: 45px; } @media (max-width: 800px) { .navbar .la-bars { display: block; font-size: 25px; cursor: pointer; } nav .navbar .nav-links { position: fixed; top: 0; left: -100%; width: 100%; max-width: 270px; height: 100vh; background: #fff; padding: 20px; transition: 0.4s ease; overflow-y: auto; z-index: 1000; } .navbar .nav-links .sidebar-logo { display: flex; justify-content: space-between; align-items: center; } .navbar .links { display: block; margin-top: 20px; } .navbar .links li { display: block; padding: 0; } .navbar .links li a { color: #000; } .navbar .links li .arrow { float: right; line-height: 40px; transform: rotate(0); } /* disable hover behavior on mobile */ .navbar .links li:hover > .sub-menu { opacity: 1; visibility: visible; } /* mobile submenu default */ .navbar .links li .sub-menu { position: relative; top: 0; padding: 0; border: 0; background: transparent; opacity: 1; visibility: visible; display: none; transition: none; box-shadow: none; } /* JS controlled open */ .navbar .links li.show-submenu > .sub-menu { display: block; } .navbar .links li.show-submenu > .arrow { transform: rotate(180deg); } /* mobile mega cleanup */ .sub-menu.mega-menu { padding: 0 3%; } .sub-menu.mega-menu img { display: none; } .sub-menu.mega-menu h3, .sub-menu.mega-menu a { color: #333; margin-bottom:0; } } @media (max-width: 370px) { nav .navbar .nav-links { max-width: 100%; } } .navbar .nav-links .sidebar-logo{ display: none; } .navbar .nav-links .sidebar-logo{ align-items: center; justify-content: space-between; } .sidebar-logo .logo-name{ font-size: 25px; color: #fff; } .sidebar-logo .logo-name img { width:180px; } .sidebar-logo i, .navbar .la-bars{ font-size: 25px; color: #000; } @media (max-width: 800px) { .navbar .nav-links .sidebar-logo{ display: flex; } } /* Custom Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ .site-header { position: fixed; width: 100%; transition: all 0.5s ease-in-out; background: #fff; z-index: 5; top: 0; } /*.site-header.scroll-up { top: -115px; }*/ .site-header.scroll-down { top: 0px; } .top-promo-line { background:#000; color:#fff; text-align:right; padding:8px 0; font-size:14px; } .top-promo-line-inner { width:90%; max-width:1140px; margin:0 auto; } .header-inner { width:90%; max-width:1140px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; } .navbar .top-side-nav ul { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; } .navbar .top-side-nav ul li { margin-left:20px; } .navbar .top-side-nav i { color:#000000; font-size:25px; } .home-page-hero .home-hero-slide-1 { background:url(/images/home-hero-bg.jpg) right center no-repeat; background-size:cover; min-height:80vh; padding:180px 0 100px 0; } .home-page-hero .home-hero-slide-2 { background:url(/images/home-hero-bg.jpg) right center no-repeat; background-size:cover; min-height:80vh; padding:180px 0 100px 0; } .home-page-hero h3 { font-size:30px; font-weight:400; margin:0; padding:0; } .home-page-hero h2 { font-size:50px; font-weight:700; margin:0; padding:0; } .home-page-hero h4 { font-size:25px; font-weight:400; margin:0; padding:0; color:#333; } .home-page-hero .home-hero-CTA { margin-top:35px; } .home-page-hero .home-hero-CTA a { background:#000; padding:15px 25px; border-radius:12px; color:#fff; transition:all 0.5s; font-weight:600; text-transform:uppercase; } .home-product-collection { padding:70px 0; } .home-product-collection .home-collection-heading { display:flex; justify-content:space-between; align-items:center; margin:0 0 25px 0; padding:0 0 25px 0; border-bottom:solid 1px #ccc; } .home-product-collection .home-collection-heading h2 { font-size:35px; text-transform:uppercase; margin-bottom:0; } .home-product-collection .home-collection-heading a { font-size:16px; color:#007aff; font-weight:600; } .product-grid-inner { text-align:center; position:relative; box-shadow:none; } .product-grid-inner img { transition: 0.3s; height:150px; object-fit:cover; } .product-grid-inner:hover img { transform: scale(0.9); } .product-grid-inner .product-grid-inner-overlay { position:absolute; width:100%; height:100%; left:0; top:0; opacity:0; transition:all 0.5s; background-color:rgba(255, 255, 255, 0.6); display:flex; align-items:center; justify-content:center; } .product-grid-inner:hover .product-grid-inner-overlay { opacity:1; } .product-grid-inner:hover .product-grid-inner-overlay a { background:#000; padding:10px 20px; border-radius:50px; color:#fff; transition:all 0.5s; font-weight:600; text-transform:uppercase; } .product-grid-inner h4 { font-size:18px; font-weight:400; margin:15px 0 0 0; padding:0; font-family: "Noto Sans", sans-serif; } .product-grid-inner h5 { font-size:16px; font-weight:400; color:#007aff; margin:7px 0 0 0; font-family: "Noto Sans", sans-serif; } .home-artical-promo { padding:60px 0; } .home-artical-promo img { border-radius:10px; } .home-artical-promo h3 { font-size:20px; margin:5px 0 5px 0; padding:0; } .home-artical-promo a { color:#007aff; font-weight:500; } .home-brands { padding:80px 0; } .home-brands h2 { font-size:35px; text-transform:uppercase; margin:0 0 25px 0; padding:0 0 25px 0; border-bottom:solid 1px #ccc; } ul.brands-logos { margin:0; padding:0; list-style:none; justify-content:space-between; align-items:center; display:flex; flex-wrap:wrap; } .home-company-features { padding:60px 0; background:#f4f4f4; text-align:center; } .home-company-features h2 { font-size:35px; text-transform:uppercase; margin:0 0 25px 0; padding:0 0 25px 0; border-bottom:solid 1px #ccc; text-align:left; } .home-company-features i { font-size:60px; margin:25px 0; color:#666; } footer { background:#007aff; color:#fff; padding:0 0 20px 0; } footer a { color:#fff; } footer a:hover { color:#fff; text-decoration:underline; } footer img { max-width:180px; margin:0 0 15px 0; } footer h3 { font-size:20px; font-weight:700; text-transform:uppercase; margin:0 0 10px 0; font-family: "Noto Sans", sans-serif; } footer .footer-menu { margin:0; padding:0; list-style:none; } footer .footer-menu li { margin:0 0 10px 0; } .footer-top { background:#000; padding:25px 0; margin:0 0 50px 0; } .footer-top ul { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin:0; padding:0; list-style:none; } .footer-top ul li { display:flex; align-items:center; } .footer-top ul li i { font-size:35px; margin-right:15px; } .footer-top ul li h3 { margin:0; padding:0; font-size:20px; font-weight:500; } .footer-lower { padding:25px 0 0 0; border-top:solid 1px #ccc; margin:40px 0 0 0; font-size:14px; } .footer-lower .footer-social { text-align:right; } .footer-lower .footer-social ul { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap; justify-content:flex-end; } .footer-lower .footer-social ul li { margin-left:15px; font-size:25px; } .top-promo-line-inner a { color:#fff; } .accordian_content_2{ display:none; position:absolute; /*width:100%;*/ background:#fff; padding:35px; z-index:2; border:solid 1px #ccc; /*left:0;*/ top:100%; } .accordian_title_2{ cursor:pointer; display:flex; align-items:center; font-size:16px; font-weight:500; } .accordian_title_2:after{ float:right; font-size: 20px; line-height: 28px; content: "\f107"; display: inline-block; font-family: 'Line Awesome Free'; speak: none; font-style: normal; font-weight: 900; font-variant: normal; text-transform: none; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin:0 0 0 7px; } .active_header_2 .accordian_title_2:after { transform: rotate(180deg); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .product-catalog-sort-filter { display:flex; align-items:center; justify-content:space-between; position:relative; margin:0 0 20px 0; padding:15px 0 20px 0 ; border-bottom:solid 1px #ddd; position:sticky; top:0; z-index:2; background:#fff; } .product-catalog-sort { min-width:40%; } .product-catalog-filter { min-width:50%; } .product-catalog-filter ul { margin:0; padding:0; list-style:none; display:flex; align-items:flex-start; justify-content:space-between;; } .mobile-only { display:none; } ul.filter-input li{ display:flex; align-items:center; margin-right:30px; } ul.filter-input li input { margin:0 5px 0 0; } ul.filter-input li label { margin:0; } .form-group { display: block; margin-bottom: 15px; } .form-group input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none; cursor: pointer; } .form-group label { position: relative; cursor: pointer; } .form-group label:before { content:''; -webkit-appearance: none; background-color: transparent; border: 2px solid #007aff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); padding: 10px; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; margin-right: 5px; } .form-group input:checked + label:after { content: ''; display: block; position: absolute; top: 2px; left: 9px; width: 6px; height: 14px; border: solid #007aff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .filter-action { background: #007aff; padding: 15px 25px; border-radius: 50px; color: #fff; transition: all 0.5s; font-weight: 600; text-transform: uppercase; height: auto; line-height: 100%; font-size: 15px; border: none; } .product-catalog-filter ul.filter-input { flex-direction:column; max-height:250px; flex-wrap:wrap; min-width:150px; } .filter-action-big { background: #007aff; padding: 15px 25px; border-radius: 50px; color: #fff; transition: all 0.5s; font-weight: 600; text-transform: uppercase; height: auto; line-height: 100%; font-size: 15px; border: none; width:60%; margin:0 auto; } .filter-action-big-wrapper { text-align:center; } .filter-button { background: #000; padding: 15px 25px; border-radius: 50px; color: #fff; transition: all 0.5s; font-weight: 600; /*text-transform: uppercase;*/ font-size:15px; border:none; height:auto; line-height:100%; letter-spacing:0.1px; } .product-catalog-sort { display:flex; justify-content:flex-end; align-items:center; } .product-catalog-sort label { margin:0 5px 0 0; } .product-catalog-sort select { margin:0; font-size:16px; border:solid 2px #333; border-radius:10px; } .home-product-collection .row { margin-bottom:45px; } .product-pagination { margin:20px 0 0 0; padding:20px 0 0 0; border-top:solid 1px #ddd; } .pagination { margin: 0; padding: 0; text-align: center } .pagination li { display: inline } .pagination li a { display: inline-block; text-decoration: none; padding: 5px 10px; color: #000 } .pagination li a { border-radius: 5px; -webkit-transition: background-color 0.3s; transition: background-color 0.3s } .pagination li a.active { background-color: #007aff; color: #fff } .pagination li a:hover:not(.active) { background-color: #000; color:#fff; } .innerpage-hero { padding:160px 0 50px 0; background:#80c0db; } .innerpage-hero h2 { font-size:40px; margin:0; } .innerpage-hero p { max-width:70%; line-height:150%; } .filter-applied { display:flex; align-items:center; padding:20px 0; } .filter-applied h4 { margin:0; } .filter-applied ul { display:flex; align-items:center; margin:0; padding:0; list-style:none; flex-wrap:wrap; } .filter-applied ul li { background:#80c0db; margin-left:15px; padding:5px 10px; border-radius:50px; } .filter-applied ul li i { color:#000; font-weight:900; cursor:pointer; } .gallery-wrapper { max-width:600px; margin:50px auto; } .gallery-main-image { /*height:400px; background-size:cover; background-repeat:no-repeat;*/ } .gallery-thumbnails { margin:0 15px 0 0; padding:0 25px 0 0; list-style:none; max-height:350px; overflow:hidden; } .gallery-thumbnails::-webkit-scrollbar { width: 10px; } .gallery-thumbnails::-webkit-scrollbar-track { background-color: #ebebeb; -webkit-border-radius: 10px; border-radius: 10px; } .gallery-thumbnails::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #6d6d6d; } .gallery-thumbnails li { width:80px; height:auto; margin:0 0 25px 0; cursor:pointer; } .gallery-thumbnails li img { width:100%; height:auto; } .breadcrumbs { margin-top:140px; } .breadcrumbs ul { margin:0; padding:0 0 25px 0; list-style:none; display:flex; font-size:13px; } .breadcrumbs ul li { padding-right:25px; position:relative; } .breadcrumbs ul li:After { font-family: 'Line Awesome Free'; font-weight: 900; content: "\f105"; color:#999; position:absolute; right:5px; top:2px; } .breadcrumbs ul li a { color:#666; text-decoration:none; } h3.product-name { font-size:30px; } .product-details-wrapper { padding:60px 0; } .product-details-gallery { display:flex; } ul.features { margin:40px 0 40px 0; padding:0; list-style:none; font-size:14px; } ul.features li { display:flex; margin:0 0 20px 0; padding:0 0 10px 0; border-bottom:solid 1px #ddd; } ul.features li:last-child { border-bottom:0; } ul.features li h4, ul.features li p { width:50%; margin:0; font-family: "Noto Sans", sans-serif; } .table { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.12), 0 1px 2px 0 rgba(0,0,0,0.24); width: 100%; max-width: 100%; margin-bottom: 2em; background-color: #fff; border: 0; border-collapse: collapse; color: #212121; border-top:solid 1px #dfdfdf; } .table th, .table td { text-align: left; /*padding: 1.6em;*/ vertical-align: top; border: inherit; } .table tr { border-bottom: 1px solid #e1e1e1; } .table th { font-weight: 600; color: #3f3f3f; vertical-align: bottom; } .total-price { margin:30px 0; display:flex; font-size:22px; align-items:center; } .total-price h4 { margin:0 15px 0 0; padding:0; font-family: "Noto Sans", sans-serif; } .total-price p { margin:0; } .add-to-cart-button { background: #007aff; padding: 15px 25px; border-radius: 50px; color: #fff; transition: all 0.5s; font-weight: 600; /*text-transform: uppercase;*/ line-height:100%; height:auto; letter-spacing:0.1px; font-size:16px; } .add-to-cart-button span { font-size:20px; margin-right:5px; } td select, td input[type=text] { width:100%; margin-bottom:0; } .img-magnifier-glass { position: absolute; border: 3px solid #000; border-radius: 50%; cursor: none; /*Set the size of the magnifier glass:*/ width: 200px; height: 200px; z-index: 999999; } .img-magnifier-glass:after { content: url(https://cdn3.iconfinder.com/data/icons/virtual-notebook/16/button_shape_line-512.png); height: 50px; width: 46px; position: absolute; transform: scale(0.3) rotate(61deg); right: -30px; bottom: 22px; } .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 180px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; transition: opacity 0.3s; font-weight:400; } .tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity: 1; } td h4 { margin:0 0 5px 0; display:flex; align-items:center; } td i { font-size:18px; margin-left:5px; } td input { margin-bottom:0; } .product-options-radio { margin:0; padding:0; list-style:none; } .product-options-radio li { display:flex; align-items:center; margin-bottom:5px; } .magnify { width: 400px; /*margin: 50px auto;*/ position: relative; } /*Lets create the magnifying glass*/ .large { width: 175px; height: 175px; position: absolute; border-radius: 100%; /*Multiple box shadows to achieve the glass effect*/ box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); /*Lets load up the large image first*/ background-repeat:no-repeat; /*hide the glass by default*/ display: none; } .breadcrumbs .container { border-bottom:solid 1px #ddd; } .product-details-wrapper .five.columns{ border-left:solid 1px #ddd; padding-left:50px; max-height:400px; overflow-y:auto; } .product-details-wrapper .five.columns::-webkit-scrollbar { width: 10px; } .product-details-wrapper .five.columns::-webkit-scrollbar-track { background-color: #ebebeb; -webkit-border-radius: 10px; border-radius: 10px; } .product-details-wrapper .five.columns::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #6d6d6d; } .product-name { margin:0; font-family: "Noto Sans", sans-serif; } .brand-name { font-weight:normal; color:#666; margin:0 0 15px 0; font-family: "Noto Sans", sans-serif; } .table-heading { margin: 0 0 15px 0; font-family: "Noto Sans", sans-serif; } .product-details-row { position:relative; } .product-details-left{ position:sticky; top:100px; width:50%; } .product-details-right{ /*should be the same as the image height*/ margin-top:-300px; width:45%; height:fit-content; margin-left:55%; } .accordian_content_3{ display:none; } .accordian_title_3{ cursor:pointer; } .accordian_title_3:after{ float:right; font-size: 20px; line-height: 28px; content: "\f107"; display: inline-block; font-family: 'Line Awesome Free'; speak: none; font-style: normal; font-weight: 900; font-variant: normal; text-transform: none; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .active_header_3 .accordian_title_3:after { transform: rotate(180deg); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .modal { position: fixed; top: 0px; pointer-events: none; left: 0px; background: rgba(51, 51, 51, 0.9); width: 100vw; height: 100vh; z-index: 100; opacity: 0; transition: 0.3s; } .modal.active { opacity: 1; pointer-events: auto; } .modal.active .box { top: 50%; } .modal#success h1 { font-size: 1.5em; } .modal .close { position: absolute; top: -20px; right: -20px; cursor: pointer; color: #ddd; } .modal .box { background: #fff; display: block; box-sizing: border-box; border-radius: 5px; /*text-align: center;*/ padding: 20px; position: absolute; top: 70%; left: 50%; transform: translate(-50%, -50%); transition: 0.3s; } .glass-measurements { padding:15px 0; margin:15px 0; border-top:solid 1px #ddd; } .glass-measurements h3 { margin-bottom:0; font-family: "Noto Sans", sans-serif; } .glasses-free-price-list { list-style:none; margin:15px 0 0 0; padding:15px 0 0 0; border-top:solid 1px #ddd; } .glasses-free-price-list li { position:relative; padding:0 0 0 25px; list-style:none; margin:0 0 10px 0; } .glasses-free-price-list li:before { font-family: 'Line Awesome Free'; font-weight: 900; content: "\f00c"; position:absolute; top:0; left:0; font-size:18px; color:#007aff; } .glasses-questions { margin:20px 0 0 0; padding:20px 0 15px 0; border-top:solid 1px #ddd; } .glasses-questions ul { margin:0; padding:0; list-style:none; } .glasses-questions ul h4 { margin-bottom:5px; font-family: "Noto Sans", sans-serif; } .glasses-questions ul .glasses-questions-radio { display:flex; } .glasses-questions ul .glasses-questions-radio label { margin:0 20px 0 3px; } .glasses-questions ul .glasses-subtype { margin-top:25px; } .glasses-additional-options h4 { font-family: "Noto Sans", sans-serif; } #glassesuse ul { list-style:outside; } .cart-heading { margin-top:150px; padding:0 0 40px 0; } .cart-heading h2 { font-size:25px; position:relative; padding:0 0 0 35px; margin:0; } .cart-heading h2:before { font-family: 'Line Awesome Free'; font-weight: 900; content: "\f290"; font-size:30px; position:absolute; left:0; top:0; color:#666; } .cart-item { padding:15px; border:solid 1px #ddd; border-radius:15px; margin:0 0 20px 0; } .delivery-date { padding:7px 0 15px 0; margin:0 0 15px 0; border-bottom:solid 1px #ddd; } .cart-table { padding:0 0 10px 0; margin:0 0 10px 0; } .cart-item .cart-table th, .cart-item .cart-table td { border-bottom:none; padding:0; } .cart-table h2 { font-size:18px; } .cart-table h3 { font-size:14px; } .cart-item .accordian_title_3 { font-family:Noto Sans; border-top:solid 1px #ddd; margin:20px 0 20px 0; padding:20px 0 0 0; } .cart-item .accordian_title_3:after { line-height:20px; } .cart-item .accordian_title_3 span { margin-left:7px; color:#444; } .cart-options-list { margin:0; padding:0; list-style:none; } .cart-options-list li { display:flex; } .cart-options-list li h4 { width:60%; font-family:Noto Sans; font-weight:600; line-height:130%; margin-bottom:10px; } .cart-options-list li p { width:30%; margin-left:10%; } .cart-payment-options { padding:20px 15px; background:#f4f4f4; border-radius:15px; } .cart-payment-options h3 { margin:0 0 15px 0; font-family: "Noto Sans", sans-serif; } .cart-payment-options h4 { font-family: "Noto Sans", sans-serif; } .cart-payment-options .table { background:none; border:none; box-shadow:none; } .cart-payment-options .table tr, .cart-payment-options .table th { border:none; } .cart-payment-options .table p { margin-bottom:0; } .coupon-code input { width:100%; margin:0 7px 5px 0; } .coupon-code button { background: #14161c; padding: 13px 15px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #14161c; border-radius: 12px; color: #fff; font-weight: 600; /* text-transform: uppercase;*/ height: auto; line-height: normal; cursor: pointer; transition: transform .12s, background .15s; } .coupon-code button:hover { background: rgb(80, 80, 80); transform: translateY(-1px); border-color: rgb(136, 136, 136); } .coupon-code button:focus-visible { outline: 2px solid #2d62ff; outline-offset: 3px; } .coupon-notice { text-align: left; padding: 0 0 10px 0; color: #0f9d72; } .coupon-text { padding: 0 0 7px 0; margin: 0 0 15px 0; font-weight: 600; color: #0f9d72; text-align: left; } .cart-total { border-top:solid 1px #ddd; } .cart-total h4 { font-size:20px; } .cart-total td:last-child { font-size:20px; } .secure-checkout { background: #007aff; padding: 15px 15px; border-radius: 50px; color: #fff; transition: all 0.5s; font-weight: 600; text-transform: uppercase; height:auto; line-height:100%; width:100%; margin:0 auto; border:none; font-size:18px; } .cart-content-wrapper { padding:0 0 60px 0; } /*.cart-item .quantity { text-align:right; } .cart-item .quantity h4 { display:inline-block; margin:0 7px 0 0; font-family: "Noto Sans", sans-serif; }*/ .cart-item .quantity select { margin:0; } .cart-item .quantity label { display:inline-block; margin:0 5px; } .cart-item .quantity-price h3 { font-family: "Noto Sans", sans-serif; } .cart-item .total h3 { font-family: "Noto Sans", sans-serif; margin-bottom: 0; } .cart-item .patient-name h3 { font-family: "Noto Sans", sans-serif; margin-bottom: 0; margin-right: 20px; } .coupon-code-input { display:flex; } img.small { max-height:270px; width:auto; } .checkout-content-wrapper { margin:150px 0 0 0; padding:0 0 60px 0; } .checkout-content-wrapper input[type=text], .checkout-content-wrapper input[type=email], .checkout-content-wrapper input[type=number], .checkout-content-wrapper select { width:100%; height:40px; line-height:42px; margin:0; } .form-input { padding:10px 0; display:flex; align-items:center; } .form-input input[type=checkbox] { margin:0 7px 0; height:20px; width:20px; } .country { padding:10px 0; } .country h3 { margin:0 0 5px 0; } .checkout-content-wrapper h2 { margin:0 0 10px 0; } .checkout-item { padding:15px; border:solid 1px #ddd; margin:0 0 20px 0; border-radius:10px; } .checkout-item h3 { margin:0; padding:0 ; font-family: "Noto Sans", sans-serif; /*border-bottom:solid 1px #ddd;*/ } .checkout-item h4 { font-family: "Noto Sans", sans-serif; } .checkout-item .cart-options-list li h4 { width:50%; font-weight:400; } .checkout-item .cart-options-list li p { width:50%; } .checkout-item .price { display:flex; justify-content:space-between; margin:10 0 0 0; padding:10px 0 0 0; /*border-top:solid 1px #ddd;*/ align-items:center; } .checkout-item .price h4 { font-size:17px; margin:0 } .checkout-item .delivery-date { margin:10px 0 0 0; padding:10px 0 0 0; border-top:solid 1px #ddd; border-bottom:none; } .checkout-item .delivery-date h4 { margin-bottom:0; } .checkout-button button { background: #43bdf9; padding: 15px 40px; border-radius: 12px; color: #fff; transition: all 0.5s; font-weight: 600; /* text-transform: uppercase;*/ height: auto; line-height: 100%; margin: 20px 0 20px 0; border: none; font-size: 15px; } .modal#login-modal .box { min-width:300px; } .modal#login-modal .box input { width:100%; } .modal#login-modal .box .form-input { width:100%; justify-content:center; } .modal#login-modal .box button, .modal#forgot-password-modal .box button { background: #000; padding: 10px 20px; border-radius: 50px; color: #fff; transition: all 0.5s; font-weight: 600; /* text-transform: uppercase;*/ height:auto; line-height:100%; font-size:15px; } .modal#login-modal .forgot-password { text-align:right; padding:10px 0; } .modal#login-modal h3 { text-align:center; } .checkout-content-wrapper .modal-trigger { cursor:pointer; color:#007aff; } .form-input input[type=text], .form-input input[type=email], .form-input input[type=number], .form-input select, .form-input [type=password], .form-input textarea { width:100%; height:40px; line-height:42px; margin:0; } .password-wrapper { width:100%; position:relative; } .toggle-password { font-size:20px; top:10px; right:10px; position:absolute; } .checkbox-input { align-items:start; line-height:140%; } .checkbox-input input[type=checkbox] { width:20px; height:20px; } .login-register-wrapper { /* margin-top: 150px; padding: 0 0 60px 0;*/ padding-top: 220px; /* adjust to match your header height */ padding-bottom: 60px; } .register-wrapper { position:relative; min-height:300px; } .register-wrapper:before { content:''; display:block; width:1px; height:100%; position:absolute; background:#ddd; left:-25%; top:0; } .login-register-wrapper h2 { margin:0 0 10px 0; } /*.login-register-wrapper button { background: #000; padding: 15px 25px; border-radius: 50px; color: #fff; transition: all 0.5s; font-weight: 600; text-transform: uppercase; height:auto; line-height:100%; }*/ .btn-register { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 24px; border: 1.5px solid #14161c; border-radius: 12px; background: #14161c; color: #fff; font-size: 15px; font-weight: 600; transition: transform .12s, background .15s; height: auto; line-height: normal; text-transform: none; cursor: pointer; } .btn-register:hover { background: #000; transform: translateY(-1px); } .btn-register:focus-visible { outline: 2px solid #2d62ff; outline-offset: 3px; } .login-register-wrapper .forgot-password { text-align:right; cursor:pointer; } .order-success-container { width:90%; max-width:750px; margin:0 auto; } .order-success-container table img { max-width:120px; } .order-success-wrapper { padding:150px 0 60px 0; } .order-success-wrapper i { display:block; text-align:center; font-size:60px; color:#007aff; } .order-success-container h2 { margin:0 0 10px 0; text-align:center; } .order-success-container p.order-number { text-align:center; font-size:17px; } h3.order-summery-heading { margin:70px 0 15px 0; font-size:18px; } .order-success-container table h3 { margin: 0 0 5px 0; font-family: "Noto Sans", sans-serif; } .order-success-container table h4 { margin: 0 0 5px 0; font-family: "Noto Sans", sans-serif; } .form-input h5 { margin:0 0 5px 0; font-size:15px; } .flex-top-form { align-items:flex-start; } .checkout-product-heading { display:flex; align-items:center; justify-content:space-between; padding:0 0 15px 0; } .section-split-heading { display:flex; align-items:center; justify-content:space-between; padding:0 0 15px 0; margin:0 0 15px 0; border-bottom:solid 1px #ddd; } .checkout-product-heading i, .section-split-heading i { font-size:18px; cursor:pointer; color: #007aff; } .section-split-heading h3 { margin:0; } .review-order-address { padding:15px; border:solid 1px #ddd; border-radius:15px; margin:0 0 15px 0; } .checkout-content-wrapper h2 { margin:0 0 30px 0; } .review-order-address .cart-options-list li h4 { width:30% } .review-order-address .cart-options-list li p { width:60%; } .eye-health { padding:15px; border:solid 1px #ddd; border-radius:15px; margin:0 0 15px 0; } .eye-health h3 { margin:0 0 5px 0; } .tax-invoice-wrapper { margin:150px 0 0 0; } .tax-invoice-wrapper .section-split-heading { border-bottom:none; } .tax-invoice-wrapper .section-split-heading h2 { margin:0 0 5px 0; } .tax-invoice-status { font-weight:700; font-size:15px; color:#007aff; } .invoice-table { margin:25px 0 0 0; } .invoice-table .table { border-top:none; border-radius:15px; } .invoice-table .table td h3 { margin:0 0 10px 0; } .invoice-table .table .cart-options-list li h4 { width:40%; } .invoice-table .table .cart-options-list li p { width:60%; margin:0; } .invoice-footer { text-align:center; padding:25px 0; } .invoice-footer h3 { margin:0 0 10px 0; } .invoice-table table tr:last-child { border-bottom:none; } .my-orders-wrapper { margin:150px 0 60px 0; } .my-orders-wrapper table h3 { margin:0 0 5px 0; } .my-orders-wrapper table a { font-size:16px; font-weight:600; } .my-account-wrapper { margin:150px 0 60px 0; } .top-login-link { position:relative; } .top-login-link .login-menu { position:absolute; top:110%; right:-5px; width:150px; padding:20px 15px 15px 15px; background:#fff; border-radius:7px; border:solid 1px #ddd; } .top-login-link .login-menu i { position:absolute; cursor:pointer; font-size:20px; right:5px; top:5px; } .top-login-link .login-menu ul { margin:0; padding:0; list-style:none; } .top-login-link .login-menu ul li { margin:0 0 10px 0; } .top-login-link .login-menu ul li:last-child { margin:0; } .top-login-link .login-menu ul li a { color:#000; } .login-menu:after { content: ""; position: absolute; border: 1px solid #ccc; right: 10px; width: 10px; height: 10px; background: inherit; top:-5.5px; margin: auto; transform: rotate(45deg); clip-path: polygon(0 0, 0% 100%, 100% 0); } #gallery-large .box { width:90%; height:90vh; } #gallery-large .box img.small { max-height:none; } #gallery-large .box .magnify { width:100%; max-width:800px; } .home-page-hero .owl-carousel .owl-nav button.owl-prev { position:absolute; color:#fff; left:5px; top:40%; font-size:50px; } .home-page-hero .owl-carousel .owl-nav button.owl-prev:hover { background:none; } .home-page-hero .owl-carousel .owl-nav button.owl-prev:hover span { color:#cccccc; } .home-page-hero .owl-carousel .owl-nav button.owl-next { position:absolute; color:#fff; right:5px; top:40%; font-size:50px; } .home-page-hero .owl-carousel .owl-nav button.owl-next:hover { background:none; } .home-page-hero .owl-carousel .owl-nav button.owl-next:hover span { color:#cccccc; } .main-image { cursor:pointer; } img.main-image { width: 400px; height: 300px; object-fit: contain; } #scroll-div { max-height:250px; overflow:hidden; padding: 10px; } .product-details-gallery-arrows { position:relative; } .product-details-gallery-arrows #next { position:absolute; top:-25px; cursor:pointer; left:30%; font-size:20px; } .product-details-gallery-arrows #prev { position:absolute; bottom:-25px; cursor:pointer; left:30%; font-size:20px; } /* Responsive style mobile view –––––––––––––––––––––––––––––––––––––––––––––––––– */ @media (max-width:760px){ nav .logo img, .sidebar-logo img { max-width:120px; } .home-page-hero { margin:130px 0 0 0; } .home-page-hero .home-hero-slide-1, .home-page-hero .home-hero-slide-2 { padding:100px 0 60px 0; min-height:auto; } .home-page-hero h3 { font-size:25px; } .home-page-hero h2 { font-size:40px; } .home-collection-heading { flex-direction:column; text-align:center; } .product-grid-inner { margin-bottom:25px; } .home-artical-promo-inner { margin-bottom:35px; } .home-brands { padding:0 0 40px 0; } .brands-logos li { width:50%; margin-bottom:20px; } .footer-top ul li { margin-bottom:20px; width:100%; } .footer-lower .six.columns { padding:5px 0; text-align:center; } .footer-lower .footer-social ul { justify-content:center; } .accordian_content{ display:none; } .accordian_title{ cursor:pointer; } .accordian_title:after{ float:right; font-size: 20px; line-height: 28px; content: "\f107"; display: inline-block; font-family: 'Line Awesome Free'; speak: none; font-style: normal; font-weight: 900; font-variant: normal; text-transform: none; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .active_header .accordian_title:after { transform: rotate(180deg); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .mobile-only { display:block; } .desktop-only { display:none; } .filter-options { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #fff; background-color: #fff; overflow-x: hidden; transition: 0.5s; } .filter-options a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .filter-options a:hover, .overlay a:focus { color: #f1f1f1; } .filter-options .closebtn { position: absolute; top: 80px; right: 10px; font-size: 40px; } .filter-options ul { padding:35% 5% 15% 5%; flex-direction:column; } .accordian_content_2 { position:relative; border:none; padding:15px; } .product-catalog-filter ul.filter-input { min-width:auto; max-height:none; padding:10px; flex-direction:row; margin:0; } .product-catalog-filter ul.filter-input li { width:48%; margin:0.5% 1%; } .accordian_title_2 { padding:15px 0; border-bottom:solid 1px #ddd; justify-content:space-between; } .product-catalog-filter ul li { width:100%; } .product-catalog-sort { /*flex-direction:column;*/ } .home-product-collection .row { margin-bottom:0; } .innerpage-hero p { max-width:100%; } .filter-applied { flex-direction:column; } .filter-applied li { margin:1%; } .product-catalog-filter { min-width:30%; } .product-catalog-sort { min-width:70%; } .filter-button { margin-bottom:0; } .product-details-wrapper .five.columns { border-left:none; padding-left:0; margin-left:0; } .magnify { max-width:400px; width:100%; } .product-details-gallery { flex-direction:column-reverse; } .gallery-thumbnails { display:flex; flex-wrap:wrap; } .gallery-thumbnails li { width:20%; margin:1%; } .product-description { margin:25px 0 0 0; } .product-details-wrapper { padding:30px 0; } .product-details-left { position:relative; width:100%; top:0; } .product-details-right { margin:0; width:100%; } .register-wrapper:After { display:none; } .table-wrapper table tr th:nth-child(2) { min-width:300px; } .table-wrapper { max-width: 100%; overflow-x: auto; } } /* Responsive style tablet view –––––––––––––––––––––––––––––––––––––––––––––––––– */ @media screen and (max-width: 1200px) and (min-width: 768px) { .home-product-collection .three.columns { width: 48%; margin: 2% 1%; } .footer-top ul li { width:48%; margin:2% 1%; } } @media screen and (max-width: 1100px) and (min-width: 768px) { .product-details-wrapper .six.columns { width:100%; } .product-details-wrapper .five.columns { width:100%; border-left:none; padding-left:0; margin-left:0; } } @media screen and (max-width: 768px) and (min-width: 540px) { .home-product-collection .three.columns { width: 48%; margin: 2% 1%; } .footer-top ul li { width: 48%; margin: 2% 1%; } .footer-upper .four.columns { width: 100%; } .footer-upper .three.columns { width: 35%; margin: 1.5%; } .footer-upper .two.columns { width: 20%; margin: 1.5%; } .accordian_title { font-size: 15px; } .product-details-wrapper .five.columns { border-left: none; padding-left: 0; margin-left: 0; } #btnCheckout { width: 100%; } } :root { --ink: #14161c; --ink-soft: #3a3f4b; --muted: #6b7280; --faint: #99a0ac; --line: #e7e9ee; --line-soft: #f0f2f5; --canvas: #f5f6f9; --surface: #ffffff; --field-bg: #fbfcfd; --accent: #43bdf9; --accent-ink: #00abff; --accent-wash: #eef3ff; --mint: #0f9d72; --mint-wash: #e7f6f0; --footer-bg: #16181e; --footer-ink: #aeb4c0; --shadow-sm: 0 1px 2px rgba(20,22,28,.04), 0 1px 1px rgba(20,22,28,.03); --shadow-md: 0 8px 30px -12px rgba(20,22,28,.14), 0 2px 6px rgba(20,22,28,.04); --shadow-lg: 0 10px 40px -16px rgba(20,22,28,.18), 0 2px 8px rgba(20,22,28,.05); --radius: 16px; --radius-sm: 11px; --radius-fld: 10px; } nav .navbar .links li .sub-menu.mega-menu { -webkit-transition: opacity 100ms, visibility 100ms; transition: opacity 100ms, visibility 100ms; } nav .navbar .links li a:after { background: #3C68AE; } .top-login-link .login-menu ul { flex-direction:column; } .home-page-hero .home-hero-CTA a:hover { background:#505050; } .home-product-collection .home-collection-heading a { color:#3C68AE; } .home-artical-promo a { color:#3C68AE; } .innerpage-hero { padding: 110px 0 0 0; } .innerpage-hero h2{ font-size: 30px; } .home-product-collection { padding: 40px 0; } .product-catalog-description { padding-bottom: 20px; } .product-grid-inner h5 { color: #E07682; } .product-grid-inner img { object-fit: contain; } /*.product-grid-inner:hover .product-grid-inner-overlay a:hover { background:#505050; }*/ .product-grid-inner-link, .product-grid-inner-link:hover { color: #000; cursor: pointer; } .form-group label:before { border: 2px solid #3C68AE; } .form-group input:checked + label:after { border: solid #3C68AE; border-width: 0 2px 2px 0; } .filter-action, .filter-action:focus { background: #76ABC9; border-color: #76ABC9; } .filter-action:hover { background:#C3DDEF; border-color:#C3DDEF; color:#000; } .accordian_content_2 { width: -moz-available; width: -webkit-fill-available; } .product-catalog-filter ul.filter-input { justify-content: flex-start; } .glasses-color { display: flex; align-items: center; } .glasses-color h4 { margin:0; margin-right:10px; } /*.add-to-cart-button, .add-to-cart-button:focus, .secure-checkout, .secure-checkout:focus, .checkout-button button, .checkout-button button:focus { background: #76ABC9; border-color: #76ABC9; } .add-to-cart-button:hover,.secure-checkout:hover,.checkout-button button:hover { background:#C3DDEF; border-color:#C3DDEF; color:#000; } .add-to-cart-button:disabled, .secure-checkout:disabled, .checkout-button button:disabled { opacity:0.5; cursor:not-allowed; }*/ .checkout-button button { padding: 15px 22px; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus { border: 1px solid #3C68AE; } select { color: #212121; } select option { color: #212121; } .checkout-product-heading i, .section-split-heading i { color: #212121; } .pagination li a.active { background-color: #76ABC9; } /*footer { background:#505050; }*/ .cart-item .product-details { display: flex; justify-content: space-between; gap: 10px; } .cart-item .product-details .product-name { font-size: 18px; } .cart-item .product-details .brand-name { font-size: 14px; } .cart-item .product-details .action { display: flex; gap: 10px; font-size: 25px; } .cart-item .product-details .action a{ color: #000; margin-top: -4px; } .cart-item .quantity-price { display:flex; justify-content:space-between; } .cart-item .quantity-price .lens-quantity{ text-align:right; } .cart-item .quantity-price .lens-quantity .quantity{ margin-bottom:1rem; } /*.cart-item .quantity-price h3 { display: inline-block; margin: 0 7px 0 0; }*/ /*.cart-item .quantity-price label { display: inline-block; margin: 0 5px; padding: 10px 0 0 52px; }*/ .cart-item .price { display: flex; justify-content: space-between; } .cart-item .price h3 { font-family: "Noto Sans", sans-serif; margin-bottom: 0; } .cart-item .quantity { display: flex; justify-content: space-between; } .cart-item .quantity h3 { font-family: "Noto Sans", sans-serif; margin-bottom: 0; } .cart-item .total { display: flex; justify-content: space-between; margin-top:20px; } .cart-item .patient-name { display: flex; align-items: baseline; justify-content: space-between; } .cart-count { background: #C3DDEF; padding: 0 8px; border-radius: 10px; color: #000; } .coupon-code .delete-promocode { padding-left:10px; cursor:pointer; } .text-error { color:#e10000; } .text-success { color: darkgreen; font-weight: bold; margin-bottom: 10px; } .text-validation-error { color: #e10000; } .input-validation-error { border-color: #e10000 !important; } .validation-summary { display: flex; flex-direction: column; margin: 0 0 30px 0; color: #e10000; } .validation-summary span { padding: 5px 0; } .username-wrapper { width: 100%; } .form-input .small-select { width: 12%; margin: 0 6px; } .div-register-company, .div-shipping-company, .div-billing-company { display:none; } .billing-address-option label { margin: 0 20px 0 3px; } .order-confirmation { padding: 15px; } #ConfirmationMessage { color: #e10000; } .show-form { display:block; background:white; } .hide-form { display:none; } .hide { display:none !important; } .show { display:flex !important; } .show-flex { display:flex !important; } #eyehealth button, .order-success-wrapper button { background: #000; padding: 15px 25px; border-radius: 50px; color: #fff; transition: all 0.5s; font-weight: 600; text-transform: uppercase; height: auto; line-height: 100%; } #eyehealth button:hover, .login-register-wrapper button:hover, .order-success-wrapper button:hover { background:#505050; } /*.footer-lower .footer-social ul li { font-weight:normal; }*/ .payment-form .form-input { flex-direction: column; align-items: flex-start; } .payment-form .label { margin-bottom: 2px; } .my-orders-wrapper table a { color: #3C68AE; } .my-orders-wrapper table h3 { font-family: "Noto Sans", sans-serif; } .invoice-table .table .cart-options-list li .attributes { width: 60%; margin: 0; } .invoice-table .product-row .product-title { font-family: "Noto Sans", sans-serif; } .text-right { text-align: right !important; } .tax-invoice-status { color: #3C68AE; } .my-orders-wrapper .mobile-view-wrapper a { color: #3C68AE; } .my-orders-wrapper .mobile-view-wrapper a { font-size: 16px; font-weight: 600; } .my-orders-wrapper .my-orders-detail { border-bottom: 1px solid #E1E1E1; padding: 10px 0; color: #212121; display:flex; flex-direction:column; } .my-orders-wrapper .my-orders-detail div { margin-bottom: 20px; display:flex; } .my-orders-wrapper .my-orders-detail div:first-child { margin-top: 20px; } .my-orders-wrapper .my-orders-detail div:last-child { margin-bottom: 20px; } .my-orders-wrapper .my-orders-detail div strong { min-width: 150px; } .my-orders-wrapper .my-orders-detail p { padding:0; margin:0; } .loading-wrapper { display: inline; vertical-align: middle; margin-left: 10px; } .loading-wrapper img { width:50px; } /* Wrapper */ .skeleton-wrapper { display: flex; gap: 16px; } /* Card */ .skeleton-card { width: 300px; padding: 16px; border-radius: 8px; background: #f3f3f3; } /* Elements */ .skeleton-title { height: 30px; width: 60%; /*margin-bottom: 12px;*/ } .skeleton-line { height: 14px; width: 100%; margin-bottom: 8px; } .skeleton-line.short { width: 70%; } /* Shared animation */ .skeleton-title, .skeleton-line { background: linear-gradient( 90deg, #e0e0e0 25%, #f5f5f5 37%, #e0e0e0 63% ); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 4px; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* Utility */ .hidden { display: none; } .mr-1 { margin-right: 10px !important; } td i{ font-size:25px; } @media screen and (min-width: 768px) { .align-flex-end { align-items: flex-end !important; } } /* ======================================= Navbar spacing fix ======================================= */ nav { width: 100%; background: #fff; border-bottom: 1px solid #e5e7eb; } nav .navbar { padding: 0 24px !important; box-sizing: border-box; } /* Desktop logo */ nav .navbar .logo { display: flex; align-items: center; margin-left: 8px; margin-right: 40px; flex-shrink: 0; } /* Brand */ .logo .brand, .sidebar-logo .brand { display: flex; flex-direction: column; justify-content: center; text-decoration: none; white-space: nowrap; } /* Logo text */ .logo .mark, .sidebar-logo .mark { font-family: "Space Grotesk", sans-serif; font-size: 32px; font-weight: 700; line-height: 1; color: #111827; } .logo .mark b, .sidebar-logo .mark b { color: rgb(67, 189, 249); } .logo .sub, .sidebar-logo .sub { margin-top: 3px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: #6B7280; } /* Mobile sidebar */ .sidebar-logo { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; } .sidebar-logo i { font-size: 28px; } /* Mobile */ @media (max-width:768px) { nav .navbar { padding: 0 16px !important; } nav .navbar .logo { margin-left: 0; margin-right: 0; } .logo .mark, .sidebar-logo .mark { font-size: 28px; } .logo .sub, .sidebar-logo .sub { font-size: 9px; letter-spacing: .35em; } .sidebar-logo { padding: 18px 20px; } } /* ========================================== FEATURE STRIP ========================================== */ .footer-features { background: #14161c; border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.08); } .footer-features .wrap { max-width: 1200px; margin: 0 auto; padding: 28px 40px; display: grid; grid-template-columns: repeat(4,minmax(220px,1fr)); column-gap: 48px; align-items: center; } /* ========================================== FEATURE ITEM ========================================== */ .feat { display: flex; align-items: center; gap: 16px; } .feat .fi { width: 54px; height: 45px; min-width: 54px; display: flex; justify-content: center; align-items: center; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff; } .feat .fi svg { width: 22px; height: 22px; } /* ========================================== TEXT ========================================== */ .feat > span:last-child { display: flex; flex-direction: column; } .ft { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; color: #fff; white-space: nowrap; } .fs { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: #9aa0ad; } /* Hover */ .feat:hover .fi { border-color: #43bdf9; background: rgba(45,98,255,.12); } .feat:hover .ft { color: #43bdf9; } /* Tablet */ @media(max-width:991px) { .footer-features .wrap { grid-template-columns: repeat(2,1fr); row-gap: 30px; } } /* Mobile */ @media(max-width:768px) { .footer-features .wrap { grid-template-columns: 1fr; } .fs { white-space: normal; } } /* ========================================================== FOOTER ========================================================== */ footer.site { background: #16181e; color: #aeb4c0; } /* --------------------------------------- Footer Container --------------------------------------- */ footer.site .top, footer.site .bottom .wrap { max-width: 1200px; margin: 0 auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; } /* --------------------------------------- Footer Top --------------------------------------- */ footer.site .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 64px; padding-top: 56px; padding-bottom: 48px; } /* --------------------------------------- Brand --------------------------------------- */ .f-brand { padding-right: 20px; } .f-brand .mark { font-family: "Space Grotesk", sans-serif; font-size: 28px; font-weight: 700; line-height: 1; color: #ffffff; } .f-brand .mark b { color: #43bdf9; } .f-brand .sub { margin-top: 5px; font-family: "Inter", sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .42em; text-transform: uppercase; color: #8b919e; } .f-brand p { margin-top: 18px; max-width: 260px; font-size: 14px; line-height: 1.7; color: #aeb4c0; } /* --------------------------------------- Footer Columns --------------------------------------- */ .f-col h4 { margin: 0 0 20px; font-family: "Space Grotesk", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #ffffff; } .f-col ul { margin: 0; padding: 0; list-style: none; } .f-col li { margin-bottom: 12px; } .f-col li:last-child { margin-bottom: 0; } .f-col a { color: #aeb4c0; font-size: 14px; line-height: 1.6; text-decoration: none; transition: color .25s ease; } .f-col a:hover { color: #ffffff; } /* --------------------------------------- Footer Bottom --------------------------------------- */ footer.site .bottom { border-top: 1px solid rgba(255,255,255,.08); } footer.site .bottom .wrap { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; padding-bottom: 20px; } footer.site .cr { color: #7b818e; font-size: 13px; } /* --------------------------------------- Social Icons --------------------------------------- */ .social { display: flex; align-items: center; gap: 12px; } .social a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); color: #c8cdd6; transition: all .25s ease; } .social a:hover { background: #2D62FF; border-color: #2D62FF; color: #ffffff; } .social svg { width: 18px; height: 18px; } /* --------------------------------------- Checkout Footer Note --------------------------------------- */ footer.note { background: #16181e; padding: 0 0 40px; text-align: center; color: #7b818e; font-size: 13px; } /* --------------------------------------- Tablet --------------------------------------- */ @media (max-width:991px) { footer.site .top { grid-template-columns: repeat(2,1fr); gap: 40px; } } /* --------------------------------------- Mobile --------------------------------------- */ @media (max-width:768px) { footer.site .top { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; padding-bottom: 36px; } footer.site .top, footer.site .bottom .wrap { padding-left: 20px; padding-right: 20px; } .f-brand { padding-right: 0; } footer.site .bottom .wrap { flex-direction: column; gap: 16px; text-align: center; } .social { justify-content: center; } } .btn-primary, .cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 26px; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 8px 20px -8px rgba(45,98,255,.55); transition: transform .12s, background .15s, box-shadow .15s; } .cta { width: auto; margin-top: 20px; padding: 15px 20px; letter-spacing: .005em; } .btn-primary:hover, .cta:hover { background: var(--accent-ink); transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(45,98,255,.6); } .btn-primary:active, .cta:active { transform: translateY(0); } .btn-primary:focus-visible, .cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 15px 22px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-soft); font-size: 14.5px; font-weight: 600; transition: border-color .15s, color .15s; } .btn-ghost:hover { border-color: #cdd3de; color: white; } .back { width: 100%; margin-top: 10px; padding: 8px; border: none; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: color .15s, background .15s; } .back:hover { color: var(--ink); background: var(--line-soft); } .actions { display: flex; align-items: center; gap: 12px; margin-top: 30px; } .cta { height: auto !important; min-height: 49px; padding: 15px 20px !important; line-height: normal !important; } #btnProceedToPayment{ width:190px; height:48px; } #btnBack{ width:190px; height:48px; } #profileSubmitBtn { width:210px; } /* =========================== Page Header =========================== */ .page-head { padding: 4px 0 22px; } .page-head h1 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 30px; font-weight: 600; letter-spacing: -.02em; } .page-head p { margin: 7px 0 0; color: #6b7280; font-size: 15px; } /* =========================== Checkout Stepper =========================== */ .steps { display: flex; align-items: center; margin-top: 26px; flex-wrap: wrap; } .step { display: inline-flex; align-items: center; gap: 11px; } .step .dot { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 600; border: 1.5px solid #e7e9ee; background: #ffffff; color: #99a0ac; } .step .label { font-size: 13.5px; font-weight: 500; color: #99a0ac; white-space: nowrap; } .step.current .dot { background: #43bdf9; border-color: #43bdf9; color: #fff; box-shadow: 0 0 0 4px #eef3ff; } .step.current .label { color: #14161c; font-weight: 600; } .step.done .dot { background: #e7f6f0; border-color: transparent; color: #0f9d72; } .step.done .label { color: #3a3f4b; } .step-sep { flex: 1 1 18px; min-width: 18px; height: 1.5px; margin: 0 14px; border-radius: 2px; background: #e7e9ee; } .step.done + .step-sep { background: #0f9d72; opacity: .35; } /* Mobile */ @media (max-width:560px) { .page-head { padding: 28px 0 18px; } .page-head h1 { font-size: 24px; } .step .label { display: none; } .step.current .label { display: inline; } .step-sep { margin: 0 8px; } } /* =========================== Order Summary =========================== */ .summary { position: sticky; top: 94px; width: 406px; } .summary .card { background: #fff; border: 1px solid #e7e9ee; border-radius: 18px; box-shadow: 0 10px 28px rgba(17, 24, 39, 0.06); overflow: hidden; width: 406px; } .summary .card-body { padding: 6px 22px 22px; } .sec { padding: 20px 22px; border-top: 1px solid #f0f2f5; } .sec:first-child { border-top: none; } .sec-title { margin: 0 0 14px; font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.01em; } /* Shipping */ .ship-opt { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border: 1.5px solid #43bdf9; background: #eef3ff; border-radius: 11px; } .ship-opt .radio { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 2px solid #43bdf9; } .ship-opt .radio::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #43bdf9; } .so-name { font-size: 14px; font-weight: 600; } .so-sub { font-size: 12.5px; color: #6b7280; margin-top: 1px; } .so-tag { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #0f9d72; } /* Coupon */ .coupon { display: flex; gap: 10px; } .coupon .input { flex: 1; } .btn-apply { flex: none; height: 46px; padding: 0 20px; border: none; border-radius: 10px; background: #14161c; color: white; font-size: 14px; font-weight: 600; cursor: pointer; } .btn-apply:hover { background: black; } .ship-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: #0f9d72; } /* Totals */ .totals { padding-top: 16px; border-top: 1px dashed #e7e9ee; display: grid; gap: 11px; } .trow { display: flex; justify-content: space-between; font-size: 14px; color: #3a3f4b; } .trow .num { font-variant-numeric: tabular-nums; font-weight: 500; } .trow .free { color: #0f9d72; font-weight: 600; } /* Grand Total */ .grand { margin-top: 4px; padding-top: 16px; border-top: 1px solid #e7e9ee; display: flex; justify-content: space-between; align-items: baseline; } .gl { font-family: "Space Grotesk", sans-serif; font-size: 16px; font-weight: 600; } .gn { font-family: "Space Grotesk", sans-serif; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } .gcur { margin-left: 4px; font-size: 12px; color: #6b7280; } /* CTA */ .cta { width: 100%; margin-top: 20px; padding: 15px 20px; display: inline-flex; justify-content: center; align-items: center; gap: 9px; border: none; border-radius: 12px; background: #43bdf9; color: white; font-size: 15px; font-weight: 600; cursor: pointer; } .cta:hover { background: #00abff; } /* Trust */ .trust { margin-top: 18px; padding-top: 18px; border-top: 1px solid #f0f2f5; display: grid; gap: 10px; } .tr { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #6b7280; } .tr svg { color: #0f9d72; flex: none; } .tr b { color: #3a3f4b; } /* Mobile */ @media (max-width:940px) { .summary { position: static; } } .coupon { display: flex; gap: 10px; } .coupon .input { flex: 1; } .btn-apply { flex: none; height: 46px; padding: 0 20px; border: none; border-radius: var(--radius-fld); background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; transition: background .15s, transform .12s; } .btn-apply:hover { background: #000; transform: translateY(-1px); } .btn-apply:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .ship-note { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--mint); } #btnApplyPromoCode { line-height: 0.9; } /* ============================ Cart Card Improvements ============================ */ /* Product image */ .item-thumb { width: 104px; height: 104px; border-radius: 14px; overflow: hidden; display: flex; align-items: center; justify-content: center; /* background: linear-gradient(160deg,#eef3ff 0%,#e3ecff 100%);*/ border: 1px solid #dde6ff; flex-shrink: 0; } .item-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; } /* Header actions */ .item-actions { display: flex; align-items: flex-start; gap: 8px; margin-left: auto; } .item-actions a, .item-actions button { width: 36px; height: 36px; border: none; border-radius: 9px; background: transparent; display: flex; align-items: center; justify-content: center; color: #8b94a7; cursor: pointer; transition: .2s; text-decoration: none; } .item-actions a:hover { background: #eef3ff; color: #2d62ff; } .item-actions button:hover { background: #fdecec; color: #e5484d; } .item-actions i { font-size: 18px; } /* Prescription table */ .spec { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; } .spec th { background: #eef4ff; color: #2d62ff; font-weight: 600; border-bottom: 1px solid #e5e7eb; } .spec td, .spec th { padding: 14px 18px; } .spec tbody tr:not(:last-child) td { border-bottom: 1px solid #e5e7eb; } .spec td:first-child { width: 30%; font-weight: 500; color: #666; } /* Options list */ .cart-options-list { margin: 0; padding: 0; list-style: none; } .cart-options-list li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f2f5; font-size: 14px; } .cart-options-list li:last-child { border-bottom: none; } /* Footer */ .item-foot { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; } .qty { display: flex; flex-direction: column; gap: 6px; } .qty .select { width: 90px; } .price-block { margin-left: auto; text-align: right; } .price-block .pl { font-size: 12px; color: #6b7280; } .price-block .pv { font-size: 22px; font-weight: 700; color: #14161c; } /* Responsive */ @media(max-width:768px) { .item-top { flex-wrap: wrap; } .item-thumb { width: 84px; height: 84px; } .item-actions { width: 100%; justify-content: flex-end; } .item-foot { flex-direction: column; align-items: flex-start; } .price-block { margin-left: 0; text-align: left; } .spec { font-size: 13px; } } .stack { display: flex; flex-direction: column; gap: 24px; } .card-cart { background: #fff; border: 1px solid #e7e9ee; border-radius: 18px; padding: 24px; box-shadow: 0 10px 28px rgba(17,24,39,.06); } .item-top { display: flex; gap: 20px; align-items: flex-start; } .item-info { flex: 1; } .item-info h3 { margin: 0; font-size: 17px; font-weight: 600; } .brand { margin-top: 6px; color: #777; } .in-stock { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; color: #0f9d72; font-weight: 600; } .rx { margin-top: 24px; border-top: 1px solid #eee; padding-top: 20px; } .rx summary { cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; list-style: none; } .rx summary::-webkit-details-marker { display: none; } .chev { margin-left: auto; } .rx-body { margin-top: 18px; } .item-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid #eee; } .qty { display: flex; flex-direction: column; } .qlabel { margin-bottom: 8px; font-weight: 600; } .select { height: 42px; border: 1px solid #ddd; border-radius: 10px; padding: 0 12px; } .bag-foot { margin-top: 20px; } .continue { display: inline-flex; align-items: center; gap: 8px; color: #2d62ff; text-decoration: none; font-weight: 600; } .bag { display: grid; grid-template-columns: minmax(0, 1fr) 406px; gap: 40px; align-items: start; } @media(max-width:992px) { .bag { grid-template-columns: 1fr; } } /*.ship-opt input[type="radio"] { width: 40px !important; height: 40px !important; }*/ body.page-cart { background: #f5f6f9; } /* ========================================================================== MyLens Optical — shared UI stylesheet Powers the checkout (review), shipping-details, and login/register pages. Link once (e.g. in _Layout.cshtml) and remove the inline