/* Minification failed. Returning unminified contents. (56,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (57,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (58,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (59,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (60,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (61,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (62,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (63,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (64,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (65,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (66,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (67,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (130,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (131,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (132,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (135,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (136,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (139,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (140,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (267,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (268,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (269,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (270,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (271,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (272,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (275,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (500,20): run-time error CSS1039: Token not allowed after unary operator: '-white' (501,15): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-charcoal' (619,31): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (623,33): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold_a50' (640,19): run-time error CSS1039: Token not allowed after unary operator: '-body-max-width' (641,22): run-time error CSS1039: Token not allowed after unary operator: '-min-edge-gap' (642,23): run-time error CSS1039: Token not allowed after unary operator: '-min-edge-gap' (645,19): run-time error CSS1039: Token not allowed after unary operator: '-body-max-width-sm' (648,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (649,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (652,38): run-time error CSS1039: Token not allowed after unary operator: '-number-of-columns' (655,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (658,20): run-time error CSS1039: Token not allowed after unary operator: '-gutter' (661,30): run-time error CSS1039: Token not allowed after unary operator: '-number-of-columns' (664,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter' (667,23): run-time error CSS1039: Token not allowed after unary operator: '-gutter' (670,21): run-time error CSS1039: Token not allowed after unary operator: '-gutter' (673,22): run-time error CSS1039: Token not allowed after unary operator: '-gutter' (970,24): run-time error CSS1039: Token not allowed after unary operator: '-min-edge-gap' (976,30): run-time error CSS1039: Token not allowed after unary operator: '-gray-medium' (1145,23): run-time error CSS1036: Expected expression, found '[' (1150,30): run-time error CSS1036: Expected expression, found '[' (1154,30): run-time error CSS1036: Expected expression, found '[' (1261,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1262,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1263,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1265,26): run-time error CSS1036: Expected expression, found '[' (1324,21): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (1390,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1391,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1392,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1394,26): run-time error CSS1036: Expected expression, found '[' (1447,31): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (1451,17): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (1463,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1464,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1486,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1487,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1488,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1490,26): run-time error CSS1036: Expected expression, found '[' (1551,31): run-time error CSS1039: Token not allowed after unary operator: '-min-edge-gap' (1551,53): run-time error CSS1039: Token not allowed after unary operator: '-gutter' (1605,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1606,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1607,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1609,26): run-time error CSS1036: Expected expression, found '[' (1868,31): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (1872,33): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold_a50' (1914,37): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (2024,24): run-time error CSS1039: Token not allowed after unary operator: '-gutter-width' (2027,30): run-time error CSS1039: Token not allowed after unary operator: '-gutter-width' (2028,19): run-time error CSS1039: Token not allowed after unary operator: '-gutter-width' (2043,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2047,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2051,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2111,19): run-time error CSS1039: Token not allowed after unary operator: '-gray-light' (2220,16): run-time error CSS1039: Token not allowed after unary operator: '-form-toggle-control-size' (2222,15): run-time error CSS1039: Token not allowed after unary operator: '-form-toggle-control-size' (2274,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2275,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2276,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2277,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2281,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2282,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2283,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2284,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2286,22): run-time error CSS1039: Token not allowed after unary operator: '-arrow-size' (2287,23): run-time error CSS1039: Token not allowed after unary operator: '-arrow-size' (2288,24): run-time error CSS1039: Token not allowed after unary operator: '-arrow-size' (2291,27): run-time error CSS1039: Token not allowed after unary operator: '-arrow-size' (2294,17): run-time error CSS1039: Token not allowed after unary operator: '-horizontal-padding' (2301,16): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (2308,19): run-time error CSS1039: Token not allowed after unary operator: '-form-control-font-size' (2311,26): run-time error CSS1039: Token not allowed after unary operator: '-padding-right' (2311,56): run-time error CSS1039: Token not allowed after unary operator: '-padding-left' (2314,15): run-time error CSS1039: Token not allowed after unary operator: '-gray-darkest' (2318,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2340,17): run-time error CSS1039: Token not allowed after unary operator: '-padding-right' (2344,16): run-time error CSS1039: Token not allowed after unary operator: '-icon-size' (2347,15): run-time error CSS1039: Token not allowed after unary operator: '-icon-right' (2350,15): run-time error CSS1039: Token not allowed after unary operator: '-icon-size' (2360,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2372,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2380,24): run-time error CSS1039: Token not allowed after unary operator: '-control-height' (2395,24): run-time error CSS1039: Token not allowed after unary operator: '-control-height' (2437,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-dark' (2451,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-dark' (2462,20): run-time error CSS1039: Token not allowed after unary operator: '-control-height' (2551,16): run-time error CSS1039: Token not allowed after unary operator: '-form-toggle-control-size' (2553,15): run-time error CSS1039: Token not allowed after unary operator: '-form-toggle-control-size' (2652,22): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (2658,22): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (2664,22): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3026,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3027,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3028,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3029,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3033,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3034,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3037,22): run-time error CSS1039: Token not allowed after unary operator: '-arrow-size' (3038,23): run-time error CSS1039: Token not allowed after unary operator: '-arrow-size' (3039,24): run-time error CSS1039: Token not allowed after unary operator: '-arrow-size' (3042,27): run-time error CSS1039: Token not allowed after unary operator: '-arrow-size' (3045,17): run-time error CSS1039: Token not allowed after unary operator: '-horizontal-padding' (3050,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3051,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3052,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3059,16): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (3066,19): run-time error CSS1039: Token not allowed after unary operator: '-form-control-font-size' (3069,26): run-time error CSS1039: Token not allowed after unary operator: '-padding-right' (3069,56): run-time error CSS1039: Token not allowed after unary operator: '-padding-left' (3072,15): run-time error CSS1039: Token not allowed after unary operator: '-gray-darkest' (3100,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-darkest' (3110,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3111,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3112,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3113,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3119,16): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (3126,19): run-time error CSS1039: Token not allowed after unary operator: '-form-control-font-size' (3129,26): run-time error CSS1039: Token not allowed after unary operator: '-padding-right' (3129,56): run-time error CSS1039: Token not allowed after unary operator: '-padding-left' (3132,15): run-time error CSS1039: Token not allowed after unary operator: '-gray-darkest' (3136,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3137,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3139,21): run-time error CSS1039: Token not allowed after unary operator: '-line-height' (3140,20): run-time error CSS1039: Token not allowed after unary operator: '-form-control-height' (3141,17): run-time error CSS1039: Token not allowed after unary operator: '-vertical-padding' (3141,41): run-time error CSS1039: Token not allowed after unary operator: '-horizontal-padding' (3154,18): run-time error CSS1039: Token not allowed after unary operator: '-form-control-height' (3156,23): run-time error CSS1039: Token not allowed after unary operator: '-form-control-height' (3156,57): run-time error CSS1039: Token not allowed after unary operator: '-line-height' (3158,23): run-time error CSS1039: Token not allowed after unary operator: '-form-control-height' (3158,57): run-time error CSS1039: Token not allowed after unary operator: '-line-height' (3160,23): run-time error CSS1039: Token not allowed after unary operator: '-form-control-height' (3160,57): run-time error CSS1039: Token not allowed after unary operator: '-line-height' (3162,23): run-time error CSS1039: Token not allowed after unary operator: '-form-control-height' (3162,57): run-time error CSS1039: Token not allowed after unary operator: '-line-height' (3164,23): run-time error CSS1039: Token not allowed after unary operator: '-form-control-height' (3164,57): run-time error CSS1039: Token not allowed after unary operator: '-line-height' (3166,23): run-time error CSS1039: Token not allowed after unary operator: '-form-control-height' (3166,57): run-time error CSS1039: Token not allowed after unary operator: '-line-height' (3168,23): run-time error CSS1039: Token not allowed after unary operator: '-form-control-height' (3168,57): run-time error CSS1039: Token not allowed after unary operator: '-line-height' (3170,23): run-time error CSS1039: Token not allowed after unary operator: '-form-control-height' (3170,57): run-time error CSS1039: Token not allowed after unary operator: '-line-height' (3172,23): run-time error CSS1039: Token not allowed after unary operator: '-form-control-height' (3172,57): run-time error CSS1039: Token not allowed after unary operator: '-line-height' (3181,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3182,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3183,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3184,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3190,16): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (3197,19): run-time error CSS1039: Token not allowed after unary operator: '-form-control-font-size' (3200,26): run-time error CSS1039: Token not allowed after unary operator: '-padding-right' (3200,56): run-time error CSS1039: Token not allowed after unary operator: '-padding-left' (3203,15): run-time error CSS1039: Token not allowed after unary operator: '-gray-darkest' (3208,15): run-time error CSS1039: Token not allowed after unary operator: '-gray-darkest' (3227,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3228,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3229,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3230,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3236,16): run-time error CSS1039: Token not allowed after unary operator: '-border-width' (3243,19): run-time error CSS1039: Token not allowed after unary operator: '-form-control-font-size' (3246,26): run-time error CSS1039: Token not allowed after unary operator: '-padding-right' (3246,56): run-time error CSS1039: Token not allowed after unary operator: '-padding-left' (3249,15): run-time error CSS1039: Token not allowed after unary operator: '-gray-darkest' (3254,15): run-time error CSS1039: Token not allowed after unary operator: '-gray-darkest' (3305,20): run-time error CSS1039: Token not allowed after unary operator: '-form-toggle-control-size' (3327,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3329,21): run-time error CSS1039: Token not allowed after unary operator: '-label-line-height' (3330,27): run-time error CSS1039: Token not allowed after unary operator: '-form-toggle-control-size' (3330,61): run-time error CSS1039: Token not allowed after unary operator: '-label-line-height' (3340,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3415,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3454,26): run-time error CSS1039: Token not allowed after unary operator: '-gutter-width' (3480,38): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3490,42): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3513,26): run-time error CSS1039: Token not allowed after unary operator: '-gutter-width' (3520,39): run-time error CSS1039: Token not allowed after unary operator: '-gutter-width' (3522,35): run-time error CSS1039: Token not allowed after unary operator: '-gutter-width' (3544,26): run-time error CSS1039: Token not allowed after unary operator: '-gray-darkest' (3548,15): run-time error CSS1039: Token not allowed after unary operator: '-white' (3559,26): run-time error CSS1039: Token not allowed after unary operator: '-gray-pale' (3570,26): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3618,26): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-black' (3631,36): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-black' (3643,35): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-black' (3648,28): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3650,30): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3652,29): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3673,26): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-black' (3674,15): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-black' (3686,28): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3687,17): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3760,50): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3771,15): run-time error CSS1039: Token not allowed after unary operator: '-white' (3789,15): run-time error CSS1039: Token not allowed after unary operator: '-gray-light' (3803,15): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3842,17): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3863,15): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3883,31): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3886,17): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3908,17): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3914,15): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3984,32): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3992,28): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (3993,17): run-time error CSS1039: Token not allowed after unary operator: '-gray-darkest' (4081,19): run-time error CSS1039: Token not allowed after unary operator: '-body-max-width' (4082,22): run-time error CSS1039: Token not allowed after unary operator: '-min-edge-gap' (4083,23): run-time error CSS1039: Token not allowed after unary operator: '-min-edge-gap' (4088,22): run-time error CSS1039: Token not allowed after unary operator: '-min-edge-gap' (4089,23): run-time error CSS1039: Token not allowed after unary operator: '-min-edge-gap' (4159,15): run-time error CSS1039: Token not allowed after unary operator: '-gray-medium' (4169,20): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-black' (4181,17): run-time error CSS1039: Token not allowed after unary operator: '-z-flyout-nav' (4199,15): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (4229,33): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (4256,30): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (4519,26): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-charcoal' (4520,15): run-time error CSS1039: Token not allowed after unary operator: '-white' (4552,15): run-time error CSS1039: Token not allowed after unary operator: '-min-edge-gap' (4608,26): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-charcoal' (4609,15): run-time error CSS1039: Token not allowed after unary operator: '-white' (4732,15): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (4736,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (4765,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (5769,15): run-time error CSS1039: Token not allowed after unary operator: '-gray-darkest' (5773,28): run-time error CSS1039: Token not allowed after unary operator: '-gray-pale' (5784,26): run-time error CSS1039: Token not allowed after unary operator: '-white' (5801,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5802,25): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (5803,23): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (5804,24): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (5805,22): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (5805,49): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (5860,28): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-black' (5867,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5875,15): run-time error CSS1039: Token not allowed after unary operator: '-size' (5876,16): run-time error CSS1039: Token not allowed after unary operator: '-size' (5877,28): run-time error CSS1039: Token not allowed after unary operator: '-size' (5877,51): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (5878,27): run-time error CSS1039: Token not allowed after unary operator: '-size' (5878,50): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (5879,25): run-time error CSS1039: Token not allowed after unary operator: '-size' (5880,26): run-time error CSS1039: Token not allowed after unary operator: '-size' (5883,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5886,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5894,15): run-time error CSS1039: Token not allowed after unary operator: '-size' (5895,16): run-time error CSS1039: Token not allowed after unary operator: '-size' (5896,28): run-time error CSS1039: Token not allowed after unary operator: '-size' (5896,51): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (5897,27): run-time error CSS1039: Token not allowed after unary operator: '-size' (5897,50): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (5898,25): run-time error CSS1039: Token not allowed after unary operator: '-size' (5899,26): run-time error CSS1039: Token not allowed after unary operator: '-size' (5902,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5905,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5906,19): run-time error CSS1039: Token not allowed after unary operator: '-adjustment' (5907,15): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-black' (5910,13): run-time error CSS1039: Token not allowed after unary operator: '-adjustment' (5911,14): run-time error CSS1039: Token not allowed after unary operator: '-adjustment' (5917,7): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (5940,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (6223,15): run-time error CSS1039: Token not allowed after unary operator: '-gray-darkest' (6328,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6333,18): run-time error CSS1039: Token not allowed after unary operator: '-loading-icon-size' (6335,23): run-time error CSS1039: Token not allowed after unary operator: '-loading-icon-size' (6335,65): run-time error CSS1039: Token not allowed after unary operator: '-loading-icon-size' (6341,17): run-time error CSS1039: Token not allowed after unary operator: '-loading-icon-size' (6360,17): run-time error CSS1039: Token not allowed after unary operator: '-min-edge-gap' (6363,28): run-time error CSS1039: Token not allowed after unary operator: '-min-edge-gap' (6398,15): run-time error CSS1039: Token not allowed after unary operator: '-white' (6399,26): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-charcoal' (6413,26): run-time error CSS1039: Token not allowed after unary operator: '-gray-light' (6416,15): run-time error CSS1039: Token not allowed after unary operator: '-gray-medium' (6419,15): run-time error CSS1039: Token not allowed after unary operator: '-gray-dark' (6425,26): run-time error CSS1039: Token not allowed after unary operator: '-wolfbrook-gold' (6457,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6458,30): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (6459,27): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (6469,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6472,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6475,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6478,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6480,28): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (6488,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6489,30): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (6490,27): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (6500,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6503,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6506,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6509,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6511,29): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (6519,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6520,30): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (6521,27): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (6531,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6534,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6537,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6540,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6542,28): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (6550,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6551,30): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (6552,27): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' (6562,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6565,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6568,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6571,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (6573,29): run-time error CSS1039: Token not allowed after unary operator: '-chevron-width' */ @charset "UTF-8"; /** * MASTER * * @Project : Project Name * @Author : AuthorName [author.name@nvinteractive.com] * */ @import url("https://cdnjs.cloudflare.com/ajax/libs/Swiper/8.1.5/swiper-bundle.min.css"); @viewport { width: device-width; zoom: 1; } /** * 1. SETTINGS */ /** * SETTINGS.BREAKPOINTS * * @description : Define major breakpoints * */ /* * Generic Breakpoint Definitions * Used in min-width media queries. */ /* * Custom Breakpoint Definitions * Used when many styles need to change together within an object/component. */ /** * SETTINGS.COLORS * * @description : Color variable definitions * */ /* * Official Brand Colors * Named as a combination of the brand name + color, e.g. $nv-black. */ /* * Other Brand Colors * Other shades leveraged just for the site design. * Named as a combination of the color + exact shade, e.g. $brown-dark. */ /* * Utility Colors * Other colors not part of the design which are useful for special effects e.g. focus/hover states. * Named as a combination of the color + exact shade, e.g. $gray-light. */ /* * Base Colors * Configured on :root and can be referenced elsewhere. */ :root { --wolfbrook-black: #080808; --wolfbrook-charcoal: #1d1c1b; --wolfbrook-gold: #e4b611; --wolfbrook-gold_a50: rgba(228, 182, 17, 0.5); --wolfbrook-gold_a10: rgba(228, 182, 17, 0.1); --gray-darkest: #2A2927; --gray-dark: #93918F; --gray-medium: #d2cfcb; --gray-light: #D3CFCB; --gray-pale: #F5F2EF; --gray-palest: #FBFAF9; --white: #fff; } /** * SETTINGS.FOCUS * * @description : * */ /** * SETTINGS.FONT * * @description : * */ /* * Font Family Definitions * Add font stacks here for all typefaces used in the design. */ /* * Base Font Settings * Configured on :root and can be referenced elsewhere. */ /** * SETTINGS.FORM * * @description : Common display settings for form fields/controls. * */ /** * TOOLS.FUNCTIONS * * @description : Common functions * */ /** * Strip Unit * @desc : Strips the unit from a value to we can use it for calculations * @source : https://css-tricks.com/snippets/sass/strip-unit-function/ * @param : $num - Number to remove unit from * @return : Unitless value */ /** * REM Calc * @desc : Converts px values to REMs * @param : $val - The value to convert (usually passed in px but unit may be omitted) * @param : $base – Optional parameter, passed if you'd like to calculate with a different base font size * @param : $base-font-size – The default font size (defined in _settings.base.scss) * @return : $rems - rem-converted value */ /** * Decimal-Round * @desc : Rounds a floating point number to the nearest whole number * @param : $number - The number to be rounded. must be unitless. */ /** * Decimal-Floor * @desc : Rounds a floating point number down to the nearest whole number */ /** * Spacer * @desc : Returns a simple multipled value, converted to rem */ :root { --form-control-font-size: 1rem; --form-control-height: 2.875rem; --form-toggle-control-size: 1rem; } @media (min-width: 480px) { :root { --form-control-height: 3rem; --form-toggle-control-size: 1.125rem; } } @media (min-width: 1024px) { :root { --form-control-height: 3.125rem; --form-toggle-control-size: 1.25rem; } } /** * SETTINGS.GRID * * @description : * */ /** * 2. TOOLS */ /** * TOOLS.FUNCTIONS * * @description : Common functions * */ /** * Strip Unit * @desc : Strips the unit from a value to we can use it for calculations * @source : https://css-tricks.com/snippets/sass/strip-unit-function/ * @param : $num - Number to remove unit from * @return : Unitless value */ /** * REM Calc * @desc : Converts px values to REMs * @param : $val - The value to convert (usually passed in px but unit may be omitted) * @param : $base – Optional parameter, passed if you'd like to calculate with a different base font size * @param : $base-font-size – The default font size (defined in _settings.base.scss) * @return : $rems - rem-converted value */ /** * Decimal-Round * @desc : Rounds a floating point number to the nearest whole number * @param : $number - The number to be rounded. must be unitless. */ /** * Decimal-Floor * @desc : Rounds a floating point number down to the nearest whole number */ /** * Spacer * @desc : Returns a simple multipled value, converted to rem */ /** * TOOLS.MIXIN.BASE-GRID * * @description : * */ /** * TOOLS.MIXIN.BG-DECORATIONS * * @description : Force an element to self-clear floated children * */ /** * TOOLS.MIXIN.CLEARFIX * * @description : Force an element to self-clear floated children * */ /** * MIXIN.COPY * * @description : Main body copy styles * */ /** * MIXIN.FORMS * * @description : * */ /** * form-control * Provides the generic look and feel to form elements * that have a consistent size/border/spacing despite harnessing * different input styles (date picker, text box, select, etc.). */ /** * MIXIN.HEADINGS * * @description : Main heading styles * */ /** * TOOLS.MIXIN.CLEARFIX * * @description : * */ /** * MIXIN.COPY * * @description : Main body copy styles * */ /** * MIXIN.TARGET-BROWSERS * * @description : Target any browser with a unique media query. Only to be used in exceptional cases (to combat browser bugs). * */ /** * MIXIN.COPY * * @description : * */ /** * TOOLS.MIXINS.FLUID_TYPE * * @description : Interpolate font size between a min and max * */ /** * 3. GENERIC */ /** * GENERIC.GUIDES * * @description : CSS custom properties for constraining regular site content. * */ :root { --scrollbar-width: 0; --inner-100vw: calc(100vw - var(--scrollbar-width)); --body-max-width: 88.5rem; --body-max-width-sm: 73.74971rem; --body-max-width-xs: 68.75rem; --min-edge-gap: 1.25rem; } @media (min-width: 1024px) { :root { --min-edge-gap: 2rem; } } /** * GENERIC.PRINT * * @description : Sets up the page for print styles * */ @page { margin: 1cm 0.5cm; } /** * GENERIC.RESET * * @description : Include your desired reset here. * Default is Eric Meyer's reset * */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } body { line-height: 1; } ol[role='list'], ul[role='list'] { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } figure { margin: 0; padding: 0; } button { all: unset; box-sizing: inherit; } /** * GENERIC.BOXSIZING * * @description : Sets global box-sizing * @reference : https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ * */ *, *::before, *::after { box-sizing: border-box; } /** * GENERIC.FONTS.GOOD-SANS * * @description : https://goodtypefoundry.com/goodsans/ * */ @font-face { font-family: 'GoodSans-Medium'; font-style: normal; src: url("/fonts/good-sans/goodsans-medium.woff2") format("woff2"), url("/fonts/good-sans/goodsans-medium.woff") format("woff"), url("/fonts/good-sans/goodsans-medium.eot") format("embedded-opentype"); } /** * GENERIC.FONTS.MATTER * * @description : https://displaay.net/typeface/matter-collection/matter/ * */ @font-face { font-family: 'Matter'; font-style: normal; font-weight: 400; src: url("/fonts/matter/matter-regular.woff2") format("woff2"), url("/fonts/matter/matter-regular.woff") format("woff"), url("/fonts/matter/matter-regular.eot") format("embedded-opentype"); } @font-face { font-family: 'Matter'; font-style: normal; font-weight: 500; src: url("/fonts/matter/matter-medium.woff2") format("woff2"), url("/fonts/matter/matter-medium.woff") format("woff"), url("/fonts/matter/matter-medium.eot") format("embedded-opentype"); } @font-face { font-family: 'Matter'; font-style: normal; font-weight: 600; src: url("/fonts/matter/matter-semibold.woff2") format("woff2"), url("/fonts/matter/matter-semibold.woff") format("woff"), url("/fonts/matter/matter-semibold.eot") format("embedded-opentype"); } @font-face { font-family: 'Matter'; font-style: normal; font-weight: 700; src: url("/fonts/matter/matter-bold.woff2") format("woff2"), url("/fonts/matter/matter-bold.woff") format("woff"), url("/fonts/matter/matter-bold.eot") format("embedded-opentype"); } /** * 4. ELEMENTS * Basic styles for raw HTML elements * No classes here */ /** * ELEMENTS.BASE * * @description : Base element styles for html and body elements. * */ html { font-size: 16px; scroll-behavior: smooth; } html ::selection { background-color: rgba(228, 182, 17, 0.8); } @media print { html { font-size: 12px; } } body { background: var(--white); color: var(--wolfbrook-charcoal); font-family: "GoodSans-Medium", sans-serif; font-weight: 400; line-height: 1.5; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ul, ol { list-style: none; } /** * ELEMENTS.DISABLED * * @description : Default styles for disabled elements * */ .disabled, *:disabled, [disabled] { cursor: default; opacity: 0.5; pointer-events: none; } /** * ELEMENTS.FOCUS * * @description : Focus styles * */ a, button, input, select, textarea, [tabindex] { box-shadow: 0 0 0 0.1875rem rgba(228, 182, 17, 0); outline: 0; } a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus { outline: 0; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { box-shadow: 0 0 0 0.1875rem rgba(228, 182, 17, 0.2); outline: 0; } select:focus { box-shadow: 0 0 0 0.1875rem rgba(228, 182, 17, 0.2); outline: 0; } /** * ELEMENTS.FORMS * * @description : Core form styles * */ button, [type='reset'], [type='submit'], [type='image'] { appearance: none; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; } button, input, select, textarea { background: transparent; border: 0; border-radius: 0; font: inherit; margin: 0; } ::placeholder { color: #d2cfcb; opacity: 1; } /** * ELEMENTS.HIDDEN * * @description : Default styles for hidden elements * */ [hidden] { display: none !important; } /** * ELEMENTS.IMAGES * * @description : Basic image styles * */ body:not(.no-js) [onload*='markAsLoaded'], body:not(.no-js) [data-vue-mark-as-loaded] { opacity: 0; transition: 0.3s; } body:not(.no-js) [onload*='markAsLoaded'].has-loaded, body:not(.no-js) [data-vue-mark-as-loaded].has-loaded { opacity: 1; } img, svg { display: block; max-width: 100%; height: auto; } /** * ELEMENTS.INLINE * * @description : Basic typographical styles for inline elements * */ * { text-decoration-skip-ink: auto; } a { color: inherit; text-decoration: none; } p a { text-decoration: underline; text-decoration-color: var(--wolfbrook-gold); text-underline-offset: 0.5em; transition: text-decoration-color 0.15s ease; } p a:hover { text-decoration-color: var(--wolfbrook-gold_a50); } /** * 5. OBJECTS * These are repeating visual/structural patterns with no 'design' added * Must be built with classes only */ /** * OBJECTS.GRID * * @description : * */ .b { box-sizing: content-box; margin-left: auto; margin-right: auto; max-width: var(--body-max-width); padding-left: var(--min-edge-gap); padding-right: var(--min-edge-gap); } .b-s { max-width: var(--body-max-width-sm); } .g { --number-of-columns: 12; --gutter: 1rem; display: grid; grid-gap: 0; grid-template-columns: repeat(var(--number-of-columns), 1fr); } @media (min-width: 768px) { .g { --gutter: 2rem; } } .g-m { column-gap: var(--gutter); } .gi { grid-column-end: span var(--number-of-columns); } .gi-pl, .gi-p { padding-left: var(--gutter); } .gi-pr, .gi-p { padding-right: var(--gutter); } .gi-ml, .gi-m { margin-left: var(--gutter); } .gi-mr, .gi-m { margin-right: var(--gutter); } .gi-1 { grid-column-end: span 1; } .gi-2 { grid-column-end: span 2; } .gi-3 { grid-column-end: span 3; } .gi-4 { grid-column-end: span 4; } .gi-5 { grid-column-end: span 5; } .gi-6 { grid-column-end: span 6; } .gi-7 { grid-column-end: span 7; } .gi-8 { grid-column-end: span 8; } .gi-9 { grid-column-end: span 9; } .gi-10 { grid-column-end: span 10; } .gi-11 { grid-column-end: span 11; } .gi-12 { grid-column-end: span 12; } .gi-in-1 { grid-column-end: span 1; } .gi-in-2 { grid-column-end: span 2; } .gi-in-3 { grid-column-end: span 3; } .gi-in-4 { grid-column-end: span 4; } .gi-in-5 { grid-column-end: span 5; } .gi-in-6 { grid-column-end: span 6; } .gi-in-7 { grid-column-end: span 7; } .gi-in-8 { grid-column-end: span 8; } .gi-in-9 { grid-column-end: span 9; } .gi-in-10 { grid-column-end: span 10; } .gi-in-11 { grid-column-end: span 11; } @media (min-width: 480px) { .gi-sm-1 { grid-column-end: span 1; } .gi-sm-2 { grid-column-end: span 2; } .gi-sm-3 { grid-column-end: span 3; } .gi-sm-4 { grid-column-end: span 4; } .gi-sm-5 { grid-column-end: span 5; } .gi-sm-6 { grid-column-end: span 6; } .gi-sm-7 { grid-column-end: span 7; } .gi-sm-8 { grid-column-end: span 8; } .gi-sm-9 { grid-column-end: span 9; } .gi-sm-10 { grid-column-end: span 10; } .gi-sm-11 { grid-column-end: span 11; } .gi-sm-12 { grid-column-end: span 12; } } @media (min-width: 768px) { .gi-md-1 { grid-column-end: span 1; } .gi-md-2 { grid-column-end: span 2; } .gi-md-3 { grid-column-end: span 3; } .gi-md-4 { grid-column-end: span 4; } .gi-md-5 { grid-column-end: span 5; } .gi-md-6 { grid-column-end: span 6; } .gi-md-7 { grid-column-end: span 7; } .gi-md-8 { grid-column-end: span 8; } .gi-md-9 { grid-column-end: span 9; } .gi-md-10 { grid-column-end: span 10; } .gi-md-11 { grid-column-end: span 11; } .gi-md-12 { grid-column-end: span 12; } } @media (min-width: 1024px) { .gi-lg-1 { grid-column-end: span 1; } .gi-lg-2 { grid-column-end: span 2; } .gi-lg-3 { grid-column-end: span 3; } .gi-lg-4 { grid-column-end: span 4; } .gi-lg-5 { grid-column-end: span 5; } .gi-lg-6 { grid-column-end: span 6; } .gi-lg-7 { grid-column-end: span 7; } .gi-lg-8 { grid-column-end: span 8; } .gi-lg-9 { grid-column-end: span 9; } .gi-lg-10 { grid-column-end: span 10; } .gi-lg-11 { grid-column-end: span 11; } .gi-lg-12 { grid-column-end: span 12; } } @media (min-width: 1440px) { .gi-xl-1 { grid-column-end: span 1; } .gi-xl-2 { grid-column-end: span 2; } .gi-xl-3 { grid-column-end: span 3; } .gi-xl-4 { grid-column-end: span 4; } .gi-xl-5 { grid-column-end: span 5; } .gi-xl-6 { grid-column-end: span 6; } .gi-xl-7 { grid-column-end: span 7; } .gi-xl-8 { grid-column-end: span 8; } .gi-xl-9 { grid-column-end: span 9; } .gi-xl-10 { grid-column-end: span 10; } .gi-xl-11 { grid-column-end: span 11; } .gi-xl-12 { grid-column-end: span 12; } } @media (min-width: 1680px) { .gi-xxl-1 { grid-column-end: span 1; } .gi-xxl-2 { grid-column-end: span 2; } .gi-xxl-3 { grid-column-end: span 3; } .gi-xxl-4 { grid-column-end: span 4; } .gi-xxl-5 { grid-column-end: span 5; } .gi-xxl-6 { grid-column-end: span 6; } .gi-xxl-7 { grid-column-end: span 7; } .gi-xxl-8 { grid-column-end: span 8; } .gi-xxl-9 { grid-column-end: span 9; } .gi-xxl-10 { grid-column-end: span 10; } .gi-xxl-11 { grid-column-end: span 11; } .gi-xxl-12 { grid-column-end: span 12; } } .o-build-timeline-layout { display: grid; gap: 3.125rem; grid-template-columns: 1fr; } @media (min-width: 768px) { .o-build-timeline-layout { grid-template-columns: repeat(3, 1fr); gap: 6.25rem 2.1875rem; } } .o-build-timeline-layout__item .c-rich-text { max-width: 21.875rem; } @media (min-width: 768px) { .o-build-timeline-layout__item:nth-of-type(8n-7) { grid-column: span 2; } } @media (min-width: 768px) { .o-build-timeline-layout__item:nth-of-type(8n-6) { padding-top: 17.5rem; } } @media (min-width: 768px) { .o-build-timeline-layout__item:nth-of-type(8n-4) { grid-column: span 2; } } @media (min-width: 768px) { .o-build-timeline-layout__item:nth-of-type(8n-3) { padding-top: 17.5rem; } } @media (min-width: 768px) { .o-build-timeline-layout__item:nth-of-type(8n-2) { grid-column: span 2; } } @media (min-width: 768px) { .o-build-timeline-layout__item:nth-of-type(8n-1) { grid-column: 2 / 2; } } @media (min-width: 768px) { .o-build-timeline-layout__item:nth-of-type(8n+1) { grid-column: span 2; } } @media (min-width: 768px) { .o-build-timeline-layout__item:nth-of-type(8n+2) { padding-top: 17.5rem; } } /** * OBJECTS.CAROUSEL * * @description : * */ .o-carousel { padding: 0 0.625rem; position: relative; } @media (min-width: 480px) { .o-carousel { padding: 0 1.25rem; } } @media (min-width: 1440px) { .o-carousel { padding: 0 9.375rem; } } .o-carousel__prev { left: -1rem; flex-direction: row-reverse; } @media (min-width: 1680px) { .o-carousel__prev { left: -2rem; } } .o-carousel__next { right: -1rem; } @media (min-width: 1680px) { .o-carousel__next { right: -2rem; } } .o-common-modal-layout { position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: 9001; background: rgba(0, 0, 0, 0.95); } .o-common-modal__close { position: absolute; right: 2.5rem; top: 1.875rem; } @media (min-width: 768px) { .o-common-modal__close { right: 2.875rem; } } .o-common-modal__center, .o-common-modal__grid { height: 100%; } .o-common-modal__grid { padding-top: 6.25rem; padding-bottom: var(--min-edge-gap); } .o-common-modal__grid--scroll { overflow-y: auto; } .o-common-modal__grid--scroll::-webkit-scrollbar { width: 2px; } .o-common-modal__grid--scroll::-webkit-scrollbar-thumb { background-color: var(--gray-medium); outline: none; } .o-common-modal__inner { display: flex; flex-direction: column; } .o-common-modal__main { flex: 1; width: 100%; box-sizing: border-box; } .o-common-modal__title { padding-top: 2.75rem; padding-bottom: 1.625rem; } .o-common-modal__iframe { width: 100%; height: 100%; } /** * OBJECTS.CONTROL-BAR * * @description : * */ .o-control-bar { display: block; margin-top: 1.5rem; } .o-control-bar__list { align-items: center; display: flex; flex-flow: row wrap; gap: 2rem 3rem; justify-content: flex-start; } .o-control-bar__item { display: block; } .o-control-bar--grow .o-control-bar__item { flex: 1 1 0; } /** * OBJECTS.CTA-LAYOUT * * @description : * */ .o-cta-layout { display: flex; flex-flow: row wrap; } .o-cta-layout--image-on-right { flex-direction: row-reverse; } .o-cta-layout__media-block { flex: 1 1 50%; min-width: 18.75rem; } .o-cta-layout__text-block { flex: 1 1 50%; min-width: 18.75rem; padding: 1.875rem 3.125rem; } @media (min-width: 480px) { .o-cta-layout__text-block { padding: 3.125rem; } } @media (min-width: 768px) { .o-cta-layout__text-block { padding: 2.5rem 3.125rem; } } @media (min-width: 1024px) { .o-cta-layout__text-block { padding: 5rem 6.25rem; } } @media (min-width: 1024px) { .o-cta-layout__text-block .c-rich-text { max-width: 31.25rem; } } /** * OBJECTS.MODULE * * @description : * */ .o-feature-text { display: flex; flex-flow: column; gap: 1.375rem; } @media (min-width: 480px) { .o-feature-text { flex-flow: row wrap; gap: 2.5rem 5rem; padding-right: 1.25rem; } } @media (min-width: 768px) { .o-feature-text { padding-left: 2.5rem; padding-right: 2.5rem; } } @media (min-width: 1024px) { .o-feature-text { padding-left: 3.75rem; padding-right: 3.75rem; } } .o-feature-text--vertical { flex-flow: column; } .o-feature-text--align-bottom { justify-content: flex-end; } .o-feature-text__left, .o-feature-text__right { flex: 1 1 0; } @media (min-width: 480px) { .o-feature-text__left, .o-feature-text__right { min-width: 25rem; } } .o-feature-text__left--project-detail { max-width: 55.625rem; } /** * OBJECTS.FIELD-SET * * @description : * */ .o-field-set { display: flex; flex-flow: row wrap; gap: 0.25rem 1.25rem; } @media (min-width: 768px) { .o-field-set { gap: 4.0625rem 2.5rem; } } .o-field-set--extra-spacing { gap: 2rem 1.875rem; } @media (min-width: 480px) { .o-field-set--extra-spacing { gap: 2.5rem 3.125rem; } } @media (min-width: 768px) { .o-field-set--extra-spacing { gap: 4.0625rem 4.375rem; } } .o-field-set--vertical { display: grid; gap: 2rem; } @media (min-width: 1440px) { .o-field-set--vertical { gap: 3.375rem 2.5rem; } } .o-field-set__item { flex: 0 1 auto; max-width: 25rem; } .o-field-set--vertical .o-field-set__item { max-width: none; } .o-field-set__item--grow { flex-grow: 1; margin: auto; } @media (min-width: 480px) { .o-field-set__item--grow { min-width: 12.5rem; } } .o-toggle-field-set--row-layout { height: 100%; align-items: center; } .o-field-set__item--row { max-width: 100% !important; } .o-footer__inner { display: grid; grid-template-rows: [row-start] min-content [row-end] 1.875rem [row2-start] min-content [row2-end]; grid-template-columns: 1fr; } @media (min-width: 768px) { .o-footer__inner { grid-template-rows: 1fr; grid-template-columns: [subscribe-start] 1fr [subscribe-end] 100px [columns-start] 1fr [columns-end]; } } @media (min-width: 1440px) { .o-footer__inner { grid-template-rows: 1fr; grid-template-columns: [subscribe-start] 1fr [subscribe-end] 200px [columns-start] 1fr [columns-end]; } } /** * OBJECTS.GRID-FORM * * @description : * */ .o-grid-form { display: grid; grid-template-columns: auto; } @media (min-width: 1024px) { .o-grid-form { grid-template-columns: auto min-content; } } .o-grid-form__fields-block { grid-column: 1; } @media (min-width: 1024px) { .o-grid-form__fields-block { padding-right: 10%; } } @media (min-width: 1440px) { .o-grid-form__fields-block { padding-right: 15%; } } .o-grid-form__submit-block { margin-top: auto; } @media (min-width: 1024px) { .o-grid-form__submit-block { grid-column: 2; } } @media (min-width: 1440px) { .o-grid-form__submit-block { min-width: 18.75rem; } } /** * OBJECTS.HEADING-LAYOUT * * @description : * */ .o-heading-layout { align-items: flex-end; display: flex; flex-flow: row wrap; gap: 2.5rem 4.375rem; justify-content: space-between; } .o-heading-layout__control-bar { margin-right: auto; } .o-home_hero { padding-bottom: 0; } @media (min-width: 480px) { .o-home_hero { padding-bottom: 3.125rem; } } .o-home_hero__inner { grid-column-start: 1; } @media (min-width: 1440px) { .o-home_hero__inner { grid-column-start: 2; } } .o-image-cards-3-column { display: grid; grid-template: auto / auto; gap: 5rem 2.1875rem; } @media (min-width: 768px) { .o-image-cards-3-column { grid-template: 1fr/repeat(2, 1fr); } } @media (min-width: 1024px) { .o-image-cards-3-column { grid-template: 1fr/repeat(3, 1fr); } } @media (min-width: 768px) { .o-image-cards-3-column__description { max-width: 21.875rem; } } .o-indicator__right { position: relative; } .o-indicator__right::after { content: ''; position: absolute; right: 0; bottom: 0; border-right: 6.25rem solid #e4b611; border-top: 7.1875rem solid transparent; border-bottom: 7.1875rem solid transparent; transform: translateY(50%); } .o-indicator__left { position: relative; } .o-indicator__left::after { content: ''; position: absolute; left: 0; top: 0; border-left: 6.25rem solid #e4b611; border-top: 7.1875rem solid transparent; border-bottom: 7.1875rem solid transparent; transform: translateY(-50%); } /** * OBJECTS.MAGAZINE-LAYOUT * * @description : * */ .o-magazine-layout { --available-grid-space: calc(var(--inner-100vw) - (var(--min-edge-gap) * 2)); --total-gutter-space: max(0px, var(--available-grid-space) - var(--body-max-width)); --gutter: calc(var(--total-gutter-space) / 2); display: grid; grid-template-columns: [left-edge-start] var(--min-edge-gap) [left-edge-end left-gutter-start] var(--gutter) [left-gutter-end content-start] repeat(12, [col-start] 1fr [col-end]) [content-end right-gutter-start] var(--gutter) [right-gutter-end right-edge-start] var(--min-edge-gap) [right-edge-end]; } .o-magazine-layout__media-block { grid-column: left-gutter-start / right-gutter-end; grid-row: 1; } @media (min-width: 768px) { .o-magazine-layout__media-block { grid-column: col-start 2 / span 10; } } @media (min-width: 1024px) { .o-magazine-layout__media-block { grid-column: col-start 3 / span 8; } } .o-magazine-layout--with-sidebar .o-magazine-layout__media-block { grid-column: left-gutter-start / right-gutter-end; } @media (min-width: 480px) { .o-magazine-layout--with-sidebar .o-magazine-layout__media-block { grid-column: col-start 6 / span 9; } } @media (min-width: 1024px) { .o-magazine-layout--with-sidebar .o-magazine-layout__media-block { grid-column: col-start 7 / span 8; } } .o-magazine-layout--with-icon .o-magazine-layout__media-block { grid-column: left-edge-start / span 10; } .o-magazine-layout__text-block { grid-column: left-gutter-start / right-gutter-end; grid-row: 2; } @media (min-width: 768px) { .o-magazine-layout__text-block { grid-column: col-start 3 / span 8; } } @media (min-width: 1024px) { .o-magazine-layout__text-block { grid-column: col-start 4 / span 6; } } .o-magazine-layout--with-sidebar .o-magazine-layout__text-block { grid-column: left-gutter-start / right-gutter-end; } @media (min-width: 480px) { .o-magazine-layout--with-sidebar .o-magazine-layout__text-block { grid-column: col-start 6 / span 7; } } @media (min-width: 1024px) { .o-magazine-layout--with-sidebar .o-magazine-layout__text-block { grid-column: col-start 7 / span 6; } } .o-magazine-layout--with-icon .o-magazine-layout__text-block { grid-column: col-start 1 / span 7; } .o-magazine-layout__sidebar-block { grid-column: left-gutter-start / right-gutter-end; } @media (min-width: 480px) { .o-magazine-layout__sidebar-block { grid-column: col-start / span 4; grid-row: 1 / span 2; } } @media (min-width: 1024px) { .o-magazine-layout__sidebar-block { grid-column: col-start 2 / span 4; } } .o-magazine-layout__icon-block { align-self: flex-end; grid-column: col-start 10 / span 2; grid-row: 1; } .o-main-layout { width: 100%; padding-top: var(--header-height); } .o-main-layout__share-modal { z-index: 150; } .o-main-layout__video-modal { bottom: 0; left: 0; position: fixed !important; right: 0; top: 0; z-index: 20000; } /** * OBJECTS.MODULE * * @description : * */ .o-module { float: left; width: 100%; } .o-module * .o-module { clear: left; } .o-module--overflow-hidden { overflow: hidden; } /** * OBJECTS.MODULE-SET * * @description : * */ .o-module-set { display: block; } .o-module-set__list { display: block; } .o-module-set__item::after { content: ''; display: block; clear: both; } /** * OBJECTS.MULTI-CONTROL * * @description : * */ .o-multi-control { display: flex; flex-flow: row wrap; gap: 0.875rem; } .o-multi-control__control { flex: 1 1 0; } /** * OBJECTS.POPOUT-LAYOUT * * @description : * */ .o-popout-layout { --available-grid-space: calc(var(--inner-100vw) - (var(--min-edge-gap) * 2)); --total-gutter-space: max(0px, var(--available-grid-space) - var(--body-max-width)); --gutter: calc(var(--total-gutter-space) / 2); display: grid; grid-template-columns: [left-edge-start] var(--min-edge-gap) [left-edge-end left-gutter-start] var(--gutter) [left-gutter-end content-start] repeat(12, [col-start] 1fr [col-end]) [content-end right-gutter-start] var(--gutter) [right-gutter-end right-edge-start] var(--min-edge-gap) [right-edge-end]; position: relative; z-index: 2; } .o-popout-layout__main-block { grid-column: col-start 1 / span 12; grid-row: 2; } @media (min-width: 768px) { .o-popout-layout__main-block { grid-column: col-start 1 / span 6; grid-row: 1; } } .o-popout-layout__popout-block { grid-column: col-start 1 / span 12; margin-top: -1.875rem; z-index: 2; grid-row: 1; padding: 1.625rem 1.25rem; } @media (min-width: 480px) { .o-popout-layout__popout-block { margin-top: -3.75rem; } } @media (min-width: 768px) { .o-popout-layout__popout-block { grid-column: col-start 8 / span 5; padding: 3.75rem 5rem; } } @media (max-width: 768px) { .o-status-card { margin-top: 2rem; } } .o-status-card__status { display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 1.5rem; line-height: 1.75rem; } a:hover .o-status-card__status, .o-status-card__status a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } .o-status-card__main .o-status-card__status { font-size: 2.25rem; line-height: 2.5rem; } .o-status-card__link { font-weight: 600; font-size: 0.875rem; line-height: 1.0625rem; letter-spacing: 0.125rem; font-family: "Matter", sans-serif; text-decoration: underline; text-underline-offset: 0.6875rem; text-decoration-color: var(--wolfbrook-gold); transition: color 0.2s ease; margin-top: 2rem; } .o-status-card__link:hover { color: var(--wolfbrook-gold); } .c-projects_slider + .o-testimonial-layout { padding-top: 0 !important; } /** * OBJECTS.TOGGLE-FIELD-LIST * * @description : * */ .o-toggle-field-set { --vertical-spacing: 0.625rem; --horizontal-spacing: 2rem; display: flex; } .o-toggle-field-set__list { display: flex; flex-flow: column; gap: 1rem 2rem; } .o-toggle-field-set--row-layout .o-toggle-field-set__list { flex-flow: row wrap; } .o-toggle-field-set__grid { display: grid; gap: 1rem 2rem; grid-template-columns: repeat(2, 1fr); } /** * OBJECTS.TWO-COL-LAYOUT * * @description : * */ .o-two-col-layout { --available-grid-space: calc(var(--inner-100vw) - (var(--min-edge-gap) * 2)); --total-gutter-space: max(0px, var(--available-grid-space) - var(--body-max-width)); --gutter: calc(var(--total-gutter-space) / 2); display: grid; grid-template-columns: [left-edge-start] var(--min-edge-gap) [left-edge-end left-gutter-start] var(--gutter) [left-gutter-end content-start] repeat(12, [col-start] 1fr [col-end]) [content-end right-gutter-start] var(--gutter) [right-gutter-end right-edge-start] var(--min-edge-gap) [right-edge-end]; } .o-two-col-layout--level { row-gap: 2.875rem; } @media (min-width: 480px) { .o-two-col-layout--level { gap: 0; } } .o-two-col-layout__item:nth-child(odd), .o-two-col-layout--level .o-two-col-layout__item:nth-child(odd) { grid-column: col-start 1 / span 12; } @media (min-width: 480px) { .o-two-col-layout__item:nth-child(odd), .o-two-col-layout--level .o-two-col-layout__item:nth-child(odd) { grid-column: col-start 1 / span 5; } } .o-two-col-layout__item:nth-child(even), .o-two-col-layout--level .o-two-col-layout__item:nth-child(even) { grid-column: col-start 1 / span 12; } @media (min-width: 480px) { .o-two-col-layout__item:nth-child(even), .o-two-col-layout--level .o-two-col-layout__item:nth-child(even) { grid-column: col-start 7 / span 5; } } .o-two-col-layout--off-kilter-left .o-two-col-layout__item:nth-child(odd) { grid-column: col-start 1 / span 12; } @media (min-width: 480px) { .o-two-col-layout--off-kilter-left .o-two-col-layout__item:nth-child(odd) { padding-top: 9.375rem; grid-column: col-start 1/span 6; } } @media (min-width: 480px) { .o-two-col-layout--off-kilter-left .o-two-col-layout__item:nth-child(odd) .o-two-col-layout__text-block { padding-left: 16.66667%; } } .o-two-col-layout--off-kilter-left .o-two-col-layout__item:nth-child(even) { grid-column: col-start 1 / span 12; } @media (min-width: 480px) { .o-two-col-layout--off-kilter-left .o-two-col-layout__item:nth-child(even) { grid-column: col-start 8 / span 5; } } .o-two-col-layout--off-kilter-right .o-two-col-layout__item:nth-child(odd) { grid-column: col-start 1 / span 12; } @media (min-width: 480px) { .o-two-col-layout--off-kilter-right .o-two-col-layout__item:nth-child(odd) { grid-column: col-start 1 / span 5; } } .o-two-col-layout--off-kilter-right .o-two-col-layout__item:nth-child(even) { grid-column: col-start 1 / span 12; padding-top: 2.5rem; } @media (min-width: 480px) { .o-two-col-layout--off-kilter-right .o-two-col-layout__item:nth-child(even) { padding-top: 9.375rem; grid-column: col-start 7/span 6; } } .o-two-col-layout--wide-left .o-two-col-layout__item:nth-child(odd) { grid-column: col-start 1 / span 12; } @media (min-width: 480px) { .o-two-col-layout--wide-left .o-two-col-layout__item:nth-child(odd) { grid-column: left-edge-start 1 / col-end 6; } } @media (min-width: 480px) { .o-two-col-layout--wide-left .o-two-col-layout__item:nth-child(odd) .o-two-col-layout__text-block { padding-left: calc(var(--min-edge-gap) + var(--gutter)); } } .o-two-col-layout--wide-left .o-two-col-layout__item:nth-child(even) { grid-column: col-start 1 / span 12; padding-top: 2.5rem; } @media (min-width: 480px) { .o-two-col-layout--wide-left .o-two-col-layout__item:nth-child(even) { padding-top: 9.375rem; grid-column: col-start 8 / span 5; } } .o-two-col-layout--wide-right .o-two-col-layout__item:nth-child(odd) { grid-column: col-start 1 / span 12; } @media (min-width: 480px) { .o-two-col-layout--wide-right .o-two-col-layout__item:nth-child(odd) { grid-column: col-start 1 / span 5; } } .o-two-col-layout--wide-right .o-two-col-layout__item:nth-child(even) { grid-column: col-start 1 / span 12; } @media (min-width: 480px) { .o-two-col-layout--wide-right .o-two-col-layout__item:nth-child(even) { padding-top: 9.375rem; grid-column: col-start 7 / right-edge-end; } } .o-video-grid-layout { display: grid; grid-template-columns: 1fr; gap: 5rem; } @media (min-width: 1024px) { .o-video-grid-layout { grid-template-columns: repeat(2, 1fr); gap: 7.5rem 2.25rem; } } .o-video-grid-item__image { margin-bottom: 2.75rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } .o-video-grid-item__image-img { width: 100%; } .o-video-grid-item__play-button { position: absolute; height: 6.25rem; width: 6.25rem; } /** * OBJECTS.VIDEO-LAYOUT * * @description : * */ .o-video-layout { --available-grid-space: calc(var(--inner-100vw) - (var(--min-edge-gap) * 2)); --total-gutter-space: max(0px, var(--available-grid-space) - var(--body-max-width)); --gutter: calc(var(--total-gutter-space) / 2); display: grid; grid-template-columns: [left-edge-start] var(--min-edge-gap) [left-edge-end left-gutter-start] var(--gutter) [left-gutter-end content-start] repeat(12, [col-start] 1fr [col-end]) [content-end right-gutter-start] var(--gutter) [right-gutter-end right-edge-start] var(--min-edge-gap) [right-edge-end]; } .o-video-layout__heading-block { grid-column: left-gutter-start / right-gutter-end; } @media (min-width: 480px) { .o-video-layout__heading-block { grid-column: col-start 2 / span 10; } } .o-video-layout--with-content .o-video-layout__heading-block { grid-column: left-gutter-start / right-gutter-end; } @media (min-width: 480px) { .o-video-layout--with-content .o-video-layout__heading-block { grid-column: col-start 2 / span 4; } } @media (min-width: 1024px) { .o-video-layout--with-content .o-video-layout__heading-block { grid-column: col-start 3 / span 3; } } .o-video-layout__text-block { grid-column: left-gutter-start / right-gutter-end; } @media (min-width: 480px) { .o-video-layout__text-block { grid-column: col-start 7 / span 5; grid-row: 1; } } @media (min-width: 1024px) { .o-video-layout__text-block { grid-column: col-start 7 / span 4; } } .o-video-layout__video-block { grid-column: left-gutter-start / right-gutter-end; } @media (min-width: 480px) { .o-video-layout__video-block { grid-column: col-start 2 / span 10; grid-row: 2; } } /** * 6. TYPOGRAPHY * All styles on top of resets that affect typography, including titles, paragraphs, lists, links etc. * Prefer classes where possible */ /** * TYPOGRAPHY.COPY * * @description : Main body copy styles * */ .t-body-copy { display: block; font-family: "Matter", sans-serif; font-size: 1rem; line-height: 1.5rem; font-style: normal; font-weight: 400; } .t-body-copy-sm { display: block; font-family: "Matter", sans-serif; font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: 1.25rem; } .t-body-copy-lg { display: block; font-family: "Matter", sans-serif; font-size: 1.125rem; font-style: normal; font-weight: 400; line-height: 1.75rem; } .t-body-copy-xl { display: block; font-family: "Matter", sans-serif; font-size: 1.5rem; font-style: normal; font-weight: 400; line-height: 2.125rem; } .t-body-copy-xxl { display: block; font-family: "Matter", sans-serif; font-size: 1.875rem; font-style: normal; font-weight: 400; line-height: 2.8125rem; } .t-fineprint-copy { display: block; font-family: "Matter", sans-serif; font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: 1.25rem; } .t-label { display: block; font-family: "Matter", sans-serif; font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.0875rem; line-height: 1.25rem; text-transform: uppercase; } @media (min-width: 480px) { .t-label { font-size: 1rem; } } .t-label a { text-decoration: none; } .t-label a:hover { text-decoration: underline; } .t-label-sm { display: block; font-family: "Matter", sans-serif; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.0875rem; line-height: 1.125rem; text-transform: uppercase; } /** * TYPOGRAPHY.HEADINGS * * @description : Main body level headings styles * */ .t-heading-1 { display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 2.125rem; line-height: 2.75rem; font-weight: 500; letter-spacing: -0.125rem; } a:hover .t-heading-1, .t-heading-1 a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } @media (min-width: 768px) { .t-heading-1 { font-size: 3.75rem; letter-spacing: -0.125rem; line-height: 5.625rem; } } @media (min-width: 1024px) { .t-heading-1 { font-size: 5rem; letter-spacing: -0.125rem; line-height: 5.625rem; } } .t-heading-2 { display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 2.125rem; line-height: 2.75rem; letter-spacing: -0.0025rem; font-weight: 500; } a:hover .t-heading-2, .t-heading-2 a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } @media (min-width: 768px) { .t-heading-2 { font-size: 3.75rem; line-height: 4.25rem; letter-spacing: -0.00438rem; } } .t-heading-3 { display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 2rem; letter-spacing: -0.00625rem; line-height: 2.375rem; font-weight: 500; } a:hover .t-heading-3, .t-heading-3 a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } @media (min-width: 768px) { .t-heading-3 { font-size: 3rem; letter-spacing: -0.0125rem; line-height: 3.75rem; } } .t-heading-4 { display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 1.5rem; line-height: 1.875rem; letter-spacing: -0.03125rem; font-weight: 500; } a:hover .t-heading-4, .t-heading-4 a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } @media (min-width: 768px) { .t-heading-4 { font-size: 2.125rem; line-height: 2.75rem; letter-spacing: -0.0125rem; } } .t-heading-5 { display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -0.00625rem; font-weight: 500; } a:hover .t-heading-5, .t-heading-5 a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } @media (min-width: 768px) { .t-heading-5 { font-size: 1.875rem; line-height: 2.625rem; } } .t-heading-6 { display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 1.125rem; line-height: 1.375rem; font-weight: 500; letter-spacing: -0.01063rem; } a:hover .t-heading-6, .t-heading-6 a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } @media (min-width: 768px) { .t-heading-6 { font-size: 1.625rem; line-height: 2.125rem; } } .t-heading-7 { display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 1.125rem; line-height: 1.375rem; font-weight: 500; letter-spacing: -0.01063rem; } a:hover .t-heading-7, .t-heading-7 a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } @media (min-width: 768px) { .t-heading-7 { font-size: 1.25rem; line-height: 2.125rem; } } /** * TYPOGRAPHY.LINKS * */ .t-link { font-family: "Matter", sans-serif; font-weight: 600; text-decoration: underline; text-decoration-color: var(--wolfbrook-gold); text-underline-offset: 0.5em; transition: text-decoration-color 0.15s ease; } .t-link:hover { text-decoration-color: var(--wolfbrook-gold_a50); } /** * 7. COMPONENTS * A component is a reusable chunk of UI that is clearly designed, as opposed to an object. * Clearly refers to a block of UI: pagination, buttons, modals, icons... etc * You should be able to take a component and paste it anywhere in the app * Must be built with classes only */ /** * COMPONENTS.ICON * * @description : SVG icon * */ .c-icon { fill: currentColor; } .c-icon--sm { height: 1rem; } .c-icon--lg { height: 1.5rem; } /** * COMPONENTS.RICH-TEXT * * @description : Styling for rich text content (chucks of paragraphs, lists, headings etc.) * */ .c-rich-text { font-family: "Matter", sans-serif; } .c-rich-text b, .c-rich-text strong { font-weight: bold; } .c-rich-text i, .c-rich-text em { font-style: italic; } .c-rich-text a { text-decoration: none; font-weight: 600; } .c-rich-text a:hover { border-bottom: 1px solid var(--wolfbrook-gold); padding-bottom: 0.125rem; } .c-rich-text sub, .c-rich-text sup { font-size: 0.75em; line-height: 1; padding: 0 0.0625rem; position: relative; } .c-rich-text sub { top: 0.33333em; } .c-rich-text sup { top: -0.33333em; } .c-rich-text p { font-family: "Matter", sans-serif; font-size: 1rem; line-height: 1.5rem; font-style: normal; font-weight: 400; margin-bottom: 1.25rem; } .c-rich-text p:last-child { margin-bottom: 0; } .c-rich-text h1 *, .c-rich-text h2 *, .c-rich-text h3 *, .c-rich-text h4 *, .c-rich-text h5 *, .c-rich-text h6 * { font-weight: inherit; } .c-rich-text h1, .c-rich-text h2 { display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 2rem; letter-spacing: -0.00625rem; line-height: 2.375rem; font-weight: 500; margin: 3rem 0 1.25rem 0; } a:hover .c-rich-text h1, .c-rich-text h1 a:hover, a:hover .c-rich-text h2, .c-rich-text h2 a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } @media (min-width: 768px) { .c-rich-text h1, .c-rich-text h2 { font-size: 3rem; letter-spacing: -0.0125rem; line-height: 3.75rem; } } .c-rich-text h1 + h1, .c-rich-text h1 + h2, .c-rich-text h1 + h3, .c-rich-text h1 + h4, .c-rich-text h1 + h5, .c-rich-text h1 + h6, .c-rich-text h2 + h1, .c-rich-text h2 + h2, .c-rich-text h2 + h3, .c-rich-text h2 + h4, .c-rich-text h2 + h5, .c-rich-text h2 + h6 { margin-top: -1.25rem; } .c-rich-text h3 { display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 1.5rem; line-height: 1.875rem; letter-spacing: -0.03125rem; font-weight: 500; margin: 2.5rem 0 1.125rem 0; } a:hover .c-rich-text h3, .c-rich-text h3 a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } @media (min-width: 768px) { .c-rich-text h3 { font-size: 2.125rem; line-height: 2.75rem; letter-spacing: -0.0125rem; } } .c-rich-text h3 + h1, .c-rich-text h3 + h2, .c-rich-text h3 + h3, .c-rich-text h3 + h4, .c-rich-text h3 + h5, .c-rich-text h3 + h6 { margin-top: -1.125rem; } .c-rich-text h4 { display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -0.00625rem; font-weight: 500; margin: 2.125rem 0 1rem 0; } a:hover .c-rich-text h4, .c-rich-text h4 a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } @media (min-width: 768px) { .c-rich-text h4 { font-size: 1.875rem; line-height: 2.625rem; } } .c-rich-text h4 + h1, .c-rich-text h4 + h2, .c-rich-text h4 + h3, .c-rich-text h4 + h4, .c-rich-text h4 + h5, .c-rich-text h4 + h6 { margin-top: -1rem; } .c-rich-text h5, .c-rich-text h6 { display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 1.125rem; line-height: 1.375rem; font-weight: 500; letter-spacing: -0.01063rem; margin: 2.125rem 0 1rem 0; } a:hover .c-rich-text h5, .c-rich-text h5 a:hover, a:hover .c-rich-text h6, .c-rich-text h6 a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } @media (min-width: 768px) { .c-rich-text h5, .c-rich-text h6 { font-size: 1.625rem; line-height: 2.125rem; } } .c-rich-text h5 + h1, .c-rich-text h5 + h2, .c-rich-text h5 + h3, .c-rich-text h5 + h4, .c-rich-text h5 + h5, .c-rich-text h5 + h6, .c-rich-text h6 + h1, .c-rich-text h6 + h2, .c-rich-text h6 + h3, .c-rich-text h6 + h4, .c-rich-text h6 + h5, .c-rich-text h6 + h6 { margin-top: -1rem; } .c-rich-text li { font-family: "Matter", sans-serif; font-size: 1rem; line-height: 1.5rem; font-style: normal; font-weight: 400; margin-bottom: 0.125rem; padding-left: var(--gutter-width); } .c-rich-text li::before { float: left; margin-left: calc(var(--gutter-width) * -1); width: var(--gutter-width); } .c-rich-text li p { margin-bottom: 1rem; } .c-rich-text li ul, .c-rich-text li ol { margin: 1rem 0; } .c-rich-text li:last-child { margin-bottom: 0; } .c-rich-text ul, .c-rich-text ol { margin-bottom: 2rem; } .c-rich-text ul:last-child, .c-rich-text ol:last-child { margin-bottom: 0; } .c-rich-text ul { --gutter-width: 1.25rem; } .c-rich-text ul li::before { content: '\2013'; } .c-rich-text ul ul { --gutter-width: 1.5rem; } .c-rich-text ul ul li::before { content: '\2022'; } .c-rich-text ol { --gutter-width: 2rem; counter-reset: ol; } .c-rich-text ol > li { counter-increment: ol; } .c-rich-text ol > li::before { content: counter(ol) "."; } .c-rich-text ol ol { counter-reset: ol2; } .c-rich-text ol ol > li { counter-increment: ol2; } .c-rich-text ol ol > li::before { content: "(" counter(ol2, lower-alpha) ")"; } .c-rich-text ol ol ol { counter-reset: ol3; } .c-rich-text ol ol ol > li { counter-increment: ol3; } .c-rich-text ol ol ol > li::before { content: counter(ol3, lower-roman) "."; } .c-rich-text table { border-collapse: collapse; height: auto !important; margin-bottom: 2rem; width: 100% !important; } .c-rich-text table:last-child { margin-bottom: 0; } .c-rich-text th, .c-rich-text td { font-family: "Matter", sans-serif; font-size: 1rem; line-height: 1.5rem; font-style: normal; font-weight: 400; border: 0.0625rem solid; height: auto !important; padding: 0.75rem 1rem; width: auto !important; } .c-rich-text th { font-weight: bold; text-align: center; vertical-align: middle; } .c-rich-text td { text-align: left; vertical-align: top; } .c-rich-text hr { border: 0; border-top: 0.0625rem solid; color: inherit; margin: 0 0 1.25rem 0; } .c-rich-text hr:last-child { margin-bottom: 0; } .c-rich-text > :first-child { margin-top: 0; } .c-rich-text > :last-child { margin-bottom: 0; } .c-rich-text .contact-line { font-size: 1.125rem; margin-bottom: 1rem; font-family: "Matter", sans-serif; font-weight: 600; } .u-inverted .c-rich-text .contact-line { color: var(--gray-light); } .c-rich-text .contact-section-heading { font-size: 1.125rem; margin-bottom: 1rem; letter-spacing: 0.125rem; font-family: "Matter", sans-serif; font-weight: 600; } .c-rich-text .rt-intro-paragraph { font-size: 1.25rem; line-height: 1.875rem; letter-spacing: -0.01063rem; } @media (min-width: 480px) { .c-rich-text .rt-intro-paragraph { font-size: 1.625rem; line-height: 2.25rem; } } .c-rich-text .rt-fineprint-paragraph { font-family: "Matter", sans-serif; font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: 1.25rem; } .c-rich-text--gs { font-family: "GoodSans-Medium", sans-serif; } .c-rich-text--sm p, .c-rich-text--sm li { font-family: "Matter", sans-serif; font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: 1.25rem; } .c-rich-text--lg p, .c-rich-text--lg li { font-family: "Matter", sans-serif; font-size: 1.125rem; font-style: normal; font-weight: 400; line-height: 1.75rem; } .c-rich-text--xl p, .c-rich-text--xl li { font-family: "Matter", sans-serif; font-size: 1rem; line-height: 1.5rem; font-style: normal; font-weight: 400; } @media (min-width: 480px) { .c-rich-text--xl p, .c-rich-text--xl li { font-family: "Matter", sans-serif; font-size: 1.5rem; font-style: normal; font-weight: 400; line-height: 2.125rem; } } @media (min-width: 768px) { .c-rich-text--xl { max-width: 33.125rem; } } .c-rich-text--xxl p, .c-rich-text--xxl li { font-family: "Matter", sans-serif; font-size: 1.5rem; font-style: normal; font-weight: 400; line-height: 2.125rem; } @media (min-width: 480px) { .c-rich-text--xxl p, .c-rich-text--xxl li { font-family: "Matter", sans-serif; font-size: 1.875rem; font-style: normal; font-weight: 400; line-height: 2.8125rem; } } .c-rich-text--fineprint { white-space: nowrap; } .c-rich-text--fineprint a { font-weight: inherit; } .c-rich-text--fineprint p, .c-rich-text--fineprint li { font-family: "Matter", sans-serif; font-size: 0.75rem; font-style: normal; font-weight: 400; line-height: 1.25rem; } .fineprint-links { display: flex; flex-direction: column; } @media (min-width: 768px) { .fineprint-links { flex-direction: row; } } .fineprint-link-separator { display: none; } @media (min-width: 768px) { .fineprint-link-separator { display: inline-block; } } /** * COMPONENTS.CHECKBOX * * @description : Represents a toggleable checkbox * */ .c-checkbox { display: inline-flex; height: var(--form-toggle-control-size); position: relative; width: var(--form-toggle-control-size); } .c-checkbox__hidden-checkbox { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .c-checkbox__stand-in { border: 0.0625rem solid; box-shadow: 0 0 0 2px rgba(228, 182, 17, 0); cursor: pointer; display: block; height: 100%; padding: 0.0625rem; position: relative; transition: 0.3s; width: 100%; } .c-checkbox__hidden-checkbox.input-validation-error ~ .c-checkbox__stand-in { color: #ff5932; } .c-checkbox__hidden-checkbox:hover ~ .c-checkbox__stand-in { box-shadow: 0 0 0 2px rgba(228, 182, 17, 0.2); } .c-checkbox__hidden-checkbox:focus ~ .c-checkbox__stand-in { box-shadow: 0 0 0 3px rgba(228, 182, 17, 0.2); } .c-checkbox__hidden-checkbox:checked ~ .c-checkbox__stand-in::after { opacity: 1; } .c-checkbox__check-icon { display: block; fill: transparent; height: 100%; opacity: 0; stroke: currentColor; stroke-width: 0.125rem; transition: 0.2s; vector-effect: non-scaling-stroke; width: 100%; } .c-checkbox__check-icon * { vector-effect: non-scaling-stroke; } .c-checkbox__hidden-checkbox:checked ~ .c-checkbox__stand-in .c-checkbox__check-icon { opacity: 1; } /** * COMPONENTS.TEXTBOX * * @description : Represents an interactive datepicker field * */ .c-datepicker { --border-width: 0rem; --horizontal-padding: calc(var(--form-control-height) / 3); --padding-left: var(--horizontal-padding); --padding-right: var(--horizontal-padding); display: inline-block; position: relative; width: 100%; --arrow-size: 0.3125rem; --padding-right: calc((var(--horizontal-padding) * 2) + var(--arrow-size)); --icon-size: 1.25rem; --icon-right: calc(var(--horizontal-padding) + (var(--arrow-size) * 2) + 0.875rem); } .c-datepicker::after { border-top: var(--arrow-size) solid #e4b611; border-left: var(--arrow-size) solid transparent; border-right: var(--arrow-size) solid transparent; content: ''; display: block; margin-top: calc(var(--arrow-size) * -0.5); pointer-events: none; position: absolute; right: var(--horizontal-padding); top: 50%; z-index: 2; } .c-datepicker__textbox { appearance: none; background: #fff; border: var(--border-width) solid; border-radius: 0; box-shadow: 0 0 0 2px rgba(228, 182, 17, 0); display: flex; align-items: center; filter: drop-shadow(0 0 0.375rem rgba(0, 0, 0, 0.05)); font-family: "Matter", sans-serif; font-size: var(--form-control-font-size); font-weight: 400; line-height: 1.5em; padding: 0.625rem var(--padding-right) 0.625rem var(--padding-left); transition: 0.3s; width: 100%; color: var(--gray-darkest); -webkit-appearance: textfield; -moz-appearance: textfield; min-height: 1.2em; --padding-right: calc(var(--icon-right) + var(--icon-size) + 0.875rem); cursor: pointer; } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .c-datepicker__textbox { height: var(--form-control-height); } } } .c-datepicker__textbox:hover { box-shadow: 0 0 0 2px rgba(228, 182, 17, 0.2); } .c-datepicker__textbox:focus { box-shadow: 0 0 0 3px rgba(228, 182, 17, 0.2); } .c-datepicker__textbox.input-validation-error { box-shadow: inset 0 0 0 0.125rem #ff5932; color: #ff5932; } .c-datepicker__textbox::-webkit-calendar-picker-indicator { color: transparent; cursor: pointer; height: 100%; opacity: 0; padding: 0; position: absolute; right: 0; top: 0; width: var(--padding-right); } .c-datepicker__icon { fill: #e4b611; height: var(--icon-size); pointer-events: none; position: absolute; right: var(--icon-right); top: 50%; transform: translateY(-50%); width: var(--icon-size); } /** * COMPONENTS.FIELD * * @description : Represents a form field made up of label, control and error message. * */ .hs-form-field, .c-field { --control-height: var(--form-control-height); align-items: normal; display: flex; flex-flow: column; } .c-field--row-full-span { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .c-field--control-type-is-toggle { --control-height: max(var(--form-toggle-control-size), 1.375rem); } @media (min-width: 480px) { .c-field--row-layout { align-items: flex-start; flex-flow: row; } .c-field--row-layout .c-field__label-wrap { align-content: center; min-height: var(--control-height); min-width: 15.625rem; padding-bottom: 0; width: 45%; } } @media (min-width: 480px) and (min-width: 480px) { .c-field--row-layout .c-field__label-wrap { padding-right: 1.875rem; } } @media (min-width: 480px) { .c-field--row-layout .c-field__label-wrap--narrow { min-width: 12.5rem; width: 25%; } .c-field--row-layout .c-field__control-wrap { padding-top: 0 !important; } .c-field--row-layout .c-field__control { min-height: var(--control-height); } } .hs-form-field > label, .c-field__label-wrap { align-items: center; display: flex; flex: 0 0 auto; flex-flow: row wrap; justify-content: flex-start; min-height: 0; padding-bottom: 0.5rem; width: auto; } @media (min-width: 480px) { .hs-form-field > label, .c-field__label-wrap { padding-right: 1.875rem; } } .hs-form-field > label--up, .c-field__label-wrap--up { align-self: flex-start; } .c-field__label-wrap--with-input { display: grid; grid-template-columns: 1fr 11.875rem; padding-right: 0; padding-bottom: 1rem; } .c-field__label-icon { display: flex; flex: 0 0 auto; margin-right: 0.75rem; width: 1.25rem; } .hs-form-field > label, .c-field__label { display: inline-block; flex: 1 1; font-size: 1.125rem; font-weight: 500; font-family: "Matter", sans-serif; line-height: 1.375rem; } .u-inverted .hs-form-field > label, .u-inverted .c-field__label { color: var(--gray-dark); } .umbraco-forms-field .hs-form-field > label, .umbraco-forms-field .c-field__label { text-transform: uppercase; font-size: 1rem; } .c-field--required .hs-form-field > label::after, .c-field--required .c-field__label::after { color: #ff5932; content: '*'; display: inline-block; font-weight: bold; margin-left: 0.25ch; } .u-inverted .c-field--required .hs-form-field > label::after, .u-inverted .c-field--required .c-field__label::after { color: var(--gray-dark); } .c-field__help-text { display: block; font-size: 0.75rem; line-height: 1rem; margin-top: 0.125rem; width: 100%; } .c-field__control-wrap { flex: 1 1 auto; min-height: var(--control-height); } .c-field--control-type-is-toggle .c-field__control-wrap { padding-top: 0.125rem; } .c-field__control { min-height: 0; width: 100%; } .hs-error-msg, .hs-error-msgs, .c-field__error-wrap { display: block; color: #ff5932; font-size: 0.875rem; margin-top: 0.25rem; } .hs_error_rollup { grid-column: 1 / -1; margin-bottom: 1.875rem; } .c-field__error { color: #ff5932; display: block; margin-top: 0.625rem; } .c-field__error:empty { margin-top: 0; } .hs-form-field .inputs-list .hs-form-checkbox { padding-bottom: 4px; } .hs-form-field .hs-field-desc { padding-bottom: 5px; } .c-field__control--no_space { padding: 0 !important; } .c-field--row { flex-flow: column !important; gap: 1rem; } @media (min-width: 768px) { .c-field--row { flex-flow: row !important; } } .o-field-set__item--multiple_row { display: flex; gap: 2rem; flex-direction: column; } @media (max-width: 768px) { .o-field-set__item--multiple_row { gap: 4rem; } } @media (max-width: 480px) { .o-field-set__item--multiple_row { gap: 2rem; } } .c-toggle-field__label-wrap--row { grid-area: 1 / 2 / auto / auto !important; margin-top: 0px !important; margin-left: 0.75rem; } /** * COMPONENTS.MINI-FORM * * @description : One line form consisting of textbox and submit button (such as for an email signup form). * */ .c-mini-form { display: flex; } .c-mini-form__textbox { height: auto; align-self: stretch; border-color: transparent; flex-grow: 1; } .c-mini-form__submit, .c-footer__newsletter form input[type=submit] { align-self: stretch; flex: 0 0 auto; padding-left: 1.25rem !important; padding-right: 1.25rem !important; } /** * COMPONENTS.RADIO * * @description : Represents a toggleable radio input * */ .c-radio { color: #e4b611; display: inline-flex; height: var(--form-toggle-control-size); position: relative; width: var(--form-toggle-control-size); } .c-radio__hidden-radio { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .c-radio__stand-in { border: 0.0625rem solid; border-radius: 100%; box-shadow: 0 0 0 2px rgba(228, 182, 17, 0); cursor: pointer; display: block; height: 100%; position: relative; transition: 0.3s; width: 100%; } .c-radio__stand-in::after { background-color: currentColor; border-radius: 100%; bottom: 0.25rem; content: ''; display: block; left: 0.25rem; position: absolute; right: 0.25rem; top: 0.25rem; transform: scale(0); transform-origin: 50% 50%; transition: 0.2s; } .c-radio__hidden-radio:checked ~ .c-radio__stand-in::after { transform: scale(1); } .c-radio__hidden-radio.input-validation-error ~ .c-radio__stand-in { color: #ff5932; } .c-radio__hidden-radio:hover ~ .c-radio__stand-in { box-shadow: 0 0 0 2px rgba(228, 182, 17, 0.2); } .c-radio__hidden-radio:focus ~ .c-radio__stand-in { box-shadow: 0 0 0 3px rgba(228, 182, 17, 0.2); } /** * COMPONENTS.RANGE * * @description : Component for styling a range input * */ .c-range__input { appearance: none; border-bottom: 1.25rem solid transparent; cursor: pointer; display: block; height: 0.0625rem; padding: 0.5rem 0 0.75rem; position: relative; width: 100%; z-index: 2; } .c-range__input::-webkit-slider-thumb { appearance: none; background: #e4b611; border: 0; border-radius: 100%; box-shadow: inset 0 0 3px 1px rgba(150, 120, 11, 0); display: block; height: 1rem; transition: 0.2s; width: 1rem; } .c-range__input::-moz-range-thumb { appearance: none; background: #e4b611; border: 0; border-radius: 100%; box-shadow: inset 0 0 3px 1px rgba(150, 120, 11, 0); display: block; height: 1rem; transition: 0.2s; width: 1rem; } .c-range__input::-ms-thumb { appearance: none; background: #e4b611; border: 0; border-radius: 100%; box-shadow: inset 0 0 3px 1px rgba(150, 120, 11, 0); display: block; height: 1rem; transition: 0.2s; width: 1rem; } .c-range__input::-webkit-slider-thumb { margin-top: -0.5rem; } .c-range__input:hover::-webkit-slider-thumb { box-shadow: inset 0 0 3px 1px #96780b; } .c-range__input:hover::-moz-range-thumb { box-shadow: inset 0 0 3px 1px #96780b; } .c-range__input:hover::-ms-thumb { box-shadow: inset 0 0 3px 1px #96780b; } .c-range__input::-webkit-slider-runnable-track { appearance: none; background: var(--wolfbrook-gold); border: 0; display: block; height: 0.0625rem; } .c-range__input::-moz-range-track { appearance: none; background: var(--wolfbrook-gold); border: 0; display: block; height: 0.0625rem; } .c-range__input::-ms-track { appearance: none; background: var(--wolfbrook-gold); border: 0; display: block; height: 0.0625rem; } .control-range { appearance: none; border-bottom: 1.25rem solid transparent; cursor: pointer; display: block; height: 0.0625rem; padding: 0.5rem 0 0.75rem; position: relative; width: 100%; z-index: 2; } .control-range::-webkit-slider-thumb { appearance: none; background: #e4b611; border: 0; border-radius: 100%; box-shadow: inset 0 0 3px 1px rgba(150, 120, 11, 0); display: block; height: 1.875rem; transition: 0.2s; width: 1.875rem; } .control-range::-moz-range-thumb { appearance: none; background: #e4b611; border: 0; border-radius: 100%; box-shadow: inset 0 0 3px 1px rgba(150, 120, 11, 0); display: block; height: 1.875rem; transition: 0.2s; width: 1.875rem; } .control-range::-ms-thumb { appearance: none; background: #e4b611; border: 0; border-radius: 100%; box-shadow: inset 0 0 3px 1px rgba(150, 120, 11, 0); display: block; height: 1.875rem; transition: 0.2s; width: 1.875rem; } .control-range::-webkit-slider-thumb { margin-top: -0.8125rem; } .control-range:hover::-webkit-slider-thumb { box-shadow: inset 0 0 3px 1px #96780b; } .control-range:hover::-moz-range-thumb { box-shadow: inset 0 0 3px 1px #96780b; } .control-range:hover::-ms-thumb { box-shadow: inset 0 0 3px 1px #96780b; } .control-range::-webkit-slider-runnable-track { appearance: none; background-color: rgba(228, 182, 17, 0.5); border: 0; display: block; height: 0.25rem; border-radius: 0.25rem; } .control-range::-moz-range-track { appearance: none; background-color: rgba(228, 182, 17, 0.5); border: 0; display: block; height: 0.25rem; border-radius: 0.25rem; } .control-range::-ms-track { appearance: none; background-color: rgba(228, 182, 17, 0.5); border: 0; display: block; height: 0.25rem; border-radius: 0.25rem; } .scrollbar { overflow-y: auto; } ::-webkit-scrollbar-track { border-radius: 6px; background-color: #FFFFFF; } ::-webkit-scrollbar { width: 5px; background-color: #e4b611; } ::-webkit-scrollbar:horizontal { height: 4px; background-color: #e4b611; } ::-webkit-scrollbar-thumb { border-radius: 4px; background-color: #e4b611; } .calculator { background: #fbfaf9; font-family: "Matter", sans-serif; display: flex; flex-direction: column; } @media (min-width: 768px) { .calculator { flex-direction: row; } } .right-results { background: #F5F2EF; font-weight: 500; display: flex; flex-direction: column; position: relative; overflow: hidden; } @media (min-width: 768px) { .right-results { width: 40%; } } .info-panel { background: #e4b611; color: #fff; padding: 1.25rem 2.5rem 2.5rem; position: absolute; bottom: 0; transform: translateY(100%); transition: transform 1s; font-size: 1rem; line-height: 1.375rem; text-align: center; font-weight: 400; } .info-panel > p { margin-bottom: 1rem; } .info-panel > ul { list-style: disc; padding-left: 1rem; } .info-panel > ul li { margin-bottom: 0.5rem; } .info-panel.active { transform: translateY(0); } .info-panel--white { background: #fff; color: #080808; text-align: left; } .text-wolfbrook-gold { color: #e4b611; } .flex-1 { flex: 1; } .flex-center { display: flex; justify-content: center; align-items: center; } .heading { font-size: 1.875rem; font-weight: 600; padding: 0 0 2rem 0; } @media (min-width: 768px) { .heading { padding: 0 0 5rem 0; } } .heading--self-padding { padding: 1rem; } @media (min-width: 768px) { .heading--self-padding { padding: 2.5rem 3.25rem 2.5rem; } } .control-label { font-size: 1rem; font-weight: 600; } @media (min-width: 768px) { .control-label { font-size: 1.25rem; } } .left-controls { overflow-y: auto; flex: 1; padding: 1rem; } @media (min-width: 768px) { .left-controls { padding: 2.5rem 3.25rem; } } .control-input-wrapper { padding: 0.9375rem 0 1.2rem; position: relative; display: flex; align-items: center; gap: 0.9375rem; } .control-range-input-box-wrapper { position: relative; align-self: flex-start; } .control-range-input-box { height: 3.125rem; width: 5.25rem; padding: 0.8125rem; display: block; background: #ffffff; text-align: center; } .control-range-input-box-suffix { position: absolute; right: 0.375rem; bottom: 0.125rem; font-size: 0.875rem; pointer-events: none; } .control-range-wrapper { display: flex; flex: 1; flex-direction: column; } .control-input { padding: 0.75rem 0.9375rem 0.75rem 1.875rem; font-size: 1rem; background: #ffffff; width: 100%; flex: 1; border-radius: 6px; } .control-prefix { left: 0.625rem; position: absolute; } .control-wrapper { padding-bottom: 1.875rem; } .c-range__mark-list { align-items: center; display: flex; flex-flow: row; height: 1.25rem; justify-content: space-between; margin-top: -1.25rem; } .c-range__mark-item { flex: 0 1 auto; min-width: 1.5ch; font-size: 1rem; font-family: "Matter", sans-serif; line-height: 1.1875rem; text-align: center; color: #d2cfcb; } .c-range__mark-item::before { content: attr(data-value); display: block; } .c-range__mark-item--active { color: #2A2927; } .control-range-tooltip { background: #E9E7E5; color: #2a2927; font-weight: 600; border-radius: 1.875rem; font-size: 0.875rem; width: fit-content; padding: 0.1875rem 0.375rem; position: relative; margin-bottom: 0.9375rem; min-width: 2.375rem; min-height: 1.625rem; display: flex; justify-content: center; align-items: center; } .result-row { display: flex; justify-content: space-between; align-items: center; padding: 1rem; } @media (min-width: 768px) { .result-row { padding: 2.1875rem 3.25rem; gap: 6rem; } } .result-row--active { background: #e4b611; } .result-row > span:first-of-type { font-size: 1.125rem; } .result-row > span:last-of-type { font-size: 1.375rem; } .text-error { color: #ff5932; } .text-\[20px\] { font-size: 1.25rem; } .text-right { text-align: right; } .control-range-ends { display: flex; justify-content: space-between; } .control-range-ends > span { background-color: #fff; border-radius: 30px; font-size: 0.8125rem; font-weight: lighter; width: 3rem; height: 1.625rem; display: flex; justify-content: center; align-items: center; } .control-select { position: relative; flex: 1; font-size: 1rem; } .control-select-button { padding: 0.75rem 2rem 0.75rem 1.875rem; width: 100%; display: flex; border-radius: 6px; border: 2px solid #e4b611; justify-content: space-between; align-items: center; overflow: hidden; position: relative; background-color: #fff; } .control-select-text { line-height: 1.875rem; } .control-select-chevron { width: 78px; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; right: 0; color: #e4b611; background-color: #fdf9ec; } .control-select-option-group { border-radius: 6px; border: 2px solid #e4b611; position: absolute; left: 0; right: 0; bottom: 102%; background-color: #fff; z-index: 3; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); display: none; } .control-select-option-group.active { display: block; } .control-select-option { cursor: pointer; overflow: hidden; padding: 0.75rem 2rem 0.75rem 1.875rem; } .control-select-option:hover { background-color: #fdf9ec; } /** * COMPONENTS.SELECT * * @description : Component for styling a generic select field * */ .hs-fieldtype-select .input, .c-select { --border-width: 0rem; --horizontal-padding: calc(var(--form-control-height) / 3); --padding-left: var(--horizontal-padding); --padding-right: var(--horizontal-padding); display: inline-block; position: relative; width: 100%; --arrow-size: 0.3125rem; --padding-right: calc((var(--horizontal-padding) * 2) + var(--arrow-size)); } .hs-fieldtype-select .input::after, .c-select::after { border-top: var(--arrow-size) solid #e4b611; border-left: var(--arrow-size) solid transparent; border-right: var(--arrow-size) solid transparent; content: ''; display: block; margin-top: calc(var(--arrow-size) * -0.5); pointer-events: none; position: absolute; right: var(--horizontal-padding); top: 50%; z-index: 2; } .c-select--mini { --arrow-size: 0.25rem; --form-control-font-size: 0.875rem; --form-control-height: 2rem; width: auto; } select.hs-input, .c-select__select { appearance: none; background: #fff; border: var(--border-width) solid; border-radius: 0; box-shadow: 0 0 0 2px rgba(228, 182, 17, 0); display: flex; align-items: center; filter: drop-shadow(0 0 0.375rem rgba(0, 0, 0, 0.05)); font-family: "Matter", sans-serif; font-size: var(--form-control-font-size); font-weight: 400; line-height: 1.5em; padding: 0.625rem var(--padding-right) 0.625rem var(--padding-left); transition: 0.3s; width: 100%; color: var(--gray-darkest); -webkit-appearance: textfield; -moz-appearance: textfield; min-height: 1.2em; cursor: pointer; appearance: none; } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { select.hs-input, .c-select__select { height: var(--form-control-height); } } } select.hs-input:hover, .c-select__select:hover { box-shadow: 0 0 0 2px rgba(228, 182, 17, 0.2); } select.hs-input:focus, .c-select__select:focus { box-shadow: 0 0 0 3px rgba(228, 182, 17, 0.2); } select.hs-input.input-validation-error, .c-select__select.input-validation-error { box-shadow: inset 0 0 0 0.125rem #ff5932; color: #ff5932; } @-moz-document url-prefix() { select.hs-input, .c-select__select { text-indent: -2px; } } .u-inverted select.hs-input, .u-inverted .c-select__select { color: var(--gray-darkest); } /** * COMPONENTS.TEXTAREA * * @description : Represents a long-form textbox for writing paragraphs. *16/24 */ .c-textarea { --border-width: 0rem; --horizontal-padding: calc(var(--form-control-height) / 3); --padding-left: var(--horizontal-padding); --padding-right: var(--horizontal-padding); display: inline-block; position: relative; width: 100%; appearance: none; background: #fff; border: var(--border-width) solid; border-radius: 0; box-shadow: 0 0 0 2px rgba(228, 182, 17, 0); display: flex; align-items: center; filter: drop-shadow(0 0 0.375rem rgba(0, 0, 0, 0.05)); font-family: "Matter", sans-serif; font-size: var(--form-control-font-size); font-weight: 400; line-height: 1.5em; padding: 0.625rem var(--padding-right) 0.625rem var(--padding-left); transition: 0.3s; width: 100%; color: var(--gray-darkest); -webkit-appearance: textfield; -moz-appearance: textfield; min-height: 1.2em; --line-height: calc(var(--form-control-font-size) * 1.5); --vertical-padding: calc(((var(--form-control-height) - var(--line-height)) / 2) - var(--border-width)); height: auto; line-height: var(--line-height); min-height: var(--form-control-height); padding: var(--vertical-padding) var(--horizontal-padding); } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .c-textarea { height: var(--form-control-height); } } } .c-textarea:hover { box-shadow: 0 0 0 2px rgba(228, 182, 17, 0.2); } .c-textarea:focus { box-shadow: 0 0 0 3px rgba(228, 182, 17, 0.2); } .c-textarea.input-validation-error { box-shadow: inset 0 0 0 0.125rem #ff5932; color: #ff5932; } .c-textarea[rows="1"] { height: var(--form-control-height); } .c-textarea[rows="2"] { height: calc(var(--form-control-height) + (1 * var(--line-height))); } .c-textarea[rows="3"] { height: calc(var(--form-control-height) + (2 * var(--line-height))); } .c-textarea[rows="4"] { height: calc(var(--form-control-height) + (3 * var(--line-height))); } .c-textarea[rows="5"] { height: calc(var(--form-control-height) + (4 * var(--line-height))); } .c-textarea[rows="6"] { height: calc(var(--form-control-height) + (5 * var(--line-height))); } .c-textarea[rows="7"] { height: calc(var(--form-control-height) + (6 * var(--line-height))); } .c-textarea[rows="8"] { height: calc(var(--form-control-height) + (7 * var(--line-height))); } .c-textarea[rows="9"] { height: calc(var(--form-control-height) + (8 * var(--line-height))); } .c-textarea[rows="10"] { height: calc(var(--form-control-height) + (9 * var(--line-height))); } /** * COMPONENTS.TEXTBOX * * @description : Represents a textbox for a phone number, email address, password etc. * */ .c-textbox, .c-mini-form__textbox, .c-footer__newsletter input { --border-width: 0rem; --horizontal-padding: calc(var(--form-control-height) / 3); --padding-left: var(--horizontal-padding); --padding-right: var(--horizontal-padding); display: inline-block; position: relative; width: 100%; appearance: none; background: #fff; border: var(--border-width) solid; border-radius: 0; box-shadow: 0 0 0 2px rgba(228, 182, 17, 0); display: flex; align-items: center; filter: drop-shadow(0 0 0.375rem rgba(0, 0, 0, 0.05)); font-family: "Matter", sans-serif; font-size: var(--form-control-font-size); font-weight: 400; line-height: 1.5em; padding: 0.625rem var(--padding-right) 0.625rem var(--padding-left); transition: 0.3s; width: 100%; color: var(--gray-darkest); -webkit-appearance: textfield; -moz-appearance: textfield; min-height: 1.2em; width: 100%; color: var(--gray-darkest); } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .c-textbox, .c-mini-form__textbox, .c-footer__newsletter input { height: var(--form-control-height); } } } .c-textbox:hover, .c-mini-form__textbox:hover, .c-footer__newsletter input:hover { box-shadow: 0 0 0 2px rgba(228, 182, 17, 0.2); } .c-textbox:focus, .c-mini-form__textbox:focus, .c-footer__newsletter input:focus { box-shadow: 0 0 0 3px rgba(228, 182, 17, 0.2); } .c-textbox.input-validation-error, .input-validation-error.c-mini-form__textbox, .c-footer__newsletter input.input-validation-error { box-shadow: inset 0 0 0 0.125rem #ff5932; color: #ff5932; } .c-textbox:disabled, .c-mini-form__textbox:disabled, .c-footer__newsletter input:disabled { opacity: 1; } .hs-input[type="text"], .hs-input[type="email"], .hs-input[type="tel"], textarea.hs-input { --border-width: 0rem; --horizontal-padding: calc(var(--form-control-height) / 3); --padding-left: var(--horizontal-padding); --padding-right: var(--horizontal-padding); display: inline-block; position: relative; width: 100%; appearance: none; background: #fff; border: var(--border-width) solid; border-radius: 0; box-shadow: 0 0 0 2px rgba(228, 182, 17, 0); display: flex; align-items: center; filter: drop-shadow(0 0 0.375rem rgba(0, 0, 0, 0.05)); font-family: "Matter", sans-serif; font-size: var(--form-control-font-size); font-weight: 400; line-height: 1.5em; padding: 0.625rem var(--padding-right) 0.625rem var(--padding-left); transition: 0.3s; width: 100%; color: var(--gray-darkest); -webkit-appearance: textfield; -moz-appearance: textfield; min-height: 1.2em; width: 100%; color: var(--gray-darkest); } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .hs-input[type="text"], .hs-input[type="email"], .hs-input[type="tel"], textarea.hs-input { height: var(--form-control-height); } } } .hs-input[type="text"]:hover, .hs-input[type="email"]:hover, .hs-input[type="tel"]:hover, textarea.hs-input:hover { box-shadow: 0 0 0 2px rgba(228, 182, 17, 0.2); } .hs-input[type="text"]:focus, .hs-input[type="email"]:focus, .hs-input[type="tel"]:focus, textarea.hs-input:focus { box-shadow: 0 0 0 3px rgba(228, 182, 17, 0.2); } .hs-input[type="text"].input-validation-error, .hs-input[type="email"].input-validation-error, .hs-input[type="tel"].input-validation-error, textarea.hs-input.input-validation-error { box-shadow: inset 0 0 0 0.125rem #ff5932; color: #ff5932; } .hs-input[type="text"]:disabled, .hs-input[type="email"]:disabled, .hs-input[type="tel"]:disabled, textarea.hs-input:disabled { opacity: 1; } .hs-input[type="checkbox"] { margin-right: 10px; } .hs-form-checkbox-display span, .hs-form-booleancheckbox-display span { font-size: 0.875rem; } .hs-richtext { padding-bottom: 1rem; font-size: 0.875rem; } /** * COMPONENTS.TOGGLE-FIELD * * @description : * */ .c-toggle-field { align-items: flex-start; display: grid; grid-template-columns: min-content 1fr; min-height: var(--form-toggle-control-size); } .c-toggle-field--stacked { grid-template-columns: auto; grid-template-rows: auto auto; text-align: center; } .c-toggle-field__toggle-wrap { grid-column: 1; margin-right: 0.75rem; } .c-toggle-field--stacked .c-toggle-field__toggle-wrap { display: flex; flex-flow: row; grid-column: 1; grid-row: 1; justify-content: center; margin-right: 0; } .c-toggle-field__toggle { display: flex; } .c-toggle-field__label-wrap { --label-line-height: 1.25rem; grid-column: 2; line-height: var(--label-line-height); padding-top: calc((var(--form-toggle-control-size) - var(--label-line-height)) / 2); } .c-toggle-field--stacked .c-toggle-field__label-wrap { display: flex; flex-flow: row; grid-column: 1; grid-row: 2; justify-content: center; margin-top: 0.3125rem; } .c-toggle-field__label { --label-line-height: 1.25rem; cursor: pointer; display: block; font-size: 0.9375rem; font-family: "Matter", sans-serif; position: relative; } .c-toggle-field--required .c-toggle-field__label::after { color: #ff5932; content: '*'; display: inline-block; font-weight: bold; margin-left: 0.25ch; } .c-toggle-field__label-tip { display: block; font-size: 0.75rem; line-height: 1rem; margin-top: 0.25rem; width: 100%; } .c-toggle-field__error-wrap { display: block; grid-column: 1 / span 2; width: 100%; } .c-toggle-field__error { color: #ff5932; display: block; margin-top: 0.625rem; } .hs-form, .c-umbraco-form { display: grid; gap: 10px 35px; } @media (min-width: 768px) { .hs-form, .c-umbraco-form { grid-template-columns: 1fr 1fr; } .hs-form .hs-dependent-field, .hs-form .hs-form-field, .hs-form .c-toggle-field, .hs-form .legal-consent-container, .hs-form .c-field, .c-umbraco-form .hs-dependent-field, .c-umbraco-form .hs-form-field, .c-umbraco-form .c-toggle-field, .c-umbraco-form .legal-consent-container, .c-umbraco-form .c-field { grid-column: span 2; } .hs-form .hs_firstname, .hs-form .c-field.firstname, .c-umbraco-form .hs_firstname, .c-umbraco-form .c-field.firstname { grid-column: 1; } .hs-form .hs_lastname, .hs-form .c-field.lastname, .c-umbraco-form .hs_lastname, .c-umbraco-form .c-field.lastname { grid-column: 2; } } .c-contact-form-grid { gap: 5.375rem; display: grid; grid-template-columns: 1fr; } @media (min-width: 1024px) { .c-contact-form-grid { grid-template-columns: repeat(2, 1fr); } } /** * COMPONENTS.ACCORDION * * @description : * */ .c-accordion { --gutter-width: 3.125rem; display: block; } .c-accordion--compact { display: block; } .c-accordion__list { display: block; } .c-accordion__item { border-bottom: 0.0625rem solid #F5F2EF; } .c-accordion__section { padding: 0.375rem 0; } @media (min-width: 768px) { .c-accordion__section { padding: 0.875rem 0; } } .c-accordion__section-header { padding: 0.875rem 0; position: relative; } @media (min-width: 768px) { .c-accordion__section-header { padding: 1.25rem 0; } } .c-accordion--compact .c-accordion__section-header { padding: 0.75rem 0; } .c-accordion__header-toggle { border-radius: 0.0625rem; display: block; height: 100%; left: 0; padding-left: 1.25rem; position: absolute; top: 0; width: 100%; z-index: 2; } @media (min-width: 480px) { .c-accordion__header-toggle { padding-left: var(--gutter-width); } } .c-accordion__header-toggle:focus-visible { box-shadow: 0 0 0 0.1875rem #eee; } .c-accordion__expand-icon { display: block; height: 1.375rem; left: 0; margin-top: -0.4375rem; position: absolute; transition: 0.2s; transform-origin: 8px 7px; width: 1.375rem; top: 1.625rem; } @media (min-width: 480px) { .c-accordion__expand-icon { top: 50%; margin-top: -0.6875rem; transform-origin: 50% 50%; } } .c-accordion__item.is-open .c-accordion__expand-icon { transform: rotate(90deg); } @media print { .c-accordion__expand-icon { display: none; } } .c-accordion__expand-icon::before { border-top: 0.4375rem solid transparent; border-left: 0.375rem solid var(--wolfbrook-gold); border-bottom: 0.4375rem solid transparent; bottom: 0; content: ''; display: block; margin: auto; width: 0; } @media (min-width: 480px) { .c-accordion__expand-icon::before { border-top: 0.6875rem solid transparent; border-left: 0.625rem solid var(--wolfbrook-gold); border-bottom: 0.6875rem solid transparent; } } .c-accordion__section-heading { display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -0.00625rem; font-weight: 500; padding-left: 1.625rem; position: relative; } a:hover .c-accordion__section-heading, .c-accordion__section-heading a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } @media (min-width: 768px) { .c-accordion__section-heading { font-size: 1.875rem; line-height: 2.625rem; } } @media (min-width: 480px) { .c-accordion__section-heading { padding-left: var(--gutter-width); } } .c-accordion__content-panel { display: none; padding: 0.625rem 0 1.5rem 1.625rem; } @media (min-width: 480px) { .c-accordion__content-panel { padding: 0.625rem 0 1.5rem var(--gutter-width); } } .c-accordion--compact .c-accordion__content-panel { padding: 0.625rem 0 1rem var(--gutter-width); } .c-accordion__item.is-open .c-accordion__content-panel { display: block; } @media print { .c-accordion__content-panel { display: block; } } .c-capital-registration-form { display: grid; grid-template-columns: 1fr; grid-row-gap: 0.9375rem; } @media (min-width: 1440px) { .c-capital-registration-form { grid-auto-flow: column; grid-template-columns: 1fr 18.25rem; grid-template-rows: 1fr 1fr; grid-column-gap: 8.625rem; grid-row-gap: 0.9375rem; } } .c-capital-registration-module__submit { width: 100%; height: 100%; background-color: var(--gray-darkest); font-size: 0.875rem; letter-spacing: 0.125rem; font-family: "Matter", sans-serif; color: var(--white); text-align: center; font-weight: 600; } .c-capital-registration-form-submit-button { height: 3.5rem; } @media (min-width: 1440px) { .c-capital-registration-form-submit-button { grid-area: 2 / 2; } } .c-capital-registration-form-wrapper { background-color: var(--gray-pale); display: flex; flex-direction: column; gap: 2.625rem; box-sizing: border-box; padding: 2.5rem 1.25rem; } @media (min-width: 1024px) { .c-capital-registration-form-wrapper { padding: 2.5rem 5.125rem 3rem; } } .c-cards_4_column_module { background-color: var(--wolfbrook-gold); box-sizing: border-box; padding: 2.5rem 1.25rem; } @media (min-width: 768px) { .c-cards_4_column_module { padding: 4rem 5rem; } } .c-cards_4_column_module h3 { font-size: 3.125rem; padding-bottom: 0.375rem; } @media (min-width: 480px) { .c-cards_4_column_module h3 { font-size: 3.75rem; line-height: 3rem; padding-bottom: 0; } } .c-cards_4_column_module sub { font-size: 2rem; } @media (min-width: 480px) { .c-cards_4_column_module sub { font-size: 2.5rem; } } .c-cards_4_column_module sup { top: -1rem; position: relative; font-size: 2rem; } @media (min-width: 480px) { .c-cards_4_column_module sup { font-size: 2.5rem; } } .c-cards_4_column_module p { font-size: 0.875rem; line-height: 1.25rem; } @media (min-width: 768px) { .c-cards_4_column_module p { padding-top: 1.25rem; } } .c-cards-4-column__item { text-align: center; padding-bottom: 0.625rem; } @media (min-width: 480px) { .c-cards-4-column__item { text-align: left; padding-bottom: 0; } } /** * COMPONENTS.CAROUSEL-BUTTON * * @description : * */ .c-carousel-button__nav-line { background-color: var(--wolfbrook-black); display: inline-block; height: 1px; width: 5rem; position: relative; } .o-carousel__prev .c-carousel-button__nav-line { left: -36px; } .o-carousel__prev .c-carousel-button__nav-line::after { content: ''; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid var(--wolfbrook-black); position: absolute; left: 0; top: -6px; } .o-carousel__next .c-carousel-button__nav-line { left: 36px; } .o-carousel__next .c-carousel-button__nav-line::after { content: ''; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid var(--wolfbrook-black); position: absolute; right: 0; top: -6px; } .u-inverted .c-carousel-button__nav-line { background-color: var(--wolfbrook-gold); } .u-inverted .o-carousel__prev .c-carousel-button__nav-line::after { border-right-color: var(--wolfbrook-gold); } .u-inverted .o-carousel__next .c-carousel-button__nav-line::after { border-left-color: var(--wolfbrook-gold); } .c-carousel-button { align-items: center; display: none; position: absolute; top: calc(50% - 19px); z-index: 1; height: 2.375rem; } @media (min-width: 480px) { .c-carousel-button { display: flex; } } .c-carousel-button--disabled { opacity: 0.2; } .c-carousel-button.c-milestone-carousel-button { top: 7.5rem; } .c-carousel-button__nav-label { width: 104px; height: 104px; align-items: center; border: 1px solid var(--wolfbrook-black); color: var(--wolfbrook-black); border-radius: 200px; font-size: 0.75rem; font-family: "Matter", sans-serif; font-weight: 600; line-height: 0.875rem; letter-spacing: 0.125rem; transform: rotate(-90deg); text-transform: uppercase; display: flex; justify-content: center; } .u-inverted .c-carousel-button__nav-label { border: 1px solid var(--wolfbrook-gold); color: var(--wolfbrook-gold); } /** * COMPONENTS.CLOSE-BUTTON * * @description : A button that is just an X. * */ .c-close-button { display: block; height: 1.1875rem; position: relative; width: 1.1875rem; } .c-close-button__button { border: 0.625rem solid transparent; box-sizing: content-box; bottom: -0.625rem; display: block; height: inherit; left: -0.625rem; position: absolute; right: -0.625rem; top: -0.625rem; width: inherit; } .c-close-button__icon { display: block; height: 100%; margin: 0 -0.0625rem; position: relative; } .c-close-button__icon::before, .c-close-button__icon::after { background: currentColor; content: ''; display: block; height: 0.0625rem; left: 0; position: absolute; top: 50%; transform-origin: 50% 50%; width: 100%; } .c-close-button__icon::before { transform: rotate(-45deg); } .c-close-button__icon::after { transform: rotate(45deg); } .c-client-deals { display: flex; flex-flow: column; } .c-client-milestones { /*margin-left: 3.75rem; margin-right: 3.75rem;*/ } .c-client-milestones, .c-client-downloads { display: flex; flex-flow: row wrap; gap: 2.5rem; } .c-client-milestone-item { display: flex; flex-direction: column; justify-content: space-between; height: auto; } .c-client-milestone-item .o-status-card__link { padding-bottom: 0.625rem; display: block; } .c-client-download__image { width: 18.75rem; height: 14rem; } .c-client-download__image:hover { box-shadow: 0 0 0 3px #fff, 0 0 4px 4px var(--wolfbrook-gold); } .c-client-download__img { object-fit: cover; height: 100%; width: 100%; } .c-common-modal__close svg { pointer-events: none; } .c-common-modal__title { color: var(--white); display: block; font-family: "GoodSans-Medium", sans-serif; font-size: 1.125rem; line-height: 1.375rem; font-weight: 500; letter-spacing: -0.01063rem; } a:hover .c-common-modal__title, .c-common-modal__title a:hover { text-decoration: underline; text-decoration-color: #e4b611; text-decoration-thickness: 0.125rem; } @media (min-width: 768px) { .c-common-modal__title { font-size: 1.625rem; line-height: 2.125rem; } } .c-common-modal__body { color: var(--gray-light); font-family: "Matter", sans-serif; font-size: 1rem; line-height: 1.5rem; font-style: normal; font-weight: 400; } .c-core_nav { display: none; } @media (min-width: 1040px) { .c-core_nav { display: unset; } } .c-core-nav__item--active { color: var(--wolfbrook-gold); } .c-core-nav__list { display: flex; flex-direction: row; } .c-core-nav__link { opacity: 0.7; white-space: nowrap; padding: 0.5rem 1.75rem; font-family: "Matter", sans-serif; font-weight: 500; transition: opacity 0.15s ease; } .c-core-nav__link:hover { opacity: 1; } .c-chart-module { background-color: #FBFAF9; padding: 1.5rem 1.5rem 3.375rem; } @media (min-width: 768px) { .c-chart-module { padding: 2.5rem 3.375rem 8rem; } } .c-chart-module__canvas-wrapper { height: 13.75rem; position: relative; } @media (min-width: 768px) { .c-chart-module__canvas-wrapper { height: 21.25rem; } } .c-consultant-contact-methods { font-size: 1rem; gap: 12px; display: flex; flex-direction: column; } .c-consultant-contact-item { transition: color 0.1s; } .c-consultant-contact-item:hover { color: var(--wolfbrook-gold); } .c-consultant-contact { display: flex; flex-direction: row; gap: 2.5rem; } @media (max-width: 1024px) { .c-consultant-contact { padding-top: 5rem; } } @media (max-width: 480px) { .c-consultant-contact { flex-direction: column; } } .c-consultant-contact__image { max-width: 10.0625rem; border-radius: 50%; } .c-consultant-contact__heading { font-weight: bold; font-size: 1rem; line-height: 1rem; color: var(--wolfbrook-gold); letter-spacing: 0.0875rem; font-family: "Matter", sans-serif; text-transform: uppercase; margin-bottom: 1.25rem; } .c-consultant-contact__message { font-weight: 500; font-size: 1.5rem; line-height: 1.75rem; margin-bottom: 1.875rem; } .c-consultant-contact__link { font-weight: 600; font-size: 0.875rem; line-height: 1.0625rem; letter-spacing: 0.125rem; font-family: "Matter", sans-serif; text-decoration: underline; text-underline-offset: 0.6875rem; text-decoration-color: var(--wolfbrook-gold); transition: color 0.2s ease; } .c-consultant-contact__link:hover { color: var(--wolfbrook-gold); } .c-consultant-contact__form { background-color: #1d1c1b; } @media (max-width: 480px) { .c-consultant-contact__form { margin-top: 10rem; } } .c-consultant-contact__form-message { font-size: 2.125rem; line-height: 2.75rem; letter-spacing: -0.0125rem; color: white; padding-top: 1.875rem; padding-bottom: 1.875rem; } .c-consultant-contact__form-contact { font-size: 1.375rem; line-height: 2.75rem; letter-spacing: -0.00813rem; color: white; } .c-consultant-contact__form-contact span { color: var(--wolfbrook-gold); } .c-consultant-contact__form-label { font-size: 1rem; line-height: 1.5rem; letter-spacing: 0.125rem; color: var(--wolfbrook-gold); padding-bottom: 1rem; font-family: Helvetica, sans-serif; font-weight: 300; text-transform: uppercase; display: block; } .c-consultant-contact__form-input { display: block; width: 100%; background-color: white; resize: none; padding: 0.625rem 0.9375rem; } .c-consultant-contact__form-failed-message { display: none; color: #ff5932; } .c-consultant-contact__form-success-message { display: none; color: #fff; } .c-consultant-contact__form-submit.c-cta, .c-footer__newsletter form input.c-consultant-contact__form-submit[type=submit] { color: white; } @media (max-width: 768px) { .c-consultant-contact__form-submit.c-cta, .c-footer__newsletter form input.c-consultant-contact__form-submit[type=submit] { width: 100%; } } /** * COMPONENTS.CTA * * @description : Call to action links/buttons * */ .hs-button, .c-cta, .c-footer__newsletter form input[type=submit] { align-items: center; appearance: none; box-shadow: inset 0 0 rgba(228, 182, 17, 0); color: inherit; cursor: pointer; display: inline-flex; font: inherit; font-family: "Matter", sans-serif; font-size: 0.875rem; font-weight: 500; justify-content: center; letter-spacing: 0.14286em; max-width: 100%; padding: 0; text-align: center; text-decoration: none; transition: background-color 0.1s, color 0.1s, box-shadow 0.15s; } @media (min-width: 480px) { .hs-button, .c-cta, .c-footer__newsletter form input[type=submit] { width: auto; } } .c-cta--underlined { border-bottom: 0.0625rem solid #e4b611; padding-bottom: 0.6875rem; } .c-cta--underlined:hover { box-shadow: inset 0 -0.125rem #e4b611; } .hs-submit .hs-button, .c-cta--outlined { min-height: 2.875rem; padding: 0.6875rem 3.75rem; border: 0.0625rem solid var(--wolfbrook-gold); text-transform: uppercase; } @media (min-width: 480px) { .hs-submit .hs-button, .c-cta--outlined { padding: 0.6875rem 5rem; } } .hs-submit .hs-button:hover, .c-cta--outlined:hover { background-color: var(--wolfbrook-gold); color: var(--gray-darkest); } .c-cta--solid-black { min-height: 2.875rem; padding: 0.6875rem 3.75rem; background-color: #000; color: #fff; text-transform: uppercase; } @media (min-width: 480px) { .c-cta--solid-black { padding: 0.6875rem 5rem; } } .c-cta--solid-gray-darkest { min-height: 2.875rem; padding: 0.6875rem 3.75rem; background-color: #2A2927; color: #fff; text-transform: uppercase; } @media (min-width: 480px) { .c-cta--solid-gray-darkest { padding: 0.6875rem 5rem; } } .c-cta--solid-gold, .c-footer__newsletter form input[type=submit] { min-height: 2.875rem; padding: 0.6875rem 3.75rem; background-color: #e4b611; color: #fff; text-transform: uppercase; } @media (min-width: 480px) { .c-cta--solid-gold, .c-footer__newsletter form input[type=submit] { padding: 0.6875rem 5rem; } } .c-cta--solid-gold:hover, .c-footer__newsletter form input:hover[type=submit] { background-color: #c29b0f; } .c-cta--full-width { width: 100%; } /** * COMPONENTS.DATA-POINT * * @description : * */ .c-data-point { align-items: flex-start; display: flex; flex-flow: row; gap: 0.25rem; } .c-data-point__unit { font-size: 2.5rem; line-height: 3.75rem; } .c-data-point__number { font-size: 5rem; letter-spacing: -0.01688rem; line-height: 1; } .c-edit-window { position: fixed; top: 0; bottom: 0; left: 0; right: 0; max-height: 100vh; z-index: 999999; background-color: #1d1c1b; color: white; opacity: 0; pointer-events: none; overflow-y: auto; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ transition: opacity 0.3s ease; } .c-edit-window::-webkit-scrollbar { display: none; } .c-edit-window.open { opacity: 1; pointer-events: initial; } .c-edit-window__wrapper { display: grid; min-height: 100%; box-sizing: content-box; margin-left: auto; margin-right: auto; max-width: var(--body-max-width); padding-left: var(--min-edge-gap); padding-right: var(--min-edge-gap); } .c-edit-window__close { text-align: right; position: relative; padding-left: var(--min-edge-gap); padding-right: var(--min-edge-gap); } .c-edit-window__close .c-flyout_nav__close { position: fixed; top: 1rem; } .c-edit-window__logo > img { padding-bottom: 5rem; } .c-edit-window__heading { font-size: 2.125rem; line-height: 2.75rem; letter-spacing: -0.0125rem; padding-bottom: 2.375rem; } .c-edit-window__form { width: 100%; flex-grow: 1; justify-self: center; padding-top: 3rem; padding-bottom: 3rem; } .c-edit-window__form-label { color: #93918F; font-family: "Matter", sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0.125rem; line-height: 1.5rem; text-transform: uppercase; } .c-edit-window__form-input__wrapper, .c-edit-window__form-input__wrapper__lg { display: inline-block; position: relative; margin-top: 1rem; margin-bottom: 2.125rem; width: 100%; max-width: 14rem; } .c-edit-window__form-input__wrapper__lg { max-width: 31.25rem; } .c-edit-window__form-input__sm, .c-edit-window__form-input__lg { background-color: white; padding: 1.125rem 3.75rem 1.125rem 1.5625rem; min-width: 100%; max-width: 14rem; font-family: "Matter", sans-serif; font-size: 1rem; letter-spacing: 0; line-height: 1.1875rem; } .c-edit-window__form-input__lg { max-width: 31.25rem; } .c-edit-window__form-input__icon { position: absolute; right: 1.25rem; top: 50%; transform: translateY(-50%); } .c-feature_text__1 { grid-column: 1 / 13; } @media (min-width: 768px) { .c-feature_text__1 { grid-column: 1 / 7; } } @media (min-width: 1440px) { .c-feature_text__1 { grid-column: 2 / 7; } } .c-feature_text__2 { color: var(--gray-medium); grid-column: 1 / 13; } @media (min-width: 768px) { .c-feature_text__2 { grid-column: 7 / 12; } } @media (min-width: 1440px) { .c-feature_text__2 { grid-column: 8 / 12; } } .c-flyout_nav { background: var(--wolfbrook-black); display: flex; flex-direction: column; height: 100%; overflow: auto; padding: 1.25rem; position: fixed; right: 0; top: 0; transition: transform 0.45s ease-in-out; transform: translateX(101%); width: 100%; z-index: var(--z-flyout-nav); } @media (min-width: 480px) { .c-flyout_nav { width: clamp(320px, 50vw, 880px); } } .flyout-active .c-flyout_nav { transform: translateX(0); } @media (min-width: 480px) { .c-flyout_nav { padding: 2.5rem; } } .c-flyout_nav__top { display: flex; justify-content: space-between; margin-bottom: 2rem; align-items: center; flex: 0 0 auto; } .c-flyout_nav__title { color: var(--wolfbrook-gold); } .c-flyout_nav__content { overflow-y: auto; } @media (min-width: 480px) { .c-flyout_nav__content { flex: 0 1 auto; display: flex; flex-wrap: wrap; } } .c-flyout_nav__content::-webkit-scrollbar { width: 0.5rem; } .c-flyout_nav__content::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.1); } .c-flyout_nav__content::-webkit-scrollbar-thumb { background-color: #fff; } .c-flyout_nav__list { flex: 1 0 50%; margin-bottom: 2rem; padding-right: 2rem; min-width: 20ch; } .c-flyout_nav__section_heading { font-size: 20px; margin-bottom: 0.5em; } @media (min-width: 1040px) { .c-flyout_nav__section_heading { font-size: 34px; } } .c-flyout_nav__section_heading_link:hover { border-bottom: 1px solid var(--wolfbrook-gold); } .c-flyout_nav__sub_item { font-size: 14px; } .c-flyout_nav__sub_item + .c-flyout_nav__sub_item { margin-top: 0.5em; } .c-flyout_nav__sub_link { opacity: 0.7; transition: opacity 0.15s ease; } .c-flyout_nav__sub_link:hover, .c-flyout_nav__sub_link:focus { opacity: 1; } .c-flyout_nav__btn { justify-self: stretch; flex: 1 1 100%; max-width: 20.625rem; min-width: 0; width: 100%; } .c-flyout_nav__btn + .c-flyout_nav__btn { margin-top: 1rem; } .c-footer { padding-bottom: 3rem; clear: both; } .c-footer__inner { border-top: 1px solid var(--wolfbrook-gold); padding-top: 3.75rem; padding-bottom: 6rem; border-bottom: 1px solid #c5c5c5; } .c-footer__newsletter { grid-row: row-start / row-end; grid-column: subscribe-start / subscribe-end; } .c-footer__newsletter .hs-form-field > label { margin-bottom: 1em; font-size: 1.625rem; line-height: 2.125rem; } @media (min-width: 768px) { .c-footer__newsletter .hs-form-field > label { font-size: 26px; } } .c-footer__newsletter input { height: auto; align-self: stretch; border-color: transparent; flex-grow: 1; } .c-footer__newsletter form { display: flex; gap: 0; } .c-footer__newsletter form .hs_submit { margin-top: auto; } .c-footer__newsletter form div { position: relative; } .c-footer__newsletter form .hs-form-field { position: relative; } .c-footer__newsletter form .hs-form-required { display: none; } .c-footer__newsletter ul { position: absolute; bottom: -30px; } .c-footer__min_inner { gap: 5rem; padding-top: 2rem; display: flex; justify-content: space-between; } @media (max-width: 768px) { .c-footer__min_inner { gap: 4rem; flex-direction: column; } } .c-footer__min_location_details { display: flex; gap: 15%; width: 68%; justify-content: flex-end; } @media (max-width: 768px) { .c-footer__min_location_details { width: 100%; justify-content: flex-start; } } .c-footer__newsletter_text { margin-bottom: 1em; font-size: 1.625rem; line-height: 2.125rem; } @media (min-width: 768px) { .c-footer__newsletter_text { font-size: 26px; } } .c-footer__nav { display: grid; grid-template-columns: repeat(2, 1fr); grid-row: row2-start / row2-end; grid-column: columns-start / columns-end; gap: 2.5rem; } @media (min-width: 768px) { .c-footer__nav { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1440px) { .c-footer__nav { grid-column: columns-start / columns-end; grid-template-columns: repeat(4, 1fr); gap: 5rem; } } .c-footer_nav__list { min-width: max-content; } .c-footer_nav__heading { margin-bottom: 1.25rem; font-size: 1rem; font-family: "Matter", sans-serif; font-weight: 500; } .c-footer_nav__item { margin-bottom: 0.5em; } .c-footer__legal { margin-top: 1rem; grid-column: 1 / -1; display: flex; justify-content: space-between; } .c-footer_nav__item_link { font-size: 0.875rem; line-height: 1.5rem; font-family: "Matter", sans-serif; } .c-footer_nav__item_link:hover { text-decoration: underline; } /** * COMPONENTS.FORM-PANEL * * @description : * */ .c-form-panel { background-color: #FBFAF9; color: #080808; display: grid; grid-template-columns: auto; grid-template-rows: repeat(3, auto); } @media (min-width: 768px) { .c-form-panel { grid-template-columns: auto minmax(auto, 36.25rem); grid-template-rows: 1fr min-content; } } .c-form-panel__form-box { grid-column: 1; grid-row: 1; padding: 1.5rem; } @media (min-width: 768px) { .c-form-panel__form-box { grid-row: 1 / span 2; } } @media (min-width: 768px) { .c-form-panel__form-box { padding: 2rem 2.625rem; } } @media (min-width: 1024px) { .c-form-panel__form-box { padding: 2.5rem 3.25rem; } } .c-form-panel__form-box--full-width { grid-column: 1 / -1; } @media (min-width: 768px) { .c-form-panel__header { min-height: 4.5rem; padding-bottom: 1.5rem; } } .c-form-panel__summary-box { background: #e4b611; grid-column: 1; grid-row: 2; padding: 1.5rem; } @media (min-width: 768px) { .c-form-panel__summary-box { grid-column: 2; grid-row: 1; padding: 2rem 2.625rem; } } @media (min-width: 1024px) { .c-form-panel__summary-box { padding: 2.5rem 3.25rem; } } .c-form-panel__continue-box { background: #F5F2EF; grid-column: 1; grid-row: 3; padding: 1.5rem; } @media (min-width: 768px) { .c-form-panel__continue-box { grid-column: 2; grid-row: 2; padding: 2rem 2.625rem; } } @media (min-width: 1024px) { .c-form-panel__continue-box { padding: 2.5rem 3.25rem; } } /** * COMPONENTS.FORM-RESULT-BOX * * @description : * */ .c-form-result-box { align-items: center; background: #e4b611; color: #080808; display: flex; flex-flow: row; gap: 1.25rem; padding: 1.625rem 1.25rem; } @media (min-width: 768px) { .c-form-result-box { padding: 2rem 2.5rem; } } @media (min-width: 1024px) { .c-form-result-box { padding: 2.5rem 3.125rem; } } .c-form-result-box__data-block { align-items: flex-start; display: flex; flex: 0 0 auto; flex-flow: row; gap: 0.25rem; } .c-form-result-box__unit { font-size: 2.5rem; line-height: 3.75rem; } .c-form-result-box__number { font-size: 5rem; letter-spacing: -0.01688rem; line-height: 1; } .c-form-result-box__text-block { flex: 1 1 auto; } .c-form-result-box__subheading { font-family: "Matter", sans-serif; font-size: 1.25rem; font-weight: 500; line-height: 1.5rem; margin-bottom: 0.75rem; } .c-form-result-box__fineprint { font-family: "Matter", sans-serif; font-size: 0.875rem; line-height: 1.0625rem; } /** * COMPONENTS.CTA * * @description : Call to action links/buttons * */ .c-google-map { background-color: #F5F2EF; padding-top: 66.666%; position: relative; } .c-google-map::after { box-shadow: inset 0 0 1.875rem rgba(0, 0, 0, 0.1); bottom: 0; content: ''; display: block; left: 0; pointer-events: none; position: absolute; right: 0; top: 0; z-index: 2; } .c-google-map__content { bottom: 0; left: 0; position: absolute; right: 0; top: 0; z-index: 1; } .c-google-map__marker-label { color: #000 !important; left: 20px; position: absolute; text-shadow: -1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff, 1px 1px 0px #fff; top: 40px; } @media (min-width: 768px) { .c-google-map__marker-label { left: 30px; } } .c-header { background-color: var(--wolfbrook-charcoal); color: var(--white); position: sticky; inset: 0 0 auto 0; z-index: 9000; } .c-header__inner { padding: clamp(20px, 1vw, 32px) 0; display: flex; align-items: center; gap: 40px; } .c-header__logo { display: block; margin-right: auto; flex: 0 1 auto; width: 150px; } @media (min-width: 1040px) { .c-header__logo { width: 215px; } } .c-header__buttons { display: none; } @media (min-width: 1040px) { .c-header__buttons { display: unset; } } .c-header__button-cta { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .c-hero-action { position: absolute; right: var(--min-edge-gap); bottom: 0; } @media (max-width: 768px) { .c-hero-action { position: relative; right: initial; margin-top: 2rem; } } .c-hero-action__button { font-family: "Matter", sans-serif; font-size: 1rem; line-height: 1rem; letter-spacing: 1.4px; font-weight: bold; text-transform: uppercase; padding-bottom: 0.875rem; border-bottom: 1px solid #e4b611; display: flex; flex-direction: row; gap: 1rem; } .c-hero-action__icon { width: 1rem; } .c-hero_module { position: relative; } @media (min-width: 480px) { .c-hero_module::after { display: block; content: ' '; background-image: url('data:image/svg+xml,%3Csvg width="120" height="276" viewBox="0 0 120 276" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M0 138L120 276V0L0 138Z" fill="%23E4B711"/%3E%3C/svg%3E'); background-size: cover; background-repeat: no-repeat; position: absolute; bottom: 0; right: 0; transform: translateY(50%); padding-top: 42.5%; width: clamp(30px, 5vw, 120px); } } .c-hero_module--with-gray-decor::after { background-image: url('data:image/svg+xml,%3Csvg width="120" height="276" viewBox="0 0 120 276" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" clip-rule="evenodd" d="M0 138L120 276V0L0 138Z" fill="white"/%3E%3C/svg%3E'); padding-top: 100%; width: clamp(30px, 25vw, 734px); opacity: 0.02; } @media (min-width: 768px) { .c-hero_module .c-media { margin-bottom: -6.25rem; } } .c-hero_module__img { width: 100%; } .c-home_hero { background-image: url("data:image/svg+xml,%3Csvg width='100' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgba(255,255,255,0.02)' d='M0 0h100v300L0 200l100-100z'/%3E%3C/svg%3E"); background-attachment: fixed; background-position: center; background-size: 100vw 300vw; background-color: var(--wolfbrook-charcoal); color: var(--white); padding-top: clamp(60px, 10vw, 65px); } .c-home_hero__title_major { display: inline-block; margin-bottom: 0.25em; } .c-home_hero__title_minor { color: rgba(255, 255, 255, 0.8); display: inline-block; } .c-home_hero__title_minor a { color: white; text-decoration-line: underline; text-decoration-style: solid; text-decoration-thickness: 2px; text-underline-offset: 0.2em; } .c-home-hero__swiper-pagination .swiper-pagination-bullet { background-color: #fff; opacity: 0.5; } .c-home-hero__swiper-pagination .swiper-pagination-bullet-active { background-color: #e4b611; opacity: 1; } .c-dual-swipe { overflow: hidden; padding-top: 5rem; } @media (min-width: 480px) { .c-dual-swipe { padding-bottom: 2.5rem; } } @media (min-width: 768px) { .c-dual-swipe { padding-top: 5.625rem; padding-bottom: 2.5rem; } } @media (min-width: 1440px) { .c-dual-swipe { padding-top: 6.25rem; padding-bottom: 2.5rem; } } .c-dual-swipe__swipe-container { position: relative; } @media (min-width: 480px) { .c-dual-swipe__swipe-container { padding-left: 3.75rem; padding-right: 3.75rem; } } .c-dual-swipe__slide-desc-group { padding: 1.25rem; padding-bottom: 0; } @media (min-width: 768px) { .c-dual-swipe__slide-desc-group { padding-left: 3.75rem; } } .c-dual-swipe__thumb-swiper { overflow: visible !important; } .c-dual-swipe__thumb-item { padding: 0.625rem; cursor: pointer; } @media (min-width: 768px) { .c-dual-swipe__thumb-item { padding: 1.25rem; } } .c-dual-swipe__thumb-item:hover, .c-dual-swipe__thumb-item--active { background-color: rgba(255, 255, 255, 0.06); } .c-dual-swipe__thumb-item__image { position: relative; } .c-dual-swipe__thumb-item__label { line-height: 1.25rem; } .c-dual-swipe__thumb-item__image--video::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23fff'/%3E%3Cpath fill='%23e4b711' d='m126.61 100-44 30.61V69.39l44 30.61z'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 4.375rem 4.375rem; color: #fff; content: ''; display: block; height: 6.25rem; left: 50%; opacity: 1; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: 0.2s; width: 6.25rem; z-index: 2; } .c-dual-swipe__thumb-item .c-media { transition: height 0.2s; } .c-dual-swipe__iframe-wrapper { background: #000; pointer-events: all; position: relative; width: 100%; height: 100%; } .c-dual-swipe__iframe-wrapper iframe { width: 100%; height: 100%; } .c-dual-swipe__slide-content { display: block; left: 0; position: relative; top: 0; width: 100%; aspect-ratio: 2; } .c-hotspot-swipe .swiper-wrapper { display: flex; align-items: stretch; } .c-hotspot-swipe .swiper-wrapper .swiper-slide { display: flex; flex-direction: column; height: unset; } .c-hotspot-swipe .swiper-button-prev, .c-hotspot-swipe .swiper-button-next { color: var(--wolfbrook-gold); } @media (max-width: 480px) { .c-hotspot-swipe .swiper-button-prev, .c-hotspot-swipe .swiper-button-next { --swiper-navigation-size: 1.25rem; } } .c-hotspot-list { display: block; transition: 0.5s; } .c-points-image:hover .c-hotspot-list { opacity: 1; } .c-hotspot-item { align-items: center; background: #e4b611; border-radius: 100vw; box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0); cursor: pointer; display: flex; width: 1.25rem; height: 1.25rem; justify-content: center; margin: -1rem; opacity: 0.8; position: absolute; transition: 0.2s opacity, 0.2s box-shadow; z-index: 10; } .c-hotspot-item:focus { box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5); } .c-hotspot-item:hover, .c-hotspot-item:focus { opacity: 1; z-index: 11; } .c-hotspot-item::before, .c-hotspot-item::after { background-color: var(--white); content: ''; display: block; position: absolute; z-index: 11; } .c-hotspot-item::before { height: 0.125rem; width: 0.625rem; } .c-hotspot-item::after { height: 0.625rem; width: 0.125rem; } @media (min-width: 768px) { .c-hotspot-item { width: 3.3125rem; height: 3.3125rem; } .c-hotspot-item::before { height: 0.25rem; width: 1.25rem; } .c-hotspot-item::after { height: 1.25rem; width: 0.25rem; } } .c-hotspot-post { background: rgba(255, 255, 255, 0.9); color: #000; display: none; font-size: 1rem; font-weight: 400; left: 100%; line-height: 1.5rem; margin-left: -3.3125rem; max-width: 21.25rem; position: absolute; top: 50%; transform: translateY(-50%); z-index: 30; width: 10.625rem; margin-top: 0; transition: top 0.1s, margin-top 0.1s; } @media (min-width: 768px) { .c-hotspot-post { width: max-content; } } .c-hotspot-item:hover .c-hotspot-post, .c-hotspot-item:focus .c-hotspot-post { display: block; } .c-hotspot-post__text-group { font-family: "Matter", sans-serif; padding: 0.5rem; flex-grow: 1; } @media (min-width: 768px) { .c-hotspot-post__text-group { padding: 1.375rem 1.5rem; } } .c-hotspot-post__title { font-size: 0.75rem; line-height: 1rem; } @media (min-width: 768px) { .c-hotspot-post__title { font-size: 1rem; line-height: 1.25rem; } } .c-hotspot-post__subtitle { font-size: 0.625rem; line-height: 0.875rem; font-weight: 600; } @media (min-width: 768px) { .c-hotspot-post__subtitle { font-size: 0.875rem; line-height: 1.25rem; } } .c-hotspot-post img { width: 10.625rem; height: 9.6875rem; } @media (min-width: 768px) { .c-hotspot-post img { width: 21.25rem; height: 19.375rem; } } .c-hotspot-post img img { object-fit: cover; } .c-image-module__slide { position: absolute; right: -100px; width: 100px; height: 100px; background: blue; -webkit-animation: slide 0.5s forwards; -webkit-animation-delay: 2s; animation: slide 0.5s forwards; animation-delay: 2s; } @-webkit-keyframes c-image-module__slide { 100% { right: 0; } } @keyframes c-image-module__slide { 100% { right: 0; } } /* Fading animation */ .c-image-module__fade { animation-name: c-image-module__key-frames; animation-duration: 1.5s; } @keyframes c-image-module__key-frames { from { opacity: .4; } to { opacity: 1; } } .c-offer-module { padding: 32px 0; } @media (min-width: 768px) { .c-offer-module { padding: 130px 0; } } .c-offer-module-bkg { aspect-ratio: 375/230; overflow: hidden; position: relative; } @media (min-width: 768px) { .c-offer-module-bkg { aspect-ratio: auto; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 0; } } .c-offer-module-bkg > .u-desktop-only { height: 100%; } .c-offer-module-bkg img { object-fit: cover; object-position: center; } .c-offer-module-offer-status-tag--mobile { position: absolute; left: 0; bottom: 0; } .c-offer-module-offer-status-tag { font-size: 10px; padding: 16px 20px; line-height: 1; text-transform: uppercase; font-weight: 500; letter-spacing: 0.02em; background-color: #e4b611; color: #2E2E2E; width: fit-content; z-index: 1; } @media (min-width: 768px) { .c-offer-module-offer-status-tag { font-size: 16px; padding: 32px 16px; writing-mode: vertical-rl; transform: rotate(180deg); height: fit-content; } } .c-offer-module-content-wrapper { z-index: 1; position: relative; } @media (min-width: 768px) { .c-offer-module-content-wrapper { display: flex; gap: 8px; } } .c-offer-module-timer { padding: 32px 0; background-color: #1d1c1b; } @media (min-width: 768px) { .c-offer-module-timer { padding: 60px 80px; } } .c-offer-module-heading { font-weight: 500; font-size: 14px; letter-spacing: 0.02em; padding-bottom: 16px; color: #e4b611; } @media (min-width: 768px) { .c-offer-module-heading { font-size: 18px; padding-bottom: 24px; } } .c-offer-module-description { font-weight: 700; font-size: 20px; line-height: 1.2; padding-bottom: 24px; border-bottom: 1px solid #d2cfcb; color: #fff; } @media (min-width: 768px) { .c-offer-module-description { font-size: 40px; padding-bottom: 24px; } } .c-offer-module-description strong { color: #e4b611; text-decoration: underline; } .c-offer-module-offer-status-line { font-weight: 500; font-size: 12px; color: #e4b611; padding-bottom: 16px; padding-top: 16px; } @media (min-width: 768px) { .c-offer-module-offer-status-line { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; padding-bottom: 16px; padding-top: 32px; } } .c-offer-module-offer-timer-group { display: flex; gap: 4px; } @media (min-width: 768px) { .c-offer-module-offer-timer-group { gap: 8px; } } .c-offer-module-offer-timer-unit { flex: 1; border-radius: 4px; overflow: hidden; text-align: center; background-color: #2E2D2C; display: flex; flex-direction: column; justify-content: space-between; height: 64px; } @media (min-width: 768px) { .c-offer-module-offer-timer-unit { height: 110px; } } .c-offer-module-offer-timer-number { font-weight: 700; font-size: 26px; line-height: 0.8; color: white; padding-top: 12px; } @media (min-width: 768px) { .c-offer-module-offer-timer-number { font-size: 48px; padding-top: 24px; } } .c-offer-module-offer-timer-label-box { background-color: #e4b611; height: 18px; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) { .c-offer-module-offer-timer-label-box { height: 33px; } } .c-offer-module-offer-timer-label { font-size: 8px; line-height: 9.6px; text-transform: uppercase; color: #1d1c1b; } @media (min-width: 768px) { .c-offer-module-offer-timer-label { font-size: 14px; line-height: 18px; } } @media (max-width: 768px) { .c-offer-mobile-bkg { background-color: #1d1c1b; } } /* Jobs Widget SAMPLE CSS */ #ja-jobs-widget { position: relative; } .ja-loading { position: absolute; top: 10px; right: 10px; } .ja-loading.left { left: 10px; right: auto; } /* Forms */ .ja-form { margin-bottom: 3em; } .ja-form .ja-field-container { margin-bottom: 0.5em; } .ja-form .ja-field-container:before, .ja-form .ja-field-container:after { content: ""; display: table; } .ja-form .ja-field-container:after { clear: both; } .ja-form .ja-field-container { zoom: 1; } .ja-form .ja-field-container label { display: block; float: left; width: 100px; padding-top: 6px; } .ja-form .ja-field-container .ja-field { float: left; } .ja-form .ja-field-container select, .ja-form .ja-field-container textarea, .ja-form .ja-field-container input[type="text"], .ja-form .ja-field-container input[type="password"], .ja-form .ja-field-container input[type="datetime"], .ja-form .ja-field-container input[type="datetime-local"], .ja-form .ja-field-container input[type="date"], .ja-form .ja-field-container input[type="month"], .ja-form .ja-field-container input[type="time"], .ja-form .ja-field-container input[type="week"], .ja-form .ja-field-container input[type="number"], .ja-form .ja-field-container input[type="email"], .ja-form .ja-field-container input[type="url"], .ja-form .ja-field-container input[type="search"], .ja-form .ja-field-container input[type="tel"], .ja-form .ja-field-container input[type="color"] { font-family: Helvetica, Arial, sans-serif; font-size: 1em; color: #333; border: solid 1px #ccc; } .ja-form .ja-field-container select { width: 240px; padding: 2px; } .ja-form .ja-field-container textarea { width: 230px; padding: 3px 4px; } .ja-form .ja-field-container input[type="text"], .ja-form .ja-field-container input[type="password"], .ja-form .ja-field-container input[type="datetime"], .ja-form .ja-field-container input[type="datetime-local"], .ja-form .ja-field-container input[type="date"], .ja-form .ja-field-container input[type="month"], .ja-form .ja-field-container input[type="time"], .ja-form .ja-field-container input[type="week"], .ja-form .ja-field-container input[type="number"], .ja-form .ja-field-container input[type="email"], .ja-form .ja-field-container input[type="url"], .ja-form .ja-field-container input[type="search"], .ja-form .ja-field-container input[type="tel"], .ja-form .ja-field-container input[type="color"] { width: 230px; padding: 3px 4px; } .ja-form .ja-field-container .checkbox:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .ja-form .ja-field-container .checkbox { display: block; margin-left: 95px; } .ja-form .ja-field-container .checkbox br { clear: left; } .ja-form .ja-field-container .checkbox input { width: 15px; height: 19px; float: left; } .ja-form .ja-field-container .checkbox label { height: 21px; width: auto; line-height: 21px; float: left; padding: 2px 12px 0 5px; } .ja-form .ja-submit { margin-top: 1em; margin-left: 100px; vertical-align: middle; } .ja-form .ja-submit .ja-loading { position: relative; top: 0; left: 0; margin-left: 10px; vertical-align: middle; } .ja-button { font-size: 1em; font-family: Helvetica, Arial, sans-serif; font-weight: normal; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #dcdcdc; padding: 4px 18px; text-decoration: none; background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9)); background: -moz-linear-gradient(center top, #f9f9f9 5%, #e9e9e9 100%); background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9'); background-color: #f9f9f9; color: #333333; display: inline-block; text-shadow: 1px 1px 1px #ffffff; -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; box-shadow: inset 1px 1px 0px 0px #ffffff; } .ja-button:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #e9e9e9), color-stop(100%, #f9f9f9)); background: -moz-linear-gradient(center top, #e9e9e9 5%, #f9f9f9 100%); background: -ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9'); background-color: #e9e9e9; cursor: pointer !important; } .ja-button:active { position: relative; top: 1px; } .ja-form .ja-field-container .error { color: #990000; border-color: #990000; } .ja-form .ja-field-container .validation-error { display: block; clear: both; margin-top: 5px; color: #aa0000; } .ja-form .ja-error-container { color: #aa0000; margin-top: 2em; margin-left: 100px; } .ja-form .ja-error-container p { margin-bottom: 0; } /* End forms */ /* Job list */ .ja-job-list { margin-bottom: 3em; } .ja-job-list .job { margin-bottom: 1em; padding: 0.5em; } .ja-job-list .job.alt { background-color: #f5f5f5; } .ja-job-list .job.hot { background-color: #fffdfd; } .ja-job-list .job .meta { margin-bottom: 1em; } .ja-job-list .job .meta:before, .ja-job-list .job .meta:after { content: ""; display: table; } .ja-job-list .job .meta:after { clear: both; } .ja-job-list .job .meta { zoom: 1; } .ja-job-list .job .meta p { font-size: 0.9em; margin-bottom: 0.5em; } .ja-job-list .job .meta .classifications { float: left; list-style: none; width: 50%; margin: 0 0 0.5em 0; } .ja-job-list .job .meta .classifications li { display: inline; margin-right: 0.5em; } .ja-job-list .job .meta .date-posted { float: right; width: 50%; text-align: right; } .ja-job-list .job .meta .salary { clear: left; float: left; } .ja-job-list .job .meta .reference { float: right; text-align: right; } .ja-job-list .job .view-details { font-size: 0.9em; font-family: Helvetica, Arial, sans-serif; font-weight: normal; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid #dcdcdc; padding: 4px 10px; text-decoration: none; background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #f9f9f9), color-stop(100%, #e9e9e9)); background: -moz-linear-gradient(center top, #f9f9f9 5%, #e9e9e9 100%); background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e9e9e9'); background-color: #f9f9f9; color: #333333; display: inline-block; text-shadow: 1px 1px 1px #ffffff; -webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; -moz-box-shadow: inset 1px 1px 0px 0px #ffffff; box-shadow: inset 1px 1px 0px 0px #ffffff; } .ja-job-list .job .view-details:hover { background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #e9e9e9), color-stop(100%, #f9f9f9)); background: -moz-linear-gradient(center top, #e9e9e9 5%, #f9f9f9 100%); background: -ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e9e9e9', endColorstr='#f9f9f9'); background-color: #e9e9e9; cursor: pointer !important; } .ja-job-list .job .view-details:active { position: relative; top: 1px; } /* End job list */ /* Pager */ .ja-pager-container:before, .ja-pager-container:after { content: ""; display: table; } .ja-pager-container:after { clear: both; } .ja-pager-container { zoom: 1; } .ja-pager { float: left; font-size: 0.9em; } .ja-pager:before, .ja-pager:after { content: ""; display: table; } .ja-pager:after { clear: both; } .ja-pager { zoom: 1; } .ja-pager span, .ja-pager a { display: block; float: left; line-height: 23px; padding: 0 8px; margin-right: 3px; color: #333; background-color: #f3f3f3; border: solid 1px #ddd; } .ja-pager a:hover, .ja-pager .current-page { color: #fff; background-color: #bbb; border-color: #999; text-decoration: none; } .ja-pager-summary { float: right; line-height: 25px; font-size: 0.9em; } /* End pager */ /* Job details */ .ja-job-details .meta { margin-bottom: 1em; } .ja-job-details .meta:before, .ja-job-details .meta:after { content: ""; display: table; } .ja-job-details .meta:after { clear: both; } .ja-job-details .meta { zoom: 1; } .ja-job-details .meta p { font-size: 0.9em; margin-bottom: 0.5em; } .ja-job-details .meta .classifications { float: left; width: 50%; list-style: none; margin: 0 0 0.5em 0; } .ja-job-details .meta .classifications li { display: inline; margin-right: 0.5em; } .ja-job-details .meta .date-posted { clear: right; float: right; width: 50%; text-align: right; } .ja-job-details .meta .salary { clear: left; float: left; } .ja-job-details .meta .reference { float: right; text-align: right; } .ja-job-details .apply { margin: 2em 0 0.5em 0; text-align: center; } .ja-job-details .apply .back-link { font-size: 0.9em; margin-right: 1em; } /* End job details */ /* Application form iframe (external app forms) */ .ja-apply-iframe iframe { width: 100%; height: 500px; border: none; } .ja-apply-iframe .apply { margin: 2em 0 0.5em 0; text-align: center; } .ja-apply-iframe .apply .back-link { font-size: 0.9em; } /* End application form iframe */ /* Application form */ .ja-job-apply .ja-submit .back-link { font-size: 0.9em; margin-left: 1em; } /* End application form */ /* Powered by JobAdder */ .powered-by-jobadder { color: #bbb; font-size: 0.9em; text-align: center; margin: 2em 0 1em 0; } .powered-by-jobadder a { color: #bbb; } .powered-by-jobadder a:hover { color: #aaa; } /* End powered by JobAdder */ .ja-job-list { display: grid; font-size: 26px !important; font-family: 'Matter', sans-serif !important; font-weight: bold !important; grid-template-columns: 1fr; gap: 3.75rem; line-height: 36px !important; margin-bottom: 20px !important; } @media (min-width: 1024px) { .ja-job-list { grid-template-columns: 1fr 1fr; gap: 7.5rem 3.75rem; } } .ja-job-list .job { padding: 0; } .ja-job-list .job.alt { background: none !important; } .ja-job-list .title { font-size: 26px !important; line-height: 36px !important; margin-bottom: 20px !important; font-weight: bold !important; } .ja-job-list .date-posted { display: none; } .ja-job-list .summary, .ja-job-list .classifications { font-family: "Matter", sans-serif; font-size: 1rem; line-height: 1.5rem; font-style: normal; font-weight: 400; margin-bottom: 1.25rem; } .ja-job-list .classifications { display: flex; flex-direction: column; font-weight: bold; } .ja-job-list .view-details { background: none !important; border: none !important; font-family: 'Matter', sans-serif !important; font-size: 1rem !important; font-weight: bold !important; line-height: 1.5rem !important; padding: 10px 0 !important; transition: letter-spacing 0.2s ease-in-out; } .ja-job-list .view-details:hover { background: none !important; letter-spacing: 0.5px; transition: letter-spacing 0.2s ease-in-out; } .ja-job-details { font-family: 'Matter', sans-serif !important; } .ja-job-details .title { font-size: 26px !important; font-weight: bold !important; line-height: 36px !important; margin-bottom: 30px !important; } .ja-job-details .classifications { font-weight: bold; } .ja-job-details ul { list-style: initial; margin-bottom: 1.875rem; margin-left: 1.25rem; margin-top: 0.625rem; } .ja-job-details strong { font-weight: 600; } /** * COMPONENTS.MATTERPORT-EMBED * * @description : For rendering an embed from Matterport * */ .c-matterport-embed { background: rgba(0, 0, 0, 0.06); min-height: 31.25rem; position: relative; } .c-matterport-embed::before { content: ''; display: block; padding-top: 100%; } @media (min-width: 768px) { .c-matterport-embed::before { padding-top: 75%; } } @media (min-width: 1024px) { .c-matterport-embed::before { padding-top: 50%; } } .c-matterport-embed > * { background: transparent; border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } /** * COMPONENTS.MEDIA * * @description : * */ .c-media { background: rgba(0, 0, 0, 0.06); display: block; overflow: hidden; position: relative; } .o-feature-text .c-media { background-color: transparent; } .swiper-container .c-media { user-select: none; } .c-media--placeholder-dark { background: rgba(210, 207, 203, 0.25); color: #fff; } .c-media--svg { background-color: transparent; } .c-media--full-width { height: auto; width: 100%; } .c-media--full-height { height: 100%; width: auto; } .c-media--full-width-and-height { height: 100%; width: 100%; } .c-media__link { display: block; height: 100%; width: 100%; } .c-media__ratio-sizer-image { display: block; height: auto; opacity: 0; pointer-events: none; width: 100%; z-index: -1; } .c-media--full-width .c-media__ratio-sizer-image { height: auto; width: 100%; } .c-media--full-height .c-media__ratio-sizer-image { height: 100%; width: auto; } .c-media--full-width-and-height .c-media__ratio-sizer-image { height: 100%; width: 100%; } .c-media__ratio-sizer-image--mobile { display: none; } @media (max-width: 767px) { .c-media__ratio-sizer-image--mobile { display: block; } .c-media__ratio-sizer-image--mobile ~ .c-media__ratio-sizer-image { display: none; } } .c-media__ratio-sizer-image--tablet { display: none; } @media (max-width: 1023px) { .c-media__ratio-sizer-image--tablet { display: block; } .c-media__ratio-sizer-image--tablet ~ .c-media__ratio-sizer-image { display: none; } } .c-media__iframe-container { bottom: 0; left: 0; position: absolute; right: 0; top: 0; } .c-media__iframe-wrap { bottom: -100vw; box-sizing: border-box; height: 100%; left: -100vw; margin: auto; max-height: 100%; padding-top: 56.25%; position: absolute; right: -100vw; top: -100vw; } .c-media__iframe-wrap--background { pointer-events: none; } .c-media__iframe-wrap--click-to-play { cursor: pointer; } .c-media__iframe-wrap--click-to-play::before { background: rgba(0, 0, 0, 0.25); bottom: 0; content: ''; display: block; left: 0; opacity: 1; pointer-events: none; position: absolute; right: 0; top: 0; transition: 0.2s; z-index: 1; } .c-media__iframe-wrap--click-to-play::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23fff'/%3E%3Cpath fill='%23e4b711' d='m126.61 100-44 30.61V69.39l44 30.61z'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 6.25rem 6.25rem; color: #fff; content: ''; display: block; height: 6.25rem; left: 50%; opacity: 1; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: 0.2s; width: 6.25rem; z-index: 2; } .c-media__iframe-wrap--click-to-play.is-playing::before, .c-media__iframe-wrap--click-to-play.is-playing::after { opacity: 0; } .c-media__image, .c-media__iframe { display: block; height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; } .c-media--zoom-on-hover .c-media__link .c-media__image, a .c-media--zoom-on-hover .c-media__image, .c-media--zoom-on-hover .c-media__link .c-media__iframe, a .c-media--zoom-on-hover .c-media__iframe { transform: scale(1); transition: opacity 0.3s, transform 1s ease-in-out; } .c-media--zoom-on-hover .c-media__link:hover .c-media__image, a:hover .c-media--zoom-on-hover .c-media__image, .c-media--zoom-on-hover .c-media__link:hover .c-media__iframe, a:hover .c-media--zoom-on-hover .c-media__iframe { transform: scale(1.05); } @media not all and (min-resolution: 0.001dpcm) { @supports (-webkit-appearance: none) { .c-media__iframe { top: 50%; } } } .c-media--svg .c-media__image { bottom: auto; left: auto; object-fit: contain; position: relative; right: 0; top: auto; } .c-media--svg.c-media--full-width .c-media__image { height: auto; width: 100%; } .c-media--svg.c-media--full-height .c-media__image { height: 100%; width: auto; } .c-media--svg.c-media--full-width-and-height .c-media__image { height: 100%; width: 100%; } .c-menu_button .c-menu_button__opened { opacity: 0; } .c-milestone-page { display: block; } @media (min-width: 1024px) { .c-milestone-page { display: flex; justify-content: space-between; position: relative; } } @media (min-width: 1024px) { .c-milestone-page__back { position: absolute; top: -10%; } } .c-milestone-page__back svg { margin-right: 5px; display: inline; } .c-milestone-page__header-img { position: relative; } @media (min-width: 1024px) { .c-milestone-page__header-img { position: absolute; right: 0%; top: -50%; max-width: 550px; max-height: 420px; min-width: 550px; } } .c-milestone-page__header-img-date { position: absolute; right: -4%; z-index: 2; bottom: 5%; color: white; font-size: 14px; font-weight: 400; width: 100%; } .c-process-steps__step-item { padding-bottom: 1.25rem; padding-top: 1.25rem; } .c-process_steps_module__step-heading { max-width: 80%; font-weight: 400; } .c-property-deal-line { font-size: 0.75rem; line-height: 1.5rem; letter-spacing: 1.5px; font-family: "Matter", sans-serif; font-weight: 500; color: var(--gray-darkest); padding: 8px 22px; cursor: pointer; } .c-property-deal-line:hover { background-color: var(--gray-pale); } .c-property-deal-line .c-property-deal-line__unit-number { font-weight: 600; } .c-property-deal-line .c-property-deal-line__deal-stage { font-weight: 600; } .c-property-deal-lines { display: none; position: absolute; width: 100%; top: 100%; background-color: var(--white); } .c-property-deal-lines--active { display: block; } .c-property-deal-group { position: relative; } .c-property-deal-select { padding: 22px 23px; background: #fff; color: #949493; font-size: 12px; cursor: pointer; position: relative; } .c-property-deal-select > span { pointer-events: none; } .c-property-deal-select::after { --chevron-width: 0.375rem; border-bottom: var(--chevron-width) solid transparent; border-left: var(--chevron-width) solid transparent; border-right: var(--chevron-width) solid transparent; border-top: var(--chevron-width) solid var(--wolfbrook-gold); content: ''; display: block; pointer-events: none; position: absolute; z-index: 1; top: 50%; right: 20px; width: 12px; height: 12px; } .c-projects_slider { overflow: hidden; } .c-projects_slider__header { display: flex; flex-direction: column; margin-bottom: clamp(20px, 2vw, 40px); } @media (min-width: 768px) { .c-projects_slider__header { padding-left: 1.25rem; flex-direction: row; justify-content: space-between; align-items: baseline; } } .c-projects_slider__slider { width: 100%; overflow: visible !important; position: relative; } .c-projects_slider__slider .swiper-slide { opacity: 0.2 !important; transition: opacity 0.2s; } .c-projects_slider__slider .swiper-slide-visible { opacity: 1 !important; } .c-projects_slider__item { display: block; } .c-projects_slider__item:hover .c-projects_slider__item_img_wrap::after, .c-projects_slider__item:focus .c-projects_slider__item_img_wrap::after { opacity: 0.3; } .c-projects_slider__item_img { width: 100%; height: 16.25rem; object-fit: cover; aspect-ratio: 450/580; } @media (min-width: 480px) { .c-projects_slider__item_img { height: unset; } } .c-projects_slider__item_img_wrap { margin-bottom: 1em; position: relative; } .c-projects_slider__item_img_wrap::after { content: ''; display: block; background-color: var(--wolfbrook-black); position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s ease; } .c-projects_slider__item_tag--2 { --size: 110px; position: absolute; bottom: 0; right: 0; z-index: 3; align-items: center; display: flex; justify-content: center; width: var(--size); height: var(--size); border-bottom: calc(var(--size) / 2) solid var(--wolfbrook-gold); border-right: calc(var(--size) / 2) solid var(--wolfbrook-gold); border-top: calc(var(--size) / 2) solid transparent; border-left: calc(var(--size) / 2) solid transparent; } @media (min-width: 768px) { .c-projects_slider__item_tag--2 { --size: 152px; } } .c-projects_slider__item_tag--1 { --size: 86px; position: absolute; bottom: 0; right: 0; z-index: 4; align-items: center; display: flex; justify-content: center; width: var(--size); height: var(--size); border-bottom: calc(var(--size) / 2) solid var(--wolfbrook-gold); border-right: calc(var(--size) / 2) solid var(--wolfbrook-gold); border-top: calc(var(--size) / 2) solid transparent; border-left: calc(var(--size) / 2) solid transparent; } @media (min-width: 768px) { .c-projects_slider__item_tag--1 { --size: 120px; } } .c-projects_slider__item_tag__text { --adjustment: 8px; font-size: var(--adjustment); color: var(--wolfbrook-black); white-space: nowrap; transform: rotate(-45deg); top: var(--adjustment); left: var(--adjustment); position: relative; text-transform: uppercase; letter-spacing: 0.1em; } @media (min-width: 768px) { .c-projects_slider__item_tag__text { --adjustment: 10px; } } .c-projects_slider__item_location { text-transform: uppercase; letter-spacing: 0.10938rem; font-weight: 600; font-family: "Matter", sans-serif; font-size: 0.6875rem; line-height: 1rem; } @media (min-width: 480px) { .c-projects_slider__item_location { font-size: 0.875rem; line-height: 1.5rem; } } .c-projects_slider__item_price, .c-projects_slider__item_title { color: #2A2927; font-size: 0.6875rem; line-height: 1rem; opacity: 0.9; font-family: "Matter", sans-serif; } .u-inverted .c-projects_slider__item_price, .u-inverted .c-projects_slider__item_title { color: var(--white); } @media (min-width: 480px) { .c-projects_slider__item_price, .c-projects_slider__item_title { display: block; font-size: 0.875rem; line-height: 1.5rem; } } .c-project-accordion { display: block; position: relative; } .c-project-accordion.open .c-project-accordion__body { max-height: initial; opacity: 1; overflow: visible; border-bottom: 1px solid #d2cfcb; padding-top: 3.75rem; padding-bottom: 3.75rem; } .c-project-accordion.open .c-project-accordion__header { border-bottom: none; } .c-project-accordion__header { padding: 1rem 0 1rem 0; border-bottom: 1px solid #d2cfcb; } .c-project-accordion__toggle { padding: 0.625rem 0.625rem 0.625rem 1.5rem; position: relative; font-size: 0.875rem; line-height: 1.0625rem; letter-spacing: 0.125rem; color: #e4b611; font-family: "Matter", sans-serif; } .c-project-accordion__toggle::before { content: ''; position: absolute; left: 0; top: 50%; border-left: 10px solid #e4b611; border-top: 12px solid transparent; border-bottom: 12px solid transparent; transform: translateY(-50%); transform-origin: 12px 6px; transition: transform 0.2s ease; } .c-project-accordion__toggle.open::before { transform: rotate(90deg); } .c-project-accordion__body { max-height: 0; opacity: 0; transition: opacity 0.3s ease; overflow: hidden; } .c-property-interest-form { max-width: 40rem; } .c-project-badge { width: 120px; height: 120px; order: -1; align-self: end; } @media (min-width: 480px) { .c-project-badge { order: 0; align-self: start; width: 200px; height: 200px; } } /** * COMPONENTS.SHARE-MODAL * * @description : A modal to display sharing options, usually if native sharing controls are not supported by the browser * */ .c-share-modal { height: 100%; left: 0; pointer-events: none; position: fixed; top: 0; width: 100%; } .c-share-modal__screen { align-items: center; display: flex; height: 100%; justify-content: center; padding: 0.75rem; transition: .2s opacity, 0s left; width: 100%; z-index: 99999; } @media (min-width: 480px) { .c-share-modal__screen { padding: 16px; } } .c-share-modal__content { background: #fff; box-shadow: 0 0 1rem 0.5rem rgba(0, 0, 0, 0.04); max-width: 50rem; padding: 2rem 1.25rem; pointer-events: all; position: relative; width: 100%; } @media (min-width: 768px) { .c-share-modal__content { padding: 2.5rem; } } @media (min-width: 1024px) { .c-share-modal__content { padding: 3.75rem; } } .c-share-modal__platform-list { display: flex; flex-direction: row; flex-wrap: wrap; margin: -0.625rem; } .c-share-modal__platform-item { padding: 0.625rem; width: 100%; } @media (min-width: 768px) { .c-share-modal__platform-item { width: 50%; } } .c-share-modal__mini-form { position: relative; } .c-share-modal__copy-message { font-family: "Matter", sans-serif; font-size: 1rem; line-height: 1.5rem; font-style: normal; font-weight: 400; background: #fff; border-radius: 100vw; box-shadow: 0 0 1rem 0.5rem rgba(0, 0, 0, 0.04); display: block; left: 50%; margin-top: 1.25rem; opacity: 1; padding: 1rem 2.5rem; pointer-events: none; position: absolute; top: 100%; transform: translateX(-50%); } .c-share-modal__close-button { position: absolute; right: 1.25rem; top: 1.25rem; } .c-social_links { display: flex; gap: 1rem; } .c-social_links__item { width: 3rem; } .c-social_links__icon { width: 100%; } .c-social_links__icon_link { color: #e4b611; display: block; transition: 0.2s; } .c-social_links__icon_link:hover { color: #c29b0f; } .c-social_links__icon_fill { fill: currentColor; } /** * COMPONENTS.TESTIMONIAL * * @description : * */ .c-testimonial { text-align: center; } .c-testimonial__quote { margin: 0 auto; max-width: 58.75rem; } .c-testimonial__citation { display: block; } .c-testimonial__image { text-align: center; } .c-testimonial__image__img { width: 130px; height: 130px; object-fit: cover; border-radius: 80px; display: inline-block; } @media (min-width: 480px) { .c-testimonial__image__img { width: 150px; height: 150px; } } /** * COMPONENTS.THUMB * * @description : * */ .c-thumb { background: rgba(0, 0, 0, 0.06); overflow: hidden; position: relative; } .c-thumb::before { content: ''; display: block; padding-top: 64%; } .c-thumb__link { bottom: 0; display: block; left: 0; position: absolute; right: 0; top: 0; z-index: 2; } .c-thumb__image { display: block; height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; transform: scale(1); transition: 0.3s opacity, 1s transform !important; width: 100%; z-index: 1; } .c-thumb__link:hover ~ .c-thumb__image { transform: scale(1.05); } .c-thumb__play-button { appearance: none; color: transparent; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 3; } .c-thumb__play-button::before { background: rgba(0, 0, 0, 0.3); bottom: 0; content: ''; display: block; left: 0; position: absolute; right: 0; top: 0; z-index: 1; } .c-thumb__play-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='100' fill='%23fff'/%3E%3Cpath fill='%23e4b711' d='m126.61 100-44 30.61V69.39l44 30.61z'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 6.25rem 6.25rem; color: #fff; content: ''; display: block; height: 6.25rem; left: 50%; opacity: 1; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); transition: 0.5s; width: 6.25rem; z-index: 2; } .c-thumb__play-button:hover::after { transform: translate(-50%, -50%) scale(1.2); } .c-video-grid-item__image { user-select: none; } .c-video-grid-item__title { color: var(--gray-darkest); font-size: 1.625rem; line-height: 1.9375rem; letter-spacing: -0.00688rem; } .c-video-grid-item__image-img { object-fit: cover; } /** * COMPONENTS.VIDEO-THUMB * * @description : Clickable video thumbnail which triggers playing * of the video in another context (such as a modal). * */ .c-video-thumb { position: relative; } .c-video-thumb::before { content: ''; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.6) 100%); position: absolute; height: 100%; transition: 0.2s; width: 100%; z-index: 2; } .c-video-thumb__label { position: absolute; bottom: 1.4375rem; left: 1.1875rem; font-size: 0.875rem; line-height: 0.9375rem; font-weight: 400; color: white; z-index: 2; } .c-video-thumb--full-height { height: 100%; } .c-video-thumb__image-wrap { height: 100%; position: relative; z-index: 1; margin-top: 1rem; } .c-video-thumb__image-wrap img { height: 100%; width: 100%; } .c-video-thumb__button { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 2; } .c-video-thumb__button-icon { fill: #fff; height: 6.25rem; left: 50%; max-height: 50%; max-width: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 6.25rem; } /** * COMPONENTS.VIDEO-MODAL * * @description : A modal to display the currently playing video. * */ .c-video-modal { background: rgba(0, 0, 0, 0.9); color: #fff; position: relative; } .c-video-modal__outer-wrap { display: flex; flex-flow: column; height: 100%; overflow: auto; width: 100%; } @keyframes c-video-modal__video-wrap { 0% { transform: scale(0.7); } 50% { transform: scale(1.3); } 100% { transform: scale(0.7); } } .c-video-modal__video-wrap { flex: 1 1 auto; padding: 5.625rem 0; position: relative; } @media (min-width: 768px) { .c-video-modal__video-wrap { padding: 2.5rem 7.5rem; } } @media (min-width: 768px) and (orientation: portrait) { .c-video-modal__video-wrap { padding: 7.5rem 2.5rem; } } .c-video-modal__video-wrap::after { --loading-icon-size: 1.25rem; background: currentColor; border-radius: 100vw; content: ''; display: block; height: var(--loading-icon-size); left: 50%; margin: calc(var(--loading-icon-size) * -0.5) 0 0 calc(var(--loading-icon-size) * -0.5); opacity: 1; position: absolute; top: 50%; transform-origin: 50% 50%; transition: 0.5s; width: var(--loading-icon-size); } .c-video-modal:not([hidden]) .c-video-modal__video-wrap::after { animation: c-video-modal__video-wrap 1s both 10 ease-in-out; } .c-video-modal__iframe { background: transparent; display: block; height: 100%; object-fit: contain; position: relative; width: 100%; z-index: 2; } .c-video-modal__info-bar { background: #000; display: flex; flex: 0 0 auto; flex-flow: column; gap: 0.625rem; padding: var(--min-edge-gap); } @media (min-width: 768px) { .c-video-modal__info-bar { padding: 1.5rem var(--min-edge-gap); } } .c-video-modal__heading-bar { align-items: flex-end; display: flex; flex-flow: row wrap; gap: 0.625rem 1.5rem; } .c-video-modal__close-button { height: 1.875rem !important; position: absolute; right: 1.625rem; top: 1.625rem; width: 1.875rem !important; z-index: 10; } @media (min-width: 768px) { .c-video-modal__close-button { height: 2.5rem !important; right: 3.125rem; top: 3.125rem; width: 2.5rem !important; } } /** * 8. UTILITIES */ /** * UTILITIES.COLOUR * * @description : Foreground and background colours */ .u-inverted { background-image: url("data:image/svg+xml,%3Csvg width='100' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgba(255,255,255,0.02)' d='M0 0h100v300L0 200l100-100z'/%3E%3C/svg%3E"); background-attachment: fixed; background-position: center; background-size: 100vw 300vw; color: var(--white); background-color: var(--wolfbrook-charcoal); } .u-inverted--transparent-bg { background-color: transparent; } .u-fg-gold { color: #e4b611 !important; } .u-fg-white { color: #fff !important; } .u-fg-gray-light { color: #D3CFCB !important; } .u-bg-gray-light { background-color: var(--gray-light) !important; } .u-fg-gray-medium { color: var(--gray-medium) !important; } .u-fg-gray-dark { color: var(--gray-dark) !important; } .u-fg-gray-palest { color: #FBFAF9 !important; } .u-bg-gold { background-color: var(--wolfbrook-gold) !important; } .u-bg-white { background-color: #fff !important; } .u-bg-black { background-image: url("data:image/svg+xml,%3Csvg width='100' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='rgba(255,255,255,0.02)' d='M0 0h100v300L0 200l100-100z'/%3E%3C/svg%3E"); background-attachment: fixed; background-position: center; background-size: 100vw 300vw; background-color: #1d1c1b !important; } .u-bg-gray-light { background-color: #D3CFCB !important; } .u-bg-gray-pale { background-color: #F5F2EF !important; } .u-bg-gray-palest { background-color: #FBFAF9 !important; } .u-opacity-50 { opacity: 0.5; } /** * UTILITIES.DECORATIONS * * @description : Decorative flairs to add to a range of elements */ .u-with-chevron-top-left { position: relative; } .u-with-chevron-top-left::after { --chevron-width: 2.5rem; border-bottom: calc(var(--chevron-width) * 1.15) solid transparent; border-top: calc(var(--chevron-width) * 1.15) solid transparent; color: #e4b611; content: ''; display: block; pointer-events: none; position: absolute; transform: translateY(-50%); z-index: 1; } @media (min-width: 768px) { .u-with-chevron-top-left::after { --chevron-width: 3.125rem; } } @media (min-width: 1024px) { .u-with-chevron-top-left::after { --chevron-width: 3.75rem; } } @media (min-width: 1440px) { .u-with-chevron-top-left::after { --chevron-width: 5rem; } } @media (min-width: 1680px) { .u-with-chevron-top-left::after { --chevron-width: 6.25rem; } } .u-with-chevron-top-left::after { border-left: calc(var(--chevron-width)) solid; left: 0; top: 0; transform: translateY(-50%); } .u-with-chevron-top-right { position: relative; } .u-with-chevron-top-right::after { --chevron-width: 2.5rem; border-bottom: calc(var(--chevron-width) * 1.15) solid transparent; border-top: calc(var(--chevron-width) * 1.15) solid transparent; color: #e4b611; content: ''; display: block; pointer-events: none; position: absolute; transform: translateY(-50%); z-index: 1; } @media (min-width: 768px) { .u-with-chevron-top-right::after { --chevron-width: 3.125rem; } } @media (min-width: 1024px) { .u-with-chevron-top-right::after { --chevron-width: 3.75rem; } } @media (min-width: 1440px) { .u-with-chevron-top-right::after { --chevron-width: 5rem; } } @media (min-width: 1680px) { .u-with-chevron-top-right::after { --chevron-width: 6.25rem; } } .u-with-chevron-top-right::after { border-right: calc(var(--chevron-width)) solid; right: 0; top: 0; transform: translateY(-50%); } .u-with-chevron-bottom-left { position: relative; } .u-with-chevron-bottom-left::after { --chevron-width: 2.5rem; border-bottom: calc(var(--chevron-width) * 1.15) solid transparent; border-top: calc(var(--chevron-width) * 1.15) solid transparent; color: #e4b611; content: ''; display: block; pointer-events: none; position: absolute; transform: translateY(-50%); z-index: 1; } @media (min-width: 768px) { .u-with-chevron-bottom-left::after { --chevron-width: 3.125rem; } } @media (min-width: 1024px) { .u-with-chevron-bottom-left::after { --chevron-width: 3.75rem; } } @media (min-width: 1440px) { .u-with-chevron-bottom-left::after { --chevron-width: 5rem; } } @media (min-width: 1680px) { .u-with-chevron-bottom-left::after { --chevron-width: 6.25rem; } } .u-with-chevron-bottom-left::after { border-left: calc(var(--chevron-width)) solid; bottom: 0; left: 0; transform: translateY(50%); } .u-with-chevron-bottom-right { position: relative; } .u-with-chevron-bottom-right::after { --chevron-width: 2.5rem; border-bottom: calc(var(--chevron-width) * 1.15) solid transparent; border-top: calc(var(--chevron-width) * 1.15) solid transparent; color: #e4b611; content: ''; display: block; pointer-events: none; position: absolute; transform: translateY(-50%); z-index: 1; } @media (min-width: 768px) { .u-with-chevron-bottom-right::after { --chevron-width: 3.125rem; } } @media (min-width: 1024px) { .u-with-chevron-bottom-right::after { --chevron-width: 3.75rem; } } @media (min-width: 1440px) { .u-with-chevron-bottom-right::after { --chevron-width: 5rem; } } @media (min-width: 1680px) { .u-with-chevron-bottom-right::after { --chevron-width: 6.25rem; } } .u-with-chevron-bottom-right::after { border-right: calc(var(--chevron-width)) solid; bottom: 0; right: 0; transform: translateY(50%); } @media (max-width: 768px) { .u-with-chevron-bottom-right--desktop-only::after { display: none; } } /** * UTILITIES.FADE-IN * * @description : A simple fade in. * */ @keyframes u-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .u-fade-in { opacity: 0; } .u-fade-in.animation-started { animation: 1s u-fade-in both; opacity: 1; } .no-js .u-fade-in { animation: none !important; opacity: 1 !important; } /** * Visually hides an element but leaves it accessible to screen readers */ .u-hide:not(:focus):not(:active) { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; padding: 0; margin: 0; } .u-hide-visibility { visibility: hidden; } .icon { margin-right: 1.25rem; } .icon::after { vertical-align: middle; display: inline-block; width: 1.125rem; text-align: center; } .icon--email::after { content: url("data:image/svg+xml;utf8, "); } .icon--phone::after { content: url("data:image/svg+xml;utf8,"); } /** * UTILITIES.LAYOUT * * @description : These classes trump other preceeding styles. * Userful for quickly applying common adjustments. */ .u-visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } .u-mw-3 { max-width: 22.25rem; } .u-mw-4 { max-width: 28.75rem; } .u-mw-5 { max-width: 33.125rem; } .u-mw-6 { max-width: 37.5rem; } .u-mw-7 { max-width: 47.5rem; } .u-mw-8 { max-width: 54.375rem; } .u-mw-9 { max-width: 58.75rem; } @media (min-width: 768px) { .u-mob-only { display: none !important; } } @media (max-width: 767px) { .u-desktop-only { display: none !important; } } .u-transition-hidden { display: block; max-height: 999vh; max-width: 999vh; opacity: 1; transition: opacity 300ms, border 0s, margin 0s, max-height 0s, max-width 0s, padding 0s; } .u-transition-hidden[hidden] { border: 0 !important; display: block !important; margin: 0 !important; max-height: 0 !important; max-width: 0 !important; opacity: 0; overflow: hidden; padding: 0 !important; pointer-events: none; transition: opacity 300ms, border 0s 300ms, margin 0s 300ms, max-height 0s 300ms, max-width 0s 300ms, padding 0s 300ms; } .u-disable-all-clicks { pointer-events: none !important; } @keyframes uFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } [v-cloak] { display: none !important; } .u-block-center { margin-left: auto !important; margin-right: auto !important; } /** * UTILITIES.LIST-FLOW * * @description : Flow in each item in a list one by one * */ @keyframes u-list-flow__item { 0% { opacity: 0; transform: translateY(0.125em); } 100% { opacity: 1; transform: translateY(0); } } .u-list-flow__item { filter: opacity(0); transform: translateY(0.125em); } .u-list-flow.animation-started .u-list-flow__item { animation-duration: 0.75s; animation-fill-mode: both; animation-name: u-list-flow__item; filter: opacity(1); transform: translateY(0); } .u-list-flow__item:nth-child(1) { animation-delay: 0ms; } .u-list-flow__item:nth-child(2) { animation-delay: 40ms; } .u-list-flow__item:nth-child(3) { animation-delay: 80ms; } .u-list-flow__item:nth-child(4) { animation-delay: 120ms; } .u-list-flow__item:nth-child(5) { animation-delay: 160ms; } .u-list-flow__item:nth-child(6) { animation-delay: 200ms; } .u-list-flow__item:nth-child(7) { animation-delay: 240ms; } .u-list-flow__item:nth-child(8) { animation-delay: 280ms; } .u-list-flow__item:nth-child(9) { animation-delay: 320ms; } .u-list-flow__item:nth-child(10) { animation-delay: 360ms; } .u-list-flow__item:nth-child(11) { animation-delay: 400ms; } .u-list-flow__item:nth-child(12) { animation-delay: 440ms; } .u-list-flow__item:nth-child(13) { animation-delay: 480ms; } .u-list-flow__item:nth-child(14) { animation-delay: 520ms; } .u-list-flow__item:nth-child(15) { animation-delay: 560ms; } .u-list-flow__item:nth-child(16) { animation-delay: 600ms; } .u-list-flow__item:nth-child(17) { animation-delay: 640ms; } .u-list-flow__item:nth-child(18) { animation-delay: 680ms; } .u-list-flow__item:nth-child(19) { animation-delay: 720ms; } .u-list-flow__item:nth-child(20) { animation-delay: 760ms; } .u-list-flow__item:nth-child(21) { animation-delay: 800ms; } .u-list-flow__item:nth-child(22) { animation-delay: 840ms; } .u-list-flow__item:nth-child(23) { animation-delay: 880ms; } .u-list-flow__item:nth-child(24) { animation-delay: 920ms; } .u-list-flow__item:nth-child(25) { animation-delay: 960ms; } .u-list-flow__item:nth-child(26) { animation-delay: 1000ms; } .u-list-flow__item:nth-child(27) { animation-delay: 1040ms; } .u-list-flow__item:nth-child(28) { animation-delay: 1080ms; } .u-list-flow__item:nth-child(29) { animation-delay: 1120ms; } .u-list-flow__item:nth-child(30) { animation-delay: 1160ms; } .u-list-flow__item:nth-child(31) { animation-delay: 1200ms; } .u-list-flow__item:nth-child(32) { animation-delay: 1240ms; } .u-list-flow__item:nth-child(33) { animation-delay: 1280ms; } .u-list-flow__item:nth-child(34) { animation-delay: 1320ms; } .u-list-flow__item:nth-child(35) { animation-delay: 1360ms; } .u-list-flow__item:nth-child(36) { animation-delay: 1400ms; } .u-list-flow__item:nth-child(37) { animation-delay: 1440ms; } .u-list-flow__item:nth-child(38) { animation-delay: 1480ms; } .u-list-flow__item:nth-child(39) { animation-delay: 1520ms; } .u-list-flow__item:nth-child(40) { animation-delay: 1560ms; } .u-list-flow__item:nth-child(41) { animation-delay: 1600ms; } .u-list-flow__item:nth-child(42) { animation-delay: 1640ms; } .u-list-flow__item:nth-child(43) { animation-delay: 1680ms; } .u-list-flow__item:nth-child(44) { animation-delay: 1720ms; } .u-list-flow__item:nth-child(45) { animation-delay: 1760ms; } .u-list-flow__item:nth-child(46) { animation-delay: 1800ms; } .u-list-flow__item:nth-child(47) { animation-delay: 1840ms; } .u-list-flow__item:nth-child(48) { animation-delay: 1880ms; } .u-list-flow__item:nth-child(49) { animation-delay: 1920ms; } .u-list-flow__item:nth-child(50) { animation-delay: 1960ms; } .u-list-flow__item:nth-child(51) { animation-delay: 2000ms; } .u-list-flow__item:nth-child(52) { animation-delay: 2040ms; } .u-list-flow__item:nth-child(53) { animation-delay: 2080ms; } .u-list-flow__item:nth-child(54) { animation-delay: 2120ms; } .u-list-flow__item:nth-child(55) { animation-delay: 2160ms; } .u-list-flow__item:nth-child(56) { animation-delay: 2200ms; } .u-list-flow__item:nth-child(57) { animation-delay: 2240ms; } .u-list-flow__item:nth-child(58) { animation-delay: 2280ms; } .u-list-flow__item:nth-child(59) { animation-delay: 2320ms; } .u-list-flow__item:nth-child(60) { animation-delay: 2360ms; } .u-list-flow__item:nth-child(61) { animation-delay: 2400ms; } .u-list-flow__item:nth-child(62) { animation-delay: 2440ms; } .u-list-flow__item:nth-child(63) { animation-delay: 2480ms; } .u-list-flow__item:nth-child(64) { animation-delay: 2520ms; } .u-list-flow__item:nth-child(65) { animation-delay: 2560ms; } .u-list-flow__item:nth-child(66) { animation-delay: 2600ms; } .u-list-flow__item:nth-child(67) { animation-delay: 2640ms; } .u-list-flow__item:nth-child(68) { animation-delay: 2680ms; } .u-list-flow__item:nth-child(69) { animation-delay: 2720ms; } .u-list-flow__item:nth-child(70) { animation-delay: 2760ms; } .u-list-flow__item:nth-child(71) { animation-delay: 2800ms; } .u-list-flow__item:nth-child(72) { animation-delay: 2840ms; } .u-list-flow__item:nth-child(73) { animation-delay: 2880ms; } .u-list-flow__item:nth-child(74) { animation-delay: 2920ms; } .u-list-flow__item:nth-child(75) { animation-delay: 2960ms; } .u-list-flow__item:nth-child(76) { animation-delay: 3000ms; } .u-list-flow__item:nth-child(77) { animation-delay: 3040ms; } .u-list-flow__item:nth-child(78) { animation-delay: 3080ms; } .u-list-flow__item:nth-child(79) { animation-delay: 3120ms; } .u-list-flow__item:nth-child(80) { animation-delay: 3160ms; } .u-list-flow__item:nth-child(81) { animation-delay: 3200ms; } .u-list-flow__item:nth-child(82) { animation-delay: 3240ms; } .u-list-flow__item:nth-child(83) { animation-delay: 3280ms; } .u-list-flow__item:nth-child(84) { animation-delay: 3320ms; } .u-list-flow__item:nth-child(85) { animation-delay: 3360ms; } .u-list-flow__item:nth-child(86) { animation-delay: 3400ms; } .u-list-flow__item:nth-child(87) { animation-delay: 3440ms; } .u-list-flow__item:nth-child(88) { animation-delay: 3480ms; } .u-list-flow__item:nth-child(89) { animation-delay: 3520ms; } .u-list-flow__item:nth-child(90) { animation-delay: 3560ms; } .u-list-flow__item:nth-child(91) { animation-delay: 3600ms; } .u-list-flow__item:nth-child(92) { animation-delay: 3640ms; } .u-list-flow__item:nth-child(93) { animation-delay: 3680ms; } .u-list-flow__item:nth-child(94) { animation-delay: 3720ms; } .u-list-flow__item:nth-child(95) { animation-delay: 3760ms; } .u-list-flow__item:nth-child(96) { animation-delay: 3800ms; } .u-list-flow__item:nth-child(97) { animation-delay: 3840ms; } .u-list-flow__item:nth-child(98) { animation-delay: 3880ms; } .u-list-flow__item:nth-child(99) { animation-delay: 3920ms; } .u-list-flow__item:nth-child(100) { animation-delay: 3960ms; } .u-list-flow__item:nth-child(n + 100) { animation-delay: 4000ms; } .no-js .u-list-flow__item { animation: none !important; filter: none !important; transform: none !important; } /** * UTILITIES.SPACING * * @description : Quickly apply margins/paddings where needed. */ .u-pt-0 { padding-top: 0rem !important; } .u-pr-0 { padding-right: 0rem !important; } .u-pb-0 { padding-bottom: 0rem !important; } .u-pl-0 { padding-left: 0rem !important; } .u-mt-0 { margin-top: 0rem !important; } .u-mr-0 { margin-right: 0rem !important; } .u-mb-0 { margin-bottom: 0rem !important; } .u-ml-0 { margin-left: 0rem !important; } .u-pt-1 { padding-top: 0.3125rem !important; } .u-pr-1 { padding-right: 0.3125rem !important; } .u-pb-1 { padding-bottom: 0.3125rem !important; } .u-pl-1 { padding-left: 0.3125rem !important; } .u-mt-1 { margin-top: 0.3125rem !important; } .u-mr-1 { margin-right: 0.3125rem !important; } .u-mb-1 { margin-bottom: 0.3125rem !important; } .u-ml-1 { margin-left: 0.3125rem !important; } .u-pt-2 { padding-top: 0.625rem !important; } .u-pr-2 { padding-right: 0.625rem !important; } .u-pb-2 { padding-bottom: 0.625rem !important; } .u-pl-2 { padding-left: 0.625rem !important; } .u-mt-2 { margin-top: 0.625rem !important; } .u-mr-2 { margin-right: 0.625rem !important; } .u-mb-2 { margin-bottom: 0.625rem !important; } .u-ml-2 { margin-left: 0.625rem !important; } .u-pt-3 { padding-top: 0.9375rem !important; } .u-pr-3 { padding-right: 0.9375rem !important; } .u-pb-3 { padding-bottom: 0.9375rem !important; } .u-pl-3 { padding-left: 0.9375rem !important; } .u-mt-3 { margin-top: 0.9375rem !important; } .u-mr-3 { margin-right: 0.9375rem !important; } .u-mb-3 { margin-bottom: 0.9375rem !important; } .u-ml-3 { margin-left: 0.9375rem !important; } .u-pt-4 { padding-top: 1.25rem !important; } .u-pr-4 { padding-right: 1.25rem !important; } .u-pb-4 { padding-bottom: 1.25rem !important; } .u-pl-4 { padding-left: 1.25rem !important; } .u-mt-4 { margin-top: 1.25rem !important; } .u-mr-4 { margin-right: 1.25rem !important; } .u-mb-4 { margin-bottom: 1.25rem !important; } .u-ml-4 { margin-left: 1.25rem !important; } .u-pt-5 { padding-top: 1.875rem !important; } .u-pr-5 { padding-right: 1.875rem !important; } .u-pb-5 { padding-bottom: 1.875rem !important; } .u-pl-5 { padding-left: 1.875rem !important; } .u-mt-5 { margin-top: 1.875rem !important; } .u-mr-5 { margin-right: 1.875rem !important; } .u-mb-5 { margin-bottom: 1.875rem !important; } .u-ml-5 { margin-left: 1.875rem !important; } .u-pt-6 { padding-top: 2.5rem !important; } .u-pr-6 { padding-right: 2.5rem !important; } .u-pb-6 { padding-bottom: 2.5rem !important; } .u-pl-6 { padding-left: 2.5rem !important; } .u-mt-6 { margin-top: 2.5rem !important; } .u-mr-6 { margin-right: 2.5rem !important; } .u-mb-6 { margin-bottom: 2.5rem !important; } .u-ml-6 { margin-left: 2.5rem !important; } .u-pt-7 { padding-top: 3.125rem !important; } .u-pr-7 { padding-right: 3.125rem !important; } .u-pb-7 { padding-bottom: 3.125rem !important; } .u-pl-7 { padding-left: 3.125rem !important; } .u-mt-7 { margin-top: 3.125rem !important; } .u-mr-7 { margin-right: 3.125rem !important; } .u-mb-7 { margin-bottom: 3.125rem !important; } .u-ml-7 { margin-left: 3.125rem !important; } .u-pt-8 { padding-top: 3.75rem !important; } .u-pr-8 { padding-right: 3.75rem !important; } .u-pb-8 { padding-bottom: 3.75rem !important; } .u-pl-8 { padding-left: 3.75rem !important; } .u-mt-8 { margin-top: 3.75rem !important; } .u-mr-8 { margin-right: 3.75rem !important; } .u-mb-8 { margin-bottom: 3.75rem !important; } .u-ml-8 { margin-left: 3.75rem !important; } .u-pt-9 { padding-top: 5rem !important; } .u-pr-9 { padding-right: 5rem !important; } .u-pb-9 { padding-bottom: 5rem !important; } .u-pl-9 { padding-left: 5rem !important; } .u-mt-9 { margin-top: 5rem !important; } .u-mr-9 { margin-right: 5rem !important; } .u-mb-9 { margin-bottom: 5rem !important; } .u-ml-9 { margin-left: 5rem !important; } .u-pt-10 { padding-top: 6.25rem !important; } .u-pr-10 { padding-right: 6.25rem !important; } .u-pb-10 { padding-bottom: 6.25rem !important; } .u-pl-10 { padding-left: 6.25rem !important; } .u-mt-10 { margin-top: 6.25rem !important; } .u-mr-10 { margin-right: 6.25rem !important; } .u-mb-10 { margin-bottom: 6.25rem !important; } .u-ml-10 { margin-left: 6.25rem !important; } .u-pt-11 { padding-top: 9.375rem !important; } .u-pr-11 { padding-right: 9.375rem !important; } .u-pb-11 { padding-bottom: 9.375rem !important; } .u-pl-11 { padding-left: 9.375rem !important; } .u-mt-11 { margin-top: 9.375rem !important; } .u-mr-11 { margin-right: 9.375rem !important; } .u-mb-11 { margin-bottom: 9.375rem !important; } .u-ml-11 { margin-left: 9.375rem !important; } .u-pt-12 { padding-top: 12.5rem !important; } .u-pr-12 { padding-right: 12.5rem !important; } .u-pb-12 { padding-bottom: 12.5rem !important; } .u-pl-12 { padding-left: 12.5rem !important; } .u-mt-12 { margin-top: 12.5rem !important; } .u-mr-12 { margin-right: 12.5rem !important; } .u-mb-12 { margin-bottom: 12.5rem !important; } .u-ml-12 { margin-left: 12.5rem !important; } @media (max-width: 768px) { .u-mob-pt-0 { padding-top: 0rem !important; } } @media (max-width: 768px) { .u-mob-pr-0 { padding-right: 0rem !important; } } @media (max-width: 768px) { .u-mob-pb-0 { padding-bottom: 0rem !important; } } @media (max-width: 768px) { .u-mob-pl-0 { padding-left: 0rem !important; } } @media (max-width: 768px) { .u-mob-mt-0 { margin-top: 0rem !important; } } @media (max-width: 768px) { .u-mob-mr-0 { margin-right: 0rem !important; } } @media (max-width: 768px) { .u-mob-mb-0 { margin-bottom: 0rem !important; } } @media (max-width: 768px) { .u-mob-ml-0 { margin-left: 0rem !important; } } @media (max-width: 768px) { .u-mob-pt-1 { padding-top: 0.3125rem !important; } } @media (max-width: 768px) { .u-mob-pr-1 { padding-right: 0.3125rem !important; } } @media (max-width: 768px) { .u-mob-pb-1 { padding-bottom: 0.3125rem !important; } } @media (max-width: 768px) { .u-mob-pl-1 { padding-left: 0.3125rem !important; } } @media (max-width: 768px) { .u-mob-mt-1 { margin-top: 0.3125rem !important; } } @media (max-width: 768px) { .u-mob-mr-1 { margin-right: 0.3125rem !important; } } @media (max-width: 768px) { .u-mob-mb-1 { margin-bottom: 0.3125rem !important; } } @media (max-width: 768px) { .u-mob-ml-1 { margin-left: 0.3125rem !important; } } @media (max-width: 768px) { .u-mob-pt-2 { padding-top: 0.625rem !important; } } @media (max-width: 768px) { .u-mob-pr-2 { padding-right: 0.625rem !important; } } @media (max-width: 768px) { .u-mob-pb-2 { padding-bottom: 0.625rem !important; } } @media (max-width: 768px) { .u-mob-pl-2 { padding-left: 0.625rem !important; } } @media (max-width: 768px) { .u-mob-mt-2 { margin-top: 0.625rem !important; } } @media (max-width: 768px) { .u-mob-mr-2 { margin-right: 0.625rem !important; } } @media (max-width: 768px) { .u-mob-mb-2 { margin-bottom: 0.625rem !important; } } @media (max-width: 768px) { .u-mob-ml-2 { margin-left: 0.625rem !important; } } @media (max-width: 768px) { .u-mob-pt-3 { padding-top: 0.9375rem !important; } } @media (max-width: 768px) { .u-mob-pr-3 { padding-right: 0.9375rem !important; } } @media (max-width: 768px) { .u-mob-pb-3 { padding-bottom: 0.9375rem !important; } } @media (max-width: 768px) { .u-mob-pl-3 { padding-left: 0.9375rem !important; } } @media (max-width: 768px) { .u-mob-mt-3 { margin-top: 0.9375rem !important; } } @media (max-width: 768px) { .u-mob-mr-3 { margin-right: 0.9375rem !important; } } @media (max-width: 768px) { .u-mob-mb-3 { margin-bottom: 0.9375rem !important; } } @media (max-width: 768px) { .u-mob-ml-3 { margin-left: 0.9375rem !important; } } @media (max-width: 768px) { .u-mob-pt-4 { padding-top: 1.25rem !important; } } @media (max-width: 768px) { .u-mob-pr-4 { padding-right: 1.25rem !important; } } @media (max-width: 768px) { .u-mob-pb-4 { padding-bottom: 1.25rem !important; } } @media (max-width: 768px) { .u-mob-pl-4 { padding-left: 1.25rem !important; } } @media (max-width: 768px) { .u-mob-mt-4 { margin-top: 1.25rem !important; } } @media (max-width: 768px) { .u-mob-mr-4 { margin-right: 1.25rem !important; } } @media (max-width: 768px) { .u-mob-mb-4 { margin-bottom: 1.25rem !important; } } @media (max-width: 768px) { .u-mob-ml-4 { margin-left: 1.25rem !important; } } @media (max-width: 768px) { .u-mob-pt-5 { padding-top: 1.875rem !important; } } @media (max-width: 768px) { .u-mob-pr-5 { padding-right: 1.875rem !important; } } @media (max-width: 768px) { .u-mob-pb-5 { padding-bottom: 1.875rem !important; } } @media (max-width: 768px) { .u-mob-pl-5 { padding-left: 1.875rem !important; } } @media (max-width: 768px) { .u-mob-mt-5 { margin-top: 1.875rem !important; } } @media (max-width: 768px) { .u-mob-mr-5 { margin-right: 1.875rem !important; } } @media (max-width: 768px) { .u-mob-mb-5 { margin-bottom: 1.875rem !important; } } @media (max-width: 768px) { .u-mob-ml-5 { margin-left: 1.875rem !important; } } @media (max-width: 768px) { .u-mob-pt-6 { padding-top: 2.5rem !important; } } @media (max-width: 768px) { .u-mob-pr-6 { padding-right: 2.5rem !important; } } @media (max-width: 768px) { .u-mob-pb-6 { padding-bottom: 2.5rem !important; } } @media (max-width: 768px) { .u-mob-pl-6 { padding-left: 2.5rem !important; } } @media (max-width: 768px) { .u-mob-mt-6 { margin-top: 2.5rem !important; } } @media (max-width: 768px) { .u-mob-mr-6 { margin-right: 2.5rem !important; } } @media (max-width: 768px) { .u-mob-mb-6 { margin-bottom: 2.5rem !important; } } @media (max-width: 768px) { .u-mob-ml-6 { margin-left: 2.5rem !important; } } @media (max-width: 768px) { .u-mob-pt-7 { padding-top: 3.125rem !important; } } @media (max-width: 768px) { .u-mob-pr-7 { padding-right: 3.125rem !important; } } @media (max-width: 768px) { .u-mob-pb-7 { padding-bottom: 3.125rem !important; } } @media (max-width: 768px) { .u-mob-pl-7 { padding-left: 3.125rem !important; } } @media (max-width: 768px) { .u-mob-mt-7 { margin-top: 3.125rem !important; } } @media (max-width: 768px) { .u-mob-mr-7 { margin-right: 3.125rem !important; } } @media (max-width: 768px) { .u-mob-mb-7 { margin-bottom: 3.125rem !important; } } @media (max-width: 768px) { .u-mob-ml-7 { margin-left: 3.125rem !important; } } @media (max-width: 768px) { .u-mob-pt-8 { padding-top: 3.75rem !important; } } @media (max-width: 768px) { .u-mob-pr-8 { padding-right: 3.75rem !important; } } @media (max-width: 768px) { .u-mob-pb-8 { padding-bottom: 3.75rem !important; } } @media (max-width: 768px) { .u-mob-pl-8 { padding-left: 3.75rem !important; } } @media (max-width: 768px) { .u-mob-mt-8 { margin-top: 3.75rem !important; } } @media (max-width: 768px) { .u-mob-mr-8 { margin-right: 3.75rem !important; } } @media (max-width: 768px) { .u-mob-mb-8 { margin-bottom: 3.75rem !important; } } @media (max-width: 768px) { .u-mob-ml-8 { margin-left: 3.75rem !important; } } @media (max-width: 768px) { .u-mob-pt-9 { padding-top: 5rem !important; } } @media (max-width: 768px) { .u-mob-pr-9 { padding-right: 5rem !important; } } @media (max-width: 768px) { .u-mob-pb-9 { padding-bottom: 5rem !important; } } @media (max-width: 768px) { .u-mob-pl-9 { padding-left: 5rem !important; } } @media (max-width: 768px) { .u-mob-mt-9 { margin-top: 5rem !important; } } @media (max-width: 768px) { .u-mob-mr-9 { margin-right: 5rem !important; } } @media (max-width: 768px) { .u-mob-mb-9 { margin-bottom: 5rem !important; } } @media (max-width: 768px) { .u-mob-ml-9 { margin-left: 5rem !important; } } @media (max-width: 768px) { .u-mob-pt-10 { padding-top: 6.25rem !important; } } @media (max-width: 768px) { .u-mob-pr-10 { padding-right: 6.25rem !important; } } @media (max-width: 768px) { .u-mob-pb-10 { padding-bottom: 6.25rem !important; } } @media (max-width: 768px) { .u-mob-pl-10 { padding-left: 6.25rem !important; } } @media (max-width: 768px) { .u-mob-mt-10 { margin-top: 6.25rem !important; } } @media (max-width: 768px) { .u-mob-mr-10 { margin-right: 6.25rem !important; } } @media (max-width: 768px) { .u-mob-mb-10 { margin-bottom: 6.25rem !important; } } @media (max-width: 768px) { .u-mob-ml-10 { margin-left: 6.25rem !important; } } @media (max-width: 768px) { .u-mob-pt-11 { padding-top: 9.375rem !important; } } @media (max-width: 768px) { .u-mob-pr-11 { padding-right: 9.375rem !important; } } @media (max-width: 768px) { .u-mob-pb-11 { padding-bottom: 9.375rem !important; } } @media (max-width: 768px) { .u-mob-pl-11 { padding-left: 9.375rem !important; } } @media (max-width: 768px) { .u-mob-mt-11 { margin-top: 9.375rem !important; } } @media (max-width: 768px) { .u-mob-mr-11 { margin-right: 9.375rem !important; } } @media (max-width: 768px) { .u-mob-mb-11 { margin-bottom: 9.375rem !important; } } @media (max-width: 768px) { .u-mob-ml-11 { margin-left: 9.375rem !important; } } @media (max-width: 768px) { .u-mob-pt-12 { padding-top: 12.5rem !important; } } @media (max-width: 768px) { .u-mob-pr-12 { padding-right: 12.5rem !important; } } @media (max-width: 768px) { .u-mob-pb-12 { padding-bottom: 12.5rem !important; } } @media (max-width: 768px) { .u-mob-pl-12 { padding-left: 12.5rem !important; } } @media (max-width: 768px) { .u-mob-mt-12 { margin-top: 12.5rem !important; } } @media (max-width: 768px) { .u-mob-mr-12 { margin-right: 12.5rem !important; } } @media (max-width: 768px) { .u-mob-mb-12 { margin-bottom: 12.5rem !important; } } @media (max-width: 768px) { .u-mob-ml-12 { margin-left: 12.5rem !important; } } .u-t-pop-out { margin-top: -5rem; } .u-b-pop-out { margin-bottom: -5rem; } /** * UTILITIES.TYPE * * @description : These classes trump other preceeding styles. * Userful for quickly applying common adjustments. */ .u-tc { text-align: center; } .u-tr { text-align: right; } .u-tl { text-align: left; } .u-italic { font-style: italic; } /** * UTILITIES.WORD-FLOW * * @description : Flow in a piece of text word by word. * */ @keyframes u-word-flow__word { 0% { opacity: 0; transform: translateY(0.125em); } 100% { opacity: 1; transform: translateY(0); } } .u-word-flow { display: inline; text-decoration: inherit; } .u-word-flow__word { opacity: 0; transform: translateY(0.125em); } .u-word-flow.animation-started .u-word-flow__word { animation-duration: 1s; animation-fill-mode: both; animation-name: u-word-flow__word; opacity: 1; transform: translateY(0); } .u-word-flow__word:nth-child(1) { animation-delay: 0ms; } .u-word-flow__word:nth-child(2) { animation-delay: 50ms; } .u-word-flow__word:nth-child(3) { animation-delay: 100ms; } .u-word-flow__word:nth-child(4) { animation-delay: 150ms; } .u-word-flow__word:nth-child(5) { animation-delay: 200ms; } .u-word-flow__word:nth-child(6) { animation-delay: 250ms; } .u-word-flow__word:nth-child(7) { animation-delay: 300ms; } .u-word-flow__word:nth-child(8) { animation-delay: 350ms; } .u-word-flow__word:nth-child(9) { animation-delay: 400ms; } .u-word-flow__word:nth-child(10) { animation-delay: 450ms; } .u-word-flow__word:nth-child(11) { animation-delay: 500ms; } .u-word-flow__word:nth-child(12) { animation-delay: 550ms; } .u-word-flow__word:nth-child(13) { animation-delay: 600ms; } .u-word-flow__word:nth-child(14) { animation-delay: 650ms; } .u-word-flow__word:nth-child(15) { animation-delay: 700ms; } .u-word-flow__word:nth-child(16) { animation-delay: 750ms; } .u-word-flow__word:nth-child(17) { animation-delay: 800ms; } .u-word-flow__word:nth-child(18) { animation-delay: 850ms; } .u-word-flow__word:nth-child(19) { animation-delay: 900ms; } .u-word-flow__word:nth-child(20) { animation-delay: 950ms; } .u-word-flow__word:nth-child(21) { animation-delay: 1000ms; } .u-word-flow__word:nth-child(22) { animation-delay: 1050ms; } .u-word-flow__word:nth-child(23) { animation-delay: 1100ms; } .u-word-flow__word:nth-child(24) { animation-delay: 1150ms; } .u-word-flow__word:nth-child(25) { animation-delay: 1200ms; } .u-word-flow__word:nth-child(26) { animation-delay: 1250ms; } .u-word-flow__word:nth-child(27) { animation-delay: 1300ms; } .u-word-flow__word:nth-child(28) { animation-delay: 1350ms; } .u-word-flow__word:nth-child(29) { animation-delay: 1400ms; } .u-word-flow__word:nth-child(30) { animation-delay: 1450ms; } .u-word-flow__word:nth-child(31) { animation-delay: 1500ms; } .u-word-flow__word:nth-child(32) { animation-delay: 1550ms; } .u-word-flow__word:nth-child(33) { animation-delay: 1600ms; } .u-word-flow__word:nth-child(34) { animation-delay: 1650ms; } .u-word-flow__word:nth-child(35) { animation-delay: 1700ms; } .u-word-flow__word:nth-child(36) { animation-delay: 1750ms; } .u-word-flow__word:nth-child(37) { animation-delay: 1800ms; } .u-word-flow__word:nth-child(38) { animation-delay: 1850ms; } .u-word-flow__word:nth-child(39) { animation-delay: 1900ms; } .u-word-flow__word:nth-child(40) { animation-delay: 1950ms; } .u-word-flow__word:nth-child(41) { animation-delay: 2000ms; } .u-word-flow__word:nth-child(42) { animation-delay: 2050ms; } .u-word-flow__word:nth-child(43) { animation-delay: 2100ms; } .u-word-flow__word:nth-child(44) { animation-delay: 2150ms; } .u-word-flow__word:nth-child(45) { animation-delay: 2200ms; } .u-word-flow__word:nth-child(46) { animation-delay: 2250ms; } .u-word-flow__word:nth-child(47) { animation-delay: 2300ms; } .u-word-flow__word:nth-child(48) { animation-delay: 2350ms; } .u-word-flow__word:nth-child(49) { animation-delay: 2400ms; } .u-word-flow__word:nth-child(50) { animation-delay: 2450ms; } .u-word-flow__word:nth-child(51) { animation-delay: 2500ms; } .u-word-flow__word:nth-child(52) { animation-delay: 2550ms; } .u-word-flow__word:nth-child(53) { animation-delay: 2600ms; } .u-word-flow__word:nth-child(54) { animation-delay: 2650ms; } .u-word-flow__word:nth-child(55) { animation-delay: 2700ms; } .u-word-flow__word:nth-child(56) { animation-delay: 2750ms; } .u-word-flow__word:nth-child(57) { animation-delay: 2800ms; } .u-word-flow__word:nth-child(58) { animation-delay: 2850ms; } .u-word-flow__word:nth-child(59) { animation-delay: 2900ms; } .u-word-flow__word:nth-child(60) { animation-delay: 2950ms; } .u-word-flow__word:nth-child(61) { animation-delay: 3000ms; } .u-word-flow__word:nth-child(62) { animation-delay: 3050ms; } .u-word-flow__word:nth-child(63) { animation-delay: 3100ms; } .u-word-flow__word:nth-child(64) { animation-delay: 3150ms; } .u-word-flow__word:nth-child(65) { animation-delay: 3200ms; } .u-word-flow__word:nth-child(66) { animation-delay: 3250ms; } .u-word-flow__word:nth-child(67) { animation-delay: 3300ms; } .u-word-flow__word:nth-child(68) { animation-delay: 3350ms; } .u-word-flow__word:nth-child(69) { animation-delay: 3400ms; } .u-word-flow__word:nth-child(70) { animation-delay: 3450ms; } .u-word-flow__word:nth-child(71) { animation-delay: 3500ms; } .u-word-flow__word:nth-child(72) { animation-delay: 3550ms; } .u-word-flow__word:nth-child(73) { animation-delay: 3600ms; } .u-word-flow__word:nth-child(74) { animation-delay: 3650ms; } .u-word-flow__word:nth-child(75) { animation-delay: 3700ms; } .u-word-flow__word:nth-child(76) { animation-delay: 3750ms; } .u-word-flow__word:nth-child(77) { animation-delay: 3800ms; } .u-word-flow__word:nth-child(78) { animation-delay: 3850ms; } .u-word-flow__word:nth-child(79) { animation-delay: 3900ms; } .u-word-flow__word:nth-child(80) { animation-delay: 3950ms; } .u-word-flow__word:nth-child(81) { animation-delay: 4000ms; } .u-word-flow__word:nth-child(82) { animation-delay: 4050ms; } .u-word-flow__word:nth-child(83) { animation-delay: 4100ms; } .u-word-flow__word:nth-child(84) { animation-delay: 4150ms; } .u-word-flow__word:nth-child(85) { animation-delay: 4200ms; } .u-word-flow__word:nth-child(86) { animation-delay: 4250ms; } .u-word-flow__word:nth-child(87) { animation-delay: 4300ms; } .u-word-flow__word:nth-child(88) { animation-delay: 4350ms; } .u-word-flow__word:nth-child(89) { animation-delay: 4400ms; } .u-word-flow__word:nth-child(90) { animation-delay: 4450ms; } .u-word-flow__word:nth-child(91) { animation-delay: 4500ms; } .u-word-flow__word:nth-child(92) { animation-delay: 4550ms; } .u-word-flow__word:nth-child(93) { animation-delay: 4600ms; } .u-word-flow__word:nth-child(94) { animation-delay: 4650ms; } .u-word-flow__word:nth-child(95) { animation-delay: 4700ms; } .u-word-flow__word:nth-child(96) { animation-delay: 4750ms; } .u-word-flow__word:nth-child(97) { animation-delay: 4800ms; } .u-word-flow__word:nth-child(98) { animation-delay: 4850ms; } .u-word-flow__word:nth-child(99) { animation-delay: 4900ms; } .u-word-flow__word:nth-child(100) { animation-delay: 4950ms; } .u-word-flow__word:nth-child(n + 100) { animation-delay: 5000ms; } .no-js .u-word-flow__word { animation: none !important; opacity: 1 !important; transform: translateY(0) !important; } /** * 9. PLUGINS */ /*# sourceMappingURL=master.css.map */