/* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ #header { position: relative; display: flex; justify-content: space-between; position: fixed; top: 0px; left: 0px; width: 100%; height: 50px; color: #EBE9E2; transition: color 299.7ms ease; padding: 0 7.14286%; z-index: 25; } .fruit-smash #header #header__main-nav #hamburger { display: none; } .fruit-smash #header:after { box-sizing: border-box; background-color: #fff; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAACgCAMAAAAVbMrnAAAAsVBMVEUAAAAHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQHAgQuImw+AAAAOnRSTlMAkaEg+jDA0QVQ7q/yAz8MEKhffzj2mLTg63gsCYND27pIyWznFFUk1loZcOOHJ8Q0nBbNZx1zi0xk6uSycAAAEvRJREFUeNrsyk0LAUEAANBxYGV2WRSLsvkoOYgaOcz//2GOEmfaeu/8AgAAAAAAAAAAAAAAAABA52xisx+HD9X2smxH5SpND6fA7/TLnHNThXeT9TG/pNkwdF+9e/TiIBVFcY2L+flWfyntPfzbkzh77y4diKIAvlUwiXgEQRBFPVqKVOvR/f0/2F23M0IirhuNld/fWJmcmXN2pMC/GggovzOo3UfqdLeBu+WWrwxz1h+L/gZnlqSOdHn80QkuXeOFPVKWI7nO4S6HNa9y8s3FwctWqvO+RXLcQ6pq/JEPLF1jhAzSNSBJe4r4ZnnG8IZkTLoCd9hR2sBXKvCoqM9muuVfaZqGlHTEpZuMo4gkZFukuRf3nJCLnqVTccqBzxhVpGhEyYx7FW+Mx0ACZo5sPAJxNSiNT19tUdIaUPb8UUd6GjxaIRZPo6RZi7da52Ok8YYk9l2LUbes8pTxcEPJCB8RYV8MjY2KWkhPk8ozYhGvlEZZSL2yW3h0QSZUDIEzGZKtLf4tQ8mcQ1pR6cKnUnAWaREOlc59LdmZ4Ex2kec1msCvlXmUw0lXI0nnRnjfapQGoelp4KIgZaRlSEWb3zd6XIRsdoyWx+/pPCrjpKi2fhf/VKdSD+6pEXxVpl2Qjzsz0IbKEGEvD4y9DUa0me5/rkF8UqkFCjKAr8OUW1bJoTK982TlEDZ6YOrdUHFKF5vqdtfNvlP5UgUJHd2VmfZQL1Mxe4jli0oDIXMqes0a09cUSMKa0g6+qk3JqOCGWZtKRgCHcJzJtpl27F1SsRDPN5Xv6FKpXbb6yuQL7deB20UyPFtebgm+BRUXN20+qRQayFHS1GbsjymNK3g0kbFe5rhUuLNjYUqliZAipSUuVL7dl9+uNdcyxq1p1Bq0DW7rZXhklQMBoWtR0cp4uClJrTm/2l60CuLpUvlEkDAvp67yZZAs9JCsXMxDPnxmmCu8+ohH9gG/N5m6zX1tciNMOfq1fz8GiKlkXHnA71N6vpY6X5CsfTDv3darGwyyNZ68diF9f2a2OKk0C5aHc15xVIx+oeUVNfnDbglAbeRuESSOl7C7qFPwLgl3lHdXsfJyPfr+ZK4lVgvJeqfkCPyvav2dV5j1HqSNSdq7UxnXJNnswZezSXJci5gP9BVLyNqk3Snh3IGMrMgzg7lbtPjX0yTGE4FTiZxKfYRYfshMlHfXWwyhWzYvtTunle8DI7LUUh3a/8D8WFRLhMq95pmOGqqtHs488cgWUSOkHbppjoebBlQWOLOlZAqEGJQKD+pYDcTTGy7zNk/Mdf0PqVbapSgQAxURUcBjvBC8T2TEY9edo///D9undhM6hcu6W5/m8Rjp7iSVpNI9L8NQrla6ddOcOZYWIo1oqHl/a6mHXE8IEKjHLr1g5wXOhX1V9AstQtO2xo+cNt1BWbDIIIt5N9bFp6HRZD/iXMI0WUX+DULhZN0wPL9Umqg9RItfT7Q6c0P9WjZmuoKQMCaQqL3fstWIyInlbsy1E13VaArCuriGDKi8gcYNU3eFl2WV7lBz6rghhPvOC2hnwzd7aWc+jzBKL4CoY4o6f2bCOI4EISRT0iPsisTFLpWODZGXLSx6Os9lnbt7tHyRweAF5b6O0kYVEmlqaqNcLg+Gt4+ZCzgbw2P1rH/keSvayQYUULju3sRxOpMFZb2dOtdDm7VMpmIa6bmEFTkenvWuT26qAg30sd0zRWmkVpOZF6xfGI98mPKMoYF3PXh5LRD9EMTxAe8wDzE8qdA0A/D1B4Jaqs9efjGngsj6yioRFS0czinnXKithsAatVVbhpryJzMIsEiH3M+yFCX/1UB14N4XBuuxcuMJsUQRp8lXZ8BAw5IhhTCJzgHTTAp3t9pvolaRVq6bB1MSolv83L3LKYMQSKx/ZbWMWMEMCihrSxGngnAUas+KYfe+FpRuxjAUlQA349ztrTn/JeBDEz0N2UmGoH1nkHy8LeI/OI8rsvjmfuLu8qp3S1bWhK7KX43YVy6DAXKwWVUuYr1e8LHGoQ320iDc7un//2d+1Kkvmr3qsfKjramOiCp3rX6LWyjtvCKQ2dsQV89hsVg6yxCRPqSLOi06fplqZ5kVtxt3k4bkQ5AcAnIrOPif9wWbOK50hEQrDcKSQYz1GrzjfuKMcu/LXT26GSUByyzzeOiRhbh8JsiXTyTYFmABn6YvY1hPU0PLv91AUL7sPtg2ACEwSRfd5q33pz7ymJdOeE8syuTvrhz//9tEoDexXIHgizkQh3Ni9TmVT6CoDjDxbArHw+h9gnWScZ+eQEnft2VovX/Scjbu42UHnHfGFx0KVNqch6ETiG3bVP+tgjAo/UIKKMa0Jv6MKOP05W7w3VTdrNmmWGf58QTJdo7p7UrMUgAblZI3CJETdHdz6dC+PadkPZGHtuZzmCrUeomAEN5JB6rDbo4p38lvzOzSljzjheFhEeZU7c00RujAvGtIfQC7PDQ2UV+2qDYoQMg0ROM6tUlFhJ+JyNDzR+d8SHvA8Y2YzQqVgXWI4b7SVw6YQgYyXmJoq+v0gxtX+mICrFCI2BRFqBNjlTVnr0PH/M77gCVUlGvU4kSruNzIYqj1/wk95+RRf3h9zWvRlaGVZOE9tdW8xnJ4KhKGdlzLTGN2wFsxx8eSTpmTulCNVi+cfSkQK6zfVh/dz4ExtCzLUePbXhrLVbjt5vOqqwxz2Q9s4QLixJcMYnm6Qmby25tH6q6Nx6qrKavZvrx3O1HRRvopdytD6E/C4NEU1rNZbcc52bTbrkobB05sYYEYIR1lZqyaP2IBiZg7otnKrvMCusoIStwpiHZvmEON1wwSgqKlkOjx6aYOvU+XvFXvOYqNMIWcJe8yMvQisXfT/wjYfqrkXoEi+hYIEJ1CYfso/GCn6TaQY4lPrTtpm/wrU84ZOySjGRzngvlf0fgGp87ALDNds14+wmBBdPJ+z1vuRrYTNwxBizBtuKEWyyM3VZ1Cyzd4QhyOR4osqrwADMmET1HxyHgsN8CugyxXujZwT8If+CBbmjajbBCw6uBBFIMoI1ATSpSZqHgYj6QBL8rTw3SZI/USqDA1CnMFL5MGI0/LgD6P4fIqzUNfvE/vFN7mgPtRkhYBnXS/PuhqJ367sQa6yRXqlVDkfy/MjRgftNlcnW2luVb3TbmX4vfj7dX+5mZFsi8nPgd60TW1TbTJUbYoGM8o3mfqqGjXdmbPxmtXtUjrxWLsoBHE9ekF0bOAnF6DfGE8ucbtYJYgFweCY97Z0WLve6kqBsVPP1ylSG/YEs8wsBoCS1qyu9A5assU/gEZtat2qPI+RXExLGiwYBg20AqoCrR8wuYeuweaD2iUoTCDbPGdc+ZoZOz4RU2/H6kYWwVY4zd75/6fNAwE8PRBC6WlRZ5F3m8YY8LEzfv//zCVhlySq3SoHxXN9ze7rkvucnfJ5RJnYi7mqAEzegLBDIO0GmemyjhsSya2d0EQYtB4VAv0X28pSthfcdKXVEBFTqB0aUxNuXxCks2YkgV2HXIHQPScfyatH1ybAwbYAiXXm1Wz4AvrZyHdvVAIWR4v9QZCVZr1vOjJ3amoAydraUtRSNzFeWcxFklKkMWXG8uu30YRavGhQbbZliCYEA8BVf1sZ+9q++ZXKjiB/xMZyBoLhETQANokuV8R7l6ZiTmBkmdmM0yrHEBjojUaTWrKiiBzburkuEWOlaE0w3Ctjos4BUE/WzmPyMenZB8d69fn/esWTBN1I6IQ7dxMQDJze3RH+ghfXgyk25PyDYl/+UDM1GVCbQYaa9xbxMC/gVsM5NO1o1KRh1Hc1sSyDXTJDqRP0YKGI3aGush4LVRNqBOLQlL1ZOoz6P4tJZM0R/ZyB7L5VTtb12fcJO97+E1NIR0XFDDONCSjq7kYjYrpz8m+LLKwpYqaJ80bjQGxcctIlo/T0k8qHoPz6/hrstDX5es1P9REHM1pjok1rXGMLHiP8ZUk00codWN7loczAc6HY9bv5wOOIM0uGiAIY/3wU5W9C6V5aDGDK4UfDWVgzNU0bo/U8HQAccUERpCIPNB4I1qrWPikMMqNYqbQ02y0jW+SiWCVWJWbjZfWBHcjT9NsNK+A0wqzn5TikTgt0wGZaTSnEqzg0LytPrNG7Q1py96/rCZFliBTvYQUV44hDZBxxMD58KqZ5CPqnYB1TrTYsL/TZqwfSRLoke40dUClJyIRWlcUgsLLpST4ebJVDSRcSR/8gJsnKt2YFfB6Oge4VK2TUXFa0tBKFMkuXXkuAlPe3rEvrcE3ZKNvw7/XVHZvIkstpKQ0XXTjZWo6mKI4YSP1qXmq5nuQaTnTGuJxy0JGfT4GKUvJP/nfK54qjugraPWO8bsAOCgecudOeNIU8omdMt8734tfdRbZVBt3B6MH9yzmKnAsrg/XYSd5nu14xUePZpL89owTPdIJ9JO+NRx1yQRipY1wsgvWRFtTbox4AMpATrr2iHdBAyvgBJQOI3wYt9YX5WLzfOEERNAO5meLkRKnO+4GUZY+5ieCiyJ7G9styMSTCZw9/DZeFxs/pwhmQoqpZrSm2yMFeh6poUxcQGZoWxoHRfrv6WT9zReKdIAwY1dZg4bFp5nIhGwLT6MhALV+DxSKD2hpXmXXTYHIUA7iK/3miu53AucDWa36sRAyMa53rqaPSF4BdPP3amCdsEIwByNPC69iA/G9zNJ97x4UWnu+yY7Ucoda6rACZvB91jHGvVRf05daZAb5QvKVD6hr3pLFHPWBNEeAuCL9vKRGvsBt+S1jR8+2SnV2jcat5eevoDA/ZSETcffEjmYkPL7kTkJaTVZIswsElCG+luoryGGom3/Eh386wYoPl0vPEe46yJzxhsn0B1j0+0EaLjQz+p5r1I7PGi/VR0/sGpEqqOKVS3kHEmEJQ6Yc0j4RHS+JNyU+qzVkbyC2XMjDPzGZ7SEM1O+t6m6mM2Tiha7fSJRy5y64/kNZirN2iu8gyWycAnTrEyZT81xfe/VopRBWm9yGVr33PXaV5PkmA1GnsUET91KUJUI8B8FTmW9IC0Sbm4pyh+xt7OtUJe4LiT7nhhQ+uv2l2/9En91C4gEyX7BC6rjOeY/JLs401rfbnhJ9FfG8yPOYuxJ7M87jHGRS68T+HaKBK3mgYso2ZNRRsAufLwQSYUiXeawYHpUW/7U4L4bZyW2NbvY6o/P6aNQZDP+F23plVnYmq6c3pr6WU4CgrkTg+DEFeFoqF1G74HaGypMWtLInSLOegjuySuxHiJM++zeJJ73GxxuE0j9SX3nUhVM+6iM3SqJcT2wwGAwGg8FgMBgMBoPBYDAY/j9mltVknIllbZjEwLIshyHvLcHL5wXjJOJhY7NgeTQtr5t2/WoP0581S4ZnqSv49/HDSD/7lsyMp7stmUpua+8FTzq+0FB3HCd6WUEFELxiyQHEtbdMZzEGgf+K5Qj0JL2l/n0HVBJS5g0eFqAgVn5r74QrCvHwPAB2EXFLeXKbZ6OdfCYNsBjztyoEW3sf5ClE9DLtALwoChmVznx4twM4oNyyh8sqnuFTzrgNVoyxeNgO3SZaiFcSJLkKKZ9/Nrl8vhSd/ViJU1tjHXMNYF4SbHNba7P74PsK6QD0mgBhIivEl2olfFSIiEi0Uu+ddGXEYshQIVWmQBUifZ5y8gHCVxw7XYbQ1i4B1uw+8AAO7zhVWSCl81nBMUDjewpZ50hsDPBEb8oaWZ/eVWortJ2fVkhpjmUVb1PIiN0HHgjI4ZvBuYYujaUurp0zq8oIoIMSk+3BZYh6Hq413kSoEDfISG5SCBZcPG+VqtIg45XltPb13Nq/k4Hn9d6ikBW/wWIK8IBdVFiixBTRxJpEx4B0IhLUb1IIHuCr9qVwR+YHtLUb2b48z4vZ34FwS6iQscWZSj87AFRLX+nxGyVpFx9ViWF5bMQ09rP2eDpKM7kIhYR+RnyrQsptAHiJ1Lpr188Yfkchln7AKWF/B1whRUH95ALyGbsY2N/w+AEAKrEOjZ6REGQtBWj/dAxJxgAub1JBDMHWVtjfqpA3zrIskBhFWpjsdwE6eRJ7oHcRRV5b9H36CxTirAGw6rcwqPN7TMbsXshXyKIFYHF2ABvsIk6dKpLEstg5qcr/gxR+tNU+Xy++b6O1PQCMHcFWKKQqnvXzFfIhBQgm2ls1gJ2DRFprhwBw5yv1gTSAPwP4qBCcg+1ilBip30aq/PnOPRtb7krdJ2ap6luxIoUaBnUk0VtrA8z/liD+QwqJA4CmfIBhondxGwK85Cik4zCd5RoEU4f9CYUcgz///+a/lZ5t14TXte3PWQdteyBJ1Lb5BTv8MX94iPm9BBfaD/nFxbVHbxSE82l7gstFGxFf3dgSJcbE5xmysRX22TTOVuhja7Fnh3sxEYPBYDAYDAaDwWAwGAwGg8FgMBgMBoPBYDAYDAaDwWAwGAwGg8FgMHxpDw4JAAAAAAT9f+0GOwAAAPAEvupF+0hYh4AAAAAASUVORK5CYII="); background-size: contain; background-repeat: no-repeat; background-position: center; border-bottom: 1px solid #ccc; } .fruit-smash #header #header__logo { display: none; } .fat-tire #header:after { background: #BC2F2B; } .fat-tire #header.mobile-active #header__main-nav #hamburger { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .fat-tire #header #header__main-nav ul li a:after { color: #fff; } .fat-tire #header #header__main-nav ul li[aria-current="page"]:after, .fat-tire #header #header__sub-nav ul li[aria-current="page"]:after { background: #857550; } .fat-tire #header #header__logo { bottom: 50%; } .fat-tire #header.scrolled #header__logo { transform: none; } .fat-tire #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link.expanded { background-color: #fff; } .fat-tire #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-btn { color: #fff; } .fat-tire #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-btn h3:after { color: #BC2F2B; } .fat-tire #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper { background: #fff; } .fat-tire #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .flyout-link { color: #BC2F2B; } .fat-tire #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner p.a2 { color: #857550; } .fat-tire #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .accordion-cta .subtitle { color: #fff; } .fat-tire #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .accordion-cta .secondary { color: #fff; } .voodoo-ranger #header:after { background: #231F20; } .voodoo-ranger #header.mobile-active #header__main-nav #hamburger { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .voodoo-ranger #header.mobile-active #header__main-nav #hamburger svg { stroke: 5px; } .voodoo-ranger #header.mobile-active #header__logo { position: static; width: 320px; height: 85px; transform: none; } .voodoo-ranger #header.has-disclaimer + .inner .full-window-height { height: calc(100vh); } .voodoo-ranger #header.has-disclaimer + .inner .full-window-max-height { max-height: calc(100vh); } .voodoo-ranger #header + .inner .full-window-height { height: calc(100vh); } .voodoo-ranger #header + .inner .full-window-max-height { max-height: calc(100vh); } .voodoo-ranger #header #header__main-nav ul li a:after { color: #FEFEFE; } .voodoo-ranger #header #header__main-nav ul li[aria-current="page"]:after, .voodoo-ranger #header #header__sub-nav ul li[aria-current="page"]:after { background: #F1C218; } .voodoo-ranger #header #header__sub-nav .disclaimer { color: #231F20; background: #F1C218; } .voodoo-ranger #header #header__sub-nav .disclaimer a { color: #6D2060; } .voodoo-ranger #header #header__sub-nav ul li a#cart.not-empty:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .voodoo-ranger #header #header__logo { position: static; transform: none; } .voodoo-ranger #header #header__logo img { width: 60%; height: auto; border-radius: 0px; } .voodoo-ranger #header.scrolled #header__logo { transform: none; } .voodoo-ranger #header #header__flyouts-mobile-wrapper { background-color: #231F20; } .voodoo-ranger #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link { background-color: #231F20; } .voodoo-ranger #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link.expanded { background-color: #FEFEFE; } .voodoo-ranger #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link.expanded .accordion-btn h3 { color: #231F20; } .voodoo-ranger #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-btn { border-bottom-color: #231F20; color: #FEFEFE; } .voodoo-ranger #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-btn h3 { color: #FEFEFE; font-size: calc(45px + (70 - 45) * ((100vw - 340px) / (1440 - 340))); line-height: 1em; } .voodoo-ranger #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-btn h3:after { color: #FEFEFE; } .voodoo-ranger #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-link-btn { border-bottom: 2px solid #231F20; } .voodoo-ranger #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-link-btn h3 { color: #FEFEFE; border-bottom: 2px solid #F1C218; font-size: calc(45px + (70 - 45) * ((100vw - 340px) / (1440 - 340))); line-height: 1em; } .voodoo-ranger #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper { background: #FEFEFE; } .voodoo-ranger #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .flyout-link { color: #231F20; border-bottom: 2px solid rgba(241, 194, 24, 0.4); } .voodoo-ranger #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner p.a2 { color: #F1C218; } .voodoo-ranger #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .accordion-cta .subtitle { color: #FEFEFE; } .voodoo-ranger #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .accordion-cta .secondary { color: #FEFEFE; } #header:after { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #1B2533; transition: background-color 299.7ms ease; z-index: -5; } #header.mobile-active #header__main-nav #hamburger { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; transform: rotate(180deg) scale(0.9); } #header.mobile-active #header__logo { opacity: 0; transform: scale(0.8); pointer-events: none; } #header.mobile-active #header__flyouts-mobile-wrapper { transform: translate3d(0, 0%, 0); visibility: visible; opacity: 1; transition: transform 666ms cubic-bezier(0.666, 0, 0.333, 1), opacity 333ms ease, visibility 0ms linear 0ms; } #header.mobile-active #header__flyouts-mobile-wrapper .accordion-group { width: 100%; } #header.mobile-active #header__flyouts-mobile-wrapper .accordion-group li.accordion-link { opacity: 1; } #header.mobile-active #header__flyouts-mobile-wrapper .accordion-group li.accordion-link:nth-of-type(6) { transition-delay: 933ms; } #header.mobile-active #header__flyouts-mobile-wrapper .accordion-group li.accordion-link:nth-of-type(5) { transition-delay: 833ms; } #header.mobile-active #header__flyouts-mobile-wrapper .accordion-group li.accordion-link:nth-of-type(4) { transition-delay: 733ms; } #header.mobile-active #header__flyouts-mobile-wrapper .accordion-group li.accordion-link:nth-of-type(3) { transition-delay: 633ms; } #header.mobile-active #header__flyouts-mobile-wrapper .accordion-group li.accordion-link:nth-of-type(2) { transition-delay: 533ms; } #header.mobile-active #header__sub-nav ul li[aria-current="page"]:after { opacity: 0; transition-delay: 0ms; } #header.has-disclaimer { margin-top: 35px; } #header.has-disclaimer #header__flyouts-mobile-wrapper { top: 85px; height: calc(100vh - 50px - 35px); } #header.has-disclaimer + .inner { padding-top: 85px; } #header.has-disclaimer + .inner .full-window-height { height: calc(100vh - 50px - 35px); } #header.has-disclaimer + .inner .full-window-max-height { max-height: calc(100vh - 50px - 35px); } #header + .inner { padding-top: 50px; } #header + .inner .full-window-height { height: calc(100vh - 50px); } #header + .inner .full-window-max-height { max-height: calc(100vh - 50px); } #header.scrolled #header__logo { transform: translate(0, -16px) scale(0.8); } #header #header__flyouts-mobile-wrapper { position: fixed; top: 50px; left: 0; width: 100%; height: calc(100vh - 50px); overflow-y: auto; overflow-x: hidden; background: #1B2533; transition: transform 666ms cubic-bezier(0.666, 0, 0.333, 1) 50ms, opacity 333ms ease 333ms, visibility 0ms linear 666ms; transform: translate3d(0, -100%, 0); backface-visibility: hidden; visibility: hidden; opacity: 0; z-index: -5; } #header #header__flyouts-mobile-wrapper .accordion-group { margin-bottom: 48px; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link { box-sizing: border-box; opacity: 0; transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1); } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link:nth-of-type(6) { transition-delay: 300ms; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link:nth-of-type(5) { transition-delay: 250ms; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link:nth-of-type(4) { transition-delay: 200ms; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link:nth-of-type(3) { transition-delay: 150ms; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link:nth-of-type(2) { transition-delay: 100ms; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link.expanded { background-color: #EBE9E2; border-color: transparent; transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1); } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link.expanded .accordion-btn h3 { color: #1B2533; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link.expanded .accordion-btn h3:after { opacity: 0; transform: rotate(90deg); } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-btn, #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-link-btn { width: 100%; text-align: left; position: relative; display: inline-block; cursor: pointer; user-select: none; color: #FFFAFB; outline: none; border: none; background-color: transparent; transition: color 499.5ms cubic-bezier(0.666, 0, 0.333, 1); border-bottom: 2px solid #1B2533; padding: 20px 7.14286%; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-btn h3:after { display: inline; content: " +"; color: #D74229; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-link-btn h3 { display: inline-block; padding-bottom: 10px; margin-bottom: -10px; border-bottom: 2px solid #D74229; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper { height: 0px; overflow: hidden; transition: height 499.5ms cubic-bezier(0.666, 0, 0.333, 1); padding: 0 7.14286%; background: #EBE9E2; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner { padding-top: 8.33333%; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .flyout-link { color: #D74229; display: block; padding: 10px 0; border-bottom: 2px solid rgba(160, 123, 81, 0.3); } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .flyout-link:last-of-type { border-bottom: none; padding-bottom: 10%; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner p.a2 { margin-bottom: 12px; color: #A07B51; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner p.a2:last-of-type { margin-top: 32px; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .a3 { padding: 6px 0; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .accordion-cta { display: block; margin-left: -8.33333%; width: 116.66667%; padding: 14.28571% 7.14286%; height: 100%; min-height: 30vh; position: relative; overflow: hidden; z-index: 0; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .accordion-cta:hover { text-decoration: none; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .accordion-cta .subtitle { color: #FFFAFB; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .accordion-cta .title { white-space: pre-line; margin-bottom: 12px; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .accordion-cta .secondary { color: #FFFAFB; } #header #header__flyouts-mobile-wrapper .accordion-group li.accordion-link .accordion-wrapper .accordion-inner .accordion-cta img { transition: transform 666ms ease; margin-bottom: -1px; z-index: -5; } #header #header__flyouts-mobile-wrapper .footer.theme-shortened { padding: 0 7.14286%; margin-bottom: 14.28571%; } #header #header__flyouts-desktop-wrapper { display: none; } #header #header__main-nav, #header #header__sub-nav { height: 100%; } #header #header__main-nav ul, #header #header__sub-nav ul { display: flex; align-items: center; height: 100%; } #header #header__main-nav ul li, #header #header__sub-nav ul li { height: 100%; display: flex; position: relative; align-items: center; } #header #header__main-nav ul li[aria-current="page"]:after, #header #header__sub-nav ul li[aria-current="page"]:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: #D74229; pointer-events: none; transition: opacity 333ms ease 333ms; } #header #header__main-nav ul li a, #header #header__sub-nav ul li a { cursor: pointer; } #header #header__main-nav ul li a:hover, #header #header__sub-nav ul li a:hover { text-decoration: none; } #header #header__main-nav { display: flex; align-items: center; } #header #header__main-nav #hamburger { width: 18px; height: 18px; background: transparent; border: none; outline: none; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; transition: transform 333ms cubic-bezier(0.666, 0, 0.333, 1), background-image 111ms ease 111ms; } #header #header__main-nav ul { display: none; } #header #header__main-nav ul li { flex-shrink: 0; } #header #header__main-nav ul li a { height: 80%; display: inline-flex; align-items: center; } #header #header__main-nav ul li a:not(.link):after { content: "+"; display: inline-block; margin-left: 4px; color: #D74229; transform-origin: 45% 55%; transition: color 299.7ms ease, transform 299.7ms ease; } #header #header__main-nav ul li a.active:after { color: #D74229; transform: rotate(45deg); } #header #header__logo { display: block; position: absolute; transition: transform 333ms ease, opacity 333ms ease; left: 50%; bottom: 0%; width: 0; height: 0; z-index: 25; } #header #header__logo img { transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; } #header #header__sub-nav .disclaimer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; height: 35px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-family: "CardinalSemiCondensed", "Helvetica Neue", Helvetica, sans-serif; color: #1B2533; white-space: pre; background: #EBE9E2; top: -35px; left: 0; } #header #header__sub-nav ul { display: flex; align-items: center; } #header #header__sub-nav ul li { margin-right: 10px; padding: 5px; } #header #header__sub-nav ul li:last-of-type { margin-right: -5px; } #header #header__sub-nav ul li a { width: 20px; height: 20px; } #header #header__sub-nav ul li a:after { content: ""; display: block; width: 100%; height: 100%; transition: background-image 299.7ms ease; } #header #header__sub-nav ul li a#beer:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #header #header__sub-nav ul li a#account:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #header #header__sub-nav ul li a#cart { position: relative; transition: transform 266.4ms ease-out; } #header #header__sub-nav ul li a#cart.not-empty { transform: translate(0, 6px); } #header #header__sub-nav ul li a#cart.not-empty .cart-count { opacity: 1; } #header #header__sub-nav ul li a#cart .cart-count { top: -9px; left: 50%; transform: translate(-50%, -50%); display: block; position: absolute; opacity: 0; transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1); } #header #header__sub-nav ul li a#cart:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } @media all and (min-width: 768px) { #header { height: 80px; padding: 0 3.57143%; } #header:before { content: ""; position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; background-color: #161616; opacity: 0; transition: opacity 299.7ms ease; z-index: -5; pointer-events: none; } body.fat-tire #header #header__sub-nav .disclaimer a { color: #fff; } body.fat-tire #header.desktop-active { color: #fff; } body.fat-tire #header.desktop-active:after { background: #1B2533; } body.fat-tire #header.desktop-active #header__main-nav ul li a:after { color: #fff; } body.fat-tire #header.desktop-active #header__main-nav ul li a.active:after { color: #857550; } body.fat-tire #header.desktop-active #header__sub-nav .disclaimer { color: #fff; } body.fat-tire #header.desktop-active #header__sub-nav .disclaimer a { color: #857550; } body.fat-tire #header.desktop-active #header__sub-nav ul li a#beer:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } body.fat-tire #header.desktop-active #header__sub-nav ul li a#account:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } body.fat-tire #header.desktop-active #header__sub-nav ul li a#cart:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } body.fat-tire #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li a h6:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; background-size: contain; } body.fat-tire #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links { background: #fff; } body.fat-tire #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links li a h6:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; background-size: contain; } body.fat-tire #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links { background: #fff; } body.fat-tire #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links li a h6:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; background-size: contain; } body.fat-tire #header #header__flyouts-desktop-wrapper .desktop-flyout { border-top: 1px solid #fff; background-color: #fff; } body.fat-tire #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-cta { color: #fff; } body.fat-tire #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-cta .title { color: #fff; } body.fat-tire #header #header__main-nav ul li a:not(.link):after { color: #fff; } body.fat-tire #header #header__main-nav ul li.active:after { background: #857550; } body.voodoo-ranger #header { justify-content: unset; width: 100%; display: inline; } body.voodoo-ranger #header.has-disclaimer + .inner .full-window-height { height: calc(100vh + 8vw); } body.voodoo-ranger #header.has-disclaimer + .inner .full-window-max-height { max-height: calc(100vh + 8vw); } body.voodoo-ranger #header + .inner .full-window-height { height: calc(100vh + 8vw); } body.voodoo-ranger #header + .inner .full-window-max-height { max-height: calc(100vh + 8vw); } body.voodoo-ranger #header #header__logo img { width: 200px; height: 200px; } body.voodoo-ranger #header #header__sub-nav { display: none; } body.voodoo-ranger #header #header__main-nav ul { width: 100%; } body.voodoo-ranger #header #header__main-nav ul li a:not(.link):after { color: #FEFEFE; } body.voodoo-ranger #header #header__main-nav ul li.main-nav-link-btn:last-of-type { padding: 15px 0; margin-left: auto; position: relative; } body.voodoo-ranger #header #header__main-nav ul li.main-nav-link-btn:last-of-type a { height: auto; margin: auto; padding: 10px 25px 7px; border: 2px solid #F1C218; line-height: 1em; } body.voodoo-ranger #header.desktop-active { color: #FEFEFE; } body.voodoo-ranger #header.desktop-active:after { background: #231F20; } body.voodoo-ranger #header.desktop-active #header__main-nav ul li a:not(.link):after { color: #FEFEFE; } body.voodoo-ranger #header.desktop-active #header__main-nav ul li a.active:after { color: #F1C218; } body.voodoo-ranger #header.desktop-active #header__sub-nav ul li a#beer:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } body.voodoo-ranger #header.desktop-active #header__sub-nav ul li a#account:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } body.voodoo-ranger #header.desktop-active #header__sub-nav ul li a#cart:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li { background-color: #FEFEFE; } body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li a h6 { color: #231F20; } body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li a h6:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; background-size: contain; } body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links { background: #FEFEFE; } body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-group p { color: #231F20; } body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-group p.a2.gold.group-title { color: #231F20; font-family: "ccbiffbamboom", sans-serif; } body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-group li a { border-bottom: 2px solid rgba(241, 194, 24, 0.4); } body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-group li a h6 { color: #231F20; } body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-group li a h6:after, body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-group li a p:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; background-size: contain; } body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links { background: #FEFEFE; } body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links li a { border-bottom: 2px solid rgba(241, 194, 24, 0.4); } body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links li a h6 { color: #231F20; } body.voodoo-ranger #header.desktop-active #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links li a h6:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; background-size: contain; } body.voodoo-ranger #header #header__flyouts-desktop-wrapper .desktop-flyout { border-top: 1px solid #FEFEFE; background-color: #FEFEFE; } body.voodoo-ranger #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-cta { color: #FEFEFE; } body.voodoo-ranger #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-cta .title { color: #FEFEFE; } body.voodoo-ranger #header #header__main-nav ul li.active:after { background: #F1C218; } #header.desktop-active { color: #1B2533; } #header.desktop-active:before { opacity: 0.65; } #header.desktop-active:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #EBE9E2; } #header.desktop-active #header__main-nav ul li a:after { color: #1B2533; } #header.desktop-active #header__main-nav ul li a.active:after { color: #D74229; } #header.desktop-active #header__logo { opacity: 1; } #header.desktop-active #header__sub-nav .disclaimer { color: #1B2533; } #header.desktop-active #header__sub-nav ul li a#beer:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #header.desktop-active #header__sub-nav ul li a#account:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #header.desktop-active #header__sub-nav ul li a#cart:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #header.has-disclaimer { margin-top: 0px; } #header.has-disclaimer + .inner { padding-top: 80px; } #header.has-disclaimer + .inner .full-window-height, #header.has-disclaimer + .inner .full-window-height-desktop-only { height: calc(100vh - 80px); } #header + .inner { padding-top: 80px; } #header + .inner .full-window-height, #header + .inner .full-window-height-desktop-only { height: calc(100vh - 80px); } #header.scrolled #header__logo { transform: translate(0, -27px) scale(0.8); } #header #header__main-nav { margin-left: -15px; overflow: hidden; } #header #header__main-nav #hamburger { display: none; } #header #header__main-nav ul { display: flex; position: relative; } #header #header__main-nav ul li { padding: 15px; } #header #header__main-nav ul li:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: #D74229; opacity: 0; pointer-events: none; } #header #header__main-nav ul li.active:after { opacity: 1; display: block; } #header #header__logo img { width: 85px; height: 85px; } #header #header__sub-nav { width: 50%; display: flex; align-items: center; justify-content: flex-end; } #header #header__sub-nav .disclaimer { position: unset; background: none; width: auto; height: auto; display: inline; font-size: 16px; letter-spacing: 0.25px; color: #FFFAFB; flex: 1; padding-left: 50px; margin-right: 6px; text-align: right; transition: color 299.7ms ease; } #header #header__sub-nav ul li { padding: 6px; margin: 6px; } #header #header__sub-nav ul li a { width: 25px; height: 25px; } #header #header__flyouts-mobile-wrapper { display: none; } #header #header__flyouts-desktop-wrapper { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -5; } #header #header__flyouts-desktop-wrapper .desktop-flyout { display: flex; align-items: stretch; position: absolute; top: 100%; left: 0px; width: 100%; background-color: #eee; border-top: 1px solid #FFFAFB; opacity: 0; visibility: hidden; transition: opacity 299.7ms ease, visibility 0ms linear 249.75ms; color: #1B2533; overflow: hidden; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); } #header #header__flyouts-desktop-wrapper .desktop-flyout.active { opacity: 1; visibility: visible; transition: opacity 299.7ms ease, visibility 0ms linear 0ms; z-index: 10; } #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-links { flex: 1 50%; overflow: hidden; } #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-links > li a { padding-top: 48px; } #header #header__flyouts-desktop-wrapper .desktop-flyout .link-image { display: none; pointer-events: none; } #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-cta { display: block; flex: 1 50%; position: relative; overflow: hidden; color: #EBE9E2; margin-left: -0.5px; z-index: 0; } #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-cta:before { display: block; content: ""; width: 100%; padding-top: 66.66667%; } #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-cta .flyout-cta__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 7.14286%; padding-top: 48px; } #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-cta:hover { text-decoration: none; } #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-cta .title { white-space: pre-line; margin-bottom: 12px; } #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-cta img { transition: transform 666ms ease; z-index: -5; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links { display: flex; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li { height: 100%; flex: 1; position: relative; overflow: hidden; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li a { display: inline-flex; width: 100%; height: 100%; color: #1B2533; white-space: pre-line; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li a h6 { padding-left: 24px; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li a h6:after { content: ""; display: inline-block; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; width: 0.5em; height: 0.7em; margin-left: 0.5em; background-position: center; background-size: contain; opacity: 0; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li a .link-image { display: none; position: absolute; width: 100%; height: 0; bottom: 0; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li a .link-image img { width: 100%; height: auto; object-fit: unset; transform: translate(-50%, -100%); } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:nth-child(0) { background-color: #dfd3a8; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:nth-child(1) { background-color: rgba(223, 211, 168, 0.8); } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:nth-child(2) { background-color: rgba(223, 211, 168, 0.6); } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:nth-child(3) { background-color: rgba(223, 211, 168, 0.4); } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:nth-child(4) { background-color: rgba(223, 211, 168, 0.2); } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:nth-child(5) { background-color: rgba(223, 211, 168, 0); } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links { width: 50%; display: flex; background: rgba(223, 211, 168, 0.5); position: relative; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-image { display: none; position: absolute; width: 100%; height: 0; bottom: 0; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-image img { width: 100%; height: auto; object-fit: unset; display: block; transform: translate(-50%, -100%); } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-group { width: 50%; padding: 24px; padding-top: 48px; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-group:last-of-type { padding-right: 24px; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-group .group-title { margin-bottom: 12px; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-group li a { display: block; padding: 12px 0; color: #1B2533; border-bottom: 2px solid rgba(160, 120, 70, 0.4); } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-group li a:hover { text-decoration: none; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links { flex-direction: column; background: rgba(223, 211, 168, 0.5); position: relative; padding: 3.57143%; padding-left: 24px; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links .link-image { display: none; position: absolute; width: 100%; height: 0; top: 0; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links .link-image img { width: 100%; height: auto; object-fit: unset; transform: unset; top: 0; left: 0; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links li { width: 75%; padding-top: 0; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links li a { display: block; padding: 12px 0; color: #1B2533; border-bottom: 2px solid rgba(160, 120, 70, 0.4); } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links li a:hover { text-decoration: none; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links li:first-of-type a { padding-top: 0; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links li a h6:after, #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links li a .a2:after { content: ""; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; width: 0.5em; height: 0.9em; margin-left: 0.5em; background-position: center; background-size: contain; float: right; opacity: 0; } } @media all and (min-width: 1280px) { #header #header__flyouts-desktop-wrapper .desktop-flyout .link-image { display: block; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:first-of-type:before { content: ""; position: absolute; bottom: 0%; left: 0px; width: 100%; height: 0; padding-bottom: 10%; clip-path: polygon(0% 100%, 100% 100%, 100% 0%); -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 0%); background-color: #1B2533; pointer-events: none; transform: translate(0px, 1px); } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:first-of-type:before { right: 0%; left: unset; width: 300%; padding-bottom: 60%; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:nth-of-type(2):before { content: ""; position: absolute; bottom: 0%; left: 0px; width: 100%; height: 0; clip-path: polygon(0% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%); background-color: #1B2533; padding-bottom: 10%; pointer-events: none; transform: translate(0px, 1px); } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:nth-of-type(2):before { width: 200%; padding-bottom: 20%; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:nth-of-type(3):before { content: ""; position: absolute; bottom: 0px; left: 0px; width: 0px; height: 0px; display: block; width: 20vw; height: 20vw; border-radius: 50%; background: #1B2533; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:nth-of-type(3):before { left: unset; right: -25%; bottom: -25%; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li a .link-image { display: block; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links:before { content: ""; position: absolute; bottom: 0; left: 0px; width: 100%; height: 0; clip-path: polygon(0% 0%, 100% 100%, 0% 100%); -webkit-clip-path: polygon(0% 0%, 100% 100%, 0% 100%); background-color: #1B2533; padding-bottom: 10%; pointer-events: none; transform: translate(0px, 1px); } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links:before { width: 100%; padding-bottom: 20%; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-image { display: block; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links li a h6:after, #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links li a .a2:after { content: ""; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; width: 0.5em; height: 0.9em; margin-left: 0.5em; background-position: center; background-size: contain; float: right; opacity: 0; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links:before { content: ""; position: absolute; bottom: 0px; left: 0px; width: 0px; height: 0px; display: block; width: 30vw; height: 30vw; border-radius: 50%; background: #1B2533; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links:before { right: 0; top: 0; left: unset; transform: translate(25%, -25%); } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links .link-image { display: block; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links li { width: 50%; } } @media all and (min-width: 1280px) { body.voodoo-ranger #header #header__logo img { width: 277px; height: 46px; } body.voodoo-ranger #header #header__sub-nav .disclaimer { display: none; } #header #header__logo img { width: 100px; height: 100px; } #header #header__main-nav { margin-left: -20px; } #header #header__main-nav ul li { padding: 20px; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links:before, #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links:before, #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links:before { display: none; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:before, #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links li:before, #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links li:before { display: none; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-std .flyout-links li:nth-of-type(3):before, #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links li:nth-of-type(3):before, #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links li:nth-of-type(3):before { display: none; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-multi .flyout-links .link-group { padding-left: 32px; padding-right: 32px; } #header #header__flyouts-desktop-wrapper .desktop-flyout.theme-combo .flyout-links { padding-left: 32px; } #header #header__sub-nav .disclaimer { text-align: center; } #header #header__sub-nav ul li { margin: 10px; padding: 10px; } } @media (hover: hover) { #header #header__sub-nav ul li a#cart.not-empty:hover { transform: scale(1.048) translate(0, 6px); } #header #header__main-nav ul li a.link:hover { color: #D74229; } .fat-tire #header #header__main-nav ul li a.link:hover { color: #857550; } .fat-tire #header #header__flyouts-desktop-wrapper .theme-std .flyout-links li:hover a { color: #BC2F2B; } .fat-tire #header #header__flyouts-desktop-wrapper .theme-multi .flyout-links li a:hover h6, .fat-tire #header #header__flyouts-desktop-wrapper .theme-multi .flyout-links li a:hover .a2, .fat-tire #header #header__flyouts-desktop-wrapper .theme-combo .flyout-links li a:hover h6, .fat-tire #header #header__flyouts-desktop-wrapper .theme-combo .flyout-links li a:hover .a2 { color: #BC2F2B; } .voodoo-ranger #header #header__main-nav ul li.main-nav-link-btn:hover a { color: #F1C218; } .voodoo-ranger #header #header__flyouts-desktop-wrapper .theme-std .flyout-links li:hover a { color: #F1C218; } .voodoo-ranger #header #header__flyouts-desktop-wrapper .theme-multi .flyout-links li a:hover h6, .voodoo-ranger #header #header__flyouts-desktop-wrapper .theme-multi .flyout-links li a:hover .a2, .voodoo-ranger #header #header__flyouts-desktop-wrapper .theme-combo .flyout-links li a:hover h6, .voodoo-ranger #header #header__flyouts-desktop-wrapper .theme-combo .flyout-links li a:hover .a2 { color: #F1C218; } #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-cta { text-decoration: none; background: #000; } #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-cta img { transition: opacity 249.75ms cubic-bezier(0, 0, 0.666, 1), transform 249.75ms cubic-bezier(0, 0, 0.666, 1); } #header #header__flyouts-desktop-wrapper .desktop-flyout .flyout-cta:hover img { opacity: 0.7; transform: translate(-50%, -50%) scale(1.01); } #header #header__flyouts-desktop-wrapper .theme-std .flyout-links li:hover a { cursor: pointer; text-decoration: none; color: #D74229; } #header #header__flyouts-desktop-wrapper .theme-std .flyout-links li:hover a h6:after { opacity: 1; } #header #header__flyouts-desktop-wrapper .theme-multi .flyout-links li a:hover h6, #header #header__flyouts-desktop-wrapper .theme-multi .flyout-links li a:hover .a2, #header #header__flyouts-desktop-wrapper .theme-combo .flyout-links li a:hover h6, #header #header__flyouts-desktop-wrapper .theme-combo .flyout-links li a:hover .a2 { color: #D74229; } #header #header__flyouts-desktop-wrapper .theme-multi .flyout-links li a:hover h6:after, #header #header__flyouts-desktop-wrapper .theme-multi .flyout-links li a:hover .a2:after, #header #header__flyouts-desktop-wrapper .theme-combo .flyout-links li a:hover h6:after, #header #header__flyouts-desktop-wrapper .theme-combo .flyout-links li a:hover .a2:after { opacity: 1; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ /********************************************** Form Base **********************************************/ form { text-transform: unset; } input.honeypot { position: absolute; top: -9999px; left: -9999px; } input, textarea, select { outline: none; border: none; background: none; text-transform: none; padding: 0.5em; border: 2px solid #000; border-radius: 10px; width: 100%; z-index: 1; } /********************************************** Fieldset Base **********************************************/ .fieldset { display: flex; flex-wrap: wrap; align-items: center; position: relative; margin: 0.5em 0; margin-bottom: 48px; } .fieldset.show-alert .alert { opacity: 1; visibility: visible; } .fieldset .alert { text-align: left; padding: 24px; background: #1B2533; padding-left: 60px; color: white; position: absolute; width: 100%; top: 100%; margin-top: 0.5em; opacity: 0; visibility: hidden; } .fieldset .alert.success .alert__title::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .fieldset .alert::before { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); border-bottom: 1em solid #1B2533; border-left: 1em solid transparent; border-right: 1em solid transparent; } .fieldset .alert .alert__title { margin-bottom: 6px; } .fieldset .alert .alert__title::before { content: ""; position: absolute; top: 24px; left: 24px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; width: 2em; height: 2em; display: inline-block; } .fieldset.bordered { border: 3px solid #D74229; border-radius: 8px; } .fieldset.bordered input { border: none; flex: 1; padding-left: 0.6em; padding-right: 0.5em; border-radius: 8px; transition: background-color 166.5ms ease; width: 100%; } .fieldset.bordered label { width: unset; margin-bottom: 0; padding: 0.4em 0.6em; pointer-events: none; text-transform: none; color: #1B2533; opacity: 1; } label { position: relative; padding: 0.3em 0em; margin-bottom: 2px; bottom: 0; left: 0; width: 100%; color: #747479; } label.p { font-weight: 500; } label.dark { color: #1B2533; } label.bold { font-weight: bold; } label.a4 { text-transform: none; } label.form-control-required-label:after, label.required:after { content: "*"; } /********************************************** Hidden Input **********************************************/ input[type="hidden"] { visibility: hidden; } /********************************************** Text Input **********************************************/ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], select, textarea { text-transform: none; margin: 1px; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus, select:focus, textarea:focus { border-width: 3px; margin: 0px; background-color: #f5f0cf; } input[type="text"].error, input[type="text"].ng-invalid, input[type="text"].invalid, input[type="password"].error, input[type="password"].ng-invalid, input[type="password"].invalid, input[type="email"].error, input[type="email"].ng-invalid, input[type="email"].invalid, input[type="number"].error, input[type="number"].ng-invalid, input[type="number"].invalid, input[type="tel"].error, input[type="tel"].ng-invalid, input[type="tel"].invalid, input[type="url"].error, input[type="url"].ng-invalid, input[type="url"].invalid, select.error, select.ng-invalid, select.invalid, textarea.error, textarea.ng-invalid, textarea.invalid { background: rgba(215, 66, 41, 0.2); border-color: #D74229; } /********************************************** Textarea **********************************************/ textarea { border-radius: 7px; min-height: 150px; resize: none; } textarea.a4 { text-transform: none; } /********************************************** Radio **********************************************/ input[type="radio"] + label { position: unset; width: auto; display: block; margin-right: 12px; } /********************************************** Select **********************************************/ select { width: 100%; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; position: relative; cursor: pointer; } select option[disabled] { opacity: 0.6; } /********************************************** Checkbox Input / Radio **********************************************/ input[type="checkbox"], input[type="radio"] { border-radius: 50%; width: 18px; height: 18px; margin: 1px; margin-top: 2px; cursor: pointer; margin-bottom: auto; } input[type="checkbox"].error:before, input[type="checkbox"].ng-invalid:before, input[type="radio"].error:before, input[type="radio"].ng-invalid:before { border-color: #D74229; } input[type="checkbox"].error + label, input[type="checkbox"].error + input + label, input[type="checkbox"].ng-invalid + label, input[type="checkbox"].ng-invalid + input + label, input[type="radio"].error + label, input[type="radio"].error + input + label, input[type="radio"].ng-invalid + label, input[type="radio"].ng-invalid + input + label { color: #D74229; } input[type="checkbox"]:before, input[type="checkbox"]:after, input[type="radio"]:before, input[type="radio"]:after { content: ''; position: absolute; top: 2px; left: 0; width: 20px; height: 20px; } input[type="checkbox"]:before, input[type="radio"]:before { background: #CBCCC8; border: 2px solid #1B2533; border-radius: 5px; } input[type="checkbox"]:after, input[type="radio"]:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; transform: translate(0, 0) scale(0); transition: transform 111ms cubic-bezier(0.666, 0, 0.333, 1); } input[type="checkbox"]:checked:after, input[type="radio"]:checked:after { transform: translate(3px, -1px) scale(1.2); } input[type="checkbox"] + label, input[type="checkbox"] + input + label, input[type="radio"] + label, input[type="radio"] + input + label { flex: 1; width: auto; position: relative; padding: 0; margin: 0; margin-left: 12px; cursor: pointer; font-family: "CardinalWideBold", "Helvetica Neue", Helvetica, sans-serif; transition: color 166.5ms ease; border-bottom: 2px solid transparent; text-transform: none; font-weight: normal; } input[type="checkbox"] + label, input[type="checkbox"] + input + label { font-family: "CardinalSemiCondensed", "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #000; font-size: 18px; } @media all and (min-width: 1440px) { input[type="checkbox"] + label, input[type="checkbox"] + input + label { font-size: 21px; } } /********************************************** Radio Input **********************************************/ input[type="radio"]:before { border-radius: 50%; } input[type="radio"]:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } /********************************************** File Input **********************************************/ input[type="file"] { text-transform: unset; letter-spacing: 0.05em; cursor: pointer; } input[type="file"].error, input[type="file"].ng-invalid { background: rgba(215, 66, 41, 0.2); } input[type="file"] + label { order: -1; position: unset; width: auto; display: block; margin-bottom: 12px; } /********************************************** Range Input **********************************************/ input[type=range] { -webkit-appearance: none; margin: 12px 0; width: 100%; border: none; } input[type=range] + label { order: -1; position: unset; width: auto; display: block; } input[type=range].error, input[type=range].ng-invalid { background: rgba(215, 66, 41, 0.2); border-bottom: 2px solid rgba(215, 66, 41, 0.2); } input[type=range]:focus { outline: none; } input[type=range]:focus::-webkit-slider-runnable-track { background: #D74229; } input[type=range]:focus::-ms-fill-lower { background: #D74229; } input[type=range]:focus::-ms-fill-upper { background: #D74229; } input[type=range]:focus::-webkit-slider-thumb { border-color: #1B2533; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8.4px; cursor: pointer; background: #D74229; } input[type=range]::-webkit-slider-thumb { border: 2px solid #1B2533; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; -webkit-appearance: none; margin-top: -14px; } input[type=range]::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; background: #D74229; } input[type=range]::-moz-range-thumb { border: 2px solid #1B2533; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 8.4px; cursor: pointer; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent; } input[type=range]::-ms-fill-lower { background: #D74229; } input[type=range]::-ms-fill-upper { background: #D74229; } input[type=range]::-ms-thumb { border: 2px solid #D74229; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; } /********************************************** Counter Input **********************************************/ .quantity_decrease, .quantity_increase { display: block; position: absolute; top: 0px; width: 44px; height: 44px; } .quantity_decrease:before, .quantity_increase:before { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 4px; background-color: #00AABE; transform: translate(-50%, -50%); } .quantity_increase:after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 18px; background-color: #00AABE; transform: translate(-50%, -50%); } /********************************************** Search **********************************************/ .fieldset.search { display: flex; align-items: stretch; width: 100%; display: flex; margin: 0; } .fieldset.search input[type="text"], .fieldset.search input[type="password"] { width: 100%; position: relative; padding: 0 1em; height: 3em; line-height: 3em; background: #FFFAFB; border-radius: 10px 0 0 10px; border: none; } .fieldset.search input[type="text"].active + button, .fieldset.search input[type="password"].active + button { background: #1B2533; } .fieldset.search input[type="text"].active + button:after, .fieldset.search input[type="password"].active + button:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } .fieldset.search input[type="text"] + button, .fieldset.search input[type="password"] + button { display: block; border: none; outline: none; width: 4em; background: #FFFAFB; border-radius: 0 10px 10px 0; transition: background-color 166.5ms ease; position: relative; } .fieldset.search input[type="text"] + button:after, .fieldset.search input[type="password"] + button:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center center; display: block; height: 50%; width: 2em; background-size: contain !important; background-position: center; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; transition: background-image 166.5ms ease; } .fieldset.search input[type="text"]::placeholder, .fieldset.search input[type="password"]::placeholder { font-family: "SchoolBookItalic", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } .fieldset.search button { cursor: pointer; } /********************************************** Alerts **********************************************/ .show-alert .alert { display: block; opacity: 1; visibility: visible; } .alert { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); background: #1B2533; padding: 24px; padding-left: 60px; margin: 24px 0; color: white; width: 300px; margin-top: 0.5em; opacity: 0; display: none; visibility: hidden; cursor: help; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); text-transform: none; z-index: 10; } .alert.success .alert__title::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .alert.success.theme-white .alert__title::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .alert.theme-banner { width: 100%; position: relative; left: 0; box-shadow: none; text-align: left; transform: none; } .alert.theme-banner:before { display: none; } .alert.theme-red { color: #FFFAFB; background: #D74229; } .alert.theme-red .alert__title { color: #FFFAFB; } .alert.theme-red::before { border-bottom-color: #D74229; } .alert.theme-turquoise { color: #FFFAFB; background: #00AABE; } .alert.theme-turquoise .alert__title { color: #FFFAFB; } .alert.theme-turquoise::before { border-bottom-color: #D74229; } .alert.theme-white { color: #1B2533; background: #FFFAFB; } .alert.theme-white .alert__title { color: #1B2533; } .alert::before { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); border-bottom: 20px solid #1B2533; border-left: 20px solid transparent; border-right: 20px solid transparent; } .alert .alert__title { margin-bottom: 6px; } .alert .alert__title::before { content: ""; position: absolute; top: 24px; left: 24px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; width: 2em; height: 2em; display: inline-block; } /********************************************** Submit **********************************************/ input[type="submit"], button[type="submit"] { border-color: #D74229; background-color: #D74229; } /********************************************** Overwrite Autofill styles for some browsers **********************************************/ @-webkit-keyframes autofill { 0%, 100% { color: #1B2533; background: transparent; } } .age-gate-wrapper { z-index: 30; position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100vh; opacity: 0; visibility: hidden; pointer-events: none; } body.fruit-smash .age-gate-wrapper .age-gate-inner { background-color: #D7EFE4; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-logo { display: none; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-subtitle { color: #1E1E1E; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-content h3 { color: #1E1E1E; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-content div.small { color: #1E1E1E; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-sun { display: none; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { left: 0; } body.fat-tire .age-gate-wrapper .age-gate-inner { min-height: 650px; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content { margin-bottom: 24px; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-logo { display: none; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-subtitle { color: #857550; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content h3 { color: #fff; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content div.small { color: #fff; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas .pill-btn { border: 3px solid #857550; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas .pill-btn.theme-red.filled { color: #1B2533; background: #857550; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas .pill-btn.theme-red.filled svg { fill: #1B2533; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-sun { display: none; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { width: 92.85714%; left: 50%; transform: translateX(-50%); bottom: 3.57143%; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner { background-color: #6D2060; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content { position: absolute; z-index: 1; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-logo { display: none; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-subtitle { color: #FEFEFE; margin-bottom: 12px; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content h3 { color: #FEFEFE; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content div.small { color: #FEFEFE; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas { flex-direction: column; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas #yes .pill-btn, body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas #no .pill-btn { margin: 0; transform: rotate(-2deg); width: 80%; max-width: unset; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas #yes { margin-bottom: 24px; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-graphic { padding: 0; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-sun { display: none; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { left: 0; top: 0; bottom: unset; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image:before { display: block; content: ""; width: 100%; padding-top: 216.667%; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image img, body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image picture { object-fit: cover; object-position: top center; } .age-gate-wrapper.visible { pointer-events: auto; opacity: 1; visibility: visible; } .age-gate-wrapper.visible.hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 666ms ease, visibility 0ms linear 666ms; } .age-gate-wrapper .age-gate-inner { height: 100vh; position: relative; background-color: #1B2533; padding: 10.71429% 7.14286%; } .age-gate-wrapper .age-gate-inner .age-gate-content { text-align: center; } .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-logo { position: relative; width: 30%; margin: 0 auto 12px; } .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-logo:before { display: block; content: ""; width: 100%; padding-top: 100%; } .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-subtitle { color: #D74229; } .age-gate-wrapper .age-gate-inner .age-gate-content h3 { color: #FFFAFB; margin-bottom: 12px; } .age-gate-wrapper .age-gate-inner .age-gate-content div.small { color: #EBE9E2; margin-bottom: 32px; } .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas { display: flex; margin: 0 auto; justify-content: center; } .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas #yes .pill-btn { min-width: 100px; max-width: 125px; margin-right: 10px; z-index: 10; } .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas #no .pill-btn { min-width: 100px; max-width: 125px; margin-right: 0; z-index: 10; } .age-gate-wrapper .age-gate-graphic .age-gate-image { position: absolute; z-index: 0; bottom: 0; width: 100%; } .age-gate-wrapper .age-gate-graphic .age-gate-image:before { display: block; content: ""; width: 100%; padding-top: 100%; } .age-gate-wrapper .age-gate-graphic .age-gate-image img, .age-gate-wrapper .age-gate-graphic .age-gate-image picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media all and (min-width: 510px) { .age-gate-wrapper .age-gate-inner { display: flex; flex-direction: column; justify-content: center; padding: 3.57143%; } .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-logo { display: none; } .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { display: none; } } @media all and (min-width: 768px) { body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-sun { display: none; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-sun { display: none; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { display: block; width: 57.14286%; top: 50%; bottom: unset; left: 50%; transform: translate(-50%, -120%); } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image:before { display: block; content: ""; width: 100%; padding-top: 100%; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image picture, body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas { flex-direction: row; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas #yes .pill-btn, body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas #no .pill-btn { margin-bottom: 0; width: auto; min-width: 175px; max-width: 275px; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas #yes { margin-right: 10px; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { display: block; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image:before { display: block; content: ""; width: 100%; padding-top: 150%; } .age-gate-wrapper .age-gate-inner { display: block; padding: 0; overflow: hidden; } .age-gate-wrapper .age-gate-inner .age-gate-content { position: absolute; top: 15%; left: 50%; transform: translate(-50%, -15%); width: 50%; z-index: 5; } .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-logo { width: 22%; margin-bottom: 32px; } .age-gate-wrapper .age-gate-inner .age-gate-content h3 { margin-bottom: 32px; } .age-gate-wrapper .age-gate-inner .age-gate-graphic { position: absolute; bottom: 0; left: 0; width: 100%; } .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-sun { display: block; width: 75vw; height: 75vw; border-radius: 50%; position: absolute; transform: translate(-25%, 10%); bottom: 0; left: 0; background: #EDBD1D; z-index: 0; } .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-sun::before { content: ""; position: absolute; border-radius: 50%; top: -5%; left: -5%; width: 110%; height: 110%; border: 2px dashed #EDBD1D; } .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { display: none; } } @media all and (min-width: 768px) and (orientation: landscape) { body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-logo { display: block; position: relative; width: 30%; margin: 0 auto 12px; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-logo:before { display: block; content: ""; width: 100%; padding-top: 100%; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { display: none; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { display: block; width: 33.33333%; left: 50%; transform: translateX(-50%); } .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-sun { display: block; width: 45vw; height: 45vw; border-radius: 50%; transform: translate(-25%, 15%); } .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { position: absolute; display: block; bottom: 0; width: 100%; } .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image img, .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; top: unset; bottom: 0; height: auto; } } @media all and (min-width: 1280px) { body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-logo { display: block; position: relative; width: 30%; margin: 0 auto 12px; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-logo:before { display: block; content: ""; width: 100%; padding-top: 100%; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-graphic { height: 100%; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { display: block; height: 100%; bottom: unset; top: 0; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image:before { display: none; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image picture { position: static; } body.fruit-smash .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image picture img { position: static; width: 100%; height: 100%; object-fit: cover; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content { text-align: left; width: 41.07143%; transform: translate(-50%, -50%); } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-logo { display: none; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas { width: 100%; justify-content: flex-start; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { display: block; width: 41.07143%; top: 50%; bottom: unset; left: 7.14286%; transform: translateX(0); transform: translateY(-50%); } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image:before { display: block; content: ""; width: 100%; padding-top: 100%; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image picture, body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-content { width: 45%; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { bottom: 0; } body.voodoo-ranger .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image:before { display: block; content: ""; width: 100%; padding-top: 56.25%; } .age-gate-wrapper .age-gate-inner .age-gate-content { top: 50%; left: 75%; width: 33.33333%; transform: translate(-75%, -50%); } .age-gate-wrapper .age-gate-inner .age-gate-content div.small { margin-right: 0; } .age-gate-wrapper .age-gate-inner .age-gate-content p.small { margin-right: 0; } .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas { width: 50%; } .age-gate-wrapper .age-gate-inner .age-gate-graphic { top: 0; } .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image { position: absolute; z-index: 0; top: 0; bottom: unset; width: 100%; } .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image:before { display: block; content: ""; width: 100%; padding-top: 63.403%; } .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image img, .age-gate-wrapper .age-gate-inner .age-gate-graphic .age-gate-image picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } @media (hover: hover) { body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas .pill-btn:hover { background: #857550; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas .pill-btn:hover { color: #fff; background: #857550; } body.fat-tire .age-gate-wrapper .age-gate-inner .age-gate-content .age-gate-ctas .pill-btn:hover svg { fill: #fff; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ #header .cart-flyout__wrapper { max-height: calc(100vh - 50px - 35px); } #header.has-disclaimer .cart-flyout__wrapper { max-height: calc(100vh - 50px - 35px); } .cart-flyout__wrapper { position: absolute; bottom: 0; left: 0; width: 100%; display: flex; transform: translate(0, 100%); opacity: 0; padding: 3.57143%; visibility: hidden; pointer-events: none; transition: opacity 166.5ms cubic-bezier(0.666, 0, 0.333, 1), visibility 0ms linear 166.5ms; } body.fat-tire .cart-flyout__wrapper.is-inline .cart-flyout__inner { background: #fff; } @keyframes flash { 0% { color: #fff; } 50% { color: #DDD; } 100% { color: #fff; } } body.fat-tire .cart-flyout__wrapper .cart-flyout__inner { background: #fff; } body.fat-tire .cart-flyout__wrapper .cart-flyout__inner .close-button { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } body.fat-tire .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .quantity-buttons { border-bottom: 3px solid #BC2F2B; } body.fat-tire .cart-flyout__wrapper .cart-flyout__inner .cart-details { background: #857550; color: #fff; } .cart-flyout__wrapper.visible { opacity: 1; visibility: visible; transition: opacity 249.75ms cubic-bezier(0.666, 0, 0.333, 1), visibility 0ms linear 0ms; } .cart-flyout__wrapper.visible .cart-flyout__inner { pointer-events: auto; } .cart-flyout__wrapper.no-items .cart-flyout__inner .cart-no-items { display: block; } .cart-flyout__wrapper.no-items .cart-flyout__inner .cart-items { display: none; } .cart-flyout__wrapper.no-items .cart-flyout__inner .cart-details .pill-btn { opacity: 0; pointer-events: none; } .cart-flyout__wrapper.error .cart-flyout__inner .cart-items { display: none; } .cart-flyout__wrapper.error .cart-flyout__inner .cart-error { display: block; } .cart-flyout__wrapper.is-inline { transform: none; position: relative; opacity: 1; visibility: visible; pointer-events: auto; padding: 7.14286%; margin: 0; } .cart-flyout__wrapper.is-inline .cart-flyout__inner { position: unset; box-shadow: none; background: #EBE9E2; max-height: 600px; height: 100%; } .cart-flyout__wrapper.is-inline .cart-flyout__inner .cart-title { margin: 32px 7.14286%; color: #1B2533; text-transform: uppercase; } .cart-flyout__wrapper.is-inline .cart-flyout__inner .cart-items { padding-top: 0; } .cart-flyout__wrapper .flashing { animation: flash 166.5ms ease 0ms 1; } @keyframes flash { 0% { color: #FFFAFB; } 50% { color: #DDD; } 100% { color: #FFFAFB; } } .cart-flyout__wrapper .cart-flyout__inner { flex: 0 0 auto; width: 100%; display: flex; flex-direction: column; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); border-radius: 7px; background: #FFFAFB; overflow: hidden; position: relative; min-height: 400px; max-height: 100%; pointer-events: none; } .cart-flyout__wrapper .cart-flyout__inner .close-button { width: 20px; height: 20px; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; position: absolute; top: 0; right: 0; margin: 12px; display: none; } .cart-flyout__wrapper .cart-flyout__inner .cart-items { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px; color: #1B2533; position: relative; } .cart-flyout__wrapper .cart-flyout__inner .cart-items.visible .cart-item { opacity: 1; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item { height: auto; display: flex; width: 100%; border-bottom: 2px solid rgba(27, 37, 51, 0.2); padding: 12px 0; transition: opacity 333ms ease; opacity: 0; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item:first-of-type { padding-top: 0; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item:last-of-type { border-bottom: none; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-thumbnail { width: 33.33333%; position: relative; margin-right: 12px; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content { display: grid; width: 100%; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .subtitle { grid-column: 1 / span 2; grid-row: 1; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .price { grid-row: 1; grid-column: span 2 / 4; text-align: right; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .price .original-price { display: inline-block; position: relative; color: gray; margin-right: 0.75em; opacity: 0.6; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .price .original-price:after { content: ""; position: absolute; top: 50%; left: -5px; right: -5px; height: 1px; background-color: gray; border-radius: 1px; transform: rotate(-7deg); } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .name { grid-row: 2; grid-column: 1 / span 2; line-height: 1em; width: 100%; padding-right: 12px; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .code { grid-row: 2; grid-column: span 1 / 4; margin-top: 4px; text-align: right; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .quantity-buttons { grid-row: 3; display: flex; align-items: center; margin-top: 10px; padding-bottom: 5px; border-bottom: 3px solid #D74229; justify-self: start; align-self: start; transition: opacity 333ms ease; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .quantity-buttons.loading, .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .quantity-buttons.disabled { opacity: 0.6; pointer-events: none; position: relative; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .quantity-buttons.loading:after { left: 100%; top: 0; transform: translate(100%, 0); width: 12px; height: 12px; border-width: 2px; margin: 0px; margin-top: 1px; margin-left: 6px; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .quantity-buttons .quantity-button { width: 15px; height: 15px; margin: 0 8px; cursor: pointer; position: relative; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .quantity-buttons .quantity-button:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; width: 75%; height: 75%; top: 12.5%; left: 12.5%; transform: rotate(45deg); } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .quantity-buttons .quantity-button.minus:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .quantity-buttons .quantity-button.plus:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .disclaimer { grid-row: 4; grid-column: span 3; margin-top: 10px; padding-left: 12px; line-height: 16px; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item.byo-cart-item { padding-left: 12px; padding-right: 12px; border-left: 2px solid rgba(27, 37, 51, 0.2); border-right: 2px solid rgba(27, 37, 51, 0.2); border-bottom: none; background: #fff; position: relative; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item.byo-cart-item::before { height: 0; border-top: 2px dashed rgba(27, 37, 51, 0.2); content: ""; width: calc(100% - 24px); margin: 0 auto; background: #fff; position: absolute; left: 0; right: 0; top: 0; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item.byo-cart-item.byo-cart-item-first { padding-top: 12px; border-top: 2px solid rgba(27, 37, 51, 0.2); } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item.byo-cart-item.byo-cart-item-first::before { display: none; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item.byo-cart-item.byo-cart-item-first::after { content: "Build Your Box"; font-family: "CardinalSemiCondensed", "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; font-size: 30px; line-height: 0.92em; border: 2px solid rgba(27, 37, 51, 0.2); position: absolute; left: -2px; right: 0; bottom: 100%; width: calc(100% + 4px); padding: 5px 12px; background: #fff; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item.byo-cart-item.byo-cart-item-first:first-child { margin-top: 41px; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item.byo-cart-item.byo-cart-item-last { border-bottom: 2px solid rgba(27, 37, 51, 0.2); } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item.byo-cart-item.byo-cart-item-last + .byo-cart-item { margin-top: 50px; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item.byo-cart-item .item-content .quantity-buttons { visibility: hidden; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item + .byo-cart-item.byo-cart-item-first { margin-top: 37px; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item.byo-cart-item-controls { padding: 12px; background: #fff; border: 2px solid rgba(27, 37, 51, 0.2); margin-top: -2px; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item.byo-cart-item-controls .item-content .quantity-buttons { margin-top: 0; grid-row: 1; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item.byo-cart-item-controls .item-content .disclaimer { grid-column: span 3; padding-left: 0; text-align: right; } .cart-flyout__wrapper .cart-flyout__inner .cart-no-items, .cart-flyout__wrapper .cart-flyout__inner .cart-error { display: none; color: #1B2533; padding: 7.14286%; max-width: 350px; flex: 1; } .cart-flyout__wrapper .cart-flyout__inner .cart-no-items h6, .cart-flyout__wrapper .cart-flyout__inner .cart-error h6 { margin-bottom: 12px; } .cart-flyout__wrapper .cart-flyout__inner .cart-details { padding: 24px; background: #D74229; color: #FFFAFB; box-shadow: 0px -10px 15px 4px rgba(0, 0, 0, 0.07); } .cart-flyout__wrapper .cart-flyout__inner .cart-details .subtotal { display: flex; justify-content: space-between; margin-bottom: 24px; } .cart-flyout__wrapper .cart-flyout__inner .cart-details .pill-btn { transition: opacity 333ms ease; margin-bottom: 24px; } @media all and (min-width: 768px) { .cart-flyout__wrapper { bottom: 0; right: 0; left: unset; padding: 0; width: 600px; max-width: 46.42857%; padding-top: 24px; padding-right: 3.57143%; } .cart-flyout__wrapper.is-inline { max-width: unset; width: 50%; padding: 7.14286%; } .cart-flyout__wrapper.is-inline .cart-flyout__inner { max-height: 500px; margin-right: 0; } .cart-flyout__wrapper .cart-flyout__inner { max-height: 70vh; height: auto; margin-right: -5px; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-thumbnail { margin-right: 32px; } .cart-flyout__wrapper .cart-flyout__inner .cart-items .cart-item .item-content .disclaimer { grid-row: 3; grid-column: span 2; text-align: right; } } @media all and (min-width: 1280px) { .cart-flyout__wrapper .cart-flyout__inner .cart-items { padding: 32px; } .cart-flyout__wrapper .cart-flyout__inner .cart-details { padding: 32px; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .subnav-wrapper { position: sticky; top: 50px; height: 40px; background-color: #D74229; z-index: 2; } .subnav-wrapper.theme-hidden { display: none; } .subnav-wrapper.theme-cellar-club { background-color: #A07B51; } .subnav-wrapper.theme-fat-tire { background-color: #1B2533; } .subnav-wrapper.theme-fat-tire .subnav-inner .dropdown.subnav .choices { border-bottom: 2px solid #1B2533; } .subnav-wrapper.theme-fat-tire-gold { background-color: #857550; } .subnav-wrapper.theme-fat-tire-gold .subnav-inner .dropdown.subnav .choices { border-bottom: 2px solid #857550; } .subnav-wrapper.theme-voodoo-ranger { background-color: #F1C218; } .subnav-wrapper.theme-voodoo-ranger .subnav-inner .subnav-links li { color: #231F20; margin: 0 7.14286%; } .subnav-wrapper.theme-voodoo-ranger .subnav-inner .dropdown.subnav .choices { border-bottom: 2px solid #F1C218; } .subnav-wrapper.theme-voodoo-ranger .subnav-inner .dropdown.subnav .choices:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .subnav-wrapper.theme-voodoo-ranger .subnav-inner .dropdown.subnav .choices.is-open .choices__inner { background-color: #F1C218; } .subnav-wrapper.theme-voodoo-ranger .subnav-inner .dropdown.subnav .choices.is-open .choices__inner .choices__list.choices__list--single { color: #231F20; } .subnav-wrapper.theme-voodoo-ranger .subnav-inner .dropdown.subnav .choices .choices__inner .choices__list.choices__list--single, .subnav-wrapper.theme-voodoo-ranger .subnav-inner .dropdown.subnav .choices .choices__inner .choices__list .choices__item { color: #231F20; } .subnav-wrapper.theme-voodoo-ranger .subnav-inner .dropdown.subnav .choices .choices__list--dropdown .choices__list { background-color: #F1C218; } .subnav-wrapper.theme-voodoo-ranger .subnav-inner .dropdown.subnav .choices .choices__list--dropdown .choices__list.choices__list--single { color: #231F20; } .subnav-wrapper.theme-voodoo-ranger .subnav-inner .dropdown.subnav .choices .choices__list--dropdown .choices__list .choices__item { color: #231F20; } .subnav-wrapper.theme-voodoo-ranger .subnav-inner .dropdown.subnav .choices .choices__list--dropdown .choices__list .choices__item.is-highlighted { background-color: #FEFEFE; } .subnav-wrapper.theme-voodoo-ranger .subnav-inner .dropdown.subnav .choices .choices__list--dropdown .choices__list .choices__item.is-selected { color: #231F20; } .subnav-wrapper.theme-voodoo-ranger .subnav-inner .dropdown.subnav .choices .choices__list--dropdown .choices__list .choices__item.is-selected:before { background-color: #231F20; } .subnav-wrapper.with-cart .subnav-inner .text-link { display: none; } .subnav-wrapper.theme-byo { background: transparent; z-index: 0; } @media all and (max-width: 767px) { .subnav-wrapper.theme-byo { height: 0; } } .subnav-wrapper.theme-byo .subnav-inner .subnav-links { justify-content: flex-start; border-bottom: 2px solid #8B8B8A; padding: 30px 0; } .subnav-wrapper.theme-byo .subnav-inner .subnav-links > li { padding: 0; margin: 0; color: #1B2533; } .subnav-wrapper.theme-byo .subnav-inner .subnav-links > li:hover { color: #D74229; } .subnav-wrapper.theme-byo .subnav-inner .subnav-links > li + li { margin-left: 3.57143%; } .subnav-wrapper.theme-byo[stuck] { z-index: 2; } #header.has-disclaimer + .inner .subnav-wrapper { top: 85px; } .subnav-wrapper[stuck] { z-index: 10; } .subnav-wrapper .subnav-inner { position: relative; display: flex; align-items: center; height: 100%; } .subnav-wrapper .subnav-inner .subnav-links { display: none; } @media all and (min-width: 768px) { .subnav-wrapper { top: 80px; } #header.has-disclaimer + .inner .subnav-wrapper { top: 80px; } } @media all and (min-width: 768px) and (orientation: landscape) { .subnav-wrapper { height: 70px; } .subnav-wrapper.with-cart .subnav-inner .subnav-links { justify-content: flex-start; margin-left: -5px; } .subnav-wrapper.with-cart .subnav-inner .subnav-links li { margin: 0 0 0 3.57143%; } .subnav-wrapper.with-cart .subnav-inner .text-link { display: block; position: absolute; top: 50%; right: 3.57143%; color: #FFFAFB; transform: translate(0%, -50%); border-color: #FFFAFB; } .subnav-wrapper .subnav-inner .dropdown { display: none; } .subnav-wrapper .subnav-inner .subnav-links { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; } .subnav-wrapper .subnav-inner .subnav-links li { display: flex; padding: 5px; margin: 0 20px; color: #FFFAFB; } .subnav-wrapper .subnav-inner .subnav-links li[data-jump="add-to-cart"] { display: none; } } @media (hover: hover) { .subnav-wrapper.theme-cellar-club .subnav-inner .subnav-links li:hover { color: #1B2533; } .subnav-wrapper.theme-voodoo-ranger .subnav-inner .subnav-links li:hover { color: #FEFEFE; } .subnav-wrapper .subnav-inner .subnav-links li { cursor: pointer; transition: color 183.15ms linear; } .subnav-wrapper .subnav-inner .subnav-links li:hover { color: #DFD3A8; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .filter-wrapper { position: sticky; top: 50px; height: 40px; z-index: 2; } #header.has-disclaimer + .inner .filter-wrapper { top: 85px; } .filter-wrapper[stuck] { z-index: 10; } #header.has-disclaimer + .inner .filter-wrapper.mobile-filter .filter-inner, #header.has-disclaimer + .inner .filter-wrapper.search .filter-inner { height: calc(100vh - 85px); } .filter-wrapper.mobile-filter .filter-inner, .filter-wrapper.search .filter-inner { height: calc(100vh - 50px); transition: height 0ms linear 0ms; } .filter-wrapper.mobile-filter .filter-inner .filter-bar-wrapper .filter-mobile-btn { z-index: 1; } .filter-wrapper.mobile-filter .filter-inner .filter-bar-wrapper .filter-mobile-btn .filter-mobile-btn-icon { opacity: 0; transform: translate(0%, -50%) scale(0.8); } .filter-wrapper.mobile-filter .filter-inner .filter-bar-wrapper .filter-mobile-btn .filter-close-btn-icon { opacity: 1; transform: translate(0%, -50%) scale(1); } .filter-wrapper.mobile-filter .filter-inner .filter-bar-wrapper .filter-mobile-btn .filter-mobile-btn-label { color: #D74229; } .filter-wrapper.mobile-filter .filter-inner .filter-bar-wrapper .filter-mobile-reset-btn { visibility: visible; opacity: 1; transform: translate(0%, -50%) scale(1); transition: opacity 666ms cubic-bezier(0.666, 0, 0.333, 1), transform 666ms cubic-bezier(0.666, 0, 0.333, 1), visibility 0ms linear 0ms; } .filter-wrapper.mobile-filter .filter-inner .filter-mobile-wrapper { visibility: visible; opacity: 1; transition: opacity 666ms cubic-bezier(0.666, 0, 0.333, 1), visibility 0ms linear 0ms; } .filter-wrapper.search .filter-inner .filter-bar-wrapper .filter-search-btn { z-index: 1; } .filter-wrapper.search .filter-inner .filter-bar-wrapper .filter-search-btn .filter-search-btn-icon { opacity: 0; transform: translate(0%, -50%) scale(0.8); } .filter-wrapper.search .filter-inner .filter-bar-wrapper .filter-search-btn .filter-close-btn-icon { opacity: 1; transform: translate(0%, -50%) scale(1); } .filter-wrapper.search .filter-inner .filter-search-wrapper { visibility: visible; opacity: 1; transition: opacity 666ms cubic-bezier(0.666, 0, 0.333, 1), visibility 0ms linear 0ms; } .filter-wrapper .filter-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: height 0ms linear 666ms; } .filter-wrapper .filter-inner .filter-bar-wrapper { position: absolute; top: 0px; left: 0px; width: 100%; height: 40px; background-color: #D74229; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-mobile-btn, .filter-wrapper .filter-inner .filter-bar-wrapper .filter-search-btn { position: absolute; top: 0px; height: 40px; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-mobile-btn .filter-search-preview, .filter-wrapper .filter-inner .filter-bar-wrapper .filter-search-btn .filter-search-preview { color: #FFFAFB; position: absolute; left: 0; top: 50%; transform: translate(-100%, -50%); text-align: right; width: auto; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-mobile-btn .filter-btn-icon, .filter-wrapper .filter-inner .filter-bar-wrapper .filter-search-btn .filter-btn-icon { position: absolute; top: 50%; left: 11px; width: 18px; height: 18px; transform: translate(0%, -50%); transition: opacity 666ms cubic-bezier(0.666, 0, 0.333, 1), transform 666ms cubic-bezier(0.666, 0, 0.333, 1); } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-mobile-btn .filter-close-btn-icon, .filter-wrapper .filter-inner .filter-bar-wrapper .filter-search-btn .filter-close-btn-icon { opacity: 0; transform: translate(0%, -50%) scale(1.2); background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-mobile-btn { left: 7.14286%; width: 92.85714%; margin-left: -11px; padding-left: 40px; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-mobile-btn .filter-mobile-btn-icon { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-mobile-btn .filter-mobile-btn-label { color: #FFFAFB; line-height: 40px; transition: color 666ms linear; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-mobile-reset-btn { position: absolute; right: 0; top: 50%; margin-right: 7.14286%; transform: translate(0, -50%) scale(1.2); height: 100%; transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1), transform 333ms cubic-bezier(0.666, 0, 0.333, 1), visibility 0ms linear 333ms; opacity: 0; visibility: hidden; border: none; outline: none; padding: 0; background: none; z-index: 5; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-desktop-wrapper { display: none; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-search-btn { right: 7.14286%; width: 40px; margin-right: -11px; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-search-btn.active .filter-search-btn-icon:after { opacity: 1; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-search-btn.active .filter-search-preview:before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-search-btn .filter-search-btn-icon { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-search-btn .filter-search-btn-icon:after { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: #EDBD1D; opacity: 0; left: 50%; position: absolute; bottom: -10px; transform: translate(-50%, -50%); } .filter-wrapper .filter-inner .filter-mobile-screen-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: opacity 666ms cubic-bezier(0.666, 0, 0.333, 1), visibility 0ms linear 666ms; } .filter-wrapper .filter-inner .filter-mobile-screen-wrapper:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 250, 251, 0.92); } .filter-wrapper .filter-inner .filter-mobile-screen-wrapper .filter-mobile-screen-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: calc(40px + 3.57143%) 7.14286% 0; } .filter-wrapper .filter-inner .filter-mobile-wrapper .filter-mobile-screen-inner span.a4 { display: block; margin-bottom: 24px; } .filter-wrapper .filter-inner .filter-mobile-wrapper .filter-mobile-screen-inner ul { margin-bottom: 24px; } .filter-wrapper .filter-inner .filter-mobile-wrapper .filter-mobile-screen-inner ul:last-of-type { margin-bottom: 0; } .filter-wrapper .filter-inner .filter-mobile-wrapper .filter-mobile-screen-inner ul li { position: relative; color: #D74229; margin-bottom: 12px; } .filter-wrapper .filter-inner .filter-mobile-wrapper .filter-mobile-screen-inner ul li:last-of-type { margin-bottom: 0; } .filter-wrapper .filter-inner .filter-mobile-wrapper .filter-mobile-screen-inner ul li.is-active:before { content: ""; position: absolute; top: 50%; left: -12px; width: 6px; height: 6px; margin-top: -2px; border-radius: 3px; background-color: #D74229; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner { color: #1B2533; display: flex; flex-direction: column; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner input { flex: 0 0 auto; width: 100%; padding: 0; font-family: "CardinalSemiCondensed", "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; font-size: calc(68px + (135 - 68) * ((100vw - 340px) / (1440 - 340))); line-height: 0.81em; color: #1B2533; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner button { flex: 0 0 auto; position: relative; width: 70px; height: 50px; margin-top: 24px; margin-right: 12px; background-color: #D74229; border: 0px; border-radius: 7px; display: inline-block; cursor: pointer; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner button:after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner .filter-mobile-clear-btn:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner .filter-mobile-search-results { flex: 1; margin-top: 24px; position: relative; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner .filter-mobile-search-results:after { content: ""; position: absolute; width: 100%; left: 0; pointer-events: none; height: 96px; bottom: 0; background: linear-gradient(0deg, white 0%, rgba(255, 255, 255, 0) 50%); } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner .filter-mobile-search-results .search-results-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; height: 100%; padding-top: 12px; overflow: auto; padding-bottom: 96px; pointer-events: none; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner .filter-mobile-search-results .search-results-inner.active { pointer-events: auto; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner .filter-mobile-search-results .search-results-inner.active li { opacity: 1; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner .filter-mobile-search-results .search-results-inner.active li h5 { margin-bottom: 6px; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner .filter-mobile-search-results .search-results-inner li { margin-bottom: 24px; opacity: 0; transition: opacity 333ms ease, transform 333ms ease; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner .filter-mobile-search-results .search-results-inner li > * { transition: color 111ms cubic-bezier(0.666, 0, 0.333, 1); } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner .filter-mobile-search-results .search-results-inner li:hover { color: #D74229; } @media all and (min-width: 768px) { .filter-wrapper { top: 80px; } #header.has-disclaimer + .inner .filter-wrapper { top: 80px; } #header.has-disclaimer + .inner .filter-wrapper.mobile-filter .filter-inner, #header.has-disclaimer + .inner .filter-wrapper.search .filter-inner { height: calc(100vh - 80px); } .filter-wrapper.mobile-filter .filter-inner, .filter-wrapper.search .filter-inner { height: calc(100vh - 80px); } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-mobile-btn { left: 3.57143%; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-search-btn { right: 3.57143%; } } @media all and (min-width: 768px) and (orientation: landscape) { .filter-wrapper { height: 70px; } .filter-wrapper .filter-inner .filter-bar-wrapper { height: 70px; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-mobile-btn { display: none; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-desktop-wrapper { display: block; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-desktop-wrapper .filter-desktop-inner { display: flex; padding-left: 3.57143%; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-desktop-wrapper .filter-desktop-inner .filter-desktop-section { display: flex; padding: 0 24px; border-left: 1px solid #FFFAFB; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-desktop-wrapper .filter-desktop-inner .filter-desktop-section .filter-desktop-item-label { display: none; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-desktop-wrapper .filter-desktop-inner .filter-desktop-section .text-link { border-color: #FFFAFB; height: 24px; margin: 23px 0; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-desktop-wrapper .filter-desktop-inner .filter-desktop-item-label { width: auto; padding-right: 24px; color: #FFFAFB; line-height: 70px; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-desktop-wrapper .filter-desktop-inner .filter-desktop-item { width: 170px; padding-top: 14px; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-search-btn { width: 70px; height: 70px; margin-right: -23px; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-search-btn .filter-search-btn-icon, .filter-wrapper .filter-inner .filter-bar-wrapper .filter-search-btn .filter-close-btn-icon { left: 22px; width: 25px; height: 25px; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner input { font-size: 68px; } } @media all and (min-width: 1440px) { .filter-wrapper .filter-inner .filter-bar-wrapper .filter-desktop-wrapper .filter-desktop-inner .filter-desktop-section .filter-desktop-item-label { display: inline-block; } .filter-wrapper .filter-inner .filter-bar-wrapper .filter-desktop-wrapper .filter-desktop-inner .filter-desktop-section .filter-desktop-item { width: 200px; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner input { width: 66%; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner button { width: 80px; height: 60px; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner button:after { width: 24px; height: 24px; } } @media (hover: hover) { .filter-wrapper .filter-inner .filter-search-btn { cursor: pointer; } .filter-wrapper .filter-inner .filter-search-btn .filter-search-preview { transition: transform 266.4ms ease-out; backface-visibility: hidden; } .filter-wrapper .filter-inner .filter-search-btn.hover-scale:hover .filter-search-preview { transform: scale(0.952) translateZ(0) translate(-100%, -50%); } .filter-wrapper .filter-inner .choices { border-radius: 3px; transition: background-color 99.9ms ease-out; } .filter-wrapper .filter-inner .choices:hover { background: rgba(0, 0, 0, 0.05); } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner button { transition: transform 183.15ms ease-in-out; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner button:focus { border: none; outline: none; } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner button:active:hover { transform: scale(0.98); } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner button:hover { transform: scale(1.03); } .filter-wrapper .filter-inner .filter-search-wrapper .filter-mobile-screen-inner .filter-mobile-search-results .search-results-inner li:hover > * { color: #D74229; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .news-flash-wrapper { position: relative; background-color: #EDBD1D; padding: 0 7.14286%; } .news-flash-wrapper .news-flash-inner { text-align: left; } .news-flash-wrapper .news-flash-inner .news-flash-content h6 { margin-bottom: 24px; color: #1B2533; } .news-flash-wrapper .news-flash-inner .news-flash-content p { margin-bottom: 24px; } .news-flash-wrapper .news-flash-inner .news-flash-content p:last-child { margin-bottom: 0; } @media all and (min-width: 768px) { .news-flash-wrapper { padding: 0 7.14286%; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .hero-wrapper { position: relative; width: 100%; } .hero-wrapper.overlap { z-index: 5; } .hero-wrapper.theme-light .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet { background-color: #EBE9E2; } .hero-wrapper.theme-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h1, .hero-wrapper.theme-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h2, .hero-wrapper.theme-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h3, .hero-wrapper.theme-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h4, .hero-wrapper.theme-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h5, .hero-wrapper.theme-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h6, .hero-wrapper.theme-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .t3, .hero-wrapper.theme-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content p { color: #EBE9E2; } .hero-wrapper.theme-light .hero-back-btn.back-link:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .hero-wrapper.theme-light .hero-back-btn.back-link span { color: #FFFAFB; } .hero-wrapper.theme-dark .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet { background-color: #1B2533; } .hero-wrapper.theme-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h1, .hero-wrapper.theme-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h2, .hero-wrapper.theme-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h3, .hero-wrapper.theme-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h4, .hero-wrapper.theme-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h5, .hero-wrapper.theme-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h6, .hero-wrapper.theme-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content p { color: #1B2533; } .hero-wrapper.theme-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .t3 { color: #D74229; } .hero-wrapper.theme-dark .hero-back-btn.back-link:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .hero-wrapper.theme-dark .hero-back-btn.back-link span { color: #D74229; } .hero-wrapper.theme-ft-light.full-window-height .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-background img { object-fit: cover; object-position: bottom center; } .hero-wrapper.theme-ft-light .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet { background-color: #fff; } .hero-wrapper.theme-ft-light .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet.glide__bullet--active { background-color: #857550; } .hero-wrapper.theme-ft-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h1, .hero-wrapper.theme-ft-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h2, .hero-wrapper.theme-ft-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h3, .hero-wrapper.theme-ft-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h4, .hero-wrapper.theme-ft-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h5, .hero-wrapper.theme-ft-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h6, .hero-wrapper.theme-ft-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .t3, .hero-wrapper.theme-ft-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content p { color: #fff; } .hero-wrapper.theme-ft-light .hero-back-btn.back-link:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .hero-wrapper.theme-ft-light .hero-back-btn.back-link span { color: #fff; } .hero-wrapper.theme-ft-dark .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet { background-color: #1B2533; } .hero-wrapper.theme-ft-dark .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet.glide__bullet--active { background-color: #857550; } .hero-wrapper.theme-ft-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h1, .hero-wrapper.theme-ft-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h2, .hero-wrapper.theme-ft-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h3, .hero-wrapper.theme-ft-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h4, .hero-wrapper.theme-ft-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h5, .hero-wrapper.theme-ft-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h6, .hero-wrapper.theme-ft-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .t3, .hero-wrapper.theme-ft-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content p { color: #1B2533; } .hero-wrapper.theme-ft-dark .hero-back-btn.back-link:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .hero-wrapper.theme-ft-dark .hero-back-btn.back-link span { color: #1B2533; } .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light.has-image .hero-item-content h1, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light.has-image .hero-item-content h2, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light.has-image .hero-item-content h3, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light.has-image .hero-item-content h4, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light.has-image .hero-item-content h5, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light.has-image .hero-item-content h6, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light.has-image .hero-item-content .t3, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light.has-image .hero-item-content p { color: #FEFEFE; } .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark.has-image .hero-item-content h1, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark.has-image .hero-item-content h2, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark.has-image .hero-item-content h3, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark.has-image .hero-item-content h4, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark.has-image .hero-item-content h5, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark.has-image .hero-item-content h6, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark.has-image .hero-item-content .t3, .voodoo-ranger .hero-wrapper .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark.has-image .hero-item-content p { color: #231F20; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet.glide__bullet--active, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet.glide__bullet--active { transform: scale(1.58); border: 1px solid #231F20; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .glide__bullets, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .glide__bullets { bottom: unset; top: 50%; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .glide__bullets .glide__bullet, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .glide__bullets .glide__bullet { width: 12px; height: 12px; border: 2px solid #231F20; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image { position: relative; width: 100%; height: 150vh; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background { position: relative; height: 100%; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background img, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background picture, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background img, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom center; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content { position: absolute; width: 100%; top: 0; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content p, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content p { margin-bottom: 36px; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content p:last-child, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content p:last-child { margin-bottom: 0; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .hero-item-ctas .pill-btn, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .hero-item-ctas .pill-btn { transform: rotate(-2deg); width: 100%; margin: 0 auto 24px; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .hero-item-ctas .pill-btn:last-child, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .hero-item-ctas .pill-btn:last-child { margin-bottom: 0; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet { background-color: #FEFEFE; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet.glide__bullet--active { background-color: #F1C218; } .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light .hero-item-content h1, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light .hero-item-content h2, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light .hero-item-content h3, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light .hero-item-content h4, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light .hero-item-content h5, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light .hero-item-content h6, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light .hero-item-content .t3, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-light .hero-item-content p { color: #FEFEFE; } .hero-wrapper.theme-vr-light .hero-back-btn.back-link:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .hero-wrapper.theme-vr-light .hero-back-btn.back-link span { color: #FEFEFE; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet { background-color: #FEFEFE; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet.glide__bullet--active { background-color: #F1C218; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark .hero-item-content h1, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark .hero-item-content h2, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark .hero-item-content h3, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark .hero-item-content h4, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark .hero-item-content h5, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark .hero-item-content h6, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark .hero-item-content .t3, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-vr-dark .hero-item-content p { color: #231F20; } .hero-wrapper.theme-vr-dark .hero-back-btn.back-link:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .hero-wrapper.theme-vr-dark .hero-back-btn.back-link span { color: #F1C218; } .hero-wrapper.theme-vr-home { background: transparent; } .hero-wrapper.theme-vr-home .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet { background-color: #FEFEFE; } .hero-wrapper.theme-vr-home .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet.glide__bullet--active { background-color: #F1C218; } .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content { margin-top: 48px; } .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-center .hero-item-ctas { margin-top: 12px; } .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content h1, .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content h2, .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content h3, .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content h4, .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content h5, .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content h6 { color: #F1C218; } .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .t3, .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content p { color: #FEFEFE; } .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .hero-item-ctas { margin-top: 12px; } .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .hero-item-ctas .pill-btn { max-width: unset; } .hero-wrapper.theme-vr-home .hero-back-btn.back-link:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .hero-wrapper.theme-vr-home .hero-back-btn.back-link span { color: #F1C218; } .hero-wrapper.theme-graphic .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h1, .hero-wrapper.theme-graphic .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h2, .hero-wrapper.theme-graphic .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h3, .hero-wrapper.theme-graphic .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h4, .hero-wrapper.theme-graphic .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h5, .hero-wrapper.theme-graphic .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h6, .hero-wrapper.theme-graphic .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .t3, .hero-wrapper.theme-graphic .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content p { color: #FFFAFB; } .hero-wrapper.theme-graphic .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .pill-btn { border-color: #EBE9E2; color: #EBE9E2; } .hero-wrapper.theme-graphic .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .pill-btn svg { fill: #EBE9E2; } .hero-wrapper.theme-graphic .hero-back-btn.back-link:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .hero-wrapper.theme-graphic .hero-back-btn.back-link span { color: #FFFAFB; } .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h1, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h2, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h3, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h4, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h5, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h6, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content p, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .pill-btn { color: #FFFAFB; } .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h1 svg, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h2 svg, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h3 svg, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h4 svg, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h5 svg, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h6 svg, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content p svg, .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .pill-btn svg { fill: #FFFAFB; } .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .t3 { color: #A07B51; } .hero-wrapper.theme-cellar-club .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .pill-btn { border-color: #A07B51; } .hero-wrapper.theme-cellar-club .hero-back-btn.back-link:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .hero-wrapper.theme-cellar-club .hero-back-btn.back-link span { color: #FFFAFB; } .hero-wrapper.theme-fruit-smash .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet { background-color: #1E1E1E; } @media all and (orientation: portrait) { .hero-wrapper.theme-fruit-smash .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-center .hero-item-ctas { margin-top: 12px; } } .hero-wrapper.theme-fruit-smash .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content h1, .hero-wrapper.theme-fruit-smash .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content h2, .hero-wrapper.theme-fruit-smash .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content h3, .hero-wrapper.theme-fruit-smash .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content h4, .hero-wrapper.theme-fruit-smash .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content h5, .hero-wrapper.theme-fruit-smash .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content h6, .hero-wrapper.theme-fruit-smash .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .t3, .hero-wrapper.theme-fruit-smash .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content p { color: #1E1E1E; } .hero-wrapper.full-window-height .hero-inner { height: 100%; } .hero-wrapper.full-window-height .hero-inner .hero-carousel { height: 100%; } .hero-wrapper.full-window-height .hero-inner .hero-carousel .hero-carousel-track { height: 100%; } .hero-wrapper.full-window-height .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides { height: 100%; } .hero-wrapper.full-window-height .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item { height: 100%; } .hero-wrapper.full-window-height .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background { height: 100%; } .hero-wrapper.full-window-height .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background picture img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; } .hero-wrapper.full-window-height .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content { position: absolute; top: 50%; left: 50%; width: 100%; transform: translate(-50%, -50%); padding: 0 7.14286%; } .hero-wrapper .hero-inner .hero-carousel.glide--slider .hero-carousel-track { overflow: hidden; } .hero-wrapper .hero-inner .hero-carousel.glide--slider .hero-carousel-track .hero-carousel-slides { overflow: hidden; } .hero-wrapper .hero-inner .hero-carousel.glide--slider .glide__bullets { display: block; } .hero-wrapper .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet { background-color: #1B2533; } .hero-wrapper .hero-inner .hero-carousel.glide--slider .glide__bullets .glide__bullet.glide__bullet--active { background-color: #D74229; transform: scale(1.27); } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track { overflow: visible; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides { overflow: visible; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item { position: relative; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-dark .hero-item-content h1, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-dark .hero-item-content h2, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-dark .hero-item-content h3, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-dark .hero-item-content h4, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-dark .hero-item-content h5, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-dark .hero-item-content h6, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.theme-dark .hero-item-content p { color: #1B2533; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.title-image .hero-item-content h1 { height: 0; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.title-image .hero-item-content h1 span { opacity: 0; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.title-image .hero-item-content h1:nth-of-type(2) { display: none; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.title-image .hero-item-content .t3 { height: 0; visibility: hidden; margin: 0; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.title-image .hero-item-content .t3:nth-of-type(1) { display: none; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.title-image .hero-item-content .hero-item-title-image { position: relative; width: 100%; height: 100px; margin-bottom: 48px; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.title-image .hero-item-content .hero-item-title-image img { width: 100%; height: 100%; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background { display: block; position: relative; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background picture { width: 100%; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background picture img { display: block; width: 100%; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content { position: absolute; top: 0px; left: 50%; transform: translate(-50%, 0%); padding: 0 7.14286%; margin-top: 10.71429%; } @media all and (orientation: portrait) { .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-center .hero-item-ctas { margin-top: 60%; } } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-background { display: none; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-foreground { position: absolute; bottom: -0.5vw; left: 7.14286%; width: 85.71429%; height: 50%; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content { text-align: center; padding: 14.28571% 7.14286%; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h1, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h2, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h3, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h4, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h5, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h6 { width: 100%; overflow-wrap: anywhere; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h1 span, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h2 span, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h3 span, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h4 span, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h5 span, .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content h6 span { line-height: 1.2em; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .t3 { display: block; margin-top: 12px; color: #1B2533; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .t3.hero-item-subtitle-top { display: none; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content p { margin-top: 24px; color: #D74229; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .hero-item-ctas { display: flex; flex-direction: column; justify-content: center; margin-top: 24px; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .hero-item-ctas .hero-item-cta-arrow { position: relative; width: 0px; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .hero-item-ctas .hero-item-cta-arrow .arrow-element-wrapper { position: absolute; bottom: 50%; right: 0px; width: 50vw; margin: 0 32px -3px 0; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .hero-item-ctas .hero-item-cta-arrow .arrow-element-wrapper:before { padding-bottom: 50%; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .hero-item-ctas .pill-btn { min-width: auto; margin-bottom: 12px; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .hero-item-ctas .pill-btn:last-child { margin-bottom: 0px; } .hero-wrapper .hero-inner .hero-carousel .glide__bullets { display: none; } .hero-wrapper .hero-back-btn { position: absolute; top: 0px; left: 0px; margin: 7.14286% 0 0 7.14286%; } .hero-wrapper .hero-back-btn span { display: none; } .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h1, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h2, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h3, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h4, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h5, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h6, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content p, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content .pill-btn { color: #fff; } @media all and (max-width: 767px) { .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h1, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h2, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h3, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h4, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h5, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h6 { font-size: 72px; } } @media all and (max-width: 375px) { .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h1, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h2, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h3, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h4, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h5, .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h6 { font-size: 55px; } } .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content .t3 { color: #A07B51; } .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content .pill-btn { font-size: 0.875rem; width: 100%; padding: 1.4rem 1.25rem; } @media all and (min-width: 768px) { .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content .pill-btn { padding: 1.875rem 1.25rem; } } @media all and (min-width: 1280px) { .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content .pill-btn { width: 50%; } } @media all and (min-width: 960px) { .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content .pill-btn { width: 60%; } } .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content .pill-btn > svg { fill: #fff; } .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content p.large { margin-bottom: 7%; } @media all and (max-width: 767px) { .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content p.large { font-size: 16px; } } @media all and (max-width: 767px) { .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content p { font-size: 14px; } } .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-background { height: calc(110vh + 50px); } @media all and (max-width: 767px) { .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-background { height: 800px; } } .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-background picture img { object-fit: cover; height: 100%; } @media all and (min-width: 960px) { .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-background { height: auto; } } .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-foreground { display: none; } @media all and (min-width: 960px) { .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-foreground { display: block; width: 40%; right: 3.57143%; left: auto; bottom: 50%; transform: translate(0%, 50%); } } .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-foreground { width: 100%; padding: 0 7.14286%; transform: translate(0%, -50%); left: 0; top: 50%; max-width: 750px; right: 0; margin: auto; text-align: left; } @media all and (min-width: 960px) { .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-foreground { transform-origin: top left; width: 80%; transform: scale(0.75) translate(0%, -50%); padding: 0 0 0 7.14286%; right: auto; max-width: none; } } @media all and (min-width: 1280px) { .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-foreground { width: 68%; transform: scale(0.9) translate(0%, -50%); } } @media all and (min-width: 1680px) { .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-foreground { transform: translate(0%, -50%); width: 58%; } } @media all and (min-width: 768px) { .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .glide__bullets, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .glide__bullets { bottom: 2em; top: unset; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image { height: 95vh; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background img, .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background picture, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background img, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background picture { object-position: center; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-foreground, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-foreground { position: absolute; left: 50%; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content p, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content p { margin-bottom: unset; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .hero-item-ctas, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .hero-item-ctas { display: block; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .hero-item-ctas .pill-btn, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .hero-item-ctas .pill-btn { min-width: 260px; max-width: 270px; width: unset; margin-right: 12px; margin-bottom: 12px; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .hero-item-ctas .pill-btn.last-child, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .hero-item-ctas .pill-btn.last-child { margin-right: 0; margin-bottom: 0; } .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content .hero-item-ctas .pill-btn { min-width: 280px; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-foreground { display: block; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.title-image .hero-item-content .hero-item-title-image { height: 200px; margin-bottom: 24px; } } @media all and (min-width: 768px) and (orientation: portrait) { .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-center .hero-item-ctas { margin-top: 24px; } } @media all and (min-width: 768px) { .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .hero-item-ctas { flex-direction: row; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .hero-item-ctas .pill-btn { min-width: 220px; width: auto; margin-right: 10px; margin-bottom: 0px; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content .hero-item-ctas .pill-btn:last-child { margin-right: 0px; } .hero-wrapper .hero-back-btn { margin: 3.57143% 0 0 3.57143%; } .hero-wrapper .hero-back-btn span { display: inline; } } @media all and (min-width: 768px) and (orientation: landscape) { .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item { height: 100vh; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image:before, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image:before { padding-top: 66%; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background { margin-top: 0; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background:before, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background:before { display: block; content: ""; width: 100%; padding-top: 50%; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background picture img, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-background picture img { height: 100vh; object-fit: cover; } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content { position: absolute; margin-top: 0; width: 53%; top: 50%; left: 7.14286%; text-align: left; padding: 0 7.14286% 0 0; transform: translate(0%, -50%); } .hero-wrapper.theme-vr-dark .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-foreground, .hero-wrapper.theme-vr-light .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-foreground { width: 50%; top: 50%; text-align: left; padding: 0 7.14286% 0 0; transform: translate(0%, -50%); } .hero-wrapper.theme-vr-home .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content { top: 0; transform: translate(-50%, 0); } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content { top: 50%; margin-top: 0; transform: translate(-50%, -50%); } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-foreground { width: 50%; text-align: left; padding: 0 7.14286% 0 0; left: 100%; transform: translate(-100%, -50%); } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-foreground .t3.hero-item-subtitle-top { display: block; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-foreground .t3.hero-item-subtitle-bottom { display: none; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item.has-image .hero-item-content.focus-image-foreground .hero-item-ctas { justify-content: flex-start; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-foreground { left: 3.57143%; width: 42.85714%; height: 80%; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-foreground img { object-position: bottom center; } .hero-wrapper .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-content { padding: 7.14286%; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .location-hero-wrapper { background: #FFFAFB; } .location-hero-wrapper .location-hero-inner .location-hero-image-wrapper .location-hero-image { position: relative; width: 100%; } .location-hero-wrapper .location-hero-inner .location-hero-image-wrapper .location-hero-image:before { display: block; content: ""; width: 100%; padding-top: 112.5%; } .location-hero-wrapper .location-hero-inner .location-hero-image-wrapper .location-hero-image picture, .location-hero-wrapper .location-hero-inner .location-hero-image-wrapper .location-hero-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .location-hero-wrapper .location-hero-inner .location-hero-content { padding: 7.14286% 7.14286% 0; position: relative; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-graphic { position: relative; margin: 0 auto 12px; width: 75%; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-graphic:before { display: block; content: ""; width: 100%; padding-top: 30%; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-graphic.three-two-icon:before { display: block; content: ""; width: 100%; padding-top: 66.66%; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-text { margin-bottom: 32px; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-text .location-hero-text-title { text-align: center; margin-bottom: 32px; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-text .location-hero-text-title h3 { margin-bottom: 12px; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-text .location-hero-text-title p { color: #D74229; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-text p { margin-bottom: 12px; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-text p:nth-child(3) { margin-bottom: 24px; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-cta .pill-btn { width: 100%; margin-bottom: 12px; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-cta .pill-btn:last-child { margin-bottom: 0; } @media all and (min-width: 768px) { .location-hero-wrapper { padding: 7.14286% 0; } .location-hero-wrapper .location-hero-inner { position: relative; display: grid; grid-template-columns: 3.571%; grid-template-rows: auto; grid-auto-columns: 3.571%; } } @media all and (min-width: 768px) and (min-width: 768px) and (orientation: landscape) { .location-hero-wrapper .location-hero-inner { grid-template-columns: 3.571%; grid-auto-columns: 3.571%; } } @media all and (min-width: 768px) { .location-hero-wrapper .location-hero-inner .location-hero-image-wrapper { grid-column: 3/14; } .location-hero-wrapper .location-hero-inner .location-hero-image-wrapper .location-hero-image picture, .location-hero-wrapper .location-hero-inner .location-hero-image-wrapper .location-hero-image img { border-radius: 10px; } .location-hero-wrapper .location-hero-inner .location-hero-content { grid-column: 16/27; padding: 0; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-graphic { margin-left: 0; max-width: 200px; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-text .location-hero-text-title { text-align: left; } .location-hero-wrapper .location-hero-inner .location-hero-content .location-hero-cta .pill-btn { max-width: 275px; } } @media all and (min-width: 768px) and (orientation: landscape) { .location-hero-wrapper .location-hero-inner .location-hero-image-wrapper .location-hero-image:before { display: block; content: ""; width: 100%; padding-top: 77.78%; } } @media all and (min-width: 1280px) { .location-hero-wrapper .location-hero-inner .location-hero-image-wrapper { grid-column: 3/18; } .location-hero-wrapper .location-hero-inner .location-hero-content { grid-column: 20/27; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .product-hero-wrapper { position: relative; background-color: #EBE9E2; } .product-hero-wrapper.theme-cellar-club { background-color: #1B2533; } .product-hero-wrapper.theme-cellar-club .product-hero-inner span.t3 { color: #A07B51; } .product-hero-wrapper.theme-cellar-club .product-hero-inner h3 { color: #FFFAFB; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-images .image-carousel__wrapper .image-carousel__inner .image-carousel .glide__bullets .glide__bullet--active { background-color: #A07B51; } .product-hero-wrapper.theme-cellar-club .product-hero-inner h5 { color: #FFFAFB; } .product-hero-wrapper.theme-cellar-club .product-hero-inner p { color: #FFFAFB; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices { border-color: #A07B51; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices.is-open .choices__inner .choices__list--single { color: #1B2533; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices.is-open .choices__inner .choices__list--single .choices__placeholder { color: #1B2533; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices .choices__inner .choices__list--single { color: #FFFAFB; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices .choices__inner .choices__list--single .choices__placeholder { color: #FFFAFB; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices .choices__list .choices__item--choice { color: #1B2533; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices .choices__list .choices__item--choice.is-selected:before { color: #A07B51; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-options .product-hero-quantity { border-color: #A07B51; color: #FFFAFB; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-decrease:before, .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-increase:before { background-color: #A07B51; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-increase:after { background-color: #A07B51; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-cta .pill-btn.theme-red { background-color: #A07B51; border-color: #A07B51; color: #1B2533; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-cta .pill-btn.theme-red:hover { background-color: transparent; color: #FFFAFB; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-cta .pill-btn.theme-red:hover svg { fill: #fff; } .product-hero-wrapper.theme-cellar-club .product-hero-inner .product-hero-cta .pill-btn.theme-red svg { fill: #1B2533; } .product-hero-wrapper.theme-cellar-club .product-hero-back-btn { color: #FFFAFB; } .product-hero-wrapper.theme-cellar-club .product-hero-back-btn:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .product-hero-wrapper.theme-fat-tire { background-color: transparent; } .product-hero-wrapper.theme-fat-tire .product-hero-inner span.t3 { color: #857550; } .product-hero-wrapper.theme-fat-tire .product-hero-inner h3 { color: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-images .image-carousel__wrapper .image-carousel__inner .image-carousel .glide__bullets .glide__bullet { background-color: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-images .image-carousel__wrapper .image-carousel__inner .image-carousel .glide__bullets .glide__bullet--active { background-color: #857550; } .product-hero-wrapper.theme-fat-tire .product-hero-inner h5 { color: #857550; } .product-hero-wrapper.theme-fat-tire .product-hero-inner p { color: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices { border-color: #857550; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices.is-open .choices__inner .choices__list--single { color: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices.is-open .choices__inner .choices__list--single .choices__placeholder { color: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices .choices__inner .choices__list--single { color: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices .choices__inner .choices__list--single .choices__placeholder { color: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices .choices__list .choices__item--choice { color: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices .choices__list .choices__item--choice.is-selected:before { color: #857550; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-options .product-hero-quantity { border-color: #857550; color: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-decrease:before, .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-increase:before { background-color: #857550; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-increase:after { background-color: #857550; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-cta .pill-btn.theme-red { background-color: #857550; border-color: #857550; color: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-cta .pill-btn.theme-red:hover { background-color: transparent; color: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-cta .pill-btn.theme-red:hover svg { fill: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-inner .product-hero-cta .pill-btn.theme-red svg { fill: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-back-btn { color: #1B2533; } .product-hero-wrapper.theme-fat-tire .product-hero-back-btn:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .product-hero-wrapper.notify .product-hero-notify-wrapper { visibility: visible; transition: visibility 0ms cubic-bezier(0.666, 0, 0.333, 1) 0ms; } .product-hero-wrapper.notify .product-hero-notify-wrapper:before { opacity: 1; } .product-hero-wrapper.notify .product-hero-notify-wrapper .product-hero-notify-inner { opacity: 1; transform: translate3d(-50%, 50%, 0) scale(1); } .product-hero-wrapper picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .product-hero-wrapper picture img { object-fit: cover; width: 100%; height: 100%; } .product-hero-wrapper .product-hero-inner { position: relative; padding: 21.42857% 7.14286% 14.28571%; text-align: center; } .product-hero-wrapper .product-hero-inner span.t3 { color: #D74229; text-transform: uppercase; } .product-hero-wrapper .product-hero-inner h3 { margin-bottom: 24px; } .product-hero-wrapper .product-hero-inner .product-hero-images { position: relative; margin-bottom: 14.28571%; } .product-hero-wrapper .product-hero-inner .product-hero-images:before { display: block; content: ""; width: 100%; padding-top: 100%; } .product-hero-wrapper .product-hero-inner .product-hero-images .image-carousel__wrapper { background-color: transparent; } .product-hero-wrapper .product-hero-inner .product-hero-images .image-carousel__wrapper .image-carousel__inner .image-carousel .glide__bullets { bottom: 0px; margin-bottom: -7.14286%; } .product-hero-wrapper .product-hero-inner h5 { position: absolute; top: 0px; right: 0px; margin: 7.14286% 7.14286% 0 0; color: #D74229; } .product-hero-wrapper .product-hero-inner h5 .product-hero-original-price { display: inline-block; position: relative; color: #ccc; } .product-hero-wrapper .product-hero-inner h5 .product-hero-original-price:after { content: ""; position: absolute; top: 50%; left: -5px; right: -5px; height: 3px; background-color: #ccc; transform: rotate(-7deg); } .product-hero-wrapper .product-hero-inner p { margin-bottom: 24px; } .product-hero-wrapper .product-hero-inner p.product-hero-additional-warning, .product-hero-wrapper .product-hero-inner p.product-hero-notice { margin-bottom: 0; } .product-hero-wrapper .product-hero-inner p.product-hero-additional-warning:not(:empty) { margin-top: 12px; } .product-hero-wrapper .product-hero-inner .product-hero-options { margin-bottom: 24px; } .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-option { white-space: nowrap; } .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices:before { z-index: 2; } .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-option .dropdown .choices .choices__inner { z-index: 1; } .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-option:empty { display: none; } .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-quantity { position: relative; height: 100%; padding: 7.5px; border-bottom: 2px solid #D74229; } .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-count { display: block; line-height: 29px; text-align: left; } .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-decrease, .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-increase { display: block; position: absolute; top: 0px; width: 44px; height: 44px; } .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-decrease:before, .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-increase:before { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 4px; background-color: #D74229; transform: translate(-50%, -50%); } .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-decrease { right: 46px; } .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-increase { right: 2px; } .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-increase:after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 18px; background-color: #D74229; transform: translate(-50%, -50%); } .product-hero-wrapper .product-hero-inner .product-hero-cta { margin-bottom: 48px; display: inline-block; } .product-hero-wrapper .product-hero-inner .product-hero-cta .pill-btn.disabled { cursor: unset; opacity: 0.45; pointer-events: none; } .product-hero-wrapper .product-hero-back-btn { position: absolute; top: 0px; left: 0px; margin: 7.14286% 0 0 7.14286%; } .product-hero-wrapper .product-hero-notify-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; visibility: hidden; transition: visibility 0ms cubic-bezier(0.666, 0, 0.333, 1) 666ms; z-index: 3; } .product-hero-wrapper .product-hero-notify-wrapper:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(27, 37, 51, 0.92); opacity: 0; transition: opacity 666ms cubic-bezier(0.666, 0, 0.333, 1); } .product-hero-wrapper .product-hero-notify-wrapper .product-hero-notify-inner { position: absolute; bottom: 50vh; left: 50%; width: 85.71429%; height: auto; padding: 7.14286%; text-align: center; background-color: #FFFAFB; transform: translate3d(-50%, 50%, 0) scale(0.9); opacity: 0; transition: transform 666ms cubic-bezier(0.666, 0, 0.333, 1), opacity 666ms cubic-bezier(0.666, 0, 0.333, 1); } .product-hero-wrapper .product-hero-notify-wrapper .product-hero-notify-inner .product-hero-notify-content h4, .product-hero-wrapper .product-hero-notify-wrapper .product-hero-notify-inner .product-hero-notify-content p { color: #1B2533; margin-bottom: 24px; } .product-hero-wrapper .product-hero-notify-wrapper .product-hero-notify-inner .product-hero-notify-close-btn { box-sizing: content-box; position: absolute; top: 0px; right: 3.57143%; width: 28px; height: 28px; padding: 10px; margin-top: 3.57143%; transform: translate(10px, -10px); } .product-hero-wrapper .product-hero-notify-wrapper .product-hero-notify-inner .product-hero-notify-close-btn svg { width: 100%; height: 100%; fill: #D74229; } @media all and (min-width: 768px) { .product-hero-wrapper .product-hero-inner { padding: 14.28571%; } .product-hero-wrapper .product-hero-inner .product-hero-images { margin-bottom: 10%; } .product-hero-wrapper .product-hero-inner .product-hero-images .image-carousel__wrapper .image-carousel__inner .image-carousel .glide__bullets { margin-bottom: -5%; } .product-hero-wrapper .product-hero-inner h5 { margin: 3.57143% 3.57143% 0 0; } .product-hero-wrapper .product-hero-back-btn { margin: 3.57143% 0 0 3.57143%; } .product-hero-wrapper .product-hero-notify-wrapper .product-hero-notify-inner { width: 540px; padding: 3.57143%; } } @media all and (min-width: 768px) and (orientation: landscape) { .product-hero-wrapper .product-hero-inner { height: 100%; padding: 10.71429% 7.14286% 7.14286% 50%; text-align: left; } .product-hero-wrapper .product-hero-inner h5 { position: static; margin: 0 0 24px; } .product-hero-wrapper .product-hero-inner .product-hero-images { position: absolute; top: 0px; bottom: 0px; left: 7.14286%; width: 35.71429%; margin: 10.71429% 0 7.14286%; } .product-hero-wrapper .product-hero-inner .product-hero-images .image-carousel__wrapper .image-carousel__inner .image-carousel .glide__bullets { transform: translate(0); } } @media all and (min-width: 1440px) { .product-hero-wrapper .product-hero-inner { padding: 7.14286% 7.14286% 7.14286% 50%; } .product-hero-wrapper .product-hero-inner .product-hero-images { margin: 7.14286% 0; } .product-hero-wrapper .product-hero-inner .product-hero-options { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 48px; } .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-option { width: 49%; } } @media (hover: hover) { .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-decrease, .product-hero-wrapper .product-hero-inner .product-hero-options .product-hero-quantity .product-hero-quantity-increase { cursor: pointer; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .mission-hero__wrapper { background: #DFD3A8; padding-top: 21.42857%; overflow: hidden; position: relative; } .mission-hero__wrapper:before { content: ""; position: absolute; top: 50%; right: 0%; bottom: 0%; left: -20%; width: auto; height: auto; clip-path: polygon(0% 0%, 0% 100%, 100% 100%); -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%); background-color: #EDBD1D; transform: translate(0px, 1px); transform: translate(0px, 1px) scaleX(-1); pointer-events: none; } .mission-hero__wrapper .mission-hero__content { padding: 0 7.14286%; margin-bottom: 24px; position: relative; } .mission-hero__wrapper .mission-hero__content .mission-hero__title { margin-bottom: 24px; } .mission-hero__wrapper .mission-hero__content .mission-hero__title .t1 { display: inline-block; margin-left: 28.57143%; margin-top: 6px; max-width: 100%; } .mission-hero__wrapper .mission-hero__image { width: 100%; position: relative; } .mission-hero__wrapper .mission-hero__image img { width: 100%; display: block; } .mission-hero__wrapper .arrow-element-wrapper { display: none; } @media all and (min-width: 768px) { .mission-hero__wrapper { padding: 0; display: grid; grid-template-columns: 3.571%; grid-template-rows: auto; grid-auto-columns: 3.571%; } } @media all and (min-width: 768px) and (min-width: 768px) and (orientation: landscape) { .mission-hero__wrapper { grid-template-columns: 3.571%; grid-auto-columns: 3.571%; } } @media all and (min-width: 768px) { .mission-hero__wrapper:before { top: -30%; right: 0%; } .mission-hero__wrapper.full-window-height .mission-hero__image { height: 100%; } .mission-hero__wrapper.full-window-height .mission-hero__image picture img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; } .mission-hero__wrapper .mission-hero__content { padding: 20% 0; grid-column: 3 / span 10; grid-row: 1; } .mission-hero__wrapper .mission-hero__content .mission-hero__title { margin-bottom: 48px; } .mission-hero__wrapper .mission-hero__content .mission-hero__text { max-width: 450px; } .mission-hero__wrapper .mission-hero__image { grid-column: 1 / span 28; grid-row: 1; } .mission-hero__wrapper .mission-hero__image img { height: 100%; object-fit: cover; } .mission-hero__wrapper .arrow-element-wrapper { display: block; position: absolute; top: 10%; right: -25%; left: 50%; transform: scaleX(-1); } .mission-hero__wrapper .arrow-element-wrapper:before { padding-bottom: 40%; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ #beer-finder { width: 100%; min-height: auto; overflow: hidden; } #beer-finder.theme-fat-tire .beer-finder__map .map-buttons.zoom { left: 7.14286%; } #beer-finder.theme-fat-tire .beer-finder__map .map-buttons.geolocate { right: 7.14286%; } #beer-finder.theme-fat-tire .beer-finder__map .map-buttons button { box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); } #beer-finder.theme-fat-tire .beer-finder__map .map-buttons .map-btn { background: #857550; } #beer-finder.theme-fat-tire .beer-finder__map .map-buttons .map-btn:after { content: ''; display: block; width: 100%; height: 100%; transform: rotate(45deg); } #beer-finder.theme-fat-tire .beer-finder__map .map-buttons .map-btn.zoom-in:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-fat-tire .beer-finder__map .map-buttons .map-btn.zoom-out:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-fat-tire .beer-finder__map .map-buttons #geolocate-btn { background: #fff; } #beer-finder.theme-fat-tire .beer-finder__map .map-buttons #geolocate-btn:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; background-size: 50%; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section { background: #1B2533; } body.fat-tire #beer-finder.theme-fat-tire .beer-finder__panel .search-section .fieldset input[type="text"] { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-style: normal; font-size: 14px; line-height: 18px; } @media all and (min-width: 1440px) { body.fat-tire #beer-finder.theme-fat-tire .beer-finder__panel .search-section .fieldset input[type="text"] { font-weight: 700; font-style: normal; font-size: 18px; line-height: 25px; } } body.voodoo-ranger #beer-finder.theme-fat-tire .beer-finder__panel .search-section .fieldset input[type="text"] { font-family: "ccsamaritanlower-regular", sans-serif; font-weight: 700; font-size: 14px; font-family: "ccsamaritanlower-bold", sans-serif; } @media all and (min-width: 1440px) { body.voodoo-ranger #beer-finder.theme-fat-tire .beer-finder__panel .search-section .fieldset input[type="text"] { font-family: "ccsamaritanlower-bold", sans-serif; font-weight: 700; font-size: 18px; } } body.fat-tire #beer-finder.theme-fat-tire .beer-finder__panel .search-section .fieldset input[type="text"]::placeholder { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 18px; } @media all and (min-width: 1440px) { body.fat-tire #beer-finder.theme-fat-tire .beer-finder__panel .search-section .fieldset input[type="text"]::placeholder { font-weight: 400; font-style: normal; font-size: 18px; line-height: 25px; } } body.voodoo-ranger #beer-finder.theme-fat-tire .beer-finder__panel .search-section .fieldset input[type="text"]::placeholder { font-family: "ccsamaritanlower-regular", sans-serif; font-size: 14px; line-height: 20px; } @media all and (min-width: 1440px) { body.voodoo-ranger #beer-finder.theme-fat-tire .beer-finder__panel .search-section .fieldset input[type="text"]::placeholder { font-size: 18px; line-height: 27px; } } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .fieldset input[type="text"].active + button { background: #857550; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .fieldset input[type="text"].active + button:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .fieldset input[type="text"] + button:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.alt .choices { border: none; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.alt .choices:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.alt .choices.is-open:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } body.fruit-smash #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.alt .choices .choices__list .choices__item { font-family: "ITCBlairBold", Helvetica, sans-serif; text-transform: uppercase; letter-spacing: normal; font-size: calc(16px + (25 - 16) * ((100vw - 340px) / (1440 - 340))); line-height: 1em; } @media all and (min-width: 1440px) { body.fruit-smash #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.alt .choices .choices__list .choices__item { font-size: 25px; line-height: 1em; } } body.fat-tire #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.alt .choices .choices__list .choices__item { font-family: "CardinalSemiBold", "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; font-size: calc(16px + (25 - 16) * ((100vw - 340px) / (1440 - 340))); line-height: 1em; } @media all and (min-width: 1440px) { body.fat-tire #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.alt .choices .choices__list .choices__item { font-size: 25px; line-height: 1em; } } body.voodoo-ranger #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.alt .choices .choices__list .choices__item { font-family: "ccbiffbamboom", sans-serif; text-transform: uppercase; letter-spacing: 0.01em; font-size: calc(16px + (25 - 16) * ((100vw - 340px) / (1440 - 340))); line-height: 1em; } @media all and (min-width: 1440px) { body.voodoo-ranger #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.alt .choices .choices__list .choices__item { font-size: 44px; line-height: 1.3em; } } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.subnav .choices { border: 0px; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.subnav .choices.is-open .choices__inner { background-color: #BC2F2B; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.subnav .choices:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.subnav .choices .choices__inner .choices__placeholder { color: #fff; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.subnav .choices .choices__inner .choices__list.choices__list--single { color: #fff; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.subnav .choices .choices__list--dropdown .choices__list .choices__item.is-selected:before { background-color: #BC2F2B; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.filter .choices.is-open:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.filter .choices.is-open .choices__inner .choices__placeholder, #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.filter .choices.is-open .choices__inner .choices__list--single { color: #1B2533; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.filter .choices:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.filter .choices .choices__inner .choices__placeholder, #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown.filter .choices .choices__inner .choices__list--single { color: #fff; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown .choices { border-bottom: 2px solid #BC2F2B; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown .choices.alt { border: none; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown .choices .choices__list.choices__list--single .choices__item { color: #fff; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown .choices:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown .choices.is-open .choices__inner { background: #fff; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown .choices .choices__placeholder { color: #1B2533; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown .choices .choices__list .choices__item.is-selected { color: #1B2533; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown .choices .choices__list .choices__item.is-selected::before { color: #BC2F2B; } #beer-finder.theme-fat-tire .beer-finder__panel .search-section .dropdown .choices .choices__list .choices__item--choice { color: #BC2F2B; } #beer-finder.theme-fat-tire .beer-finder__panel .search-results__list { background: #EBE9E2; } #beer-finder.theme-fat-tire .beer-finder__panel .search-results__list .search-results__item { padding: 14.28571% 7.14286%; background: #EBE9E2; border-bottom: 4px solid #fff; } #beer-finder.theme-fat-tire .beer-finder__panel .search-results__list .search-results__item.selected { border: 2px dashed #857550; } #beer-finder.theme-fat-tire .beer-finder__panel .search-results__list .search-results__item.show-details .details .a6 { color: #857550; } #beer-finder.theme-fat-tire .beer-finder__panel .search-results__list .search-results__item .address { font-style: normal; } body.fat-tire #beer-finder.theme-fat-tire .beer-finder__panel .search-results__list .search-results__item .address { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 18px; } @media all and (min-width: 1440px) { body.fat-tire #beer-finder.theme-fat-tire .beer-finder__panel .search-results__list .search-results__item .address { font-weight: 400; font-style: normal; font-size: 18px; line-height: 25px; } } body.voodoo-ranger #beer-finder.theme-fat-tire .beer-finder__panel .search-results__list .search-results__item .address { font-family: "ccsamaritanlower-regular", sans-serif; font-size: 14px; line-height: 20px; } @media all and (min-width: 1440px) { body.voodoo-ranger #beer-finder.theme-fat-tire .beer-finder__panel .search-results__list .search-results__item .address { font-size: 18px; line-height: 27px; } } #beer-finder.theme-fat-tire .beer-finder__panel .search-results__list .search-results__item .details-toggle { color: #857550; background: none; border-bottom: 2px solid #857550; } #beer-finder.theme-fat-tire .beer-finder__panel .search-results__list .search-results__item .pill-btn { background-color: #857550; color: #1B2533; border: 3px solid #857550; } #beer-finder.theme-fat-tire .beer-finder__panel .search-results__list .search-results__item .pill-btn svg { fill: #1B2533; } #beer-finder.theme-voodoo-ranger .beer-finder__map .map-buttons.zoom { left: 7.14286%; } #beer-finder.theme-voodoo-ranger .beer-finder__map .map-buttons.geolocate { right: 7.14286%; } #beer-finder.theme-voodoo-ranger .beer-finder__map .map-buttons button { box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); } #beer-finder.theme-voodoo-ranger .beer-finder__map .map-buttons .map-btn { background: #F1C218; } #beer-finder.theme-voodoo-ranger .beer-finder__map .map-buttons .map-btn:after { content: ''; display: block; width: 100%; height: 100%; transform: rotate(45deg); } #beer-finder.theme-voodoo-ranger .beer-finder__map .map-buttons .map-btn.zoom-in:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-voodoo-ranger .beer-finder__map .map-buttons .map-btn.zoom-out:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-voodoo-ranger .beer-finder__map .map-buttons #geolocate-btn { background: #FEFEFE; } #beer-finder.theme-voodoo-ranger .beer-finder__map .map-buttons #geolocate-btn:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; background-size: 50%; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section { background: #F1C218; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset { border: 3px solid #231F20; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type="text"] { border-radius: 0px; } body.fat-tire #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type="text"] { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700; font-style: normal; font-size: 14px; line-height: 18px; } @media all and (min-width: 1440px) { body.fat-tire #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type="text"] { font-weight: 700; font-style: normal; font-size: 18px; line-height: 25px; } } body.voodoo-ranger #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type="text"] { font-family: "ccsamaritanlower-regular", sans-serif; font-weight: 700; font-size: 14px; font-family: "ccsamaritanlower-bold", sans-serif; } @media all and (min-width: 1440px) { body.voodoo-ranger #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type="text"] { font-family: "ccsamaritanlower-bold", sans-serif; font-weight: 700; font-size: 18px; } } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type="text"] + button { border-radius: 0px; } body.fat-tire #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type="text"]::placeholder { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 18px; } @media all and (min-width: 1440px) { body.fat-tire #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type="text"]::placeholder { font-weight: 400; font-style: normal; font-size: 18px; line-height: 25px; } } body.voodoo-ranger #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type="text"]::placeholder { font-family: "ccsamaritanlower-regular", sans-serif; font-size: 14px; line-height: 20px; } @media all and (min-width: 1440px) { body.voodoo-ranger #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type="text"]::placeholder { font-size: 18px; line-height: 27px; } } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type="text"].active + button { background: #231F20; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type="text"].active + button:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type="text"] + button:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } body.voodoo-ranger #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown .choices .choices__inner .choices__list.choices__list--single .choices__item { font-family: "festivoLC-Basic", sans-serif; text-transform: uppercase; font-size: 20px; } @media all and (min-width: 1440px) { body.voodoo-ranger #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown .choices .choices__inner .choices__list.choices__list--single .choices__item { font-size: 20px; } } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.alt .choices { border: none; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.alt .choices:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.alt .choices.is-open:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.alt .choices .choices__list .choices__item { white-space: nowrap; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.subnav .choices { border: 0px; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.subnav .choices.is-open .choices__inner { background-color: #FBF8EE; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.subnav .choices:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.subnav .choices .choices__inner .choices__placeholder { color: #231F20; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.subnav .choices .choices__inner .choices__list.choices__list--single { color: #231F20; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.subnav .choices .choices__list--dropdown .choices__list .choices__item.is-selected:before { background-color: #BC2F2B; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.filter .choices.is-open:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.filter .choices.is-open .choices__inner .choices__placeholder, #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.filter .choices.is-open .choices__inner .choices__list--single { color: #231F20; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.filter .choices:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.filter .choices .choices__inner .choices__placeholder, #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown.filter .choices .choices__inner .choices__list--single { color: #fff; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown .choices { border-bottom: 2px solid #231F20; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown .choices.alt { border: none; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown .choices .choices__list.choices__list--single .choices__item { color: #231F20; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown .choices:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown .choices.is-open .choices__inner { background: #FBF8EE; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown .choices .choices__placeholder { color: #231F20; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown .choices .choices__list .choices__item.is-selected { color: #231F20; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown .choices .choices__list .choices__item.is-selected::before { color: #231F20; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .dropdown .choices .choices__list .choices__item--choice { color: #231F20; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list { background: #FBF8EE; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list .search-results__item { padding: 14.28571% 7.14286%; background: #FBF8EE; border-bottom: 4px solid #FEFEFE; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list .search-results__item.selected { border: none; background-color: #57BBB8; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list .search-results__item.show-details .details .a6 { color: #231F20; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list .search-results__item .address { font-style: normal; } body.fat-tire #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list .search-results__item .address { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 18px; } @media all and (min-width: 1440px) { body.fat-tire #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list .search-results__item .address { font-weight: 400; font-style: normal; font-size: 18px; line-height: 25px; } } body.voodoo-ranger #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list .search-results__item .address { font-family: "ccsamaritanlower-regular", sans-serif; font-size: 14px; line-height: 20px; } @media all and (min-width: 1440px) { body.voodoo-ranger #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list .search-results__item .address { font-size: 18px; line-height: 27px; } } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list .search-results__item .details-toggle { color: #231F20; background: none; border-bottom: 2px solid #F1C218; } body.voodoo-ranger #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list .search-results__item .details-toggle { font-family: "festivoLC-Basic", sans-serif; text-transform: uppercase; font-size: 20px; } @media all and (min-width: 1440px) { body.voodoo-ranger #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list .search-results__item .details-toggle { font-size: 20px; } } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list .search-results__item .pill-btn { background-color: #F1C218; color: #231F20; border: 3px solid #231F20; border-radius: 0px; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-results__list .search-results__item .pill-btn svg { fill: #231F20; } #beer-finder .beer-finder__map { height: 50vh; position: relative; background: #FFFAFB; } #beer-finder .beer-finder__map #map { width: 100%; height: 100%; position: relative; } #beer-finder .beer-finder__map .map-buttons { position: absolute; display: flex; flex-direction: column; bottom: 7.14286%; z-index: 5; } #beer-finder .beer-finder__map .map-buttons.zoom { left: 7.14286%; } #beer-finder .beer-finder__map .map-buttons.geolocate { right: 7.14286%; } #beer-finder .beer-finder__map .map-buttons button { box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); border: none; outline: none; width: 30px; height: 30px; cursor: pointer; } #beer-finder .beer-finder__map .map-buttons .map-btn { background: #D74229; margin-bottom: 2px; padding: 25%; } #beer-finder .beer-finder__map .map-buttons .map-btn:after { content: ''; display: block; width: 100%; height: 100%; transform: rotate(45deg); } #beer-finder .beer-finder__map .map-buttons .map-btn.zoom-in:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder .beer-finder__map .map-buttons .map-btn.zoom-out:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } #beer-finder .beer-finder__map .map-buttons #geolocate-btn { background: #FFFAFB; margin-top: 10px; border-radius: 50%; } #beer-finder .beer-finder__map .map-buttons #geolocate-btn:disabled:after { opacity: 0.5; pointer-events: none; } #beer-finder .beer-finder__map .map-buttons #geolocate-btn:after { content: ''; display: block; width: 100%; height: 100%; position: relative; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; background-position: 45% 55%; background-size: 50%; } #beer-finder .beer-finder__panel .search-section { display: flex; flex-wrap: wrap; align-items: flex-start; padding: 7.14286%; background: #DFD3A8; } #beer-finder .beer-finder__panel .search-section .fieldset input[type="text"] { flex: 1; } #beer-finder .beer-finder__panel .search-section .fieldset input[type="text"].active + button { background: #D74229; } #beer-finder .beer-finder__panel .search-section .fieldset input[type="text"].active + button:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } #beer-finder .beer-finder__panel .search-section .fieldset input[type="text"] + button { flex: 0 0 4em; } #beer-finder .beer-finder__panel .search-section .fieldset input[type="text"] + button:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } #beer-finder .beer-finder__panel .search-results__list { background: #EBE9E2; } #beer-finder .beer-finder__panel .search-results__list.processing li { padding: 7.14286%; } #beer-finder .beer-finder__panel .search-results__list.processing .search-results__item { opacity: 0; transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1); } #beer-finder .beer-finder__panel .search-results__list .search-results__item { padding: 14.28571% 7.14286%; background: #EBE9E2; border-bottom: 4px solid #FFFAFB; transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1); opacity: 1; overflow: hidden; } #beer-finder .beer-finder__panel .search-results__list .search-results__item.selected { border: 2px dashed #D74229; } #beer-finder .beer-finder__panel .search-results__list .search-results__item.show-details .details { height: 100px; } #beer-finder .beer-finder__panel .search-results__list .search-results__item.show-details .details-toggle { height: 0px; } #beer-finder .beer-finder__panel .search-results__list .search-results__item:not(.empty) .address { text-transform: capitalize; } #beer-finder .beer-finder__panel .search-results__list .search-results__item .t4 { margin-bottom: 6px; pointer-events: none; } #beer-finder .beer-finder__panel .search-results__list .search-results__item .dealer-name { margin-bottom: 12px; pointer-events: none; } #beer-finder .beer-finder__panel .search-results__list .search-results__item .details { display: flex; flex-direction: column; height: 0px; transition: height 333ms cubic-bezier(0.666, 0, 0.333, 1); margin-bottom: 32px; overflow: hidden; margin-right: -14.28571%; } #beer-finder .beer-finder__panel .search-results__list .search-results__item .details .a6 { margin-bottom: 12px; } #beer-finder .beer-finder__panel .search-results__list .search-results__item .details .details__brands { display: flex; width: 100%; height: 100%; align-items: stretch; overflow-x: auto; overflow-y: hidden; } #beer-finder .beer-finder__panel .search-results__list .search-results__item .details .details__brands li { margin-right: 12px; height: 100%; } #beer-finder .beer-finder__panel .search-results__list .search-results__item .details .details__brands li:last-of-type { padding-right: 40px; } #beer-finder .beer-finder__panel .search-results__list .search-results__item .details .details__brands li img { display: block; height: 100%; margin: 0; } #beer-finder .beer-finder__panel .search-results__list .search-results__item .address { white-space: pre-line; margin-bottom: 12px; pointer-events: none; } #beer-finder .beer-finder__panel .search-results__list .search-results__item .details-toggle { display: block; margin-bottom: 12px; border: none; outline: none; color: #D74229; background: none; cursor: pointer; height: 1.5em; border-bottom: 2px solid #D74229; transition: height 333ms cubic-bezier(0.666, 0, 0.333, 1); overflow: hidden; } #beer-finder .beer-finder__panel .search-results__list .search-results__item .pill-btn { margin-bottom: 12px; } @media all and (min-width: 768px) { #beer-finder { display: grid; grid-template-columns: 3.571%; grid-template-rows: auto; grid-auto-columns: 3.571%; grid-template-rows: 100%; min-height: unset; overflow: hidden; } } @media all and (min-width: 768px) and (min-width: 768px) and (orientation: landscape) { #beer-finder { grid-template-columns: 3.571%; grid-auto-columns: 3.571%; } } @media all and (min-width: 768px) { #beer-finder .beer-finder__map { grid-column: 1 / span 18; grid-row: 1 / span 1; height: unset; } #beer-finder .beer-finder__map .map-buttons .map-btn { width: 40px; height: 40px; } #beer-finder .beer-finder__map .map-buttons #geolocate-btn { width: 40px; height: 40px; } #beer-finder .beer-finder__panel { display: flex; flex-direction: column; grid-column: 19 / span 10; height: 100%; overflow: hidden; } #beer-finder .beer-finder__panel .search-section { padding: 7.14286%; } #beer-finder .beer-finder__panel .search-results__list { height: 100%; overflow: auto; } #beer-finder .beer-finder__panel .search-results__list .search-results__item { padding: 7.14286%; } #beer-finder .beer-finder__panel .search-results__list .search-results__item:last-of-type { border-bottom: none; } #beer-finder .beer-finder__panel .search-results__list .search-results__item .pill-btn { width: 40%; } } @media all and (min-width: 960px) { #beer-finder .beer-finder__panel .search-section .dropdown { flex: 1; margin-top: 12px; } #beer-finder .beer-finder__panel .search-section .dropdown.alt { flex: 0; flex-basis: auto; } } @media all and (min-width: 1280px) { #beer-finder .beer-finder__panel .search-section .fieldset { flex: 1; margin-right: 24px; } #beer-finder .beer-finder__panel .search-section .dropdown { flex: unset; } #beer-finder .beer-finder__panel .search-section .dropdown.alt { margin-left: auto; } #beer-finder .beer-finder__panel .search-section .dropdown.alt .choices__list--dropdown { left: unset; right: 0; } #beer-finder .beer-finder__panel .search-results__list .search-results__item { padding: 7.14286%; } } @media (hover: hover) { #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type=text] + button:hover { background: #231F20; } #beer-finder.theme-voodoo-ranger .beer-finder__panel .search-section .fieldset input[type=text] + button:hover:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } #beer-finder .beer-finder__map .map-buttons button:hover { transform: scale(1.005); } #beer-finder .beer-finder__panel .search-section .fieldset input[type=text] + button:hover { background: #D74229; } #beer-finder .beer-finder__panel .search-section .fieldset input[type=text] + button:hover:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } #beer-finder .beer-finder__panel .search-results__list .search-results__item:not(.selected):hover { cursor: pointer; background-color: #e2e1dc; } #beer-finder .beer-finder__panel .search-results__list .search-results__item .pill-btn:hover { background-color: transparent; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .company-story-timeline__wrapper { background: #DFD3A8; overflow: hidden; transition: max-height 666ms ease 666ms; height: auto; } .company-story-timeline__wrapper.theme-fat-tire { background: transparent; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__intro .intro__content .t3 { color: #857550; } body.fat-tire .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__intro .intro__content .intro__text { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 18px; } @media all and (min-width: 1440px) { body.fat-tire .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__intro .intro__content .intro__text { font-weight: 400; font-style: normal; font-size: 18px; line-height: 25px; } } body.voodoo-ranger .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__intro .intro__content .intro__text { font-family: "ccsamaritanlower-regular", sans-serif; font-size: 14px; line-height: 20px; } @media all and (min-width: 1440px) { body.voodoo-ranger .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__intro .intro__content .intro__text { font-size: 18px; line-height: 27px; } } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__timeline::before { display: none; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__timeline .scroll-drag-indicator .scroll-drag-indicator__inner { background: #857550; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__timeline .scroll-drag-indicator .scroll-drag-indicator__inner:after { background: #857550; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__timeline .carousel__ui .carousel__buttons .arrow-button { background: transparent; border: 2px solid #857550; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__timeline .carousel__ui .carousel__buttons .arrow-button.close-btn:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__timeline .carousel__ui .carousel__buttons .arrow-button.special:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__timeline .carousel__ui .carousel__buttons .arrow-button.special.filled:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__timeline .carousel__ui .carousel__buttons .arrow-button.overview-btn:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__timeline .glide__bullets .glide__bullet { background-color: #fff; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__timeline .glide__bullets .glide__bullet.active { background-color: #857550; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__overview:before { display: none; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__overview .scroll-drag-indicator .scroll-drag-indicator__inner { background: #857550; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__overview .scroll-drag-indicator .scroll-drag-indicator__inner:after { background: #857550; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper .overview__item-inner .item__plus { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__lines line { fill: none; stroke: #857550; stroke-dasharray: 0; stroke-width: 2; } .company-story-timeline__wrapper.is-intro { max-height: 300vh !important; } .company-story-timeline__wrapper.is-intro .company-story-timeline__inner { transform: translate3d(0, 0, 0); } .company-story-timeline__wrapper.is-intro .company-story-timeline__inner .company-story-timeline__intro { opacity: 1; visibility: visible; } .company-story-timeline__wrapper.is-intro .company-story-timeline__inner .company-story-timeline__timeline { opacity: 0; visibility: hidden; } .company-story-timeline__wrapper.is-intro .company-story-timeline__inner .company-story-timeline__overview { opacity: 0; visibility: hidden; } .company-story-timeline__wrapper.is-timeline .company-story-timeline__inner .company-story-timeline__intro { opacity: 0; visibility: hidden; transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1) 333ms, visibility 0ms linear 1332ms; } .company-story-timeline__wrapper.is-timeline .company-story-timeline__inner .company-story-timeline__timeline { opacity: 1; visibility: visible; transform: scale(1); transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1) 666ms, transform 666ms cubic-bezier(0.666, 0, 0.333, 1) 333ms, visibility 0ms linear 0ms; } .company-story-timeline__wrapper.is-timeline .company-story-timeline__inner .company-story-timeline__timeline .scroll-drag-indicator { opacity: 1; transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1) 2664ms, visibility 0ms linear 2331ms; } .company-story-timeline__wrapper.is-timeline .company-story-timeline__inner .company-story-timeline__timeline .scroll-drag-indicator.hidden { opacity: 0; } .company-story-timeline__wrapper.is-timeline .company-story-timeline__inner .company-story-timeline__overview { opacity: 0; visibility: hidden; transform: scale(1.2); transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1) 333ms, transform 666ms cubic-bezier(0.666, 0, 0.333, 1), visibility 0ms linear 1332ms; } .company-story-timeline__wrapper.is-overview .company-story-timeline__inner { visibility: visible; } .company-story-timeline__wrapper.is-overview .company-story-timeline__inner .company-story-timeline__intro { opacity: 0; transform: scale(1.2); visibility: hidden; } .company-story-timeline__wrapper.is-overview .company-story-timeline__inner .company-story-timeline__timeline { opacity: 0; visibility: hidden; transform: scale(0.8); transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1) 333ms, transform 666ms cubic-bezier(0.666, 0, 0.333, 1), visibility 0ms linear 1332ms; } .company-story-timeline__wrapper.is-overview .company-story-timeline__inner .company-story-timeline__overview { opacity: 1; visibility: visible; transform: scale(1); transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1) 666ms, transform 666ms cubic-bezier(0.666, 0, 0.333, 1) 333ms, visibility 0ms linear 0ms; } .company-story-timeline__wrapper .company-story-timeline__inner { position: relative; transition: transform 1332ms cubic-bezier(0.666, 0, 0.333, 1); } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__intro, .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview, .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline { visibility: hidden; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__intro { height: 100%; text-align: center; transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1) 666ms, transform 666ms cubic-bezier(0.666, 0, 0.333, 1) 333ms, visibility 0ms linear 0ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__intro .intro__content { padding: 14.28571% 3.57143% 7.14286%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__intro .intro__content .t3 { margin-bottom: 12px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__intro .intro__content h1 { margin-bottom: 12px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__intro .intro__content h4 { margin-bottom: 24px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__intro .intro__content .intro__text { text-transform: none; margin: auto; margin-bottom: 24px; max-width: 650px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__intro .intro__content button[type="submit"] { background: none; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__intro .intro__image { pointer-events: none; z-index: -5; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__intro .intro__image img { display: block; width: 100%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline:before { content: ""; position: absolute; top: 70%; right: -100%; bottom: -30%; left: -200%; width: auto; height: auto; clip-path: polygon(0% 0%, 0% 100%, 100% 100%); -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%); background-color: #D74229; transform: translate(0px, 1px); transform: translate(0px, 1px) scaleX(-1); pointer-events: none; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline::before { transition: transform 1332ms cubic-bezier(0.666, 0, 0.333, 1); pointer-events: none; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline.is-chapter::before { transform: scaleX(-1) scale(1.1) translate(0, -45%) rotate(-25deg); } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .scroll-drag-indicator { display: none; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .carousel__ui { position: absolute; top: 0; right: 7.14286%; padding-top: 7.14286%; z-index: 15; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .carousel__ui .carousel__buttons { flex-direction: column; align-items: flex-end; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .carousel__ui .carousel__buttons .arrow-button.special { display: none; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .carousel__ui .carousel__buttons .arrow-button { margin: 0; margin-right: 0; margin-bottom: 6px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .carousel__ui .carousel__buttons .arrow-button.close-btn:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .carousel__ui .carousel__buttons .arrow-button.overview-btn:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics { display: none; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide { color: #1B2533; padding: 7.14286%; padding-right: 14.28571%; height: 100%; position: absolute; visibility: hidden; pointer-events: none; transition: visibility 0ms linear 666ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide.active { visibility: visible; transition: visibility 0ms linear 0ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide.active .details-slide__content > * { opacity: 1; transform: translateY(0px); transition-timing-function: cubic-bezier(0.666, 0, 0.333, 1); transition-duration: 666ms; transition-delay: 333ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide.active .details-slide__content > *:nth-child(1) { transition-delay: 555ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide.active .details-slide__content > *:nth-child(2) { transition-delay: 666ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide.active .details-slide__content > *:nth-child(3) { transition-delay: 777ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide.active .details-slide__content > *:nth-child(4) { transition-delay: 888ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide.active .details-slide__content > *:nth-child(5) { transition-delay: 999ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide .details-slide__content > * { opacity: 0; transition: transform 333ms cubic-bezier(0.666, 0, 0.333, 1), opacity 333ms cubic-bezier(0.666, 0, 0.333, 1); transform: translateY(50px); } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide .details-slide__content > *:nth-child(-2) { transition-delay: 555ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide .details-slide__content > *:nth-child(-1) { transition-delay: 444ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide .details-slide__content > *:nth-child(0) { transition-delay: 333ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide .details-slide__content > *:nth-child(1) { transition-delay: 222ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide .details-slide__content > *:nth-child(2) { transition-delay: 111ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide .details-slide__content .details-slide__text { margin-top: 24px; margin-bottom: 24px; max-width: 450px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-slides .details-slide .details-slide__content .pill-btn { pointer-events: auto; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__track { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__track .glide__slides { height: 100%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__track .glide__slides .glide__slide { display: flex; flex-direction: column; height: auto; position: relative; opacity: 0; transition: opacity 333ms ease-in; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__track .glide__slides .glide__slide.active { opacity: 1; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__track .glide__slides .glide__slide picture { margin-top: auto; position: relative; margin-bottom: 12px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__track .glide__slides .glide__slide picture:before { display: block; content: ""; width: 100%; padding-top: 56.25%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__track .glide__slides .glide__slide picture img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; display: block; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__bullets { flex-wrap: nowrap; left: 50%; transform: translate(0); transition: transform 333ms cubic-bezier(0.666, 0, 0.333, 1); margin-left: -4.5px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__bullets .glide__bullet { background-color: #FFFAFB; transition: transform 333ms cubic-bezier(0.666, 0, 0.333, 1), opacity 333ms cubic-bezier(0.666, 0, 0.333, 1); opacity: 0; margin: 0 0.4em; width: 10px; height: 10px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__bullets .glide__bullet.offset-3 { opacity: 0.4; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__bullets .glide__bullet.offset-2 { opacity: 0.6; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__bullets .glide__bullet.offset-1 { opacity: 1; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__bullets .glide__bullet.offset-0 { opacity: 1; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__bullets .glide__bullet.active { opacity: 1; transform: scale(1.3); background-color: #EDBD1D; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; padding: 14.28571% 7.14286%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview:before { content: ""; position: absolute; top: 70%; right: 0%; bottom: 0%; left: -50%; width: auto; height: auto; clip-path: polygon(0% 0%, 0% 100%, 100% 100%); -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%); background-color: #EDBD1D; transform: translate(0px, 1px); transform: translate(0px, 1px) scaleX(-1); pointer-events: none; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .scroll-drag-indicator { bottom: 0; left: 50%; margin-bottom: 7.14286%; padding-bottom: 50px; transform: translate(-50%, 0%); display: block; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; overflow-y: hidden; align-items: center; transition: transform 1332ms cubic-bezier(0.666, 0, 0.333, 1); padding: 0 14.28571%; } @keyframes wiggle { from { transform: translate(0, -7px); } to { transform: translate(0, 7px); } } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper { flex: 0 0 auto; position: relative; margin-right: 8.33333%; transition: 333ms cubic-bezier(0.666, 0, 0.333, 1); transition-property: opacity, transform; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px dashed #D74229; opacity: 0; transition: 333ms cubic-bezier(0.666, 0, 0.333, 1); transition-property: transform, opacity; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper.active:before { transform: scale(1.3); opacity: 1; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper.active .overview__item-inner { transform: scale(1.2); background: #D74229; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper.active .overview__item-inner h5 { transform: scale(1.15) translateY(-10%); } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper.active .overview__item-inner .item__plus { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper .overview__item-inner { display: block; width: 50vw; height: 50vw; border-radius: 50%; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #FFFAFB; padding: 12px; background: #1B2533; transition: 333ms cubic-bezier(0.666, 0, 0.333, 1); transition-property: opacity, transform; cursor: pointer; overflow: hidden; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper .overview__item-inner p { order: 2; position: relative; text-transform: uppercase; transition: transform 333ms cubic-bezier(0.666, 0, 0.333, 1); margin-bottom: 6px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper .overview__item-inner h5 { order: 1; position: relative; transition: transform 333ms cubic-bezier(0.666, 0, 0.333, 1); margin-bottom: 6px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper .overview__item-inner .item__plus { order: 3; position: relative; width: 25px; height: 25px; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; transform: rotate(45deg); margin-top: 12px; transition: background-image 333ms cubic-bezier(0.666, 0, 0.333, 1); } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper .overview__item-inner .item__image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper .overview__item-inner .item__image img { object-fit: cover; transform-origin: 50% 50%; transform: scale(1.5) translate(-25%, -25%); opacity: 0.15; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper:first-of-type { margin-left: 12.5%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1) 166.5ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__lines line { fill: none; stroke: #D74229; stroke-miterlimit: 10; stroke-dasharray: 10 7; stroke-width: 2; } @media all and (min-width: 768px) { .company-story-timeline__wrapper { background: #DFD3A8; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide.active .sun-graphic, .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide.active .circles-graphic { display: none; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide.active .arrow-element-wrapper { display: none; } .company-story-timeline__wrapper.is-intro .company-story-timeline__inner { transform: translate3d(0, 0, 0); } .company-story-timeline__wrapper.is-intro .company-story-timeline__inner .company-story-timeline__intro { opacity: 1; visibility: visible; } .company-story-timeline__wrapper.is-intro .company-story-timeline__inner .company-story-timeline__timeline { opacity: 1; visibility: visible; } .company-story-timeline__wrapper.is-timeline .company-story-timeline__inner { transform: translate3d(0, -100%, 0); } .company-story-timeline__wrapper.is-timeline .company-story-timeline__inner .company-story-timeline__intro { opacity: 1; visibility: visible; } .company-story-timeline__wrapper.is-timeline .company-story-timeline__inner .company-story-timeline__timeline { opacity: 1; visibility: visible; transform: translate3d(0, 100%, 0) scale(1); transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1) 666ms, transform 666ms cubic-bezier(0.666, 0, 0.333, 1) 333ms, visibility 0ms linear 0ms; } .company-story-timeline__wrapper.is-timeline .company-story-timeline__inner .company-story-timeline__overview { opacity: 0; visibility: hidden; transform: translate3d(0, 100%, 0) scale(1.2); transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1) 333ms, transform 666ms cubic-bezier(0.666, 0, 0.333, 1), visibility 0ms linear 1332ms; } .company-story-timeline__wrapper.is-overview .company-story-timeline__inner { visibility: visible; transform: translate3d(0, -100%, 0); } .company-story-timeline__wrapper.is-overview .company-story-timeline__inner .company-story-timeline__intro { opacity: 0; transform: scale(1.2); visibility: hidden; } .company-story-timeline__wrapper.is-overview .company-story-timeline__inner .company-story-timeline__timeline { opacity: 0; visibility: hidden; transform: translate3d(0, 100%, 0) scale(0.8); transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1) 333ms, transform 666ms cubic-bezier(0.666, 0, 0.333, 1), visibility 0ms linear 1332ms; } .company-story-timeline__wrapper.is-overview .company-story-timeline__inner .company-story-timeline__overview { opacity: 1; visibility: visible; transform: translate3d(0, 100%, 0) scale(1); transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1) 666ms, transform 666ms cubic-bezier(0.666, 0, 0.333, 1) 333ms, visibility 0ms linear 0ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__intro { text-align: center; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__intro .intro__content { padding-top: 7.14286%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__intro .intro__image { position: absolute; bottom: 0; left: 0; width: 100%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline { transform: translate3d(0, 100%, 0); } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .scroll-drag-indicator { display: block; opacity: 0; right: 0; bottom: 0; transition: opacity 0ms cubic-bezier(0.666, 0, 0.333, 1) 0ms, visibility 0ms linear 0ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .carousel__ui .carousel__buttons .arrow-button.special { display: block; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .carousel__ui .carousel__buttons .arrow-button { margin-bottom: 12px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide { color: #1B2533; padding: 7.14286%; width: 100%; height: 100%; position: absolute; pointer-events: none; transition: visibility 0ms linear 666ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide.active { visibility: visible; transition: visibility 0ms linear 0ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide.active .sun-graphic, .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide.active .circles-graphic { transform: scale(1); transition-delay: 666ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide.active .arrow-element-wrapper { opacity: 1; transition-delay: 666ms; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide .sun-graphic, .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide .circles-graphic { transform-origin: center center; transition: transform 666ms cubic-bezier(0.666, 0, 0.333, 1); transform: scale(0); } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide .sun-graphic { display: block; width: 40vw; height: 40vw; border-radius: 50%; position: absolute; top: 50%; left: 57.14286%; margin-top: -20vw; margin-left: -20vw; background: #EDBD1D; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide .circles-graphic { display: block; width: 40vw; height: 40vw; border-radius: 50%; position: absolute; top: 30%; left: 64.28571%; margin-top: -20vw; margin-left: -20vw; border: 2px dashed #00AABE; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide .circles-graphic:before, .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide .circles-graphic:after { content: ""; position: absolute; border-radius: 50%; top: -5%; left: -5%; width: 110%; height: 110%; border: 2px dashed #00AABE; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide .circles-graphic:before { top: 5%; left: 5%; width: 90%; height: 90%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .timeline__details-graphics .graphics-slide .arrow-element-wrapper { position: absolute; top: 25%; left: -50%; width: 140%; height: 30%; transition: opacity 666ms cubic-bezier(0.666, 0, 0.333, 1); opacity: 0; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .details-slide { position: absolute; width: 100%; top: 0; left: 0; padding-top: 7.14286%; padding-right: 50%; z-index: 5; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .details-slide .details-slide__content { padding-right: 33.33333%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__track .glide__slides .glide__slide { display: flex; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__track .glide__slides .glide__slide picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__track .glide__slides .glide__slide picture:before { display: none; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__track .glide__slides .glide__slide picture img { object-fit: contain; object-position: bottom right; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__timeline .glide__bullets { display: none; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview { padding: 7.14286%; transform: translate3d(0, 100%, 0); } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .scroll-drag-indicator { padding-bottom: 25px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner { padding-bottom: 7.14286%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper { margin-right: 12.5%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper .overview__item-inner { display: block; width: 25vw; height: 25vw; border-radius: 50%; display: flex; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper .overview__item-inner .item__plus { width: 25px; height: 25px; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; transform: rotate(45deg); margin-top: 12px; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper .overview__item-inner h5 { padding: 0 24px; } } @media all and (min-width: 1280px) { .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview { padding: 3.57143%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .scroll-drag-indicator { margin-bottom: 3.57143%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper { margin-right: 12.5%; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper .overview__item-inner { display: block; width: 16.66667vw; height: 16.66667vw; border-radius: 50%; display: flex; } } @media (hover: hover) { .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper:hover .overview__item-inner { background: #BC2F2B; } .company-story-timeline__wrapper.theme-fat-tire .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper:hover .overview__item-inner .item__plus { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper:hover:before { transform: scale(1.3); opacity: 1; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper:hover .overview__item-inner { transform: scale(1.2); background: #D74229; } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper:hover .overview__item-inner h5, .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper:hover .overview__item-inner p { transform: scale(1.05) translateY(-10%); } .company-story-timeline__wrapper .company-story-timeline__inner .company-story-timeline__overview .overview__inner .overview__item-wrapper:hover .overview__item-inner .item__plus { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .hero-wrapper.theme-byo .is-flipped .choices__list--dropdown { top: unset; bottom: unset; margin-top: unset; margin-bottom: unset; border-radius: unset; } @media (min-width: 960px) { .hero-wrapper.theme-byo .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-background { height: calc(100vh + 50px); } } @media screen and (max-width: 767px) { .hero-wrapper.theme-byo .byo-step { margin-bottom: 0; } .hero-wrapper.theme-byo .byo-type-selector { padding-bottom: .5rem; } .hero-wrapper.theme-byo .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item .hero-item-background { height: 900px; } } @media (max-width: 375px) { .hero-wrapper.theme-byo .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h1, .hero-wrapper.theme-byo .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h2, .hero-wrapper.theme-byo .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h3, .hero-wrapper.theme-byo .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h4, .hero-wrapper.theme-byo .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h5, .hero-wrapper.theme-byo .hero-wrapper.theme-byo .hero-inner .hero-carousel .hero-carousel-track .hero-carousel-slides .hero-item-content h6 { font-size: 45px; } } @media all and (max-width: 767px) { .byo-step { margin-bottom: 8%; } } @media all and (min-width: 768px) { .byo-step { margin-bottom: 4.5%; } } @media all and (max-width: 767px) { .byo-type-selector { padding-top: .5rem; padding-bottom: 3.5rem; position: relative; } .byo-type-selector .byo-type-item { position: relative; } .byo-type-selector .byo-type-item > input { opacity: 0; position: absolute; left: 0; right: 0; height: 0; width: 0; } .byo-type-selector .byo-type-item label { display: flex; flex-direction: row-reverse; align-items: center; color: #FFFAFB; text-transform: uppercase; padding: 1rem .5rem 1rem 1.25rem; position: static; backface-visibility: hidden; background: transparent; width: auto; margin: 0; border: 3px solid #A07B51; border-radius: 7px; transition: 199.8ms cubic-bezier(0.666, 0, 0.333, 1); transition-property: background-color, color, transform, opacity; } .byo-type-selector .byo-type-item label > .icon-wrapper { width: 1.5rem; height: 1.5rem; margin-left: auto; display: flex; align-items: center; justify-content: center; } .byo-type-selector .byo-type-item label > .icon-wrapper > svg { height: 100%; fill: #FFFAFB; } .byo-type-selector .byo-type-item label > .icon-wrapper.visible-mobile { display: flex; } .byo-type-selector .byo-type-item label .visible-mobile { display: inline; } .byo-type-selector .byo-type-item label .hidden-mobile { display: none; } .byo-type-selector .byo-type-item + .byo-type-item { margin-top: 0.875rem; } } @media all and (max-width: 767px) and (hover: hover) { .byo-type-selector .byo-type-item > label:hover, .byo-type-selector .byo-type-item > label:hover:focus { outline: none; background: #EBE9E2; border-color: #EBE9E2; color: #000; } .byo-type-selector .byo-type-item > label:hover > .icon-wrapper svg, .byo-type-selector .byo-type-item > label:hover:focus > .icon-wrapper svg { fill: #000; } } @media all and (max-width: 767px) { .byo-type-selector .byo-type-item > input:checked + label { background: #EBE9E2; border-color: #EBE9E2; color: #000; } .byo-type-selector .byo-type-item > input:checked + label > .icon-wrapper svg { fill: #000; } } @media all and (min-width: 768px) { .byo-type-selector { display: flex; flex-wrap: wrap; padding-top: 1.375rem; padding-bottom: 1.375rem; position: relative; } .byo-type-selector .byo-type-item { position: relative; } .byo-type-selector .byo-type-item > input { opacity: 0; position: absolute; left: 0; right: 0; height: 0; width: 0; } .byo-type-selector .byo-type-item label { display: flex; flex-direction: column; justify-content: center; align-items: center; color: #FFFAFB; text-transform: uppercase; padding: 0; position: static; backface-visibility: hidden; background: transparent; width: auto; margin: 0; border: 0; outline: none; } .byo-type-selector .byo-type-item label > .icon-wrapper { width: 7.5rem; height: 7.5rem; border: 3px solid #A07B51; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 1.25rem; transition: 199.8ms cubic-bezier(0.666, 0, 0.333, 1); transition-property: background-color, color, transform, opacity; } .byo-type-selector .byo-type-item label > .icon-wrapper > svg { width: 50%; height: 70%; fill: #A07B51; } .byo-type-selector .byo-type-item label > .icon-wrapper + .a6 { margin-top: 0.93rem; } .byo-type-selector .byo-type-item label > .icon-wrapper.hidden-mobile { display: flex; } .byo-type-selector .byo-type-item label .visible-mobile { display: none; } .byo-type-selector .byo-type-item label .hidden-mobile { display: inline; } .byo-type-selector .byo-type-item + .byo-type-item { margin-left: 2.25rem; } } @media all and (min-width: 768px) and (hover: hover) { .byo-type-selector .byo-type-item > label:hover, .byo-type-selector .byo-type-item > label:hover:focus { outline: none; } .byo-type-selector .byo-type-item > label:hover > .icon-wrapper, .byo-type-selector .byo-type-item > label:hover:focus > .icon-wrapper { background: #EBE9E2; } } @media all and (min-width: 768px) { .byo-type-selector .byo-type-item > input:checked + label > .icon-wrapper { background: #EBE9E2; } } .byo-states { margin-top: 1rem; width: 100%; } @media all and (min-width: 1280px) { .byo-states { width: 50%; } } @media all and (min-width: 960px) { .byo-states { width: 60%; } } .byo-warning-text { color: #D74229; line-height: 0.95; padding-top: 4px; padding-bottom: 4px; } .unsubmitted-changes { box-shadow: 0px 0px 0px 5px #D74229; } .unsubmitted-changes:hover { box-shadow: none; transition: box-shadow 166.5ms ease; } .hidden-element { visibility: hidden; } @charset "UTF-8"; /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after { content: ''; content: none; } q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; } @font-face { font-family: 'SchoolBook'; src: url(/uidist/fonts/SchoolBook_Book.eot); src: url(/uidist/fonts/SchoolBook_Book.eot?#iefix) format("embedded-opentype"), url(/uidist/fonts/SchoolBook_Book.woff2) format("woff2"), url(/uidist/fonts/SchoolBook_Book.woff) format("woff"), url(/uidist/fonts/SchoolBook_Book.ttf) format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'SchoolBookItalic'; src: url(/uidist/fonts/SchoolBook_Italic.eot); src: url(/uidist/fonts/SchoolBook_Italic.eot?#iefix) format("embedded-opentype"), url(/uidist/fonts/SchoolBook_Italic.woff2) format("woff2"), url(/uidist/fonts/SchoolBook_Italic.woff) format("woff"), url(/uidist/fonts/SchoolBook_Italic.ttf) format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'SchoolBookBold'; src: url(/uidist/fonts/SchoolBook_Bold.eot); src: url(/uidist/fonts/SchoolBook_Bold.eot?#iefix) format("embedded-opentype"), url(/uidist/fonts/SchoolBook_Bold.woff2) format("woff2"), url(/uidist/fonts/SchoolBook_Bold.woff) format("woff"), url(/uidist/fonts/SchoolBook_Bold.ttf) format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'SchoolBookBoldItalic'; src: url("/uidist/fonts/SchoolBook_Bold Italic.eot"); src: url("/uidist/fonts/SchoolBook_Bold Italic.eot?#iefix") format("embedded-opentype"), url("/uidist/fonts/SchoolBook_Bold Italic.woff2") format("woff2"), url("/uidist/fonts/SchoolBook_Bold Italic.woff") format("woff"), url("/uidist/fonts/SchoolBook_Bold Italic.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Eames'; src: url(/uidist/fonts/EamesCenturyModern-Stencil.woff2) format("woff2"), url(/uidist/fonts/EamesCenturyModern-Stencil.woff) format("woff"); font-weight: normal; font-style: normal; } @font-face { font-family: 'CardinalBold'; src: url(/uidist/fonts/CardinalGrotesque-Bold.otf); font-weight: normal; font-style: normal; } @font-face { font-family: 'CardinalWide'; src: url(/uidist/fonts/CardinalGrotesqueWide-Regular.otf); font-weight: normal; font-style: normal; } @font-face { font-family: 'CardinalWideBold'; src: url(/uidist/fonts/CardinalGrotesqueWide-Bold.otf); font-weight: normal; font-style: normal; } @font-face { font-family: 'CardinalSemiCondensed'; src: url(/uidist/fonts/CardinalGrotesqueSemiCondensed-ExtraBold.otf); font-weight: normal; font-style: normal; } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ /********************************************** Form Base **********************************************/ form { text-transform: unset; } input.honeypot { position: absolute; top: -9999px; left: -9999px; } input, textarea, select { outline: none; border: none; background: none; text-transform: none; padding: 0.5em; border: 2px solid #000; border-radius: 10px; width: 100%; z-index: 1; } /********************************************** Fieldset Base **********************************************/ .fieldset { display: flex; flex-wrap: wrap; align-items: center; position: relative; margin: 0.5em 0; margin-bottom: 48px; } .fieldset.show-alert .alert { opacity: 1; visibility: visible; } .fieldset .alert { text-align: left; padding: 24px; background: #1B2533; padding-left: 60px; color: white; position: absolute; width: 100%; top: 100%; margin-top: 0.5em; opacity: 0; visibility: hidden; } .fieldset .alert.success .alert__title::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .fieldset .alert::before { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); border-bottom: 1em solid #1B2533; border-left: 1em solid transparent; border-right: 1em solid transparent; } .fieldset .alert .alert__title { margin-bottom: 6px; } .fieldset .alert .alert__title::before { content: ""; position: absolute; top: 24px; left: 24px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; width: 2em; height: 2em; display: inline-block; } .fieldset.bordered { border: 3px solid #D74229; border-radius: 8px; } .fieldset.bordered input { border: none; flex: 1; padding-left: 0.6em; padding-right: 0.5em; border-radius: 8px; transition: background-color 166.5ms ease; width: 100%; } .fieldset.bordered label { width: unset; margin-bottom: 0; padding: 0.4em 0.6em; pointer-events: none; text-transform: none; color: #1B2533; opacity: 1; } label { position: relative; padding: 0.3em 0em; margin-bottom: 2px; bottom: 0; left: 0; width: 100%; color: #747479; } label.p { font-weight: 500; } label.dark { color: #1B2533; } label.bold { font-weight: bold; } label.a4 { text-transform: none; } label.form-control-required-label:after, label.required:after { content: "*"; } /********************************************** Hidden Input **********************************************/ input[type="hidden"] { visibility: hidden; } /********************************************** Text Input **********************************************/ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], select, textarea { text-transform: none; margin: 1px; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="url"]:focus, select:focus, textarea:focus { border-width: 3px; margin: 0px; background-color: #f5f0cf; } input[type="text"].error, input[type="text"].ng-invalid, input[type="text"].invalid, input[type="password"].error, input[type="password"].ng-invalid, input[type="password"].invalid, input[type="email"].error, input[type="email"].ng-invalid, input[type="email"].invalid, input[type="number"].error, input[type="number"].ng-invalid, input[type="number"].invalid, input[type="tel"].error, input[type="tel"].ng-invalid, input[type="tel"].invalid, input[type="url"].error, input[type="url"].ng-invalid, input[type="url"].invalid, select.error, select.ng-invalid, select.invalid, textarea.error, textarea.ng-invalid, textarea.invalid { background: rgba(215, 66, 41, 0.2); border-color: #D74229; } /********************************************** Textarea **********************************************/ textarea { border-radius: 7px; min-height: 150px; resize: none; } textarea.a4 { text-transform: none; } /********************************************** Radio **********************************************/ input[type="radio"] + label { position: unset; width: auto; display: block; margin-right: 12px; } /********************************************** Select **********************************************/ select { width: 100%; -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ''; position: relative; cursor: pointer; } select option[disabled] { opacity: 0.6; } /********************************************** Checkbox Input / Radio **********************************************/ input[type="checkbox"], input[type="radio"] { border-radius: 50%; width: 18px; height: 18px; margin: 1px; margin-top: 2px; cursor: pointer; margin-bottom: auto; } input[type="checkbox"].error:before, input[type="checkbox"].ng-invalid:before, input[type="radio"].error:before, input[type="radio"].ng-invalid:before { border-color: #D74229; } input[type="checkbox"].error + label, input[type="checkbox"].error + input + label, input[type="checkbox"].ng-invalid + label, input[type="checkbox"].ng-invalid + input + label, input[type="radio"].error + label, input[type="radio"].error + input + label, input[type="radio"].ng-invalid + label, input[type="radio"].ng-invalid + input + label { color: #D74229; } input[type="checkbox"]:before, input[type="checkbox"]:after, input[type="radio"]:before, input[type="radio"]:after { content: ''; position: absolute; top: 2px; left: 0; width: 20px; height: 20px; } input[type="checkbox"]:before, input[type="radio"]:before { background: #CBCCC8; border: 2px solid #1B2533; border-radius: 5px; } input[type="checkbox"]:after, input[type="radio"]:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; transform: translate(0, 0) scale(0); transition: transform 111ms cubic-bezier(0.666, 0, 0.333, 1); } input[type="checkbox"]:checked:after, input[type="radio"]:checked:after { transform: translate(3px, -1px) scale(1.2); } input[type="checkbox"] + label, input[type="checkbox"] + input + label, input[type="radio"] + label, input[type="radio"] + input + label { flex: 1; width: auto; position: relative; padding: 0; margin: 0; margin-left: 12px; cursor: pointer; font-family: "CardinalWideBold", "Helvetica Neue", Helvetica, sans-serif; transition: color 166.5ms ease; border-bottom: 2px solid transparent; text-transform: none; font-weight: normal; } input[type="checkbox"] + label, input[type="checkbox"] + input + label { font-family: "CardinalSemiCondensed", "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #000; font-size: 18px; } @media all and (min-width: 1440px) { input[type="checkbox"] + label, input[type="checkbox"] + input + label { font-size: 21px; } } /********************************************** Radio Input **********************************************/ input[type="radio"]:before { border-radius: 50%; } input[type="radio"]:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } /********************************************** File Input **********************************************/ input[type="file"] { text-transform: unset; letter-spacing: 0.05em; cursor: pointer; } input[type="file"].error, input[type="file"].ng-invalid { background: rgba(215, 66, 41, 0.2); } input[type="file"] + label { order: -1; position: unset; width: auto; display: block; margin-bottom: 12px; } /********************************************** Range Input **********************************************/ input[type=range] { -webkit-appearance: none; margin: 12px 0; width: 100%; border: none; } input[type=range] + label { order: -1; position: unset; width: auto; display: block; } input[type=range].error, input[type=range].ng-invalid { background: rgba(215, 66, 41, 0.2); border-bottom: 2px solid rgba(215, 66, 41, 0.2); } input[type=range]:focus { outline: none; } input[type=range]:focus::-webkit-slider-runnable-track { background: #D74229; } input[type=range]:focus::-ms-fill-lower { background: #D74229; } input[type=range]:focus::-ms-fill-upper { background: #D74229; } input[type=range]:focus::-webkit-slider-thumb { border-color: #1B2533; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8.4px; cursor: pointer; background: #D74229; } input[type=range]::-webkit-slider-thumb { border: 2px solid #1B2533; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; -webkit-appearance: none; margin-top: -14px; } input[type=range]::-moz-range-track { width: 100%; height: 8.4px; cursor: pointer; background: #D74229; } input[type=range]::-moz-range-thumb { border: 2px solid #1B2533; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; } input[type=range]::-ms-track { width: 100%; height: 8.4px; cursor: pointer; background: transparent; border-color: transparent; border-width: 16px 0; color: transparent; } input[type=range]::-ms-fill-lower { background: #D74229; } input[type=range]::-ms-fill-upper { background: #D74229; } input[type=range]::-ms-thumb { border: 2px solid #D74229; height: 36px; width: 16px; border-radius: 3px; background: #ffffff; cursor: pointer; } /********************************************** Counter Input **********************************************/ .quantity_decrease, .quantity_increase { display: block; position: absolute; top: 0px; width: 44px; height: 44px; } .quantity_decrease:before, .quantity_increase:before { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 4px; background-color: #00AABE; transform: translate(-50%, -50%); } .quantity_increase:after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 18px; background-color: #00AABE; transform: translate(-50%, -50%); } /********************************************** Search **********************************************/ .fieldset.search { display: flex; align-items: stretch; width: 100%; display: flex; margin: 0; } .fieldset.search input[type="text"], .fieldset.search input[type="password"] { width: 100%; position: relative; padding: 0 1em; height: 3em; line-height: 3em; background: #FFFAFB; border-radius: 10px 0 0 10px; border: none; } .fieldset.search input[type="text"].active + button, .fieldset.search input[type="password"].active + button { background: #1B2533; } .fieldset.search input[type="text"].active + button:after, .fieldset.search input[type="password"].active + button:after { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } .fieldset.search input[type="text"] + button, .fieldset.search input[type="password"] + button { display: block; border: none; outline: none; width: 4em; background: #FFFAFB; border-radius: 0 10px 10px 0; transition: background-color 166.5ms ease; position: relative; } .fieldset.search input[type="text"] + button:after, .fieldset.search input[type="password"] + button:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center center; display: block; height: 50%; width: 2em; background-size: contain !important; background-position: center; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; transition: background-image 166.5ms ease; } .fieldset.search input[type="text"]::placeholder, .fieldset.search input[type="password"]::placeholder { font-family: "SchoolBookItalic", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } .fieldset.search button { cursor: pointer; } /********************************************** Alerts **********************************************/ .show-alert .alert { display: block; opacity: 1; visibility: visible; } .alert { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); background: #1B2533; padding: 24px; padding-left: 60px; margin: 24px 0; color: white; width: 300px; margin-top: 0.5em; opacity: 0; display: none; visibility: hidden; cursor: help; box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); text-transform: none; z-index: 10; } .alert.success .alert__title::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .alert.success.theme-white .alert__title::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .alert.theme-banner { width: 100%; position: relative; left: 0; box-shadow: none; text-align: left; transform: none; } .alert.theme-banner:before { display: none; } .alert.theme-red { color: #FFFAFB; background: #D74229; } .alert.theme-red .alert__title { color: #FFFAFB; } .alert.theme-red::before { border-bottom-color: #D74229; } .alert.theme-turquoise { color: #FFFAFB; background: #00AABE; } .alert.theme-turquoise .alert__title { color: #FFFAFB; } .alert.theme-turquoise::before { border-bottom-color: #D74229; } .alert.theme-white { color: #1B2533; background: #FFFAFB; } .alert.theme-white .alert__title { color: #1B2533; } .alert::before { content: ""; position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); border-bottom: 20px solid #1B2533; border-left: 20px solid transparent; border-right: 20px solid transparent; } .alert .alert__title { margin-bottom: 6px; } .alert .alert__title::before { content: ""; position: absolute; top: 24px; left: 24px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; width: 2em; height: 2em; display: inline-block; } /********************************************** Submit **********************************************/ input[type="submit"], button[type="submit"] { border-color: #D74229; background-color: #D74229; } /********************************************** Overwrite Autofill styles for some browsers **********************************************/ @-webkit-keyframes autofill { 0%, 100% { color: #1B2533; background: transparent; } } html { width: 100%; height: 100%; font-size: 16px; box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } body { color: #1B2533; background: #FFFAFB; } body.fruit-smash, body.fat-tire { background: #fff; } body.voodoo-ranger { background: #FBF8EE; } body, #wrapper { width: 100%; height: 100%; } .visually-hidden: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; } .ellipses { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hyphen { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } .unbuttoned { outline: none; border: none; background: transparent; } .no-trans { transition: none !important; } /********************************************** Module **********************************************/ .module { position: relative; } div[data-spacing~="mmt0"] { margin-top: 0%; } div[data-spacing~="pmt0"] { padding-top: 0%; } div[data-spacing~="pmb0"] { padding-bottom: 0%; } div[data-spacing~="mmt-1"] { margin-top: -3.57143%; } div[data-spacing~="pmt1"] { padding-top: 3.57143%; } div[data-spacing~="pmb1"] { padding-bottom: 3.57143%; } div[data-spacing~="mmt-2"] { margin-top: -7.14286%; } div[data-spacing~="pmt2"] { padding-top: 7.14286%; } div[data-spacing~="pmb2"] { padding-bottom: 7.14286%; } div[data-spacing~="mmt-3"] { margin-top: -10.71429%; } div[data-spacing~="pmt3"] { padding-top: 10.71429%; } div[data-spacing~="pmb3"] { padding-bottom: 10.71429%; } div[data-spacing~="mmt-4"] { margin-top: -14.28571%; } div[data-spacing~="pmt4"] { padding-top: 14.28571%; } div[data-spacing~="pmb4"] { padding-bottom: 14.28571%; } div[data-spacing~="mmt-5"] { margin-top: -17.85714%; } div[data-spacing~="pmt5"] { padding-top: 17.85714%; } div[data-spacing~="pmb5"] { padding-bottom: 17.85714%; } div[data-spacing~="mmt-6"] { margin-top: -21.42857%; } div[data-spacing~="pmt6"] { padding-top: 21.42857%; } div[data-spacing~="pmb6"] { padding-bottom: 21.42857%; } @media all and (min-width: 768px) { div[data-spacing~="mtt0"] { margin-top: 0%; } div[data-spacing~="ptt0"] { padding-top: 0%; } div[data-spacing~="ptb0"] { padding-bottom: 0%; } div[data-spacing~="mtt-1"] { margin-top: -3.57143%; } div[data-spacing~="ptt1"] { padding-top: 3.57143%; } div[data-spacing~="ptb1"] { padding-bottom: 3.57143%; } div[data-spacing~="mtt-2"] { margin-top: -7.14286%; } div[data-spacing~="ptt2"] { padding-top: 7.14286%; } div[data-spacing~="ptb2"] { padding-bottom: 7.14286%; } div[data-spacing~="mtt-3"] { margin-top: -10.71429%; } div[data-spacing~="ptt3"] { padding-top: 10.71429%; } div[data-spacing~="ptb3"] { padding-bottom: 10.71429%; } div[data-spacing~="mtt-4"] { margin-top: -14.28571%; } div[data-spacing~="ptt4"] { padding-top: 14.28571%; } div[data-spacing~="ptb4"] { padding-bottom: 14.28571%; } div[data-spacing~="mtt-5"] { margin-top: -17.85714%; } div[data-spacing~="ptt5"] { padding-top: 17.85714%; } div[data-spacing~="ptb5"] { padding-bottom: 17.85714%; } div[data-spacing~="mtt-6"] { margin-top: -21.42857%; } div[data-spacing~="ptt6"] { padding-top: 21.42857%; } div[data-spacing~="ptb6"] { padding-bottom: 21.42857%; } } @media all and (min-width: 768px) and (orientation: landscape) { div[data-spacing~="mdt0"] { margin-top: 0%; } div[data-spacing~="pdt0"] { padding-top: 0%; } div[data-spacing~="pdb0"] { padding-bottom: 0%; } div[data-spacing~="mdt-1"] { margin-top: -3.57143%; } div[data-spacing~="pdt1"] { padding-top: 3.57143%; } div[data-spacing~="pdb1"] { padding-bottom: 3.57143%; } div[data-spacing~="mdt-2"] { margin-top: -7.14286%; } div[data-spacing~="pdt2"] { padding-top: 7.14286%; } div[data-spacing~="pdb2"] { padding-bottom: 7.14286%; } div[data-spacing~="mdt-3"] { margin-top: -10.71429%; } div[data-spacing~="pdt3"] { padding-top: 10.71429%; } div[data-spacing~="pdb3"] { padding-bottom: 10.71429%; } div[data-spacing~="mdt-4"] { margin-top: -14.28571%; } div[data-spacing~="pdt4"] { padding-top: 14.28571%; } div[data-spacing~="pdb4"] { padding-bottom: 14.28571%; } div[data-spacing~="mdt-5"] { margin-top: -17.85714%; } div[data-spacing~="pdt5"] { padding-top: 17.85714%; } div[data-spacing~="pdb5"] { padding-bottom: 17.85714%; } div[data-spacing~="mdt-6"] { margin-top: -21.42857%; } div[data-spacing~="pdt6"] { padding-top: 21.42857%; } div[data-spacing~="pdb6"] { padding-bottom: 21.42857%; } } /********************************************** Lazy image **********************************************/ .lazyload, .lazyloading { opacity: 0; } .lazyloaded { transition: opacity 333ms linear; opacity: 1; } /********************************************** Scroll Target **********************************************/ .scroll-target.account-for-nav { position: relative; top: -90px; } #header.has-disclaimer + .inner .scroll-target.account-for-nav { top: -125px; } @media all and (min-width: 768px) { .scroll-target.account-for-nav { top: -120px; } #header.has-disclaimer + .inner .scroll-target.account-for-nav { top: -120px; } } @media all and (min-width: 768px) and (orientation: landscape) { .scroll-target.account-for-nav { top: -150px; } #header.has-disclaimer + .inner .scroll-target.account-for-nav { top: -150px; } } .subnav-wrapper.theme-hidden ~ .scroll-target.account-for-nav { position: relative; top: -50px; } #header.has-disclaimer + .inner .subnav-wrapper.theme-hidden ~ .scroll-target.account-for-nav { top: -85px; } @media all and (min-width: 768px) { .subnav-wrapper.theme-hidden ~ .scroll-target.account-for-nav { top: -80px; } #header.has-disclaimer + .inner .subnav-wrapper.theme-hidden ~ .scroll-target.account-for-nav { top: -80px; } } @media all and (min-width: 768px) and (orientation: landscape) { .subnav-wrapper.theme-hidden ~ .scroll-target.account-for-nav { top: -80px; } #header.has-disclaimer + .inner .subnav-wrapper.theme-hidden ~ .scroll-target.account-for-nav { top: -80px; } } @media all and (min-width: 768px) and (orientation: landscape) { .subnav-wrapper.theme-byo ~ * .scroll-target.account-for-nav { top: -148px; } } /********************************************** Links **********************************************/ a { font-style: normal; cursor: pointer; color: inherit; text-decoration: none; } a.inline { text-decoration: underline; } p a { color: #D74229; } /********************************************** Text-Link **********************************************/ p a.text-link:hover { text-decoration: none; } .text-link { outline: none; border: none; background: none; display: inline-block; text-transform: uppercase; text-align: center; position: relative; padding-bottom: 0.4em; border-bottom: 4px solid #D74229; color: #1B2533; } .text-link:active, .text-link:hover:active { transform: scale(0.99); } .text-link.gold { border-color: #A07B51; } .text-link.arrow { text-align: left; width: 200px; padding: 0.8em 0; } .text-link.arrow:after { content: ""; position: absolute; top: 50%; right: 0; transform: translate(-60%, -50%); width: 2em; height: 1em; display: inline-block; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; background-position: center; } .text-link.dropdown { text-align: left; width: 200px; padding: 0.8em 0; } .text-link.dropdown:after { content: ""; position: absolute; top: 50%; right: 0; transform: translate(-60%, -50%); width: 1.5em; height: 1.5em; display: inline-block; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; background-position: center; background-size: contain; } @media (hover: hover) { .text-link { cursor: pointer; transition: transform 266.4ms ease-out; } .text-link.arrow { border-bottom: none; position: relative; overflow: hidden; padding-bottom: 1.3em; } .text-link.arrow:before { content: ""; position: absolute; bottom: 0px; left: 0; width: 100%; border-bottom: 3px solid #D74229; transition: transform 333ms cubic-bezier(0.666, 0, 0.333, 1); } .text-link.arrow:hover { transform: none; } .text-link.arrow:hover::before { animation: underline 499.5ms cubic-bezier(0.666, 0, 0.333, 1); } } @keyframes underline { 0% { transform: translate(0%, 0); } 50% { transform: translate(100%, 0); } 51% { transform: translate(-100%, 0); } 100% { transform: translate(0%, 0); } } /********************************************** Back-Link **********************************************/ .back-link { display: inline-block; text-transform: uppercase; text-align: center; position: relative; padding-bottom: 0.4em; color: #D74229; } .back-link:before { content: ""; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; transform: rotate(180deg); display: inline-block; width: 2em; font-size: inherit; line-height: inherit; height: 1em; position: relative; top: 0.1em; margin-right: 1em; background-position: center; } .back-link.light { color: #EBE9E2; } .back-link.light:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } @media (hover: hover) { .back-link { cursor: pointer; transition: transform 333ms cubic-bezier(0.666, 0, 0.333, 1); } .back-link:hover { text-decoration: none; transform: scale(1.048); } } /********************************************** Lists **********************************************/ li { list-style: none; } /********************************************** Dismiss Buttons **********************************************/ .dismiss-button { border-radius: 50%; background: #D74229; position: relative; border: none; outline: none; width: 30px; height: 30px; transition: background-color 333ms ease, transform 183.15ms ease-out; } .dismiss-button:after { content: ""; position: absolute; top: 50%; left: 50%; right: 0; bottom: 0; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; transition: transform 666ms ease; width: 18px; height: 18px; transform: translate(-50%, -50%); background-position: center; } .dismiss-button.disabled { opacity: 0.5; pointer-events: none; } @keyframes grow { 0% { transform: scale(1); opacity: 0.6; } 40% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.75); opacity: 0; } } @media all and (min-width: 768px) { .arrow-button { width: 40px; height: 40px; } .arrow-button.special { width: 40px; height: 40px; } .arrow-button.animated:before { content: ''; display: block; width: 40px; height: 40px; border-radius: 50%; } } @media (hover: hover) { .arrow-button { cursor: pointer; } .arrow-button:hover { transform: scale(1.03); } .arrow-button:hover.left { transform: scale(1.03) rotate(180deg); } } /********************************************** Arrow Buttons **********************************************/ .arrow-button { border-radius: 50%; background: #1B2533; position: relative; border: none; outline: none; width: 30px; height: 30px; transition: background-color 333ms ease, transform 183.15ms ease-out; } .arrow-button:after { content: ""; position: absolute; top: 50%; left: 50%; right: 0; bottom: 0; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; transition: transform 666ms ease; width: 18px; height: 18px; transform: translate(-50%, -50%); background-position: center; } .arrow-button.disabled { opacity: 0.5; pointer-events: none; } .arrow-button:focus { border: #1B2533; } .arrow-button:active { border: #1B2533; transform: scale(1.03); } .arrow-button:active.left { transform: scale(1.03) rotate(180deg); } .arrow-button.special { background: none; border: 2px solid #D74229; width: 35px; height: 35px; } .arrow-button.special:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .arrow-button.special.filled { background: #D74229; } .arrow-button.special.filled:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .arrow-button.left { transform: rotate(180deg); } .arrow-button:active { transform: scale(1) !important; } .arrow-button:active.left { transform: scale(1) rotate(180deg) !important; } .arrow-button.animated:before { content: ''; display: block; width: 30px; height: 30px; border-radius: 50%; position: absolute; background: #1B2533; animation: grow 1665ms cubic-bezier(0, 0, 0.666, 1) 0ms infinite; transform-origin: 50% 50%; top: 0; left: 0; } @keyframes grow { 0% { transform: scale(1); opacity: 0.6; } 40% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(2.75); opacity: 0; } } @media all and (min-width: 768px) { .arrow-button { width: 40px; height: 40px; } .arrow-button.special { width: 40px; height: 40px; } .arrow-button.animated:before { content: ''; display: block; width: 40px; height: 40px; border-radius: 50%; } } @media (hover: hover) { .arrow-button { cursor: pointer; } .arrow-button:hover { transform: scale(1.03); } .arrow-button:hover.left { transform: scale(1.03) rotate(180deg); } } /********************************************** Carousel Buttons **********************************************/ .carousel__buttons { display: flex; align-items: center; } .carousel__buttons .arrow-button:first-of-type { margin-right: 12px; } .carousel__buttons .arrow-button:nth-of-type(2) { margin-left: 12px; } .carousel__buttons p { pointer-events: none; } .carousel__buttons.light .arrow-button { background: none; } .carousel__buttons.light .arrow-button:after { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } /********************************************** Colors **********************************************/ .red { color: #D74229; } body.fat-tire .red { color: #BC2F2B; } .yellow { color: #EDBD1D; } .gold { color: #A07B51; } body.fat-tire .gold { color: #857550; } .sand { color: #DFD3A8; } .dark-blue { color: #1B2533; } .white { color: #FFFAFB; } body.fat-tire .white { color: #fff; } /********************************************** Loading Indicator **********************************************/ .loading:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; height: 24px; width: 24px; margin: -12px 0 0 -12px; animation: rotation 666ms infinite linear; border-left: 3px solid rgba(50, 50, 50, 0.45); border-right: 3px solid rgba(50, 50, 50, 0.45); border-bottom: 3px solid rgba(50, 50, 50, 0.45); border-top: 3px solid #323232; border-radius: 100%; z-index: 10; } @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } /********************************************** Map Loading Indicator **********************************************/ @keyframes bounce { 0% { transform: translateY(0px); } 100% { transform: translateY(-20px); } } .map-loading-indicator { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 166.5ms ease 333ms, visibility 0ms linear 499.5ms; z-index: 5; } .map-loading-indicator::before { content: ""; margin: auto; width: 50px; height: 50px; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; animation: bounce 666ms cubic-bezier(0, 0, 0.666, 1) 0ms infinite alternate; } .map-loading-indicator::after { position: absolute; content: ""; width: 20px; height: 50px; top: 50%; left: 50%; transform: translate(-50%, -50%); border-bottom: 3px solid #fff; } .map-loading-indicator.active { transition: opacity 166.5ms ease 333ms, visibility 0ms linear 0ms; visibility: visible; opacity: 1; } /********************************************** Capped Rules (Used in Tables in Cellar Club) **********************************************/ .capped-rule { display: flex; height: 2px; align-items: center; } .capped-rule:before, .capped-rule:after { content: ""; width: 100%; flex: 1; } .capped-rule:before { border-top: 3px solid #A07B51; } .capped-rule:after { right: -100%; border-top: 3px solid #A07B51; } .capped-rule > * { position: relative; } .capped-rule > *:before, .capped-rule > *:after { content: ""; display: block; position: absolute; top: 50%; transform: translateY(-50%); height: 25px; } .capped-rule > *:before { left: 0; border-left: 3px solid #A07B51; } .capped-rule > *:after { right: 0; border-right: 3px solid #A07B51; } /********************************************** Hover States **********************************************/ @media (hover: hover) { .hover-scale { transition: transform 266.4ms ease-out; } .hover-scale:hover { transform: scale(1.048) translateZ(0); backface-visibility: hidden; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .arrow-element-wrapper { position: relative; pointer-events: none; } .arrow-element-wrapper.color-gold .arrow-element-inner svg { stroke: #A07B51; } .arrow-element-wrapper.color-gold.arrow-mobile-element-1:after, .arrow-element-wrapper.color-gold.arrow-mobile-element-2:after { border-left-color: #A07B51; } .arrow-element-wrapper.color-gold.arrow-mobile-element-3:after, .arrow-element-wrapper.color-gold.arrow-mobile-element-4:after { border-top-color: #A07B51; } .arrow-element-wrapper.color-blue .arrow-element-inner svg { stroke: #1B2533; } .arrow-element-wrapper.color-blue.arrow-mobile-element-1:after, .arrow-element-wrapper.color-blue.arrow-mobile-element-2:after { border-left-color: #1B2533; } .arrow-element-wrapper.color-blue.arrow-mobile-element-3:after, .arrow-element-wrapper.color-blue.arrow-mobile-element-4:after { border-top-color: #1B2533; } .arrow-element-wrapper.color-yellow .arrow-element-inner svg { stroke: #EDBD1D; } .arrow-element-wrapper.color-yellow.arrow-mobile-element-1:after, .arrow-element-wrapper.color-yellow.arrow-mobile-element-2:after { border-left-color: #EDBD1D; } .arrow-element-wrapper.color-yellow.arrow-mobile-element-3:after, .arrow-element-wrapper.color-yellow.arrow-mobile-element-4:after { border-top-color: #EDBD1D; } .arrow-element-wrapper.arrow-mobile-element-none { display: none; } .arrow-element-wrapper.arrow-mobile-element-1:before, .arrow-element-wrapper.arrow-mobile-element-2:before { padding-bottom: 100%; } .arrow-element-wrapper.arrow-mobile-element-1:after, .arrow-element-wrapper.arrow-mobile-element-2:after { top: 99.5%; left: 100%; transform: translate(0, -5.5px); border-top: 5.5px solid transparent; border-left: 12px solid #D74229; border-bottom: 5.5px solid transparent; } .arrow-element-wrapper.arrow-mobile-element-3:before, .arrow-element-wrapper.arrow-mobile-element-4:before { padding-bottom: 50%; } .arrow-element-wrapper.arrow-mobile-element-3:after, .arrow-element-wrapper.arrow-mobile-element-4:after { top: 100%; transform: translate(-5.5px, 0px); border-top: 12px solid #D74229; border-left: 5.5px solid transparent; border-right: 5.5px solid transparent; } .arrow-element-wrapper.arrow-mobile-element-3:after { left: 50%; } .arrow-element-wrapper.arrow-mobile-element-4 svg:nth-of-type(4) { width: 200%; } .arrow-element-wrapper.arrow-mobile-element-4:after { left: 99%; } .arrow-element-wrapper.arrow-mobile-element-4 svg:nth-of-type(4) { display: block; } .arrow-element-wrapper.arrow-mobile-element-2 svg:nth-of-type(2) { display: block; } .arrow-element-wrapper.arrow-mobile-element-3 svg:nth-of-type(3) { display: block; } .arrow-element-wrapper.arrow-mobile-element-4 svg:nth-of-type(4) { display: block; } .arrow-element-wrapper:before { content: ""; display: block; width: 100%; height: 0; padding-bottom: 100%; } .arrow-element-wrapper .arrow-element-inner { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; overflow: hidden; } .arrow-element-wrapper .arrow-element-inner svg { display: none; position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; fill: none; stroke: #D74229; stroke-miterlimit: 10; stroke-dasharray: 10 7; stroke-width: 2; } .arrow-element-wrapper:after { content: ""; position: absolute; width: 0; height: 0; } @media all and (min-width: 768px) { .arrow-element-wrapper { position: relative; pointer-events: none; } .arrow-element-wrapper.color-gold .arrow-element-inner svg { stroke: #A07B51; } .arrow-element-wrapper.color-gold.arrow-mobile-element-1:after, .arrow-element-wrapper.color-gold.arrow-mobile-element-2:after { border-left-color: transparent; } .arrow-element-wrapper.color-gold.arrow-mobile-element-3:after, .arrow-element-wrapper.color-gold.arrow-mobile-element-4:after { border-top-color: transparent; } .arrow-element-wrapper.color-gold.arrow-element-1:after, .arrow-element-wrapper.color-gold.arrow-element-2:after { border-left-color: #A07B51; } .arrow-element-wrapper.color-gold.arrow-element-3:after, .arrow-element-wrapper.color-gold.arrow-element-4:after { border-top-color: #A07B51; } .arrow-element-wrapper.color-blue .arrow-element-inner svg { stroke: #1B2533; } .arrow-element-wrapper.color-blue.arrow-mobile-element-1:after, .arrow-element-wrapper.color-blue.arrow-mobile-element-2:after { border-left-color: transparent; } .arrow-element-wrapper.color-blue.arrow-mobile-element-3:after, .arrow-element-wrapper.color-blue.arrow-mobile-element-4:after { border-top-color: transparent; } .arrow-element-wrapper.color-blue.arrow-element-1:after, .arrow-element-wrapper.color-blue.arrow-element-2:after { border-left-color: #1B2533; } .arrow-element-wrapper.color-blue.arrow-element-3:after, .arrow-element-wrapper.color-blue.arrow-element-4:after { border-top-color: #1B2533; } .arrow-element-wrapper.color-yellow .arrow-element-inner svg { stroke: #EDBD1D; } .arrow-element-wrapper.color-yellow.arrow-mobile-element-1:after, .arrow-element-wrapper.color-yellow.arrow-mobile-element-2:after { border-left-color: transparent; } .arrow-element-wrapper.color-yellow.arrow-mobile-element-3:after, .arrow-element-wrapper.color-yellow.arrow-mobile-element-4:after { border-top-color: transparent; } .arrow-element-wrapper.color-yellow.arrow-element-1:after, .arrow-element-wrapper.color-yellow.arrow-element-2:after { border-left-color: #EDBD1D; } .arrow-element-wrapper.color-yellow.arrow-element-3:after, .arrow-element-wrapper.color-yellow.arrow-element-4:after { border-top-color: #EDBD1D; } .arrow-element-wrapper.arrow-mobile-element-none { display: block; } .arrow-element-wrapper.arrow-mobile-element-1 svg:nth-of-type(1) { display: none; } .arrow-element-wrapper.arrow-mobile-element-2 svg:nth-of-type(2) { display: none; } .arrow-element-wrapper.arrow-mobile-element-3 svg:nth-of-type(3) { display: none; } .arrow-element-wrapper.arrow-mobile-element-4 svg:nth-of-type(4) { display: none; } .arrow-element-wrapper.arrow-element-1:before, .arrow-element-wrapper.arrow-element-2:before { padding-bottom: 100%; } .arrow-element-wrapper.arrow-element-1:after, .arrow-element-wrapper.arrow-element-2:after { top: 99.5%; left: 100%; transform: translate(0, -5.5px); border-top: 5.5px solid transparent; border-left: 12px solid #D74229; border-bottom: 5.5px solid transparent; } .arrow-element-wrapper.arrow-element-3:before, .arrow-element-wrapper.arrow-element-4:before { padding-bottom: 50%; } .arrow-element-wrapper.arrow-element-3:after, .arrow-element-wrapper.arrow-element-4:after { top: 100%; transform: translate(-5.5px, 0px); border-top: 12px solid #D74229; border-left: 5.5px solid transparent; border-right: 5.5px solid transparent; } .arrow-element-wrapper.arrow-element-3:after { left: 50%; } .arrow-element-wrapper.arrow-element-4 svg:nth-of-type(4) { width: 200%; } .arrow-element-wrapper.arrow-element-4:after { left: 99%; } .arrow-element-wrapper.arrow-element-1 svg:nth-of-type(1) { display: block; } .arrow-element-wrapper.arrow-element-2 svg:nth-of-type(2) { display: block; } .arrow-element-wrapper.arrow-element-3 svg:nth-of-type(3) { display: block; } .arrow-element-wrapper.arrow-element-4 svg:nth-of-type(4) { display: block; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .arrow-title { width: 100%; text-align: center; } .arrow-title.theme-red .title { color: #D74229; } .arrow-title.theme-light .arrow-title__arrow-wrapper .arrow-title__arrow-inner .line { fill: none; stroke: #FFFAFB; stroke-miterlimit: 10; stroke-dasharray: 10 7; stroke-width: 2; } .arrow-title.theme-light .arrow-title__arrow-wrapper .arrow-title__arrow-inner .point { fill: #FFFAFB; } .arrow-title .subtitle { margin-bottom: 6px; } .arrow-title .arrow-title__inner { display: flex; align-items: stretch; color: #1B2533; } .arrow-title .arrow-title__inner .title { flex-basis: 78.57143%; padding: 0 12px; } .arrow-title .arrow-title__inner .arrow-title__arrow-wrapper { overflow: hidden; position: relative; flex: 1; } .arrow-title .arrow-title__inner .arrow-title__arrow-wrapper:last-of-type .arrow-title__arrow-inner { left: 0; right: unset; transform: translate(0, -3px) rotate(180deg); } .arrow-title .arrow-title__inner .arrow-title__arrow-wrapper .arrow-title__arrow-inner { height: 100%; position: absolute; height: 10px; right: 0; top: 50%; transform: translate(0, -3px); } .arrow-title .arrow-title__inner .arrow-title__arrow-wrapper .arrow-title__arrow-inner .line { fill: none; stroke: #D74229; stroke-miterlimit: 10; stroke-dasharray: 10 7; stroke-width: 2; } .arrow-title .arrow-title__inner .arrow-title__arrow-wrapper .arrow-title__arrow-inner .point { fill: #D74229; } .arrow-title .arrow-title__inner .arrow-title__arrow-wrapper:first-of-type { left: 0; } @media all and (min-width: 768px) { .arrow-title .arrow-title__inner .title { flex-basis: unset; padding: 0em 24px; } .arrow-title .arrow-title__inner .arrow-title__arrow-wrapper .arrow-title__arrow-inner { height: 15px; } } .fit-image { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); object-fit: cover; } .fit-image.contain { object-fit: contain; } .pill-btn { display: inline-block; border: 3px solid #1B2533; color: #FFFAFB; border-radius: 8px; text-transform: uppercase; text-align: left; padding: 0.8em 2em; padding-right: 6em; position: relative; min-width: 200px; transition: 199.8ms cubic-bezier(0.666, 0, 0.333, 1); transition-property: background-color, color, transform, opacity; backface-visibility: hidden; background: transparent; } .pill-btn:focus { outline: none; } .pill-btn:active { transform: scale(0.99); } .pill-btn.no-icon { padding-right: 2em; text-align: center; } .pill-btn.no-icon svg { display: none; } .pill-btn.large-btn { height: 80px; padding: .5em .5em; margin-bottom: 0; } .pill-btn.large-btn svg { position: relative; margin: 6px auto 0; font-size: 12px; top: unset; height: 25px; display: block; transform: none; } .pill-btn.disabled { opacity: 0.7; } .pill-btn.loading:after { border-color: rgba(255, 255, 255, 0.2); border-top-color: rgba(255, 255, 255, 0.7); } .pill-btn.loading svg { opacity: 0; } .pill-btn svg { position: absolute; top: 50%; right: 0; transform: translate(-50%, -50%); height: 90%; width: 2em; display: inline-block; } .pill-btn.theme-gold { border-color: #A07B51; } .pill-btn.theme-gold.filled { background: #A07B51; } .pill-btn.text-color-gold { color: #A07B51; } .pill-btn.text-color-gold svg { fill: #A07B51; } .pill-btn.theme-blue { border-color: #1B2533; } .pill-btn.theme-blue.filled { background: #1B2533; } .pill-btn.text-color-blue { color: #1B2533; } .pill-btn.text-color-blue svg { fill: #1B2533; } .pill-btn.theme-white { border-color: #FFFAFB; } .pill-btn.theme-white.filled { background: #FFFAFB; } .pill-btn.text-color-white { color: #FFFAFB; } .pill-btn.text-color-white svg { fill: #FFFAFB; } .pill-btn.theme-black { border-color: #000; } .pill-btn.theme-black.filled { background: #000; } .pill-btn.text-color-black { color: #000; } .pill-btn.text-color-black svg { fill: #000; } .pill-btn.theme-yellow { border-color: #EDBD1D; } .pill-btn.theme-yellow.filled { background: #EDBD1D; } .pill-btn.text-color-yellow { color: #EDBD1D; } .pill-btn.text-color-yellow svg { fill: #EDBD1D; } .pill-btn.theme-red { border-color: #D74229; } .pill-btn.theme-red.filled { background: #D74229; } .pill-btn.text-color-red { color: #D74229; } .pill-btn.text-color-red svg { fill: #D74229; } .pill-btn.theme-tan { border-color: #EBE9E2; } .pill-btn.theme-tan.filled { background: #EBE9E2; } .pill-btn.text-color-tan { color: #EBE9E2; } .pill-btn.text-color-tan svg { fill: #EBE9E2; } .pill-btn.theme-ft-white { border-color: #fff; } .pill-btn.theme-ft-white.filled { background: #fff; } .pill-btn.text-color-ft-white { color: #fff; } .pill-btn.text-color-ft-white svg { fill: #fff; } .pill-btn.theme-ft-gold { border-color: #857550; } .pill-btn.theme-ft-gold.filled { background: #857550; } .pill-btn.text-color-ft-gold { color: #857550; } .pill-btn.text-color-ft-gold svg { fill: #857550; } .pill-btn.theme-fs-black { border-color: #1E1E1E; } .pill-btn.theme-fs-black.filled { background: #1E1E1E; } .pill-btn.text-color-fs-black { color: #1E1E1E; } .pill-btn.text-color-fs-black svg { fill: #1E1E1E; } .pill-btn.theme-fs-pink { border-color: #FFD5CB; } .pill-btn.theme-fs-pink.filled { background: #FFD5CB; } .pill-btn.text-color-fs-pink { color: #FFD5CB; } .pill-btn.text-color-fs-pink svg { fill: #FFD5CB; } .pill-btn.theme-fs-green { border-color: #CEE3A0; } .pill-btn.theme-fs-green.filled { background: #CEE3A0; } .pill-btn.text-color-fs-green { color: #CEE3A0; } .pill-btn.text-color-fs-green svg { fill: #CEE3A0; } .pill-btn.theme-fs-blue { border-color: #D8EBF0; } .pill-btn.theme-fs-blue.filled { background: #D8EBF0; } .pill-btn.text-color-fs-blue { color: #D8EBF0; } .pill-btn.text-color-fs-blue svg { fill: #D8EBF0; } .pill-btn.theme-fs-teal { border-color: #D7EFE4; } .pill-btn.theme-fs-teal.filled { background: #D7EFE4; } .pill-btn.text-color-fs-teal { color: #D7EFE4; } .pill-btn.text-color-fs-teal svg { fill: #D7EFE4; } .pill-btn.theme-fs-yellow { border-color: #FEF5C2; } .pill-btn.theme-fs-yellow.filled { background: #FEF5C2; } .pill-btn.text-color-fs-yellow { color: #FEF5C2; } .pill-btn.text-color-fs-yellow svg { fill: #FEF5C2; } .pill-btn.theme-fs-orange { border-color: #FAA21C; } .pill-btn.theme-fs-orange.filled { background: #FAA21C; } .pill-btn.text-color-fs-orange { color: #FAA21C; } .pill-btn.text-color-fs-orange svg { fill: #FAA21C; } .pill-btn.theme-vr-yellow { border-color: #F1C218; } .pill-btn.theme-vr-yellow.filled { background: #F1C218; } .pill-btn.text-color-vr-yellow { color: #F1C218; } .pill-btn.text-color-vr-yellow svg { fill: #F1C218; } .pill-btn.theme-vr-black { border-color: #231F20; } .pill-btn.theme-vr-black.filled { background: #231F20; } .pill-btn.text-color-vr-black { color: #231F20; } .pill-btn.text-color-vr-black svg { fill: #231F20; } .pill-btn.theme-vr-white { border-color: #FEFEFE; } .pill-btn.theme-vr-white.filled { background: #FEFEFE; } .pill-btn.text-color-vr-white { color: #FEFEFE; } .pill-btn.text-color-vr-white svg { fill: #FEFEFE; } .pill-btn.theme-vr-red { border-color: #BC382C; } .pill-btn.theme-vr-red.filled { background: #BC382C; } .pill-btn.text-color-vr-red { color: #BC382C; } .pill-btn.text-color-vr-red svg { fill: #BC382C; } @media (hover: hover) { .pill-btn { cursor: pointer; } .pill-btn svg { transition: 199.8ms cubic-bezier(0.666, 0, 0.333, 1); transition-property: fill; } .pill-btn:hover { text-decoration: none; } .pill-btn:hover.theme-gold { background: #A07B51; } .pill-btn:hover.theme-gold.filled { background: transparent; color: #A07B51; } .pill-btn:hover.theme-gold.filled svg { fill: #A07B51; } .pill-btn:hover.theme-blue { background: #1B2533; } .pill-btn:hover.theme-blue.filled { background: transparent; color: #1B2533; } .pill-btn:hover.theme-blue.filled svg { fill: #1B2533; } .pill-btn:hover.theme-white { background: #FFFAFB; } .pill-btn:hover.theme-white.filled { background: transparent; color: #FFFAFB; } .pill-btn:hover.theme-white.filled svg { fill: #FFFAFB; } .pill-btn:hover.theme-black { background: #000; } .pill-btn:hover.theme-black.filled { background: transparent; color: #000; } .pill-btn:hover.theme-black.filled svg { fill: #000; } .pill-btn:hover.theme-yellow { background: #EDBD1D; } .pill-btn:hover.theme-yellow.filled { background: transparent; color: #EDBD1D; } .pill-btn:hover.theme-yellow.filled svg { fill: #EDBD1D; } .pill-btn:hover.theme-red { background: #D74229; } .pill-btn:hover.theme-red.filled { background: transparent; color: #D74229; } .pill-btn:hover.theme-red.filled svg { fill: #D74229; } .pill-btn:hover.theme-tan { background: #EBE9E2; } .pill-btn:hover.theme-tan.filled { background: transparent; color: #EBE9E2; } .pill-btn:hover.theme-tan.filled svg { fill: #EBE9E2; } .pill-btn:hover.theme-ft-white { background: #fff; } .pill-btn:hover.theme-ft-white.filled { background: transparent; color: #fff; } .pill-btn:hover.theme-ft-white.filled svg { fill: #fff; } .pill-btn:hover.theme-ft-gold { background: #857550; } .pill-btn:hover.theme-ft-gold.filled { background: transparent; color: #857550; } .pill-btn:hover.theme-ft-gold.filled svg { fill: #857550; } .pill-btn:hover.theme-fs-black { background: #1E1E1E; } .pill-btn:hover.theme-fs-black.filled { background: transparent; color: #1E1E1E; } .pill-btn:hover.theme-fs-black.filled svg { fill: #1E1E1E; } .pill-btn:hover.theme-fs-pink { background: #FFD5CB; } .pill-btn:hover.theme-fs-pink.filled { background: transparent; color: #FFD5CB; } .pill-btn:hover.theme-fs-pink.filled svg { fill: #FFD5CB; } .pill-btn:hover.theme-fs-green { background: #CEE3A0; } .pill-btn:hover.theme-fs-green.filled { background: transparent; color: #CEE3A0; } .pill-btn:hover.theme-fs-green.filled svg { fill: #CEE3A0; } .pill-btn:hover.theme-fs-blue { background: #D8EBF0; } .pill-btn:hover.theme-fs-blue.filled { background: transparent; color: #D8EBF0; } .pill-btn:hover.theme-fs-blue.filled svg { fill: #D8EBF0; } .pill-btn:hover.theme-fs-teal { background: #D7EFE4; } .pill-btn:hover.theme-fs-teal.filled { background: transparent; color: #D7EFE4; } .pill-btn:hover.theme-fs-teal.filled svg { fill: #D7EFE4; } .pill-btn:hover.theme-fs-yellow { background: #FEF5C2; } .pill-btn:hover.theme-fs-yellow.filled { background: transparent; color: #FEF5C2; } .pill-btn:hover.theme-fs-yellow.filled svg { fill: #FEF5C2; } .pill-btn:hover.theme-fs-orange { background: #FAA21C; } .pill-btn:hover.theme-fs-orange.filled { background: transparent; color: #FAA21C; } .pill-btn:hover.theme-fs-orange.filled svg { fill: #FAA21C; } .pill-btn:hover.theme-vr-yellow { background: #F1C218; } .pill-btn:hover.theme-vr-yellow.filled { background: transparent; color: #F1C218; } .pill-btn:hover.theme-vr-yellow.filled svg { fill: #F1C218; } .pill-btn:hover.theme-vr-black { background: #231F20; } .pill-btn:hover.theme-vr-black.filled { background: transparent; color: #231F20; } .pill-btn:hover.theme-vr-black.filled svg { fill: #231F20; } .pill-btn:hover.theme-vr-white { background: #FEFEFE; } .pill-btn:hover.theme-vr-white.filled { background: transparent; color: #FEFEFE; } .pill-btn:hover.theme-vr-white.filled svg { fill: #FEFEFE; } .pill-btn:hover.theme-vr-red { background: #BC382C; } .pill-btn:hover.theme-vr-red.filled { background: transparent; color: #BC382C; } .pill-btn:hover.theme-vr-red.filled svg { fill: #BC382C; } .pill-btn:hover.theme-blue.text-color-blue { color: #FFFAFB; } .pill-btn:hover.theme-blue.text-color-blue svg { fill: #FFFAFB; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .dropdown { width: 100%; display: block; text-align: center; position: relative; text-align: left; } .dropdown.alt { display: inline-block; width: unset; padding: 0; } .dropdown.alt .choices { border: none; } .dropdown.alt .choices .choices__list.choices__list--single { padding-right: 2.5em; } .dropdown.alt .choices .choices__list.choices__list--single .choices__item { font-family: "CardinalSemiCondensed", "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.025em; font-size: 25px; line-height: 25px; } .dropdown.alt .choices:before { transform: translate(-50%, -50%) rotate(90deg) scale(0.8); background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .dropdown.alt .choices.is-open:before { transform: translate(-50%, -50%) rotate(90deg) scale(-0.8); background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; z-index: 10; } .dropdown.alt .choices__list--dropdown { width: 200px; } .dropdown.subnav .choices { border: 0px; } .dropdown.subnav .choices.is-open:before { transform: translate(0%, -50%) scale(-1); } .dropdown.subnav .choices.is-open .choices__inner { background-color: #D74229; } .dropdown.subnav .choices:before { right: 7.14286%; width: 20px; height: 20px; margin-right: -4px; transform: translate(0%, -50%); background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .dropdown.subnav .choices .choices__inner { min-height: 40px; padding: 6.5px 7.14286%; } .dropdown.subnav .choices .choices__inner .choices__placeholder { color: #FFFAFB; } .dropdown.subnav .choices .choices__inner .choices__list.choices__list--single { color: #FFFAFB; } .dropdown.subnav .choices .choices__list--dropdown .choices__list .choices__item { padding: 10px 7.14286%; } .dropdown.subnav .choices .choices__list--dropdown .choices__list .choices__item.is-selected { position: relative; } .dropdown.subnav .choices .choices__list--dropdown .choices__list .choices__item.is-selected:before { content: ""; position: absolute; top: 50%; left: 3.57143%; width: 6px; height: 6px; border-radius: 3px; background-color: #D74229; transform: translate(-3px, -3px); } .dropdown.filter .choices { border: 0px; } .dropdown.filter .choices.is-open:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .dropdown.filter .choices.is-open .choices__inner .choices__placeholder, .dropdown.filter .choices.is-open .choices__inner .choices__list--single { color: #1B2533; } .dropdown.filter .choices:before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } .dropdown.filter .choices .choices__inner .choices__placeholder, .dropdown.filter .choices .choices__inner .choices__list--single { color: #FFFAFB; } .dropdown.filter .choices .choices__list--dropdown .choices__item--selectable { padding-right: 0px; } .dropdown.a4 { text-transform: unset; } .dropdown.disabled { pointer-events: none; } .dropdown.disabled .choices:before { display: none; } .dropdown .choices { background: none; border: none; outline: none; border-bottom: 2px solid #D74229; } .dropdown .choices:after { display: none; } .dropdown .choices:before { content: ""; position: absolute; top: 50%; right: 0; transform: translate(-50%, -50%); width: 1.5em; height: 1.5em; display: inline-block; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; background-position: center; background-size: contain; transform-origin: center; transition: transform 166.5ms ease; z-index: 10; } .dropdown .choices.is-open.is-flipped .choices__list--dropdown { border-bottom: 1px solid #dddddd; } .dropdown .choices.is-open:before { transform: translate(-50%, -50%) scale(-0.8); } .dropdown .choices.is-open .choices__inner { background: #FFFAFB; } .dropdown .choices.is-open:not(.is-flipped) .choices__list--dropdown { border-top: 1px solid #dddddd; } .dropdown .choices .choices__list--dropdown { box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05); z-index: 25; } .dropdown .choices .choices__list--dropdown .choices__input { font-size: 16px; } .dropdown .choices .choices__placeholder { text-transform: uppercase; color: #1B2533; opacity: 1; } .dropdown .choices .choices__inner { border: none; background: none; position: relative; z-index: 5; } .dropdown .choices .choices__list { padding-left: 0; border: none; } .dropdown .choices .choices__list.choices__list--single { padding-right: 3em; text-transform: uppercase; } .dropdown .choices .choices__list.choices__list--single .choices__item { letter-spacing: 0.1em; } .dropdown .choices .choices__list .choices__item { letter-spacing: 0.02em; width: 100%; overflow: hidden; } .dropdown .choices .choices__list .choices__item:after { opacity: 0; } .dropdown .choices .choices__list .choices__item.is-selected { color: #1B2533; } .dropdown .choices .choices__list .choices__item.is-selected::before { content: "• "; color: #D74229; } .dropdown .choices .choices__list .choices__item--choice { color: #D74229; } .dropdown.filled .choices { border-bottom: none; } .dropdown.filled .choices::before { background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; transform: translate(-50%, -50%) rotate(90deg); } .dropdown.filled .choices[data-type*="select-one"] .choices__inner { padding-bottom: 16px; } .dropdown.filled .choices__inner { background: #EBE9E2; border-radius: 7px; padding: 16px 20px; } .dropdown.filled .choices.is-open::before { transform: translate(-50%, -50%) rotate(90deg) scale(-0.8); } .dropdown.filled .choices.is-open .choices__inner { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .dropdown.filled .choices__item { font-size: 0.75rem; text-transform: uppercase; } @media all and (min-width: 768px) { .dropdown.alt .choices__list--single .choices__item { font-size: 20px; line-height: 1em; } .dropdown.subnav .choices:before { right: 3.57143%; } .dropdown.subnav .choices .choices__inner { padding: 6.5px 3.57143%; } .dropdown.subnav .choices .choices__list--dropdown .choices__list .choices__item { padding: 10px 3.57143%; } .dropdown.subnav .choices .choices__list--dropdown .choices__list .choices__item.is-selected:before { left: 1.78571%; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .glide__slides .tap-card__wrapper { height: auto; padding-right: 12px; transition: transform 266.4ms cubic-bezier(0.666, 0, 0.333, 1); transform: scaleY(0.95) scaleX(0.99); margin-bottom: 0; } .glide__slides .tap-card__wrapper .tap-card__inner { height: 100%; } .glide__slides .tap-card__wrapper .tap-card__inner .tap-card__front { height: 100%; } .glide__slides .tap-card__wrapper.active .slide__wrapper { transform: scaleY(1); } .glide__slides .tap-card__wrapper.active .slide__wrapper .slide__inner .slide__image img { opacity: 0.7; } .tap-card__wrapper { height: 100%; position: relative; margin-bottom: 24px; } .tap-card__wrapper.flipped .tap-card__inner { transform: rotateY(180deg); } .tap-card__wrapper.flipped .tap-card__inner .tap-card__front { visibility: hidden; } .tap-card__wrapper.flipped .tap-card__inner .tap-card__back { visibility: visible; } .tap-card__wrapper .tap-card__inner { height: 100%; position: relative; transition: transform 666ms cubic-bezier(0.666, 0, 0.333, 1); transform-style: preserve-3d; } .tap-card__wrapper .tap-card__inner .tap-card__front, .tap-card__wrapper .tap-card__inner .tap-card__back { padding: 24px; transition: visibility 0ms linear 333ms; border-radius: 7px; background: #EBE9E2; } .tap-card__wrapper .tap-card__inner .tap-card__front { height: 100%; display: flex; flex-direction: column; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__image-wrapper { height: 100px; margin-bottom: 12px; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__image-wrapper img { width: unset; background: #1B2533; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__text { width: 100%; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__text .tap-card__title { margin-bottom: 6px; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__text .tap-card__style { margin-bottom: 12px; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__text .read-more { margin-top: 12px; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__details { margin-top: auto; width: 100%; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__details .stats { display: flex; width: 100%; margin-top: 24px; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__details .stats li { display: grid; grid-template-columns: repeat(2, 1fr); margin-right: 24px; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__details .stats li p { grid-column: 2; margin-bottom: 6px; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__details .stats li svg { grid-row: 1 / span 2; width: 40px; fill: #D74229; margin-right: 6px; transform: translateY(-20%); } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__details .containers { margin-top: 12px; color: #1B2533; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__details .containers li { display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid rgba(27, 37, 51, 0.3); padding: 10.8px 0; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__details .containers li:last-of-type { border: none; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__details .containers li:first-of-type { border-top: 3px solid rgba(27, 37, 51, 0.3); } .tap-card__wrapper .tap-card__inner .tap-card__back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotateY(-180deg); visibility: hidden; overflow: auto; padding-top: 32px; } .tap-card__wrapper .tap-card__inner .tap-card__back .close-button { margin-bottom: 24px; width: 18px; height: 18px; background: #EBE9E2; border: none; outline: none; cursor: pointer; background-image: url('data:image/svg+xml;utf8,'); background-size: cover; background-repeat: no-repeat; } @media all and (min-width: 768px) { .tap-card__wrapper .tap-card__inner .tap-card__front, .tap-card__wrapper .tap-card__inner .tap-card__back { text-align: left; } .tap-card__wrapper .tap-card__inner .tap-card__front { flex-direction: row; flex-wrap: wrap; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__details .stats { margin-top: 12px; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__details .stats li { margin-right: 12px; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__details .stats li p { margin-bottom: 6px; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__details .stats li svg { margin-right: 12px; } .tap-card__wrapper .tap-card__inner .tap-card__front .tap-card__text .tap-card__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .product-grid-item { display: flex; flex-direction: column; justify-content: flex-start; text-align: center; color: #1B2533; height: 100%; } .product-grid-item.is-gear .image__wrapper:before { display: block; content: ""; width: 100%; padding-top: 100%; } .product-grid-item.is-gear .image__wrapper img { padding: 0 7.14286%; } body.fat-tire .product-grid-item .title { color: #1B2533; } body.fat-tire .product-grid-item .subtitle { color: #857550; } body.voodoo-ranger .product-grid-item .title { color: #231F20; } body.voodoo-ranger .product-grid-item .t4 { color: #231F20; } body.fat-tire body.voodoo-ranger .product-grid-item .t4 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 400; font-style: normal; font-size: 14px; line-height: 18px; } @media all and (min-width: 1440px) { body.fat-tire body.voodoo-ranger .product-grid-item .t4 { font-weight: 400; font-style: normal; font-size: 18px; line-height: 25px; } } body.voodoo-ranger body.voodoo-ranger .product-grid-item .t4 { font-family: "ccsamaritanlower-regular", sans-serif; font-size: 14px; line-height: 20px; } @media all and (min-width: 1440px) { body.voodoo-ranger body.voodoo-ranger .product-grid-item .t4 { font-size: 18px; line-height: 27px; } } .product-grid-item .hover-background { display: none; } .product-grid-item .image__wrapper { width: 100%; margin-bottom: 24px; position: relative; } .product-grid-item .image__wrapper:before { display: block; content: ""; width: 100%; padding-top: 175%; } .product-grid-item .image__wrapper .hover-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; opacity: 1; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2)); } .product-grid-item .image__wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; padding: 0 14.28571%; } .product-grid-item .image__wrapper .new-graphic { position: absolute; top: 0; right: 0; display: block; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFAFB; margin-right: 12px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } .product-grid-item .title { padding: 0 6px; } .product-grid-item .subtitle { color: #D74229; } .product-grid-item .subtitle.top { margin-bottom: 6px; } .product-grid-item .subtitle.bottom { margin-top: 6px; } @media all and (min-width: 768px) { .product-grid-item.is-gear .image__wrapper:before { display: block; content: ""; width: 100%; padding-top: 100%; } .product-grid-item .hover-background { display: block; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .product-grid-item .hover-background:before { display: block; content: ""; width: 100%; padding-top: 175%; } .product-grid-item .image__wrapper { margin-bottom: 24px; } .product-grid-item .image__wrapper:before { display: block; content: ""; width: 100%; padding-top: 125%; } .product-grid-item .image__wrapper .hover-image { opacity: 0; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1)); } .product-grid-item .image__wrapper img { filter: none; } } @media all and (min-width: 1280px) { .product-grid-item.is-gear .image__wrapper img { padding: 0; } .product-grid-item .image__wrapper img { padding: 0 14.28571%; } } @media (hover: hover) { .product-grid-item { padding-bottom: 32px; margin-bottom: -32px; transition: background-color 33.3ms cubic-bezier(0.666, 0, 0.333, 1); border-radius: 7px; } .product-grid-item .hover-background { transition: opacity 166.5ms ease; } .product-grid-item .image__wrapper .hover-image { transition: opacity 166.5ms ease; } body.voodoo-ranger .product-grid-item:hover { background: transparent; } .product-grid-item:hover { background: rgba(0, 0, 0, 0.03); } .product-grid-item:hover .hover-background { opacity: 1; } .product-grid-item:hover .image__wrapper .hover-image { opacity: 1; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ #header + .inner .scroll-drag-indicator.follow-cursor { margin-top: -50px; } #header.has-disclaimer + .inner .scroll-drag-indicator.follow-cursor { margin-top: -85px; } .scroll-drag-indicator { width: 0; height: 0; position: absolute; pointer-events: none; transition: opacity 333ms cubic-bezier(0.666, 0, 0.333, 1), visibility 0ms linear 333ms; z-index: 10; } .scroll-drag-indicator.hidden { opacity: 0; visibility: hidden; } .scroll-drag-indicator.follow-cursor { top: 0; left: 0; } .scroll-drag-indicator.mobile-icon-scroll .scroll-drag-indicator__inner:before { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } .scroll-drag-indicator .scroll-drag-indicator__inner { display: block; width: 30px; height: 30px; border-radius: 50%; background: #EDBD1D; box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.06); text-align: center; transform: translate(-50%, -50%); } .scroll-drag-indicator .scroll-drag-indicator__inner:before { content: ""; position: absolute; top: 5px; left: 5px; width: 20px; height: 20px; background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } .scroll-drag-indicator .scroll-drag-indicator__inner:after { content: ''; display: block; width: 22.5px; height: 22.5px; border-radius: 50%; position: absolute; background: #EDBD1D; animation: grow 1665ms cubic-bezier(0, 0, 0.666, 1) 0ms infinite; margin-top: 2.5px; margin-left: 2.5px; transform-origin: 50% 50%; top: 0; left: 0; z-index: -5; } .scroll-drag-indicator .scroll-drag-indicator__inner p { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 125%); text-shadow: 0px 0px 1.5px #ffffff; display: none; } .scroll-drag-indicator .scroll-drag-indicator__inner p.mobile { display: block; } @media all and (min-width: 768px) { .scroll-drag-indicator.icon-drag .scroll-drag-indicator__inner:before { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } .scroll-drag-indicator.icon-scroll .scroll-drag-indicator__inner:before { background-image: url('data:image/svg+xml;utf8,'); background-size: contain; background-repeat: no-repeat; } .scroll-drag-indicator .scroll-drag-indicator__inner { display: block; width: 45px; height: 45px; border-radius: 50%; } .scroll-drag-indicator .scroll-drag-indicator__inner:before { top: 10px; left: 10px; width: 25px; height: 25px; } .scroll-drag-indicator .scroll-drag-indicator__inner:after { margin-top: 3.75px; margin-left: 3.75px; display: block; width: 33.75px; height: 33.75px; border-radius: 50%; } .scroll-drag-indicator .scroll-drag-indicator__inner p { display: block; } .scroll-drag-indicator .scroll-drag-indicator__inner p.mobile { display: none; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .notice { background: #fff; border-radius: 7px; padding: 1rem 0.9375rem 1rem 3.75rem; display: inline-block; font-size: 0.9375rem; position: relative; font-family: "SchoolBook", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } .notice > span { color: #D74229; opacity: 0.9; } .notice > div > span { color: #D74229; opacity: 0.9; } .notice > div + div { margin-top: .5rem; } .notice::before { left: 0.8375rem; top: 0.625rem; content: "!"; width: 1.875rem; height: 1.875rem; color: #fff; background: #D74229; position: absolute; display: flex; position: absolute; border-radius: 50%; justify-content: center; align-items: center; font-size: 1.2rem; font-family: "SchoolBookBold", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } .notice.hidden { display: none; } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .notify-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; position: fixed; visibility: hidden; transition: visibility 0ms cubic-bezier(0.666, 0, 0.333, 1) 666ms; z-index: 20; } .notify .notify-wrapper { visibility: visible; transition: visibility 0ms cubic-bezier(0.666, 0, 0.333, 1) 0ms; } .notify .notify-wrapper:before { opacity: 1; } .notify .notify-wrapper .notify-inner { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1); } .notify-wrapper:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(27, 37, 51, 0.92); opacity: 0; transition: opacity 666ms cubic-bezier(0.666, 0, 0.333, 1); } .notify-wrapper .notify-inner { position: absolute; top: 50%; left: 50%; width: 85.71429%; height: auto; margin-top: 40px; padding: 7.14286%; text-align: center; background-color: #FFFAFB; transform: translate3d(-50%, -50%, 0) scale(0.9); opacity: 0; transition: transform 666ms cubic-bezier(0.666, 0, 0.333, 1), opacity 666ms cubic-bezier(0.666, 0, 0.333, 1); } .notify-wrapper .notify-inner .notify-content h4, .notify-wrapper .notify-inner .notify-content p { color: #1B2533; margin-bottom: 24px; } .notify-wrapper .notify-inner .notify-close-btn { box-sizing: content-box; position: absolute; top: 0px; right: 3.57143%; width: 28px; height: 28px; padding: 10px; margin-top: 3.57143%; transform: translate(10px, -10px); cursor: pointer; } .notify-wrapper .notify-inner .notify-close-btn svg { width: 100%; height: 100%; fill: #D74229; } @media all and (min-width: 768px) { .notify-wrapper .notify-inner { width: 540px; padding: 3.57143%; } } /* Media Queries */ /* Color function for SVG mixins */ /* Respond */ /* Transitions */ /* Util */ /* Shapes */ /* Icons */ /* Type */ /* BYO Notice */ .starburst-element-wrapper .starburst-element-inner { overflow: hidden; } .starburst-element-wrapper .starburst-element-inner svg { display: none; } @media all and (min-width: 768px) { .starburst-element-wrapper { position: relative; pointer-events: none; } .starburst-element-wrapper.starburst-element-small { width: 280px; height: 100%; } .starburst-element-wrapper.starburst-element-small .starburst-element-inner svg:nth-of-type(1) { display: block; } .starburst-element-wrapper.starburst-element-big { width: 743px; height: 100%; } .starburst-element-wrapper.starburst-element-big .starburst-element-inner svg:nth-of-type(2) { display: block; } } /********************************************** HEADINGS **********************************************/ .superhead, h1, h2, h3, h4, h5, h6 { font-family: "CardinalSemiCondensed", "Helvetica Neue", Helvetica, sans-serif; text-transform: uppercase; letter-spacing: 0.01em; } .superhead { font-size: calc(88px + (213 - 88) * ((100vw - 340px) / (1440 - 340))); line-height: 0.85em; } h1 { font-size: calc(80px + (156 - 80) * ((100vw - 340px) / (1440 - 340))); line-height: 0.78em; } h2 { font-size: calc(68px + (135 - 68) * ((100vw - 340px) / (1440 - 340))); line-height: 0.81em; } h3 { font-size: calc(52px + (90 - 52) * ((100vw - 340px) / (1440 - 340))); line-height: 0.8em; } h4 { font-size: calc(45px + (70 - 45) * ((100vw - 340px) / (1440 - 340))); line-height: 0.78em; } h5 { font-size: calc(35px + (52 - 35) * ((100vw - 340px) / (1440 - 340))); line-height: 0.92em; } h6 { font-size: calc(30px + (40 - 30) * ((100vw - 340px) / (1440 - 340))); line-height: 0.82em; } /********************************************** SUBTITLES **********************************************/ .t1, .t2, .t3, .t4 { font-family: "Eames", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; text-transform: uppercase; } .t1 { font-size: calc(24px + (61 - 24) * ((100vw - 340px) / (1440 - 340))); line-height: 1em; } .t2 { font-size: calc(18px + (34 - 18) * ((100vw - 340px) / (1440 - 340))); line-height: 1em; } .t3 { font-size: calc(16px + (25 - 16) * ((100vw - 340px) / (1440 - 340))); line-height: 1em; } .t4 { font-size: calc(12px + (15 - 12) * ((100vw - 340px) / (1440 - 340))); line-height: 1em; } /********************************************** PARAGRAPHS **********************************************/ p, .p { font-size: 14px; line-height: 18px; font-family: "SchoolBook", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } p.extra-large, .p.extra-large { font-size: 22px; line-height: 26px; font-family: "SchoolBookBold", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } p.extra-large.italic, .p.extra-large.italic { font-family: "SchoolBookBoldItalic", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } p.large, .p.large { font-size: 18px; line-height: 23px; font-family: "SchoolBookBold", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } p.large.italic, .p.large.italic { font-family: "SchoolBookBoldItalic", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } p.medium, .p.medium { font-size: 16px; line-height: 20px; font-family: "SchoolBookBold", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } p.medium.italic, .p.medium.italic { font-family: "SchoolBookBoldItalic", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } p.small, .p.small { font-size: 13px; line-height: 18px; } p.small.bold, .p.small.bold { font-family: "SchoolBookBold", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } p.extra-small, .p.extra-small { font-size: 11px; line-height: 16px; } p.italic, .p.italic { font-family: "SchoolBookItalic", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; letter-spacing: -0.01em; } p.italicstrong, p.italic.bold, .p.italicstrong, .p.italic.bold { font-family: "SchoolBookBoldItalic", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; font-weight: 800; } p strong, p.bold, .p strong, .p.bold { font-family: "SchoolBookBold", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } p em, .p em { font-family: "SchoolBookBoldItalic", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } p a:hover, .p a:hover { text-decoration: underline; } /********************************************** NAVS & LINKS **********************************************/ .a1 { font-family: "SchoolBookBold", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; font-size: 24px; line-height: 23px; font-family: 700; } .a2 { font-family: "CardinalSemiCondensed", "Helvetica Neue", Helvetica, sans-serif; font-size: 25px; line-height: 20px; text-transform: uppercase; } .a3 { font-family: "CardinalSemiCondensed", "Helvetica Neue", Helvetica, sans-serif; font-size: 20px; line-height: 24px; text-transform: uppercase; letter-spacing: 1px; } .a4 { font-family: "CardinalWideBold", "Helvetica Neue", Helvetica, sans-serif; font-size: 16px; line-height: 19px; text-transform: uppercase; letter-spacing: 2px; } .a5 { font-family: "CardinalWideBold", "Helvetica Neue", Helvetica, sans-serif; font-size: 14px; line-height: 17px; text-transform: uppercase; letter-spacing: 1px; } .a6 { font-family: "CardinalWideBold", "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; line-height: 14px; text-transform: uppercase; letter-spacing: 2px; } /********************************************** NAVS & LINKS **********************************************/ form label, form textarea { font-size: 14px; line-height: 16px; } form label { font-weight: 700; } .light { font-weight: 100; } .centered { text-align: center; } .uppercase { text-transform: uppercase; } /********************************************** STYLES MOBILE **********************************************/ @media all and (min-width: 1440px) { .superhead { font-size: 213px; line-height: 165px; } h1 { font-size: 156px; line-height: 0.8em; } h2 { font-size: 135px; line-height: 0.81em; } h3 { font-size: 90px; line-height: 0.8em; } h4 { font-size: 70px; line-height: 0.78em; } h5 { font-size: 52px; line-height: 0.92em; } h6 { font-size: 40px; line-height: 0.82em; } .t1 { font-size: 61px; line-height: 1em; } .t2 { font-size: 34px; line-height: 1em; } .t3 { font-size: 25px; line-height: 1em; } .t4 { font-size: 15px; line-height: 1em; } p, .p { font-size: 18px; line-height: 25px; } p.extra-large, .p.extra-large { font-size: 30px; line-height: 39px; } p.large, .p.large { font-size: 22px; line-height: 29px; } p.medium, .p.medium { font-size: 20px; line-height: 25px; } p.small, .p.small { font-size: 16px; line-height: 20px; } p.extra-small, .p.extra-small { font-size: 14px; line-height: 18px; } } .a1 { font-size: 24px; line-height: 23px; } .a2 { font-size: 25px; line-height: 20px; } .a3 { font-size: 20px; line-height: 24px; letter-spacing: 1px; } .a4 { font-size: 16px; line-height: 19px; letter-spacing: 2px; } .a5 { font-size: 14px; line-height: 17px; letter-spacing: 1px; } .a6 { font-size: 12px; line-height: 14px; letter-spacing: 2px; }