/* Minification failed. Returning unminified contents. (1636,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (2599,31): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (3393,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (3757,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (3827,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (3885,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (3910,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (3968,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (3993,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4051,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4076,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4134,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4159,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4217,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4282,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4343,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4404,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4465,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4526,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4587,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4622,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4657,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4692,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4727,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4769,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4827,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4852,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4910,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4935,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (4993,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5018,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5076,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5101,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5159,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5248,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5309,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5370,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5431,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5492,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5553,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5588,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5623,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5658,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5693,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5735,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5793,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5818,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5876,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5901,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5959,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (5984,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (6042,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (6067,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (6125,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (6214,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (6275,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (6336,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (6397,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (6458,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (6519,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (6554,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (6589,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (6624,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (6659,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (7167,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (7198,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (7311,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (7342,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (7423,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (7454,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (7892,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (7908,37): run-time error CSS1039: Token not allowed after unary operator: '-scrollbar-width' (7916,19): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (8096,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (9009,30): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (9041,29): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (9059,31): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (9140,31): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (9175,29): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (9193,31): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11522,33): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11560,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11585,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11634,33): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11646,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11655,25): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11659,31): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11662,31): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11671,31): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11675,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11795,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11844,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11881,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11887,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11940,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11966,31): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (11996,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (12497,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (12518,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (12535,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (12643,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (12658,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (12683,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (12932,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (12942,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13027,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13290,33): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13296,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13303,35): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13425,33): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13431,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13435,33): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13441,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13476,33): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13482,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13489,35): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13611,33): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13617,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13621,33): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13627,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (13682,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14043,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14199,27): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14279,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14381,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14464,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14545,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14565,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14581,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14614,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14628,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14675,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14793,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14813,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14857,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14969,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (14998,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15012,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15032,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15152,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15162,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15264,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15303,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15336,15): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15423,23): run-time error CSS1039: Token not allowed after unary operator: '-scrollbar-width' (15444,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15453,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15573,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15579,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15602,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15607,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15639,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15646,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15649,39): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15683,39): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15715,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15780,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15814,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15821,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15829,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15854,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15860,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (15873,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16075,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16126,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16154,27): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16203,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16220,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16267,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16304,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16309,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16313,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16347,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16375,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16390,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16402,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16424,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16436,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16453,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16505,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16575,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16592,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16620,35): run-time error CSS1039: Token not allowed after unary operator: '-scrollbar-width' (16624,28): run-time error CSS1039: Token not allowed after unary operator: '-scrollbar-width' (16660,29): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16666,24): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16672,24): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16679,24): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (16697,24): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (19541,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (19565,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (19840,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (19851,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (21147,1): run-time error CSS1019: Unexpected token, found '}' (21167,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (21572,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (21575,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (21578,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (21587,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (21596,22): run-time error CSS1030: Expected identifier, found '[' (21596,25): run-time error CSS1031: Expected selector, found '=' (21596,25): run-time error CSS1025: Expected comma or open brace, found '=' (22005,1): run-time error CSS1019: Unexpected token, found '@-moz-keyframes' (22006,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (22014,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (22015,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (22032,1): run-time error CSS1019: Unexpected token, found '@-ms-keyframes' (22033,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (22041,1): run-time error CSS1019: Unexpected token, found '@keyframes' (22042,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (22278,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (22369,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (22667,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (22704,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (22723,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (22744,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (22763,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (22779,34): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (22835,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (22935,27): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (23015,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (23117,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (23204,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (23226,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (23322,15): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (23330,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (23531,24): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (23590,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (23618,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24073,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24119,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24262,24): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24280,24): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24333,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24624,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24650,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24666,30): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24698,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24719,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24736,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24779,33): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24788,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (24794,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (25028,35): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (25034,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (25056,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (25070,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (25079,26): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (25257,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (25285,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (25294,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (25303,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (25524,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (25565,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (25850,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26214,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26284,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26342,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26367,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26425,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26450,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26508,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26533,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26591,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26616,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26674,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26739,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26800,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26861,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26922,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (26983,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27044,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27079,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27114,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27149,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27184,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27226,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27284,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27309,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27367,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27392,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27450,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27475,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27533,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27558,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27616,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27705,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27766,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27827,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27888,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (27949,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28010,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28045,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28080,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28115,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28150,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28192,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28250,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28275,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28333,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28358,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28416,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28441,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28499,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28524,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28582,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28671,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28732,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28793,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28854,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28915,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (28976,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (29011,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (29046,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (29081,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (29116,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (29624,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (29655,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (29768,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (29799,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (29880,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (29911,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30128,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30284,27): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30364,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30466,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30549,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30630,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30650,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30666,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30699,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30713,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30760,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30878,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30898,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (30942,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31054,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31083,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31097,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31117,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31237,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31247,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31349,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31388,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31421,15): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31508,23): run-time error CSS1039: Token not allowed after unary operator: '-scrollbar-width' (31529,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31538,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31658,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31664,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31687,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31692,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31724,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31731,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31734,39): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31768,39): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31800,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31865,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31899,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31906,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31914,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31939,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31945,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (31958,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32160,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32220,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32376,27): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32456,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32558,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32641,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32722,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32742,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32758,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32791,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32805,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32852,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32970,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (32990,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (33034,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (33146,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (33175,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (33189,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (33209,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (33329,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (33339,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (33441,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (33480,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (33513,15): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (33604,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (33695,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (33993,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34030,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34049,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34070,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34089,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34105,34): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34161,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34261,27): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34341,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34443,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34530,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34539,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34553,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34714,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34730,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34773,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34797,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (34818,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (34819,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (35113,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (35536,1): run-time error CSS1019: Unexpected token, found '@-moz-keyframes' (35537,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (35545,1): run-time error CSS1019: Unexpected token, found '@-webkit-keyframes' (35546,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (35563,1): run-time error CSS1019: Unexpected token, found '@-ms-keyframes' (35564,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (35572,1): run-time error CSS1019: Unexpected token, found '@keyframes' (35573,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (35978,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (35985,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (36173,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (36177,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (36185,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (36423,21): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (36692,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (36728,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (36758,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (36830,24): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (36843,24): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (36926,31): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37025,31): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37055,31): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37091,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37111,27): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37158,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37170,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37227,35): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37233,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37244,35): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37251,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37293,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37315,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37333,35): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37340,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37351,32): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37383,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37387,28): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37559,33): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37574,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37591,23): run-time error CSS1039: Token not allowed after unary operator: '-webfont-primary' (37702,1): run-time error CSS1019: Unexpected token, found '}' */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; *zoom: 1; } .container:before, .container:after { display: table; content: ""; line-height: 0; } .container:after { clear: both; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } .container-fluid { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; *zoom: 1; } .container-fluid:before, .container-fluid:after { display: table; content: ""; line-height: 0; } .container-fluid:after { clear: both; } .row { margin-left: -15px; margin-right: -15px; *zoom: 1; } .row:before, .row:after { display: table; content: ""; line-height: 0; } .row:after { clear: both; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; } .col-xs-1 { width: 8.33333%; } .col-xs-2 { width: 16.66667%; } .col-xs-3 { width: 25%; } .col-xs-4 { width: 33.33333%; } .col-xs-5 { width: 41.66667%; } .col-xs-6 { width: 50%; } .col-xs-7 { width: 58.33333%; } .col-xs-8 { width: 66.66667%; } .col-xs-9 { width: 75%; } .col-xs-10 { width: 83.33333%; } .col-xs-11 { width: 91.66667%; } .col-xs-12 { width: 100%; } .col-xs-pull-0 { right: 0%; } .col-xs-pull-1 { right: 8.33333%; } .col-xs-pull-2 { right: 16.66667%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-4 { right: 33.33333%; } .col-xs-pull-5 { right: 41.66667%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-7 { right: 58.33333%; } .col-xs-pull-8 { right: 66.66667%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-10 { right: 83.33333%; } .col-xs-pull-11 { right: 91.66667%; } .col-xs-pull-12 { right: 100%; } .col-xs-push-0 { left: 0%; } .col-xs-push-1 { left: 8.33333%; } .col-xs-push-2 { left: 16.66667%; } .col-xs-push-3 { left: 25%; } .col-xs-push-4 { left: 33.33333%; } .col-xs-push-5 { left: 41.66667%; } .col-xs-push-6 { left: 50%; } .col-xs-push-7 { left: 58.33333%; } .col-xs-push-8 { left: 66.66667%; } .col-xs-push-9 { left: 75%; } .col-xs-push-10 { left: 83.33333%; } .col-xs-push-11 { left: 91.66667%; } .col-xs-push-12 { left: 100%; } .col-xs-offset-0 { margin-left: 0%; } .col-xs-offset-1 { margin-left: 8.33333%; } .col-xs-offset-2 { margin-left: 16.66667%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-4 { margin-left: 33.33333%; } .col-xs-offset-5 { margin-left: 41.66667%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-7 { margin-left: 58.33333%; } .col-xs-offset-8 { margin-left: 66.66667%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-10 { margin-left: 83.33333%; } .col-xs-offset-11 { margin-left: 91.66667%; } .col-xs-offset-12 { margin-left: 100%; } @media (min-width: 768px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; } .col-sm-1 { width: 8.33333%; } .col-sm-2 { width: 16.66667%; } .col-sm-3 { width: 25%; } .col-sm-4 { width: 33.33333%; } .col-sm-5 { width: 41.66667%; } .col-sm-6 { width: 50%; } .col-sm-7 { width: 58.33333%; } .col-sm-8 { width: 66.66667%; } .col-sm-9 { width: 75%; } .col-sm-10 { width: 83.33333%; } .col-sm-11 { width: 91.66667%; } .col-sm-12 { width: 100%; } .col-sm-pull-0 { right: 0%; } .col-sm-pull-1 { right: 8.33333%; } .col-sm-pull-2 { right: 16.66667%; } .col-sm-pull-3 { right: 25%; } .col-sm-pull-4 { right: 33.33333%; } .col-sm-pull-5 { right: 41.66667%; } .col-sm-pull-6 { right: 50%; } .col-sm-pull-7 { right: 58.33333%; } .col-sm-pull-8 { right: 66.66667%; } .col-sm-pull-9 { right: 75%; } .col-sm-pull-10 { right: 83.33333%; } .col-sm-pull-11 { right: 91.66667%; } .col-sm-pull-12 { right: 100%; } .col-sm-push-0 { left: 0%; } .col-sm-push-1 { left: 8.33333%; } .col-sm-push-2 { left: 16.66667%; } .col-sm-push-3 { left: 25%; } .col-sm-push-4 { left: 33.33333%; } .col-sm-push-5 { left: 41.66667%; } .col-sm-push-6 { left: 50%; } .col-sm-push-7 { left: 58.33333%; } .col-sm-push-8 { left: 66.66667%; } .col-sm-push-9 { left: 75%; } .col-sm-push-10 { left: 83.33333%; } .col-sm-push-11 { left: 91.66667%; } .col-sm-push-12 { left: 100%; } .col-sm-offset-0 { margin-left: 0%; } .col-sm-offset-1 { margin-left: 8.33333%; } .col-sm-offset-2 { margin-left: 16.66667%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-4 { margin-left: 33.33333%; } .col-sm-offset-5 { margin-left: 41.66667%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-7 { margin-left: 58.33333%; } .col-sm-offset-8 { margin-left: 66.66667%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-10 { margin-left: 83.33333%; } .col-sm-offset-11 { margin-left: 91.66667%; } .col-sm-offset-12 { margin-left: 100%; } } @media (min-width: 992px) { .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; } .col-md-1 { width: 8.33333%; } .col-md-2 { width: 16.66667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333%; } .col-md-5 { width: 41.66667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33333%; } .col-md-8 { width: 66.66667%; } .col-md-9 { width: 75%; } .col-md-10 { width: 83.33333%; } .col-md-11 { width: 91.66667%; } .col-md-12 { width: 100%; } .col-md-pull-0 { right: 0%; } .col-md-pull-1 { right: 8.33333%; } .col-md-pull-2 { right: 16.66667%; } .col-md-pull-3 { right: 25%; } .col-md-pull-4 { right: 33.33333%; } .col-md-pull-5 { right: 41.66667%; } .col-md-pull-6 { right: 50%; } .col-md-pull-7 { right: 58.33333%; } .col-md-pull-8 { right: 66.66667%; } .col-md-pull-9 { right: 75%; } .col-md-pull-10 { right: 83.33333%; } .col-md-pull-11 { right: 91.66667%; } .col-md-pull-12 { right: 100%; } .col-md-push-0 { left: 0%; } .col-md-push-1 { left: 8.33333%; } .col-md-push-2 { left: 16.66667%; } .col-md-push-3 { left: 25%; } .col-md-push-4 { left: 33.33333%; } .col-md-push-5 { left: 41.66667%; } .col-md-push-6 { left: 50%; } .col-md-push-7 { left: 58.33333%; } .col-md-push-8 { left: 66.66667%; } .col-md-push-9 { left: 75%; } .col-md-push-10 { left: 83.33333%; } .col-md-push-11 { left: 91.66667%; } .col-md-push-12 { left: 100%; } .col-md-offset-0 { margin-left: 0%; } .col-md-offset-1 { margin-left: 8.33333%; } .col-md-offset-2 { margin-left: 16.66667%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-4 { margin-left: 33.33333%; } .col-md-offset-5 { margin-left: 41.66667%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-7 { margin-left: 58.33333%; } .col-md-offset-8 { margin-left: 66.66667%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-10 { margin-left: 83.33333%; } .col-md-offset-11 { margin-left: 91.66667%; } .col-md-offset-12 { margin-left: 100%; } } @media (min-width: 1200px) { .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; } .col-lg-1 { width: 8.33333%; } .col-lg-2 { width: 16.66667%; } .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.33333%; } .col-lg-5 { width: 41.66667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.33333%; } .col-lg-8 { width: 66.66667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.33333%; } .col-lg-11 { width: 91.66667%; } .col-lg-12 { width: 100%; } .col-lg-pull-0 { right: 0%; } .col-lg-pull-1 { right: 8.33333%; } .col-lg-pull-2 { right: 16.66667%; } .col-lg-pull-3 { right: 25%; } .col-lg-pull-4 { right: 33.33333%; } .col-lg-pull-5 { right: 41.66667%; } .col-lg-pull-6 { right: 50%; } .col-lg-pull-7 { right: 58.33333%; } .col-lg-pull-8 { right: 66.66667%; } .col-lg-pull-9 { right: 75%; } .col-lg-pull-10 { right: 83.33333%; } .col-lg-pull-11 { right: 91.66667%; } .col-lg-pull-12 { right: 100%; } .col-lg-push-0 { left: 0%; } .col-lg-push-1 { left: 8.33333%; } .col-lg-push-2 { left: 16.66667%; } .col-lg-push-3 { left: 25%; } .col-lg-push-4 { left: 33.33333%; } .col-lg-push-5 { left: 41.66667%; } .col-lg-push-6 { left: 50%; } .col-lg-push-7 { left: 58.33333%; } .col-lg-push-8 { left: 66.66667%; } .col-lg-push-9 { left: 75%; } .col-lg-push-10 { left: 83.33333%; } .col-lg-push-11 { left: 91.66667%; } .col-lg-push-12 { left: 100%; } .col-lg-offset-0 { margin-left: 0%; } .col-lg-offset-1 { margin-left: 8.33333%; } .col-lg-offset-2 { margin-left: 16.66667%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-4 { margin-left: 33.33333%; } .col-lg-offset-5 { margin-left: 41.66667%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-7 { margin-left: 58.33333%; } .col-lg-offset-8 { margin-left: 66.66667%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-10 { margin-left: 83.33333%; } .col-lg-offset-11 { margin-left: 91.66667%; } .col-lg-offset-12 { margin-left: 100%; } } .visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; } @media (max-width: 767px) { .visible-xs { display: block !important; } table.visible-xs zzz { display: table; } tr.visible-xs { display: table-row !important; } th.visible-xs, td.visible-xs { display: table-cell !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm { display: block !important; } table.visible-sm zzz { display: table; } tr.visible-sm { display: table-row !important; } th.visible-sm, td.visible-sm { display: table-cell !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important; } table.visible-md zzz { display: table; } tr.visible-md { display: table-row !important; } th.visible-md, td.visible-md { display: table-cell !important; } } @media (min-width: 1200px) { .visible-lg { display: block !important; } table.visible-lg zzz { display: table; } tr.visible-lg { display: table-row !important; } th.visible-lg, td.visible-lg { display: table-cell !important; } } @media (max-width: 767px) { .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } } @media (min-width: 1200px) { .hidden-lg { display: none !important; } } .visible-print { display: none !important; } @media print { .visible-print { display: block !important; } table.visible-print zzz { display: table; } tr.visible-print { display: table-row !important; } th.visible-print, td.visible-print { display: table-cell !important; } } @media print { .hidden-print { display: none !important; } } /* These are twitter bootstrap overrides. Some of these are overriding default styles. Some of these are added for upgrade to Bootstrap 3.0. /*-------------------------------------------------------------------------------*/ .container-fluid { width: 100%; padding: 0; position: relative; } .row { margin: 0; width: 100%; } .row [class*="col-xs"] { min-height: 0; } .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { box-sizing: border-box; padding: 0; } .content, .active-popup [role="dialog"] { background: #fff; } /* Placeholder text override of bootstrap*/ /* jQuery UI - Date Picker Overrrides (used for Tripbooking) I apologize for the long selectors. I just got tired of yelling at my monitor. /*-------------------------------------------------------------------------------*/ .ui-datepicker-inline.ui-corner-all, .ui-datepicker-inline .ui-corner-all { border-radius: 0; } .ui-datepicker-inline.ui-corner-all { width: 100%; max-width: 27em; } .ui-datepicker-inline { border: 0; margin-bottom: 1.5em; padding: 0; width: 100%; } .ui-datepicker-header { background-image: none; border-bottom: 0; background: #fff; } .ui-datepicker-header .ui-icon { background: none; } .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { margin-top: -6px; } .ui-datepicker .ui-datepicker-prev span { border-bottom: 6px solid rgba(0, 0, 0, 0); border-right: 8px solid #000; border-top: 6px solid rgba(0, 0, 0, 0); width: 0; height: 0; margin-left: -6px; } .ui-datepicker .ui-datepicker-next span { border-bottom: 6px solid rgba(0, 0, 0, 0); border-left: 8px solid #000; border-top: 6px solid rgba(0, 0, 0, 0); width: 0; height: 0; margin-left: -3px; } .ui-datepicker-header .ui-datepicker-title span { max-width: none; } .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month, .ui-datepicker-header .ui-datepicker-title .ui-datepicker-year { max-width: 50%; display: inline; font-size: 1.2em; line-height: 2em; } .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month { margin: 0 0 0 -25%; } .ui-datepicker-header .ui-datepicker-title .ui-datepicker-year { margin: 0 -25% 0 0; } .ui-datepicker table { border: solid 1px; border-top: 0; margin-bottom: 0; box-sizing: border-box; } .ui-datepicker .ui-datepicker-calendar tr { border-top: solid 1px #999; } .ui-datepicker .ui-datepicker-calendar thead tr { border-top: 0; background: #fff; } .ui-datepicker .ui-datepicker-calendar th, .ui-datepicker .ui-datepicker-calendar td { padding: 0; } .ui-datepicker .ui-datepicker-calendar th span { max-width: none; padding: .75em 0; } .ui-datepicker .ui-datepicker-calendar td a, .ui-datepicker .ui-datepicker-calendar td span { border-top: 0; border-bottom: 0; color: #666; font-size: 1em; padding: .5em 0; text-align: center; } .ui-datepicker .ui-datepicker-calendar td span { max-width: none; border-color: #666; } .ui-datepicker .ui-datepicker-calendar tr td:nth-child(1) a, .ui-datepicker .ui-datepicker-calendar tr td:nth-child(1) span { border-left: 0; } .ui-datepicker .ui-datepicker-calendar tr td:nth-child(7) a, .ui-datepicker .ui-datepicker-calendar tr td:nth-child(7) span { border-right: 0; } .ui-datepicker-header, .ui-datepicker table, .ui-widget-header .ui-state-default, .ui-datepicker-calendar .ui-state-default { border-color: #999; font-weight: bold; } /* available date */ .ui-datepicker .ui-datepicker-calendar td a { background: #fff; color: #222; } /* selected date */ .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a { background: #222; color: #fff; } /* unavailable date */ .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable span { background: #fff; color: #666; text-decoration: none; } /* 5 column grid */ .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; padding: 0 10px; width: 20%; float: left; } /* table overrides--------------------------------- */ .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { padding: 8px 2px 8px 2px; line-height: 1.42857143; vertical-align: top; border-top: 1px solid #ddd; } b, strong { font-weight: 600; } @media screen and (min-width: 768px) { b, strong { font-weight: 600; } } /* global tags and global high-level styles /*-------------------------------------------------------------------------------*/ * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } *, *:before, *:after { box-sizing: content-box; } body { position: relative; font-weight: 400; font-size: 14px; line-height: 1.42857; background: #fff; color: #222; } body:focus { outline: none; } img { border: 0 none; height: auto; max-width: 100%; vertical-align: middle; } .cmsTopBanner { background: #fff; display: block; padding: 0 0 1em 0; width: 100%; } .content { clear: both; } .content, .active-popup [role="dialog"] { background: #fff; } hgroup h1, hgroup h2, hgroup h3 { margin: 0; padding: 0; clear: both; } hgroup.left-margin { margin: 0 0 0 .9em; } h1, h2, h3, h4, h5, h6 { font-weight: bold; } h1 { font-size: 1.5em; line-height: 1.2em; padding: 1em .9em .75em; /*this is needed to fix an issue on LON with the backgrounds*/ margin: 0; font-weight: normal; } h2 { font-size: 1.3em; line-height: 1.3em; margin: 1em 0 .5em; } h3 { font-size: 1.2em; line-height: 1.3em; margin: 20px 0 10px; } h4 { font-size: 1.1em; line-height: 1.3em; } p { font-size: 1.1em; line-height: 1.4em; margin: .3em 0 .6em 0; } dl { margin: 0; } a { color: #222; text-decoration: none; } a:focus { color: #222; text-decoration: none; outline: none; outline-offset: -2px; } a:hover { color: #222; text-decoration: none; outline: none; } a h2 { font-size: 1.3em; font-weight: normal; line-height: 1.3em; margin: 0; padding: 1em 0 0.5em; } .a11y-link { color: #222; text-decoration: underline; } .a11y-link:hover { text-decoration: underline; } .a11y-link:focus { outline: dotted 1px; outline-offset: 2px; text-decoration: underline; } ul { margin: 0; padding: 0; list-style-type: none; } ul .bullet, ul.bullet li { clear: both; list-style-type: disc; margin: 1em 1em 1em 2em; } ul .compact-list, ul.compact-list li { margin: 0 0 0 20px; } ul > br { display: none; } ol li { list-style-type: decimal; } li { list-style-type: none; } abbr[title] { text-decoration: none; border-bottom: 0; } /* global styles /*-------------------------------------------------------------------------------*/ /* fixes whitespace at bottom of pages caused by tags */ body > iframe, body > img { border: 0; clip: rect(0 0 0 0); position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; } .page-title { font-size: 2.1em; font-weight: 300; line-height: 1.2em; letter-spacing: .01em; font-family: var(--webfont-primary, sans-serif); padding: 15px 0; -webkit-font-smoothing: antialiased; } script, style { display: none !important; } fieldset { padding: 0; margin: 0; border: 0; min-width: 0; } legend { display: block; } button, input, optgroup, select, textarea { font-size: inherit; line-height: inherit; color: inherit; } button, input[type="reset"], input[type="submit"] { cursor: pointer; } button[disabled], input[type="reset"][disabled], input[type="submit"][disabled] { cursor: default; } input[type=search] { -webkit-appearance: none; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } th { text-align: left; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .hidden { display: none !important; visibility: hidden !important; } .sr-only { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); margin: 0; padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; white-space: nowrap; } .sr-only-focusable:focus, .sr-only-focusable:active { position: static; clip: auto; clip-path: none; height: auto; width: auto; overflow: visible; white-space: normal; } .skip-link:focus, .skip-link:active { display: inline-block; border: solid 1px #ccc; padding: .5rem; background: rgba(255, 255, 255, 0.8); color: #222; outline: 0; position: absolute; z-index: 1000000; } /* helpers /*-------------------------------------------------------------------------------*/ .disabled { background: #d8d8d8; opacity: .4; } .hide { display: none; } .clear { clear: both; } .margin-top { margin-top: 2em; } .add-margin { margin: 2em 0 1em; } .link { float: right; } .tips-link { float: right; } .no-margin { margin: 0; } .margin-bottom { margin: 0 0 1em; } .margin-button-bottom { margin: 1em 0 2em; } .small { font-size: 1em; line-height: 1.3em; text-transform: none; } .right { float: right; } .left { float: left; } .inline { display: inline; } .pipe { color: #666; display: inline; font-size: 1em; } .uline { padding-bottom: 4px; margin: 28px 0 12px 0; font-size: 1em; text-transform: uppercase; border-bottom: 1px solid #ccc; } .uline.slim { margin-top: 1em; margin-bottom: 0.3em; } .tt-l { text-transform: lowercase; } .tt-u { text-transform: uppercase; } .tt-n { text-transform: none; } .text-xl { font-size: 20px; } .text-lg { font-size: 16px; } .text-md { font-size: 14px; } .text-sm { font-size: 12px; } .text-xs { font-size: 11px; } .font-weight-bold { font-weight: 600; } .font-weight-medium { font-weight: 500; } .font-weight-medium-light { font-weight: 400; } .font-weight-light { font-weight: 400; } .font-weight-extra-light { font-weight: 100; } /* Responsive iframe or video (based on aspect ratio) */ .iframe-21x9 { position: relative; height: 0; overflow: hidden; } .iframe-21x9 { padding-bottom: calc(9 / 21 * 100%); } .iframe-21x9 iframe { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .iframe-16x9 { position: relative; height: 0; overflow: hidden; } .iframe-16x9 { padding-bottom: calc(9 / 16 * 100%); } .iframe-16x9 iframe { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .iframe-4x3 { position: relative; height: 0; overflow: hidden; } .iframe-4x3 { padding-bottom: calc(3 / 4 * 100%); } .iframe-4x3 iframe { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .iframe-3x2 { position: relative; height: 0; overflow: hidden; } .iframe-3x2 { padding-bottom: calc(2 / 3 * 100%); } .iframe-3x2 iframe { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .iframe-9x21 { position: relative; height: 0; overflow: hidden; } .iframe-9x21 { padding-bottom: calc(21 / 9 * 100%); } .iframe-9x21 iframe { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .iframe-9x16 { position: relative; height: 0; overflow: hidden; } .iframe-9x16 { padding-bottom: calc(16 / 9 * 100%); } .iframe-9x16 iframe { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .iframe-3x4 { position: relative; height: 0; overflow: hidden; } .iframe-3x4 { padding-bottom: calc(4 / 3 * 100%); } .iframe-3x4 iframe { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .iframe-2x3 { position: relative; height: 0; overflow: hidden; } .iframe-2x3 { padding-bottom: calc(3 / 2 * 100%); } .iframe-2x3 iframe { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .iframe-1x1 { overflow: hidden; } .iframe-1x1 { aspect-ratio: 1/1; } .iframe-1x1 iframe { box-sizing: border-box; width: 100%; height: 100%; border: 0; } .video-21x9 { position: relative; height: 0; overflow: hidden; } .video-21x9 { padding-bottom: calc(9 / 21 * 100%); } .video-21x9 video { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-16x9 { position: relative; height: 0; overflow: hidden; } .video-16x9 { padding-bottom: calc(9 / 16 * 100%); } .video-16x9 video { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-4x3 { position: relative; height: 0; overflow: hidden; } .video-4x3 { padding-bottom: calc(3 / 4 * 100%); } .video-4x3 video { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-3x2 { position: relative; height: 0; overflow: hidden; } .video-3x2 { padding-bottom: calc(2 / 3 * 100%); } .video-3x2 video { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-9x21 { position: relative; height: 0; overflow: hidden; } .video-9x21 { padding-bottom: calc(21 / 9 * 100%); } .video-9x21 video { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-9x16 { position: relative; height: 0; overflow: hidden; } .video-9x16 { padding-bottom: calc(16 / 9 * 100%); } .video-9x16 video { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-3x4 { position: relative; height: 0; overflow: hidden; } .video-3x4 { padding-bottom: calc(4 / 3 * 100%); } .video-3x4 video { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-2x3 { position: relative; height: 0; overflow: hidden; } .video-2x3 { padding-bottom: calc(3 / 2 * 100%); } .video-2x3 video { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-1x1 { position: relative; height: 0; overflow: hidden; } .video-1x1 { padding-bottom: 100%; } .video-1x1 video { border: 0; box-sizing: border-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Bootstrap 3 Helpers -------------------------------------------------------------------------------*/ .visible-xs-inline { display: inline !important; float: none !important; } @media screen and (min-width: 768px) { .visible-xs-inline { display: none !important; } .visible-sm-inline { display: inline !important; } } @media screen and (min-width: 992px) { .visible-sm-inline { display: none !important; } .visible-md-inline { display: inline !important; } } @media screen and (min-width: 1200px) { .visible-md-inline { display: none !important; } .visible-lg-inline { display: inline !important; } } .primary { color: #222; } .salePrice { color: #e00e00; } .lon-promo img { width: 100%; padding: 1em 1.3em; box-sizing: border-box; } .promo-banner { display: block; margin: 0 -1.3em; } .cents { display: inline-block; margin-top: 2.25em; } .no-heading { padding: 1em 1.3em; } address { margin: .5em 0 0; color: #222; } address span, address a { font-size: 1em; line-height: 1.4em; margin: 0; display: block; } address .store-name { font-size: 1.2em; line-height: 1.4em; font-weight: bold; } .secure-shop { color: #666; background: #fff; font-size: .8em; line-height: 1em; height: 2em; display: block; margin: 0; padding: 2em 1.3em 1.5em; } .secure-shop .sr-only { width: 0; } .secure-shop span { float: left; width: 12em; } .secure-shop i { display: block; float: left; margin-right: .25em; } .information { color: #444; font-size: .9em; } .info-message { background: #fff4df; color: #222; margin-top: 1em; padding: 1.5em; } .swatch-bar { width: 100%; padding: 1em 1.3em 0em; border-top: 0.1em solid #d8d8d8; border-bottom: 0.1em solid #d8d8d8; margin: 2em -1.3em 1em; } .standard-text { text-transform: none; } /* TEMPORARY save text styling /*-------------------------------------------------------------------------------*/ #savedText { font-size: 1.2em; line-height: 1.3em; padding: 0em .9em 1.2em; margin: 0; font-weight: normal; color: #2ecc71; } /* PLCC aka CBCC Messaging Styles */ .cbcc-message { float: left; clear: both; margin: 1em 0; padding: 1em; background: #fff4df; } /* Lazy Loading */ .lazyloading { opacity: 0; } .lazyloaded { opacity: 1; transition: opacity .2s; } .flex-container { display: flex; } /* off canvas /*-------------------------------------------------------------------------------*/ [role="main"]:before, [role="main"]:after { position: absolute; z-index: -1; top: 0; left: -100%; width: 100%; height: 100%; } [role="main"]:after { left: 100%; } .dialog-container, [role="main"] { width: 100%; display: block; position: relative; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -o-transition: 0.4s all ease; transition: 0.4s all ease; } .dialog-container, .dialog-background { display: none; } /*.js [role="navigation"] { margin-left: -100%; float: left; z-index: 2; }*/ .js [role="main"] { margin-left: 0; float: left; } .js .dialog-container { margin-right: -100%; float: left; z-index: 2; } /*.active-nav [role="navigation"] { margin-left: 0; width: 80%; .nav-container { display: block; } }*/ #content-overlay { display: none; position: absolute; top: 3.6em; right: 0; bottom: 0; left: 0; opacity: 0; filter: alpha(opacity=0); } .active-nav #menu-button { font-size: 1.4em; padding: 0 .6em; } .active-nav #menu-button [class*="menu"] { display: none; } .active-nav #menu-button:after { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; content: "\f00d"; color: #717171; display: block; } .active-nav #content-overlay { background-color: #fff; opacity: 0.6; filter: alpha(opacity=60); display: block; } .active-nav #content-overlay:after { content: " "; display: block; position: absolute; top: -3.6em; right: 0; left: 4.5em; height: 3.6em; } #main { display: block; margin: 0 auto; float: none; } [role="main"]:focus { border: none; outline: none; } .active-nav [role="main"] { margin-right: -100%; } .active-popup .dialog-container { display: block; margin-left: 0; padding-top: 0; width: 100%; } @media screen and (max-width: 768px) { .active-popup [role="main"] #main, .active-popup [role="main"] footer, .active-popup [role="main"] .back-to-top, .active-popup #main, .active-popup footer, .active-popup .back-to-top { margin-left: -100%; display: none; } } /* registry banners (used on product, family and registry pages) /*-------------------------------------------------------------------------------*/ .registry-banner { position: relative; background: #59aa36; padding: 1em 2.3em 1.3em 3.5em; margin-bottom: .6em; font-size: 1.1em; line-height: 1.2em; color: #fff; } .registry-banner .icon-ok { position: absolute; top: .7em; left: .7em; font-size: 1.6em; } .registry-banner .registry-link { display: block; margin-top: .5em; color: #fff; font-weight: bold; text-decoration: underline; font-size: 1em; } @media screen and (max-width: 768px) { .skip-main-link a { position: absolute; top: -10em; z-index: 10000; border: 0; } .skip-main-link a:focus { top: 0; width: calc(100% - 40px); padding: 20px; background: #fff; position: absolute; color: #222; } } /* move to md.scss /*-------------------------------------------------------------------------------*/ @media screen and (min-width: 768px) { .active-nav #content-overlay { display: none; } .skip-main-link { min-width: 1008px; max-width: 1440px; margin: 0 auto; } .skip-main-link a { position: absolute; top: -10em; z-index: 10000; border: 0; } .skip-main-link a:focus { top: 0; width: auto; font: 600 11px / 1.8 var(--webfont-primary, sans-serif); color: #fff; text-transform: uppercase; text-decoration: underline; padding: 9px 15px 7px 15px; background-color: #222; } } [class*="svg-icon-"] { color: #222; stroke: currentColor; max-width: 12em; max-height: 12em; } [class*="svg-icon-"].icon-1x1 { width: 1em; height: 1em; } [class*="svg-icon-logo"] { max-width: 80em; max-height: 80em; } .svg-icon-app-store { stroke-width: 0; } .svg-icon-copy, .svg-icon-edit, .svg-icon-rotate-ccw, .svg-icon-rotate-cw { stroke-width: 1.1692; } .svg-icon-dimensions { stroke-width: 1; } .svg-icon-info-outline { stroke-width: 2; } .svg-icon-play { width: 1.391em; height: 1em; font-size: 10px; stroke-width: 1; } .svg-icon-pause { width: 1.778em; height: 1em; font-size: 10px; stroke-width: 5; } .svg-icon-logo-apple-pay { stroke-width: 0; width: 1em; height: 0.63953em; } .svg-icon-logo-cb-large { stroke-width: 0; max-width: 1008px; } .svg-icon-logo-cb-small { stroke-width: 0; max-width: 199px; } .svg-icon-logo-crate-and-kids-large { stroke-width: 0; max-width: 1000px; } .svg-icon-logo-crate-and-kids-small { stroke-width: 0; max-width: 134px; max-height: 22px; } .svg-icon-logo-crate-and-kids-teal-small { stroke-width: 0; max-width: 90px; max-height: 15px; } .svg-icon-logo-crate-and-kids-large-teal { stroke-width: 0; max-width: 1000px; } .svg-icon-logo-crate-and-kids-small-teal { stroke-width: 0; max-width: 134px; max-height: 22px; } .svg-icon-logo-cb2, .svg-icon-logo-hg { stroke-width: 0; } .svg-icon-logo-angi { stroke-width: 0; width: 1em; height: 0.7111em; } .svg-icon-logo-hudson-grace { stroke-width: 0; width: 1em; height: 0.19631em; } .svg-icon-star-set { width: 1em; height: 0.2em; } .svg-icon-star-set-outline, .svg-icon-star-set-solid { width: 1em; height: 0.16667em; } .svg-icon-star-single-outline, .svg-icon-star-set-outline { color: #222; fill: #fff; } .star-on { color: #222; } .star-off { color: #ccc; } .svg-icon-logo-hudson-grace-stack { stroke-width: 0; width: 1em; height: 0.3368421em; } /* SOCIAL: */ .svg-icon-facebook, .svg-icon-houzz, .svg-icon-instagram, .svg-icon-pinterest, .svg-icon-twitter, .svg-icon-youtube { stroke-width: 0; } .svg-icon-venmo-button { width: 1em; height: 0.17142em; } .svg-icon-venmo-acceptance-mark { width: 1em; height: 0.66666em; } .svg-icon-venmo-logo { width: 1em; height: 0.19047em; } .svg-icon-checkmark-outline { width: 1em; height: 1em; } .svg-icon-checkmark-solid { width: 1em; height: 1em; } .svg-icon-layout-column, .svg-icon-layout-grid { stroke-width: 1; color: #666; fill: none; } .svg-icon-layout-column.outline, .svg-icon-layout-grid.outline { stroke-width: 1; color: #666; fill: none; } .svg-icon-layout-column.solid, .svg-icon-layout-grid.solid { color: #222; fill: currentColor; } .svg-icon-order-tracking { color: currentColor; fill: #fff; } .svg-icon-video-pause, .svg-icon-video-play, .svg-icon-video-replay { color: #222; fill: #fff; } .svg-icon-video-pause-solid, .svg-icon-video-play-solid, .svg-icon-video-replay-solid { color: #fff; fill: #222; } /*! * Font Awesome 3.0.2 * the iconic font designed for use with Twitter Bootstrap */ @font-face { font-family: 'FontAwesome'; src: url("/Styles/Common/fonts/FontAwesome/fontawesome-webfont.eot?v=3.0.1"); src: url("/Styles/Common/fonts/FontAwesome/fontawesome-webfont.eot?#iefix &v=3.0.1") format("embedded-opentype"), url("/Styles/Common/fonts/FontAwesome/fontawesome-webfont.woff?v=3.0.1") format("woff"), url("/Styles/Common/fonts/FontAwesome/fontawesome-webfont.ttf?v=3.0.1") format("truetype"); font-weight: normal; font-style: normal; } /* Font Awesome styles ------------------------------------------------------- */ [class^="icon-"], [class*=" icon-"] { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; /* sprites.scss reset */ display: inline; width: auto; height: auto; line-height: normal; vertical-align: baseline; background-image: none; background-position: 0% 0%; background-repeat: repeat; margin-top: 0; } [class^="icon-"]:before, [class*=" icon-"]:before { text-decoration: inherit; display: inline-block; speak: none; } /* makes sure icons active on rollover in links */ a [class^="icon-"], a [class*=" icon-"] { display: inline-block; } li [class^="icon-"], li [class*=" icon-"], .nav li [class^="icon-"], .nav li [class*=" icon-"] { display: inline-block; width: 1.25em; text-align: center; } li [class^="icon-"].icon-large, li [class*=" icon-"].icon-large, .nav li [class^="icon-"].icon-large, .nav li [class*=" icon-"].icon-large { /* increased font size for icon-large */ width: 1.5625em; } ul.icons { list-style-type: none; text-indent: -0.75em; } ul.icons li [class^="icon-"], ul.icons li [class*=" icon-"] { width: .75em; } .icon-2x { font-size: 2em; } .icon-2x.icon-border { border-width: 2px; border-radius: 4px; } .btn [class^="icon-"].pull-left.icon-2x, .btn [class^="icon-"].pull-right.icon-2x, .btn [class*=" icon-"].pull-left.icon-2x, .btn [class*=" icon-"].pull-right.icon-2x { margin-top: .18em; } .btn [class^="icon-"].icon-spin.icon-large, .btn [class*=" icon-"].icon-spin.icon-large { line-height: .8em; } .btn.btn-small [class^="icon-"].pull-left.icon-2x, .btn.btn-small [class^="icon-"].pull-right.icon-2x, .btn.btn-small [class*=" icon-"].pull-left.icon-2x, .btn.btn-small [class*=" icon-"].pull-right.icon-2x { margin-top: .25em; } .btn.btn-large [class^="icon-"], .btn.btn-large [class*=" icon-"] { margin-top: 0; } .btn.btn-large [class^="icon-"].pull-left.icon-2x, .btn.btn-large [class^="icon-"].pull-right.icon-2x, .btn.btn-large [class*=" icon-"].pull-left.icon-2x, .btn.btn-large [class*=" icon-"].pull-right.icon-2x { margin-top: .05em; } .btn.btn-large [class^="icon-"].pull-left.icon-2x, .btn.btn-large [class*=" icon-"].pull-left.icon-2x { margin-right: .2em; } .btn.btn-large [class^="icon-"].pull-right.icon-2x, .btn.btn-large [class*=" icon-"].pull-right.icon-2x { margin-left: .2em; } .icon-spin { display: inline-block; -moz-animation: spin 2s infinite linear; -o-animation: spin 2s infinite linear; -webkit-animation: spin 2s infinite linear; animation: spin 2s infinite linear; } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(359deg); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); } } @-o-keyframes spin { 0% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(359deg); } } @-ms-keyframes spin { 0% { -ms-transform: rotate(0deg); } 100% { -ms-transform: rotate(359deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(359deg); } } @-moz-document url-prefix() { .icon-spin { height: .9em; } .btn .icon-spin { height: auto; } .icon-spin.icon-large { height: 1.25em; } .btn .icon-spin.icon-large { height: .75em; } } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .icon-search:before { content: "\f002"; } .icon-envelope:before { content: "\f003"; } .icon-lock:before { content: "\f023"; } .icon-chevron-left:before { content: "\f053"; } .icon-chevron-right:before { content: "\f054"; } .icon-arrow-right:before { content: "\f061"; } .icon-plus:before { content: "\f067"; } .icon-circle-arrow-right:before { content: "\f0a9"; } .icon-caret-right:before { content: "\f0da"; } .icon-angle-right:before { content: "\f105"; } .icon-angle-down:before { content: "\f107"; } .icon-circle:before { content: "\f111"; } @font-face { font-family: 'web-icons'; src: url("/Styles/Common/fonts/web-icons/web-icons.eot?-vimpt3"); src: url("/Styles/Common/fonts/web-icons/web-icons.eot?#iefix-vimpt3") format("embedded-opentype"), url("/Styles/Common/fonts/web-icons/web-icons.ttf?-vimpt3") format("truetype"), url("/Styles/Common/fonts/web-icons/web-icons.woff?-vimpt3") format("woff"), url("/Styles/Common/fonts/web-icons/web-icons.svg?-vimpt3#web-icons") format("svg"); font-weight: normal; font-style: normal; } [class^="web-icon-"], [class*=" web-icon-"] { font-family: 'web-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .web-icon-close:before { content: "\ef01"; } .web-icon-email:before { content: "\ef02"; } .web-icon-facebook:before { content: "\ef03"; } .web-icon-favorites:before { content: "\ef04"; } .web-icon-houzz:before { content: "\ef05"; } .web-icon-phone:before { content: "\ef06"; } .web-icon-pinterest:before { content: "\ef07"; } .web-icon-registry:before { content: "\ef08"; } .web-icon-share:before { content: "\ef09"; } .web-icon-shoping-cart:before { content: "\ef0a"; } .web-icon-save-favorites:before { content: "\ef0b"; } .web-icon-checkmark:before { content: "\ef0c"; } .web-icon-arrow-down:before { content: "\ef0d"; } .web-icon-arrow-flat:before { content: "\ef0e"; } .web-icon-arrow-right:before { content: "\ef0f"; } .web-icon-arrow-left:before { content: "\ef10"; } .radio + .radio, .checkbox + .checkbox { margin-top: 0; } /* Bootstrap Upgrade Reset */ select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { display: inline-block; height: 20px; padding: 4px 6px; margin-bottom: 10px; font-size: 14px; line-height: 20px; color: #666; vertical-align: middle; } textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { background-color: #fff; border: 1px solid #666; } textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-input:focus { border-color: #666; outline: 0; } /* forms and input elements /*-------------------------------------------------------------------------------*/ form { margin: 0; } fieldset { display: block; } select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { box-sizing: border-box; color: #222; } select, option, textarea, input[type="text"], input[type="password"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"] { background-color: #fff; color: #222; } input[type="text"], input[type="number"], input[type="email"], input[type="tel"], input[type="password"] { width: 100%; height: 2.5em; font-size: 1.1em; line-height: 1em; color: #222; display: block; padding: 0 0.5em; margin-bottom: 1em; border: 1px solid #666; } .input-short, input.input-short[type="text"] { width: 13em; } .checkbox, input[type="checkbox"] { margin: 0 0 2em 0; padding: 0; min-height: 1.4em; line-height: 1.4em; vertical-align: top; font-weight: bold; font-size: 1.1em; color: #222; } input[type="checkbox"] { float: left; margin: 0 0.5em 2em 0; } input[type="checkbox"].checkbox-no-left-margin, .checkbox-no-left-margin { padding: 0; min-height: 1.4em; line-height: 1.4em; vertical-align: top; font-weight: bold; font-size: 1.1em; color: #222; margin: 0 0 2em 0; } .checkbox-no-bottom-margin { margin: 0 0 2em 0; padding: 0; min-height: 1.4em; line-height: 1.4em; vertical-align: top; font-weight: bold; font-size: 1.1em; color: #222; margin: 0; } input[type="checkbox"].checkbox-no-bottom-margin { margin: 0 0 2em 0; padding: 0; min-height: 1.4em; line-height: 1.4em; vertical-align: top; font-weight: bold; font-size: 1.1em; color: #222; margin: 0 0.5em 0 0; } .optin { float: left; margin-top: -1em; } .optin .checkbox { line-height: 1.3em; } input[type="radio"] { float: left; clear: both; margin: 0.1em 0.5em 0.75em 0; line-height: 1.4em; height: 1.4em; } .radio { margin: 0 0 0.75em 0.5em; padding: 0; color: #222; line-height: 1.4em; } input.btn[type="submit"] { width: 100%; } input.btn-primary[type="submit"] { height: 2.9em; } textarea { width: 100%; display: block; margin-bottom: 1em; min-height: 8em; box-sizing: border-box; } select { width: 100%; height: 2.3em; color: #222; border: 1px solid #666; margin-bottom: 1em; padding: 0.3em 0.5em; line-height: 1.5em; font-size: 1.1em; } label { display: block; margin: 0 0 8px 0; color: #222; font-family: var(--webfont-primary, sans-serif); font-size: 14px; line-height: 20px; font-weight: 600; } label strong { color: #222; font-weight: 600; } label .required, label .optional { color: #666; font-weight: 400; font-size: 12px; line-height: 20px; } .heavy-label-light-required { color: #222; font-weight: 600; } .heavy-label-light-required span { color: #666; font-weight: 400; } @media screen and (min-width: 768px) { label { font-size: 14px; line-height: 20px; font-weight: 600; } label strong { font-weight: 600; } label .required, label .optional { font-weight: 400; font-size: 12px; line-height: 20px; margin-left: 5px; } .heavy-label-light-required { color: #222; font-weight: 600; } .heavy-label-light-required span { color: #666; font-weight: 400; } } select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: none; } input[type="radio"]:focus, input[type="checkbox"]:focus { box-shadow: 0 0 8px rgba(82, 168, 236, 0.6); /* Accessibility */ } .remember-me-block { white-space: nowrap; } .forgot-password { float: right; text-align: right; } .forgot-password a { color: #222; text-decoration: underline; } .forgot-password a:hover { text-decoration: underline; } .forgot-password a:focus { outline: dotted 1px; outline-offset: 2px; text-decoration: underline; } .sign-in-agreement a { color: #222; text-decoration: underline; } .sign-in-agreement a:hover { text-decoration: underline; } .sign-in-agreement a:focus { outline: dotted 1px; outline-offset: 2px; text-decoration: underline; } .input-chevron-right-description { font-size: 1.2em; line-height: 1.2em; margin: 1em auto; text-align: center; width: 12em; } .input-chevron-right .enter-email, .input-chevron-right .enter-zip { position: relative; margin: 0.2em auto; } .input-chevron-right .enter-email .icon-search, .input-chevron-right .enter-zip .icon-search { position: absolute; top: 1em; left: 1.2em; font-size: 1.3em; } .input-chevron-right .enter-email .icon-envelope, .input-chevron-right .enter-zip .icon-envelope { position: absolute; top: 0.7em; left: 0.8em; font-size: 1.3em; color: #717171; } .input-chevron-right .enter-email input[type="text"], .input-chevron-right .enter-email input[type="email"], .input-chevron-right .enter-zip input[type="text"], .input-chevron-right .enter-zip input[type="email"] { width: 100%; font-size: 1em; height: 3em; line-height: 2.1em; padding: 0.4em 1.2em; box-sizing: border-box; } .input-chevron-right .enter-email .field-validation-error, .input-chevron-right .enter-zip .field-validation-error { margin: 0.75em 0 1.5em 1em !important; } .input-chevron-right .enter-email a, .input-chevron-right .enter-email button.icon-chevron-right, .input-chevron-right .enter-zip a, .input-chevron-right .enter-zip button.icon-chevron-right { position: absolute; right: 0; top: 0; display: block; padding: 0.73em; color: #fff; background: #444; border: 0.3em solid #999; text-align: center; text-indent: 0.1em; width: 1em; height: 1em; border-radius: 50%; } .input-chevron-right .enter-email a .btn-text, .input-chevron-right .enter-email button.icon-chevron-right .btn-text, .input-chevron-right .enter-zip a .btn-text, .input-chevron-right .enter-zip button.icon-chevron-right .btn-text { color: #222; } .input-chevron-right .enter-email input[type="text"], .input-chevron-right .enter-email input[type="email"] { padding: 0.4em 1.2em 0.4em 2.8em; } .input-chevron-right .enter-email a, .input-chevron-right .enter-email button.icon-chevron-right { background: #f7f7f7; border: 0.3em solid #717171; color: #999; } .input-chevron-right .enter-email a .btn-text, .input-chevron-right .enter-email button.icon-chevron-right .btn-text { color: #222; } .input-chevron-right .enter-zip input[type="text"] { padding: 0.4em 1.2em 0.4em 1em; } #zipMsgArea, .zipMsgArea { text-align: center; } .zipMsgBar { border-top: 0.2em solid #d8d8d8; max-height: 1px; width: 100%; z-index: 1; } .zipMsgText { background-color: white; color: #717171; font-size: 1em; font-style: italic; margin: 0 auto; padding: 0 2%; position: relative; top: -0.8em; z-index: 10; } .password-help { display: block; margin: -0.75em 0 0.75em; font-style: normal; color: #717171; } .validation-summary-errors li { padding: 0 !important; } .oauth2validation-summary-errors li { padding: 0 0em !important; } .alert, .field-validation-error, .validation-summary-errors li, .warning { color: #e00e00; font-size: 14px; line-height: 20px; margin: 0 0 1.5em; padding: 0; clear: both; background: none; border: none; display: block; } .alert li, .field-validation-error li, .validation-summary-errors li li, .warning li { margin: 0.5em 0 0; } .alert li .forgotPassword, .field-validation-error li .forgotPassword, .validation-summary-errors li li .forgotPassword, .warning li .forgotPassword { margin: 0; text-align: left; } #creditCardInfoWrapper > span:first-child { margin: 1em 0; } .success, .success-bold, .failure, .failure-bold { font-size: 1.1em; line-height: 1.3em; margin: 0 0 1.5em 0; padding: 0; background: none; display: block; } .success strong, .success span, .success-bold strong, .success-bold span, .failure strong, .failure span, .failure-bold strong, .failure-bold span { display: block; } .success, .success-bold { color: #e00e00; } .failure, .failure-bold { color: #e00e00; } .success-bold, .failure-bold { font-weight: bold; } /* TEMPORARY save text styling /*-------------------------------------------------------------------------------*/ #savedText { font-size: 1.2em; line-height: 1.3em; padding: 0em 0.9em 1.2em; margin: 0; font-weight: normal; color: #2ecc71; } .ui-autocomplete { border: 0.1em solid #d8d8d8; background: #fff; z-index: 150; } .ui-autocomplete .ui-menu { padding: 0 0 0 0; } .ui-autocomplete .ui-menu-item { border-bottom: 0.1em solid #d8d8d8; padding: 0.3em 0; } .ui-autocomplete .ui-menu-item:last-of-type { border-bottom: none; } .ui-autocomplete .ui-menu-item a { padding: 0.2em 0.1em 0.2em 0.7em; font-size: 0.9em; color: #444; } .ui-autocomplete .ui-menu-item a:hover { border: none; background: #fff; } .ui-autocomplete .ui-state-focus { border: none; background: #fff; } .ui-corner-all { border-radius: 1px; } .ui-widget { font-family: var(--webfont-primary, sans-serif); } .ui-widget-content { padding: 0; } /* Custom Select Drop Down */ .mobile-select-wrapper { position: relative; display: -moz-inline-stack; display: inline-block; vertical-align: middle; zoom: 1; *display: inline; width: 100%; border-color: #999; } .mobile-select-wrapper:after { font-family: "web-icons"; content: "\ef0d"; width: 15px; padding: 8px; background: transparent; color: #222; font-weight: bold; position: absolute; right: 18px; top: 5px; z-index: 2; } .mobile-select-wrapper .mobile-select { height: 3em; padding: 0.6em 0.5em 0.6em 1em; color: #222; font-size: 1.1em; -webkit-appearance: none; -moz-appearance: none; appearance: none; position: relative; z-index: 1; } .mobile-select-wrapper select { background: #fff; border-radius: 1px !important; font-weight: bold; } @media screen and (min-width: 1px) { input.input-email-xl, input.input-password-xl, input.input-search-xl, input.input-text-xl, input.input-xl { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 16px; line-height: normal; height: 48px; } input.input-email-xl:-moz-placeholder, input.input-password-xl:-moz-placeholder, input.input-search-xl:-moz-placeholder, input.input-text-xl:-moz-placeholder, input.input-xl:-moz-placeholder { color: #222; } input.input-email-xl::-moz-placeholder, input.input-password-xl::-moz-placeholder, input.input-search-xl::-moz-placeholder, input.input-text-xl::-moz-placeholder, input.input-xl::-moz-placeholder { color: #222; } input.input-email-xl:-ms-input-placeholder, input.input-password-xl:-ms-input-placeholder, input.input-search-xl:-ms-input-placeholder, input.input-text-xl:-ms-input-placeholder, input.input-xl:-ms-input-placeholder { color: #222; } input.input-email-xl::-webkit-input-placeholder, input.input-password-xl::-webkit-input-placeholder, input.input-search-xl::-webkit-input-placeholder, input.input-text-xl::-webkit-input-placeholder, input.input-xl::-webkit-input-placeholder { color: #222; } input.input-email-xl.focus, input.input-email-xl:focus, input.input-password-xl.focus, input.input-password-xl:focus, input.input-search-xl.focus, input.input-search-xl:focus, input.input-text-xl.focus, input.input-text-xl:focus, input.input-xl.focus, input.input-xl:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .readonly-text-xl { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 16px; line-height: 38px; height: 48px; } input.input-email-lg, input.input-password-lg, input.input-search-lg, input.input-text-lg, input.input-lg { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 16px; line-height: normal; height: 40px; } input.input-email-lg:-moz-placeholder, input.input-password-lg:-moz-placeholder, input.input-search-lg:-moz-placeholder, input.input-text-lg:-moz-placeholder, input.input-lg:-moz-placeholder { color: #222; } input.input-email-lg::-moz-placeholder, input.input-password-lg::-moz-placeholder, input.input-search-lg::-moz-placeholder, input.input-text-lg::-moz-placeholder, input.input-lg::-moz-placeholder { color: #222; } input.input-email-lg:-ms-input-placeholder, input.input-password-lg:-ms-input-placeholder, input.input-search-lg:-ms-input-placeholder, input.input-text-lg:-ms-input-placeholder, input.input-lg:-ms-input-placeholder { color: #222; } input.input-email-lg::-webkit-input-placeholder, input.input-password-lg::-webkit-input-placeholder, input.input-search-lg::-webkit-input-placeholder, input.input-text-lg::-webkit-input-placeholder, input.input-lg::-webkit-input-placeholder { color: #222; } input.input-email-lg.focus, input.input-email-lg:focus, input.input-password-lg.focus, input.input-password-lg:focus, input.input-search-lg.focus, input.input-search-lg:focus, input.input-text-lg.focus, input.input-text-lg:focus, input.input-lg.focus, input.input-lg:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .readonly-text-lg { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 16px; line-height: 30px; height: 40px; } input.input-email-md, input.input-password-md, input.input-search-md, input.input-text-md, input.input-md { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 16px; line-height: normal; height: 40px; } input.input-email-md:-moz-placeholder, input.input-password-md:-moz-placeholder, input.input-search-md:-moz-placeholder, input.input-text-md:-moz-placeholder, input.input-md:-moz-placeholder { color: #222; } input.input-email-md::-moz-placeholder, input.input-password-md::-moz-placeholder, input.input-search-md::-moz-placeholder, input.input-text-md::-moz-placeholder, input.input-md::-moz-placeholder { color: #222; } input.input-email-md:-ms-input-placeholder, input.input-password-md:-ms-input-placeholder, input.input-search-md:-ms-input-placeholder, input.input-text-md:-ms-input-placeholder, input.input-md:-ms-input-placeholder { color: #222; } input.input-email-md::-webkit-input-placeholder, input.input-password-md::-webkit-input-placeholder, input.input-search-md::-webkit-input-placeholder, input.input-text-md::-webkit-input-placeholder, input.input-md::-webkit-input-placeholder { color: #222; } input.input-email-md.focus, input.input-email-md:focus, input.input-password-md.focus, input.input-password-md:focus, input.input-search-md.focus, input.input-search-md:focus, input.input-text-md.focus, input.input-text-md:focus, input.input-md.focus, input.input-md:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .readonly-text-md { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 16px; line-height: 30px; height: 40px; } input.input-email-sm, input.input-password-sm, input.input-search-sm, input.input-text-sm, input.input-sm { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 12px; line-height: normal; height: 26px; } input.input-email-sm:-moz-placeholder, input.input-password-sm:-moz-placeholder, input.input-search-sm:-moz-placeholder, input.input-text-sm:-moz-placeholder, input.input-sm:-moz-placeholder { color: #222; } input.input-email-sm::-moz-placeholder, input.input-password-sm::-moz-placeholder, input.input-search-sm::-moz-placeholder, input.input-text-sm::-moz-placeholder, input.input-sm::-moz-placeholder { color: #222; } input.input-email-sm:-ms-input-placeholder, input.input-password-sm:-ms-input-placeholder, input.input-search-sm:-ms-input-placeholder, input.input-text-sm:-ms-input-placeholder, input.input-sm:-ms-input-placeholder { color: #222; } input.input-email-sm::-webkit-input-placeholder, input.input-password-sm::-webkit-input-placeholder, input.input-search-sm::-webkit-input-placeholder, input.input-text-sm::-webkit-input-placeholder, input.input-sm::-webkit-input-placeholder { color: #222; } input.input-email-sm.focus, input.input-email-sm:focus, input.input-password-sm.focus, input.input-password-sm:focus, input.input-search-sm.focus, input.input-search-sm:focus, input.input-text-sm.focus, input.input-text-sm:focus, input.input-sm.focus, input.input-sm:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .readonly-text-sm { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 12px; line-height: 18px; height: 26px; } input.input-email-xs, input.input-password-xs, input.input-search-xs, input.input-text-xs, input.input-xs { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 12px; line-height: normal; height: 26px; } input.input-email-xs:-moz-placeholder, input.input-password-xs:-moz-placeholder, input.input-search-xs:-moz-placeholder, input.input-text-xs:-moz-placeholder, input.input-xs:-moz-placeholder { color: #222; } input.input-email-xs::-moz-placeholder, input.input-password-xs::-moz-placeholder, input.input-search-xs::-moz-placeholder, input.input-text-xs::-moz-placeholder, input.input-xs::-moz-placeholder { color: #222; } input.input-email-xs:-ms-input-placeholder, input.input-password-xs:-ms-input-placeholder, input.input-search-xs:-ms-input-placeholder, input.input-text-xs:-ms-input-placeholder, input.input-xs:-ms-input-placeholder { color: #222; } input.input-email-xs::-webkit-input-placeholder, input.input-password-xs::-webkit-input-placeholder, input.input-search-xs::-webkit-input-placeholder, input.input-text-xs::-webkit-input-placeholder, input.input-xs::-webkit-input-placeholder { color: #222; } input.input-email-xs.focus, input.input-email-xs:focus, input.input-password-xs.focus, input.input-password-xs:focus, input.input-search-xs.focus, input.input-search-xs:focus, input.input-text-xs.focus, input.input-text-xs:focus, input.input-xs.focus, input.input-xs:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .readonly-text-xs { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 12px; line-height: 18px; height: 26px; } input.field-qty { padding-left: 5px; padding-right: 5px; text-align: center; -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } input.field-qty::-webkit-inner-spin-button, input.field-qty::-webkit-outer-spin-button { -webkit-appearance: none; } input.field-qty.input-xl, input.field-qty.input-l { font-size: 16px; } input.field-qty::-webkit-inner-spin-button, input.field-qty::-webkit-outer-spin-button { -webkit-appearance: none; } input.field-qty.input-xl { width: 48px; height: 48px; } input.field-qty.input-lg { width: 40px; height: 40px; } input.field-qty.input-md { width: 40px; height: 40px; } input.field-qty.input-sm { width: 26px; height: 26px; } input.field-qty.input-xs { width: 26px; height: 26px; } input.alert-qty { border-color: #e00e00; color: #e00e00; } select.select-xl { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 50px; font-size: 16px; line-height: normal; height: 48px; background-size: 17px 17px; } select.select-xl:-moz-placeholder { color: #222; } select.select-xl::-moz-placeholder { color: #222; } select.select-xl:-ms-input-placeholder { color: #222; } select.select-xl::-webkit-input-placeholder { color: #222; } select.select-xl.focus, select.select-xl:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } select.select-xl::-ms-expand { display: none; } select.select-xl:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-xl.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } select.select-xl.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-lg { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 48px; font-size: 16px; line-height: normal; height: 40px; background-size: 17px 17px; } select.select-lg:-moz-placeholder { color: #222; } select.select-lg::-moz-placeholder { color: #222; } select.select-lg:-ms-input-placeholder { color: #222; } select.select-lg::-webkit-input-placeholder { color: #222; } select.select-lg.focus, select.select-lg:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } select.select-lg::-ms-expand { display: none; } select.select-lg:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-lg.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } select.select-lg.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-md { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 48px; font-size: 16px; line-height: normal; height: 40px; background-size: 17px 17px; } select.select-md:-moz-placeholder { color: #222; } select.select-md::-moz-placeholder { color: #222; } select.select-md:-ms-input-placeholder { color: #222; } select.select-md::-webkit-input-placeholder { color: #222; } select.select-md.focus, select.select-md:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } select.select-md::-ms-expand { display: none; } select.select-md:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-md.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } select.select-md.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-sm { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 42px; font-size: 12px; line-height: normal; height: 26px; background-size: 15px 15px; } select.select-sm:-moz-placeholder { color: #222; } select.select-sm::-moz-placeholder { color: #222; } select.select-sm:-ms-input-placeholder { color: #222; } select.select-sm::-webkit-input-placeholder { color: #222; } select.select-sm.focus, select.select-sm:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } select.select-sm::-ms-expand { display: none; } select.select-sm:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-sm.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } select.select-sm.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-xs { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 42px; font-size: 12px; line-height: normal; height: 26px; background-size: 15px 15px; } select.select-xs:-moz-placeholder { color: #222; } select.select-xs::-moz-placeholder { color: #222; } select.select-xs:-ms-input-placeholder { color: #222; } select.select-xs::-webkit-input-placeholder { color: #222; } select.select-xs.focus, select.select-xs:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } select.select-xs::-ms-expand { display: none; } select.select-xs:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-xs.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } select.select-xs.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } textarea.textarea-xl { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 16px; } textarea.textarea-xl:-moz-placeholder { color: #222; } textarea.textarea-xl::-moz-placeholder { color: #222; } textarea.textarea-xl:-ms-input-placeholder { color: #222; } textarea.textarea-xl::-webkit-input-placeholder { color: #222; } textarea.textarea-xl.focus, textarea.textarea-xl:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } textarea.textarea-lg { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 16px; } textarea.textarea-lg:-moz-placeholder { color: #222; } textarea.textarea-lg::-moz-placeholder { color: #222; } textarea.textarea-lg:-ms-input-placeholder { color: #222; } textarea.textarea-lg::-webkit-input-placeholder { color: #222; } textarea.textarea-lg.focus, textarea.textarea-lg:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } textarea.textarea-md { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 16px; } textarea.textarea-md:-moz-placeholder { color: #222; } textarea.textarea-md::-moz-placeholder { color: #222; } textarea.textarea-md:-ms-input-placeholder { color: #222; } textarea.textarea-md::-webkit-input-placeholder { color: #222; } textarea.textarea-md.focus, textarea.textarea-md:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } textarea.textarea-sm { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 12px; } textarea.textarea-sm:-moz-placeholder { color: #222; } textarea.textarea-sm::-moz-placeholder { color: #222; } textarea.textarea-sm:-ms-input-placeholder { color: #222; } textarea.textarea-sm::-webkit-input-placeholder { color: #222; } textarea.textarea-sm.focus, textarea.textarea-sm:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } textarea.textarea-xs { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 12px; } textarea.textarea-xs:-moz-placeholder { color: #222; } textarea.textarea-xs::-moz-placeholder { color: #222; } textarea.textarea-xs:-ms-input-placeholder { color: #222; } textarea.textarea-xs::-webkit-input-placeholder { color: #222; } textarea.textarea-xs.focus, textarea.textarea-xs:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } } @media screen and (min-width: 768px) { input.input-email-xl, input.input-password-xl, input.input-search-xl, input.input-text-xl, input.input-xl { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 16px; line-height: normal; height: 48px; } input.input-email-xl:-moz-placeholder, input.input-password-xl:-moz-placeholder, input.input-search-xl:-moz-placeholder, input.input-text-xl:-moz-placeholder, input.input-xl:-moz-placeholder { color: #222; } input.input-email-xl::-moz-placeholder, input.input-password-xl::-moz-placeholder, input.input-search-xl::-moz-placeholder, input.input-text-xl::-moz-placeholder, input.input-xl::-moz-placeholder { color: #222; } input.input-email-xl:-ms-input-placeholder, input.input-password-xl:-ms-input-placeholder, input.input-search-xl:-ms-input-placeholder, input.input-text-xl:-ms-input-placeholder, input.input-xl:-ms-input-placeholder { color: #222; } input.input-email-xl::-webkit-input-placeholder, input.input-password-xl::-webkit-input-placeholder, input.input-search-xl::-webkit-input-placeholder, input.input-text-xl::-webkit-input-placeholder, input.input-xl::-webkit-input-placeholder { color: #222; } input.input-email-xl.focus, input.input-email-xl:focus, input.input-password-xl.focus, input.input-password-xl:focus, input.input-search-xl.focus, input.input-search-xl:focus, input.input-text-xl.focus, input.input-text-xl:focus, input.input-xl.focus, input.input-xl:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .readonly-text-xl { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 16px; line-height: 38px; height: 48px; } input.input-email-lg, input.input-password-lg, input.input-search-lg, input.input-text-lg, input.input-lg { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 16px; line-height: normal; height: 40px; } input.input-email-lg:-moz-placeholder, input.input-password-lg:-moz-placeholder, input.input-search-lg:-moz-placeholder, input.input-text-lg:-moz-placeholder, input.input-lg:-moz-placeholder { color: #222; } input.input-email-lg::-moz-placeholder, input.input-password-lg::-moz-placeholder, input.input-search-lg::-moz-placeholder, input.input-text-lg::-moz-placeholder, input.input-lg::-moz-placeholder { color: #222; } input.input-email-lg:-ms-input-placeholder, input.input-password-lg:-ms-input-placeholder, input.input-search-lg:-ms-input-placeholder, input.input-text-lg:-ms-input-placeholder, input.input-lg:-ms-input-placeholder { color: #222; } input.input-email-lg::-webkit-input-placeholder, input.input-password-lg::-webkit-input-placeholder, input.input-search-lg::-webkit-input-placeholder, input.input-text-lg::-webkit-input-placeholder, input.input-lg::-webkit-input-placeholder { color: #222; } input.input-email-lg.focus, input.input-email-lg:focus, input.input-password-lg.focus, input.input-password-lg:focus, input.input-search-lg.focus, input.input-search-lg:focus, input.input-text-lg.focus, input.input-text-lg:focus, input.input-lg.focus, input.input-lg:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .readonly-text-lg { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 16px; line-height: 30px; height: 40px; } input.input-email-md, input.input-password-md, input.input-search-md, input.input-text-md, input.input-md { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 14px; line-height: normal; height: 36px; } input.input-email-md:-moz-placeholder, input.input-password-md:-moz-placeholder, input.input-search-md:-moz-placeholder, input.input-text-md:-moz-placeholder, input.input-md:-moz-placeholder { color: #222; } input.input-email-md::-moz-placeholder, input.input-password-md::-moz-placeholder, input.input-search-md::-moz-placeholder, input.input-text-md::-moz-placeholder, input.input-md::-moz-placeholder { color: #222; } input.input-email-md:-ms-input-placeholder, input.input-password-md:-ms-input-placeholder, input.input-search-md:-ms-input-placeholder, input.input-text-md:-ms-input-placeholder, input.input-md:-ms-input-placeholder { color: #222; } input.input-email-md::-webkit-input-placeholder, input.input-password-md::-webkit-input-placeholder, input.input-search-md::-webkit-input-placeholder, input.input-text-md::-webkit-input-placeholder, input.input-md::-webkit-input-placeholder { color: #222; } input.input-email-md.focus, input.input-email-md:focus, input.input-password-md.focus, input.input-password-md:focus, input.input-search-md.focus, input.input-search-md:focus, input.input-text-md.focus, input.input-text-md:focus, input.input-md.focus, input.input-md:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .readonly-text-md { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 14px; line-height: 28px; height: 36px; } input.input-email-sm, input.input-password-sm, input.input-search-sm, input.input-text-sm, input.input-sm { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 12px; line-height: normal; height: 32px; } input.input-email-sm:-moz-placeholder, input.input-password-sm:-moz-placeholder, input.input-search-sm:-moz-placeholder, input.input-text-sm:-moz-placeholder, input.input-sm:-moz-placeholder { color: #222; } input.input-email-sm::-moz-placeholder, input.input-password-sm::-moz-placeholder, input.input-search-sm::-moz-placeholder, input.input-text-sm::-moz-placeholder, input.input-sm::-moz-placeholder { color: #222; } input.input-email-sm:-ms-input-placeholder, input.input-password-sm:-ms-input-placeholder, input.input-search-sm:-ms-input-placeholder, input.input-text-sm:-ms-input-placeholder, input.input-sm:-ms-input-placeholder { color: #222; } input.input-email-sm::-webkit-input-placeholder, input.input-password-sm::-webkit-input-placeholder, input.input-search-sm::-webkit-input-placeholder, input.input-text-sm::-webkit-input-placeholder, input.input-sm::-webkit-input-placeholder { color: #222; } input.input-email-sm.focus, input.input-email-sm:focus, input.input-password-sm.focus, input.input-password-sm:focus, input.input-search-sm.focus, input.input-search-sm:focus, input.input-text-sm.focus, input.input-text-sm:focus, input.input-sm.focus, input.input-sm:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .readonly-text-sm { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 12px; line-height: 24px; height: 32px; } input.input-email-xs, input.input-password-xs, input.input-search-xs, input.input-text-xs, input.input-xs { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 12px; line-height: normal; height: 26px; } input.input-email-xs:-moz-placeholder, input.input-password-xs:-moz-placeholder, input.input-search-xs:-moz-placeholder, input.input-text-xs:-moz-placeholder, input.input-xs:-moz-placeholder { color: #222; } input.input-email-xs::-moz-placeholder, input.input-password-xs::-moz-placeholder, input.input-search-xs::-moz-placeholder, input.input-text-xs::-moz-placeholder, input.input-xs::-moz-placeholder { color: #222; } input.input-email-xs:-ms-input-placeholder, input.input-password-xs:-ms-input-placeholder, input.input-search-xs:-ms-input-placeholder, input.input-text-xs:-ms-input-placeholder, input.input-xs:-ms-input-placeholder { color: #222; } input.input-email-xs::-webkit-input-placeholder, input.input-password-xs::-webkit-input-placeholder, input.input-search-xs::-webkit-input-placeholder, input.input-text-xs::-webkit-input-placeholder, input.input-xs::-webkit-input-placeholder { color: #222; } input.input-email-xs.focus, input.input-email-xs:focus, input.input-password-xs.focus, input.input-password-xs:focus, input.input-search-xs.focus, input.input-search-xs:focus, input.input-text-xs.focus, input.input-text-xs:focus, input.input-xs.focus, input.input-xs:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .readonly-text-xs { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 12px; line-height: 18px; height: 26px; } input[type="text"].field-qty, input[type="number"].field-qty, input.field-qty { padding-left: 5px; padding-right: 5px; text-align: center; -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } input[type="text"].field-qty::-webkit-inner-spin-button, input[type="text"].field-qty::-webkit-outer-spin-button, input[type="number"].field-qty::-webkit-inner-spin-button, input[type="number"].field-qty::-webkit-outer-spin-button, input.field-qty::-webkit-inner-spin-button, input.field-qty::-webkit-outer-spin-button { -webkit-appearance: none; } input[type="text"].field-qty.input-xl, input[type="text"].field-qty.input-l, input[type="number"].field-qty.input-xl, input[type="number"].field-qty.input-l, input.field-qty.input-xl, input.field-qty.input-l { font-size: 16px; } input[type="text"].field-qty::-webkit-inner-spin-button, input[type="text"].field-qty::-webkit-outer-spin-button, input[type="number"].field-qty::-webkit-inner-spin-button, input[type="number"].field-qty::-webkit-outer-spin-button, input.field-qty::-webkit-inner-spin-button, input.field-qty::-webkit-outer-spin-button { -webkit-appearance: none; } input[type="text"].field-qty.input-xl, input[type="number"].field-qty.input-xl, input.field-qty.input-xl { width: 48px; height: 48px; } input[type="text"].field-qty.input-lg, input[type="number"].field-qty.input-lg, input.field-qty.input-lg { width: 40px; height: 40px; } input[type="text"].field-qty.input-md, input[type="number"].field-qty.input-md, input.field-qty.input-md { width: 40px; height: 40px; } input[type="text"].field-qty.input-sm, input[type="number"].field-qty.input-sm, input.field-qty.input-sm { width: 26px; height: 26px; } input[type="text"].field-qty.input-xs, input[type="number"].field-qty.input-xs, input.field-qty.input-xs { width: 26px; height: 26px; } input.alert-qty { border-color: #e00e00; color: #e00e00; } select.select-xl { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 50px; font-size: 16px; line-height: normal; height: 48px; background-size: 17px 17px; } select.select-xl:-moz-placeholder { color: #222; } select.select-xl::-moz-placeholder { color: #222; } select.select-xl:-ms-input-placeholder { color: #222; } select.select-xl::-webkit-input-placeholder { color: #222; } select.select-xl.focus, select.select-xl:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } select.select-xl::-ms-expand { display: none; } select.select-xl:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-xl.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } select.select-xl.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-lg { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 48px; font-size: 16px; line-height: normal; height: 40px; background-size: 17px 17px; } select.select-lg:-moz-placeholder { color: #222; } select.select-lg::-moz-placeholder { color: #222; } select.select-lg:-ms-input-placeholder { color: #222; } select.select-lg::-webkit-input-placeholder { color: #222; } select.select-lg.focus, select.select-lg:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } select.select-lg::-ms-expand { display: none; } select.select-lg:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-lg.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } select.select-lg.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-md { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 48px; font-size: 14px; line-height: normal; height: 36px; background-size: 15px 15px; } select.select-md:-moz-placeholder { color: #222; } select.select-md::-moz-placeholder { color: #222; } select.select-md:-ms-input-placeholder { color: #222; } select.select-md::-webkit-input-placeholder { color: #222; } select.select-md.focus, select.select-md:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } select.select-md::-ms-expand { display: none; } select.select-md:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-md.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } select.select-md.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-sm { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 45px; font-size: 12px; line-height: normal; height: 32px; background-size: 15px 15px; } select.select-sm:-moz-placeholder { color: #222; } select.select-sm::-moz-placeholder { color: #222; } select.select-sm:-ms-input-placeholder { color: #222; } select.select-sm::-webkit-input-placeholder { color: #222; } select.select-sm.focus, select.select-sm:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } select.select-sm::-ms-expand { display: none; } select.select-sm:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-sm.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } select.select-sm.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-xs { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 42px; font-size: 12px; line-height: normal; height: 26px; background-size: 15px 15px; } select.select-xs:-moz-placeholder { color: #222; } select.select-xs::-moz-placeholder { color: #222; } select.select-xs:-ms-input-placeholder { color: #222; } select.select-xs::-webkit-input-placeholder { color: #222; } select.select-xs.focus, select.select-xs:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } select.select-xs::-ms-expand { display: none; } select.select-xs:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } select.select-xs.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } select.select-xs.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } textarea.textarea-xl { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 16px; } textarea.textarea-xl:-moz-placeholder { color: #222; } textarea.textarea-xl::-moz-placeholder { color: #222; } textarea.textarea-xl:-ms-input-placeholder { color: #222; } textarea.textarea-xl::-webkit-input-placeholder { color: #222; } textarea.textarea-xl.focus, textarea.textarea-xl:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } textarea.textarea-lg { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 16px; } textarea.textarea-lg:-moz-placeholder { color: #222; } textarea.textarea-lg::-moz-placeholder { color: #222; } textarea.textarea-lg:-ms-input-placeholder { color: #222; } textarea.textarea-lg::-webkit-input-placeholder { color: #222; } textarea.textarea-lg.focus, textarea.textarea-lg:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } textarea.textarea-md { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 14px; } textarea.textarea-md:-moz-placeholder { color: #222; } textarea.textarea-md::-moz-placeholder { color: #222; } textarea.textarea-md:-ms-input-placeholder { color: #222; } textarea.textarea-md::-webkit-input-placeholder { color: #222; } textarea.textarea-md.focus, textarea.textarea-md:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } textarea.textarea-sm { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 12px; } textarea.textarea-sm:-moz-placeholder { color: #222; } textarea.textarea-sm::-moz-placeholder { color: #222; } textarea.textarea-sm:-ms-input-placeholder { color: #222; } textarea.textarea-sm::-webkit-input-placeholder { color: #222; } textarea.textarea-sm.focus, textarea.textarea-sm:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } textarea.textarea-xs { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 12px; } textarea.textarea-xs:-moz-placeholder { color: #222; } textarea.textarea-xs::-moz-placeholder { color: #222; } textarea.textarea-xs:-ms-input-placeholder { color: #222; } textarea.textarea-xs::-webkit-input-placeholder { color: #222; } textarea.textarea-xs.focus, textarea.textarea-xs:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } } @media screen and (min-width: 1px) { .adaptive-layout input.input-email-xl, .adaptive-layout input.input-password-xl, .adaptive-layout input.input-search-xl, .adaptive-layout input.input-text-xl, .adaptive-layout input.input-xl { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 16px; line-height: normal; height: 48px; } .adaptive-layout input.input-email-xl:-moz-placeholder, .adaptive-layout input.input-password-xl:-moz-placeholder, .adaptive-layout input.input-search-xl:-moz-placeholder, .adaptive-layout input.input-text-xl:-moz-placeholder, .adaptive-layout input.input-xl:-moz-placeholder { color: #222; } .adaptive-layout input.input-email-xl::-moz-placeholder, .adaptive-layout input.input-password-xl::-moz-placeholder, .adaptive-layout input.input-search-xl::-moz-placeholder, .adaptive-layout input.input-text-xl::-moz-placeholder, .adaptive-layout input.input-xl::-moz-placeholder { color: #222; } .adaptive-layout input.input-email-xl:-ms-input-placeholder, .adaptive-layout input.input-password-xl:-ms-input-placeholder, .adaptive-layout input.input-search-xl:-ms-input-placeholder, .adaptive-layout input.input-text-xl:-ms-input-placeholder, .adaptive-layout input.input-xl:-ms-input-placeholder { color: #222; } .adaptive-layout input.input-email-xl::-webkit-input-placeholder, .adaptive-layout input.input-password-xl::-webkit-input-placeholder, .adaptive-layout input.input-search-xl::-webkit-input-placeholder, .adaptive-layout input.input-text-xl::-webkit-input-placeholder, .adaptive-layout input.input-xl::-webkit-input-placeholder { color: #222; } .adaptive-layout input.input-email-xl.focus, .adaptive-layout input.input-email-xl:focus, .adaptive-layout input.input-password-xl.focus, .adaptive-layout input.input-password-xl:focus, .adaptive-layout input.input-search-xl.focus, .adaptive-layout input.input-search-xl:focus, .adaptive-layout input.input-text-xl.focus, .adaptive-layout input.input-text-xl:focus, .adaptive-layout input.input-xl.focus, .adaptive-layout input.input-xl:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout .readonly-text-xl { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 16px; line-height: 38px; height: 48px; } .adaptive-layout input.input-email-lg, .adaptive-layout input.input-password-lg, .adaptive-layout input.input-search-lg, .adaptive-layout input.input-text-lg, .adaptive-layout input.input-lg { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 16px; line-height: normal; height: 40px; } .adaptive-layout input.input-email-lg:-moz-placeholder, .adaptive-layout input.input-password-lg:-moz-placeholder, .adaptive-layout input.input-search-lg:-moz-placeholder, .adaptive-layout input.input-text-lg:-moz-placeholder, .adaptive-layout input.input-lg:-moz-placeholder { color: #222; } .adaptive-layout input.input-email-lg::-moz-placeholder, .adaptive-layout input.input-password-lg::-moz-placeholder, .adaptive-layout input.input-search-lg::-moz-placeholder, .adaptive-layout input.input-text-lg::-moz-placeholder, .adaptive-layout input.input-lg::-moz-placeholder { color: #222; } .adaptive-layout input.input-email-lg:-ms-input-placeholder, .adaptive-layout input.input-password-lg:-ms-input-placeholder, .adaptive-layout input.input-search-lg:-ms-input-placeholder, .adaptive-layout input.input-text-lg:-ms-input-placeholder, .adaptive-layout input.input-lg:-ms-input-placeholder { color: #222; } .adaptive-layout input.input-email-lg::-webkit-input-placeholder, .adaptive-layout input.input-password-lg::-webkit-input-placeholder, .adaptive-layout input.input-search-lg::-webkit-input-placeholder, .adaptive-layout input.input-text-lg::-webkit-input-placeholder, .adaptive-layout input.input-lg::-webkit-input-placeholder { color: #222; } .adaptive-layout input.input-email-lg.focus, .adaptive-layout input.input-email-lg:focus, .adaptive-layout input.input-password-lg.focus, .adaptive-layout input.input-password-lg:focus, .adaptive-layout input.input-search-lg.focus, .adaptive-layout input.input-search-lg:focus, .adaptive-layout input.input-text-lg.focus, .adaptive-layout input.input-text-lg:focus, .adaptive-layout input.input-lg.focus, .adaptive-layout input.input-lg:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout .readonly-text-lg { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 16px; line-height: 30px; height: 40px; } .adaptive-layout input.input-email-md, .adaptive-layout input.input-password-md, .adaptive-layout input.input-search-md, .adaptive-layout input.input-text-md, .adaptive-layout input.input-md { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 14px; line-height: normal; height: 36px; } .adaptive-layout input.input-email-md:-moz-placeholder, .adaptive-layout input.input-password-md:-moz-placeholder, .adaptive-layout input.input-search-md:-moz-placeholder, .adaptive-layout input.input-text-md:-moz-placeholder, .adaptive-layout input.input-md:-moz-placeholder { color: #222; } .adaptive-layout input.input-email-md::-moz-placeholder, .adaptive-layout input.input-password-md::-moz-placeholder, .adaptive-layout input.input-search-md::-moz-placeholder, .adaptive-layout input.input-text-md::-moz-placeholder, .adaptive-layout input.input-md::-moz-placeholder { color: #222; } .adaptive-layout input.input-email-md:-ms-input-placeholder, .adaptive-layout input.input-password-md:-ms-input-placeholder, .adaptive-layout input.input-search-md:-ms-input-placeholder, .adaptive-layout input.input-text-md:-ms-input-placeholder, .adaptive-layout input.input-md:-ms-input-placeholder { color: #222; } .adaptive-layout input.input-email-md::-webkit-input-placeholder, .adaptive-layout input.input-password-md::-webkit-input-placeholder, .adaptive-layout input.input-search-md::-webkit-input-placeholder, .adaptive-layout input.input-text-md::-webkit-input-placeholder, .adaptive-layout input.input-md::-webkit-input-placeholder { color: #222; } .adaptive-layout input.input-email-md.focus, .adaptive-layout input.input-email-md:focus, .adaptive-layout input.input-password-md.focus, .adaptive-layout input.input-password-md:focus, .adaptive-layout input.input-search-md.focus, .adaptive-layout input.input-search-md:focus, .adaptive-layout input.input-text-md.focus, .adaptive-layout input.input-text-md:focus, .adaptive-layout input.input-md.focus, .adaptive-layout input.input-md:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout .readonly-text-md { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 14px; line-height: 28px; height: 36px; } .adaptive-layout input.input-email-sm, .adaptive-layout input.input-password-sm, .adaptive-layout input.input-search-sm, .adaptive-layout input.input-text-sm, .adaptive-layout input.input-sm { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 12px; line-height: normal; height: 32px; } .adaptive-layout input.input-email-sm:-moz-placeholder, .adaptive-layout input.input-password-sm:-moz-placeholder, .adaptive-layout input.input-search-sm:-moz-placeholder, .adaptive-layout input.input-text-sm:-moz-placeholder, .adaptive-layout input.input-sm:-moz-placeholder { color: #222; } .adaptive-layout input.input-email-sm::-moz-placeholder, .adaptive-layout input.input-password-sm::-moz-placeholder, .adaptive-layout input.input-search-sm::-moz-placeholder, .adaptive-layout input.input-text-sm::-moz-placeholder, .adaptive-layout input.input-sm::-moz-placeholder { color: #222; } .adaptive-layout input.input-email-sm:-ms-input-placeholder, .adaptive-layout input.input-password-sm:-ms-input-placeholder, .adaptive-layout input.input-search-sm:-ms-input-placeholder, .adaptive-layout input.input-text-sm:-ms-input-placeholder, .adaptive-layout input.input-sm:-ms-input-placeholder { color: #222; } .adaptive-layout input.input-email-sm::-webkit-input-placeholder, .adaptive-layout input.input-password-sm::-webkit-input-placeholder, .adaptive-layout input.input-search-sm::-webkit-input-placeholder, .adaptive-layout input.input-text-sm::-webkit-input-placeholder, .adaptive-layout input.input-sm::-webkit-input-placeholder { color: #222; } .adaptive-layout input.input-email-sm.focus, .adaptive-layout input.input-email-sm:focus, .adaptive-layout input.input-password-sm.focus, .adaptive-layout input.input-password-sm:focus, .adaptive-layout input.input-search-sm.focus, .adaptive-layout input.input-search-sm:focus, .adaptive-layout input.input-text-sm.focus, .adaptive-layout input.input-text-sm:focus, .adaptive-layout input.input-sm.focus, .adaptive-layout input.input-sm:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout .readonly-text-sm { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 12px; line-height: 24px; height: 32px; } .adaptive-layout input.input-email-xs, .adaptive-layout input.input-password-xs, .adaptive-layout input.input-search-xs, .adaptive-layout input.input-text-xs, .adaptive-layout input.input-xs { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 5px 16px; font-size: 12px; line-height: normal; height: 26px; } .adaptive-layout input.input-email-xs:-moz-placeholder, .adaptive-layout input.input-password-xs:-moz-placeholder, .adaptive-layout input.input-search-xs:-moz-placeholder, .adaptive-layout input.input-text-xs:-moz-placeholder, .adaptive-layout input.input-xs:-moz-placeholder { color: #222; } .adaptive-layout input.input-email-xs::-moz-placeholder, .adaptive-layout input.input-password-xs::-moz-placeholder, .adaptive-layout input.input-search-xs::-moz-placeholder, .adaptive-layout input.input-text-xs::-moz-placeholder, .adaptive-layout input.input-xs::-moz-placeholder { color: #222; } .adaptive-layout input.input-email-xs:-ms-input-placeholder, .adaptive-layout input.input-password-xs:-ms-input-placeholder, .adaptive-layout input.input-search-xs:-ms-input-placeholder, .adaptive-layout input.input-text-xs:-ms-input-placeholder, .adaptive-layout input.input-xs:-ms-input-placeholder { color: #222; } .adaptive-layout input.input-email-xs::-webkit-input-placeholder, .adaptive-layout input.input-password-xs::-webkit-input-placeholder, .adaptive-layout input.input-search-xs::-webkit-input-placeholder, .adaptive-layout input.input-text-xs::-webkit-input-placeholder, .adaptive-layout input.input-xs::-webkit-input-placeholder { color: #222; } .adaptive-layout input.input-email-xs.focus, .adaptive-layout input.input-email-xs:focus, .adaptive-layout input.input-password-xs.focus, .adaptive-layout input.input-password-xs:focus, .adaptive-layout input.input-search-xs.focus, .adaptive-layout input.input-search-xs:focus, .adaptive-layout input.input-text-xs.focus, .adaptive-layout input.input-text-xs:focus, .adaptive-layout input.input-xs.focus, .adaptive-layout input.input-xs:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout .readonly-text-xs { box-sizing: border-box; display: inline-block; box-shadow: none; width: 100%; position: relative; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); padding: 5px 16px; padding-left: 0; font-size: 12px; line-height: 18px; height: 26px; } .adaptive-layout input[type="text"].field-qty, .adaptive-layout input[type="number"].field-qty, .adaptive-layout input.field-qty { padding-left: 5px; padding-right: 5px; text-align: center; -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; } .adaptive-layout input[type="text"].field-qty::-webkit-inner-spin-button, .adaptive-layout input[type="text"].field-qty::-webkit-outer-spin-button, .adaptive-layout input[type="number"].field-qty::-webkit-inner-spin-button, .adaptive-layout input[type="number"].field-qty::-webkit-outer-spin-button, .adaptive-layout input.field-qty::-webkit-inner-spin-button, .adaptive-layout input.field-qty::-webkit-outer-spin-button { -webkit-appearance: none; } .adaptive-layout input[type="text"].field-qty.input-xl, .adaptive-layout input[type="text"].field-qty.input-l, .adaptive-layout input[type="number"].field-qty.input-xl, .adaptive-layout input[type="number"].field-qty.input-l, .adaptive-layout input.field-qty.input-xl, .adaptive-layout input.field-qty.input-l { font-size: 16px; } .adaptive-layout input[type="text"].field-qty::-webkit-inner-spin-button, .adaptive-layout input[type="text"].field-qty::-webkit-outer-spin-button, .adaptive-layout input[type="number"].field-qty::-webkit-inner-spin-button, .adaptive-layout input[type="number"].field-qty::-webkit-outer-spin-button, .adaptive-layout input.field-qty::-webkit-inner-spin-button, .adaptive-layout input.field-qty::-webkit-outer-spin-button { -webkit-appearance: none; } .adaptive-layout input[type="text"].field-qty.input-xl, .adaptive-layout input[type="number"].field-qty.input-xl, .adaptive-layout input.field-qty.input-xl { width: 48px; height: 48px; } .adaptive-layout input[type="text"].field-qty.input-lg, .adaptive-layout input[type="number"].field-qty.input-lg, .adaptive-layout input.field-qty.input-lg { width: 40px; height: 40px; } .adaptive-layout input[type="text"].field-qty.input-md, .adaptive-layout input[type="number"].field-qty.input-md, .adaptive-layout input.field-qty.input-md { width: 40px; height: 40px; } .adaptive-layout input[type="text"].field-qty.input-sm, .adaptive-layout input[type="number"].field-qty.input-sm, .adaptive-layout input.field-qty.input-sm { width: 26px; height: 26px; } .adaptive-layout input[type="text"].field-qty.input-xs, .adaptive-layout input[type="number"].field-qty.input-xs, .adaptive-layout input.field-qty.input-xs { width: 26px; height: 26px; } .adaptive-layout input.alert-qty { border-color: #e00e00; color: #e00e00; } .adaptive-layout select.select-xl { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 50px; font-size: 16px; line-height: normal; height: 48px; background-size: 17px 17px; } .adaptive-layout select.select-xl:-moz-placeholder { color: #222; } .adaptive-layout select.select-xl::-moz-placeholder { color: #222; } .adaptive-layout select.select-xl:-ms-input-placeholder { color: #222; } .adaptive-layout select.select-xl::-webkit-input-placeholder { color: #222; } .adaptive-layout select.select-xl.focus, .adaptive-layout select.select-xl:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout select.select-xl::-ms-expand { display: none; } .adaptive-layout select.select-xl:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } .adaptive-layout select.select-xl.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } .adaptive-layout select.select-xl.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } .adaptive-layout select.select-lg { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 48px; font-size: 16px; line-height: normal; height: 40px; background-size: 17px 17px; } .adaptive-layout select.select-lg:-moz-placeholder { color: #222; } .adaptive-layout select.select-lg::-moz-placeholder { color: #222; } .adaptive-layout select.select-lg:-ms-input-placeholder { color: #222; } .adaptive-layout select.select-lg::-webkit-input-placeholder { color: #222; } .adaptive-layout select.select-lg.focus, .adaptive-layout select.select-lg:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout select.select-lg::-ms-expand { display: none; } .adaptive-layout select.select-lg:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } .adaptive-layout select.select-lg.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } .adaptive-layout select.select-lg.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } .adaptive-layout select.select-md { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 48px; font-size: 14px; line-height: normal; height: 36px; background-size: 15px 15px; } .adaptive-layout select.select-md:-moz-placeholder { color: #222; } .adaptive-layout select.select-md::-moz-placeholder { color: #222; } .adaptive-layout select.select-md:-ms-input-placeholder { color: #222; } .adaptive-layout select.select-md::-webkit-input-placeholder { color: #222; } .adaptive-layout select.select-md.focus, .adaptive-layout select.select-md:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout select.select-md::-ms-expand { display: none; } .adaptive-layout select.select-md:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } .adaptive-layout select.select-md.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } .adaptive-layout select.select-md.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } .adaptive-layout select.select-sm { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 45px; font-size: 12px; line-height: normal; height: 32px; background-size: 15px 15px; } .adaptive-layout select.select-sm:-moz-placeholder { color: #222; } .adaptive-layout select.select-sm::-moz-placeholder { color: #222; } .adaptive-layout select.select-sm:-ms-input-placeholder { color: #222; } .adaptive-layout select.select-sm::-webkit-input-placeholder { color: #222; } .adaptive-layout select.select-sm.focus, .adaptive-layout select.select-sm:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout select.select-sm::-ms-expand { display: none; } .adaptive-layout select.select-sm:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } .adaptive-layout select.select-sm.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } .adaptive-layout select.select-sm.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } .adaptive-layout select.select-xs { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 5px 16px; padding-right: 42px; font-size: 12px; line-height: normal; height: 26px; background-size: 15px 15px; } .adaptive-layout select.select-xs:-moz-placeholder { color: #222; } .adaptive-layout select.select-xs::-moz-placeholder { color: #222; } .adaptive-layout select.select-xs:-ms-input-placeholder { color: #222; } .adaptive-layout select.select-xs::-webkit-input-placeholder { color: #222; } .adaptive-layout select.select-xs.focus, .adaptive-layout select.select-xs:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout select.select-xs::-ms-expand { display: none; } .adaptive-layout select.select-xs:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } .adaptive-layout select.select-xs.input-validation-error { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } .adaptive-layout select.select-xs.input-validation-error:focus { box-shadow: none; outline: dotted 1px; outline-offset: -3px; } .adaptive-layout textarea.textarea-xl { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 16px; } .adaptive-layout textarea.textarea-xl:-moz-placeholder { color: #222; } .adaptive-layout textarea.textarea-xl::-moz-placeholder { color: #222; } .adaptive-layout textarea.textarea-xl:-ms-input-placeholder { color: #222; } .adaptive-layout textarea.textarea-xl::-webkit-input-placeholder { color: #222; } .adaptive-layout textarea.textarea-xl.focus, .adaptive-layout textarea.textarea-xl:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout textarea.textarea-lg { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 16px; } .adaptive-layout textarea.textarea-lg:-moz-placeholder { color: #222; } .adaptive-layout textarea.textarea-lg::-moz-placeholder { color: #222; } .adaptive-layout textarea.textarea-lg:-ms-input-placeholder { color: #222; } .adaptive-layout textarea.textarea-lg::-webkit-input-placeholder { color: #222; } .adaptive-layout textarea.textarea-lg.focus, .adaptive-layout textarea.textarea-lg:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout textarea.textarea-md { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 14px; } .adaptive-layout textarea.textarea-md:-moz-placeholder { color: #222; } .adaptive-layout textarea.textarea-md::-moz-placeholder { color: #222; } .adaptive-layout textarea.textarea-md:-ms-input-placeholder { color: #222; } .adaptive-layout textarea.textarea-md::-webkit-input-placeholder { color: #222; } .adaptive-layout textarea.textarea-md.focus, .adaptive-layout textarea.textarea-md:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout textarea.textarea-sm { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 12px; } .adaptive-layout textarea.textarea-sm:-moz-placeholder { color: #222; } .adaptive-layout textarea.textarea-sm::-moz-placeholder { color: #222; } .adaptive-layout textarea.textarea-sm:-ms-input-placeholder { color: #222; } .adaptive-layout textarea.textarea-sm::-webkit-input-placeholder { color: #222; } .adaptive-layout textarea.textarea-sm.focus, .adaptive-layout textarea.textarea-sm:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } .adaptive-layout textarea.textarea-xs { box-sizing: border-box; display: inline-block; border: solid 1px #666; border-radius: 0; box-shadow: none; width: 100%; position: relative; outline: 0; vertical-align: top; background-color: #fff; color: #222; font-style: normal; font-weight: normal; font-family: var(--webfont-primary, sans-serif); transition: border linear 0.2s, box-shadow linear 0.2s; padding: 16px; font-size: 12px; } .adaptive-layout textarea.textarea-xs:-moz-placeholder { color: #222; } .adaptive-layout textarea.textarea-xs::-moz-placeholder { color: #222; } .adaptive-layout textarea.textarea-xs:-ms-input-placeholder { color: #222; } .adaptive-layout textarea.textarea-xs::-webkit-input-placeholder { color: #222; } .adaptive-layout textarea.textarea-xs.focus, .adaptive-layout textarea.textarea-xs:focus { border-color: #666; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #666 inset; } } @media screen and (min-width: 1px) { /*.input-validation-error + .field-validation-error { display: block; } .field-validation-error, .field-validation-error:empty { display: none; box-sizing: border-box; width: 100%; padding: $field-error-validation-padding; border: solid 1px $field-error-border-color; background: $field-error-validation-background; color: $field-error-color; position: relative; top: -1px; }*/ input.input-email-xs.input-validation-error, input.input-password-xs.input-validation-error, input.input-search-xs.input-validation-error, input.input-text-xs.input-validation-error, input.input-xs.input-validation-error, input.input-email-sm.input-validation-error, input.input-password-sm.input-validation-error, input.input-search-sm.input-validation-error, input.input-text-sm.input-validation-error, input.input-sm.input-validation-error, input.input-email-md.input-validation-error, input.input-password-md.input-validation-error, input.input-search-md.input-validation-error, input.input-text-md.input-validation-error, input.input-md.input-validation-error, input.input-email-lg.input-validation-error, input.input-password-lg.input-validation-error, input.input-search-lg.input-validation-error, input.input-text-lg.input-validation-error, input.input-lg.input-validation-error, input.input-email-xl.input-validation-error, input.input-password-xl.input-validation-error, input.input-search-xl.input-validation-error, input.input-text-xl.input-validation-error, input.input-xl.input-validation-error, select.select-xs.input-validation-error, select.select-sm.input-validation-error, select.select-md.input-validation-error, select.select-lg.input-validation-error, select.select-xl.input-validation-error, textarea.textarea-xs.input-validation-error, textarea.textarea-sm.input-validation-error, textarea.textarea-md.input-validation-error, textarea.textarea-lg.input-validation-error, textarea.textarea-xl.input-validation-error, select.input-validation-error, textarea.input-validation-error { border-color: #e00e00; color: #e00e00; } input.input-email-xs.input-validation-error.focus, input.input-email-xs.input-validation-error:focus, input.input-password-xs.input-validation-error.focus, input.input-password-xs.input-validation-error:focus, input.input-search-xs.input-validation-error.focus, input.input-search-xs.input-validation-error:focus, input.input-text-xs.input-validation-error.focus, input.input-text-xs.input-validation-error:focus, input.input-xs.input-validation-error.focus, input.input-xs.input-validation-error:focus, input.input-email-sm.input-validation-error.focus, input.input-email-sm.input-validation-error:focus, input.input-password-sm.input-validation-error.focus, input.input-password-sm.input-validation-error:focus, input.input-search-sm.input-validation-error.focus, input.input-search-sm.input-validation-error:focus, input.input-text-sm.input-validation-error.focus, input.input-text-sm.input-validation-error:focus, input.input-sm.input-validation-error.focus, input.input-sm.input-validation-error:focus, input.input-email-md.input-validation-error.focus, input.input-email-md.input-validation-error:focus, input.input-password-md.input-validation-error.focus, input.input-password-md.input-validation-error:focus, input.input-search-md.input-validation-error.focus, input.input-search-md.input-validation-error:focus, input.input-text-md.input-validation-error.focus, input.input-text-md.input-validation-error:focus, input.input-md.input-validation-error.focus, input.input-md.input-validation-error:focus, input.input-email-lg.input-validation-error.focus, input.input-email-lg.input-validation-error:focus, input.input-password-lg.input-validation-error.focus, input.input-password-lg.input-validation-error:focus, input.input-search-lg.input-validation-error.focus, input.input-search-lg.input-validation-error:focus, input.input-text-lg.input-validation-error.focus, input.input-text-lg.input-validation-error:focus, input.input-lg.input-validation-error.focus, input.input-lg.input-validation-error:focus, input.input-email-xl.input-validation-error.focus, input.input-email-xl.input-validation-error:focus, input.input-password-xl.input-validation-error.focus, input.input-password-xl.input-validation-error:focus, input.input-search-xl.input-validation-error.focus, input.input-search-xl.input-validation-error:focus, input.input-text-xl.input-validation-error.focus, input.input-text-xl.input-validation-error:focus, input.input-xl.input-validation-error.focus, input.input-xl.input-validation-error:focus, select.select-xs.input-validation-error.focus, select.select-xs.input-validation-error:focus, select.select-sm.input-validation-error.focus, select.select-sm.input-validation-error:focus, select.select-md.input-validation-error.focus, select.select-md.input-validation-error:focus, select.select-lg.input-validation-error.focus, select.select-lg.input-validation-error:focus, select.select-xl.input-validation-error.focus, select.select-xl.input-validation-error:focus, textarea.textarea-xs.input-validation-error.focus, textarea.textarea-xs.input-validation-error:focus, textarea.textarea-sm.input-validation-error.focus, textarea.textarea-sm.input-validation-error:focus, textarea.textarea-md.input-validation-error.focus, textarea.textarea-md.input-validation-error:focus, textarea.textarea-lg.input-validation-error.focus, textarea.textarea-lg.input-validation-error:focus, textarea.textarea-xl.input-validation-error.focus, textarea.textarea-xl.input-validation-error:focus, select.input-validation-error.focus, select.input-validation-error:focus, textarea.input-validation-error.focus, textarea.input-validation-error:focus { border-color: #e00e00; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #e00e00 inset; color: #e00e00; } input.input-validation-error, select.input-validation-error, textarea.input-validation-error { border-color: #e00e00; color: #e00e00; } input.input-validation-error.focus, input.input-validation-error:focus, select.input-validation-error.focus, select.input-validation-error:focus, textarea.input-validation-error.focus, textarea.input-validation-error:focus { border-color: #e00e00; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #e00e00 inset; color: #e00e00; } } @media screen and (min-width: 1px) { input.disabled, input[class*="input-"].disabled, select.disabled, select[class*="select-"].disabled, textarea.disabled, textarea[class*="textarea-"].disabled, input[disabled], input[class*="input-"][disabled], select[disabled], select[class*="select-"][disabled], textarea[disabled], textarea[class*="textarea-"][disabled], input[aria-disabled="true"], input[class*="input-"][aria-disabled="true"], select[aria-disabled="true"], select[class*="select-"][aria-disabled="true"], textarea[aria-disabled="true"], textarea[class*="textarea-"][aria-disabled="true"] { border-color: #ccc; background-color: #f3f3f3; color: #717171; } input.disabled.focus, input.disabled:focus, input[class*="input-"].disabled.focus, input[class*="input-"].disabled:focus, select.disabled.focus, select.disabled:focus, select[class*="select-"].disabled.focus, select[class*="select-"].disabled:focus, textarea.disabled.focus, textarea.disabled:focus, textarea[class*="textarea-"].disabled.focus, textarea[class*="textarea-"].disabled:focus, input[disabled].focus, input[disabled]:focus, input[class*="input-"][disabled].focus, input[class*="input-"][disabled]:focus, select[disabled].focus, select[disabled]:focus, select[class*="select-"][disabled].focus, select[class*="select-"][disabled]:focus, textarea[disabled].focus, textarea[disabled]:focus, textarea[class*="textarea-"][disabled].focus, textarea[class*="textarea-"][disabled]:focus, input[aria-disabled="true"].focus, input[aria-disabled="true"]:focus, input[class*="input-"][aria-disabled="true"].focus, input[class*="input-"][aria-disabled="true"]:focus, select[aria-disabled="true"].focus, select[aria-disabled="true"]:focus, select[class*="select-"][aria-disabled="true"].focus, select[class*="select-"][aria-disabled="true"]:focus, textarea[aria-disabled="true"].focus, textarea[aria-disabled="true"]:focus, textarea[class*="textarea-"][aria-disabled="true"].focus, textarea[class*="textarea-"][aria-disabled="true"]:focus { border-color: #ccc; box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px #ccc inset; color: #717171; } } input[type="file"]:focus, input[type="file"].fileUploadField:focus { outline: dotted 1px #222; outline-offset: 2px; } .hcm-true input[class*="input-"].focus, .hcm-true input[class*="input-"]:focus, .hcm-true select[class*="select-"].focus, .hcm-true select[class*="select-"]:focus, .hcm-true textarea[class*="textarea-"].focus, .hcm-true textarea[class*="textarea-"]:focus { box-shadow: none; outline: solid 2px; } .hcm-true select[class*="select-"] { -webkit-appearance: menulist; -moz-appearance: menulist; appearance: menulist; padding-right: 0; } .hcm-true select[class*="select-"]::-ms-expand { display: inline-block; } @media screen and (-ms-high-contrast: active) { input[class*="input-"].focus, input[class*="input-"]:focus, select[class*="select-"].focus, select[class*="select-"]:focus, textarea[class*="textarea-"].focus, textarea[class*="textarea-"]:focus { box-shadow: none; outline: solid 2px; } select[class*="select-"] { -webkit-appearance: menulist; -moz-appearance: menulist; appearance: menulist; padding-right: 0; } select[class*="select-"]::-ms-expand { display: inline-block; } } .fieldset-wrap { display: block; border: 0; padding: 0; font-size: 10px; color: #222; } .fieldset-wrap.form-error .select-element, .fieldset-wrap.form-error .text-area-element, .fieldset-wrap.form-error .text-element { box-shadow: none; border-color: #e00e00; color: #e00e00; } .fieldset-wrap.form-error .form-error-message { display: flex; column-gap: 8px; margin: 8px 0 0 0; color: #e00e00; } .fieldset-wrap.form-error .form-error-message .error-icon .svg-icon-error { width: 1.6em; height: 1.6em; margin: 0.2em 0 0 0; color: inherit; } .fieldset-wrap.form-error .form-error-message .error-text { font-size: 1.4em; line-height: 1.4285714; } .fieldset-wrap .fieldset-legend { float: left; width: 100%; margin: 0 0 10px; padding: 0; font-size: 1.4em; font-weight: 600; } .fieldset-wrap .form-error-message { font-size: 0.71428571em; font-weight: 400; } .fieldset-wrap .fieldset-children { clear: both; } .checkbox-image-group { display: inline-block; margin: 0; } .checkbox-image-group .fieldset-legend { float: left; width: 100%; margin: 0; padding: 0 0 10px; font-size: 1.4em; font-weight: 600; } .checkbox-image-group .fieldset-children { clear: both; display: flex; flex-wrap: wrap; justify-content: space-between; } .checkbox-image-group .fieldset-children .checkbox-wrap { position: relative; } .checkbox-image-group .fieldset-children input[type="checkbox"].checkbox-element { clip: unset; width: auto; height: auto; margin: 0; opacity: 0; position: absolute; z-index: 5; } .checkbox-image-group .fieldset-children input[type="checkbox"].checkbox-element:focus + .checkbox-label { outline: solid 1px transparent; outline-offset: 2px; } .checkbox-image-group .fieldset-children input[type="checkbox"].checkbox-element:focus + .checkbox-label .checkbox-img { border: solid 2px #666; box-shadow: inset 0 0 0 2px #666; padding: 0; } .checkbox-image-group .fieldset-children input[type="checkbox"].checkbox-element:checked + .checkbox-label .label-image::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 26 26'%3E%3Cpath fill='%23222' stroke='%23fff' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' stroke-width='1' d='M22.5 3.5h-19v19h19v-19z'%3E%3C/path%3E%3Cpath fill='none' stroke='%23fff' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' stroke-width='2' d='M7.5 13.611l4.278 4.278 6.722-9.778'%3E%3C/path%3E%3C/svg%3E"); } .checkbox-image-group .fieldset-children input[type="checkbox"].checkbox-element:disabled + .checkbox-label { color: #666; } .checkbox-image-group .fieldset-children input[type="checkbox"].checkbox-element:disabled + .checkbox-label .label-image::before { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 26 26'%3E%3Cpath fill='%23fff' stroke='%23222' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' stroke-width='2' d='M21 5h-16v16h16v-16z'%3E%3C/path%3E%3Cpath fill='none' stroke='%23fff' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' stroke-width='1' d='M22.5 3.5h-19v19h19v-19z'%3E%3C/path%3E%3Cpath fill='none' stroke='%23222' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' stroke-width='1' d='M21.356 4.644l-16.712 16.712'%3E%3C/path%3E%3C/svg%3E"); } .checkbox-image-group .fieldset-children label.checkbox-label { display: flex; padding: 0; font-size: 10px; line-height: 1.5; } .checkbox-image-group .fieldset-children label.checkbox-label::before { display: none; content: ""; } .checkbox-image-group .fieldset-children .label-image { display: block; background: #fff; position: relative; } .checkbox-image-group .fieldset-children .label-image::before { display: block; content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 26 26'%3E%3Cpath fill='%23fff' stroke='%23222' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' stroke-width='2' d='M21 5h-16v16h16v-16z'%3E%3C/path%3E%3Cpath fill='none' stroke='%23fff' stroke-linejoin='miter' stroke-linecap='butt' stroke-miterlimit='4' stroke-width='1' d='M22.5 3.5h-19v19h19v-19z'%3E%3C/path%3E%3C/svg%3E"); width: 26px; height: 26px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .checkbox-image-group .fieldset-children .checkbox-img { border: solid 0.1em #ccc; box-sizing: border-box; display: block; padding: 0.1em; } .checkbox-image-group.layout-row .checkbox-wrap { flex: 1; } .checkbox-image-group.layout-row .checkbox-element { top: 0; left: 50%; transform-origin: center center; transform: scale(2) translateX(-25%) translateY(50%); } .checkbox-image-group.layout-row .checkbox-label { row-gap: 8px; flex-direction: column; text-align: center; } .checkbox-image-group.layout-row .label-image { margin: 0 auto; } .checkbox-image-group.layout-col .fieldset-children { column-gap: 8px; row-gap: 16px; } .checkbox-image-group.layout-col .checkbox-wrap { width: 100%; } .checkbox-image-group.layout-col .checkbox-element { top: 50%; left: 0; transform-origin: center center; transform: scale(2) translateX(50%) translateY(-25%); } .checkbox-image-group.layout-col .checkbox-label { column-gap: 8px; align-items: center; } .select-wrap { display: block; font-size: 10px; } .select-wrap.form-error .select-element, .select-wrap.form-error .text-area-element, .select-wrap.form-error .text-element { box-shadow: none; border-color: #e00e00; color: #e00e00; } .select-wrap.form-error .form-error-message { display: flex; column-gap: 8px; margin: 8px 0 0 0; color: #e00e00; } .select-wrap.form-error .form-error-message .error-icon .svg-icon-error { width: 1.6em; height: 1.6em; margin: 0.2em 0 0 0; color: inherit; } .select-wrap.form-error .form-error-message .error-text { font-size: 1.4em; line-height: 1.4285714; } .select-wrap .select-label { display: block; margin: 0 0 8px 0; color: #222; font-family: var(--webfont-primary, sans-serif); font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; } .select-wrap .select-label .required { margin-left: 4px; color: #666; font-size: 12px; font-weight: 400; } .select-wrap .select-label .optional { margin-left: 4px; color: #666; font-size: 12px; font-weight: 400; } .select-wrap .select-element { box-sizing: border-box; display: inline-block; width: 100%; border: solid 1px #666; border-radius: 0; box-shadow: none; outline: 0; background: #fff; color: #222; font-family: var(--webfont-primary, sans-serif); font-style: normal; font-weight: normal; line-height: normal; transition: border linear .2s; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23222' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 16px) center; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .select-wrap .select-element:focus { box-shadow: none; outline: solid 1px; outline-offset: -3px; } .select-wrap .select-element.disabled, .select-wrap .select-element[disabled], .select-wrap .select-element[aria-disabled="true"] { border-color: #ccc; background-color: #f3f3f3; color: #ccc; } .select-wrap .select-element::-ms-expand { display: none; } .select-wrap .select-element:disabled { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23ccc' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } .select-wrap.form-error .select-element { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23b00' stroke-width='2.8' stroke-miterlimit='10' stroke-linecap='square' stroke-linejoin='miter' d='M2.667 9.333l13.333 13.333 13.333-13.333'%3E%3C/path%3E%3C/svg%3E"); } .select-wrap.select-xl .select-element { height: 48px; padding: 5px 16px; padding-right: 50px; font-size: 16px; background-size: 17px 17px; } .select-wrap.select-lg .select-element { height: 40px; padding: 5px 16px; padding-right: 48px; font-size: 16px; background-size: 17px 17px; } .select-wrap.select-md .select-element { height: 36px; padding: 5px 16px; padding-right: 48px; font-size: 14px; background-size: 15px 15px; } .select-wrap.select-sm .select-element { height: 32px; padding: 5px 16px; padding-right: 45px; font-size: 12px; background-size: 15px 15px; } .select-wrap.select-xs .select-element { height: 26px; padding: 5px 16px; padding-right: 42px; font-size: 12px; background-size: 15px 15px; } .text-area-wrap { display: block; font-size: 10px; } .text-area-wrap.form-error .select-element, .text-area-wrap.form-error .text-area-element, .text-area-wrap.form-error .text-element { box-shadow: none; border-color: #e00e00; color: #e00e00; } .text-area-wrap.form-error .form-error-message { display: flex; column-gap: 8px; margin: 8px 0 0 0; color: #e00e00; } .text-area-wrap.form-error .form-error-message .error-icon .svg-icon-error { width: 1.6em; height: 1.6em; margin: 0.2em 0 0 0; color: inherit; } .text-area-wrap.form-error .form-error-message .error-text { font-size: 1.4em; line-height: 1.4285714; } .text-area-wrap .text-area-label { display: block; margin: 0 0 8px 0; color: #222; font-family: var(--webfont-primary, sans-serif); font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; } .text-area-wrap .text-area-label .required { margin-left: 4px; color: #666; font-size: 12px; font-weight: 400; } .text-area-wrap .text-area-label .optional { margin-left: 4px; color: #666; font-size: 12px; font-weight: 400; } .text-area-wrap .text-area-element { box-sizing: border-box; display: inline-block; width: 100%; border: solid 1px #666; border-radius: 0; box-shadow: none; outline: 0; background: #fff; color: #222; font-family: var(--webfont-primary, sans-serif); font-style: normal; font-weight: normal; line-height: normal; transition: border linear .2s; min-height: 4em; } .text-area-wrap .text-area-element:focus { box-shadow: none; outline: solid 1px; outline-offset: -3px; } .text-area-wrap .text-area-element.disabled, .text-area-wrap .text-area-element[disabled], .text-area-wrap .text-area-element[aria-disabled="true"] { border-color: #ccc; background-color: #f3f3f3; color: #ccc; } .text-area-wrap.textarea-xl .text-area-element { padding: 16px; font-size: 16px; } .text-area-wrap.textarea-lg .text-area-element { padding: 16px; font-size: 16px; } .text-area-wrap.textarea-md .text-area-element { padding: 16px; font-size: 14px; } .text-area-wrap.textarea-sm .text-area-element { padding: 16px; font-size: 12px; } .text-area-wrap.textarea-xs .text-area-element { padding: 16px; font-size: 12px; } .text-wrap { display: block; font-size: 10px; } .text-wrap.form-error .select-element, .text-wrap.form-error .text-area-element, .text-wrap.form-error .text-element { box-shadow: none; border-color: #e00e00; color: #e00e00; } .text-wrap.form-error .form-error-message { display: flex; column-gap: 8px; margin: 8px 0 0 0; color: #e00e00; } .text-wrap.form-error .form-error-message .error-icon .svg-icon-error { width: 1.6em; height: 1.6em; margin: 0.2em 0 0 0; color: inherit; } .text-wrap.form-error .form-error-message .error-text { font-size: 1.4em; line-height: 1.4285714; } .text-wrap .text-label { display: block; margin: 0 0 8px 0; color: #222; font-family: var(--webfont-primary, sans-serif); font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; } .text-wrap .text-label .required { margin-left: 4px; color: #666; font-size: 12px; font-weight: 400; } .text-wrap .text-label .optional { margin-left: 4px; color: #666; font-size: 12px; font-weight: 400; } .text-wrap .text-element { box-sizing: border-box; display: inline-block; width: 100%; border: solid 1px #666; border-radius: 0; box-shadow: none; outline: 0; background: #fff; color: #222; font-family: var(--webfont-primary, sans-serif); font-style: normal; font-weight: normal; line-height: normal; transition: border linear .2s; } .text-wrap .text-element:focus { box-shadow: none; outline: solid 1px; outline-offset: -3px; } .text-wrap .text-element.disabled, .text-wrap .text-element[disabled], .text-wrap .text-element[aria-disabled="true"] { border-color: #ccc; background-color: #f3f3f3; color: #ccc; } .text-wrap.input-xl .text-element { height: 48px; padding: 5px 16px; font-size: 16px; } .text-wrap.input-lg .text-element { height: 40px; padding: 5px 16px; font-size: 16px; } .text-wrap.input-md .text-element { height: 36px; padding: 5px 16px; font-size: 14px; } .text-wrap.input-sm .text-element { height: 32px; padding: 5px 16px; font-size: 12px; } .text-wrap.input-xs .text-element { height: 26px; padding: 5px 16px; font-size: 12px; } /* buttons /*-------------------------------------------------------------------------------*/ /* #region default buttons ----------------------------------------------------- */ .btn { font-size: 1.2em; line-height: 1.8em; padding: .35em 1.5em; margin: 0 .5em 1em 0; color: #222; text-shadow: none; border-color: #e75913; *background-color: #ececec; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); box-sizing: border-box; color: #222; } .btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { color: #222; text-shadow: none; border-color: #e75913; outline: none; background-position: 0; *background-color: #fff; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ } .btn:active, .btn.active { background-color: lightgray \9; } .btn:hover { color: #222; } .btn:focus { box-shadow: 0 0 8px rgba(82, 168, 236, 0.6); } .btn-primary { color: #fff; text-shadow: 0 1px 0 #676767; border-color: #222; *background-color: #222; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); color: #222; box-sizing: border-box; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { color: #fff; text-shadow: 0 1px 0 #676767; border-color: #222; outline: none; background-position: 0; *background-color: #ff722d; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ } .btn-primary:active, .btn-primary.active { background-color: #090909 \9; } .btn-primary:hover { color: #fff; } .btn-primary:focus { box-shadow: 0 0 8px rgba(82, 168, 236, 0.6); } .btn-inverse { color: #222; text-shadow: none; border-color: #bbb; *background-color: #fff; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] { color: #222; text-shadow: none; border-color: #bbb; outline: none; background-position: 0; *background-color: #fff; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ } .btn-inverse:active, .btn-inverse.active { background-color: #e6e6e6 \9; } .btn-inverse:hover { color: #222; } .btn-inverse-small { padding: .4em 1em; color: #222; text-shadow: none; border-color: #222; *background-color: #fff; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .btn-inverse-small:hover, .btn-inverse-small:focus, .btn-inverse-small:active, .btn-inverse-small.active, .btn-inverse-small.disabled, .btn-inverse-small[disabled] { color: #222; text-shadow: none; border-color: #222; outline: none; background-position: 0; *background-color: #fff; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ } .btn-inverse-small:active, .btn-inverse-small.active { background-color: #e6e6e6 \9; } .btn-inverse-small:hover { color: #222; } /* #endregion default buttons -------------------------------------------------- */ .btn-primary-small { font-size: 1.1em; padding: .35em .5em; color: #fff; text-shadow: 0 1px 0 #676767; border-color: #222; *background-color: #222; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .btn-primary-small:hover, .btn-primary-small:focus, .btn-primary-small:active, .btn-primary-small.active, .btn-primary-small.disabled, .btn-primary-small[disabled] { color: #fff; text-shadow: 0 1px 0 #676767; border-color: #222; outline: none; background-position: 0; *background-color: #ff722d; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ } .btn-primary-small:active, .btn-primary-small.active { background-color: #090909 \9; } .btn-primary-small:hover { color: #fff; } .btn-success { color: #fff; text-shadow: none; border-color: #e00e00; *background-color: #e00e00; filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] { color: #fff; text-shadow: none; border-color: #e00e00; outline: none; background-position: 0; *background-color: #e00e00; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ } .btn-success:active, .btn-success.active { background-color: #ad0b00 \9; } .btn-success:hover { color: #fff; } .btn-success.btn-small { padding: .35em .75em; } .btn-primary-outline { border: solid 1px #e75913; background: #fff; color: #000; text-shadow: none; } .btn-primary-outline:hover, .btn-primary-outline:focus { outline: dotted 1px #222; outline-offset: -2px; } .btn-group-product { display: block; } .btn-group-product .btn { border: solid 1px #e75913; background: #fff; color: #000; text-shadow: none; border-color: #e75913; /* #ccc */ margin: 0; padding: 0.6em 0; } .btn-group-product .btn:hover, .btn-group-product .btn:focus { outline: dotted 1px #222; outline-offset: -2px; } .btn-group-product .btn i { float: left; margin: 0.1em 1.1em 0 1.7em; width: 1.5572em; font-size: 1.2em; } .btn-group-product .btn span { float: left; line-height: 1.8; } .btn-group-product div .btn-add-to-registry, .btn-group-product .btn-add-to-favorites { border-bottom-color: transparent; width: 100%; } .btn-group-product.btn-group-vertical .btn, .btn-group-product.btn-group-vertical .btn:first-child:not(:last-child) { border-radius: 0; } .breadcrumb-back { padding: 1em 1.3em .5em; height: 2em; color: #666; font-size: .9em; display: block; } .breadcrumb-back + h1 { padding-top: .25em; } .breadcrumb-back i { display: inline-block; left: -.25em; top: .5em; width: 1em; height: 1em; padding: .5em; background: #333; text-align: center; border-radius: 50%; font-size: .9em; color: #fff; } .breadcrumb-back:hover, .breadcrumb-back:focus, .breadcrumb-back:active { color: #666; outline: none; text-decoration: none; } .nav-back { padding: .75em; position: relative; background: #444; background: linear-gradient(to bottom, #545454 0%, #545454 90%, #474747 100%); } .nav-back a { display: block; color: #fff; font-weight: bold; font-size: 1.2em; } .nav-back a:hover { color: #d8d8d8; } .nav-back a i { width: 1em; height: 1em; padding: .3em; color: #444; background: #fff; border: 0.2em solid #999; margin-right: .3em; text-align: center; border-radius: 50%; } .circle-btn { border-radius: 50%; width: 2em; height: 2em; padding: .33em; text-align: center; background-color: #333; display: inline-block; float: left; } .circle-btn .icon-chevron-left { color: #fff; font-size: 1.7em; left: -.1em; position: relative; top: .1em; } .back-msg { position: relative; top: .5em; left: .5em; color: #333; } .dialog-back { background: #6a6a6a; color: #fff; margin: 0; padding: 0 1.5em; font-weight: normal; position: relative; box-shadow: inset 0px -2px 8px 0px #333; } .dialog-back a { display: block; color: #fff; font-size: 1.2em; line-height: 1.3em; padding: .9em 0 .9em 2em; text-align: left; } .dialog-back a:hover { color: #fff; } .dialog-back a i { width: 1em; height: 1em; padding: .3em; color: #444; background: #fff; border: 0.2em solid #999; margin-right: .3em; text-align: center; border-radius: 50%; position: absolute; top: .6em; left: .65em; } #TagArea { position: absolute; bottom: 0; } /* Medallia Feedback Button */ #kampyleButtonContainer .kampyle_vertical_button.kampyle_right { z-index: 103 !important; top: calc(60% - 60px) !important; min-height: 32px !important; min-width: 120px !important; height: 32px !important; width: 120px !important; right: -45px; } #kampyleButtonContainer .kampyle_vertical_button.kampyle_right .kampyle_button { background-color: #fff !important; min-height: 32px !important; min-width: 120px !important; height: 32px !important; width: 120px !important; } #kampyleButtonContainer .kampyle_vertical_button.kampyle_right .kampyle_button-text { font-family: var(--webfont-primary, sans-serif) !important; font-size: 12px !important; font-weight: 600 !important; color: #666 !important; letter-spacing: 2.5px; transform: rotate(180deg); text-transform: uppercase; background-color: #fff; border-radius: 6px 6px 0 0; border: 1px solid #717171; line-height: 32px; } /* Medallia Feedback Button Overlay */ @media screen and (hover: hover) { [data-overlay='true'] #kampyleButtonContainer .kampyle_vertical_button { transform: translateX(calc(var(--scrollbar-width, 0) * -1)) rotate(90deg); } } /* Pinterset Pin It Button */ .pinItButton { position: absolute; background: url(/Assets/Icons/pinit6.png); font: 11px var(--webfont-primary, sans-serif); text-indent: -9999px; font-size: .01em; color: #CD1F1F; height: 20px; width: 44px; background-position: 0 -7px; } .pinItButton:hover { background-position: 0 -28px; } .pinItButton:active { background-position: 0 -49px; } @media screen and (min-width: 768px) { .btn { margin: 0 .9em 1em 0; } .btn.disabled, .btn[disabled], .btn[aria-disabled="true"], .btn[tabindex="-1"], a.btn.disabled, a.btn[disabled], a.btn[aria-disabled="true"], a.btn[tabindex="-1"], button.btn.disabled, button.btn[disabled], button.btn[aria-disabled="true"], button.btn[tabindex="-1"], .btn-secondary.disabled, .btn-secondary[disabled], .btn-secondary[aria-disabled="true"], .btn-secondary[tabindex="-1"], a.btn-secondary.disabled, a.btn-secondary[disabled], a.btn-secondary[aria-disabled="true"], a.btn-secondary[tabindex="-1"], button.btn-secondary.disabled, button.btn-secondary[disabled], button.btn-secondary[aria-disabled="true"], button.btn-secondary[tabindex="-1"] { border-color: #ccc; background: #f3f3f3; background-image: none; color: #aaa; opacity: 1; } .btn.disabled:hover, .btn.disabled:focus, .btn[disabled]:hover, .btn[disabled]:focus, .btn[aria-disabled="true"]:hover, .btn[aria-disabled="true"]:focus, .btn[tabindex="-1"]:hover, .btn[tabindex="-1"]:focus, a.btn.disabled:hover, a.btn.disabled:focus, a.btn[disabled]:hover, a.btn[disabled]:focus, a.btn[aria-disabled="true"]:hover, a.btn[aria-disabled="true"]:focus, a.btn[tabindex="-1"]:hover, a.btn[tabindex="-1"]:focus, button.btn.disabled:hover, button.btn.disabled:focus, button.btn[disabled]:hover, button.btn[disabled]:focus, button.btn[aria-disabled="true"]:hover, button.btn[aria-disabled="true"]:focus, button.btn[tabindex="-1"]:hover, button.btn[tabindex="-1"]:focus, .btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary[disabled]:hover, .btn-secondary[disabled]:focus, .btn-secondary[aria-disabled="true"]:hover, .btn-secondary[aria-disabled="true"]:focus, .btn-secondary[tabindex="-1"]:hover, .btn-secondary[tabindex="-1"]:focus, a.btn-secondary.disabled:hover, a.btn-secondary.disabled:focus, a.btn-secondary[disabled]:hover, a.btn-secondary[disabled]:focus, a.btn-secondary[aria-disabled="true"]:hover, a.btn-secondary[aria-disabled="true"]:focus, a.btn-secondary[tabindex="-1"]:hover, a.btn-secondary[tabindex="-1"]:focus, button.btn-secondary.disabled:hover, button.btn-secondary.disabled:focus, button.btn-secondary[disabled]:hover, button.btn-secondary[disabled]:focus, button.btn-secondary[aria-disabled="true"]:hover, button.btn-secondary[aria-disabled="true"]:focus, button.btn-secondary[tabindex="-1"]:hover, button.btn-secondary[tabindex="-1"]:focus { border-color: #ccc; background: #f3f3f3; background-image: none; color: #aaa; opacity: 1; pointer-events: none; cursor: default; } .btn.disabled i, .btn.disabled svg, .btn.disabled [class*="svg-icon-"], .btn[disabled] i, .btn[disabled] svg, .btn[disabled] [class*="svg-icon-"], .btn[aria-disabled="true"] i, .btn[aria-disabled="true"] svg, .btn[aria-disabled="true"] [class*="svg-icon-"], .btn[tabindex="-1"] i, .btn[tabindex="-1"] svg, .btn[tabindex="-1"] [class*="svg-icon-"], a.btn.disabled i, a.btn.disabled svg, a.btn.disabled [class*="svg-icon-"], a.btn[disabled] i, a.btn[disabled] svg, a.btn[disabled] [class*="svg-icon-"], a.btn[aria-disabled="true"] i, a.btn[aria-disabled="true"] svg, a.btn[aria-disabled="true"] [class*="svg-icon-"], a.btn[tabindex="-1"] i, a.btn[tabindex="-1"] svg, a.btn[tabindex="-1"] [class*="svg-icon-"], button.btn.disabled i, button.btn.disabled svg, button.btn.disabled [class*="svg-icon-"], button.btn[disabled] i, button.btn[disabled] svg, button.btn[disabled] [class*="svg-icon-"], button.btn[aria-disabled="true"] i, button.btn[aria-disabled="true"] svg, button.btn[aria-disabled="true"] [class*="svg-icon-"], button.btn[tabindex="-1"] i, button.btn[tabindex="-1"] svg, button.btn[tabindex="-1"] [class*="svg-icon-"], .btn-secondary.disabled i, .btn-secondary.disabled svg, .btn-secondary.disabled [class*="svg-icon-"], .btn-secondary[disabled] i, .btn-secondary[disabled] svg, .btn-secondary[disabled] [class*="svg-icon-"], .btn-secondary[aria-disabled="true"] i, .btn-secondary[aria-disabled="true"] svg, .btn-secondary[aria-disabled="true"] [class*="svg-icon-"], .btn-secondary[tabindex="-1"] i, .btn-secondary[tabindex="-1"] svg, .btn-secondary[tabindex="-1"] [class*="svg-icon-"], a.btn-secondary.disabled i, a.btn-secondary.disabled svg, a.btn-secondary.disabled [class*="svg-icon-"], a.btn-secondary[disabled] i, a.btn-secondary[disabled] svg, a.btn-secondary[disabled] [class*="svg-icon-"], a.btn-secondary[aria-disabled="true"] i, a.btn-secondary[aria-disabled="true"] svg, a.btn-secondary[aria-disabled="true"] [class*="svg-icon-"], a.btn-secondary[tabindex="-1"] i, a.btn-secondary[tabindex="-1"] svg, a.btn-secondary[tabindex="-1"] [class*="svg-icon-"], button.btn-secondary.disabled i, button.btn-secondary.disabled svg, button.btn-secondary.disabled [class*="svg-icon-"], button.btn-secondary[disabled] i, button.btn-secondary[disabled] svg, button.btn-secondary[disabled] [class*="svg-icon-"], button.btn-secondary[aria-disabled="true"] i, button.btn-secondary[aria-disabled="true"] svg, button.btn-secondary[aria-disabled="true"] [class*="svg-icon-"], button.btn-secondary[tabindex="-1"] i, button.btn-secondary[tabindex="-1"] svg, button.btn-secondary[tabindex="-1"] [class*="svg-icon-"] { color: inherit; } } /* ====================================================================== Our Shiny New Consistent Buttons ====================================================================== */ /* Button Base */ .button { box-sizing: border-box; border: 1px solid; border-radius: 0; margin: 0 0 8px; padding: 0 20px; font-family: var(--webfont-primary, sans-serif); font-style: normal; font-weight: 600; text-align: center; text-decoration: none; text-transform: uppercase; position: relative; outline: 0; white-space: nowrap; } .button:hover, .button:focus { text-decoration: none; transition: background ease 0.3s; } /* ===== Button Color Themes ===== */ /* Primary Buttons */ .button-primary, a.button-primary { border-color: #222; background: #222; color: #fff; letter-spacing: 0.1em; } .button-primary.hover, .button-primary:hover, a.button-primary.hover, a.button-primary:hover { border-color: #000; background: #000; color: #fff; } .button-primary.focus, .button-primary:focus, a.button-primary.focus, a.button-primary:focus { border-color: #222; background: #222; color: #fff; box-shadow: none; } .button-primary.focus::before, .button-primary:focus::before, a.button-primary.focus::before, a.button-primary:focus::before { display: block; content: ""; border-color: #fff; border-width: 1px; border-radius: 0; border-style: dotted; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; } .button-primary.disabled, .button-primary[disabled], .button-primary[aria-disabled="true"], a.button-primary.disabled, a.button-primary[disabled], a.button-primary[aria-disabled="true"] { border-color: #ccc; background: #ccc; color: #fff; cursor: default; } .button-primary.disabled.hover, .button-primary.disabled:hover, .button-primary[disabled].hover, .button-primary[disabled]:hover, .button-primary[aria-disabled="true"].hover, .button-primary[aria-disabled="true"]:hover, a.button-primary.disabled.hover, a.button-primary.disabled:hover, a.button-primary[disabled].hover, a.button-primary[disabled]:hover, a.button-primary[aria-disabled="true"].hover, a.button-primary[aria-disabled="true"]:hover { border-color: #ccc; background: #ccc; color: #fff; } .button-primary.disabled.focus, .button-primary.disabled:focus, .button-primary[disabled].focus, .button-primary[disabled]:focus, .button-primary[aria-disabled="true"].focus, .button-primary[aria-disabled="true"]:focus, a.button-primary.disabled.focus, a.button-primary.disabled:focus, a.button-primary[disabled].focus, a.button-primary[disabled]:focus, a.button-primary[aria-disabled="true"].focus, a.button-primary[aria-disabled="true"]:focus { border-color: #ccc; background: #ccc; color: #fff; box-shadow: none; } .button-primary.disabled.focus::before, .button-primary.disabled:focus::before, .button-primary[disabled].focus::before, .button-primary[disabled]:focus::before, .button-primary[aria-disabled="true"].focus::before, .button-primary[aria-disabled="true"]:focus::before, a.button-primary.disabled.focus::before, a.button-primary.disabled:focus::before, a.button-primary[disabled].focus::before, a.button-primary[disabled]:focus::before, a.button-primary[aria-disabled="true"].focus::before, a.button-primary[aria-disabled="true"]:focus::before { display: block; content: ""; border-color: #fff; border-width: 1px; border-radius: 0; border-style: dotted; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; } .button-primary.disabled i, .button-primary.disabled svg, .button-primary.disabled [class*="svg-icon-"], .button-primary[disabled] i, .button-primary[disabled] svg, .button-primary[disabled] [class*="svg-icon-"], .button-primary[aria-disabled="true"] i, .button-primary[aria-disabled="true"] svg, .button-primary[aria-disabled="true"] [class*="svg-icon-"], a.button-primary.disabled i, a.button-primary.disabled svg, a.button-primary.disabled [class*="svg-icon-"], a.button-primary[disabled] i, a.button-primary[disabled] svg, a.button-primary[disabled] [class*="svg-icon-"], a.button-primary[aria-disabled="true"] i, a.button-primary[aria-disabled="true"] svg, a.button-primary[aria-disabled="true"] [class*="svg-icon-"] { opacity: 0.3; } /* Secondary Buttons */ .button-secondary, a.button-secondary { border-color: #717171; background: #fff; color: #222; letter-spacing: 0.1em; } .button-secondary.hover, .button-secondary:hover, a.button-secondary.hover, a.button-secondary:hover { border-color: #717171; background: #f3f3f3; color: #222; } .button-secondary.focus, .button-secondary:focus, a.button-secondary.focus, a.button-secondary:focus { border-color: #717171; background: #fff; color: #222; box-shadow: none; } .button-secondary.focus::before, .button-secondary:focus::before, a.button-secondary.focus::before, a.button-secondary:focus::before { display: block; content: ""; border-color: #717171; border-width: 1px; border-radius: 0; border-style: dotted; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; } .button-secondary.disabled, .button-secondary[disabled], .button-secondary[aria-disabled="true"], a.button-secondary.disabled, a.button-secondary[disabled], a.button-secondary[aria-disabled="true"] { border-color: #f3f3f3; background: #f3f3f3; color: #ccc; cursor: default; pointer-events: none; } .button-secondary.disabled.hover, .button-secondary.disabled:hover, .button-secondary[disabled].hover, .button-secondary[disabled]:hover, .button-secondary[aria-disabled="true"].hover, .button-secondary[aria-disabled="true"]:hover, a.button-secondary.disabled.hover, a.button-secondary.disabled:hover, a.button-secondary[disabled].hover, a.button-secondary[disabled]:hover, a.button-secondary[aria-disabled="true"].hover, a.button-secondary[aria-disabled="true"]:hover { border-color: #f3f3f3; background: #f3f3f3; color: #ccc; } .button-secondary.disabled.focus, .button-secondary.disabled:focus, .button-secondary[disabled].focus, .button-secondary[disabled]:focus, .button-secondary[aria-disabled="true"].focus, .button-secondary[aria-disabled="true"]:focus, a.button-secondary.disabled.focus, a.button-secondary.disabled:focus, a.button-secondary[disabled].focus, a.button-secondary[disabled]:focus, a.button-secondary[aria-disabled="true"].focus, a.button-secondary[aria-disabled="true"]:focus { border-color: #f3f3f3; background: #f3f3f3; color: #ccc; box-shadow: none; } .button-secondary.disabled.focus::before, .button-secondary.disabled:focus::before, .button-secondary[disabled].focus::before, .button-secondary[disabled]:focus::before, .button-secondary[aria-disabled="true"].focus::before, .button-secondary[aria-disabled="true"]:focus::before, a.button-secondary.disabled.focus::before, a.button-secondary.disabled:focus::before, a.button-secondary[disabled].focus::before, a.button-secondary[disabled]:focus::before, a.button-secondary[aria-disabled="true"].focus::before, a.button-secondary[aria-disabled="true"]:focus::before { display: block; content: ""; border-color: #ccc; border-width: 1px; border-radius: 0; border-style: dotted; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; } .button-secondary.disabled i, .button-secondary.disabled svg, .button-secondary.disabled [class*="svg-icon-"], .button-secondary[disabled] i, .button-secondary[disabled] svg, .button-secondary[disabled] [class*="svg-icon-"], .button-secondary[aria-disabled="true"] i, .button-secondary[aria-disabled="true"] svg, .button-secondary[aria-disabled="true"] [class*="svg-icon-"], a.button-secondary.disabled i, a.button-secondary.disabled svg, a.button-secondary.disabled [class*="svg-icon-"], a.button-secondary[disabled] i, a.button-secondary[disabled] svg, a.button-secondary[disabled] [class*="svg-icon-"], a.button-secondary[aria-disabled="true"] i, a.button-secondary[aria-disabled="true"] svg, a.button-secondary[aria-disabled="true"] [class*="svg-icon-"] { opacity: 0.3; } /* Tertiary Buttons */ .button-tertiary, a.button-tertiary { border-color: #f7f7f7; background: #f7f7f7; color: #222; letter-spacing: 0; text-transform: none; } .button-tertiary.hover, .button-tertiary:hover, a.button-tertiary.hover, a.button-tertiary:hover { border-color: #f7f7f7; background: #f7f7f7; color: #222; } .button-tertiary.focus, .button-tertiary:focus, a.button-tertiary.focus, a.button-tertiary:focus { border-color: #666; background: #f7f7f7; color: #222; box-shadow: none; } .button-tertiary.focus::before, .button-tertiary:focus::before, a.button-tertiary.focus::before, a.button-tertiary:focus::before { display: block; content: ""; border-color: #666; border-width: 1px; border-radius: 0; border-style: dotted; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; } .button-tertiary.disabled, .button-tertiary[disabled], .button-tertiary[aria-disabled="true"], a.button-tertiary.disabled, a.button-tertiary[disabled], a.button-tertiary[aria-disabled="true"] { border-color: #ccc; background: #fff; color: #ccc; cursor: default; } .button-tertiary.disabled.hover, .button-tertiary.disabled:hover, .button-tertiary[disabled].hover, .button-tertiary[disabled]:hover, .button-tertiary[aria-disabled="true"].hover, .button-tertiary[aria-disabled="true"]:hover, a.button-tertiary.disabled.hover, a.button-tertiary.disabled:hover, a.button-tertiary[disabled].hover, a.button-tertiary[disabled]:hover, a.button-tertiary[aria-disabled="true"].hover, a.button-tertiary[aria-disabled="true"]:hover { border-color: #ccc; background: #fff; color: #ccc; } .button-tertiary.disabled.focus, .button-tertiary.disabled:focus, .button-tertiary[disabled].focus, .button-tertiary[disabled]:focus, .button-tertiary[aria-disabled="true"].focus, .button-tertiary[aria-disabled="true"]:focus, a.button-tertiary.disabled.focus, a.button-tertiary.disabled:focus, a.button-tertiary[disabled].focus, a.button-tertiary[disabled]:focus, a.button-tertiary[aria-disabled="true"].focus, a.button-tertiary[aria-disabled="true"]:focus { border-color: #ccc; background: #fff; color: #ccc; box-shadow: none; } .button-tertiary.disabled.focus::before, .button-tertiary.disabled:focus::before, .button-tertiary[disabled].focus::before, .button-tertiary[disabled]:focus::before, .button-tertiary[aria-disabled="true"].focus::before, .button-tertiary[aria-disabled="true"]:focus::before, a.button-tertiary.disabled.focus::before, a.button-tertiary.disabled:focus::before, a.button-tertiary[disabled].focus::before, a.button-tertiary[disabled]:focus::before, a.button-tertiary[aria-disabled="true"].focus::before, a.button-tertiary[aria-disabled="true"]:focus::before { display: block; content: ""; border-color: #ccc; border-width: 1px; border-radius: 0; border-style: dotted; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; } .button-tertiary.disabled i, .button-tertiary.disabled svg, .button-tertiary.disabled [class*="svg-icon-"], .button-tertiary[disabled] i, .button-tertiary[disabled] svg, .button-tertiary[disabled] [class*="svg-icon-"], .button-tertiary[aria-disabled="true"] i, .button-tertiary[aria-disabled="true"] svg, .button-tertiary[aria-disabled="true"] [class*="svg-icon-"], a.button-tertiary.disabled i, a.button-tertiary.disabled svg, a.button-tertiary.disabled [class*="svg-icon-"], a.button-tertiary[disabled] i, a.button-tertiary[disabled] svg, a.button-tertiary[disabled] [class*="svg-icon-"], a.button-tertiary[aria-disabled="true"] i, a.button-tertiary[aria-disabled="true"] svg, a.button-tertiary[aria-disabled="true"] [class*="svg-icon-"] { opacity: 0.3; } /* ===== Oneoff Buttons ===== */ /* Alert Buttons */ .button-alert, a.button-alert { border-color: #b00; background: #b00; color: #fff; letter-spacing: normal; } .button-alert.hover, .button-alert:hover, a.button-alert.hover, a.button-alert:hover { border-color: #A80000; background: #A80000; color: #fff; } .button-alert.focus, .button-alert:focus, a.button-alert.focus, a.button-alert:focus { border-color: #b00; background: #b00; color: #fff; box-shadow: none; } .button-alert.focus::before, .button-alert:focus::before, a.button-alert.focus::before, a.button-alert:focus::before { display: block; content: ""; border-color: #fff; border-width: 1px; border-radius: 0; border-style: dotted; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; } .button-alert.disabled, .button-alert[disabled], .button-alert[aria-disabled="true"], a.button-alert.disabled, a.button-alert[disabled], a.button-alert[aria-disabled="true"] { border-color: #caa; background: #caa; color: #eee; cursor: default; } .button-alert.disabled.hover, .button-alert.disabled:hover, .button-alert[disabled].hover, .button-alert[disabled]:hover, .button-alert[aria-disabled="true"].hover, .button-alert[aria-disabled="true"]:hover, a.button-alert.disabled.hover, a.button-alert.disabled:hover, a.button-alert[disabled].hover, a.button-alert[disabled]:hover, a.button-alert[aria-disabled="true"].hover, a.button-alert[aria-disabled="true"]:hover { border-color: #caa; background: #caa; color: #eee; } .button-alert.disabled.focus, .button-alert.disabled:focus, .button-alert[disabled].focus, .button-alert[disabled]:focus, .button-alert[aria-disabled="true"].focus, .button-alert[aria-disabled="true"]:focus, a.button-alert.disabled.focus, a.button-alert.disabled:focus, a.button-alert[disabled].focus, a.button-alert[disabled]:focus, a.button-alert[aria-disabled="true"].focus, a.button-alert[aria-disabled="true"]:focus { border-color: #caa; background: #caa; color: #eee; box-shadow: none; } .button-alert.disabled.focus::before, .button-alert.disabled:focus::before, .button-alert[disabled].focus::before, .button-alert[disabled]:focus::before, .button-alert[aria-disabled="true"].focus::before, .button-alert[aria-disabled="true"]:focus::before, a.button-alert.disabled.focus::before, a.button-alert.disabled:focus::before, a.button-alert[disabled].focus::before, a.button-alert[disabled]:focus::before, a.button-alert[aria-disabled="true"].focus::before, a.button-alert[aria-disabled="true"]:focus::before { display: block; content: ""; border-color: #fff; border-width: 1px; border-radius: 0; border-style: dotted; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; } .button-alert.disabled i, .button-alert.disabled svg, .button-alert.disabled [class*="svg-icon-"], .button-alert[disabled] i, .button-alert[disabled] svg, .button-alert[disabled] [class*="svg-icon-"], .button-alert[aria-disabled="true"] i, .button-alert[aria-disabled="true"] svg, .button-alert[aria-disabled="true"] [class*="svg-icon-"], a.button-alert.disabled i, a.button-alert.disabled svg, a.button-alert.disabled [class*="svg-icon-"], a.button-alert[disabled] i, a.button-alert[disabled] svg, a.button-alert[disabled] [class*="svg-icon-"], a.button-alert[aria-disabled="true"] i, a.button-alert[aria-disabled="true"] svg, a.button-alert[aria-disabled="true"] [class*="svg-icon-"] { opacity: 0.3; } .button-transparent { display: inline; background: none; border: 0; padding: 0; color: #222; text-align: left; text-decoration: underline; } .button-transparent:hover { text-decoration: underline; } .button-transparent:focus { outline: dotted 1px; outline-offset: 2px; text-decoration: underline; } .button-transparent:focus::before { display: none; } /* ===== Button Sizes ===== */ /* Mobile */ @media screen and (min-width: 1px) { .button { display: block; width: 100%; } /* There are fewer button sizes on Mobile. Need designer direction for which sizes unused sizes should convert to in mobile view. */ .button-xl { height: 48px; padding: 0 24px; font-size: 14px; line-height: 46px; } .button-lg { height: 40px; padding: 0 24px; font-size: 14px; line-height: 38px; } .button-md { height: 40px; padding: 0 24px; font-size: 14px; line-height: 38px; } .button-sm { height: 26px; padding: 0 12px; font-size: 12px; line-height: 24px; } .button-xs { height: 26px; padding: 0 12px; font-size: 12px; line-height: 24px; } } /* Desktop */ @media screen and (min-width: 768px) { .button { display: inline-block; width: auto; } .button-xl { height: 48px; padding: 0 24px; font-size: 14px; line-height: 46px; } .button-lg { height: 40px; padding: 0 24px; font-size: 14px; line-height: 38px; } .button-md { height: 36px; padding: 0 20px; font-size: 12px; line-height: 34px; } .button-sm { height: 32px; padding: 0 16px; font-size: 12px; line-height: 30px; } .button-xs { height: 26px; padding: 0 12px; font-size: 12px; line-height: 24px; } .button + .button { margin-left: 10px; } } /* "Adaptive" */ @media screen and (min-width: 768px) { .adaptive-layout .button { display: inline-block; width: auto; } .adaptive-layout .button-xl { height: 48px; padding: 0 24px; font-size: 14px; line-height: 46px; } .adaptive-layout .button-lg { height: 40px; padding: 0 24px; font-size: 14px; line-height: 38px; } .adaptive-layout .button-md { height: 36px; padding: 0 20px; font-size: 12px; line-height: 34px; } .adaptive-layout .button-sm { height: 32px; padding: 0 16px; font-size: 12px; line-height: 30px; } .adaptive-layout .button-xs { height: 26px; padding: 0 12px; font-size: 12px; line-height: 24px; } } /* Button Group*/ .button-group-fieldset .button-group-legend { position: absolute; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); margin: 0; padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; white-space: nowrap; } .button-group { display: flex; flex-wrap: wrap; margin: 0 -6px; float: left; width: 100%; } .button-group .button-group-item.button-group-item-double { flex-grow: 2; } .button-group .button-group-item.button-group-item-triple { flex-grow: 3; } .button-group .button-group-item.button-group-item-quad { flex-grow: 4; } .button-group .button-group-item .button-item-label { margin: 0 6px calc(6px * 2); height: auto; width: calc(100% - (6px * 2)); border-width: 1px; border-color: #ccc; background: #fff; color: #222; text-transform: none; } .button-group .button-group-item .button-item-input:checked + label.button-item-label { outline: solid 3px transparent; border-color: #222; background: #fff; color: #222; text-transform: none; } .button-group .button-group-item .button-item-input:disabled + label.button-item-label { border-width: 1px; border-color: #ccc; background: #fff; color: #ccc; text-transform: none; } .button-group .button-group-item .button-item-input:disabled + label.button-item-label::before { content: ""; border: solid 1px transparent; margin: 0 10px; width: calc(100% - 20px); position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .button-group .button-group-item .button-item-input:focus + label.button-item-label::before { display: block; content: ""; border-color: #666; border-width: 1px; border-radius: 0; border-style: dotted; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; } .button-group.button-group-100 .button-group-item { width: 100%; } .button-group.button-group-50-50 .button-group-item { width: 50%; } .button-group.button-group-50-50 .button-group-item.button-group-item-double { width: 100%; } .button-group.button-group-33-33-33 .button-group-item { width: 33.3333%; } .button-group.button-group-33-33-33 .button-group-item.button-group-item-double { width: 66.66%; } .button-group.button-group-33-33-33 .button-group-item.button-group-item-triple { width: 100%; } .button-group.button-group-25-25-25-25 .button-group-item { width: 25%; } .button-group.button-group-25-25-25-25 .button-group-item.button-group-item-double { width: 50%; } .button-group.button-group-25-25-25-25 .button-group-item.button-group-item-triple { width: 75%; } .button-group.button-group-25-25-25-25 .button-group-item.button-group-item-quad { width: 100%; } /* Button Radio Group*/ .button-radio-group .fieldset-children { display: flex; flex-wrap: wrap; margin: 0 -4px; } .button-radio-group .fieldset-children .radio-wrap { width: 50%; } .button-radio-group .fieldset-children .radio-wrap [type="radio"] ~ label { padding: 3px 12px; white-space: unset; display: flex; min-height: 40px; justify-content: center; align-items: center; background: #f0efed; margin: 0 6px calc(6px * 2); height: auto; width: calc(100% - (6px * 2)); border-style: solid; border-width: 1px; border-color: #ccc; background: #fff; color: #222; text-transform: none; } .button-radio-group .fieldset-children .radio-wrap [type="radio"] ~ label::before { display: none; } .button-radio-group .fieldset-children .radio-wrap [type="radio"]:checked + label { outline: solid 4px transparent; border-width: 2px; border-color: #222; background: #fff; color: #222; text-transform: none; } .button-radio-group .fieldset-children .radio-wrap [type="radio"]:checked + label::before { display: none; } .button-radio-group .fieldset-children .radio-wrap [type="radio"]:checked:focus + label::before { content: ''; height: auto; width: auto; border-width: 1px; } .button-radio-group .fieldset-children .radio-wrap [type="radio"]:focus + label::before { display: block; content: ""; border-color: #666; border-width: 1px; border-radius: 0; border-style: dotted; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; height: auto; width: auto; } .button-radio-group .fieldset-children .radio-wrap [type="radio"]:disabled + label { border-width: 1px; border-color: #ccc; background: #fff; color: #ccc; text-transform: none; } .button-radio-group .fieldset-children .radio-wrap [type="radio"]:disabled + label::before { content: ""; border: solid 1px transparent; margin: 0 10px; width: calc(100% - 20px); position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .button-radio-group .fieldset-children .radio-wrap [type="radio"]:disabled + label .label-text { color: #ccc; } /* === Main Navigation === */ .main-navigation .nav-main { width: 100%; position: relative; } .main-navigation .nav-main .nav-super { display: inline-block; float: left; } .main-navigation .nav-main .nav-super .nav-item { height: 15px; padding: 10px; font-size: 1.4em; display: inline-block; position: relative; cursor: pointer; } .main-navigation .nav-main .nav-super .nav-dropdown { display: none; width: 100%; max-height: 495px; padding: 20px 10px; box-sizing: border-box; background: #fff; position: absolute; top: 37px; left: 0; z-index: 100; } .main-navigation .nav-main .nav-super .nav-dropdown a.nav-category, .main-navigation .nav-main .nav-super .nav-dropdown a.nav-sub-category { box-sizing: border-box; cursor: pointer; } .main-navigation .nav-main .nav-super .nav-dropdown a.nav-category { display: block; } .main-navigation .nav-main .nav-super .nav-dropdown a.nav-sub-category { display: block; } .main-navigation .nav-main .nav-super:hover .nav-dropdown { display: block; } .navigation-breadcrumbs { box-sizing: border-box; width: 1008px; height: 40px; margin: 0; display: block; border-bottom: 1px solid #e6e7e9; background-color: #fff; padding: 0; } .navigation-breadcrumbs ul li { display: inline-block; font: normal 9px/40px var(--webfont-primary, sans-serif); height: 40px; text-transform: uppercase; color: #222; margin-right: 3px; } .navigation-breadcrumbs ul li a { color: #222; margin-right: 3px; } .navigation-breadcrumbs ul li a:hover, .navigation-breadcrumbs ul li a:focus { text-decoration: underline; } .navigation-breadcrumbs ul li:after { content: ">"; } .navigation-breadcrumbs ul li:last-of-type:after { content: ""; } .navigation-leftnav li { float: left; margin: 18px 20px 25px 15px; padding: 0; width: 163px; } .navigation-leftnav li span { font: bold 12px/16px var(--webfont-primary, sans-serif); border-bottom: 1px solid #e6e7e9; border-top: 1px solid #e6e7e9; color: #000; float: left; height: auto; width: 159px; margin: 0 0 12px; padding: 4px 2px; } .navigation-leftnav li ul li { width: 100%; margin: 0; float: left; } .navigation-leftnav li ul li a { font: normal 12px/14px var(--webfont-primary, sans-serif); color: #222; float: left; padding: 0 0 6px 0; margin: 0; height: auto; border: 0 none; width: 163px; } .navigation-leftnav li ul li .active { color: #222; font-weight: bold; border: none; padding: 0 0 6px 0; margin: 0; } /* ==== move to navigation.md.scss === */ .main-navigation .nav-main { width: 100%; position: relative; } .main-navigation .nav-main .nav-super { display: inline-block; float: left; } .main-navigation .nav-main .nav-super .nav-item { height: 15px; padding: 10px; font-size: 1.4em; display: inline-block; position: relative; cursor: pointer; } .main-navigation .nav-main .nav-super .nav-dropdown { display: none; width: 100%; max-height: 495px; padding: 20px 10px; box-sizing: border-box; background: #fff; position: absolute; top: 37px; left: 0; z-index: 100; } .main-navigation .nav-main .nav-super .nav-dropdown a.nav-category, .main-navigation .nav-main .nav-super .nav-dropdown a.nav-sub-category { box-sizing: border-box; cursor: pointer; } .main-navigation .nav-main .nav-super .nav-dropdown a.nav-category { display: block; } .main-navigation .nav-main .nav-super .nav-dropdown a.nav-sub-category { display: block; } .main-navigation .nav-main .nav-super:hover .nav-dropdown { display: block; } div.navigation-breadcrumbs { box-sizing: border-box; margin: 0; display: block; border-bottom: 1px solid #e6e7e9; background-color: #fff; padding: 0; width: 100%; } div.navigation-breadcrumbs ul li { display: inline-block; font: normal 12px/40px var(--webfont-primary, sans-serif); height: 40px; text-transform: capitalize; color: #222; margin-right: 3px; } div.navigation-breadcrumbs ul li a { color: #222; margin-right: 3px; text-transform: capitalize; } div.navigation-breadcrumbs ul li a:hover, div.navigation-breadcrumbs ul li a:focus { text-decoration: underline; } div.navigation-breadcrumbs ul li:after { content: ">"; display: inline-block; padding: 0 5px 0 8px; } div.navigation-breadcrumbs ul li:last-of-type:after { content: ""; } .navigation-leftnav li { float: left; margin: 18px 20px 25px 15px; padding: 0; width: 163px; } .navigation-leftnav li span { font: bold 12px/16px var(--webfont-primary, sans-serif); border-bottom: 1px solid #e6e7e9; border-top: 1px solid #e6e7e9; color: #000; float: left; height: auto; width: 159px; margin: 0 0 12px; padding: 4px 2px; } .navigation-leftnav li ul li { width: 100%; margin: 0; float: left; } .navigation-leftnav li ul li a { font: normal 12px/14px var(--webfont-primary, sans-serif); color: #222; float: left; padding: 0 0 6px 0; margin: 0; height: auto; border: 0 none; width: 163px; } .navigation-leftnav li ul li .active { color: #222; font-weight: bold; border: none; padding: 0 0 6px 0; margin: 0; } /* #region ======== Fade Focus Effect ========== */ .a11y-focused { outline-offset: 5px; -webkit-animation: fadeOutline 1.2s ease; -moz-animation: fadeOutline 1.2s ease; -o-animation: fadeOutline 1.2s ease; animation: fadeOutline 1.2s ease; } @-webkit-keyframes fadeOutline { 0% { outline: 1px dashed #222; } 65% { outline: 1px dashed #ccc; } 75% { outline: 1px dashed #ddd; } 100% { outline: 1px dashed #fff; } } @-moz-keyframes fadeOutline { 0% { outline: 1px dashed #222; } 65% { outline: 1px dashed #ccc; } 75% { outline: 1px dashed #ddd; } 100% { outline: 1px dashed #fff; } } @-o-keyframes fadeOutline { 0% { outline: 1px dashed #222; } 65% { outline: 1px dashed #ccc; } 75% { outline: 1px dashed #ddd; } 100% { outline: 1px dashed #fff; } } @keyframes fadeOutline { 0% { outline: 1px dashed #222; } 65% { outline: 1px dashed #ccc; } 75% { outline: 1px dashed #ddd; } 100% { outline: 1px dashed #fff; } } /* #endregion ===== Fade Focus Effect ========== */ /* Accordion Area */ .a11y-drawers { *zoom: 1; box-sizing: border-box; max-width: 100%; padding: 0; border-top: 1px solid #d8d8d8; border-bottom: 1px solid #d8d8d8; } .a11y-drawers:before, .a11y-drawers:after { display: table; content: ""; line-height: 0; } .a11y-drawers:after { clear: both; } /* Accordion Drawer Header / Toggle */ .a11y-drawers .a11y-drawer-toggle { *zoom: 1; box-sizing: border-box; border-top: solid 1px #ccc; margin: 0; padding: 11px 0; background: #fff; color: #222; } .a11y-drawers .a11y-drawer-toggle:before, .a11y-drawers .a11y-drawer-toggle:after { display: table; content: ""; line-height: 0; } .a11y-drawers .a11y-drawer-toggle:after { clear: both; } .a11y-drawers .a11y-drawer-toggle button { box-sizing: border-box; border: 0; display: block; width: 100%; padding: 14px; cursor: pointer; position: relative; background: none; text-align: left; font-weight: normal; } .a11y-drawers .a11y-drawer-toggle button:focus { outline: dotted 1px #222; outline-offset: -2px; } .a11y-drawers .a11y-drawer-toggle [aria-expanded] .web-icon-close { font-size: 0.8em; } .a11y-drawers .a11y-drawer-toggle [aria-expanded] .svg-icon-plus { height: 30px; width: 30px; } .a11y-drawers .a11y-drawer-toggle [aria-expanded] .web-icon-close:before, .a11y-drawers .a11y-drawer-toggle [aria-expanded] .svg-icon-plus { position: absolute; right: 1em; top: 50%; margin: -20px 0 0; font-size: 1.2em; -webkit-transition: .4s all ease; -moz-transition: .4s all ease; -o-transition: .4s all ease; transition: .4s all ease; } .a11y-drawers .a11y-drawer-toggle [aria-expanded] .web-icon-close:before { transform: scale(1) rotate(45deg) translateX(0) translateY(0) skewX(0deg) skewY(0deg); } .a11y-drawers .a11y-drawer-toggle [aria-expanded] .svg-icon-plus { transform: scale(1) rotate(0deg) translateX(0) translateY(0) skewX(0deg) skewY(0deg); } .a11y-drawers .a11y-drawer-toggle [aria-expanded].plus-minus .plus-minus-icon { position: absolute; right: 0; width: 36px; height: 36px; top: 50%; transform: scale(0.5) translateY(-50%); } .a11y-drawers .a11y-drawer-toggle [aria-expanded].plus-minus span { width: 36px; border: 2px solid #222; height: 0; position: absolute; left: 0; } .a11y-drawers .a11y-drawer-toggle [aria-expanded].plus-minus span:nth-child(2) { transform: matrix(0, 1, -1, 0, 0, 0); transition: 0.25s ease; } .a11y-drawers .a11y-drawer-toggle [aria-expanded="true"] .web-icon-close:before { transform: scale(1) rotate(0deg) translateX(0) translateY(0) skewX(0deg) skewY(0deg); } .a11y-drawers .a11y-drawer-toggle [aria-expanded="true"] .svg-icon-plus { transform: scale(1) rotate(45deg) translateX(0) translateY(0) skewX(0deg) skewY(0deg); } .a11y-drawers .a11y-drawer-toggle [aria-expanded="true"].plus-minus span:nth-child(2) { transition: 0.25s ease; transform: matrix(0, 0.01, -1, 0, 0, 0); } /* Accordion Drawer Panel Visibility */ .a11y-drawers .a11y-drawer-toggle + [aria-hidden] { width: 100%; overflow: hidden; display: none; } /* Accordion Drawer Panel */ .a11y-drawers .a11y-drawer-panel { *zoom: 1; padding: 0 1em 1em 1em; } .a11y-drawers .a11y-drawer-panel:before, .a11y-drawers .a11y-drawer-panel:after { display: table; content: ""; line-height: 0; } .a11y-drawers .a11y-drawer-panel:after { clear: both; } .a11y-drawers .a11y-drawer-panel p { margin: 0; padding: 0; } .a11y-drawers .a11y-drawer-panel .flyout-padding { padding: 0 40px; } .a11y-drawers .a11y-drawer-panel p + p { margin-top: 10px; } .accordion-disabled.a11y-drawer-toggle i, .accordion-disabled.a11y-drawer-toggle .svg-icon-close { display: none; } .js-loading .a11y-drawer-toggle { padding: 25px 14px; } .js-loading .a11y-drawer-panel { display: none; } @media screen and (max-width: 768px) { .js-loading [data-mobile='true'] .a11y-drawer-toggle { padding: 25px 14px; } .js-loading [data-mobile='true'] .a11y-drawer-panel { display: none; } } @media screen and (min-width: 768px) { .js-loading [data-desktop='true'] .a11y-drawer-toggle { padding: 25px 14px; } .js-loading [data-desktop='true'] .a11y-drawer-panel { display: none; } } /* slider /*-------------------------------------------------------------------------------*/ .slider.single { overflow: hidden; position: relative; display: block; padding: 0; margin: 0; border-bottom: none; } .slider.single ul { overflow: hidden; float: left; width: 100%; height: 100%; } .slider.single ul li { float: left; width: 100%; } .slider.single ul li a { box-sizing: border-box; float: left; width: 100%; } .slider.single ul li img { display: block; margin: 0 auto; max-width: 100%; /*we can't use width 100% becuase images will get sized larger than their actual size.*/ } .slider.single ul.init-state { width: 10000%; } .slider.single ul.init-state li { width: auto; } .slider.multiple { overflow: hidden; border-bottom: none; } .slider.multiple .slides { margin-top: .1em; overflow: hidden; } .slider.multiple ul.init-state { width: 10000%; } .slider.multiple ul li { width: 7.9em; float: left; } .slider.multiple ul li a { box-sizing: border-box; float: left; width: 100%; } .slider.multiple ul li a img { box-sizing: border-box; padding: 5%; } .slider.multiple ol { margin: 0; padding-bottom: .5em 0 0; } .slider.swatch p { color: #222; font-weight: bold; font-size: 1.2em; line-height: 1.3em; margin: 0 0 .3em 0; } .slider.swatch p .swatchName { font-weight: normal; } .slider.swatch p .swatchTitle { font-size: 1em; font-weight: normal; } .slider.swatch ul { display: inline-block; overflow: hidden; height: 78px; } .slider.swatch ul.init-state { width: 10000%; } .slider.swatch ul li { position: relative; float: left; height: 78px; } .slider.swatch ul li a { box-sizing: border-box; border: 0.1em solid #fff; padding: .2em; float: left; width: auto; } .slider.swatch ul li a .selectedSwatch { display: block; } .slider.swatch ul li a.selected .selectedSwatch { margin: -35px 0 0 13px; display: block; } .slider.swatch ul li span.reg, .slider.swatch ul li span { float: left; clear: both; } .slider.swatch ul li em { display: none; white-space: nowrap; font-style: normal; padding: .25em; color: #999; position: absolute; top: 3.8em; } .slider.swatch ul li.first em { display: block; } .slider.swatch ul li.selected a { border: 0.1em solid #222; } .slider ol { list-style-type: none; text-align: center; padding: 0; margin: 0; height: 1.5em; } .slider ol li { display: inline-block; padding: .4em; } .slider ol li a { border-radius: 50%; width: .6em; height: .6em; background: #999; display: block; text-indent: -9999px; cursor: pointer; } .slider ol li a:hover { background: #222; } .slider ol li a.flex-active { background: #222; cursor: default; } /* tabs /*-------------------------------------------------------------------------------*/ .tabs { width: 100%; margin-bottom: 1em; border-top: 0.1em solid #d8d8d8; } .tabs li { width: 50%; float: left; } .tabs li a { text-align: center; display: block; padding: 1em 0; text-transform: uppercase; border-right: 0.1em solid #d8d8d8; border-bottom: 0.1em solid #d8d8d8; background: #fff; } .tabs li a.active { background: #fff; color: #222; border-bottom: none; } .tabs li a:focus strong, .tabs li a:hover strong { text-decoration: underline; } .tabs li:last-child a { border-right: none; } #tab1, #tab2, #tab3, #tab4 { clear: both; padding: 1em 0 0; } /* loader /*-------------------------------------------------------------------------------*/ .progressbar { box-sizing: border-box; display: block; width: 100%; height: 100%; position: fixed; top: 0; z-index: 999999; background-color: rgba(34, 34, 34, 0.65); } .progressbar.jsLoading-cart, .progressbar.checkout-loading-indicator { display: none; } .progressbar.cart-loading-indicator { display: none; } .progressbar.mobile-loader-header { display: none; background-color: rgba(0, 0, 0, 0.355) !important; } .progressbar.mobile-loader-header .mobile-loader { position: relative; width: 62px; height: 62px; background: #000; display: inline-block; opacity: 82%; display: flex; justify-content: center; align-items: center; border-radius: 13px; } .progressbar.mobile-loader-header .mobile-loader div { width: 8%; height: 20%; background: #c2c2ca; position: absolute; opacity: 0; -webkit-border-radius: 50px; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); -webkit-animation: fade 1s linear infinite; } @-webkit-keyframes fade { from { opacity: 1; } to { opacity: 0.25; } } .progressbar.mobile-loader-header .mobile-loader .bar1 { -webkit-transform: rotate(0deg) translate(0, -110%); -webkit-animation-delay: 0s; } .progressbar.mobile-loader-header .mobile-loader .bar2 { -webkit-transform: rotate(45deg) translate(0, -110%); -webkit-animation-delay: -0.9167s; } .progressbar.mobile-loader-header .mobile-loader .bar3 { -webkit-transform: rotate(90deg) translate(0, -110%); -webkit-animation-delay: -0.833s; } .progressbar.mobile-loader-header .mobile-loader .bar4 { -webkit-transform: rotate(135deg) translate(0, -110%); -webkit-animation-delay: -0.7497s; } .progressbar.mobile-loader-header .mobile-loader .bar5 { -webkit-transform: rotate(180deg) translate(0, -110%); -webkit-animation-delay: -0.667s; } .progressbar.mobile-loader-header .mobile-loader .bar6 { -webkit-transform: rotate(225deg) translate(0, -110%); -webkit-animation-delay: -0.5837s; } .progressbar.mobile-loader-header .mobile-loader .bar7 { -webkit-transform: rotate(270deg) translate(0, -110%); -webkit-animation-delay: -0.5s; } .progressbar.mobile-loader-header .mobile-loader .bar8 { -webkit-transform: rotate(315deg) translate(0, -110%); -webkit-animation-delay: -0.4167s; } .header-progressbar { position: absolute; z-index: 999999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(34, 34, 34, 0.65); } .module-loader { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .module-loader .module-loader-image { height: 48px; width: 48px; transform: translate(-50%, -50%); -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } .loader-alignment { left: 0; vertical-align: middle; text-align: center; height: 100%; } /* slide open /*-------------------------------------------------------------------------------*/ .slide-open { background: #fff; border-top: 0.1em solid #d8d8d8; border-bottom: 0.1em solid #d8d8d8; margin-top: -1px; } .slide-open.active { background: #f7f7f7; } .slide-open .slide-panel { display: none; clear: both; padding: 0em 1.3em 1em; } .slide-open .slide-panel .inline { margin-right: .5em; } .slide-open .slide-panel.active { display: block; } .slide-open .slide-panel .panel-copy ul { font-size: 1.1em; line-height: 1.4em; margin: 0 0 1em .5em; } .slide-open .slide-panel .panel-copy ul li { clear: both; list-style-type: disc; margin: 0 0 0 1em; } .slide-open .slide-btn { color: #222; display: block; position: relative; padding: 1em 1.3em; cursor: pointer; } .slide-open .slide-btn h2, .slide-open .slide-btn h3, .slide-open .slide-btn span { font-size: 1.3em; line-height: 1.3em; margin: 0; font-weight: normal; padding: 0; } .slide-open .slide-btn h2, .slide-open .slide-btn h3, .slide-open .slide-btn address { width: 94%; } .slide-open .slide-btn span { color: #222; font-size: 1.1em; } .slide-open .slide-btn i { font-size: 1.3em; position: absolute; right: 1em; top: 50%; margin: -.4em 0 0; color: #999; -webkit-transition: 0.4s all ease; -moz-transition: 0.4s all ease; -o-transition: 0.4s all ease; transition: 0.4s all ease; } .slide-open .slide-btn.active { color: #333; } .slide-open .slide-btn.active i { -webkit-transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -moz-transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(45deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); } .slide-open-static { background: #fff; padding: 1em 1.3em; } .slide-open-static h3 { font-size: 1.6em; color: #222; } .slide-open-static.active { background: #f2f2f2; } .slide-open-static.top { border-top: 0.1em solid #d8d8d8; } .slide-open-static .slide-panel-static { display: block; margin-top: .75em; } .slide-open-static .slide-panel-static .panel-copy { margin-top: 1em; } /* action block /*-------------------------------------------------------------------------------*/ .action-block { background: #fff; border-top: 0.1em solid #d8d8d8; border-bottom: 0.1em solid #d8d8d8; margin: -0.1em 0 0; padding: 0; clear: both; position: relative; } .action-block .AmericanExpress, .action-block .Amex, .action-block .CoBrandMasterCard, .action-block .PLCCSynchrony, .action-block .Crate, .action-block .Discover, .action-block .MasterCard, .action-block .PayPal, .action-block .Visa { display: block; margin: 0; padding: 0 0 0 4em; line-height: 17px; font-size: 13px; color: #222; min-height: 32px; box-sizing: border-box; } .action-block .AmericanExpress, .action-block .Amex { background: url(//images.crateandbarrel.com/is/image/Crate/cc_americanExpressSmall?fmt=png-alpha) 0 0.35em no-repeat; } .action-block .PLCCSynchrony { background: url(//images.crateandbarrel.com/is/image/Crate/cc_crateSmall?fmt=png-alpha) 0 0.35em no-repeat; } .action-block .CoBrandMasterCard { background: url(//images.crateandbarrel.com/is/image/Crate/cc_MasterCardSmall?fmt=png-alpha) 0 0.35em no-repeat; } .action-block .Crate { background: url(//images.crateandbarrel.com/is/image/Crate/cc_crateSmall?fmt=png-alpha) 0 0.35em no-repeat; } .action-block .Discover { background: url(//images.crateandbarrel.com/is/image/Crate/cc_discoverSmall?fmt=png-alpha) 0 0.35em no-repeat; } .action-block .MasterCard { background: url(//images.crateandbarrel.com/is/image/Crate/cc_MasterCardSmall?fmt=png-alpha) 0 0.35em no-repeat; } .action-block .PayPal { background: url(//images.crateandbarrel.com/is/image/Crate/cc_paypalSmall?fmt=png-alpha) 0 0.35em no-repeat; } .action-block .Visa { background: url(//images.crateandbarrel.com/is/image/Crate/cc_visaSmall?fmt=png-alpha) 0 0.35em no-repeat; } .action-block .AmericanExpress, .action-block .Amex, .action-block .Crate, .action-block .CoBrandMasterCard, .action-block .PLCCSynchrony, .action-block .Discover, .action-block .MasterCard, .action-block .PayPal, .action-block .Visa { width: 90%; margin: 0 0 0 2em; min-height: 32px; } .action-block a { padding: 1em 1.3em; display: block; position: relative; } .action-block a h2 { font-size: 1.3em; font-weight: normal; line-height: 1.3em; margin: 0; padding: 0; width: 90%; } .action-block a h3 { font-size: 1.2em; width: 90%; } .action-block a h3.pickup-faq { margin: 0 0 0.1em; } .action-block a .review { font-size: 1.2em; } .action-block a .edit { position: absolute; top: 0; right: 0; text-transform: uppercase; } .action-block a strong, .action-block a em { color: #222; margin: 0; } .action-block a .success { line-height: 1.3em; } .action-block a .gift-registry { line-height: 1.43em; font-size: 0.975em; margin: 0; color: #e00e00; } .action-block a.edit { position: absolute; right: 1.3em; top: 1em; } .action-block .no-link { padding: 1em 1.3em; display: block; position: relative; max-width: 100%; box-sizing: border-box; } .action-block .no-link .address { font-weight: normal; } .action-block .no-link .phone, .action-block .no-link .ship-instead { padding: 0; } .action-block .no-link .ship-instead { position: absolute; right: 1.3em; bottom: 1em; } .action-block .no-link .ship-instead { float: right; } .action-block .no-link .edit { position: absolute; right: 1.3em; top: 1em; padding: 0; } .action-block .no-link .edit:focus, .action-block .no-link .edit:hover { text-decoration: underline; } .action-block h3 { color: #222; margin: 0 0 0.6em; } .action-block i { font-size: 1.3em; position: absolute; right: 0; top: 50%; margin: -0.4em 1em 0; color: #999; } .action-block .icon-ok { margin: -0.5em 0 0 1em; left: 0; color: #222; } .action-block strong, .action-block em, .action-block span, .action-block .title, .action-block .message { max-width: 90%; display: block; font-style: normal; } .action-block .message { margin: 0; color: #222; } .action-block .title { font-size: 1.2em; font-weight: bold; margin: 0 0 0.6em; color: #222; } .action-block .address { color: #222; display: block; font-size: 0.975em; } .action-block .new-card { display: block; font-weight: bold; height: 2.6em; line-height: 2.6em; } .action-block .review { color: #222; } .action-block.icon-angle-right, .action-block.icon-chevron-right, .action-block.icon-plus { float: right; color: #999; } .action-block.no-link i { margin: -0.5em 1.2em 0 0; } .action-block.no-link:last-child { margin: 0 -1.3em -1em; } /* Selection Block (used for Saved Payments and other blocks that don't slide open or launch a pop up) /*-------------------------------------------------------------------------------*/ .selection-block { background: #fff; border-top: 0.1em solid #d8d8d8; border-bottom: 0.1em solid #d8d8d8; margin: -.1em 0 0; padding: 0; clear: both; position: relative; } .selection-block.selected { background: #eee; box-shadow: inset 0px -2px 8px 0px #d5d5d5; } .selection-block a, .selection-block .no-link { display: block; position: relative; padding: 1em 1.3em; height: auto; line-height: 2.7em; } .selection-block a:hover .icon-ok, .selection-block .no-link:hover .icon-ok { color: #222; } .selection-block i { font-size: 1.4em; float: right; margin: -.5em 1em 0 0; position: absolute; right: 0; top: 50%; } .selection-block .icon-chevron-right { color: #999; } .selection-block .AmericanExpress, .selection-block .Amex, .selection-block .CoBrandMasterCard, .selection-block .PLCCSynchrony, .selection-block .Crate, .selection-block .Discover, .selection-block .MasterCard, .selection-block .PayPal, .selection-block .Visa { display: block; margin: 0; padding: 0 0 0 4em; line-height: 17px; font-size: 13px; color: #222; min-height: 32px; box-sizing: border-box; } .selection-block .AmericanExpress, .selection-block .Amex { background: url(//images.crateandbarrel.com/is/image/Crate/cc_americanExpressSmall?fmt=png-alpha) 0 0.35em no-repeat; } .selection-block .PLCCSynchrony { background: url(//images.crateandbarrel.com/is/image/Crate/cc_crateSmall?fmt=png-alpha) 0 0.35em no-repeat; } .selection-block .CoBrandMasterCard { background: url(//images.crateandbarrel.com/is/image/Crate/cc_MasterCardSmall?fmt=png-alpha) 0 0.35em no-repeat; } .selection-block .Crate { background: url(//images.crateandbarrel.com/is/image/Crate/cc_crateSmall?fmt=png-alpha) 0 0.35em no-repeat; } .selection-block .Discover { background: url(//images.crateandbarrel.com/is/image/Crate/cc_discoverSmall?fmt=png-alpha) 0 0.35em no-repeat; } .selection-block .MasterCard { background: url(//images.crateandbarrel.com/is/image/Crate/cc_MasterCardSmall?fmt=png-alpha) 0 0.35em no-repeat; } .selection-block .PayPal { background: url(//images.crateandbarrel.com/is/image/Crate/cc_paypalSmall?fmt=png-alpha) 0 0.35em no-repeat; } .selection-block .Visa { background: url(//images.crateandbarrel.com/is/image/Crate/cc_visaSmall?fmt=png-alpha) 0 0.35em no-repeat; } .selection-block .text { color: #666; display: block; font-size: 1.1em; line-height: 1.2em; height: auto; margin: 0; width: 90%; } .selection-block .text em, .selection-block .text strong { display: block; font-size: 0.95em; line-height: 1.35em; } .selection-block .text em { font-style: normal; } .selection-block .selected-text { color: #222; display: block; font-size: 1.1em; line-height: 1.2em; height: auto; margin: 0; width: 90%; } .selection-block .selected-text em, .selection-block .selected-text strong { display: block; font-size: 0.95em; line-height: 1.35em; } .selection-block .selected-text em { font-style: normal; } .selection-block .card-number, .selection-block .expiration-date { clear: both; float: left; font-size: 1.05em; height: 1.25em; line-height: 1.25em; margin: 0 0 0 .5em; } .selection-block .expired { margin: 0 0 0 1em; font-weight: bold; color: #e00e00; } .selection-block .delete-saved { font-size: .85em; font-weight: bold; margin: 0; text-transform: uppercase; z-index: 100; position: absolute; top: .7em; right: 1.4em; } .selection-block .primary-saved, .selection-block .expired-saved { margin: -1.6em 2.3em 0 0; float: right; font-weight: bold; font-size: .95em; } .selection-block .primary-saved .icon-ok, .selection-block .expired-saved .icon-ok { float: left; position: relative; font-size: 1em; top: .7em; } .selection-block .expired-saved { margin: -4.5em 2.3em 0 0; color: #e00e00; } /* Link Panel /*-------------------------------------------------------------------------------*/ .link-panel { background: #fff; color: #222; border-top: 0.1em solid #d8d8d8; border-bottom: 0.1em solid #d8d8d8; margin: -.1em -1.3em 0; } .link-panel a { padding: 1em 1.3em; display: block; } .link-panel a h2 { font-size: 1.3em; font-weight: normal; line-height: 1.3em; margin: 0; padding: 0; } .link-panel a h3 { font-size: 1.2em; font-weight: normal; line-height: 1.3em; margin: 0 0 .5em; } .link-panel a .store-name { font-size: 1em; line-height: 1.2em; color: #222; margin: 0; } .link-panel a .availability { font-size: 1em; line-height: 1.2em; color: #222; margin: 0; } .link-panel a .availability.success { color: #e00e00; } .link-panel a .availability.alert { color: #e00e00; } .link-panel a:hover { color: #222; } .link-panel .warehouse-pickup-text { color: #222; display: block; position: relative; padding: 1em 1.3em; } /* #region ========== Fullscreen Overlay ========================================================== */ .overlay-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; visibility: visible; margin-left: 0; transition: all .2s linear; z-index: 1000; } .overlay-dialog.js-share { height: 100%; } .overlay-dialog-header { position: fixed; top: 0; left: 0; width: 100%; padding-bottom: .8em; background: #fff; visibility: visible; margin-left: 0; transition: all .2s linear; z-index: 1000; } .overlay-hidden { visibility: hidden; margin-left: -100%; transition: all .2s linear; } /* #endregion ======= Fullscreen Overlay ========================================================== */ /* #region ========== Confirmation Layer ========================================================== */ .confirmationOverlay { background: rgba(50, 50, 50, 0.5); position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1499; display: none; } .confirmationLayer { position: fixed; z-index: 1500; text-align: center; top: 0; left: 0; box-sizing: border-box; width: 100%; padding: 1em 1.3em 0em; background-color: #fff; border-bottom: 0.1em solid #d8d8d8; display: none; } .confirmationLayer i { margin-right: .5em; } .confirmationLayer h2 { margin-bottom: 1em; } .confirmationLayer h2 label, .confirmationLayer h2 i { color: #5bb75b; font-size: 1.1em; } .confirmationLayer .expB .btn { width: 97%; margin-right: 3%; font-size: 1em; } .confirmationLayer .expC { margin-bottom: .75em; } /* #endregion ======= Confirmation Layer ========================================================== */ /* #region ========== MODAL WINDOW LAYERS - (all modal windows should be here -BS) ================ */ .dialog-close { display: none; } #popupLayerTarget .modal-window { /* New Availability Store Modal */ } #popupLayerTarget .modal-window h1 { padding-left: 1em; } #popupLayerTarget .modal-window .store-information p, #popupLayerTarget .modal-window .store-information div { display: inline-block; width: 60%; vertical-align: top; } #popupLayerTarget .modal-window .store-information .first { width: 30%; } #popupLayerTarget .modal-window .oversized-items { padding: .25em 1.3em 1em 1.3em; } #popupLayerTarget .modal-window .oversized-items .oversized-info { padding-bottom: 1em; } #popupLayerTarget .modal-window .oversized-items .oversized-info h3 { margin-bottom: .25em; } #popupLayerTarget .modal-window .oversized-items .oversized-info span { display: block; } #popupLayerTarget .modal-window .modal-content { padding: 1em 1.3em 1em; box-shadow: none; border: 0 none; border-radius: 0; /* #region ========== Store Address and Hours ========== */ /* #endregion ======= Store Address and Hours ========== */ } #popupLayerTarget .modal-window .modal-content p { font-size: 1em; line-height: 1.5em; } #popupLayerTarget .modal-window .modal-content .btn-primary { clear: both; } #popupLayerTarget .modal-window .modal-content .editLink { float: left; clear: both; margin: 1em 0 .5em; } #popupLayerTarget .modal-window .modal-content .keepLink { float: left; clear: both; margin: 0 0 .5em; } #popupLayerTarget .modal-window .modal-content .address { margin: 0; } #popupLayerTarget .modal-window .modal-content address p { font-size: 1em; line-height: 1.1em; } #popupLayerTarget .modal-window .modal-content .slide-open h2:first-of-type { display: block !important; /* but show popup titles (headlines) in drawers */ } #popupLayerTarget .modal-window .modal-content .phoneNumber { display: block; margin: 1em 0; font-size: 1em; line-height: 1.1em; } #popupLayerTarget .modal-window .modal-content .hours .title { font-weight: bold; font-size: 1em; line-height: 1.1em; } #popupLayerTarget .modal-window .modal-content .tabs, #popupLayerTarget .modal-window .modal-content .slide-open { margin: 0 -1.3em; width: auto; clear: both; } #popupLayerTarget .modal-window .modal-content .tabs.active, #popupLayerTarget .modal-window .modal-content .slide-open.active { background: #fff; } #popupLayerTarget .modal-window .modal-content .tabs .sp-items, #popupLayerTarget .modal-window .modal-content .slide-open .sp-items { margin-bottom: 1.5em; } #popupLayerTarget .modal-window .modal-content .tabs .sp-items h3, #popupLayerTarget .modal-window .modal-content .slide-open .sp-items h3 { font-size: 1em; } #popupLayerTarget .modal-window .modal-content .tabs .store-pickup-item, #popupLayerTarget .modal-window .modal-content .slide-open .store-pickup-item { width: 100%; float: left; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; margin: 0 0 -.2em; background: #fff; } #popupLayerTarget .modal-window .modal-content .tabs .store-pickup-item img, #popupLayerTarget .modal-window .modal-content .slide-open .store-pickup-item img { padding: .5em 0; } #popupLayerTarget .modal-window .modal-content .tabs .store-pickup-item .store-pickup, #popupLayerTarget .modal-window .modal-content .slide-open .store-pickup-item .store-pickup { width: 70%; } #popupLayerTarget .modal-window .modal-content .tabs .store-pickup-item .name, #popupLayerTarget .modal-window .modal-content .slide-open .store-pickup-item .name { font-size: 1em; margin: .5em 0; font-weight: bold !important; } #popupLayerTarget .modal-window .modal-content .tabs .store-pickup-item .qty, #popupLayerTarget .modal-window .modal-content .slide-open .store-pickup-item .qty { font-size: 1em; margin: .5em 0; } #popupLayerTarget .modal-window .modal-content .tabs .store-pickup-item .alert, #popupLayerTarget .modal-window .modal-content .tabs .store-pickup-item .success, #popupLayerTarget .modal-window .modal-content .slide-open .store-pickup-item .alert, #popupLayerTarget .modal-window .modal-content .slide-open .store-pickup-item .success { width: 100%; margin: 0; font-size: 1em; margin: .5em 0 1em; } #popupLayerTarget .modal-window .modal-content .tabs .store-pickup-item:last-of-type, #popupLayerTarget .modal-window .modal-content .slide-open .store-pickup-item:last-of-type { border-bottom: 0; } #popupLayerTarget .modal-window .modal-content .tabs.product-detail-panel, #popupLayerTarget .modal-window .modal-content .slide-open.product-detail-panel { margin: -.1em -1.3em -1em; } #popupLayerTarget .modal-window .modal-content .stores-nearby { border-top: 0.2em solid #d8d8d8; border-bottom: 0.2em solid #d8d8d8; margin: -.15em -1.3em 0; padding: .75em 1.3em 0; } #popupLayerTarget .modal-window .modal-content .stores-nearby .alert, #popupLayerTarget .modal-window .modal-content .stores-nearby .success { margin: 0 0 .75em; } #popupLayerTarget .modal-window .modal-content .stores-nearby .btn, #popupLayerTarget .modal-window .modal-content .store-pickup .btn { width: 12em; } #popupLayerTarget .modal-window .modal-content .review-items { margin: 0 -1.3em; } #popupLayerTarget .modal-window .modal-content .authenticityTxt { padding: .4em 0 .4em 2.3em; float: left; clear: both; background: url(//images.crateandbarrel.com/is/image/Crate/verified?fmt=png-alpha) no-repeat 0 6px; } #popupLayerTarget .modal-window .modal-content .authenticityTxt a span { clear: both; display: block; } #popupLayerTarget .modal-window .modal-content .bv-trustmarkIcon-image { display: none !important; } #popupLayerTarget .modal-window .modal-content .disclaimer { margin: 2em 0 1em; } #popupLayerTarget .modal-window .modal-content #shipping-address { margin-top: 1.5em; } #popupLayerTarget .modal-window .modal-content .shipping-method { margin: 0; } #popupLayerTarget .modal-window .modal-content .toggle-select { margin: -2em 0 2em; } #popupLayerTarget .modal-window .modal-content .toggle-select .action-block .message { font-size: 1em; } #popupLayerTarget .modal-window .modal-content .toggle-select .action-block i { top: 45%; display: none; } #popupLayerTarget .modal-window .modal-content .toggle-select .action-block .selected i { display: block; } #popupLayerTarget .modal-window .modal-content .sec-ship-to-title { margin: 1em -1em 0; } #popupLayerTarget .modal-window .modal-content #sec-ship-to-title { margin: 0 -1.3em; } #popupLayerTarget .modal-window .modal-content .action-block, #popupLayerTarget .modal-window .modal-content .selection-block { margin: -.1em -1.3em 0; } #popupLayerTarget .modal-window .modal-content #divOrderSummary { margin: 0 0 -1em; } #popupLayerTarget .modal-window .modal-content #divOrderSummary .slide-open .slide-btn h2 { font-weight: bold; } #popupLayerTarget .modal-window .modal-content .order-info { color: #222; margin: 0; float: left; clear: both; } #popupLayerTarget .modal-window .modal-content .order-info:last-of-type { margin: .5em 0 1em; } #popupLayerTarget .modal-window .modal-content.selection-layer { margin: 0; } #popupLayerTarget .modal-window .modal-content.store-pickup { margin: 0; padding: 0 1.3em; } #popupLayerTarget .modal-window .modal-content .store-information { width: 100%; border-top: 0.1em solid #d8d8d8; margin: 0 -1.3em; padding: 1em 1.3em; font-size: 1.2em; } #popupLayerTarget .modal-window .modal-content .store-information .label { font-size: 1em; line-height: 1.2em; font-weight: normal; width: 40%; color: #222; float: left; margin: 0; padding: 0; background: none; text-shadow: none; text-align: left; } #popupLayerTarget .modal-window .modal-content .store-information .info { display: block; margin-left: 40%; } #popupLayerTarget .modal-window .modal-content .store-information:last-child { margin: 0 -1.3em 2em; border-bottom: 0.1em solid #d8d8d8; } #popupLayerTarget .modal-window.modal-availability .dialog-back { background: none; box-shadow: none; } #popupLayerTarget .modal-window.modal-availability .dialog-back a { padding: .9em 0 2em 2em; } #popupLayerTarget .modal-window.modal-availability .dialog-back a i { border: none; font-size: 1.2em; top: .38em; left: initial; right: .28em; } #popupLayerTarget .modal-window.modal-availability .modal-content .stores-nearby { margin: 0 0 1em 0; padding: 0; border-bottom: 1px solid #e0e0e0; border-top: none; padding-bottom: 1em; } #popupLayerTarget .modal-window.modal-availability .modal-content .stores-nearby .store-name { font-size: 1.3em; font-weight: normal; padding: 0; } #popupLayerTarget .modal-window.modal-availability .modal-content .stores-nearby span { font-size: 1.1em; margin: 0; padding: 0 0 .4em 0; } #popupLayerTarget .modal-window.modal-availability .modal-content .stores-nearby .alert { font-size: 1.1em; line-height: 1.1em; margin: 0 0 1.5em; padding: 0; clear: both; background: none; border: none; display: block; } #popupLayerTarget .modal-window.modal-availability .modal-content .btn-primary { font-size: 1.1em; } #popupLayerTarget .modal-window.modal-availability .modal-content .address-icon { background-image: url("//images.crateandbarrel.com/is/image/Crate/icon-location?fmt=png-alpha"); background-size: 22px 24px; background-repeat: no-repeat; padding: .1em 0 1em 2em; display: block; font-size: 1.1em; color: #222; } #popupLayerTarget .modal-window.modal-availability .zip-label { padding-top: .85em; } #popupLayerTarget .modal-window.modal-availability .zip-label span { font-size: 1em; font-weight: 600; } #popupLayerTarget .modal-window.modal-availability .field-validation-error { margin-top: .5em; } /* #endregion ======= MODAL WINDOW LAYERS ========================================================= */ /* #region ========== New Crate Mobile Styles ===================================================== */ .overlay-confirmation.product-crate { height: auto; min-height: 85vh; z-index: 4000; display: block; padding-bottom: 2em; } .overlay-confirmation.product-crate.view-store-availability-dialog-hw { padding-top: 5em; } .overlay-confirmation.product-crate .btn-close { position: absolute; top: .38em; right: .66em; border: solid 1px #fff; /* so button is still visible in high-contrast mode */ padding: .3em; background: transparent; font-size: 1.4285em; } .overlay-confirmation.product-crate .btn-close i.web-icon-close { margin: 0; } .overlay-confirmation.product-crate .btn-close:focus { border-color: #222; border-style: dotted; } .overlay-confirmation.product-crate i.web-icon-close { margin: 0 -.85em 0 0; } .overlay-confirmation.product-crate i.web-icon-checkmark { float: none; color: #e00e00; font-size: 2.5em; margin-right: .3em; } .overlay-confirmation.product-crate label.confirmation-message { color: #222; display: inline-block; margin-bottom: 2em; font-weight: normal; font-size: 1.2em; position: relative; top: -.4em; } .overlay-confirmation.product-crate .uline { font-size: 1.1em; text-align: left; margin: 1.5em 0 1.2em 0; } .overlay-confirmation.product-crate .slider-partial { margin: 0 0 4em 0 !important; } .overlay-confirmation.product-crate .slider-partial a { text-align: left; } .overlay-confirmation.product-crate .col-xs-5, .overlay-confirmation.product-crate .col-xs-7 { text-align: left; margin-top: 1.5em; } .overlay-confirmation.product-crate .col-xs-5::-webkit-input-placeholder, .overlay-confirmation.product-crate .col-xs-7::-webkit-input-placeholder { text-align: center; line-height: 1.3em; } .overlay-confirmation.product-crate .col-xs-5:-moz-placeholder, .overlay-confirmation.product-crate .col-xs-7:-moz-placeholder { text-align: center; line-height: 1.3em; } .overlay-confirmation.product-crate .col-xs-5::-moz-placeholder, .overlay-confirmation.product-crate .col-xs-7::-moz-placeholder { text-align: center; line-height: 1.3em; } .overlay-confirmation.product-crate .col-xs-5:-ms-input-placeholder, .overlay-confirmation.product-crate .col-xs-7:-ms-input-placeholder { text-align: center; line-height: 1.3em; } .overlay-confirmation.product-crate .col-xs-5 span, .overlay-confirmation.product-crate .col-xs-5 .label-availability-zip, .overlay-confirmation.product-crate .col-xs-7 span, .overlay-confirmation.product-crate .col-xs-7 .label-availability-zip { font-size: 1.15em; line-height: 1.2em; font-weight: normal; } .overlay-confirmation.product-crate .display-stores-update-zip { *zoom: 1; float: right; width: 11em; margin: auto; } .overlay-confirmation.product-crate .display-stores-update-zip:before, .overlay-confirmation.product-crate .display-stores-update-zip:after { display: table; content: ""; line-height: 0; } .overlay-confirmation.product-crate .display-stores-update-zip:after { clear: both; } .overlay-confirmation.product-crate .availability-zip { box-shadow: none; border: solid 1px #717171; border-radius: 2px 0 0 2px; box-sizing: border-box; float: left; padding: 0 1em; width: 7em; height: 46px; font-weight: bold; } .overlay-confirmation.product-crate .availability-zip:focus { border-color: rgba(229, 81, 0, 0.6); } .overlay-confirmation.product-crate .availability-submit { position: relative; left: -1px; border: solid 1px #717171; border-left-color: transparent; border-radius: 0 2px 4px 0; box-sizing: border-box; float: left; padding: .3em; width: 46px; height: 46px; background: transparent; font-size: 1.4285em; } .overlay-confirmation.product-crate .availability-submit:focus { border-color: rgba(229, 81, 0, 0.6); border-left-color: rgba(229, 81, 0, 0.6); } .overlay-confirmation.product-crate .availability-submit i { width: 100%; } .overlay-confirmation.product-crate .field-validation-error { text-align: left; } .overlay-confirmation.product-crate .availability-detail { padding-top: 1em; } .overlay-confirmation.product-crate .availability-detail p.alert { margin-bottom: 10px; } .overlay-confirmation.product-crate .store-availability-layer { text-align: left; clear: both; } .overlay-confirmation.product-crate .store-availability-layer .btn { font-size: 1.1em; } .overlay-confirmation.product-crate .store-availability-layer address { margin: 0; } .overlay-confirmation.product-crate .store-availability-layer .availability-store { font-size: 1.3em; padding: 0; margin: 0; } .overlay-confirmation.product-crate .store-availability-layer .availability-city { margin: 0; padding: 0 0 .4em 0; } .overlay-confirmation.product-crate .store-availability-layer .availability-address { border-bottom: 1px solid #e0e0e0; margin-bottom: 1em; padding-bottom: 1em; } .overlay-confirmation.product-crate .store-availability-layer .availability-address .address-icon { float: left; background-image: url("//images.crateandbarrel.com/is/image/Crate/icon-location?fmt=png-alpha"); background-size: 22px 24px; background-repeat: no-repeat; padding: .1em .5em 1em 2em; font-size: 1.1em; color: #222; } .overlay-confirmation.product-crate .store-availability-layer .availability-address p, .overlay-confirmation.product-crate .store-availability-layer .availability-address a { margin: 0; padding: 0 0 .4em 0; display: block; width: 100%; float: left; } .overlay-confirmation.product-crate .conf-ship-msg { display: block; } .overlay-confirmation.product-crate .conf-ship-msg:not(:first-child) { margin-top: 0.5em; } .availability-zip-container .col-xs-5, .availability-zip-container .col-xs-7 { text-align: left; margin-top: 1.5em; } .availability-zip-container .col-xs-5::-webkit-input-placeholder, .availability-zip-container .col-xs-7::-webkit-input-placeholder { text-align: center; line-height: 1.3em; } .availability-zip-container .col-xs-5:-moz-placeholder, .availability-zip-container .col-xs-7:-moz-placeholder { text-align: center; line-height: 1.3em; } .availability-zip-container .col-xs-5::-moz-placeholder, .availability-zip-container .col-xs-7::-moz-placeholder { text-align: center; line-height: 1.3em; } .availability-zip-container .col-xs-5:-ms-input-placeholder, .availability-zip-container .col-xs-7:-ms-input-placeholder { text-align: center; line-height: 1.3em; } .availability-zip-container .col-xs-5 span, .availability-zip-container .col-xs-7 span { font-size: 1.15em; line-height: 1.2em; } .availability-zip-container .col-xs-5 .input-short, .availability-zip-container .col-xs-7 .input-short { width: auto; } .availability-zip-container .availability-zip { width: 7em; height: 46px; padding: 0 1em 0 1em; border: 1px solid #bbb; border-top-left-radius: 2px; border-bottom-left-radius: 2px; border-top-right-radius: 0; border-bottom-right-radius: 0; box-shadow: none; font-weight: bold; font-size: 1.1em; float: right; } .availability-zip-container input[type=number]::-webkit-inner-spin-button, .availability-zip-container input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .availability-zip-container .field-validation-error { text-align: left; } .availability-zip-container .availability-submit { width: 2.1em; height: 44px; padding: 0 7px; border: 1px solid #bbb; background: none; margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 2px; border-bottom-right-radius: 2px; float: right; } .availability-zip-container .availability-submit i { color: #222; font-size: 1.7em; line-height: 1.9em; padding-left: .15em; } /* #endregion ======= New Crate Mobile Styles ===================================================== */ /* #region ========== Modal Manager Content (popUp manager) ======================================= */ /* This section needs to be refactored into the popup section above. It has been added for pop up content added through CMS and shared with desktop. */ .modal-popup { padding: .3em 1.2em; } .modal-popup ul { list-style-type: disc; margin-left: 1.6em; } .modal-popup ul li { list-style-type: disc; } .modal-popup .nestedUL { margin-top: 0; } .greenBold { font-weight: bold; color: #46a546; } .nla-popup .nla-product { width: 100%; margin-left: -1.3em; margin-bottom: 1em; padding: 1em 1.3em; } .nla-popup .nla-product-image img { width: 100%; display: block; background: #f7f7f7; } .nla-popup .nla-product-desc { margin-left: 1.3em; } .nla-popup .nla-product-desc h3 { margin: 0 0 .3em; } .nla-popup .nla-product-desc .sku { font-style: normal; color: #666; display: block; } .nla-popup .nla-price-summary { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1em; width: auto; margin: 1em 0; font-size: 1.1em; } .nla-popup .nla-red { color: #e00e00; } .nla-popup .nla-label { font-weight: 700; } .nla-popup .nla-value, .nla-popup .nla-price { text-align: right; } .assembly-info { padding: 1em 1.3em; } /* #endregion ======= Modal Manager Content (popUp manager) ======================================= */ /* So much absurdity above.... let's aim to scb-ify and only bring over what we need so we can delete all that absurdity above one day... */ /* #region =========== Confirmation Layer ====================== */ #global-popup.cart-confirmation .popup-container { animation: slide-in-top .5s ease-out; } @keyframes slide-in-left { 0% { transform: translate(-100%, 0); } 100% { transform: translate(0, 0); } } /* #endregion ======== Confirmation Layer ====================== */ /* #region =========== Carousel item =========== */ @media screen and (max-width: 768px) { .carousel-item:hover img { opacity: 1; } } /* #endregion =========== Carousel item =========== */ /* #region ======== Order Tracking Details Layer ====================== */ #global-popup.sidebar-popup .popup-container { height: -webkit-fill-available; max-height: 100vh; margin: auto; padding: 0 48px 48px; position: absolute; top: 50%; transform: translateY(-50%); -webkit-overflow-scrolling: touch; right: 0; } #global-popup.sidebar-popup .popup-container .popup-content .tracking-details .tracking-details-header { font-size: 16px; margin: 0 0 37px 0; padding-top: 32px; } #global-popup.sidebar-popup .popup-container .popup-content .tracking-details .tracking-details-content { margin: 0 0 70px 0; } #global-popup.sidebar-popup .popup-container .popup-content .tracking-details .error-summary { display: block; color: #e00e00; margin: 0 0 10px 0; font-size: 14px; outline: 0; padding-left: 27px; position: relative; } #global-popup.sidebar-popup .popup-container .popup-content .tracking-details .error-summary .svg-icon-error { position: absolute; left: 0; top: 0; color: #e00e00; height: 20px; width: 20px; stroke-width: 1px; } #global-popup.sidebar-popup .popup-container .popup-content .tracking-details .error-summary a { color: #e00e00; font-size: 14px; text-decoration: underline; } #global-popup.sidebar-popup .popup-container .popup-content .tracking-details .error-summary a:focus { outline: dashed 1px; outline-offset: 2px; text-decoration: underline; color: #e00e00; } #global-popup.sidebar-popup .popup-container .popup-content .tracking-details .tracking-text-underline { text-decoration: underline; } #global-popup.sidebar-popup .popup-container .popup-content .tracking-details .tracking-carrier-bold { font-weight: 600; } #global-popup.sidebar-popup .popup-container .popup-content .tracking-details .delivery-tracking-event .each-delivery-tracking-event { display: flex; border-bottom: 1px solid #222; padding: 0 0 20px 0; margin: 20px 0 0 0; } #global-popup.sidebar-popup .popup-container .popup-content .tracking-details .delivery-tracking-event:last-child .each-delivery-tracking-event { border-bottom: none; } /* #endregion ======== Order Tracking Details Layer ====================== */ @media screen and (max-width: 767px) { #confirmationDetail { display: none; } } @media screen and (min-width: 768px) { #global-popup.cart-confirmation.product-cart-confirmation { overflow-y: auto; } #global-popup.cart-confirmation.product-cart-confirmation .popup-container { max-height: 100%; } /*Slide down add to cart confirmation layer /*-------------------------------------------------------------------------------*/ #popupLayerTarget .modal-window .modal-content > h2:first-of-type { display: none !important; } #confirmationDetail { position: fixed; z-index: 99982; } #confirmationDetail .modal-overlay { position: static; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0; z-index: 1020; } #confirmationDetail .modal-overlay.modal-active { position: fixed; opacity: .6; transition: opacity 400ms linear; } #confirmationDetail .modal-content { position: fixed; left: 0; width: 100%; background-color: #fff; z-index: 1030; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; border: 0; padding-top: 30px; min-width: 1080px; } #confirmationDetail .modal-content-centered { left: 250px; top: 100px; width: 60%; background-color: #fff; z-index: 1030; } #confirmationDetail .forgot-password-modal .modal-content { position: relative; width: initial; } #confirmationDetail .modal-inner { width: 1008px; margin: auto; position: relative; } #confirmationDetail #modal-close-container { max-width: 1008px; position: relative; margin: 0 auto; text-align: right; } #confirmationDetail #modal-close-container .modal-close { height: 32px; width: 32px; cursor: pointer; } .modal-window.international-chooser-modal .modal-content { box-shadow: none; border: 0; border-radius: 0; } .modal-window.international-chooser-modal .dialog-close { right: -6.5em; } .modal-window.international-chooser-modal .international-shipping-chooser .mLN10 { margin-left: -10px !important; } .modal-window.international-chooser-modal .international-shipping-chooser .mRN10 { margin-right: -10px !important; } .modal-window.international-chooser-modal .international-shipping-chooser h2 { display: block; letter-spacing: -.02em; font: bold 32px / 40px var(--webfont-primary, sans-serif); color: #222; margin: 0 0 5px; } .modal-window.international-chooser-modal .international-shipping-chooser h2 span { margin-right: 5px; } .modal-window.international-chooser-modal .international-shipping-chooser a { color: #222; text-decoration: underline; } .modal-window.international-chooser-modal .international-shipping-chooser a:hover { text-decoration: underline; } .modal-window.international-chooser-modal .international-shipping-chooser a:focus { outline: dotted 1px; outline-offset: 2px; text-decoration: underline; } .modal-window.international-chooser-modal .international-shipping-chooser .intro { margin-bottom: 20px; } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step { margin: 0 -10px 2px -10px; padding: 15px 10px 20px; background: none repeat scroll 0 0 #f6f6f6; } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step select { margin: 0; } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step select.input-validation-error { border-color: #bb0000; } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step label { font-size: 14px; font-weight: normal; margin: 0 0 8px 5px; color: #000; font: normal 14px var(--webfont-primary, sans-serif); } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step .shop-us-site { border-radius: 0px; padding: 0px; border: 0px; } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step.one .select-country { width: 350px; display: inline-block; position: relative; top: -7px; } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step.one .or-divider { display: inline-block; font-size: 16px; font-weight: bold; padding-left: 15px !important; padding-right: 10px !important; margin-left: 5px !important; margin-right: 7px !important; font-style: normal; font-variant: normal; font-stretch: normal; line-height: 15px; font-family: var(--webfont-primary, sans-serif); } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step.one .or-divider:before, .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step.one .or-divider:after { content: " - "; } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step.one .shop-us-site { display: inline-block; width: 21px; height: 14px; overflow: hidden; vertical-align: middle; margin: 0 8px 0 0; font-weight: bold; position: relative; } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step.one .shop-us-site::before { content: url("//images.crateandbarrel.com/is/image/Crate/flag_sprites_sm?wid=23"); position: absolute; top: -3712px; left: 0; } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step.two .select-currency { width: 350px; display: inline-block; } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step.two .step-two-note { display: inline-block; font-size: 11px; line-height: 14px; max-width: 275px; vertical-align: middle; margin: 1px 0 0 10px; } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step.three { /*button[type="submit"] { background-color: #006ab7; color: white; border: solid 1px #1461a9; border-radius: 4px; padding: 0 14px; font-size: 13px; font-weight: bold; line-height: 28px; }*/ } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step.three .validation-summary-errors { background: #fffbfa url(/assets/forms/ghostbusters.gif) no-repeat 12px 15px; border-top: 1px solid #b20000; border-bottom: 1px solid #b20000; font: bold 13px / 16px var(--webfont-primary, sans-serif); margin: 0 0 10px 0; padding: 15px 20px 15px 40px; } .modal-window.international-chooser-modal .international-shipping-chooser .international-chooser-step.three .validation-summary-errors li { margin: 0 0 4px !important; color: #a20202; } .modal-window.international-chooser-modal .international-shipping-chooser .internationalShippingNotes { font-size: 12px; line-height: 14px; margin: 0; font: 12px / 16px var(--webfont-primary, sans-serif); color: #222; } /* #region ======== Email a Friend =========================================== */ .ui-dialog .email-a-friend .email-wrap { margin-bottom: 10px; padding-right: 100px; } .ui-dialog .email-a-friend .section-subheading { font: 24px / 1 var(--webfont-primary, sans-serif); color: #0d7faa; } .ui-dialog .email-a-friend .instructions { font: 300 12px / 1.2 var(--webfont-primary, sans-serif); } .ui-dialog .email-a-friend label { font: 600 12px / 1.2 var(--webfont-primary, sans-serif); } .ui-dialog .email-a-friend label span { font-weight: 300; } .ui-dialog .email-a-friend input { margin-bottom: 0; } .ui-dialog .email-a-friend span { font: 300 12px / 1.2 var(--webfont-primary, sans-serif); margin-bottom: 10px; } .ui-dialog .email-a-friend button { font-family: var(--webfont-primary, sans-serif); } /* #endregion ======== Email a Friend =========================================== */ /* So much absurdity above.... let's aim to scb-ify and only bring over what we need so we can delete all that absurdity above one day... */ /* #region =========== Confirmation Layer ====================== */ #global-popup.slide-down .popup-container { width: 100%; box-sizing: border-box; top: 0; transform: none; height: auto; max-height: none; padding: 0; animation: slide-in-top .5s ease-out; } #global-popup.slide-down .popup-container .popup-close { height: 50px; width: 50px; } #global-popup.slide-down .popup-container .popup-content { width: 100%; margin: 0 auto; } #global-popup.slide-down .popup-container .popup-sticky-close-container { width: 100%; margin: 0; } #global-popup.slide-left .popup-container { max-width: 350px; top: 0; right: 0; position: absolute; box-sizing: border-box; transform: none; height: 100%; max-height: none; padding: 30px 50px 30px 30px; animation: slide-in-left .5s ease-out; } #global-popup.slide-left .popup-container .popup-close { height: 50px; width: 50px; } #global-popup.slide-left .popup-container .popup-content { width: 100%; margin: 0 auto; } #global-popup.slide-right .popup-container { max-width: 350px; top: 0; right: 0; position: absolute; box-sizing: border-box; transform: none; height: 100%; max-height: none; padding: 30px 50px 30px 30px; animation: slide-in-right 0.5s ease-out; } #global-popup.slide-right .popup-container .popup-close { height: 50px; width: 50px; } #global-popup.slide-right .popup-container .popup-content { width: 100%; margin: 0 auto; } #confirmationDetail .m-conf-top { height: auto; width: 100%; max-width: 1008px; margin: 0 auto; position: relative; margin-bottom: 8px; } #confirmationDetail .m-conf-items { width: 55%; float: none; box-sizing: border-box; display: inline-block; } #confirmationDetail .m-conf-item-imgs-2 { display: block; width: auto; height: 73px; margin-right: 12px; float: left; } #confirmationDetail .m-conf-item-container { float: left; display: inline-block; margin-right: 10px; position: relative; } #confirmationDetail .m-conf-item-container .m-conf-img { cursor: pointer; height: 73px; } #confirmationDetail .m-conf-item-container .m-conf-img:focus { outline: dotted 1px #222; outline-offset: 2px; } #confirmationDetail .m-conf-item-container .m-conf-img:hover + .m-conf-desc-2, #confirmationDetail .m-conf-item-container .m-conf-img:focus + .m-conf-desc-2 { display: block; } #confirmationDetail .m-conf-item-container .m-conf-desc-2 { display: none; width: 190px; min-height: 40px; margin-top: 10px; background: #f0efed; border: 1px solid #ccc; padding: 8px 10px; z-index: 1; float: left; position: absolute; top: 80px; left: 0; font-size: 14px; font-family: var(--webfont-primary, sans-serif); } #confirmationDetail .m-conf-item-container .m-conf-desc-2:after { content: ""; position: absolute; top: -7px; left: 13px; border-width: 0 7px 7px; border-style: solid; border-color: #f0efed transparent; display: block; width: 0; z-index: 3; } #confirmationDetail .m-conf-item-container .m-conf-desc-2:before { content: ""; position: absolute; top: -8px; left: 12px; border-width: 0 8px 8px; border-style: solid; border-color: #ccc transparent; display: block; width: 0; z-index: 2; } #confirmationDetail .m-conf-item-container .m-conf-desc-2 span { float: left; clear: both; font-size: 12px; } #confirmationDetail .m-conf-item-container .m-conf-desc-2 .m-conf-name-2 { font-weight: 600; } #confirmationDetail .m-conf-ship-details { float: left; width: 100%; max-width: 520px; clear: both; margin-top: 0; position: absolute; bottom: 10px; left: 0; } #confirmationDetail .m-conf-ship-details .img-note { float: left; } #confirmationDetail .m-conf-ship-details .conf-ship-msg-container { display: inline-block; font: 400 14px / 20px var(--webfont-primary, sans-serif); color: #222; margin: 2px 0 0 5px; float: left; clear: none; max-width: 430px; } #confirmationDetail .m-conf-ship-details .conf-ship-msg { display: block; } #confirmationDetail .m-conf-ship-details .conf-ship-msg:not(:first-child) { margin-top: 0.5em; } #confirmationDetail .m-conf-row { width: 40%; float: none; overflow: visible; margin-left: 45px; vertical-align: top; display: inline-block; } #confirmationDetail .m-conf-row .m-conf-right-container { float: right; width: 100%; } #confirmationDetail .m-conf-row .registry-message { display: block; padding: 30px 0; } #confirmationDetail .m-conf-row .registry-message span { display: block; line-height: 24px; } #confirmationDetail .m-conf-row .registry-message span.message-txt { font-weight: 600; } #confirmationDetail .m-conf-row .registry-message span.message-contact { font-family: var(--webfont-primary, sans-serif); } #confirmationDetail .m-conf-row .m-conf-order-details, #confirmationDetail .m-conf-row .m-conf-order-details p { display: inline-block; width: 100%; font-family: var(--webfont-primary, sans-serif); font-size: 14px; line-height: 24px; } #confirmationDetail .m-conf-row .m-conf-order-details .m-conf-order-details-left, #confirmationDetail .m-conf-row .m-conf-order-details p .m-conf-order-details-left { float: left; clear: left; } #confirmationDetail .m-conf-row .m-conf-order-details .m-conf-discount, #confirmationDetail .m-conf-row .m-conf-order-details p .m-conf-discount { width: 100%; float: right; } #confirmationDetail .m-conf-row .m-conf-order-details .m-conf-subtotal-amt, #confirmationDetail .m-conf-row .m-conf-order-details p .m-conf-subtotal-amt { float: right; } #confirmationDetail .m-conf-row .m-conf-btns { border-top: 1px solid #ccc; margin-top: 13px; padding-top: 24px; } #confirmationDetail .m-conf-row .m-conf-btns .button-checkout-now { width: 44%; margin-left: 8px; } #confirmationDetail .m-conf-row .m-conf-btns .button-continue-shopping { width: 54%; } #confirmationDetail .button-registry-continue { font-size: 14px; letter-spacing: 1px; width: 52%; padding: 0; } #confirmationDetail .button-registry-continue + .button { margin-left: 8px; } #confirmationDetail .button-view-registry { font-size: 14px; letter-spacing: 1px; width: 46%; margin-left: 8px; padding: 0; } #confirmationDetail .m-conf-items .m-conf-item-count { position: relative; box-sizing: border-box; text-align: left; height: 40px; width: 100%; float: left; font: 300 16px / 23px var(--webfont-primary, sans-serif); color: #007B00; margin: 0 0 24px; border-bottom: 1px solid #ccc; padding-left: 33px; } #confirmationDetail .m-conf-items .m-conf-item-count:before { content: url(//images.crateandbarrel.com/is/image/Crate/icon-checkmark-success?fmt=png-alpha); width: 30px; height: 30px; left: -1px; top: -4px; position: absolute; } #confirmationDetail .m-conf-item-count .svg-icon-success { width: 32px; height: 28px; position: absolute; left: 0; top: -6px; color: green; background: white; stroke-width: 2px; } #confirmationDetail .m-conf-subtotal { box-sizing: border-box; font: 600 18px / 1.2 var(--webfont-primary, sans-serif); color: #222; border-bottom: 1px solid #ccc; height: 40px; width: 100%; float: right; display: block; text-align: left; margin: 0 0 24px; } #confirmationDetail .m-conf-carousel-container { height: 350px; margin-top: 0; border-top: 2px solid #ccc; background: #F0EFED; display: block; padding-top: 5px; } #confirmationDetail .m-conf-carousel-container .modal-inner .section-region { max-width: none; padding: 24px 0 48px; } #confirmationDetail .m-conf-carousel-container .modal-inner .section-region .carousel-item-container { max-width: none; } #confirmationDetail .m-conf-carousel-container .modal-inner .carousel-item-container { margin: 0 auto; } #confirmationDetail .m-conf-carousel-container h2 { display: block; font-family: var(--webfont-primary, sans-serif); font-weight: 300; font-style: normal; font-variant: normal; text-decoration: inherit; border: 0; padding: 10px 0 5px; font-size: 16px; line-height: 1.2; text-align: center; text-transform: none; color: #222; } #confirmationDetail .m-conf-carousel-container h2 a { color: #222; } #confirmationDetail .m-conf-carousel-container .section-tagline { color: #222; font: 400 30px / 1 "ITC Century Book", Georgia, serif; font-style: italic; text-align: center; margin: 0; padding: 0 0 10px 0; } #confirmationDetail .m-conf-carousel-container .carousel-item-group { width: 1008px; margin: 0 auto; } #confirmationDetail .m-conf-carousel-container .addon-container .section-header { display: none; } #confirmationDetail .m-conf-carousel-container .addon-container .section-tagline { padding-top: 60px; padding-bottom: 24px; } } @keyframes slide-in-top { 0% { transform: translate(0, -100%); } 100% { transform: translate(0, 0); } } @keyframes slide-in-left { 0% { transform: translate(100%, 0); } 100% { transform: translate(0, 0); } } @keyframes slide-in-right { 0% { transform: translate(100%, 0); } 100% { transform: translate(0, 0); } } /* #endregion ======== Confirmation Layer ====================== */ #global-popup .continue-gf { max-width: 400px; margin: 20px auto 40px auto; padding: 0px 25px; } #global-popup .continue-gf .continue-gf-title { font-size: 24px; font-weight: 700; line-height: 28px; padding-bottom: 14px; color: #000000; } #global-popup .continue-gf .continue-gf-content { font-size: 14px; font-weight: 400; line-height: 20px; padding-bottom: 7px; color: #000000; } #global-popup .continue-gf .continue-gf-newtab { font-size: 14px; font-weight: 400; line-height: 20px; padding-bottom: 40px; color: #000000; } #global-popup .continue-gf .continue-gf-buttons { display: flex; flex-direction: column; } #global-popup .continue-gf button { display: flex; justify-content: center; align-items: center; } #global-popup .continue-gf button svg { width: 20px; height: 20px; margin-left: 10px; margin-bottom: 5px; } /* #region =========== Reduced motion styles =========== */ .prm-video { display: none; } @media (prefers-reduced-motion: no-preference) { .prm-video { display: block; } .prm-image { display: none; } } /* #endregion =========== Reduced motion styles =========== */ /* Carousel */ .carousel { height: 300px; overflow: visible; position: relative; width: 1007px; padding-left: 1px; /* jCarousel Plugin Branding */ /* Styles for One, Two, and Three Item Carousels */ } .carousel:before, .carousel:after { content: ' '; display: block; height: 254px; left: -3px; pointer-events: none; position: absolute; top: -3px; width: 1011px; } .carousel:before { border-width: 1px 1px 0 1px; z-index: 3; } .carousel .jcarousel-clip-horizontal { overflow: hidden; } .carousel .crate-isnew { margin-right: 0 !important; color: #222 !important; } .carousel .jcarousel-prev-horizontal, .carousel .jcarousel-next-horizontal { background: url(//images.crateandbarrel.com/is/image/Crate/furniture_sprite?fmt=png-alpha) no-repeat 0 0 transparent; display: block; height: 37px; position: absolute; top: 108px; width: 30px; z-index: 3; cursor: pointer; filter: contrast(157%); } .carousel .jcarousel-prev-horizontal:after, .carousel .jcarousel-next-horizontal:after { content: ''; } .carousel .jcarousel-prev-horizontal:focus, .carousel .jcarousel-next-horizontal:focus { outline: none; } .carousel .jcarousel-prev-horizontal { background-size: 300px; background-position: 1px 3px; left: -12px; } .carousel .jcarousel-next-horizontal { background-size: 300px; background-position: -28px 3px; right: -12px; } .carousel .jcarousel-prev-disabled-horizontal, .carousel .jcarousel-next-disabled-horizontal { display: none !important; } .carousel.carousel-one { display: inline-block; margin-left: 375px; width: 252px; } .carousel.carousel-one:before, .carousel.carousel-one:after { width: 254px; } .carousel.carousel-two { display: inline-block; margin-left: 254px; width: 502px; } .carousel.carousel-two:before, .carousel.carousel-two:after { width: 504px; } .carousel.carousel-three { display: inline-block; margin-left: 120px; width: 756px; } .carousel.carousel-three:before, .carousel.carousel-three:after { width: 758px; } .carousel.carousel-one .jcarousel-prev-horizontal, .carousel.carousel-one .jcarousel-next-horizontal, .carousel.carousel-two .jcarousel-prev-horizontal, .carousel.carousel-two .jcarousel-next-horizontal, .carousel.carousel-three .jcarousel-prev-horizontal, .carousel.carousel-three .jcarousel-next-horizontal, .carousel.carousel-four .jcarousel-prev-horizontal, .carousel.carousel-four .jcarousel-next-horizontal { display: none !important; } .carousel.carousel-one .carousel-list, .carousel.carousel-two .carousel-list, .carousel.carousel-three .carousel-list, .carousel.carousel-four .carousel-list { overflow: hidden; width: auto; } .carousel .carousel-list { left: 0; position: absolute; top: 0; overflow: auto; white-space: nowrap; z-index: 2; } .carousel .carousel-item { box-sizing: border-box; display: inline-block; position: relative; text-align: center; width: 252px; vertical-align: top; } .carousel.carousel-one .carousel-item, .carousel.carousel-two .carousel-item, .carousel.carousel-three .carousel-item, .carousel.carousel-four .carousel-item { width: 252px !important; } .carousel.carousel-one:before, .carousel.carousel-one:after { width: 254px; } .carousel.carousel-two:before, .carousel.carousel-two:after { width: 506px; } .carousel.carousel-three:before, .carousel.carousel-three:after { width: 760px; } .carousel .carousel-form { display: table; height: auto; } .carousel-item a { color: #222; } .carousel-item .hwAddToCart img { padding: 8px 0 0 0; } .carousel-item .carousel-product-desc { display: none; height: 153px; left: 0; padding: 95px 10px 0 10px; position: absolute; pointer-events: none; text-align: center; top: 0; vertical-align: middle; margin: 0; width: 228px; font-size: 12px; } .carousel-item .carousel-product-desc a { pointer-events: visible; } .carousel-item .carousel-product-desc .carousel-product-addtocard { display: block; margin: 10px 0 0 45px; } .carousel-item .carousel-product-desc .carousel-product-addtocard input[type=text] { float: left; border: 1px solid #ccc; width: 38px; height: 40px; margin: 0 !important; padding: 0; font-weight: 300; font-size: 16px; line-height: 32px; text-align: center; position: relative; z-index: 100; } .carousel-item .btnFC4 { background: none !important; padding: 0 15px !important; position: relative; } .carousel-item .btnFC4:after { border: 40px solid black; content: ' '; display: block; height: 1px; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; } .carousel-item .btnFC4 span { position: relative; z-index: 2; } .carousel-item .btnFC4 img { position: relative; z-index: 2; } .carousel-item .carousel-product-desc input, .carousel-item .carousel-product-desc a { pointer-events: visible; } .carousel-item .carousel-product-desc:hover { display: block; } .carousel-item .carousel-product-desc .carousel-product-addtocard { display: block; margin: 10px 0 0 45px; } .carousel-item .carousel-product-desc .carousel-product-addtocard #qty { margin: 0 8px 0 0; } .carousel-item .carousel-product-name { font-weight: bold; line-height: 1.4; white-space: normal; padding: 0; } .carousel-item .sale { display: block; padding: 5px 0; } .carousel-item .salePrice { display: inline-block; margin: 0 5px 0 0; } .carousel-item .regPrice { display: inline-block; } .carousel-item .promoMessage { color: #b00; } .carousel-item:hover .carousel-product-desc { display: block; } .carousel-item:hover img { opacity: 0.2; } /* /Carousel */ /* #region =========== Carousel item =========== */ /* #region =========== Carousel item =========== */ @media screen and (min-width: 1px) { .carousel-unslick .carousel-item { float: left; width: 33.3333%; margin-right: 0px; } .carousel-item-container { *zoom: 1; width: 100%; max-width: 1008px; } .carousel-item-container:before, .carousel-item-container:after { display: table; content: ""; line-height: 0; } .carousel-item-container:after { clear: both; } .carousel-item-container .carousel-item-group { *zoom: 1; box-sizing: border-box; width: 100%; border: 0; padding: 0; } .carousel-item-container .carousel-item-group:before, .carousel-item-container .carousel-item-group:after { display: table; content: ""; line-height: 0; } .carousel-item-container .carousel-item-group:after { clear: both; } .carousel-item-container .carousel-item-group.ipad-active .carousel-item:hover .carousel-item-link { opacity: 1; } .carousel-item-container .carousel-item-item { position: relative; } .carousel-item-container .carousel-item-link { float: left; box-sizing: border-box; margin: 0 12px 0 1px; transition: opacity 0.3s ease-out; } .carousel-item-container .carousel-item-link:focus { outline: dotted 1px #222; } .carousel-item-container .carousel-item-img { float: left; width: 100%; } .carousel-item-container .carousel-item-detail { display: none; } .carousel-item-container .shipping-message { color: #666; font-size: 12px; font-weight: 400; } .carousel-grid .carousel-item { width: 33.3333%; float: left; height: 100%; margin: 0; padding: 0; box-sizing: border-box; } .carousel-grid .carousel-item .carousel-item-link { margin-right: 7px; } .carousel-grid .carousel-item img { width: 100%; } #product-pi-data { max-width: 1008px; padding: 24px 0 24px; } #product-pi-data .carousel-item-header { display: none; } #product-pi-data .carousel-item-tagline, #product-pi-data .section-tagline { display: block; margin-top: 5px; margin-bottom: 16px; color: #222; font-weight: 600; font-size: 14px; line-height: 1.8; font-family: var(--webfont-primary, sans-serif); border-bottom: 1px solid #ccc; text-align: left; text-transform: uppercase; } #family-pi-data { max-width: 1008px; padding: 24px 0 24px; } #family-pi-data .carousel-item-header { display: none; } #family-pi-data .carousel-item-tagline, #family-pi-data .section-tagline { display: block; margin-top: 5px; margin-bottom: 16px; color: #222; font-weight: 600; font-size: 14px; line-height: 1.8; font-family: var(--webfont-primary, sans-serif); border-bottom: 1px solid #ccc; text-align: left; text-transform: uppercase; } .section-region { display: inline-block; width: 100%; max-width: 1008px; padding: 32px 0 32px; } .carousel-item-header { display: block; color: #222; font-weight: 600; font-size: 14px; line-height: 1.8; font-family: var(--webfont-primary, sans-serif); border-bottom: 1px solid #717171; text-align: left; text-transform: uppercase; margin-bottom: 16px; margin-top: 5px; margin-bottom: 16px; padding: 0; padding-bottom: 0; } .section-header-anchor, .carousel-item-anchor { color: #222; text-decoration: none; } .section-tagline { display: none; } } /* #endregion =========== Carousel item =========== */ .adaptive-layout .carousel-item-container .carousel-item-group { *zoom: 1; box-sizing: border-box; width: 100%; text-align: center; border: 0; padding: 0; } .adaptive-layout .carousel-item-container .carousel-item-group:before, .adaptive-layout .carousel-item-container .carousel-item-group:after { display: table; content: ""; line-height: 0; } .adaptive-layout .carousel-item-container .carousel-item-group:after { clear: both; } .adaptive-layout .carousel-item-container .carousel-item { position: relative; display: flex; width: 100%; height: 100%; cursor: pointer; } .adaptive-layout .carousel-item-container .carousel-item:hover .carousel-item-link img, .adaptive-layout .carousel-item-container .carousel-item.is-focused .carousel-item-link img { opacity: .15; } .adaptive-layout .carousel-item-container .carousel-item:hover .carousel-item-detail, .adaptive-layout .carousel-item-container .carousel-item.is-focused .carousel-item-detail { opacity: 1; } .adaptive-layout .carousel-item-container .carousel-item-link { float: left; box-sizing: border-box; margin: 0 2px 0 0; width: 100%; } .adaptive-layout .carousel-item-container .carousel-item-link:focus { outline: dotted 1px #999; outline-offset: -4px; } .adaptive-layout .carousel-item-container .carousel-item-img { float: left; width: 100%; } .adaptive-layout .carousel-item-container .carousel-item-detail { width: calc(100% - 56px); margin: 0 28px; position: absolute; left: 0; transition: opacity 0.3s ease-out; opacity: 0; height: 100%; justify-content: center; flex-direction: column; display: flex; pointer-events: none; } .adaptive-layout .carousel-item-container .detail-form { display: block; margin: 10px -16px 0; padding: 0; pointer-events: visible; } .adaptive-layout .carousel-item-container .detail-form .field-qty { padding: 5px !important; margin-right: 6px; } .adaptive-layout .carousel-item-container .detail-form a { color: #fff; } .adaptive-layout .carousel-item-container .detail-name { clear: both; margin: 0; padding: 0; color: #222; font: 600 12px/20px var(--webfont-primary, sans-serif); text-align: center; } .adaptive-layout .carousel-item-container .detail-name-flag { color: #222; display: block; margin-right: 5px; } .adaptive-layout .carousel-item-container .detail-price { display: block; margin: 0; padding: 0; color: #666; font: 400 12px/20px var(--webfont-primary, sans-serif); } .adaptive-layout .carousel-item-container .detail-price .sale { padding: 0; } .adaptive-layout .carousel-item-container .detail-price .sale .salePrice, .adaptive-layout .carousel-item-container .detail-price .sale .salePriceDetail { margin-right: 5px; } .adaptive-layout .carousel-item-container [class*='svg-icon-arrow-'] { width: 28px; height: 28px; left: 2px; top: 2px; position: absolute; stroke-width: 2.8; } .adaptive-layout .section-header { margin: 0; padding: 10px 0 5px; color: #222; font: 400 16px/18px var(--webfont-primary, sans-serif); text-align: center; text-transform: inherit; border-bottom: 0; } .adaptive-layout .section-header-anchor { color: #222; text-decoration: none; } .adaptive-layout .section-tagline { display: block; font-family: "ITC Century Book", Georgia, serif !important; font-style: italic !important; font-weight: 400 !important; font-variant: normal; text-transform: none; text-decoration: inherit; margin: 0; padding: 0 0 15px 0; line-height: 1; text-align: center; text-transform: none; font-size: 32px; line-height: 1; } .adaptive-layout .carousel-grid .carousel-item-group { border: 0; } .adaptive-layout .carousel-grid .carousel-item { width: 33.3333%; float: left; height: 100%; margin: 0; padding: 5px; } .adaptive-layout .carousel-grid .carousel-item img { width: 100%; } .adaptive-layout #product-pi-data { margin: 0; padding: 48px 0 48px; } .adaptive-layout #product-pi-data .carousel-item-header { display: block; } .adaptive-layout #product-pi-data .carousel-item-tagline, .adaptive-layout #product-pi-data .section-tagline { display: block; margin: 0; border: 0; padding: 0 0 20px; color: #222; font: italic 400 32px/1 "ITC Century Book", Georgia, serif; text-align: center; text-transform: none; } .adaptive-layout #family-pi-data { margin: 0; padding: 48px 0 48px; } .adaptive-layout #family-pi-data .carousel-item-header { display: block; } .adaptive-layout #family-pi-data .carousel-item-tagline, .adaptive-layout #family-pi-data .section-tagline { display: block; margin: 0; padding: 0 0 20px; color: #222; font: italic 400 32px/1 "ITC Century Book", Georgia, serif; text-align: center; text-transform: none; } /* #endregion =========== Carousel item =========== */ /* #region ======= GLOBAL EMAIL SIGNUP - Used in: All initial page loads */ @media screen and (max-width: 812px) { .email-signup #email-interruptor-submit { border: 0; padding: 0; height: 42px; } .email-signup .input-group-btn button { font-size: 14px; background: white; color: black; } } .moxie-hide #concierge-tab { display: none !important; } .email-signup #email-interruptor-submit { height: 38px; } .email-signup #email-interruptor-submit .svg-icon-arrow-submit { height: 42px; width: 42px; display: inline-block; } .email-signup #email-interruptor-submit:focus { outline: dotted 1px #222; outline-offset: 2px; } .email-signup #OptInResponseDetail { padding-bottom: 0; } .email-signup #OptInResponseDetail .field-validation-error { border-top: 1px solid #bb0000; border-bottom: 1px solid #bb0000; font-weight: bold; font-size: .9em; background: #fffbfa url(//images.crateandbarrel.com/is/image/Crate/icon-error-alert?fmt=png-alpha) no-repeat 12px 15px !important; margin: 0 0 0 0 !important; padding: 1.5em 1em 1.5em 3.2em !important; clear: left; display: block; position: relative; color: #bb0000; } .email-signup #OptInResponseDetail .field-validation-success { border-top: 1px solid #66bb4c; border-bottom: 1px solid #66bb4c; font-weight: normal; font-size: .9em; background: #fffbfa; margin: 10px 5px 10px 0; padding: 30px 40px; clear: left; display: block; position: relative; color: #377415; } .email-signup #OptInResponseDetail p.emailMessage.alert { margin-bottom: 0 !important; } .email-signup #OptInResponseDetail h3 { font-size: 33px; margin-bottom: .3em; font-weight: bold; color: #5B705F; line-height: 44px; letter-spacing: -.02em; } .email-signup #OptInResponseFooter { padding-bottom: 10px; } .email-signup #OptInResponseFooter .field-validation-error { border-top: 1px solid #bb0000; border-bottom: 1px solid #bb0000; font-weight: bold; font-size: .9em; background: #fffbfa url(//images.crateandbarrel.com/is/image/Crate/icon-error-alert?fmt=png-alpha) no-repeat 12px 15px !important; margin: 0 0 0 0 !important; padding: 1.5em 1em 1.5em 3.2em !important; clear: left; display: block; position: relative; color: #bb0000; } .email-signup #OptInResponseFooter .field-validation-success { border-top: 1px solid #66bb4c; border-bottom: 1px solid #66bb4c; font-weight: normal; font-size: .9em; background: #fffbfa; margin: 10px 5px 10px 0; padding: 30px 40px; clear: left; display: block; position: relative; color: #377415; } .email-signup #OptInResponseFooter p.emailMessage.alert { margin-bottom: 0 !important; } .email-signup #OptInResponseFooter h3 { font-size: 33px; margin-bottom: .3em; font-weight: bold; color: #5B705F; line-height: 44px; letter-spacing: -.02em; } .email-signup .subtitle { font-weight: normal; } .email-signup .icon-envelope { z-index: 3; } .email-signup .web-icon-arrow-right:before { line-height: 1.8em; } .email-signup:focus-within ~ .content button, .email-signup:focus-within ~ .content a, .email-signup:focus-within ~ .content input, .email-signup:focus-within ~ .content div { pointer-events: none !important; touch-action: none !important; } .email-signup .input-group { touch-action: none !important; } .email-signup .input-group input.error { border: 1px solid #bb0000; box-shadow: none; } .email-signup .input-group .svg-icon-error { display: none; width: 18px; height: 30px; float: left; margin-right: 5px; color: #bd2118; } .email-signup .input-group .error { font-size: 14px; color: #bb0000; font-family: var(--webfont-primary, sans-serif); margin-top: 6px; display: inline-block; } .email-signup .input-group .form-control { -webkit-appearance: none; /* Removes shadow from iOS */ z-index: 0; margin-top: 0; font-family: var(--webfont-primary, sans-serif); } .email-signup .input-group-btn { vertical-align: top; } .email-signup .email-validation > .field-validation-error { margin: 0 0 0.5em 0 !important; font-size: 0.9em; } .email-signup .close-button { background: none; border: none; line-height: 0; right: 0; padding: 0.85em 0.9em; position: absolute; top: 0; z-index: 4; } .email-signup .close-button.collapse-icon > .web-icon-close:before { content: "\ef0d"; } .email-signup .email-promo .email-promo-save { display: block; font-size: 1.6em; font-weight: bold; line-height: 1; } .email-signup .email-promo .email-promo-details { font-size: 1.2em; padding-bottom: 0.4em; } .email-signup .email-promo .email-promo-save-footer { display: block; color: #e00e00; font-size: 1.6em; font-weight: bold; line-height: 1; } .email-signup .email-promo .email-promo-details-footer { font-size: 1.2em; padding-bottom: 0.4em; } .email-signup .email-benefits { display: block; font-size: 1.3em; } .email-signup .email-benefits img { margin: -10px -10px 5px -10px; max-width: 16.5em; } .email-signup .email-validation .alert { font-size: 0.9em; line-height: 1.4; margin: 0 0 1.0em !important; } .email-signup .email-policy { font-size: 0.8em; } .email-signup .email-policy b { font-weight: 600; } .email-signup .field-validation-valid { padding-bottom: 10px; } .email-signup .field-validation-valid:empty { display: none; } .email-signup .email-canada-text { font-family: var(--webfont-primary, sans-serif); font-size: 12px; line-height: 18px; color: #666; margin-top: 0; } .email-signup .font-alt { font-family: "ITC Century Book", Georgia, serif; font-style: italic; font-weight: 400; } .email-signup-footer { padding: 0px; } .email-signup-modal { background: white; left: 50%; margin: 0 0 0 -242px; padding: 1em; position: fixed; top: 7.5em; width: 20em; z-index: 900; } .email-signup-modal.email-signup-benefits .close-button { color: white; } .email-signup-modal .email-benefits { position: relative; } .email-signup-modal .email-benefits-title { display: block; font-size: 2.2em; padding: 0; position: absolute; text-align: center; text-shadow: 0 0 15px #222; top: 1.3em; width: 7em; } .email-signup-modal-overlay { left: 0; height: 100%; position: fixed; opacity: 0.8; top: 0; width: 100%; background: #222; } .email-signup-panel { -webkit-animation-name: slideInUp; animation-name: slideInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; bottom: 0; box-sizing: border-box; display: block; right: 0; text-align: left; -webkit-transition: bottom 1.5s ease-in-out; transition: bottom 1.5s ease-in-out; padding: 1em; position: fixed; width: 100%; z-index: 104; } .email-signup-panel.email-signup-benefits .email-signup-panel-content { padding: 0 0 1px 0; } .email-signup-panel.email-signup-benefits .email-signup-panel-content .enter-email { padding: 0 15px 0; } .email-signup-panel.email-signup-benefits .callout { padding: 15px 14px 20px; text-align: left; } .email-signup-panel .input-group-btn button { padding: 0.5em 1.6em; } .email-signup-panel .icon-envelope { left: 0.7em !important; top: 0.6em !important; } .email-signup-panel .email-signup-panel-toggle { margin: -15px -15px 11px -15px; } .email-signup-panel .email-signup-panel-toggle a { color: black; display: block; font-weight: bold; font-size: 1.1em; padding: 15px 15px 20px; text-align: left; } .email-signup-panel .email-signup-panel-toggle a.callout { font-size: 1.1em; } .email-signup-panel.bottom-adjustment .email-signup-panel-toggle a { padding: 15px 15px 42px; -webkit-transition: padding 0.7s ease-in-out; transition: padding 0.7s ease-in-out; } .email-signup-panel.bottom-adjustment .email-signup-panel-toggle a.active { padding: 15px 15px 20px; -webkit-transition: padding 0.2s ease-in-out; transition: padding 0.2s ease-in-out; } .email-signup-panel form { position: relative; margin: -15px; } .email-signup-panel .enter-email { padding: 15px 15px 0; } .email-signup-panel .email-policy { padding: 0 15px 6px; } .email-signup-panel .email-promo { background: white; padding: 0 15px 10px; margin-top: -35px; pointer-events: none; } .email-signup-panel .email-promo .email-promo-save { display: block; font-size: 2em; font-weight: bold; margin-bottom: 0; } .email-signup-panel .email-promo .email-promo-details { font-size: 1.2em; padding-bottom: 0.4em; } .email-signup-panel .email-benefits { line-height: 1.3; padding: 0 45px 10px 15px; margin-top: -40px; pointer-events: none; } .email-signup-panel .email-benefits .email-optin { font-size: 1em; font-weight: bold; } .email-signup-panel .email-benefits .email-benefits-details { font-size: 1em; } .email-signup-panel .email-signup-panel-content { max-height: 0; -webkit-transition: opacity 0.5s, max-height 0.5s ease-in-out; transition: opacity 0.5s, max-height 0.5s ease-in-out; opacity: 0; overflow: visible; } .email-signup-panel .email-signup-panel-content.visable { max-height: 500px; -webkit-transition: opacity 0.5s, max-height 0.5s ease-in-out; transition: opacity 0.5s, max-height 0.5s ease-in-out; opacity: 1; } .email-signup-panel-slide-out { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @-webkit-keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } /* #endregion ==== GLOBAL EMAIL SIGNUP ======================================= */ @media screen and (min-width: 813px) { .email-signup-modal-overlay { z-index: 600; } .email-signup { width: 390px; padding: 25px 50px 25px 25px; z-index: 601; top: 30%; } .email-signup .web-icon-close { color: #222; } .email-signup .email-promo { float: left; padding: 0 !important; } .email-signup .email-promo .email-promo-save { font: bold 32px / 34px var(--webfont-primary, sans-serif); color: #e00e00; margin: 0 10px 0 0; float: left; } .email-signup .email-promo .email-promo-details { font: 300 34px / 34px var(--webfont-primary, sans-serif); color: #222; float: left; } .email-signup .email-promo .email-promo-save-footer { display: inline; color: #e00e00; font: normal 21px / 23px var(--webfont-primary, sans-serif); font-weight: bold; line-height: 1; padding-right: .25em; } .email-signup .email-promo .email-promo-details-footer { line-height: 1; padding-bottom: 0.4em; font-weight: 300; font-size: 21px; line-height: 23px; } .email-signup .enter-email { width: 100%; float: left; margin: .8em 0; } .email-signup .enter-email .input-group .input-group-btn .web-icon-arrow-right:before { line-height: 2.2em; } .email-signup .enter-email .input-group .form-control.error ~ .svg-icon-error { display: inline-block; } .email-signup #OptInResponseDetail { padding-bottom: 0; } .email-signup #OptInResponseDetail .field-validation-error { border-top: 1px solid #bb0000; border-bottom: 1px solid #bb0000; font-weight: bold; font-size: .9em; background: #fffbfa url(//images.crateandbarrel.com/is/image/Crate/icon-error-alert?fmt=png-alpha) no-repeat 12px 15px; margin: 0 0 0 0; padding: 1.5em 1em 1.5em 3.2em; clear: left; display: block; position: relative; color: #bb0000; } .email-signup #OptInResponseDetail .field-validation-success { border-top: 1px solid #66bb4c; border-bottom: 1px solid #66bb4c; font-weight: normal; font-size: .9em; background: #fffbfa; margin: 10px 5px 10px 0; padding: 30px 40px; clear: left; display: block; position: relative; color: #377415; } .email-signup #OptInResponseDetail p.emailMessage.alert { margin-bottom: 0 !important; } .email-signup #OptInResponseDetail h3 { font-size: 33px; margin-bottom: .3em; font-weight: bold; color: #5B705F; line-height: 44px; letter-spacing: -.02em; } .email-signup #OptInResponseFooter { padding-bottom: 10px; } .email-signup #OptInResponseFooter .field-validation-error { border-top: 1px solid #bb0000; border-bottom: 1px solid #bb0000; font-weight: bold; font-size: .9em; background: #fffbfa url(//images.crateandbarrel.com/is/image/Crate/icon-error-alert?fmt=png-alpha) no-repeat 12px 15px; margin: 0 0 0 0; padding: 1.5em 1em 1.5em 3.2em; clear: left; display: block; position: relative; color: #bb0000; } .email-signup #OptInResponseFooter .field-validation-success { border-top: 1px solid #66bb4c; border-bottom: 1px solid #66bb4c; font-weight: normal; font-size: .9em; background: #fffbfa; margin: 10px 5px 10px 0; padding: 30px 40px; clear: left; display: block; position: relative; color: #377415; } .email-signup #OptInResponseFooter p.emailMessage.alert { margin-bottom: 0 !important; } .email-signup #OptInResponseFooter h3 { font-size: 33px; margin-bottom: .3em; font-weight: bold; color: #5B705F; line-height: 44px; letter-spacing: -.02em; } .email-signup .shop-now { color: #5B705F; font-size: 26px; float: right; } .email-signup #shopNow { cursor: pointer; } .email-signup .email-message { color: #222; font-size: 20px; line-height: 21px; width: 90%; } .email-signup .email-message .span { font-size: 30px; display: block; } .email-signup .email-message h3.first { font: bold 32px / 34px var(--webfont-primary, sans-serif) !important; color: #889739; margin-bottom: 30px; } .email-signup .email-modal-body-text { color: #222; font: 32px / 34px var(--webfont-primary, sans-serif); font-weight: 300; } .email-signup .email-message-no-promo { font: bold 32px / 34px var(--webfont-primary, sans-serif); color: #889739; margin-bottom: 30px; } .email-signup .email-policy { float: left; font: 12px / 16px var(--webfont-primary, sans-serif); margin: 0; color: #222; } .email-signup .email-policy b { width: 100%; display: block; font-weight: 600; } .email-signup .email-policy b span { color: #e00e00; } .email-signup-footer { padding: 0px; } } @media screen and (min-width: 813px) { .email-signup-modal-overlay { z-index: 600; } .email-signup { width: 390px; padding: 25px 50px 25px 25px; z-index: 601; top: 30%; } .email-signup .web-icon-close { color: #222; } .email-signup .email-promo { float: left; padding: 0 !important; } .email-signup .email-promo .email-promo-save { font: bold 32px / 34px var(--webfont-primary, sans-serif); color: #e00e00; margin: 0 10px 0 0; float: left; } .email-signup .email-promo .email-promo-details { font: 300 34px / 34px var(--webfont-primary, sans-serif); color: #222; float: left; } .email-signup .email-promo .email-promo-save-footer { display: inline; color: #e00e00; font: normal 21px / 23px var(--webfont-primary, sans-serif); font-weight: bold; line-height: 1; padding-right: .25em; } .email-signup .email-promo .email-promo-details-footer { line-height: 1; padding-bottom: 0.4em; font-weight: 300; font-size: 21px; line-height: 23px; } .email-signup .enter-email { width: 100%; float: left; margin: .8em 0; } .email-signup .enter-email .input-group .input-group-btn .web-icon-arrow-right:before { line-height: 2.2em; } .email-signup .enter-email .input-group .form-control.error ~ .svg-icon-error { display: inline-block; } .email-signup #OptInResponseDetail { padding-bottom: 0; } .email-signup #OptInResponseDetail .field-validation-error { border-top: 1px solid #bb0000; border-bottom: 1px solid #bb0000; font-weight: bold; font-size: .9em; background: #fffbfa url(//images.crateandbarrel.com/is/image/Crate/icon-error-alert?fmt=png-alpha) no-repeat 12px 15px; margin: 0 0 0 0; padding: 1.5em 1em 1.5em 3.2em; clear: left; display: block; position: relative; color: #bb0000; } .email-signup #OptInResponseDetail .field-validation-success { border-top: 1px solid #66bb4c; border-bottom: 1px solid #66bb4c; font-weight: normal; font-size: .9em; background: #fffbfa; margin: 10px 5px 10px 0; padding: 30px 40px; clear: left; display: block; position: relative; color: #377415; } .email-signup #OptInResponseDetail p.emailMessage.alert { margin-bottom: 0 !important; } .email-signup #OptInResponseDetail h3 { font-size: 33px; margin-bottom: .3em; font-weight: bold; color: #5B705F; line-height: 44px; letter-spacing: -.02em; } .email-signup #OptInResponseFooter { padding-bottom: 10px; } .email-signup #OptInResponseFooter .field-validation-error { border-top: 1px solid #bb0000; border-bottom: 1px solid #bb0000; font-weight: bold; font-size: .9em; background: #fffbfa url(//images.crateandbarrel.com/is/image/Crate/icon-error-alert?fmt=png-alpha) no-repeat 12px 15px; margin: 0 0 0 0; padding: 1.5em 1em 1.5em 3.2em; clear: left; display: block; position: relative; color: #bb0000; } .email-signup #OptInResponseFooter .field-validation-success { border-top: 1px solid #66bb4c; border-bottom: 1px solid #66bb4c; font-weight: normal; font-size: .9em; background: #fffbfa; margin: 10px 5px 10px 0; padding: 30px 40px; clear: left; display: block; position: relative; color: #377415; } .email-signup #OptInResponseFooter p.emailMessage.alert { margin-bottom: 0 !important; } .email-signup #OptInResponseFooter h3 { font-size: 33px; margin-bottom: .3em; font-weight: bold; color: #5B705F; line-height: 44px; letter-spacing: -.02em; } .email-signup .shop-now { color: #5B705F; font-size: 26px; float: right; } .email-signup #shopNow { cursor: pointer; } .email-signup .email-message { color: #222; font-size: 20px; line-height: 21px; width: 90%; } .email-signup .email-message .span { font-size: 30px; display: block; } .email-signup .email-message h3.first { font: bold 32px / 34px var(--webfont-primary, sans-serif) !important; color: #889739; margin-bottom: 30px; } .email-signup .email-modal-body-text { color: #222; font: 32px / 34px var(--webfont-primary, sans-serif); font-weight: 300; } .email-signup .email-message-no-promo { font: bold 32px / 34px var(--webfont-primary, sans-serif); color: #889739; margin-bottom: 30px; } .email-signup .email-policy { float: left; font: 12px / 16px var(--webfont-primary, sans-serif); margin: 0; color: #222; } .email-signup .email-policy b { width: 100%; display: block; font-weight: 600; } .email-signup .email-policy b span { color: #e00e00; } .email-signup-footer { padding: 0px; } } .reveal-content-container .reveal-content { max-height: 0; overflow: hidden; transition: max-height ease; } .reveal-content-container .reveal-content.expanded { overflow: hidden; animation: 1s container-transition forwards; max-height: 100%; } .reveal-content-container .reveal-content.expanded [tabindex='-1']:focus { outline: none; } .reveal-content-container .reveal-content.expanded + .button-learn-more .svg-icon-chevron-down { transform: scale(-1); } .reveal-content-container.expanded .reveal-content-toggle .svg-icon-chevron-down { transform: scale(-1); } .reveal-content-container .reveal-content-hidden { display: none; overflow: hidden; transition: max-height ease; } .reveal-content-container .button-learn-more { display: inline; background: none; border: 0; padding: 0; color: #222; text-align: left; text-decoration: underline; font-family: var(--webfont-primary, sans-serif); font-size: 14px; line-height: 20px; background: none; border: 0; padding: 0; margin-top: 8px; } .reveal-content-container .button-learn-more:hover { text-decoration: underline; } .reveal-content-container .button-learn-more:focus { outline: dotted 1px; outline-offset: 2px; text-decoration: underline; } .reveal-content-container .button-learn-more:focus::before { display: none; } .reveal-content-container .svg-icon-chevron-up, .reveal-content-container .svg-icon-chevron-down { display: inline-block; transition: .5s; color: #222; width: 28px; height: 16px; margin-left: 0; margin-bottom: -4px; stroke-width: 3px; } .reveal-seo-container .reveal-container .svg-icon-chevron-down { display: inline-block; transition: .5s; color: #222; width: 28px; height: 16px; margin-left: 0; margin-bottom: -4px; stroke-width: 3px; } .reveal-seo-container .reveal-container .reveal-content.revealed-content + a .svg-icon-chevron-down, .reveal-seo-container .reveal-container .reveal-content.revealed-content + button .svg-icon-chevron-down { transform: scale(-1); } .reveal-seo-container .reveal-content { max-height: 250px; overflow: hidden; transition: max-height 0.5s ease-out; position: relative; } .reveal-seo-container .reveal-content:after { content: ""; position: absolute; z-index: 1; bottom: -39px; left: 0; pointer-events: none; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 70%); width: 100%; height: 140px; transition: all 1s linear; } .reveal-seo-container .revealed-content { max-height: 5000px; } .reveal-seo-container .revealed-content:after { height: 0px; } .reveal-seo-container .js-reveal-toggle { margin: 10px 0; } .reveal-seo-container .js-reveal-toggle:hover { color: #222; } @media screen and (min-width: 768px) { .reveal-content-container .button-learn-more { display: none; } } @keyframes container-transition { 0% { overflow: hidden; } 100% { overflow: visible; } } .socialShareContainer .socialBox { opacity: 0; width: 165px; height: 35px; padding-top: 20px; border: 0; text-align: center; cursor: default; position: absolute; top: 30px; } .socialShareContainer .socialBox #fml_pinit { height: 100%; width: 44px; left: 2px; top: auto; } .socialShareContainer .socialBox #fml_houzz { height: 100%; width: 49px; left: 83px; top: auto; } .socialShareContainer .socialBox #fml_houzz iframe { margin: 3px auto; width: 90px; } .socialShareContainer .socialShareContainer { box-sizing: border-box; float: left; margin: 20px 0 0 0; padding: 0 10px; /* keep icons from bumping against stuff, no worries of collasping margins */ width: 380px; } .socialShareContainer .socialIcon { background-color: #fff; width: 33px; height: 35px; margin-right: 9px; border-radius: 5px; cursor: pointer; position: relative; float: left; } .socialShareContainer #socialSharePinterest_icon.on, .socialShareContainer #socialSharePinterest_icon:hover, .socialShareContainer #socialSharePinterest_icon { background: url(//images.crateandbarrel.com/is/image/Crate/furniture_sprite?fmt=png-alpha) no-repeat scroll -370px -8px transparent; } .socialShareContainer #socialShareFB_icon.on, .socialShareContainer #socialShareFB_icon:hover, .socialShareContainer #socialShareFB_icon { background: url(//images.crateandbarrel.com/is/image/Crate/furniture_sprite?fmt=png-alpha) no-repeat scroll -412px -8px transparent; } .socialShareContainer #socialShareHouzz_icon.on, .socialShareContainer #socialShareHouzz_icon:hover, .socialShareContainer #socialShareHouzz_icon { background: url(//images.crateandbarrel.com/is/image/Crate/furniture_sprite?fmt=png-alpha) no-repeat scroll -454px -8px transparent; } .socialShareContainer #socialShareFB_box { left: -57px; } .socialShareContainer #socialShareHouzz_box { left: -90px; } .socialShareContainer .pinItButton { display: block; height: 20px; margin: 2px auto; text-indent: 0; width: 44px; position: static; } .socialShareContainer .btnFCPrint, .socialShareContainer .btnFCEmail { padding: 0 0 0 10px; text-indent: -10000px; width: 38px; height: 38px; } @media (max-width: 768px) { .scan-mode #global-popup .popup-sticky-close-container { background: transparent; } .scan-mode #global-popup .svg-icon-close { color: #fff; } } .scanner-container { position: fixed; height: 100%; width: 100%; top: 0; left: 0; bottom: 0; right: 0; } .scanner-container .scanner-video-overlay { align-items: center; background-color: #000; display: flex; justify-content: center; height: 100%; width: 100%; } .scanner-container .scanner-video-overlay:after { border: #666 solid 1px; box-shadow: 0 0 0 9999px rgba(102, 102, 102, 0.2); content: ''; height: 200px; position: absolute; width: 80%; z-index: 1; } @media (orientation: landscape) { .scanner-container .scanner-video-overlay:after { margin-bottom: 80px; } } .scanner-container .scanner-video { height: 100%; position: absolute; top: 0; width: 100%; } @media (orientation: landscape) { .scanner-container .scanner-video { object-fit: cover; } } .scanner-bottom-container { width: 100%; position: absolute; bottom: 0px; left: 0; background: #fff; } .scanner-bottom-content { align-items: center; justify-content: flex-start; text-align: left; font-weight: 600; color: #222; line-height: 24px; font-size: 14px; padding: 24px 18px; } .manual-scanner-container { padding-top: 20px; } .manual-title { font-size: 18px; font-weight: 600; padding: 0; margin-bottom: 2px; } .manual-label label { font-size: 13px; font-weight: 400; color: #666; } .manual-input { display: flex; } .manual-input .button { width: 100px; margin-left: 4px; letter-spacing: 2px; } .scanner-error-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 20px 30px; width: 70%; } .scanner-error-container .svg-icon-error { stroke-width: 1; width: 2.5rem; height: 2.5rem; margin-right: 0.8rem; } .scanner-error-container .error-title { font-weight: 600; display: inline-flex; align-items: center; margin: 0 0 0.5rem; } .scanner-error-container .error-message { margin: 0 0 1.5rem; } .scanner-error-container .button { letter-spacing: 2px; } .scanner-loading-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .scanner-loading-container .progressbar { display: block; } select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { border-radius: 0; font-family: var(--webfont-primary, sans-serif); font-weight: normal; } .validation-error { border-top: 1px solid #bb0000; border-bottom: 1px solid #bb0000; font-weight: bold; font-size: .9em; background: #fffbfa url(//images.crateandbarrel.com/is/image/Crate/icon-error-alert?fmt=png-alpha) no-repeat 12px 15px; margin: 10px 0; padding: 1.5em 1em 1.5em 3.2em; float: left; display: block; position: relative; color: #bb0000; font-weight: bold; } .validation-error a { color: #333; } /* #region ===== A11y Checkboxes and Radio Buttons =============================================================== */ input[type="checkbox"].a11y-checkbox, #okta-sign-in .o-form .o-form-input .o-form-input-name-remember .custom-checkbox input[type="checkbox"], input[type="radio"].a11y-radio { border: 0; clip: rect(0px, 0px, 0px, 0px); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* Gather the magic.