/* devanagari */ @font-face { font-family: 'Dekko'; font-display: swap; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/dekko/v23/46khlb_wWjfSrutDTUrcfg.woff2) format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'Dekko'; font-display: swap; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/dekko/v23/46khlb_wWjfSrutMTUrcfg.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Dekko'; font-display: swap; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/dekko/v23/46khlb_wWjfSrutCTUo.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .icon { display: inline-block; width: 1em; height: 1em; stroke-width: 0; stroke: currentColor; fill: currentColor; -webkit-transition: 0.2s ease-out; transition: 0.2s ease-out; } .uppercase { text-transform: uppercase; } .icon-wa { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M27.3 4.7c-3-3-7-4.7-11.2-4.7C7.3 0 .2 7.1.2 15.9c0 2.8.7 5.5 2.1 7.9L.1 32l8.4-2.2c2.3 1.3 4.9 1.9 7.6 1.9 8.7 0 15.9-7.1 15.9-15.9-.1-4.2-1.7-8.1-4.7-11.1zM16.1 29c-2.4 0-4.7-.6-6.7-1.8l-.5-.3-5 1.3 1.3-4.9-.3-.5c-1.3-2.1-2-4.5-2-7 0-7.3 5.9-13.2 13.2-13.2 3.5 0 6.8 1.4 9.3 3.9 2.5 2.5 3.9 5.8 3.9 9.3-.1 7.3-6 13.2-13.2 13.2zm7.2-9.8c-.4-.2-2.3-1.2-2.7-1.3s-.6-.2-.9.2c-.3.4-1 1.3-1.3 1.6-.2.3-.5.3-.9.1s-1.7-.6-3.2-2c-1.2-1-2-2.4-2.2-2.7s0-.6.2-.8c.2-.2.4-.5.6-.7s.3-.4.4-.7c.1-.3.1-.5 0-.7s-.9-2.2-1.2-2.9c-.3-.8-.6-.7-.9-.7h-.8c-.3 0-.6 0-1 .4S8 10.4 8 12.3s1.4 3.8 1.6 4.1c.2.3 2.8 4.3 6.8 6 .9.4 1.7.6 2.3.8 1 .3 1.8.3 2.5.2.8-.1 2.3-1 2.7-1.9s.3-1.7.2-1.9c-.1-.1-.4-.2-.8-.4z' fill='%23fff'/%3E%3C/svg%3E"); } .icon-gift { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.779' height='14.779'%3E%3Cpath d='M13.3 3.695h-.894a3.636 3.636 0 0 0 .155-1.108A2.589 2.589 0 0 0 9.976 0c-1.2 0-2 1.1-2.515 2.279C6.952 1.16 6.111 0 4.8 0a2.589 2.589 0 0 0-2.583 2.586 3.644 3.644 0 0 0 .155 1.108h-.894A1.479 1.479 0 0 0 0 5.173v1.478a1.479 1.479 0 0 0 1.478 1.478V13.3a1.479 1.479 0 0 0 1.478 1.478h8.868A1.479 1.479 0 0 0 13.3 13.3V8.129a1.479 1.479 0 0 0 1.478-1.478V5.173A1.479 1.479 0 0 0 13.3 3.695ZM9.976 1.478a1.11 1.11 0 0 1 1.108 1.108c0 1.108-.463 1.108-.739 1.108H8.514c.378-1.164.926-2.216 1.462-2.216ZM3.695 2.586A1.11 1.11 0 0 1 4.8 1.478c.656 0 1.267 1.127 1.624 2.217h-1.99c-.277 0-.739 0-.739-1.109ZM1.478 5.173h5.173v1.478H1.478ZM2.956 13.3V8.129h3.695V13.3Zm8.868 0H8.129V8.129h3.695ZM8.129 6.651V5.236l.013-.063H13.3v1.478Z' fill='%23f51a1a'/%3E%3C/svg%3E"); } .icon-fb { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzUiIGhlaWdodD0iMzQiIHZpZXdCb3g9IjAgMCAzNSAzNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjA5MzMgLTAuMDAzNzg1OThDMTIuNzkwNyAtMC4wMDA1ODEwMzcgOC42NDczMiAxLjYyMzkxIDUuNDg5MDggNC41NDU4N0MyLjMzMDg0IDcuNDY3ODMgMC4zODk3MDYgMTEuNDcyNiAwLjA1MjYxMjMgMTUuNzYyQy0wLjI4NDQ4MiAyMC4wNTE0IDEuMDA3MjIgMjQuMzEwMyAzLjY3MDI1IDI3LjY4OTdDNi4zMzMyNyAzMS4wNjkxIDEwLjE3MiAzMy4zMjA5IDE0LjQyMTMgMzMuOTk2MlYyMi4wNDcySDEwLjA3NjNWMTcuMTAyMkgxNC40MjEzVjEzLjMzNDJDMTQuNDIxMyA5LjA0NDIxIDE2Ljk3NTMgNi42NzgyMSAyMC44ODAzIDYuNjc4MjFDMjIuMTY0IDYuNjk2MDcgMjMuNDQ0NyA2LjgwNzM2IDI0LjcxMjMgNy4wMTEyMVYxMS4yMTgySDIyLjU0OTNDMjIuMTgxNCAxMS4xNjk4IDIxLjgwNzMgMTEuMjA0OSAyMS40NTQ4IDExLjMyMDhDMjEuMTAyMiAxMS40MzY2IDIwLjc4MDMgMTEuNjMwMyAyMC41MTI4IDExLjg4NzVDMjAuMjQ1NCAxMi4xNDQ3IDIwLjAzOTIgMTIuNDU4OCAxOS45MDk2IDEyLjgwNjZDMTkuNzggMTMuMTU0MyAxOS43MzA0IDEzLjUyNjcgMTkuNzY0MyAxMy44OTYyVjE3LjA5NjJIMjQuNTAzM0wyMy43NDYzIDIyLjA0MjJIMTkuNzY0M1YzMy45OTYyQzI0LjAyODMgMzMuMzM4NSAyNy44ODYxIDMxLjA5MzIgMzAuNTY0MiAyNy43MTA2QzMzLjI0MjMgMjQuMzI4IDM0LjU0MjggMjAuMDU4IDM0LjIwNDkgMTUuNzU2OUMzMy44NjcgMTEuNDU1NyAzMS45MTU3IDcuNDQxMTkgMjguNzQyMiA0LjUxODI3QzI1LjU2ODggMS41OTUzNCAyMS40MDc3IC0wLjAxOTk1ODIgMTcuMDkzMyAtMC4wMDM3ODU5OFoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo="); } .icon-x { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzUiIGhlaWdodD0iMzUiIHZpZXdCb3g9IjAgMCAzNSAzNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjEwMDYgMEMxOS4zODQ4IDAgMjEuNjQ1NiAwLjQ2MDU3OSAyMy43NDggMS4zNTM1MkMyNS43OTAzIDIuMTk0NzQgMjcuNjQ2MiAzLjQzMTM2IDI5LjIwOCA0Ljk5MzE2QzMwLjc2OTggNi41NTQ5NiAzMi4wMDY0IDguNDEwODkgMzIuODQ3NyAxMC40NTMxQzMzLjc0MDYgMTIuNTU1NiAzNC4yMDEyIDE0LjgxNjQgMzQuMjAxMiAxNy4xMDA2QzM0LjIwMTIgMTkuMzg0OCAzMy43NDA2IDIxLjY0NTYgMzIuODQ3NyAyMy43NDhDMzIuMDA2NCAyNS43OTAzIDMwLjc2OTggMjcuNjQ2MiAyOS4yMDggMjkuMjA4QzI3LjY0NjIgMzAuNzY5OCAyNS43OTAzIDMyLjAwNjQgMjMuNzQ4IDMyLjg0NzdDMjEuNjQ3NCAzMy43NDY2IDE5LjM4NTUgMzQuMjA3NSAxNy4xMDA2IDM0LjIwMTJDMTQuODE1OSAzNC4yMDc1IDEyLjU1MzYgMzMuNzQ2NSAxMC40NTMxIDMyLjg0NzdDOC40MTA4OSAzMi4wMDY0IDYuNTU0OTYgMzAuNzY5OCA0Ljk5MzE2IDI5LjIwOEMzLjQzMTM2IDI3LjY0NjIgMi4xOTQ3NCAyNS43OTAzIDEuMzUzNTIgMjMuNzQ4QzAuNDYwNTc5IDIxLjY0NTYgMCAxOS4zODQ4IDAgMTcuMTAwNkM2LjkxNjg2ZS0wNiAxNC44MTY0IDAuNDYwNTg2IDEyLjU1NTYgMS4zNTM1MiAxMC40NTMxQzIuMTk0NzUgOC40MTA4OCAzLjQzMTM2IDYuNTU0OTcgNC45OTMxNiA0Ljk5MzE2QzYuNTU0OTcgMy40MzEzNiA4LjQxMDg4IDIuMTk0NzUgMTAuNDUzMSAxLjM1MzUyQzEyLjU1NTYgMC40NjA1ODYgMTQuODE2NCA3LjE3MzA5ZS0wNiAxNy4xMDA2IDBaTTguNTUyNzMgOS45OTYwOUwxNC45ODA1IDE4LjIwMDJMOC44ODc3IDI0Ljk5NjFIMTEuNDk3MUwxNi4xOTgyIDE5Ljc1MkwyMC4zMDc2IDI0Ljk5NjFIMjUuNTUyN0wxOC44NTM1IDE2LjM1MDZMMjQuNTQ3OSA5Ljk5NjA5SDIxLjk0MTRMMTcuNjQ2NSAxNC43ODkxTDEzLjkzMjYgOS45OTYwOUg4LjU1MjczWk0xMy4xNDc1IDExLjQzOTVMMjIuNDcwNyAyMy40NzI3SDIxLjAyNjRWMjMuNDczNkwxMS41OTc3IDExLjQzOTVIMTMuMTQ3NVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo="); } .icon-ig { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzUiIGhlaWdodD0iMzUiIHZpZXdCb3g9IjAgMCAzNSAzNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjEwMDEgMzQuMjAxMUMxNC44MTU1IDM0LjIwNzQgMTIuNTUzNiAzMy43NDcgMTAuNDUzMSAzMi44NDgxQzguNDEwODMgMzIuMDA2OSA2LjU1NTI2IDMwLjc2OTcgNC45OTM0MiAyOS4yMDc5QzMuNDMxNTggMjcuNjQ2IDIuMTk0MzggMjUuNzkwNCAxLjM1MzE0IDIzLjc0ODFDMC40NjAyMDIgMjEuNjQ1NyAwIDE5LjM4NDkgMCAxNy4xMDA2QzAgMTQuODE2NCAwLjQ2MDIwMiAxMi41NTU2IDEuMzUzMTQgMTAuNDUzMUMyLjE5NDM4IDguNDEwODMgMy40MzE1OCA2LjU1NTI2IDQuOTkzNDIgNC45OTM0MkM2LjU1NTI2IDMuNDMxNTggOC40MTA4MyAyLjE5NDM4IDEwLjQ1MzEgMS4zNTMxNEMxMi41NTU2IDAuNDYwMjAyIDE0LjgxNjQgMCAxNy4xMDA2IDBDMTkuMzg0OSAwIDIxLjY0NTcgMC40NjAyMDIgMjMuNzQ4MSAxLjM1MzE0QzI1Ljc5MDQgMi4xOTQzOCAyNy42NDYgMy40MzE1OCAyOS4yMDc5IDQuOTkzNDJDMzAuNzY5NyA2LjU1NTI2IDMyLjAwNjkgOC40MTA4MyAzMi44NDgxIDEwLjQ1MzFDMzMuNzQxMSAxMi41NTU2IDM0LjIwMTMgMTQuODE2NCAzNC4yMDEzIDE3LjEwMDZDMzQuMjAxMyAxOS4zODQ5IDMzLjc0MTEgMjEuNjQ1NyAzMi44NDgxIDIzLjc0ODFDMzIuMDA2OSAyNS43OTA0IDMwLjc2OTcgMjcuNjQ2IDI5LjIwNzkgMjkuMjA3OUMyNy42NDYgMzAuNzY5NyAyNS43OTA0IDMyLjAwNjkgMjMuNzQ4MSAzMi44NDgxQzIxLjY0NzQgMzMuNzQ3MiAxOS4zODUyIDM0LjIwNzYgMTcuMTAwMSAzNC4yMDExWk0yNS42NTExIDEwLjY4NTFDMjUuNjUzNyAxMC40MDY1IDI1LjYwMDMgMTAuMTMwMiAyNS40OTQyIDkuODcyNUMyNS4zODggOS42MTQ4NSAyNS4yMzEyIDkuMzgxMTEgMjUuMDMzMSA5LjE4NTE0QzI0LjgzNzkgOC45NzkzNCAyNC42MDE5IDguODE2NTYgMjQuMzQwMiA4LjcwNzIyQzI0LjA3ODQgOC41OTc4OCAyMy43OTY3IDguNTQ0MzcgMjMuNTEzMSA4LjU1MDE0SDEwLjY4OTFDMTAuMTI0NSA4LjU1NzkgOS41ODUyMSA4Ljc4NTY0IDkuMTg1OTMgOS4xODQ5M0M4Ljc4NjY0IDkuNTg0MjEgOC41NTg5IDEwLjEyMzUgOC41NTExNCAxMC42ODgxVjEyLjgyNjFIMTIuMzYwMUMxMi45NTQyIDEyLjE1NDIgMTMuNjg0MyAxMS42MTYyIDE0LjUwMTkgMTEuMjQ3N0MxNS4zMTk2IDEwLjg3OTIgMTYuMjA2MyAxMC42ODg2IDE3LjEwMzEgMTAuNjg4NkMxOCAxMC42ODg2IDE4Ljg4NjcgMTAuODc5MiAxOS43MDQzIDExLjI0NzdDMjAuNTIyIDExLjYxNjIgMjEuMjUyMSAxMi4xNTQyIDIxLjg0NjEgMTIuODI2MUgyNS42NTQxTDI1LjY1MTEgMTAuNjg1MVpNMTIuODI3MSAxNy4wOTUxQzEyLjgyNjYgMTguMjI5IDEzLjI3NjUgMTkuMzE2NyAxNC4wNzc4IDIwLjExOUMxNC44NzkxIDIwLjkyMTIgMTUuOTY2MiAyMS4zNzIzIDE3LjEwMDEgMjEuMzczMUMxNy42NjIgMjEuMzczNCAxOC4yMTg0IDIxLjI2MjkgMTguNzM3NiAyMS4wNDhDMTkuMjU2NyAyMC44MzMxIDE5LjcyODQgMjAuNTE4IDIwLjEyNTcgMjAuMTIwN0MyMC41MjMgMTkuNzIzNCAyMC44MzgxIDE5LjI1MTcgMjEuMDUzIDE4LjczMjZDMjEuMjY3OSAxOC4yMTM0IDIxLjM3ODQgMTcuNjU3IDIxLjM3ODEgMTcuMDk1MUMyMS4zNzczIDE1Ljk2MTIgMjAuOTI2MiAxNC44NzQxIDIwLjEyNCAxNC4wNzI4QzE5LjMyMTcgMTMuMjcxNSAxOC4yMzQgMTIuODIxNiAxNy4xMDAxIDEyLjgyMjFDMTUuOTY3MSAxMi44MjI5IDE0Ljg4MDcgMTMuMjczNCAxNC4wNzk1IDE0LjA3NDVDMTMuMjc4NCAxNC44NzU3IDEyLjgyNzkgMTUuOTYyMSAxMi44MjcxIDE3LjA5NTFaTTI1LjY1NDEgMTQuOTU3MUgyMy4xMTUxQzIzLjQ2ODYgMTUuOTIyIDIzLjU4MzEgMTYuOTU4MSAyMy40NDkgMTcuOTc2OUMyMy4zMTQ5IDE4Ljk5NTcgMjIuOTM2MSAxOS45NjY5IDIyLjM0NTEgMjAuODA3NEMyMS43NTQgMjEuNjQ4IDIwLjk2ODIgMjIuMzMzIDIwLjA1NDggMjIuODAzOEMxOS4xNDE1IDIzLjI3NDYgMTguMTI3NyAyMy41MTczIDE3LjEwMDEgMjMuNTExMUMxNi4wNzA1IDIzLjUyNDQgMTUuMDUzMiAyMy4yODYzIDE0LjEzNjMgMjIuODE3NkMxMy4yMTk1IDIyLjM0OSAxMi40MzA3IDIxLjY2MzggMTEuODM4NCAyMC44MjE1QzExLjI0NjEgMTkuOTc5MiAxMC44NjgxIDE5LjAwNTIgMTAuNzM3MiAxNy45ODM4QzEwLjYwNjMgMTYuOTYyNSAxMC43MjY0IDE1LjkyNDYgMTEuMDg3MSAxNC45NjAxSDguNTUxMTRWMjMuNTExMUM4LjU0NzIzIDIzLjc5MyA4LjU5OTg3IDI0LjA3MjggOC43MDU5MyAyNC4zMzM5QzguODEyIDI0LjU5NTEgOC45NjkzMyAyNC44MzIzIDkuMTY4NjUgMjUuMDMxNkM5LjM2Nzk2IDI1LjIzMDkgOS42MDUyMSAyNS4zODgzIDkuODY2MzcgMjUuNDk0M0MxMC4xMjc1IDI1LjYwMDQgMTAuNDA3MyAyNS42NTMgMTAuNjg5MSAyNS42NDkxSDIzLjUxNjFDMjMuNzk4IDI1LjY1MyAyNC4wNzc4IDI1LjYwMDQgMjQuMzM4OSAyNS40OTQzQzI0LjYwMDEgMjUuMzg4MyAyNC44MzczIDI1LjIzMDkgMjUuMDM2NiAyNS4wMzE2QzI1LjIzNTkgMjQuODMyMyAyNS4zOTMzIDI0LjU5NTEgMjUuNDk5MyAyNC4zMzM5QzI1LjYwNTQgMjQuMDcyOCAyNS42NTggMjMuNzkzIDI1LjY1NDEgMjMuNTExMVYxNC45NTcxWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="); } .icon-tw { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48.1' xml:space='preserve'%3E%3Cpath d='M24 39.7c-2.1 0-4.2-.4-6.1-1.2-3.8-1.6-6.8-4.6-8.4-8.4-1.7-3.9-1.7-8.3 0-12.3C11 14 14 11 17.9 9.4c3.9-1.7 8.3-1.7 12.3 0C34 11 37 14 38.6 17.8c1.7 3.9 1.7 8.3 0 12.3-1.6 3.8-4.6 6.8-8.4 8.4-2 .8-4.1 1.2-6.2 1.2zM33.3 16l-.6.3-.6.4-.6.3-.6.2c-.7-.8-1.7-1.3-2.8-1.3-2.4 0-3.6 1-3.6 3v1.8c-3 0-5.8-1.3-7.6-3.6-.5.5-.8 1.1-.8 1.8-.1 1.2.5 2.4 1.5 3.1h-1c-.2 0-.3-.1-.4-.2 0 .9.2 1.7.8 2.4.5.6 1.3 1.1 2.1 1.2-.2.3-.5.4-.9.4-.3 0-.6-.1-.9-.3 0 .8.4 1.5 1.2 1.9.8.4 1.7.7 2.6.7-.4.6-1 1-1.6 1.2-.7.3-1.5.4-2.3.4-.4 0-.8-.1-1.2-.2-.5-.1-.8-.2-.8-.2.5.8 1.2 1.4 2 1.7 1.2.5 2.5.8 3.9.7 1.3 0 2.6-.2 3.9-.7 1.1-.4 2.2-1.1 3.1-1.9.8-.8 1.6-1.7 2.2-2.7.6-1 1.1-2.1 1.4-3.2.3-1.1.4-2.2.4-3.3 0 0 .1-.1.4-.3.3-.2.6-.3.9-.5.3-.2.5-.4.7-.7-1.1 0-1.8 0-2.2.1.6-.6 1.2-1.5 1.4-2.5z' fill='%231065a6'/%3E%3C/svg%3E"); } .icon-wa-share { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48.1' xml:space='preserve'%3E%3Cpath d='M25.3 7.8c-8.3 0-15.1 6.7-15.2 15 0 2.7.7 5.4 2.2 7.8l-2.7 8.1L18 36c7.4 4 16.6 1.3 20.6-6 1.2-2.2 1.8-4.7 1.9-7.2-.1-8.3-6.9-15-15.2-15zm7.5 20.7c-.6.9-1.6 1.6-2.7 1.7-.7 0-.7.6-4.6-1.1s-6.2-5.8-6.4-6c-.9-1.2-1.4-2.6-1.4-4 0-1.2.6-2.4 1.5-3.2.3-.3.7-.4 1-.4h.7c.2 0 .6 0 .9.7.3.8 1 2.7 1.1 2.9.1.2.1.5 0 .7-.1.2-.2.4-.4.6-.2.2-.4.5-.6.7-.2.2-.4.4-.2.8.5 1 1.2 1.9 2.1 2.7.9.8 1.9 1.5 3 2 .4.2.6.2.8-.1s1-1.1 1.3-1.5.5-.3.9-.2 2.2 1.1 2.6 1.3c.4.2.6.3.7.5.1.7 0 1.4-.3 1.9z' fill='%231065a6'/%3E%3C/svg%3E"); } .icon-close { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMyIgaGVpZ2h0PSIzMyIgdmlld0JveD0iMCAwIDMzIDMzIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNzg2MiAxMDI0KSI+PGNpcmNsZSBjeD0iMTYuNSIgY3k9IjE2LjUiIHI9IjE2LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzg2MiAtMTAyNCkiIGZpbGw9InJlZCIvPjxwYXRoIGQ9Ik0xNS41NjYsMy41MWw2LjM2Nyw2LjM2N0wyOC4zLDMuNTFsMy4wNTYsMy4wNTYtNi4zNjcsNi4zNjdMMzEuMzU2LDE5LjMsMjguMywyMi4zNTZsLTYuMzY3LTYuMzY3LTYuMzY3LDYuMzY3TDEyLjUxLDE5LjNsNi4zNjctNi4zNjdMMTIuNTEsNi41NjYsMTUuNTY2LDMuNTFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTc4NjcuNDM0IC0xMDIwLjQzMykiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+"); } .icon-user { width: 20px; height: 20px; background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 25.1 22.5' xml:space='preserve'%3E%3Cstyle%3E.st0%7Bfill:%231065a6%7D%3C/style%3E%3Cg id='Icon_feather-user' transform='translate(1 1)'%3E%3Cpath class='st0' d='M16.9 16.9c-.6 0-1-.4-1-1v-1.3c0-.9-.7-1.6-1.6-1.6H9.2c-.9 0-1.6.7-1.6 1.6v1.3c0 .6-.4 1-1 1s-1-.4-1-1v-1.3c0-2 1.6-3.6 3.6-3.6h5.2c2 0 3.6 1.6 3.6 3.6v1.3c-.1.5-.5 1-1.1 1z' id='Path_11453'/%3E%3Cpath class='st0' d='M11.8 10.4c-2 0-3.6-1.6-3.6-3.6s1.6-3.6 3.6-3.6 3.6 1.6 3.6 3.6c-.1 2-1.7 3.6-3.6 3.6zm0-5.1c-.9 0-1.6.7-1.6 1.6 0 .9.7 1.6 1.6 1.6s1.6-.7 1.6-1.6c-.1-.9-.8-1.6-1.6-1.6z' id='Path_11454'/%3E%3C/g%3E%3C/svg%3E"); } @media (min-width: 768px) { .icon-user { width: 24px; height: 24px; } } .icon-like { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.537' height='14.566'%3E%3Cpath d='M14.081 14.566H8.74l-.971-.971H4.855v.971H0v-8.74h4.855V6.8h.971l1.457-1.459L9.711 0h2.913v2.428l-.971 1.457v.971h2.428l1.457.971v7.769ZM3.884 6.8H.971v6.8h2.913Zm10.682-.319-.971-.653h-2.913V3.4l.971-1.457V.971h-1.2l-2.2 4.855-1.941 1.943H4.855v4.855h3.4l.971.971h4.37l.971-.653Z'/%3E%3C/svg%3E"); } .icon-like-red { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.537' height='14.566'%3E%3Cpath d='M14.081 14.566H8.74l-.971-.971H4.855v.971H0v-8.74h4.855V6.8h.971l1.457-1.459L9.711 0h2.913v2.428l-.971 1.457v.971h2.428l1.457.971v7.769ZM3.884 6.8H.971v6.8h2.913Zm10.682-.319-.971-.653h-2.913V3.4l.971-1.457V.971h-1.2l-2.2 4.855-1.941 1.943H4.855v4.855h3.4l.971.971h4.37l.971-.653Z' fill='%23fc4848'/%3E%3C/svg%3E"); } .icon-comment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.17' height='13.17'%3E%3Cpath data-name='Path 13452' d='M3.292 3.292h6.585v1.317H3.292Zm0 2.634h4.609v1.317H3.292Z'/%3E%3Cpath data-name='Path 13453' d='M11.853 0H1.317A1.318 1.318 0 0 0 0 1.317V13.17l3.512-2.634h8.341a1.318 1.318 0 0 0 1.317-1.317v-7.9A1.318 1.318 0 0 0 11.853 0Zm0 9.219h-8.78l-1.756 1.317V1.317h10.536Z'/%3E%3C/svg%3E"); } .icon-send { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33.9 34.9' xml:space='preserve'%3E%3Ccircle cx='16.8' cy='17' r='16' fill='%231065a6'/%3E%3Cpath d='M25.5 16.2 11.9 9.8c-.4-.2-.9 0-1.1.4-.1.2-.1.4-.1.5l1.6 6.2-1.6 6.2c-.1.4.2.9.6 1 .2 0 .4 0 .5-.1l13.6-6.4c.4-.2.6-.7.4-1.1 0 0-.1-.2-.3-.3zm-12.7 5.7.7-2.7L18 17l-4.6-2.3-.6-2.7 10.6 5-10.6 4.9z' fill='%23fff'/%3E%3C/svg%3E"); } .icon-celendar { background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iY2FsZW5kYXItd2VlayIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYuMDY1IiBoZWlnaHQ9IjE2LjA2NSIgdmlld0JveD0iMCAwIDE2LjA2NSAxNi4wNjUiPg0KICA8cGF0aCBpZD0iUGF0aF8xODU5OSIgZGF0YS1uYW1lPSJQYXRoIDE4NTk5IiBkPSJNMSw1LjI2MlYxNS4zYTEsMSwwLDAsMCwxLDFIMTQuMDU3YTEsMSwwLDAsMCwxLTFWNS4yNjJabTEtMy4wMTJBMi4wMDgsMi4wMDgsMCwwLDAsMCw0LjI1OFYxNS4zYTIuMDA4LDIuMDA4LDAsMCwwLDIuMDA4LDIuMDA4SDE0LjA1N0EyLjAwOCwyLjAwOCwwLDAsMCwxNi4wNjUsMTUuM1Y0LjI1OEEyLjAwOCwyLjAwOCwwLDAsMCwxNC4wNTcsMi4yNVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTEuMjQ2KSIgZmlsbD0iIzEwMTY0YSIgZmlsbC1ydWxlPSJldmVub2RkIi8+DQogIDxwYXRoIGlkPSJQYXRoXzE4NjAwIiBkYXRhLW5hbWU9IlBhdGggMTg2MDAiIGQ9Ik03LjI1MiwwYS41LjUsMCwwLDEsLjUuNVYxYS41LjUsMCwxLDEtMSwwVi41QS41LjUsMCwwLDEsNy4yNTIsMFptOS4wMzcsMGEuNS41LDAsMCwxLC41LjVWMWEuNS41LDAsMCwxLTEsMFYuNUEuNS41LDAsMCwxLDE2LjI4OSwwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuNzM4KSIgZmlsbD0iIzEwMTY0YSIgZmlsbC1ydWxlPSJldmVub2RkIi8+DQogIDxwYXRoIGlkPSJQYXRoXzE4NjAxIiBkYXRhLW5hbWU9IlBhdGggMTg2MDEiIGQ9Ik0xNC43ODMsMTRhLjUuNSwwLDAsMSwuNS0uNWgxYS41LjUsMCwwLDEsLjUuNXYxYS41LjUsMCwwLDEtLjUuNWgtMWEuNS41LDAsMCwxLS41LS41Wk0xMS43NywxNGEuNS41LDAsMCwxLC41LS41aDFhLjUuNSwwLDAsMSwuNS41djFhLjUuNSwwLDAsMS0uNS41aC0xYS41LjUsMCwwLDEtLjUtLjVaTTYuNzUsMTcuMDE0YS41LjUsMCwwLDEsLjUtLjVoMWEuNS41LDAsMCwxLC41LjV2MWEuNS41LDAsMCwxLS41LjVoLTFhLjUuNSwwLDAsMS0uNS0uNVptMy4wMTIsMGEuNS41LDAsMCwxLC41LS41aDFhLjUuNSwwLDAsMSwuNS41djFhLjUuNSwwLDAsMS0uNS41aC0xYS41LjUsMCwwLDEtLjUtLjVaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMy43MzggLTcuNDc2KSIgZmlsbD0iIzEwMTY0YSIvPg0KPC9zdmc+DQo="); } .icon-mapspoint { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMy43OTgiIGhlaWdodD0iMTkuMDQiIHZpZXdCb3g9IjAgMCAxMy43OTggMTkuMDQiPg0KICA8ZyBpZD0ibG9jYXRpb24tb3V0bGluZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSAxKSI+DQogICAgPHBhdGggaWQ9IlBhdGhfMTg2MDIiIGRhdGEtbmFtZT0iUGF0aCAxODYwMiIgZD0iTTEzLjc3NCwzLjM3NWE1Ljc2Myw1Ljc2MywwLDAsMC01LjksNS42MTJjMCwzLjU2NCwzLjkzMyw5LjIxMiw1LjM3NywxMS4xNjJhLjY0Ni42NDYsMCwwLDAsMS4wNDUsMGMxLjQ0NC0xLjk1LDUuMzc2LTcuNiw1LjM3Ni0xMS4xNjJBNS43NjMsNS43NjMsMCwwLDAsMTMuNzc0LDMuMzc1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcuODc1IC0zLjM3NSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzEwMTY0YSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4NCiAgICA8cGF0aCBpZD0iUGF0aF8xODYwMyIgZGF0YS1uYW1lPSJQYXRoIDE4NjAzIiBkPSJNMTguNTU4LDEyLjA5MWExLjk2NiwxLjk2NiwwLDEsMS0xLjk2Ni0xLjk2NkExLjk2NiwxLjk2NiwwLDAsMSwxOC41NTgsMTIuMDkxWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwLjY5MiAtNi4xOTIpIiBmaWxsPSJub25lIiBzdHJva2U9IiMxMDE2NGEiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+DQogIDwvZz4NCjwvc3ZnPg0K"); } .icon-train { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNS4yMDkiIGhlaWdodD0iMTkuNzcyIiB2aWV3Qm94PSIwIDAgMTUuMjA5IDE5Ljc3MiI+DQogIDxwYXRoIGlkPSJ0cmFpbiIgZD0iTTE4LjE1NywzLjM3NWgtNy42YTMuODA3LDMuODA3LDAsMCwwLTMuOCwzLjhWMTYuM0EzLjgsMy44LDAsMCwwLDkuNDc0LDE5LjkzTDguMSwyMy4xNDdIOS43NWwxLjMtMy4wNDJoNi42bDEuMywzLjA0MmgxLjY1NUwxOS4yMzUsMTkuOTNBMy44LDMuOCwwLDAsMCwyMS45NTksMTYuM1Y3LjE3N2EzLjgwNywzLjgwNywwLDAsMC0zLjgtMy44Wk0xMC41NTIsNC45aDcuNkEyLjI3NywyLjI3NywwLDAsMSwyMC4zLDYuNDE3SDguNDExQTIuMjc3LDIuMjc3LDAsMCwxLDEwLjU1Miw0LjlabTkuODg2LDEwLjY0N0gxOC4xNTd2MS41MjFIMjAuM2EyLjI3NywyLjI3NywwLDAsMS0yLjE0MSwxLjUyMWgtNy42YTIuMjc3LDIuMjc3LDAsMCwxLTIuMTQxLTEuNTIxaDIuMTQxVjE1LjU0Mkg4LjI3MVYxNC4wMjJIMjAuNDM4Wm0wLTMuMDQySDguMjcxVjcuOTM4SDIwLjQzOFoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02Ljc1IC0zLjM3NSkiIGZpbGw9IiMxMDE2NGEiLz4NCjwvc3ZnPg0K"); } .icon-fax { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4wNzEiIGhlaWdodD0iMTIuMDcxIiB2aWV3Qm94PSIwIDAgMTIuMDcxIDEyLjA3MSI+PHBhdGggZD0iTTEuNTA5LDMuMDE4SC43NTRBLjc1NS43NTUsMCwwLDAsMCwzLjc3MnY3LjU0NGEuNzU1Ljc1NSwwLDAsMCwuNzU0Ljc1NGguNzU0YS43NTUuNzU1LDAsMCwwLC43NTQtLjc1NFYzLjc3MkEuNzU1Ljc1NSwwLDAsMCwxLjUwOSwzLjAxOFptOS44MDguNzU0VjEuODIxYS43NTUuNzU1LDAsMCwwLS4yMjEtLjUzNEwxMC4wMjkuMjIxQS43NTQuNzU0LDAsMCwwLDkuNSwwSDMuNzcyYS43NTUuNzU1LDAsMCwwLS43NTQuNzU0VjExLjMxN2EuNzU1Ljc1NSwwLDAsMCwuNzU0Ljc1NGg3LjU0NGEuNzU1Ljc1NSwwLDAsMCwuNzU0LS43NTRWNC41MjdBLjc1NS43NTUsMCwwLDAsMTEuMzE3LDMuNzcyWk02Ljc5LDEwLjE4NWEuMzc3LjM3NywwLDAsMS0uMzc3LjM3N0g1LjY1OGEuMzc3LjM3NywwLDAsMS0uMzc3LS4zNzdWOS40M2EuMzc3LjM3NywwLDAsMSwuMzc3LS4zNzdoLjc1NGEuMzc3LjM3NywwLDAsMSwuMzc3LjM3N1ptMC0zLjAxOGEuMzc3LjM3NywwLDAsMS0uMzc3LjM3N0g1LjY1OGEuMzc3LjM3NywwLDAsMS0uMzc3LS4zNzdWNi40MTNhLjM3Ny4zNzcsMCwwLDEsLjM3Ny0uMzc3aC43NTRhLjM3Ny4zNzcsMCwwLDEsLjM3Ny4zNzdabTMuMDE4LDMuMDE4YS4zNzcuMzc3LDAsMCwxLS4zNzcuMzc3SDguNjc2YS4zNzcuMzc3LDAsMCwxLS4zNzctLjM3N1Y5LjQzYS4zNzcuMzc3LDAsMCwxLC4zNzctLjM3N0g5LjQzYS4zNzcuMzc3LDAsMCwxLC4zNzcuMzc3Wm0wLTMuMDE4YS4zNzcuMzc3LDAsMCwxLS4zNzcuMzc3SDguNjc2QS4zNzcuMzc3LDAsMCwxLDguMyw3LjE2N1Y2LjQxM2EuMzc3LjM3NywwLDAsMSwuMzc3LS4zNzdIOS40M2EuMzc3LjM3NywwLDAsMSwuMzc3LjM3N1ptLjM3Ny0yLjY0MUg0LjE0OVYxLjEzMmg0Ljl2Ljc1NGEuMzc3LjM3NywwLDAsMCwuMzc3LjM3N2guNzU0WiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg=="); } .icon-email { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi4zMzMiIGhlaWdodD0iOC44MDkiIHZpZXdCb3g9IjAgMCAxMi4zMzMgOC44MDkiPjxwYXRoIGQ9Ik0xMy43LDYuNzVIMy4xMzFhLjg4MS44ODEsMCwwLDAtLjg4MS44ODF2Ny4wNDhhLjg4MS44ODEsMCwwLDAsLjg4MS44ODFIMTMuN2EuODgxLjg4MSwwLDAsMCwuODgxLS44ODFWNy42MzFBLjg4MS44ODEsMCwwLDAsMTMuNyw2Ljc1Wm0tLjk2OS44ODFMOC40MTcsMTAuNjE3LDQuMSw3LjYzMVptLTkuNiw3LjA0OFY4LjAzMmw1LjAzNSwzLjQ4NGEuNDQuNDQsMCwwLDAsLjUsMEwxMy43LDguMDMydjYuNjQ3WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIuMjUgLTYuNzUpIiBmaWxsPSIjZmZmIi8+PC9zdmc+"); } .icon-phone { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMS4yNTgiIGhlaWdodD0iMTEuMjU5IiB2aWV3Qm94PSIwIDAgMTEuMjU4IDExLjI1OSI+PHBhdGggZD0iTTExLjEsOS4zNjIsOS41MTUsMTAuOTM3YTEuMTQ5LDEuMTQ5LDAsMCwxLS44NDcuMzIyLDcuMzQxLDcuMzQxLDAsMCwxLTMuNjQtMS4zNzJBMTQuMDQxLDE0LjA0MSwwLDAsMSwuNzc5LDUuMjUzLDYsNiwwLDAsMSwwLDIuNjFhMS4xNTYsMS4xNTYsMCwwLDEsLjMyMi0uODU5TDEuOTEyLjE2NWEuNTI1LjUyNSwwLDAsMSwuODU5LjE0M0w0LjA0OSwyLjczYS43LjcsMCwwLDEtLjE0My44bC0uNTg1LjU4NWEuMjg4LjI4OCwwLDAsMC0uMDYuMTY3QTQuOTg2LDQuOTg2LDAsMCwwLDQuNzY1LDYuNSw0Ljk4OCw0Ljk4OCwwLDAsMCw2Ljg0Nyw3Ljk3M2EuMzMuMzMsMCwwLDAsLjMtLjAzbC42OC0uNjkyYS43NzcuNzc3LDAsMCwxLC44MjMtLjExOWguMDEybDIuMywxLjM2YS41NTQuNTU0LDAsMCwxLC4xMzEuODcxWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSIgZmlsbD0iI2ZhZmFmYSIvPjwvc3ZnPg=="); } .icon-roundfb { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNC4yMDUiIGhlaWdodD0iMzQuMDAxIiB2aWV3Qm94PSIwIDAgMzQuMjA1IDM0LjAwMSI+PHBhdGggZD0iTTIwLjEwNywzYTE3LjEwNiwxNy4xMDYsMCwwLDAtMi42NzIsMzRWMjUuMDUxSDEzLjA5VjIwLjEwNmg0LjM0NVYxNi4zMzhjMC00LjI5LDIuNTU0LTYuNjU2LDYuNDU5LTYuNjU2YTI2LjQ1LDI2LjQ1LDAsMCwxLDMuODMyLjMzM3Y0LjIwN0gyNS41NjNBMi40NzMsMi40NzMsMCwwLDAsMjIuNzc4LDE2LjlWMjAuMWg0LjczOWwtLjc1Nyw0Ljk0NkgyMi43NzhWMzdBMTcuMSwxNy4xLDAsMCwwLDIwLjEwNywzWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTMuMDA0IC0zLjAwMykiIGZpbGw9IiNmZmYiLz48L3N2Zz4="); } .icon-roundig { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNC4yMDUiIGhlaWdodD0iMzQuMjA2IiB2aWV3Qm94PSIwIDAgMzQuMjA1IDM0LjIwNiI+PHBhdGggZD0iTTE3LjEsMzQuMjA2YTE2Ljc3NywxNi43NzcsMCwwLDEtNi42NDctMS4zNTMsMTYuNzM1LDE2LjczNSwwLDAsMS05LjEtOS4xLDE3LjAwNSwxNy4wMDUsMCwwLDEsMC0xMy4yOTUsMTYuNzM1LDE2LjczNSwwLDAsMSw5LjEtOS4xLDE3LjAwNSwxNy4wMDUsMCwwLDEsMTMuMjk1LDAsMTYuNzM1LDE2LjczNSwwLDAsMSw5LjEsOS4xLDE3LjAwNSwxNy4wMDUsMCwwLDEsMCwxMy4yOTUsMTYuNzM1LDE2LjczNSwwLDAsMS05LjEsOS4xQTE2Ljc3NywxNi43NzcsMCwwLDEsMTcuMSwzNC4yMDZabTguNTUxLTIzLjUxNmEyLjA4MywyLjA4MywwLDAsMC0uNjE4LTEuNSwyLjAzOCwyLjAzOCwwLDAsMC0xLjUyLS42MzVIMTAuNjg5YTIuMTY4LDIuMTY4LDAsMCwwLTIuMTM4LDIuMTM4djIuMTM4SDEyLjM2YTYuMzMxLDYuMzMxLDAsMCwxLDkuNDg2LDBoMy44MDhaTTEyLjgyNywxNy4xQTQuMjc2LDQuMjc2LDAsMCwwLDE3LjEsMjEuMzc4LDQuMjc2LDQuMjc2LDAsMCwwLDIxLjM3OCwxNy4xLDQuMjc2LDQuMjc2LDAsMCwwLDE3LjEsMTIuODI3LDQuMjc2LDQuMjc2LDAsMCwwLDEyLjgyNywxNy4xWm0xMi44MjctMi4xMzhIMjMuMTE1QTYuMzY1LDYuMzY1LDAsMCwxLDE3LjEsMjMuNTE2YTYuMzMzLDYuMzMzLDAsMCwxLTYuMDEzLTguNTUxSDguNTUxdjguNTUxYTIuMTA5LDIuMTA5LDAsMCwwLDIuMTM4LDIuMTM4SDIzLjUxNmEyLjEwOSwyLjEwOSwwLDAsMCwyLjEzOC0yLjEzOFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4="); } .icon-roundtw { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='35' fill='none' viewBox='0 0 35 35'%3E%3Cpath fill='%23fff' d='M17.1 34.201a16.8 16.8 0 0 1-6.647-1.353 16.74 16.74 0 0 1-9.1-9.1 17 17 0 0 1 0-13.295 16.74 16.74 0 0 1 9.1-9.1 17 17 0 0 1 13.295 0 16.74 16.74 0 0 1 9.1 9.1 17 17 0 0 1 0 13.295 16.74 16.74 0 0 1-9.1 9.1c-2.1.9-4.363 1.36-6.648 1.353'/%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%234f80ff' d='M21.027 23.471h1.444L13.148 11.44h-1.55l9.428 12.034zm.914-13.476h2.608l-5.695 6.354 6.7 8.646h-5.246l-4.11-5.244-4.7 5.244h-2.61l6.093-6.796-6.428-8.204h5.38l3.714 4.793z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M8.553 9.995h17v15h-17z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); } @-webkit-keyframes zoom-in-zoom-out { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50% { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes zoom-in-zoom-out { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50% { -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } .clearfix { *zoom: 1; } .clearfix:after, .clearfix:before { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .container { max-width: 100%; margin-right: auto; margin-left: auto; padding-right: 10px; padding-left: 10px; *zoom: 1; position: relative; } @media (min-width: 990px) { .container { max-width: 882px; } } @media (min-width: 1026px) { .container { max-width: 1100px; } } .col-20, .col-30, .col-50, .col-70, .col-100 { float: left; position: relative; padding-right: 10px; padding-left: 10px; margin: 0; } .col-20 { width: 25%; } .col-30 { width: 50%; max-width: 223px; margin: 0 auto; float: none; } @media (min-width: 768px) { .col-30 { width: 33.33333%; max-width: none; float: left; } } .col-50 { width: 100%; padding: 0; } @media (min-width: 768px) { .col-50 { width: 50%; padding-right: 10px; padding-left: 10px; } } .col-70 { width: 100%; } @media (min-width: 768px) { .col-70 { width: 66.33333%; } } .col-100 { width: 100%; } .col-offset-fluid { margin-right: -10px; margin-left: -10px; } .col-offset-fluid-sm { margin-right: 0; margin-left: 0; } @media (min-width: 768px) { .col-offset-fluid-sm { margin-right: -10px; margin-left: -10px; } } .col-offset-25 { margin: 0 25%; } @media (min-width: 768px) { .col-offset-25 { margin: 0; } } .col-offset-0 { padding-right: 0px; padding-left: 0px; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .cl-black { color: #000 !important; } .mt10 { margin-top: 10px; } .mt20 { margin-top: 20px; } .mb20 { margin-bottom: 20px; } .mr5 { margin-right: 5px; } .mr10 { margin-right: 10px; } .ml5 { margin-left: 5px; } .absolute-center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .trans-center { left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } .display-flex { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .jcontent-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .jcontent-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .jcontent-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .aitems-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .aitems-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .flex-dir { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .flex-center { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .flex-init { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { margin: 0; padding: 0; scroll-behavior: smooth; scroll-padding-top: 67px; } body { font-family: "Pangolin", cursive; font-size: 17px; font-weight: 400; background: -webkit-gradient(linear, left top, left bottom, from(#EAEBEB), color-stop(21.63%, #E2E3E3), color-stop(41.83%, #EEEFEF), color-stop(60.1%, #D2D4D4), color-stop(71.63%, #E9EAEA), to(#D7D9DA)); background: linear-gradient(180deg, #EAEBEB 0%, #E2E3E3 21.63%, #EEEFEF 41.83%, #D2D4D4 60.1%, #E9EAEA 71.63%, #D7D9DA 100%); color: #202020; line-height: 1.3; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; position: relative; z-index: 3; } body { overflow-x: hidden; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } section { z-index: 2; } a { color: inherit; text-decoration: none; vertical-align: top; outline: 0; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } a:hover { color: inherit; text-decoration: none; } a:focus, button:focus { outline: 0; outline: -webkit-focus-ring-color auto 0; outline-offset: 0; } img { max-width: 100%; width: auto; height: auto; vertical-align: top; border: 0; -ms-interpolation-mode: bicubic; } table { border-collapse: collapse; } iframe { border: none; vertical-align: top; } video { vertical-align: top; } ul, ol { margin: 0; padding: 0; list-style: none; } input, button, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } input:focus::-webkit-input-placeholder, input:focus:-moz-placeholder, input:focus::-moz-placeholder, input:focus:-ms-input-placeholder { color: transparent; } h1, h2, h3 { margin: 0; } .flex { display: -webkit-box; display: -ms-flexbox; display: flex; } .flex-1 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .relative { position: relative; } .hide { display: none !important; } * { scrollbar-width: thin; scrollbar-color: #000 #D9D9D9; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #D9D9D9; } ::-webkit-scrollbar-thumb { background-color: #000; border-radius: 0; } .flip-horizontal { -webkit-transform: scaleX(-1); transform: scaleX(-1); } .text-center { text-align: center; } .mobile { display: none; } @media (max-width: 768px) { .mobile { display: block; } } .desktop { display: none; } @media (min-width: 768px) { .desktop { display: block; } } @-webkit-keyframes headerItemIn { 0% { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes headerItemIn { 0% { opacity: 0; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slide-down { 0% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { opacity: 0.9; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slide-down { 0% { opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { opacity: 0.9; -webkit-transform: translateY(0); transform: translateY(0); } } .header { position: fixed; width: 100%; height: 67px; top: 0px; left: 0; z-index: 11; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .header.headerfixed { position: fixed; -webkit-animation: slide-down 0.7s; animation: slide-down 0.7s; } .header--stage { top: 0; } @media (min-width: 1026px) { .header--stage .headerLogo__link { top: 2px; } } .header--stage .headerLogo { max-width: 170px; } @media (max-width: 767px) { .header--stage .headerLogo { max-width: 134px; } } .header.fixed { position: fixed; top: 0; opacity: 1; } .header.active { top: 0; } .headerBox { width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (min-width: 1026px) { .headerBox { width: auto; gap: 24px; } } @media (max-width: 990px) { .headerBox { gap: 12px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .headerBox--right { width: auto; } @media (max-width: 768px) { .headerBox--right { gap: 8px; } } @media (max-width: 380px) { .headerBox--right { gap: 12px; } } @media (max-width: 380px) { .headerLogo__kompasianival { max-width: 134px; } } @media (min-width: 768px) { .headerLogo__kompasiana { max-width: 135px !important; } } @media (max-width: 768px) { .headerLogo__kompasiana { max-width: 60px; } } @media (max-width: 380px) { .headerLogo__kompasiana { max-width: 60px; } } @media (min-width: 768px) { .headerLogo { max-width: 170px; } } @media (min-width: 1440px) { .headerLogo { max-width: 170px; } } .headerLogo__link { position: relative; -ms-flex-item-align: center; align-self: center; padding: 8px 0; } @media (min-width: 768px) and (max-width: 1026px) { .headerLogo__link { padding: 10px 0; } } .headerLogo__link2 { top: 2px; left: 12px; } @media (min-width: 768px) { .headerLogo__link2 { left: 0; -webkit-transform: scale(0.7); transform: scale(0.7); } } .headerLogo__link2:before { content: attr(aria-label); display: block; font-size: 5px; color: #fff; line-height: 3; } @media (max-width: 360px) { .headerLogo__link2:before { margin-left: 12px; } } @media (max-width: 768px) { .headerLogo__link2 { left: -15px; } } @media (max-width: 360px) { .headerLogo__link2 { margin-left: 12px; } } @media (max-width: 768px) { .headerLogo--lestari { max-width: 80px; margin-right: 8px; } } @media (max-width: 376px) { .headerLogo--lestari { max-width: 70px; } } .headerLogo--lestariWrap { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .headerLogo--lestari--muter { min-width: 28px; height: 28px; display: block; -o-object-fit: contain; object-fit: contain; margin-right: 8px; } @media (max-width: 768px) { .headerLogo--lestari--muter { min-width: 26px; height: 26px; margin-right: 5px; } } .headerWrap { padding-left: 20px; padding-right: 10px; height: 67px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-color: #000; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } @media (min-width: 1026px) { .headerWrap { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-left: 60px; padding-right: 60px; } } @media (max-width: 768px) { .headerWrap { padding-left: 12px; padding-right: 12px; } } @media (min-width: 768px) and (max-width: 1026px) { .headerWrap { height: 64px; } } @media (max-width: 376px) { .headerWrap { padding-left: 12px; padding-right: 12px; } } .headerMenu { display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 67px; z-index: 4; } @media (min-width: 1026px) { .headerMenu { height: 67px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .headerItem { text-align: center; margin: auto 7px; } @media (min-width: 1026px) { .headerItem--mob { display: none; } } .headerItem.headerItem--class .headerLink { color: #f4ffab; -webkit-animation: zoom-in-zoom-out 1s ease infinite; animation: zoom-in-zoom-out 1s ease infinite; } @media (max-width: 768px) { .headerItem.headerItem--class .headerLink { display: inline-block; } } @media (max-width: 768px) { .headerItem.headerItem--class .headerLink.active { display: block; } } .headerItem.headerItem--class .headerLink.active .notif { right: 10px; } @media (max-width: 768px) { .headerItem.headerItem--class .headerLink.active .notif { top: 16px; right: 20px; } } .headerLink { position: relative; display: block; margin-top: 8px; padding-top: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 11px; text-transform: uppercase; font-size: 15px; font-weight: 700; color: #fff; } @media only screen and (min-device-width: 1026px) and (max-device-width: 1030px) { .headerLink { font-size: 10px; } } .headerLink:hover { color: #FDC022; } .headerLink.active { position: relative; color: #FDC022; } .headerLink.active:hover { color: #fff; } .headerLink .notif { font: 500 6px Roboto, sans-serif; padding: 0px 3px; background: #e04c4c; color: #fff; border-radius: 2px; display: inline-block; position: absolute; top: 2px; right: 1px; height: 8px; } .headerMob { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } @media (max-width: 1025px) { .headerMob { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: start; align-content: flex-start; width: 100%; height: 100vh; position: absolute; left: 0; top: 0; z-index: 5; padding-top: 20px; background: #000; opacity: 0; visibility: hidden; -webkit-transform: translateY(-16px); transform: translateY(-16px); pointer-events: none; -webkit-transition: opacity 0.28s ease, visibility 0.28s ease, -webkit-transform 0.28s ease; transition: opacity 0.28s ease, visibility 0.28s ease, -webkit-transform 0.28s ease; transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease; transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s ease, -webkit-transform 0.28s ease; } } @media (max-width: 1025px) and (min-width: 768px) and (max-width: 1026px) { .headerMob { top: 64px; } } @media (max-width: 1025px) and (max-width: 768px) { .headerMob { padding-top: 60px; } } @media (max-width: 1025px) { .headerMob .headerItem { -ms-flex-preferred-size: 100%; flex-basis: 100%; text-align: left; } } .headerMob.active { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: start; align-content: flex-start; width: 100%; height: 100vh; position: absolute; left: 0; top: 0; padding-top: 20px; background: #000; } @media (max-width: 1025px) { .headerMob.active { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); pointer-events: auto; } .headerMob.active .headerItem { -webkit-animation: headerItemIn 0.35s ease both; animation: headerItemIn 0.35s ease both; } .headerMob.active .headerItem:nth-child(1) { -webkit-animation-delay: 0.06s; animation-delay: 0.06s; } .headerMob.active .headerItem:nth-child(2) { -webkit-animation-delay: 0.12s; animation-delay: 0.12s; } .headerMob.active .headerItem:nth-child(3) { -webkit-animation-delay: 0.18s; animation-delay: 0.18s; } .headerMob.active .headerItem:nth-child(4) { -webkit-animation-delay: 0.24s; animation-delay: 0.24s; } .headerMob.active .headerItem:nth-child(5) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .headerMob.active .headerItem:nth-child(6) { -webkit-animation-delay: 0.36s; animation-delay: 0.36s; } .headerMob.active .headerItem:nth-child(7) { -webkit-animation-delay: 0.42s; animation-delay: 0.42s; } .headerMob.active .headerItem:nth-child(8) { -webkit-animation-delay: 0.48s; animation-delay: 0.48s; } } @media (min-width: 768px) and (max-width: 1026px) { .headerMob.active { top: 64px; } } @media (min-width: 1026px) { .headerMob.active { all: unset; } } @media (max-width: 768px) { .headerMob.active { padding-top: 60px; } } .headerMob.active .headerItem { -ms-flex-preferred-size: 100%; flex-basis: 100%; text-align: left; } .headerBox--right { position: relative; z-index: 6; } .header .-jsBack { display: none; } .header.menu-open .-jsMenu { display: none; } .header.menu-open .-jsBack { display: block; } .header .buttonHeader { background-color: transparent; color: #fff; border: 1px solid #fff; border-radius: 1px; height: 30px; width: 80px; border-radius: 2px; top: 0; position: relative; text-transform: uppercase; font-size: 14px; z-index: 6; -webkit-transition: .3s all ease-in-out; transition: .3s all ease-in-out; } @media (max-width: 768px) { .header .buttonHeader { padding: 6px 10px; margin-right: 0; } } @media (max-width: 360px) { .header .buttonHeader { height: 28px; width: 75px; } } .header .buttonHeader.hidden { background: none; border: none; color: transparent; position: relative; padding: 10px; width: 40px; -webkit-box-sizing: border-box; box-sizing: border-box; height: 40px; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-right: -10px; } .header .buttonHeader.hidden::before, .header .buttonHeader.hidden::after { content: ""; position: absolute; top: 0; width: 28px; height: 3px; background: #fff; border-radius: 20px; left: 0; right: 0; bottom: 0; margin: auto; } .header .buttonHeader.hidden::after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .coverObject { position: absolute; top: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; } .coverObject picture:first-child img { -webkit-transform: scaleX(-1); transform: scaleX(-1); } @media (max-width: 768px) { .coverObject { top: 65px; } } @media (max-width: 768px) { .coverObject img { width: 22vw; margin-top: -2px; } } @media (min-width: 769px) and (max-width: 1365px) { .coverObject img { width: 18vw; } } @media (min-width: 1366px) and (max-width: 1919px) { .coverObject img { width: 16vw; } } @media (min-width: 1920px) and (max-width: 2559px) { .coverObject img { width: 14vw; } } @media (min-width: 2560px) { .coverObject img { width: 15vw; } } .coverImage { max-width: 941px; } .coverHome { position: relative; z-index: 3; height: auto; overflow: hidden; } @media (max-width: 768px) { .coverHome { padding: 68px 0 40px; min-height: 60vh; } } @media (min-width: 769px) and (max-width: 1365px) { .coverHome { padding: 96px 0 48px; min-height: auto; } } @media (min-width: 1366px) and (max-width: 1919px) { .coverHome { padding: 67px 0 56px; min-height: auto; } } @media (min-width: 1920px) and (max-width: 2559px) { .coverHome { padding: 67px 0 60px; min-height: 95vh; } } @media (min-width: 2560px) { .coverHome { padding: 115px 0 72px; min-height: 90vh; } } .coverHome .venueLogo { -webkit-transform: none !important; transform: none !important; } @media (max-width: 768px) { .coverHome .venueLogo { margin-top: 27px; } } @media (min-width: 769px) and (max-width: 1365px) { .coverHome .venueLogo { margin-top: 60px; } } @media (min-width: 1366px) and (max-width: 1919px) { .coverHome .venueLogo { margin-top: 80px; } } @media (min-width: 1920px) and (max-width: 2559px) { .coverHome .venueLogo { margin-top: 90px; } } @media (min-width: 2560px) { .coverHome .venueLogo { margin-top: 90px; } } .coverHome .venueLogo img { width: 100%; } @media (max-width: 768px) { .coverHome .venueLogo img { max-width: 300px; } } @media (min-width: 769px) and (max-width: 1365px) { .coverHome .venueLogo img { max-width: 620px; } } @media (min-width: 1366px) and (max-width: 1919px) { .coverHome .venueLogo img { max-width: 720px; } } @media (min-width: 1920px) and (max-width: 2559px) { .coverHome .venueLogo img { max-width: 861px; } } @media (min-width: 2560px) { .coverHome .venueLogo img { max-width: 861px; } } .coverHome .coverField { left: 0; right: 0; bottom: 0; margin: auto; z-index: 1; } @media (max-height: 1080px) { .coverHome .coverField { margin: auto; margin-left: 0px; } } @media (max-width: 768px) { .coverHome .coverField { bottom: 50px; margin-left: 0px; width: 90%; margin-top: 12px; } } @media (max-width: 768px) { .coverHome .coverField { max-width: 100%; } } @media (min-width: 769px) and (max-width: 1365px) { .coverHome .coverField { max-width: 640px; } } @media (min-width: 1366px) and (max-width: 1919px) { .coverHome .coverField { max-width: 760px; } } @media (min-width: 1920px) and (max-width: 2559px) { .coverHome .coverField { max-width: 900px; } } @media (min-width: 2560px) { .coverHome .coverField { max-width: 941px; } } .coverHome .venueCaption { position: relative; z-index: 3; margin: 32px auto 32px; } @media (max-width: 768px) { .coverHome .venueCaption { margin: 10px auto 24px; max-width: 65vw; } } .coverHome .venueCaption > div { gap: 15px; } @media (max-width: 768px) { .coverHome .venueCaption > div { gap: 0; } } @media (min-width: 769px) and (max-width: 1365px) { .coverHome .venueCaption > div { gap: 12px; } } @media (min-width: 1366px) and (max-width: 1919px) { .coverHome .venueCaption > div { gap: 14px; } } @media (min-width: 1920px) and (max-width: 2559px) { .coverHome .venueCaption > div { gap: 15px; } } @media (min-width: 2560px) { .coverHome .venueCaption > div { gap: 18px; } } .coverHome .venueCaptionItem { padding: 8px 4px; border-radius: 6px; } @media (max-width: 768px) { .coverHome .venueCaptionItem { padding: 4px 3px; } } @media (min-width: 769px) and (max-width: 1365px) { .coverHome .venueCaptionItem { padding: 6px 4px; } } @media (min-width: 1366px) and (max-width: 1919px) { .coverHome .venueCaptionItem { padding: 8px 4px; } } @media (min-width: 1920px) and (max-width: 2559px) { .coverHome .venueCaptionItem { padding: 8px 4px; } } @media (min-width: 2560px) { .coverHome .venueCaptionItem { padding: 10px 6px; } } .coverHome .venueCaption .btnPrimary { max-width: 157px; width: 100%; margin: 32px auto 0; } @media (max-width: 768px) { .coverHome .venueCaption .btnPrimary { max-width: 118px; max-height: 30px; font-size: 14px; line-height: 1; padding: 8px 12px; } } @media (min-width: 769px) and (max-width: 1365px) { .coverHome .venueCaption .coverImage { margin: 30px 0; } } @media (min-width: 1366px) and (max-width: 1919px) { .coverHome .venueCaption .coverImage { margin: 30px 0; } } @media (min-width: 1920px) and (max-width: 2559px) { .coverHome .venueCaption .coverImage { margin: 40px 0; } } @media (min-width: 2560px) { .coverHome .venueCaption .coverImage { margin: 40px 0; } } .coverHome .venueLead { margin-top: 23.5px; height: 119px; background-color: #ff7473; color: #fff; border: 1px solid #000; border-radius: 10px; padding: 25px 30px 24px; text-align: center; vertical-align: middle; font-size: 15px; position: relative; } @media (max-width: 992px) { .coverHome .venueLead { padding: 20px 30px 22px; } } @media (max-width: 376px) { .coverHome .venueLead { padding: 16px 20px 16px; } } .coverHome .venueLead:before { content: ""; position: absolute; z-index: -1; background-color: #c5d872; border-radius: 10px; top: 8px; left: 8px; width: 100%; height: 100%; } .coverHome .boxOpening .headingTitle { left: -40px; } .venueCaptionItem { font-family: Pangolin, cursive; font-weight: 400; line-height: 1.12; color: #000000; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-flex-item-align: end; align-self: flex-end; } @media (max-width: 768px) { .venueCaptionItem { font-size: 13px; } } @media (min-width: 768px) { .venueCaptionItem { font-size: 26px; } } .venueDates { font-weight: 400; text-align: left; text-transform: uppercase; } @media (max-width: 768px) { .venueDates { font-size: 12px; } } @media (min-width: 768px) { .venueDates { font-size: 22px; } } .venueDates > .display-flex > span:first-child { line-height: 0.1; font-weight: 400; } @media (max-width: 768px) { .venueDates > .display-flex > span:first-child { font-size: 29px; } } @media (min-width: 768px) { .venueDates > .display-flex > span:first-child { font-size: 64px; } } @media (max-width: 768px) { .venueDates .venueDates__monwrap { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; line-height: 1.1; margin-left: 6px; } } @media (max-width: 768px) { .venueDates .venueDates__mon { font-size: 12px; } } @media (min-width: 768px) { .venueDates .venueDates__mon { font-size: 24px; } } @media (max-width: 768px) { .venueDates .venueDates__year { font-size: 12px; } } @media (max-width: 768px) { .venueDates .venueDates__break { display: none; } } .coverLeftK, .coverRightK { position: absolute; left: 0; right: 0; margin: auto; z-index: 1; } @media (max-width: 768px) { .coverLeftK, .coverRightK { width: 120px; bottom: -40px; } } .coverLeftK { bottom: -85px; width: 300px; -webkit-animation: leftRight 3s infinite alternate; animation: leftRight 3s infinite alternate; } @media (min-width: 768px) { .coverLeftK { right: 68%; } } @media (min-width: 1800px) { .coverLeftK { right: 55%; } } @media (max-width: 768px) { .coverLeftK { right: 200px; width: 100px; bottom: -42px; -webkit-animation: none; animation: none; } } .coverRightK { left: 58%; bottom: -55px; width: 300px; -webkit-animation: leftRight 3.5s infinite alternate; animation: leftRight 3.5s infinite alternate; } @media (max-width: 768px) { .coverRightK { left: 200px; width: 98px; bottom: -30px; -webkit-animation: none; animation: none; } } .layerimg { position: relative; } @media (min-width: 768px) { .layerimg { padding-bottom: 50px; } } .layerimg .coverLayer1, .layerimg .coverLayer2 { position: absolute; left: 0; right: 0; width: 100%; max-width: unset; } @media (max-width: 2560px) { .layerimg .coverLayer1 { top: -155px; } } @media (max-width: 1920px) { .layerimg .coverLayer1 { top: -35px; } } @media (max-width: 1920px) and (max-height: 1080px) { .layerimg .coverLayer1 { top: -45px; } } @media (max-width: 768px) { .layerimg .coverLayer1 { top: 0; } } @media (max-width: 2560px) { .layerimg .coverLayer2 { top: -255px; } } @media (max-width: 1920px) { .layerimg .coverLayer2 { top: -140px; } } @media (max-width: 1920px) and (max-height: 1080px) { .layerimg .coverLayer2 { top: -150px; } } @media (max-width: 768px) { .layerimg .coverLayer2 { top: -45px; } } .layerimgArrow { position: absolute; z-index: 99; left: 7px; right: 0; top: -55px; margin: auto; } @media (max-width: 768px) { .layerimgArrow { top: 0; } } .mainContent { position: relative; } .sectionProgram { background-size: contain; padding-bottom: 50px; } @media (max-width: 768px) { .sectionProgram { height: 100%; padding-bottom: 30px; } } .sectionProgramBg__img { position: absolute; } .sectionProgramBg__img.--top { top: 0; z-index: -1; } .sectionProgramBg img { width: 100%; } .sectionProgram__img-1 { position: absolute; bottom: -35px; left: 0; z-index: 3; } @media (max-width: 992px) { .sectionProgram__img-1 { display: none; } } .sectionProgram__img-2 { position: absolute; bottom: -35px; right: 0; z-index: 3; } @media (max-width: 992px) { .sectionProgram__img-2 { display: none; } } .sectionZone { padding-bottom: 86px; background: -webkit-gradient(linear, left top, left bottom, from(#4f80ff), color-stop(40.38%, #4f80ff), to(#342862)); background: linear-gradient(180deg, #4f80ff 0%, #4f80ff 40.38%, #342862 100%); } .sectionExplore { padding-bottom: 86px; background: #f52789; } .sectionExploreWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (max-width: 768px) { .sectionExploreWrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .sectionExploreCol { position: relative; } .sectionExploreCol.--img { width: 100%; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-right: 22px; } @media (max-width: 768px) { .sectionExploreCol.--img { padding-right: 0; } } .sectionExploreBox { max-width: 440px; margin-top: 30px; padding: 12px 12px 12px 32px; background: #edf9ee; color: #405aaf; clip-path: polygon(95% 0, 99% 87%, 87% 100%, 2% 100%, 0% 48%, 2% 0%); font-size: 16px; } @media (max-width: 768px) { .sectionExploreBox { max-width: 100%; margin-top: 14px; font-size: 14px; padding: 12px 22px 12px 16px; } } .sectionExploreBox.--step { max-height: 348px; overflow-y: scroll; -ms-scroll-chaining: none; overscroll-behavior: contain; } .sectionExploreList { counter-reset: step; } .sectionExploreList li { position: relative; counter-increment: step; padding-left: 30px; margin-bottom: 8px; } .sectionExploreList li::before { content: counter(step); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; font-weight: 700; font-size: 16px; color: #faeb2c; background: #2f59f4; } .sectionExploreCaption { background: #faeb2c; font-size: 18px; } @media (max-width: 768px) { .sectionExploreCaption { font-size: 14px; margin-top: 34px; } } .sectionExploreTitle { text-transform: uppercase; font-weight: 700; } .sectionExploreImg { position: relative; margin-top: 30px; width: 100%; height: 495px; overflow: hidden; } @media (max-width: 768px) { .sectionExploreImg { height: 245px; } } .sectionExploreImg img { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; -webkit-transition: -webkit-transform 0.6s ease; transition: -webkit-transform 0.6s ease; transition: transform 0.6s ease; transition: transform 0.6s ease, -webkit-transform 0.6s ease; -webkit-transform: translateY(0); transform: translateY(0); will-change: transform; } .sectionExploreImg.active img { -webkit-transform: translateY(-45px); transform: translateY(-45px); } .sectionExploreBtn { position: absolute; bottom: -35px; width: 70px; height: 70px; left: calc(50% - 70px / 2); background: #2f59f4 url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgb3BhY2l0eT0iMC43NSI+CjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjIwIiBmaWxsPSIjMkY1OUY0Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNDY1OSAyNC41MjRDMTAuNzYzNCAyNC44MDU3IDExLjE2NjggMjQuOTY0IDExLjU4NzQgMjQuOTY0QzEyLjAwOCAyNC45NjQgMTIuNDExNCAyNC44MDU3IDEyLjcwODkgMjQuNTI0TDE5Ljk4MjUgMTcuNjI4MUwyNy4yNTI1IDI0LjUyMTFDMjcuMzk3NiAyNC42Njg5IDI3LjU3MjcgMjQuNzg3NCAyNy43NjczIDI0Ljg2OTZDMjcuOTYxOSAyNC45NTE5IDI4LjE3MiAyNC45OTYxIDI4LjM4NSAyNC45OTk4QzI4LjU5OCAyNS4wMDM0IDI4LjgwOTYgMjQuOTY2MyAyOS4wMDcyIDI0Ljg5MDhDMjkuMjA0OCAyNC44MTUyIDI5LjM4NDIgMjQuNzAyNyAyOS41MzUgMjQuNTZDMjkuNjg1NyAyNC40MTczIDI5LjgwNDUgMjQuMjQ3MyAyOS44ODQzIDI0LjA2MDFDMjkuOTY0MiAyMy44NzI5IDMwLjAwMzUgMjMuNjcyNCAyOS45OTk4IDIzLjQ3MDVDMjkuOTk2MSAyMy4yNjg3IDI5Ljk0OTUgMjMuMDY5NiAyOS44NjI5IDIyLjg4NTFDMjkuNzc2MiAyMi43MDA3IDI5LjY1MTMgMjIuNTM0NiAyOS40OTU0IDIyLjM5NjlMMjEuMTAxNCAxNC40NDE1QzIwLjk1NCAxNC4zMDE1IDIwLjc3OSAxNC4xOTA1IDIwLjU4NjMgMTQuMTE0N0MyMC4zOTM2IDE0LjAzOSAyMC4xODcgMTQgMTkuOTc4NCAxNEMxOS43Njk4IDE0IDE5LjU2MzIgMTQuMDM5IDE5LjM3MDUgMTQuMTE0N0MxOS4xNzc4IDE0LjE5MDUgMTkuMDAyNyAxNC4zMDE1IDE4Ljg1NTQgMTQuNDQxNUwxMC40NjU5IDIyLjM5NjlDMTAuMzE4MiAyMi41MzY2IDEwLjIwMSAyMi43MDI1IDEwLjEyMTEgMjIuODg1MUMxMC4wNDExIDIzLjA2NzcgMTAgMjMuMjYzNSAxMCAyMy40NjEyQzEwIDIzLjY1ODkgMTAuMDQxMSAyMy44NTQ2IDEwLjEyMTEgMjQuMDM3M0MxMC4yMDEgMjQuMjE5OSAxMC4zMTgyIDI0LjM4NTggMTAuNDY1OSAyNC41MjU0VjI0LjUyNFoiIGZpbGw9IndoaXRlIi8+CjwvZz4KPC9zdmc+Cg==") center no-repeat; border-radius: 50%; border: 0; padding: 0; cursor: pointer; z-index: 1; } @media (max-width: 768px) { .sectionExploreBtn { width: 40px; height: 40px; bottom: -20px; } } .boxOpening { position: relative; } .boxOpening__img { position: relative; } .boxOpening__img-1 { z-index: 2; left: -44px; top: 10px; } @media (max-width: 768px) { .boxOpening__img-1 { left: 40px; top: 140px; margin-right: 0; bottom: unset; position: absolute; } } .boxOpening__img-2 { position: absolute; right: -138px; bottom: 12px; } @media (max-width: 768px) { .boxOpening__img-2 { right: 0; left: unset; top: -34px; bottom: unset; z-index: -1; } } @media (min-width: 768px) and (max-width: 990px) { .boxOpening__img-2 { display: none; } } .boxOpening__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-top: 100px; margin-bottom: 30px; } @media (max-width: 768px) { .boxOpening__wrapper { padding-top: 50px; } } .boxOpening__lead { padding: 12px 50px 6px 40px; position: relative; background: #edf9ee; clip-path: polygon(100% 0px, 103.36% 93.47%, 90% 100%, 2% 100%, 0px 40%, 2% 0px); width: calc(100%); max-width: 664px; font-family: Pangolin, cursive; font-size: 16px; font-weight: 400; line-height: 24px; text-align: left; color: #405aaf; } @media (max-width: 768px) { .boxOpening__lead { width: 95%; padding: 12px 20px 6px 20px; font-size: 12px; line-height: 15px; margin: auto; } } @media (max-width: 768px) { .boxOpening__lead p:first-child { padding-left: 130px; } } .--moving { -webkit-animation: float 5s ease-in-out infinite; animation: float 5s ease-in-out infinite; } @-webkit-keyframes upDown { 100% { -webkit-transform: translateY(50px); transform: translateY(50px); } } @keyframes upDown { 100% { -webkit-transform: translateY(50px); transform: translateY(50px); } } @-webkit-keyframes leftRight { 100% { -webkit-transform: translateX(30px); transform: translateX(30px); } } @keyframes leftRight { 100% { -webkit-transform: translateX(30px); transform: translateX(30px); } } @-webkit-keyframes float { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 25% { -webkit-transform: translate(5px, -10px); transform: translate(5px, -10px); } 50% { -webkit-transform: translate(0, -15px); transform: translate(0, -15px); } 75% { -webkit-transform: translate(-5px, -10px); transform: translate(-5px, -10px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } @keyframes float { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 25% { -webkit-transform: translate(5px, -10px); transform: translate(5px, -10px); } 50% { -webkit-transform: translate(0, -15px); transform: translate(0, -15px); } 75% { -webkit-transform: translate(-5px, -10px); transform: translate(-5px, -10px); } 100% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } } .footer { position: relative; padding-left: 30px; padding-right: 30px; padding-top: 40px; padding-bottom: 142px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: #000; color: #fff; font-size: 16px; z-index: 2; } @media (max-width: 768px) { .footer { font-size: 12px; } } .footer h3 { font-weight: 400; text-transform: uppercase; } @media (min-width: 1026px) { .footer { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 30px; } } .footerColumn { padding: 10px 20px; } @media (max-width: 768px) { .footerColumn:nth-child(1) { width: 100%; } } .footerColumn:nth-child(1) img { max-width: 127px; } @media (max-width: 768px) { .footerColumn { width: 100%; float: left; } } .footer--mid { position: absolute; bottom: 40px; left: 0; } @media (min-width: 1026px) { .footer--mid { bottom: -80px; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } } @media (min-width: 768px) and (max-width: 1026px) { .footer--mid { bottom: 0; } } @media (min-width: 1026px) and (max-width: 1440px) { .footer--mid { bottom: -205px; } } @media (min-width: 1440px) { .footer--mid { bottom: -26px; } } @media (min-width: 1920px) { .footer--mid { bottom: 0; } } .footerImg { width: 100%; max-width: 128px; height: auto; } .footerTitle { margin-bottom: 6px; font-size: 8px; font-weight: 400; color: #fff; } .footerLink { margin-left: 10px; margin-right: 10px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 768px) { .footerLink { position: absolute; top: 44px; right: 20px; } } .footer .icon { width: 20px; height: 20px; vertical-align: middle; background-repeat: no-repeat; } @media (max-width: 768px) { .footer .icon { width: 12px; height: 12px; } } .footerSocial .icon { margin: 4px 0; width: 40px; height: 40px; } .footerSocial a { display: inline-block; } @media (max-width: 768px) { .footerSocial { float: left; margin-bottom: 20px; } } .footer ul li { line-height: 1.5; } @media (max-width: 768px) { .footer { overflow: hidden; display: table; padding: 15px 0 100px; } } .footerMark { position: absolute; bottom: 0; z-index: 1; -webkit-transform: scale(0.9); transform: scale(0.9); } .footerMark--left { left: -60px; bottom: -165px; } @media (max-width: 768px) { .footerMark--left { display: none; } } .footerMark--right { right: -50px; bottom: -105px; } @media (max-width: 768px) { .footerMark--right { display: none; } } .footerMark--mobile { -webkit-transform: scale(1); transform: scale(1); width: 100%; } @media (min-width: 768px) { .footerMark--mobile { display: none; } } .footer--logoonly { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; margin: 20px; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media (max-width: 768px) { .footer--logoonly { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .footer--logoonly img { width: unset; } .footer--logoonly .--logokompasiana { width: 155px; } .footer--logoonly .--logokgmedia { width: 112px; } @media (max-width: 768px) { .footer--logoonly .footerLink { position: relative; top: 0; right: 0; } } .footerBg { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; width: 100%; bottom: 0; overflow: hidden; } .footerBg picture { display: block; width: 100%; } .footerBg picture img { max-width: unset; width: 100%; } @media (max-width: 768px) { .footerBg picture img { width: 100%; } } .footerBg.--top { display: block; position: absolute; left: 0; right: 0; bottom: 100%; top: unset; width: 100%; height: 0; overflow: visible; pointer-events: none; z-index: 3; } @media (max-width: 990px) { .footerBg.--top { display: none; } } .footerBg.--top .footerBg__deco { position: absolute; bottom: 0; width: 100%; height: auto; } .footerBg.--top .footerBg__deco--left { left: 0; } @media (min-width: 769px) and (max-width: 1365px) { .footerBg.--top .footerBg__deco--left { max-width: 200px; } } @media (min-width: 1366px) and (max-width: 1919px) { .footerBg.--top .footerBg__deco--left { max-width: 270px; } } @media (min-width: 1920px) and (max-width: 2559px) { .footerBg.--top .footerBg__deco--left { max-width: 380px; } } @media (min-width: 2560px) { .footerBg.--top .footerBg__deco--left { max-width: 460px; } } .footerBg.--top .footerBg__deco--center { left: 15%; } @media (min-width: 769px) and (max-width: 1365px) { .footerBg.--top .footerBg__deco--center { max-width: 245px; } } @media (min-width: 1366px) and (max-width: 1919px) { .footerBg.--top .footerBg__deco--center { max-width: 330px; } } @media (min-width: 1920px) and (max-width: 2559px) { .footerBg.--top .footerBg__deco--center { max-width: 467px; } } @media (min-width: 2560px) { .footerBg.--top .footerBg__deco--center { max-width: 560px; } } .footerBg.--top .footerBg__deco--right { right: 0; } @media (min-width: 769px) and (max-width: 1365px) { .footerBg.--top .footerBg__deco--right { max-width: 225px; } } @media (min-width: 1366px) and (max-width: 1919px) { .footerBg.--top .footerBg__deco--right { max-width: 300px; } } @media (min-width: 1920px) and (max-width: 2559px) { .footerBg.--top .footerBg__deco--right { max-width: 425px; } } @media (min-width: 2560px) { .footerBg.--top .footerBg__deco--right { max-width: 510px; } } .mainForm { min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 768px) { .mainForm { padding-left: 12px; padding-right: 12px; } } @media (max-width: 768px) { .mainForm .footer { margin-left: -12px; margin-right: -12px; } } .registerForm { position: relative; width: 621px; margin: 90px auto 80px; border-radius: 8px; padding: 20px; text-align: center; } @media (max-width: 768px) { .registerForm { width: 96%; padding-left: 12px; padding-right: 12px; -webkit-box-sizing: border-box; box-sizing: border-box; } } .registerForm .headingTitle { line-height: 1; margin-bottom: 30px; } .registerForm--2023 { background-color: #2f59f4; color: #fff; } @media (max-width: 768px) { .registerForm--2023 { padding-bottom: 120px; } } @media (max-width: 360px) { .registerForm--2023 { padding-bottom: 200px; } } .registerForm--2024 { color: #fff; } @media (max-width: 768px) { .registerForm--2024 { padding-bottom: 120px; } } @media (max-width: 360px) { .registerForm--2024 { padding-bottom: 200px; } } .registerForm--2023--volunteer { color: #fff; } @media (max-width: 768px) { .registerForm--2023--volunteer { padding-bottom: 120px; } } @media (max-width: 360px) { .registerForm--2023--volunteer { padding-bottom: 200px; } } .registerForm--black { background-color: #000; color: #fff; } @media (max-width: 768px) { .registerForm--black { padding-bottom: 120px; } } @media (max-width: 360px) { .registerForm--black { padding-bottom: 200px; } } .registerForm--blue { background-color: #2F59F4; color: #fff; } @media (max-width: 768px) { .registerForm--blue { padding-bottom: 150px; } } @media (max-width: 360px) { .registerForm--blue { padding-bottom: 200px; } } .registerForm--purple { background-color: #560782; color: #fff; } @media (max-width: 768px) { .registerForm--purple { padding-bottom: 150px; } } @media (max-width: 360px) { .registerForm--purple { padding-bottom: 200px; } } .registerForm--green { background-color: #076982; border: 1px solid #00cbeb; color: #fff; } @media (max-width: 768px) { .registerForm--green { padding-bottom: 150px; } } @media (max-width: 360px) { .registerForm--green { padding-bottom: 200px; } } .registerForm--community .formImgBottom, .registerForm--community .formImgBottom2 { height: 175px; } @media (max-width: 768px) { .registerForm--community .formImgBottom, .registerForm--community .formImgBottom2 { height: 150px; } } .registerForm--community .formImgBottom2 { -webkit-transform: scaleX(1); transform: scaleX(1); } .registerForm .boxOpening { text-align: center; font-size: 15px; } @media (min-width: 768px) { .registerForm .boxOpening { left: -15px; } } @media (max-width: 768px) { .registerForm .boxOpening { left: 0; } } .registerForm .boxOpening__wrapper { padding-top: 20px; margin-bottom: 30px; } @media (max-width: 768px) { .registerForm .boxOpening__wrapper { margin-bottom: 0; } } .registerForm .boxOpening .headingTitle { max-width: 370px; padding: 10px 20px 10px 20px; left: 0; } @media (max-width: 768px) { .registerForm .boxOpening .headingTitle { padding: 12px 6px; width: 85%; } } .registerForm .boxOpening .headingTitle--red { background: #ff5f7b; color: #bbfbe8; } .registerForm .boxOpening__lead { width: 600px; margin: auto; text-align: center; padding: 12px; } .registerForm .boxOpening__lead--yellow { background: #ffeeb4; } @media (max-width: 768px) { .registerForm .boxOpening__lead { width: 100%; } } .registerForm .boxOpening p { line-height: 16px; text-align: center; } .registerForm p { margin: 15px auto; font-weight: 500; font-size: 12px; padding-left: 20px; padding-right: 20px; } .registerForm form { max-width: 428px; width: 100%; text-align: left; margin: auto; position: relative; z-index: 1; } .registerForm form label { display: block; font-size: 18px; font-weight: 700; margin-top: 4px; } .registerForm form input { width: 100%; border-radius: 1px; height: 34px; margin-bottom: 4px; display: table; border: 1px solid transparent; background-color: white; /* Sets the background color to white */ border: 2px solid #ccc; /* Adds a light grey border */ border-radius: 1px; /* Sets the border radius to 1px */ padding: 8px; /* Adds some padding for better spacing */ font-size: 16px; /* Sets the font size */ -webkit-box-shadow: none; box-shadow: none; /* Removes any default box shadow */ -webkit-transition: border-color 0.3s; transition: border-color 0.3s; /* Adds a transition effect for border color */ } .registerForm form input:focus { border-color: #007bff; /* Changes the border color on focus */ outline: none; } .registerForm form .FormCaptcha { margin: 15px auto; text-align: center; } .registerForm formNotes { font-size: 9px; margin: 20px 12px; } .registerForm button { position: relative; font-family: "Pangolin", cursive; font-size: 27px; background-color: #ff2852; border: 1px solid #ff2852; height: 50px; color: #fff; font-weight: 700; text-transform: uppercase; width: 155px; margin: 10px auto; text-align: center; border-radius: 10px; display: block; cursor: pointer; } .registerForm button::before { content: ""; height: 100%; width: 100%; position: absolute; z-index: -1; right: -5px; bottom: -5px; background: #405aaf; border-radius: 10px; } .registerForm .formFile { position: absolute; z-index: 1000; opacity: 0; cursor: pointer; right: 0; top: 0; height: 100%; font-size: 24px; width: 100%; } .registerForm .formFileNotes { margin-top: 20px; font-size: 11px; } .registerForm .formFileWrap { cursor: pointer; } .registerForm .formFileCustom { padding: 11px 10px; margin-top: 2px; height: 35px; background: #fbda14; border: 1px solid #fbda14; position: relative; color: #000; border-radius: 2px; text-align: center; float: left; cursor: pointer; display: block; border-radius: 5px; text-transform: uppercase; font-size: 10px; } .registerForm .formFileInput:disabled { margin-top: 2px; background-color: #fff; border: 1px solid #000; margin-right: 8px; } .registerFormMessage { position: absolute; top: 90px; left: 0; right: 0; margin: auto; } .registerForm .input-check { position: relative; } .registerForm .input-check label { display: inline-block; width: 100%; font-weight: 400; font-size: 18px; } .registerForm .input-check input { display: table; width: auto; float: left; } .registerForm .input-check span { padding-top: 4px; padding-left: 6px; display: inline-block; } @media (max-width: 768px) { .registerForm .input-check span { display: block; } } .registerForm .input-group p { padding-left: 0; padding-right: 0; } .registerForm .input-group label { margin-top: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; } .registerForm .input-group input[type="checkbox"] { height: 24px; } .registerForm .subinput-group { margin-left: 25px; } .registerForm .subinput-group label { font-weight: 400; } .registerForm .subinput-group .input-check p { font-weight: 400; font-size: 18px; margin: 15px 0 0; } .registerForm .subinput-group .display-flex { gap: 10px; } .registerForm .subinput-group select { width: 100%; height: 34px; margin-bottom: 4px; display: table; background-color: white; border: 2px solid #ccc; border-radius: 1px; padding: 2px; font-size: 16px; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: border-color 0.3s; transition: border-color 0.3s; } .registerForm .input-check label { margin-top: 8px; } .registerForm .input-check small { background: #405aaf; font-size: 11px; padding: 1px 7px; border-radius: 4px; margin-left: 9px; } .registerTitle { position: relative; color: transparent; margin-bottom: 22px; } .registerTitle img { position: absolute; top: 0; left: 0; right: 0; margin: auto; width: 255px; height: 46px; } .registerTitle--community img { height: 40px; } @media (max-width: 768px) { .registerTitle { height: 45px; } } .formImgBottom { position: fixed; bottom: 10%; left: 0; } @media (max-width: 768px) { .formImgBottom { display: none; } } .formImgBottom2 { position: fixed; bottom: 5%; right: 0; left: unset; } @media (max-width: 768px) { .formImgBottom2 { display: none; } } .formImgBottom3 { position: fixed; bottom: 5%; right: unset; left: 20px; } @media (max-width: 768px) { .formImgBottom3 { display: none; } } .formImgBottom4 { position: fixed; bottom: 15%; right: unset; left: 0; } @media (max-width: 768px) { .formImgBottom4 { display: none; } } .formImgBottom5 { position: fixed; bottom: 5%; right: 0; left: unset; } @media (max-width: 768px) { .formImgBottom5 { display: none; } } .formNotes { font-size: 9px; } .formMessage { display: none; position: fixed; background: rgba(255, 255, 255, 0.5); z-index: 5; top: 0; bottom: 0; padding-top: 40%; left: 0; right: 0; margin: auto; } .formMessage .registerForm { position: absolute; z-index: 6; top: 30%; left: 0; right: 0; margin: auto; padding-bottom: 20px; } @media (max-width: 768px) { .formMessage .registerForm { width: 90%; } } @media (max-width: 768px) { .formMessage { padding-left: 12px; padding-right: 12px; } } .formMessage.open { display: block; } .submitRegist { position: relative; } .submitRegist.spinning:after { content: ""; position: absolute; right: 6px; top: 50%; width: 0; height: 0; position: absolute; border-radius: 50%; -webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease; animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease; } .submitRegist.spinning:before { content: ""; width: 0px; height: 0px; border-radius: 50%; right: 6px; top: 50%; position: absolute; border-right: 3px solid #fff; -webkit-animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease; animation: rotate360 0.5s infinite linear, exist 0.1s forwards ease; } @-webkit-keyframes rotate360 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate360 { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes exist { 100% { width: 15px; height: 15px; margin: -8px 5px 0 0; } } @keyframes exist { 100% { width: 15px; height: 15px; margin: -8px 5px 0 0; } } .formMessage.open .registerForm button { background: #fbda14; border: 1px solid #fbda14; color: #000; font-size: 12px; height: 37px; } .formMessage.open .registerForm button::before { display: none; } @media (max-width: 768px) { .formMessage.open .registerForm button { height: 30px; font-size: 10px; width: auto; padding: 2px 50px; } } .formMessage.open .registerForm { background: #2f59f4; } .boxOpening .headingTitle { margin: 0; max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; padding: 20px 24px 14px 24px; text-align: left; font-size: 22px; left: 15px; } @media (max-width: 768px) { .boxOpening .headingTitle { font-size: 12px; padding: 10px 16px 8px 16px; } } .headingTitle { max-width: 300px; text-align: center; padding: 16px 12px; color: #000; clip-path: polygon(95% 0, 99% 87%, 87% 100%, 2% 100%, 0% 48%, 2% 15%); text-transform: uppercase; position: relative; z-index: 1; top: 15px; font-family: Pangolin, cursive; font-size: 24px; font-weight: 800; line-height: .92; margin: auto; left: 0; right: 0; } .headingTitle img { position: relative; width: 210px; } @media (max-width: 992px) { .headingTitle img { width: 136px; } } @media (max-width: 992px) { .headingTitle { top: 13px; font-size: 14px; max-width: 90%; width: 260px; padding: 8px 20px 4px 20px; margin: auto; } } .headingTitle--red { background: #FF5F7B; } .headingCaption { font-family: Mogra, cursive; font-weight: 400; line-height: .8; margin-top: 32px; color: #FAEB2C; text-transform: uppercase; text-align: center; } @media (max-width: 768px) { .headingCaption { font-size: 27px; } } @media (min-width: 768px) { .headingCaption { font-size: 68px; } } .headingCaption span { color: #FFFFFF; } .headingWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; } @media (min-width: 769px) { .headingWrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media (max-width: 768px) { .headingWrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .headingPrize { position: relative; margin-top: 32px; margin-left: 30px; } @media (min-width: 769px) { .headingPrize { position: absolute; top: 0; right: 0; left: 50%; margin: auto; margin-top: 0; } } @media (max-width: 768px) { .headingPrize { margin-top: 16px; margin-left: 0; } } @media (min-width: 769px) and (max-width: 1365px) { .headingPrize img { max-width: 180px; } } @media (min-width: 1366px) and (max-width: 1919px) { .headingPrize img { max-width: 210px; } } @media (min-width: 1920px) and (max-width: 2559px) { .headingPrize img { max-width: 240px; } } @media (min-width: 2560px) { .headingPrize img { max-width: 260px; } } .headingPrize::before { position: absolute; width: calc(100% + 6px); height: calc(100% + 6px); top: -3px; left: -3px; background: #2F59F4; clip-path: polygon(0 0, 15px 20%, 0 40%, 15px 60%, 0 80%, 15px 100%, 100% 100%, 100% 0); } .headingPrizeBox { min-width: 212px; position: relative; padding: 5px 10px 5px 25px; background: #FAEB2C; clip-path: polygon(0 0, 15px 20%, 0 40%, 15px 60%, 0 80%, 15px 100%, 100% 100%, 100% 0); font-size: 38px; line-height: .8; font-weight: 800; color: #F52789; } @media (max-width: 768px) { .headingPrizeBox { font-size: 24px; min-width: 137px; } } .headingPrize p { margin: 0; } .headingPrize b { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .headingPrize small { font-size: 25px; line-height: 1; } @media (max-width: 768px) { .headingPrize small { font-size: 12px; } } .headingPrize small:last-child { -ms-flex-item-align: end; align-self: flex-end; } .headingPrize strong { display: block; background: #FF5F7B; text-align: center; padding: 2px 12px 1px; color: #FFFFFF; clip-path: polygon(95% 0, 99% 87%, 87% 100%, 2% 100%, 0% 48%, 2% 15%); text-transform: uppercase; font-family: Pangolin, cursive; font-size: 17px; font-weight: 800; line-height: 1.64; margin: 0 auto 5px; } @media (max-width: 768px) { .headingPrize strong { font-size: 12px; } } .venue { width: 100%; overflow-x: hidden; } .venueWrap { position: relative; min-height: 100vh; } .venueBg { top: 0; margin: 0; position: absolute; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); width: 100%; height: 1620px; background: #efe0a2; background: -moz-linear-gradient(165deg, #efe0a2 0%, #7f53c8 15%, #e96464 31%, #e0c07f 50%, #f3e8aa 70%, #4fdaf1 86%, #5463c2 100%); background: -webkit-linear-gradient(165deg, #efe0a2 0%, #7f53c8 15%, #e96464 31%, #e0c07f 50%, #f3e8aa 70%, #4fdaf1 86%, #5463c2 100%); background: linear-gradient(165deg, #efe0a2 0%, #7f53c8 15%, #e96464 31%, #e0c07f 50%, #f3e8aa 70%, #4fdaf1 86%, #5463c2 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#efe0a2", endColorstr="#5463c2", GradientType=1); } @media (min-width: 1026px) { .venueBg { background: none; } } @media (min-width: 768px) and (max-width: 1026px) { .venueBg { width: 100%; height: 2040px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueBg { width: 1280px; height: 730px; } } @media (min-width: 1440px) { .venueBg { width: 1745px; height: 900px; background: none; } } @media (min-width: 1920px) { .venueBg { width: 1920px; height: 1094px; } } .venueBg__img { width: 100%; height: auto; max-width: none; position: absolute; top: 248px; width: 376px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } @media (min-width: 768px) { .venueBg__img { position: relative; top: 0; width: 100%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueBg__img { top: 343px; width: 768px; } } @media (min-width: 1026px) { .venueBg__img { top: 249px; width: 640px; left: 311px; -webkit-transform: none; transform: none; } } @media (min-width: 1440px) { .venueBg__img { top: 340px; width: 860px; left: 431px; } } @media (min-width: 1920px) { .venueBg__img { top: 374px; width: 918px; left: 486px; } } .venueMain { position: absolute; top: 140px; height: calc(1620px - 140px); left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } @media (min-width: 768px) and (max-width: 1025px) { .venueMain { top: 0; width: 768px; height: 2040px; } } @media (min-width: 1026px) and (max-width: 1439px) { .venueMain { top: 0; width: 1280px; height: 625px; } } @media (min-width: 1440px) { .venueMain { top: 0; width: 1745px; height: 966px; } } @media (min-width: 1920px) { .venueMain { width: 2014px; height: 1094px; } } .venueContent { position: relative; width: 300px; } @media (max-width: 768px) { .venueContent { width: 90%; margin: auto; margin-top: 35px; } } @media (min-width: 768px) { .venueContent { width: auto; margin-top: 78px; } } @media (min-width: 1026px) { .venueContent { margin-top: 78px; } } .venueContent__title { margin-left: 10px; text-transform: uppercase; font-size: 9px; font-weight: 400; color: #fff; } @media (min-width: 768px) { .venueContent__title { font-size: 9px; } } @media (min-width: 1920px) { .venueContent__title { font-size: 12px; } } .venueCenter { position: relative; top: 20px; } @media (min-width: 1026px) { .venueCenter { top: 140px; } } @media (min-width: 768px) and (max-width: 1026px) { .venueCenter { top: 224px; } } @media (min-width: 1440px) { .venueCenter { top: 213px; } } @media (min-width: 1920px) { .venueCenter { top: 248px; } } .venueCenter__side { position: absolute; top: 20px; width: 63px; padding: 20px 8px; } @media (min-width: 768px) { .venueCenter__side { top: 90px; width: 100px; } } @media (min-width: 768px) and (max-width: 1026px) { .venueCenter__side { width: 95px; padding: 10px 8px; } } @media (min-width: 1026px) { .venueCenter__side { top: 75px; width: 77px; } } @media (min-width: 1440px) { .venueCenter__side { top: 105px; width: 92px; } } @media (min-width: 1920px) { .venueCenter__side { top: 120px; width: 100px; } } .venueCenter__left { left: -15px; } @media (min-width: 1026px) { .venueCenter__left { left: 28%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueCenter__left { left: 55px; } } @media (min-width: 1440px) { .venueCenter__left { left: 28.4%; } } @media (min-width: 1920px) { .venueCenter__left { left: 30%; } } .venueCenter__right { right: -13px; } @media (min-width: 1026px) { .venueCenter__right { right: 29.6%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueCenter__right { right: 55px; } } @media (min-width: 1440px) { .venueCenter__right { right: 29.9%; } } @media (min-width: 1920px) { .venueCenter__right { right: 31.6%; } } .venueCenter__title { text-transform: uppercase; font-size: 6px; font-weight: 700; color: #fff; } @media (min-width: 768px) { .venueCenter__title { font-size: 8px; } } @media (min-width: 1920px) { .venueCenter__title { font-size: 10px; } } .venueCenter__list { font-size: 7px; font-weight: 400; } @media (min-width: 768px) { .venueCenter__list { font-size: 10px; } } @media (min-width: 1026px) and (max-width: 1920px) { .venueCenter__list { font-size: 8px; } } .venueCenter__list li:nth-child(3) { display: none; } @media (min-width: 768px) { .venueCenter__list li:nth-child(3) { display: block; } } .venueCenter__item { margin-top: 7px; margin-bottom: 7px; } @media (min-width: 1026px) { .venueCenter__item { margin-top: 24px; margin-bottom: 24px; } } @media (min-width: 768px) and (max-width: 1026px) { .venueCenter__item { margin-top: 15px; margin-bottom: 15px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueCenter__item { margin-top: 10px; margin-bottom: 10px; } } @media (min-width: 1440px) { .venueCenter__item { margin-top: 22px; margin-bottom: 22px; } } @media (min-width: 1920px) { .venueCenter__item { margin-top: 25px; margin-bottom: 25px; } } .venueCenter__rundown .venueCenter__item { padding: 2px; background: #fff; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } @media (min-width: 768px) { .venueCenter__rundown .venueCenter__item { padding: 4px; } } .venueCenter__rundown .venueCenter__link { max-height: 39px; overflow: hidden; } @media (min-width: 1026px) and (max-width: 1920px) { .venueCenter__rundown .venueCenter__link { max-height: 32px; } } .venueCenter__narsum .venueCenter__item { width: 44px; margin: 4px auto; } @media (min-width: 1026px) { .venueCenter__narsum .venueCenter__item { width: 64px; margin: 10px auto; } } @media (min-width: 768px) and (max-width: 1026px) { .venueCenter__narsum .venueCenter__item { width: 54px; margin: 10px auto; } } @media (min-width: 1026px) and (max-width: 1920px) { .venueCenter__narsum .venueCenter__item { width: 44px; margin: 8px auto; } } @media (min-width: 1440px) { .venueCenter__narsum .venueCenter__item { width: 60px; } } .venueCenter__narsum .venueCenter__link:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; background: white; background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.396796) 40%, rgba(0, 0, 0, 0.63) 100%); background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.396796) 40%, rgba(0, 0, 0, 0.63) 100%); background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(40%, rgba(0, 0, 0, 0.396796)), to(rgba(0, 0, 0, 0.63))); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.396796) 40%, rgba(0, 0, 0, 0.63) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#000000", GradientType=1); } .venueCenter__narsum .venueCenter__link:hover { -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .venueCenter__narsum .venueCenter__link:hover:before { background: white; background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(43, 109, 171, 0.402398) 40%, #2b6dab 100%); background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(43, 109, 171, 0.402398) 40%, #2b6dab 100%); background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(40%, rgba(43, 109, 171, 0.402398)), to(#2b6dab)); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(43, 109, 171, 0.402398) 40%, #2b6dab 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#2b6dab", GradientType=1); } @media (max-width: 320px) { .venueCenter__narsum .buttonMore { margin-left: -33px; } } .venueCenter__link { position: relative; display: block; } .venueList { top: 250px; width: calc(100% + 40px); margin: 0 -20px; position: relative; } @media (min-width: 1026px) { .venueList { all: unset; list-style: none; } } @media (min-width: 768px) and (max-width: 1026px) { .venueList { top: 700px; width: 400px; margin: 0; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } } .venueList__bg { top: 400px; position: absolute; width: 100%; z-index: -1; } @media (min-width: 768px) and (max-width: 1026px) { .venueList__bg { top: 35%; } } @media (min-width: 1026px) { .venueList__bg { top: 0; } } .venueList__bg:after { position: absolute; content: ""; display: block; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.3.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 104.4 314' style='enable-background:new 0 0 104.4 314;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23F5F5F5;%7D .st1%7Bfill:none;stroke:%23F5F5F5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Group_6494' transform='translate(-242.34 -616.902)'%3E%3Cpath id='Path_13129' class='st0' d='M346.5,2861.9l-93.3,54.9l93.3,58.9'/%3E%3Cpath id='Path_13130' class='st0' d='M346.5,2861.9l-99.7,58.6l99.7,63'/%3E%3Cpath id='Path_13131' class='st0' d='M336.6,2861.9l-93.3,54.9l93.3,58.9'/%3E%3C/g%3E%3Cline class='st1' x1='-15' y1='89' x2='104.4' y2='156'/%3E%3Cline class='st1' x1='104.4' y1='155' x2='0' y2='219'/%3E%3C/svg%3E"); background-repeat: repeat-y; background-position: 0 0; left: 0; width: 80px; height: 1000px; } @media (min-width: 1026px) { .venueList__bg:after { background-image: url(../images/bg-left-medium.png); width: 603px; height: 797px; left: -230px; } } @media (min-width: 1440px) { .venueList__bg:after { background-image: url(../images/bg-left-big.png); width: 940px; height: 992px; left: -266px; background-size: 86%; } } @media (min-width: 1920px) { .venueList__bg:after { height: 1075px; } } .venueList__bg:before { position: absolute; content: ""; display: block; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.3.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 104.4 314' style='enable-background:new 0 0 104.4 314;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23F5F5F5;%7D .st1%7Bfill:none;stroke:%23F5F5F5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Group_6494' transform='translate(-242.34 -616.902)'%3E%3Cpath id='Path_13129' class='st0' d='M346.5,2861.9l-93.3,54.9l93.3,58.9'/%3E%3Cpath id='Path_13130' class='st0' d='M346.5,2861.9l-99.7,58.6l99.7,63'/%3E%3Cpath id='Path_13131' class='st0' d='M336.6,2861.9l-93.3,54.9l93.3,58.9'/%3E%3C/g%3E%3Cline class='st1' x1='-15' y1='89' x2='104.4' y2='156'/%3E%3Cline class='st1' x1='104.4' y1='155' x2='0' y2='219'/%3E%3C/svg%3E"); background-repeat: repeat-y; background-position: 0 25px; margin-top: 50px; right: 0; width: 80px; height: 960px; -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Safari */ transform: rotate(180deg); } @media (min-width: 1026px) { .venueList__bg:before { background-image: url(../images/bg-right-medium.png); width: 517px; height: 780px; right: -180px; -webkit-transform: none; transform: none; } } @media (min-width: 1440px) { .venueList__bg:before { background-image: url(../images/bg-right-big.png); width: 912px; height: 941px; background-size: 86%; right: -322px; } } @media (min-width: 1920px) { .venueList__bg:before { height: 1043px; right: -230px; } } .venueImage { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .venueImage__wrap { position: absolute; width: 208px; height: 120px; top: 34px; left: 46px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } @media (min-width: 1026px) { .venueImage__wrap { width: 380px; height: 218px; top: 70px; left: 34.4%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueImage__wrap { width: 460px; height: 268px; top: 67px; left: 152px; } } @media (min-width: 1440px) { .venueImage__wrap { width: 518px; height: 304px; top: 82px; left: 34.4%; } } @media (min-width: 1920px) { .venueImage__wrap { top: 100px; left: 36.4%; } } .venueImage__wrap::before { content: ""; display: block; opacity: 0; width: 100%; height: 100%; background: #2d77b2; background: -moz-linear-gradient(144deg, rgba(45, 119, 178, 0.63) 0%, rgba(68, 222, 252, 0.63) 25%, rgba(137, 206, 182, 0.63) 50%, rgba(248, 154, 36, 0.63) 100%); background: -webkit-linear-gradient(144deg, rgba(45, 119, 178, 0.63) 0%, rgba(68, 222, 252, 0.63) 25%, rgba(137, 206, 182, 0.63) 50%, rgba(248, 154, 36, 0.63) 100%); background: linear-gradient(144deg, rgba(45, 119, 178, 0.63) 0%, rgba(68, 222, 252, 0.63) 25%, rgba(137, 206, 182, 0.63) 50%, rgba(248, 154, 36, 0.63) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d77b2", endColorstr="#f89a24", GradientType=1); position: relative; z-index: 1; } .venueImage__wrap:hover::before { opacity: 1; } .venueImage__wrap:hover .buttonOpen { opacity: 1; } .venueUser__name { position: absolute; bottom: 4px; font-size: 7px; font-weight: 400; color: #fff; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); width: calc(100% - 8px); max-height: 52px; overflow: hidden; } @media (min-width: 768px) { .venueUser__name { font-size: 10px; } } @media (min-width: 1026px) and (max-width: 1920px) { .venueUser__name { font-size: 7px; } } .venueUser__img { aspect-ratio: 1/1; } .venueLink:hover .venueItem__img { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; -ms-transform: scale(1); /* IE 9 */ -webkit-transform: scale(1); /* Safari */ transform: scale(1); } @media (min-width: 768px) { .venueLink:hover .venueItem__img { -ms-transform: scale(1.1); /* IE 9 */ -webkit-transform: scale(1.1); /* Safari */ transform: scale(1.1); } } @media (min-width: 1026px) and (max-width: 1440px) { .venueLink:hover .venueItem__img { -ms-transform: scale(1); /* IE 9 */ -webkit-transform: scale(1); /* Safari */ transform: scale(1); } } @media (min-width: 1440px) { .venueLink:hover .venueItem__img { -ms-transform: scale(1.2); /* IE 9 */ -webkit-transform: scale(1.2); /* Safari */ transform: scale(1.2); } } .venueLink:hover .venueItem__title { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; background: #f64e76; } .venueLink:hover .venueItem__title:after { border-color: #f64e76 transparent transparent transparent; } .venueItem { position: absolute; text-transform: uppercase; font-size: 10px; font-weight: 700; color: #fff; } .venueItem__img { -ms-transform: scale(0.7); /* IE 9 */ -webkit-transform: scale(0.7); /* Safari */ transform: scale(0.7); } @media (min-width: 768px) { .venueItem__img { -ms-transform: scale(1); /* IE 9 */ -webkit-transform: scale(1); /* Safari */ transform: scale(1); } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem__img { -ms-transform: scale(0.7); /* IE 9 */ -webkit-transform: scale(0.7); /* Safari */ transform: scale(0.7); } } @media (min-width: 1440px) { .venueItem__img { -ms-transform: scale(1); /* IE 9 */ -webkit-transform: scale(1); /* Safari */ transform: scale(1); } } .venueItem__title { position: relative; background: #FF6B8E; border-radius: 5px; border-bottom-left-radius: 0; padding: 6px 10px; max-width: 148px; z-index: 1; } .venueItem__title:after { content: ""; position: absolute; display: block; width: 0; z-index: 0; border-style: solid; border-width: 14px 14px 0 0; border-color: #FF6B8E transparent transparent transparent; bottom: -13px; left: 0; } @media (min-width: 1026px) { .venueItem__title { max-width: 155px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem__title { position: absolute; top: -20px; } } .venueItem--1 { left: 0; top: 360px; } @media (min-width: 1026px) { .venueItem--1 { left: 18%; top: 14%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--1 { top: 380px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--1 { left: 15%; top: 23%; } } @media (min-width: 1440px) { .venueItem--1 { left: 18%; top: 14%; } } @media (min-width: 1920px) { .venueItem--1 { left: 18%; top: 18%; } } .venueItem--2 { right: 0; top: 470px; } @media (min-width: 1026px) { .venueItem--2 { right: unset; left: 6%; top: 59%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--2 { top: 510px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--2 { top: 57%; } } @media (min-width: 1440px) { .venueItem--2 { left: 10%; top: 52%; } } @media (min-width: 1920px) { .venueItem--2 { left: 12%; top: 51%; } } .venueItem--3 { left: 0; top: 100px; } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--3 { top: 100px; } } @media (min-width: 1026px) { .venueItem--3 { left: unset; right: 10%; top: 59%; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--3 { top: 57%; } } @media (min-width: 1440px) { .venueItem--3 { right: 11%; top: 51%; } } @media (min-width: 1920px) { .venueItem--3 { right: 14%; top: 50%; } } .venueItem--4 { top: 0; right: 0; } @media (min-width: 1026px) { .venueItem--4 { left: 14%; top: 78%; right: unset; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--4 { left: 2%; top: 83%; } } @media (min-width: 1440px) { .venueItem--4 { left: 10%; top: 75%; } } @media (min-width: 1920px) { .venueItem--4 { left: 6%; top: 72%; } } .venueItem--4 .venueLink { min-height: 211px; } .venueItem--5 { left: 0; top: 600px; } @media (min-width: 1026px) { .venueItem--5 { left: unset; } } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--5 { top: 620px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--5 { right: 20%; top: 22%; } } @media (min-width: 1440px) { .venueItem--5 { right: 22%; top: 14%; } } @media (min-width: 1920px) { .venueItem--5 { right: 22%; top: 16%; } } .venueItem--6 { left: 0; top: 820px; } @media (min-width: 1026px) { .venueItem--6 { left: unset; } } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--6 { top: 870px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--6 { right: 7%; top: 28%; } } @media (min-width: 1440px) { .venueItem--6 { right: 11%; top: 29%; } } @media (min-width: 1920px) { .venueItem--6 { right: 13%; top: 30%; } } .venueItem--7 { right: 0; top: 720px; } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--7 { top: 790px; } } @media (min-width: 1026px) { .venueItem--7 { left: 17%; right: unset; top: 55%; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--7 { left: 3%; top: 30%; } } @media (min-width: 1440px) { .venueItem--7 { left: 11%; top: 29%; } } @media (min-width: 1920px) { .venueItem--7 { left: 10%; top: 30%; } } .venueItem--8 { right: 0; top: 220px; } @media (min-width: 1026px) { .venueItem--8 { right: 18%; top: 76%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--8 { top: 250px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--8 { right: 3%; top: 82%; } } @media (min-width: 1440px) { .venueItem--8 { right: 11%; top: 73%; } } @media (min-width: 1920px) { .venueItem--8 { right: 7%; top: 71%; } } .venueItem--8 .venueLink { min-height: 203px; } .venueItem__misc, .nostalgiaTooltip { background: #FC4848; padding: 6px 10px; border-radius: 4px; position: absolute; bottom: 145px; left: 92px; width: 95px; text-transform: capitalize; font-size: 11px; font-weight: 400; -webkit-animation: bounce 3s infinite; animation: bounce 3s infinite; } .venueItem__misc:after, .nostalgiaTooltip:after { content: ""; position: absolute; display: block; width: 0; z-index: 0; border-style: solid; border-width: 0 12px 12px 0; border-color: transparent #FC4848 transparent transparent; bottom: -10px; right: 40px; } .venueItem__misc--2 { left: -23px; bottom: 110px; width: 107px; } @media (min-width: 768px) { .venueItem__misc--2 { left: 117px; bottom: 136px; } } @media (min-width: 1026px) { .venueItem__misc--2 { left: -23px; } } .venueItem__misc--2:after { right: 75px; } .venueScroll { top: 23%; z-index: 1; } @media (min-width: 768px) { .venueScroll { display: none; } } .venueLogo { margin-top: 50px; } @media (max-width: 768px) { .venueLogo { margin-top: 27px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueLogo img { max-width: 560px; } } @media (min-width: 1440px) { .venueLogo img { max-width: 718px; } } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) { .venueLogo { -webkit-transform: scale(0.85); transform: scale(0.85); -webkit-transform-origin: top center; transform-origin: top center; } } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { .venueLogo { -webkit-transform: scale(0.75); transform: scale(0.75); -webkit-transform-origin: top center; transform-origin: top center; } } .venueOfficial { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 25px; margin-bottom: 24px; } @media (max-width: 768px) { .venueOfficial { gap: 10px; } } .venueOfficial:before { content: attr(title); font-size: 11px; font-weight: 500; color: #556cae; } @media (max-width: 768px) { .venueOfficial:before { font-size: 8px; } } .venueOfficial img { color: transparent; position: relative; z-index: 1; border-radius: 4px; border: 1px solid #556cae; } @media (min-width: 768px) { .venueOfficial img { padding: 10px 18px; } } @media (min-width: 1800px) { .venueOfficial img { padding: 17px 27px; } } @media (max-width: 768px) { .venueOfficial img { width: 56px; height: 26px; padding: 0; display: table; } } .venueOfficial img:before { content: "LOGO"; position: absolute; font-size: 20px; font-weight: 500; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; height: 100%; width: 100%; background-color: #ceefe6; color: #556cae; overflow: hidden; } @media (max-width: 768px) { .venueOfficial img:before { font-size: 8px; } } .venueReg { font-family: Pangolin, cursive; font-size: 27px; font-weight: 700; line-height: 40.5px; text-align: center; color: #FF0000; border: 1px solid #FF0000; background: transparent; border-radius: 10px; position: relative; display: table; padding: 5px 25px; text-transform: uppercase; margin: 32px auto 0; left: 0; right: 0; cursor: pointer; } .venueReg:hover { background-color: #94d9ea; } @media (max-width: 768px) { .venueReg { padding: 2px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; width: 110px; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 16px; } } .boxPlayer { position: relative; padding-bottom: 12px; margin-bottom: 75px; overflow: hidden; } @media (max-width: 768px) { .boxPlayer { padding-bottom: 90px; margin-bottom: 40px; padding-top: 20px; } } .boxPlayer__img { position: relative; z-index: 2; display: block; margin: auto; width: 960px; height: 510px; } @media (max-width: 768px) { .boxPlayer__img { width: 410px; height: 240px; padding: 20px; } } @media (max-width: 320px) { .boxPlayer__img { width: 410px; height: 209px; padding: 20px; } } .boxPlayer__imgLeft, .boxPlayer__imgRight { position: absolute; bottom: -22px; z-index: 2; margin: 10px auto; } @media (max-width: 768px) { .boxPlayer__imgLeft, .boxPlayer__imgRight { margin: unset; bottom: 0; } } .boxPlayer__imgLeft { height: 170px; left: 4%; } @media (max-width: 768px) { .boxPlayer__imgLeft { left: 50px; height: 90px; } } @media (max-width: 320px) { .boxPlayer__imgLeft { height: 115px; left: 10px; } } .boxPlayer__imgRight { height: 206px; right: 2%; } @media (max-width: 768px) { .boxPlayer__imgRight { right: 50px; height: 100px; } } @media (max-width: 320px) { .boxPlayer__imgRight { height: 133px; right: 15px; } } .boxPlayer__embed { position: absolute; z-index: 2; top: 5px; left: 0; right: 0; margin: auto; overflow: hidden; width: 700px; height: 450px; left: 33px; -webkit-box-sizing: border-box; box-sizing: border-box; background: #214f92; } @media (max-width: 768px) { .boxPlayer__embed { top: 42px; width: 271px; height: 165px; left: 14px; } } @media (max-width: 380px) { .boxPlayer__embed { top: 45px; left: 10px; width: 224px; height: 145px; } } .boxPlayer__embed iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; padding: 12px; -webkit-box-sizing: border-box; box-sizing: border-box; } .boxPlayer .imgSunrise { position: absolute; z-index: 1; left: 0; width: 100%; bottom: -20px; } @media (max-width: 768px) { .boxPlayer .imgSunrise { bottom: 0; } } @media (max-width: 768px) { .boxPlayer .imgSunrise:after { content: ""; background-color: #1b8f87; height: 50px; width: 100%; } } .boxMenu { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 40px auto 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 900px; gap: 35px; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 768px) { .boxMenu { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 6px; } } .boxMenu__item { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 269px; height: 160px; } @media (max-width: 768px) { .boxMenu__item { width: 90%; } } @media (max-width: 360px) { .boxMenu__item { width: 90%; } } .boxMenu__item { position: relative; z-index: 2; clip-path: polygon(0 0, 100% 0, 99% 75%, 100% 100%, 0 100%, 3% 35%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transition: 0.3s; transition: 0.3s; } @media (max-width: 768px) { .boxMenu__item { left: 0px; top: 0; margin: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; text-align: left; } } @media (max-width: 360px) { .boxMenu__item { margin: 0; } } .boxMenu__item:hover:before { background: #c2e6f9; } .boxMenu__item:hover .boxMenu__img { opacity: .5; } .boxMenu__item--1 { background: #deb4ff; } .boxMenu__item--2 { background: #78D5A7; } .boxMenu__item--3 { background: #FDC022; } .boxMenu__item--3 .boxMenu__title { color: #405AAF; } .boxMenu__item--4 { background: #C0EEFD; } .boxMenu__item--4 .boxMenu__title { color: #ff5f7b; } .boxMenu__item--5 { background: #ff9072; } .boxMenu__item--5 .boxMenu__title { color: #C0EEFD; } .boxMenu__item--6 { background: #ff9fd5; } .boxMenu__item--6 .boxMenu__title { color: #405aaf; } .boxMenu__item:hover { position: relative; } .boxMenu__item:hover .boxMenu__title { opacity: 0; font-size: 22px; } .boxMenu__item:hover .boxMenu__titleLead { font-size: 10px; } .boxMenu__item:hover .boxMenu__title--hover { opacity: 1; } .boxMenu__item:hover .boxMenu__title--hover span { display: block; } .boxMenu__img { display: block; text-align: center; margin: auto; position: absolute; z-index: 2; bottom: 0; right: 0; opacity: 1; -webkit-transition: 0.2 all ease-in-out; transition: 0.2 all ease-in-out; } @media (max-width: 768px) { .boxMenu__img { width: auto; height: 100%; left: auto; right: 12px; opacity: .5; } } .boxMenu__note { position: absolute; top: 15px; right: -18px; z-index: 3; } @media (max-width: 768px) { .boxMenu__note { top: 5px; width: 46px; right: -4px; } } @media (max-width: 380px) { .boxMenu__note { top: 4px; width: 35px; right: -5px; } } .boxMenu__title { display: block; word-break: break-word; font-family: Pangolin, cursive; font-size: 42px; font-weight: 900; line-height: 44px; color: #086C9D; text-align: left; margin: auto; position: relative; z-index: 2; text-transform: uppercase; -webkit-transition: 0.2 all ease-in-out; transition: 0.2 all ease-in-out; } @media (max-width: 768px) { .boxMenu__title { left: 0; font-weight: 800; font-size: 35px; line-height: .8; margin-top: 0; margin-bottom: 8px; margin-left: 38px; } } .boxMenu__title.boxMenu__title--class { -webkit-animation: zoom-in-zoom-out 1s ease infinite; animation: zoom-in-zoom-out 1s ease infinite; } .boxMenu__title--small { display: block; font-family: Pangolin, cursive; font-size: 18px; font-weight: 700; line-height: 21px; text-align: left; } @media (max-width: 768px) { .boxMenu__title--small { font-size: 22px; } } .boxMenu__title--hover { position: absolute; opacity: 0; top: 0; bottom: 0; margin: auto; left: 0; right: 0; padding: 20px 30px; line-height: 1; font-size: 20px; color: #086c9d; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: 0.2 all ease-in-out; transition: 0.2 all ease-in-out; text-transform: none; } @media (max-width: 768px) { .boxMenu__title--hover { position: relative; opacity: 1; font-family: Pangolin, cursive; font-size: 12px; font-weight: 700; line-height: 1.25; text-align: left; margin: 0; padding: 0 38px; } } .boxMenu__caption { position: absolute; text-align: left; z-index: 2; background: rgba(29, 135, 211, 0.7); color: #fff; display: block; width: 75%; height: 128px; right: 0; top: 25px; padding: 12px 15px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .boxMenu__lead { font-size: 12px; font-weight: 300; } .boxMenu--img .boxMenu__img { width: 100%; height: 100%; } @media (max-width: 768px) { .boxMenu--img .boxMenu__img { left: 0px; border-radius: 6px; } } .boxMenu--img .boxMenu__title { font-size: 23px; font-weight: 500; color: #fff; padding: 0 15px 0 0; line-height: 1; } @media (max-width: 768px) { .boxMenu--img .boxMenu__title { padding: 0; font-size: 14px; } } @media (max-width: 380px) { .boxMenu--img .boxMenu__title { font-size: 12px; } } .boxMenu--img .boxMenu__lead { line-height: 1.5; display: block; overflow: hidden; } @media (max-width: 768px) { .boxMenu--img .boxMenu__lead { font-size: 9px; max-height: 45px; } } @media (max-width: 380px) { .boxMenu--img .boxMenu__lead { font-size: 8px; max-height: 30px; line-height: 1.2; } } .boxMenu--img .boxMenu__item, .boxMenu--img .boxMenu__item::before { border: 1px solid #000; width: 275px; height: 183px; display: table; border-radius: 5px; } @media (max-width: 768px) { .boxMenu--img .boxMenu__item, .boxMenu--img .boxMenu__item::before { width: 160px; height: 100px; } } @media (max-width: 768px) { .boxMenu--img .boxMenu__item, .boxMenu--img .boxMenu__item::before { width: 170px; height: 115px; } } @media (max-width: 380px) { .boxMenu--img .boxMenu__item, .boxMenu--img .boxMenu__item::before { width: 130px; height: 95px; } } .boxMenu--img .boxMenu__item { left: 0px; top: 0px; } .boxMenu--img .boxMenu__item:before { left: 7px; top: 7px; } @media (max-width: 380px) { .boxMenu--img .boxMenu__item:before { left: 4px; top: 4px; } } .boxMenu--img .boxMenu__item:nth-child(3):before, .boxMenu--img .boxMenu__item:nth-child(4):before { background: #68d8b6; } @media (max-width: 768px) { .boxMenu--img .boxMenu__caption { width: 90%; height: 85px; right: 0; top: 20px; } } @media (max-width: 380px) { .boxMenu--img .boxMenu__caption { top: 18px; height: 70px; } } .floatingMenu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } @media (max-width: 768px) { .floatingMenu { gap: 0px; } } .floatingMenu__left, .floatingMenu__right { position: fixed; bottom: 15px; height: 52px; background-color: #FF0000; color: #fff; padding: 9px 13px 9px; font-family: Pangolin, cursive; font-size: 22px; font-weight: 700; line-height: 33px; text-align: center; z-index: 10; } @media (max-width: 768px) { .floatingMenu__left, .floatingMenu__right { height: 32px; padding: 5px; } } .floatingMenu__left { left: 0; border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .floatingMenu__left a { display: -webkit-box; display: -ms-flexbox; display: flex; } .floatingMenu__right { right: 0; border-top-left-radius: 12px; border-bottom-left-radius: 12px; } .floatingMenu__right img { position: relative; top: -5px; } @media (max-width: 768px) { .floatingMenu__right { font-size: 11px; padding: 0 12px; } .floatingMenu__right img { display: none; } } .floatingMenu__iItem { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .floatingMenu .icon { width: 34px; height: 34px; background-size: cover; } @media (max-width: 768px) { .floatingMenu .icon { height: 21px; width: 21px; } } .icon-scroll-up { position: fixed; right: 0; bottom: 25px; width: 40px; height: 40px; z-index: 10; border-radius: 50%; border: none; opacity: 0.8; cursor: pointer; background-color: #FF0000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .icon-scroll-up::before { content: ""; width: 14px; height: 14px; border-top: 3px solid #fff; border-left: 3px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin-top: 4px; } @media (max-width: 768px) { .icon-scroll-up::before { width: 9px; height: 9px; border-top-width: 2px; border-left-width: 2px; margin-top: 3px; } } .icon-scroll-up:hover { opacity: 1; } @media (max-width: 768px) { .icon-scroll-up { width: 25px; height: 25px; } } .sectionLineup { background: #FFFAE4; position: relative; } .sectionLineup__img-1, .sectionLineup__img-2, .sectionLineup__img-3, .sectionLineup__img-4 { position: absolute; } .sectionLineup__img-1 { top: -10px; left: 0; } @media (max-width: 768px) { .sectionLineup__img-1 { display: none; } } .sectionLineup__img-2 { top: -40px; right: 0; } @media (max-width: 768px) { .sectionLineup__img-2 { width: 50%; } } .sectionLineup__img-3 { bottom: 0; left: 0; } @media (max-width: 768px) { .sectionLineup__img-3 { width: 30%; } } .sectionLineup__img-4 { bottom: -120px; right: 0; } @media (max-width: 768px) { .sectionLineup__img-4 { display: none; } } .lineup { position: relative; padding: 50px; z-index: 2; } @media (max-width: 768px) { .lineup { padding: 15px; padding: 30px 0px 20px; } } .lineup .headingTitle { background: #456589; } .lineupLead { max-width: 709px; margin: auto; font-family: Pangolin, cursive; font-size: 17px; font-weight: 700; line-height: 25.5px; text-align: center; color: #456589; padding: 40px 0 30px; } @media (max-width: 768px) { .lineupLead { font-family: Pangolin, cursive; font-size: 11px; font-weight: 700; line-height: 16.5px; text-align: center; } } .lineup__wrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: auto; max-width: 1200px; padding: auto 15px; } @media (max-width: 768px) { .lineup__wrap { gap: 4px 0; } } .lineup__item { position: relative; z-index: 2; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 20%; height: 330px; overflow: hidden; } @media (max-width: 768px) { .lineup__item { max-width: 33.33%; width: 33.33%; height: auto; height: 180px; } } .lineup__itemImg { width: 100%; height: 245px; -o-object-fit: contain; object-fit: contain; } @media (max-width: 768px) { .lineup__itemImg { height: 125px; } } .lineup__itemTitle { font-family: "Pangolin", cursive; position: relative; top: 10px; left: 0; right: 0; margin: auto; text-align: center; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; max-width: 202px; max-height: 73px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 768px) { .lineup__itemTitle { min-height: 30px; } } @media (max-width: 768px) { .lineup__itemTitle { font-size: 11px; min-height: 40px; } } .lineup__itemTitle .name { text-transform: uppercase; color: #000; font-size: 18px; font-weight: 700; -webkit-transition: 0.3s all ease-in-out; transition: 0.3s all ease-in-out; overflow: hidden; line-height: 1; } @media (min-width: 768px) { .lineup__itemTitle .name { max-height: 38px; } } @media (max-width: 768px) { .lineup__itemTitle .name { font-size: 11px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* Limit to 2 lines */ overflow: hidden; text-overflow: ellipsis; } } .lineup__itemTitle span { color: #000; display: block; font-size: 11px; font-weight: 500; max-height: 34px; overflow: hidden; line-height: 1.1; } @media (max-width: 768px) { .lineup__itemTitle span { font-size: 10px; max-height: 29px; height: auto; } } @media (max-width: 376px) { .lineup__itemTitle span { font-size: 8px; } } @media (min-width: 768px) { .lineup__itemTitle:hover .lineup__itemTitle { background-color: #258cd2; border: 1px solid #10164a; margin: auto 14px; padding: 6px 4px; } .lineup__itemTitle:hover .lineup__itemTitle .name { font-size: 11px; } } @media (max-width: 768px) { .lineup__itemTitle { width: 100%; height: auto; } } .lineupImgbg { position: absolute; bottom: -20px; z-index: -2; } .lineupImgbg--left { left: -69px; width: 342px; height: 369px; -webkit-transform: scale(0.8); transform: scale(0.8); } .lineupImgbg--right { right: -69px; width: 338px; height: 337px; -webkit-transform: scale(0.8); transform: scale(0.8); } .sectionSponsor { padding-top: 50px; padding-bottom: 178px; } .sponsor { text-align: center; margin: 12px auto 26px; position: relative; z-index: 2; } @media (max-width: 768px) { .sponsor { margin: 12px auto; } } .sponsorContent { padding-top: 20px; padding-bottom: 20px; z-index: 2; position: relative; margin: auto; max-width: 875px; background: #fff; } .sponsorContent::before, .sponsorContent::after { content: ""; position: absolute; left: 0; width: 100%; height: 40px; background: url(../images/2026/div-shape.png) no-repeat; background-size: 100%; pointer-events: none; } .sponsorContent::before { bottom: 100%; } .sponsorContent::after { top: 100%; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .sponsorHeading { font-weight: 600; text-transform: uppercase; } .sponsorItem { overflow: hidden; border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 12px auto auto; position: relative; } .sponsor img { -o-object-fit: contain; object-fit: contain; z-index: 2; color: transparent; height: auto; } .sponsor img:before { content: attr(title); background-color: #5A5A5A; color: #FFFFFF; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 100%; width: 100%; text-transform: uppercase; font-weight: 500; font-size: 29px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 768px) { .sponsor img:before { font-size: 20px; } } .sponsorWrap { margin: auto; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 2.85rem; max-width: 1100px; } .sponsorSuperbig .headingTitle { margin-bottom: 44px; } @media (max-width: 768px) { .sponsorSuperbig .sponsorWrap { gap: 30px; } } .sponsorSuperbig .sponsorHeading { font-size: 16px; } .sponsorSuperbig .sponsorItem, .sponsorSuperbig .sponsor img { width: 203px; height: 204px; } @media (max-width: 768px) { .sponsorSuperbig .sponsorItem, .sponsorSuperbig .sponsor img { width: 85px; height: 85px; } } .sponsorBig { margin-bottom: 44px; } .sponsorBig .sponsorHeading { font-size: 10px; } .sponsorBig .sponsorWrap { gap: 2rem; } @media (max-width: 768px) { .sponsorBig .sponsorWrap { gap: 13px; } .sponsorBig .sponsorWrap a { margin-top: 0; } } @media (min-width: 768px) { .sponsorBig .sponsorItem, .sponsorBig .sponsor img { width: 152px; height: 152px; } } @media (max-width: 768px) { .sponsorBig .sponsorItem, .sponsorBig .sponsor img { width: 69px; height: 69px; margin: 6px auto; } } .sponsorBig .sponsor img:before { font-size: 20px; } .sponsorSmall__column { max-width: 700px; margin: auto; } @media (max-width: 768px) { .sponsorSmall__column { display: table; width: 100%; } .sponsorSmall__column .sponsorWrap { text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .sponsorSmall .sponsorItem, .sponsorSmall .sponsor img { width: 78.5px; height: 78.5px; } @media (max-width: 768px) { .sponsorSmall .sponsorItem { width: 54px; height: 54px; } } .sponsorSmall .sponsorWrap { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20.5px; } @media (max-width: 768px) { .sponsorSmall .sponsorWrap { gap: 15px; } } .sponsorSmall img:before { font-size: 11px; } .sponsorSmall-2 .sponsorHeading { font-size: 10px; } .sponsorSmall-2 .sponsorWrap { gap: 20px; } @media (max-width: 768px) { .sponsorSmall-2 .sponsorWrap { gap: 4px; } } .sponsorSmall-2 .sponsorWrap .sponsorItem { padding: 0; margin-right: 0; margin-left: 0; } @media (max-width: 768px) { .sponsorSmall-2 .sponsorItem { width: 36px; height: 39px; } } .venue { width: 100%; overflow-x: hidden; } .venueWrap { position: relative; min-height: 100vh; } .venueBg { top: 0; margin: 0; position: absolute; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); width: 100%; height: 1620px; background: #efe0a2; background: -moz-linear-gradient(165deg, #efe0a2 0%, #7f53c8 15%, #e96464 31%, #e0c07f 50%, #f3e8aa 70%, #4fdaf1 86%, #5463c2 100%); background: -webkit-linear-gradient(165deg, #efe0a2 0%, #7f53c8 15%, #e96464 31%, #e0c07f 50%, #f3e8aa 70%, #4fdaf1 86%, #5463c2 100%); background: linear-gradient(165deg, #efe0a2 0%, #7f53c8 15%, #e96464 31%, #e0c07f 50%, #f3e8aa 70%, #4fdaf1 86%, #5463c2 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#efe0a2", endColorstr="#5463c2", GradientType=1); } @media (min-width: 1026px) { .venueBg { background: none; } } @media (min-width: 768px) and (max-width: 1026px) { .venueBg { width: 100%; height: 2040px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueBg { width: 1280px; height: 730px; } } @media (min-width: 1440px) { .venueBg { width: 1745px; height: 900px; background: none; } } @media (min-width: 1920px) { .venueBg { width: 1920px; height: 1094px; } } .venueBg__img { width: 100%; height: auto; max-width: none; position: absolute; top: 248px; width: 376px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } @media (min-width: 768px) { .venueBg__img { position: relative; top: 0; width: 100%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueBg__img { top: 343px; width: 768px; } } @media (min-width: 1026px) { .venueBg__img { top: 249px; width: 640px; left: 311px; -webkit-transform: none; transform: none; } } @media (min-width: 1440px) { .venueBg__img { top: 340px; width: 860px; left: 431px; } } @media (min-width: 1920px) { .venueBg__img { top: 374px; width: 918px; left: 486px; } } .venueMain { position: absolute; top: 140px; height: calc(1620px - 140px); left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } @media (min-width: 768px) and (max-width: 1025px) { .venueMain { top: 0; width: 768px; height: 2040px; } } @media (min-width: 1026px) and (max-width: 1439px) { .venueMain { top: 0; width: 1280px; height: 625px; } } @media (min-width: 1440px) { .venueMain { top: 0; width: 1745px; height: 966px; } } @media (min-width: 1920px) { .venueMain { width: 2014px; height: 1094px; } } .venueContent { position: relative; width: 300px; } @media (max-width: 768px) { .venueContent { width: 90%; margin: auto; margin-top: 35px; } } @media (min-width: 768px) { .venueContent { width: auto; margin-top: 78px; } } @media (min-width: 1026px) { .venueContent { margin-top: 78px; } } .venueContent__title { margin-left: 10px; text-transform: uppercase; font-size: 9px; font-weight: 400; color: #fff; } @media (min-width: 768px) { .venueContent__title { font-size: 9px; } } @media (min-width: 1920px) { .venueContent__title { font-size: 12px; } } .venueCenter { position: relative; top: 20px; } @media (min-width: 1026px) { .venueCenter { top: 140px; } } @media (min-width: 768px) and (max-width: 1026px) { .venueCenter { top: 224px; } } @media (min-width: 1440px) { .venueCenter { top: 213px; } } @media (min-width: 1920px) { .venueCenter { top: 248px; } } .venueCenter__side { position: absolute; top: 20px; width: 63px; padding: 20px 8px; } @media (min-width: 768px) { .venueCenter__side { top: 90px; width: 100px; } } @media (min-width: 768px) and (max-width: 1026px) { .venueCenter__side { width: 95px; padding: 10px 8px; } } @media (min-width: 1026px) { .venueCenter__side { top: 75px; width: 77px; } } @media (min-width: 1440px) { .venueCenter__side { top: 105px; width: 92px; } } @media (min-width: 1920px) { .venueCenter__side { top: 120px; width: 100px; } } .venueCenter__left { left: -15px; } @media (min-width: 1026px) { .venueCenter__left { left: 28%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueCenter__left { left: 55px; } } @media (min-width: 1440px) { .venueCenter__left { left: 28.4%; } } @media (min-width: 1920px) { .venueCenter__left { left: 30%; } } .venueCenter__right { right: -13px; } @media (min-width: 1026px) { .venueCenter__right { right: 29.6%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueCenter__right { right: 55px; } } @media (min-width: 1440px) { .venueCenter__right { right: 29.9%; } } @media (min-width: 1920px) { .venueCenter__right { right: 31.6%; } } .venueCenter__title { text-transform: uppercase; font-size: 6px; font-weight: 700; color: #fff; } @media (min-width: 768px) { .venueCenter__title { font-size: 8px; } } @media (min-width: 1920px) { .venueCenter__title { font-size: 10px; } } .venueCenter__list { font-size: 7px; font-weight: 400; } @media (min-width: 768px) { .venueCenter__list { font-size: 10px; } } @media (min-width: 1026px) and (max-width: 1920px) { .venueCenter__list { font-size: 8px; } } .venueCenter__list li:nth-child(3) { display: none; } @media (min-width: 768px) { .venueCenter__list li:nth-child(3) { display: block; } } .venueCenter__item { margin-top: 7px; margin-bottom: 7px; } @media (min-width: 1026px) { .venueCenter__item { margin-top: 24px; margin-bottom: 24px; } } @media (min-width: 768px) and (max-width: 1026px) { .venueCenter__item { margin-top: 15px; margin-bottom: 15px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueCenter__item { margin-top: 10px; margin-bottom: 10px; } } @media (min-width: 1440px) { .venueCenter__item { margin-top: 22px; margin-bottom: 22px; } } @media (min-width: 1920px) { .venueCenter__item { margin-top: 25px; margin-bottom: 25px; } } .venueCenter__rundown .venueCenter__item { padding: 2px; background: #fff; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } @media (min-width: 768px) { .venueCenter__rundown .venueCenter__item { padding: 4px; } } .venueCenter__rundown .venueCenter__link { max-height: 39px; overflow: hidden; } @media (min-width: 1026px) and (max-width: 1920px) { .venueCenter__rundown .venueCenter__link { max-height: 32px; } } .venueCenter__narsum .venueCenter__item { width: 44px; margin: 4px auto; } @media (min-width: 1026px) { .venueCenter__narsum .venueCenter__item { width: 64px; margin: 10px auto; } } @media (min-width: 768px) and (max-width: 1026px) { .venueCenter__narsum .venueCenter__item { width: 54px; margin: 10px auto; } } @media (min-width: 1026px) and (max-width: 1920px) { .venueCenter__narsum .venueCenter__item { width: 44px; margin: 8px auto; } } @media (min-width: 1440px) { .venueCenter__narsum .venueCenter__item { width: 60px; } } .venueCenter__narsum .venueCenter__link:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; background: white; background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.396796) 40%, rgba(0, 0, 0, 0.63) 100%); background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.396796) 40%, rgba(0, 0, 0, 0.63) 100%); background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(40%, rgba(0, 0, 0, 0.396796)), to(rgba(0, 0, 0, 0.63))); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.396796) 40%, rgba(0, 0, 0, 0.63) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#000000", GradientType=1); } .venueCenter__narsum .venueCenter__link:hover { -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .venueCenter__narsum .venueCenter__link:hover:before { background: white; background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(43, 109, 171, 0.402398) 40%, #2b6dab 100%); background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(43, 109, 171, 0.402398) 40%, #2b6dab 100%); background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(40%, rgba(43, 109, 171, 0.402398)), to(#2b6dab)); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(43, 109, 171, 0.402398) 40%, #2b6dab 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#2b6dab", GradientType=1); } @media (max-width: 320px) { .venueCenter__narsum .buttonMore { margin-left: -33px; } } .venueCenter__link { position: relative; display: block; } .venueList { top: 250px; width: calc(100% + 40px); margin: 0 -20px; position: relative; } @media (min-width: 1026px) { .venueList { all: unset; list-style: none; } } @media (min-width: 768px) and (max-width: 1026px) { .venueList { top: 700px; width: 400px; margin: 0; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } } .venueList__bg { top: 400px; position: absolute; width: 100%; z-index: -1; } @media (min-width: 768px) and (max-width: 1026px) { .venueList__bg { top: 35%; } } @media (min-width: 1026px) { .venueList__bg { top: 0; } } .venueList__bg:after { position: absolute; content: ""; display: block; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.3.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 104.4 314' style='enable-background:new 0 0 104.4 314;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23F5F5F5;%7D .st1%7Bfill:none;stroke:%23F5F5F5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Group_6494' transform='translate(-242.34 -616.902)'%3E%3Cpath id='Path_13129' class='st0' d='M346.5,2861.9l-93.3,54.9l93.3,58.9'/%3E%3Cpath id='Path_13130' class='st0' d='M346.5,2861.9l-99.7,58.6l99.7,63'/%3E%3Cpath id='Path_13131' class='st0' d='M336.6,2861.9l-93.3,54.9l93.3,58.9'/%3E%3C/g%3E%3Cline class='st1' x1='-15' y1='89' x2='104.4' y2='156'/%3E%3Cline class='st1' x1='104.4' y1='155' x2='0' y2='219'/%3E%3C/svg%3E"); background-repeat: repeat-y; background-position: 0 0; left: 0; width: 80px; height: 1000px; } @media (min-width: 1026px) { .venueList__bg:after { background-image: url(../images/bg-left-medium.png); width: 603px; height: 797px; left: -230px; } } @media (min-width: 1440px) { .venueList__bg:after { background-image: url(../images/bg-left-big.png); width: 940px; height: 992px; left: -266px; background-size: 86%; } } @media (min-width: 1920px) { .venueList__bg:after { height: 1075px; } } .venueList__bg:before { position: absolute; content: ""; display: block; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.3.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 104.4 314' style='enable-background:new 0 0 104.4 314;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23F5F5F5;%7D .st1%7Bfill:none;stroke:%23F5F5F5;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cg id='Group_6494' transform='translate(-242.34 -616.902)'%3E%3Cpath id='Path_13129' class='st0' d='M346.5,2861.9l-93.3,54.9l93.3,58.9'/%3E%3Cpath id='Path_13130' class='st0' d='M346.5,2861.9l-99.7,58.6l99.7,63'/%3E%3Cpath id='Path_13131' class='st0' d='M336.6,2861.9l-93.3,54.9l93.3,58.9'/%3E%3C/g%3E%3Cline class='st1' x1='-15' y1='89' x2='104.4' y2='156'/%3E%3Cline class='st1' x1='104.4' y1='155' x2='0' y2='219'/%3E%3C/svg%3E"); background-repeat: repeat-y; background-position: 0 25px; margin-top: 50px; right: 0; width: 80px; height: 960px; -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Safari */ transform: rotate(180deg); } @media (min-width: 1026px) { .venueList__bg:before { background-image: url(../images/bg-right-medium.png); width: 517px; height: 780px; right: -180px; -webkit-transform: none; transform: none; } } @media (min-width: 1440px) { .venueList__bg:before { background-image: url(../images/bg-right-big.png); width: 912px; height: 941px; background-size: 86%; right: -322px; } } @media (min-width: 1920px) { .venueList__bg:before { height: 1043px; right: -230px; } } .venueImage { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .venueImage__wrap { position: absolute; width: 208px; height: 120px; top: 34px; left: 46px; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } @media (min-width: 1026px) { .venueImage__wrap { width: 380px; height: 218px; top: 70px; left: 34.4%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueImage__wrap { width: 460px; height: 268px; top: 67px; left: 152px; } } @media (min-width: 1440px) { .venueImage__wrap { width: 518px; height: 304px; top: 82px; left: 34.4%; } } @media (min-width: 1920px) { .venueImage__wrap { top: 100px; left: 36.4%; } } .venueImage__wrap::before { content: ""; display: block; opacity: 0; width: 100%; height: 100%; background: #2d77b2; background: -moz-linear-gradient(144deg, rgba(45, 119, 178, 0.63) 0%, rgba(68, 222, 252, 0.63) 25%, rgba(137, 206, 182, 0.63) 50%, rgba(248, 154, 36, 0.63) 100%); background: -webkit-linear-gradient(144deg, rgba(45, 119, 178, 0.63) 0%, rgba(68, 222, 252, 0.63) 25%, rgba(137, 206, 182, 0.63) 50%, rgba(248, 154, 36, 0.63) 100%); background: linear-gradient(144deg, rgba(45, 119, 178, 0.63) 0%, rgba(68, 222, 252, 0.63) 25%, rgba(137, 206, 182, 0.63) 50%, rgba(248, 154, 36, 0.63) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d77b2", endColorstr="#f89a24", GradientType=1); position: relative; z-index: 1; } .venueImage__wrap:hover::before { opacity: 1; } .venueImage__wrap:hover .buttonOpen { opacity: 1; } .venueUser__name { position: absolute; bottom: 4px; font-size: 7px; font-weight: 400; color: #fff; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); width: calc(100% - 8px); max-height: 52px; overflow: hidden; } @media (min-width: 768px) { .venueUser__name { font-size: 10px; } } @media (min-width: 1026px) and (max-width: 1920px) { .venueUser__name { font-size: 7px; } } .venueUser__img { aspect-ratio: 1/1; } .venueLink:hover .venueItem__img { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; -ms-transform: scale(1); /* IE 9 */ -webkit-transform: scale(1); /* Safari */ transform: scale(1); } @media (min-width: 768px) { .venueLink:hover .venueItem__img { -ms-transform: scale(1.1); /* IE 9 */ -webkit-transform: scale(1.1); /* Safari */ transform: scale(1.1); } } @media (min-width: 1026px) and (max-width: 1440px) { .venueLink:hover .venueItem__img { -ms-transform: scale(1); /* IE 9 */ -webkit-transform: scale(1); /* Safari */ transform: scale(1); } } @media (min-width: 1440px) { .venueLink:hover .venueItem__img { -ms-transform: scale(1.2); /* IE 9 */ -webkit-transform: scale(1.2); /* Safari */ transform: scale(1.2); } } .venueLink:hover .venueItem__title { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; background: #f64e76; } .venueLink:hover .venueItem__title:after { border-color: #f64e76 transparent transparent transparent; } .venueItem { position: absolute; text-transform: uppercase; font-size: 10px; font-weight: 700; color: #fff; } .venueItem__img { -ms-transform: scale(0.7); /* IE 9 */ -webkit-transform: scale(0.7); /* Safari */ transform: scale(0.7); } @media (min-width: 768px) { .venueItem__img { -ms-transform: scale(1); /* IE 9 */ -webkit-transform: scale(1); /* Safari */ transform: scale(1); } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem__img { -ms-transform: scale(0.7); /* IE 9 */ -webkit-transform: scale(0.7); /* Safari */ transform: scale(0.7); } } @media (min-width: 1440px) { .venueItem__img { -ms-transform: scale(1); /* IE 9 */ -webkit-transform: scale(1); /* Safari */ transform: scale(1); } } .venueItem__title { position: relative; background: #FF6B8E; border-radius: 5px; border-bottom-left-radius: 0; padding: 6px 10px; max-width: 148px; z-index: 1; } .venueItem__title:after { content: ""; position: absolute; display: block; width: 0; z-index: 0; border-style: solid; border-width: 14px 14px 0 0; border-color: #FF6B8E transparent transparent transparent; bottom: -13px; left: 0; } @media (min-width: 1026px) { .venueItem__title { max-width: 155px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem__title { position: absolute; top: -20px; } } .venueItem--1 { left: 0; top: 360px; } @media (min-width: 1026px) { .venueItem--1 { left: 18%; top: 14%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--1 { top: 380px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--1 { left: 15%; top: 23%; } } @media (min-width: 1440px) { .venueItem--1 { left: 18%; top: 14%; } } @media (min-width: 1920px) { .venueItem--1 { left: 18%; top: 18%; } } .venueItem--2 { right: 0; top: 470px; } @media (min-width: 1026px) { .venueItem--2 { right: unset; left: 6%; top: 59%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--2 { top: 510px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--2 { top: 57%; } } @media (min-width: 1440px) { .venueItem--2 { left: 10%; top: 52%; } } @media (min-width: 1920px) { .venueItem--2 { left: 12%; top: 51%; } } .venueItem--3 { left: 0; top: 100px; } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--3 { top: 100px; } } @media (min-width: 1026px) { .venueItem--3 { left: unset; right: 10%; top: 59%; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--3 { top: 57%; } } @media (min-width: 1440px) { .venueItem--3 { right: 11%; top: 51%; } } @media (min-width: 1920px) { .venueItem--3 { right: 14%; top: 50%; } } .venueItem--4 { top: 0; right: 0; } @media (min-width: 1026px) { .venueItem--4 { left: 14%; top: 78%; right: unset; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--4 { left: 2%; top: 83%; } } @media (min-width: 1440px) { .venueItem--4 { left: 10%; top: 75%; } } @media (min-width: 1920px) { .venueItem--4 { left: 6%; top: 72%; } } .venueItem--4 .venueLink { min-height: 211px; } .venueItem--5 { left: 0; top: 600px; } @media (min-width: 1026px) { .venueItem--5 { left: unset; } } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--5 { top: 620px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--5 { right: 20%; top: 22%; } } @media (min-width: 1440px) { .venueItem--5 { right: 22%; top: 14%; } } @media (min-width: 1920px) { .venueItem--5 { right: 22%; top: 16%; } } .venueItem--6 { left: 0; top: 820px; } @media (min-width: 1026px) { .venueItem--6 { left: unset; } } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--6 { top: 870px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--6 { right: 7%; top: 28%; } } @media (min-width: 1440px) { .venueItem--6 { right: 11%; top: 29%; } } @media (min-width: 1920px) { .venueItem--6 { right: 13%; top: 30%; } } .venueItem--7 { right: 0; top: 720px; } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--7 { top: 790px; } } @media (min-width: 1026px) { .venueItem--7 { left: 17%; right: unset; top: 55%; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--7 { left: 3%; top: 30%; } } @media (min-width: 1440px) { .venueItem--7 { left: 11%; top: 29%; } } @media (min-width: 1920px) { .venueItem--7 { left: 10%; top: 30%; } } .venueItem--8 { right: 0; top: 220px; } @media (min-width: 1026px) { .venueItem--8 { right: 18%; top: 76%; } } @media (min-width: 768px) and (max-width: 1026px) { .venueItem--8 { top: 250px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueItem--8 { right: 3%; top: 82%; } } @media (min-width: 1440px) { .venueItem--8 { right: 11%; top: 73%; } } @media (min-width: 1920px) { .venueItem--8 { right: 7%; top: 71%; } } .venueItem--8 .venueLink { min-height: 203px; } .venueItem__misc, .nostalgiaTooltip { background: #FC4848; padding: 6px 10px; border-radius: 4px; position: absolute; bottom: 145px; left: 92px; width: 95px; text-transform: capitalize; font-size: 11px; font-weight: 400; -webkit-animation: bounce 3s infinite; animation: bounce 3s infinite; } .venueItem__misc:after, .nostalgiaTooltip:after { content: ""; position: absolute; display: block; width: 0; z-index: 0; border-style: solid; border-width: 0 12px 12px 0; border-color: transparent #FC4848 transparent transparent; bottom: -10px; right: 40px; } .venueItem__misc--2 { left: -23px; bottom: 110px; width: 107px; } @media (min-width: 768px) { .venueItem__misc--2 { left: 117px; bottom: 136px; } } @media (min-width: 1026px) { .venueItem__misc--2 { left: -23px; } } .venueItem__misc--2:after { right: 75px; } .venueScroll { top: 23%; z-index: 1; } @media (min-width: 768px) { .venueScroll { display: none; } } .venueLogo { margin-top: 50px; } @media (max-width: 768px) { .venueLogo { margin-top: 27px; } } @media (min-width: 1026px) and (max-width: 1440px) { .venueLogo img { max-width: 560px; } } @media (min-width: 1440px) { .venueLogo img { max-width: 718px; } } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) { .venueLogo { -webkit-transform: scale(0.85); transform: scale(0.85); -webkit-transform-origin: top center; transform-origin: top center; } } @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { .venueLogo { -webkit-transform: scale(0.75); transform: scale(0.75); -webkit-transform-origin: top center; transform-origin: top center; } } .venueOfficial { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 25px; margin-bottom: 24px; } @media (max-width: 768px) { .venueOfficial { gap: 10px; } } .venueOfficial:before { content: attr(title); font-size: 11px; font-weight: 500; color: #556cae; } @media (max-width: 768px) { .venueOfficial:before { font-size: 8px; } } .venueOfficial img { color: transparent; position: relative; z-index: 1; border-radius: 4px; border: 1px solid #556cae; } @media (min-width: 768px) { .venueOfficial img { padding: 10px 18px; } } @media (min-width: 1800px) { .venueOfficial img { padding: 17px 27px; } } @media (max-width: 768px) { .venueOfficial img { width: 56px; height: 26px; padding: 0; display: table; } } .venueOfficial img:before { content: "LOGO"; position: absolute; font-size: 20px; font-weight: 500; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; left: 0; height: 100%; width: 100%; background-color: #ceefe6; color: #556cae; overflow: hidden; } @media (max-width: 768px) { .venueOfficial img:before { font-size: 8px; } } .venueReg { font-family: Pangolin, cursive; font-size: 27px; font-weight: 700; line-height: 40.5px; text-align: center; color: #FF0000; border: 1px solid #FF0000; background: transparent; border-radius: 10px; position: relative; display: table; padding: 5px 25px; text-transform: uppercase; margin: 32px auto 0; left: 0; right: 0; cursor: pointer; } .venueReg:hover { background-color: #94d9ea; } @media (max-width: 768px) { .venueReg { padding: 2px 16px; display: -webkit-box; display: -ms-flexbox; display: flex; width: 110px; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 16px; } } .btnPrimary { display: inline-block; font-family: Pangolin, cursive; font-size: 27px; font-weight: 700; line-height: 40.5px; text-align: center; color: #FF0000; border: 1px solid #FF0000; background: transparent; border-radius: 10px; padding: 5px 25px; text-transform: uppercase; cursor: pointer; text-decoration: none; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .btnPrimary:hover { background: #FF0000; color: #fff; } @media (max-width: 768px) { .btnPrimary { padding: 2px 16px; font-size: 16px; } } .btnPrimary--sm { max-width: 118px; max-height: 30px; width: 100%; padding: 5px 12px; border-radius: 5px; font-size: 14px; font-weight: 400; line-height: 1; } @media (max-width: 768px) { .btnPrimary--sm { padding: 5px 12px; font-size: 14px; } } .button { border: 0; padding: 0; background: transparent; cursor: pointer; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .buttonLink { text-decoration: underline; color: #FF0000; } .buttonRegister { position: absolute; top: 0px; left: 39%; width: 69px; height: 24px; border-radius: 7px; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; font-weight: 700; color: #1065A6; } @media (min-width: 768px) { .buttonRegister { top: 11px; left: 46%; width: 112px; height: 34px; font-size: 17px; font-weight: 700; } } @media (min-width: 768px) and (max-width: 1026px) { .buttonRegister { top: 13px; left: 43%; width: 105px; } } @media (min-width: 1026px) and (max-width: 1920px) { .buttonRegister { top: 23px; width: 81px; height: 27px; font-size: 14px; } } @media (min-width: 1440px) { .buttonRegister { width: 111px; height: 34px; } } @media (min-width: 1920px) { .buttonRegister { top: 21px; width: 128px; height: 40px; } } .buttonRegister:hover { background: #FC4848; color: #fff; } .buttonVote { width: calc(100% - 20px); padding-top: 10px; padding-bottom: 10px; background: #1065A6; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; font-weight: 400; color: #fff; } .buttonVote:hover { color: #fff; background: #00CBEB; } .buttonOpen { padding: 8px 30px; background: #fff; border-radius: 7px; text-transform: uppercase; font-size: 11px; font-weight: 400; color: #1065A6; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 0; z-index: 2; } .buttonMore { display: none; padding: 6px; background: #21BFF2; border-radius: 2px; margin: 7px -22px; text-transform: uppercase; font-size: 6px; font-weight: 400; color: #fff; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; z-index: 1; position: relative; } @media (min-width: 768px) { .buttonMore { display: block; padding: 6px 4px; margin: auto; } } @media (min-width: 768px) and (max-width: 1026px) { .buttonMore { font-size: 8px; } } .buttonMore:hover { background: #1065A6; } .buttonSdk { text-decoration: underline; color: #FDC83E; font-weight: bold; } .buttonAward { position: relative; width: 100%; padding: 6px 10px; background: transparent; border: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; font-family: Pangolin, cursive; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } @media (min-width: 768px) { .buttonAward { padding: 6px 30px; } } .buttonAward .awardItem__title, .buttonAward .awardDate { color: inherit; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; -ms-transition: color 0.2s ease; -o-transition: color 0.2s ease; transition: color 0.2s ease; } .buttonAward.active .awardItem__title, .buttonAward.active .awardDate { color: #FF0000; } .buttonClose { position: absolute; z-index: 2; right: 10px; top: 10px; width: 19px; height: 19px; text-align: center; padding: 0 4px; border: 0; border-radius: 50%; background: #FF0000; color: #fff; font: 400 22px/1 "Pangolin", cursive; cursor: pointer; } @media (min-width: 768px) { .buttonClose { width: 23px; height: 23px; padding: 0 5.5px; } } .buttonClose:after { content: ''; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4zLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyMCAyMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjAgMjA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMCw4LjZMMi45LDEuNUwxLjUsMi45TDguNiwxMGwtNy4xLDcuMWwxLjQsMS40bDcuMS03LjFsNy4xLDcuMWwxLjQtMS40TDExLjQsMTBsNy4xLTcuMWwtMS40LTEuNA0KCUMxNy4xLDEuNSwxMCw4LjYsMTAsOC42eiIvPg0KPC9zdmc+DQo="); background-repeat: no-repeat; background-position: center; width: 12px; height: 12px; display: block; } .buttonHeader { display: block; min-width: 67px; padding: 6px 17px; -ms-flex-item-align: center; align-self: center; margin-right: 10px; background: #53ACEF; border-radius: 2px; text-transform: uppercase; font-size: 10px; font-weight: 400; color: #fff; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } @media (min-width: 1026px) { .buttonHeader { display: none; } } .buttonLog { margin-top: 0; padding: 9px 30px; background: #00CBEB; font-size: 12px; } .buttonLog:hover { background: #1065A6; } @media (min-width: 768px) { .buttonLog { font-size: 13px; } } .buttonDis { width: 100%; padding: 10px 20px; height: 36px; border-radius: 8px; background: #E8E8E8; text-transform: uppercase; letter-spacing: 0px; font-size: 11px; color: #1065A6; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; pointer-events: none; } @media (min-width: 768px) { .buttonDis { width: auto; border-radius: 12px; letter-spacing: 0px; font-size: 11px; color: #1065A6; } } .buttonDis.hide { display: none; } .buttonLoad { text-transform: uppercase; font-size: 14px; font-weight: 700; color: #1065A6; } .buttonUpload { padding: 10px 30px; width: 100%; display: block; max-width: unset; } @media (min-width: 768px) { .buttonUpload { width: auto; padding: 10px 30px; } } .buttonSend { padding: 9px 46px; float: right; margin-top: 10px; } .adv { background: rgba(241, 241, 242, 0.85); position: fixed; top: 0; left: 0; width: 100%; height: 89px; z-index: 1; opacity: 1; visibility: visible; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } @media (min-width: 1026px) { .adv { -webkit-box-shadow: none; box-shadow: none; } } .adv.hide { opacity: 0; visibility: hidden; } @media (min-width: 1026px) { .adv--round { width: calc(100% - 17px); border-bottom-left-radius: 58px; border-bottom-right-radius: 58px; } } .advCaption { margin-top: 12px; margin-bottom: 8px; text-transform: uppercase; font-size: 10px; font-weight: 700; } .advTitle { margin-bottom: 8px; margin-left: 8px; margin-right: 8px; font-size: 9px; font-weight: 400; } @media (min-width: 768px) { .advTitle { text-align: center; } } .advWrap { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-top: 12px; padding-bottom: 12px; padding-left: 5px; padding-right: 5px; overflow-x: auto; width: calc(100% - 5px); } @media (min-width: 768px) { .advWrap { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .advList { margin-right: 20px; overflow-x: auto; width: 100%; } @media (min-width: 768px) { .advList { margin-left: 30px; margin-right: 30px; } } .advColumn { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-preferred-size: auto; flex-basis: auto; } @media (min-width: 768px) { .advColumn { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .advColumn:last-child .advList { margin-right: 0; } .advItem { margin-left: 5px; margin-right: 5px; -webkit-transition: width .2s, height .2s; transition: width .2s, height .2s; } .advItem--big { width: 46px; height: 46px; } @media (min-width: 1026px) { .advItem:hover.advItem--big { width: 171px; height: 171px; } .advItem:hover.advItem--small { width: 100px; height: 100px; } } .advItem--small { width: 34px; height: 34px; margin-top: 6px; margin-bottom: 6px; } .advImg { -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .advImg--round { aspect-ratio: 1/1; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; border-radius: 100%; } .modal { overflow: auto; z-index: 1200; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); -webkit-transition: opacity 500ms; transition: opacity 500ms; visibility: hidden; opacity: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-top: -64px; } .modal.active { visibility: visible; opacity: 1; } .modalSdk { -webkit-box-pack: unset; -ms-flex-pack: unset; justify-content: unset; margin-top: 0; } .modalPopup, .sdkWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 100%; top: 60px; max-height: calc(100vh - 160px); overflow: hidden; -ms-flex-line-pack: center; align-content: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: 20px; margin-right: 20px; font-size: 12px; font-weight: 400; } @media (min-width: 768px) { .modalPopup, .sdkWrapper { font-size: 14px; top: 100px; } } .modalDetail, .sdkDetail { max-height: 100%; overflow-x: auto; padding-right: 10px; line-height: 1.4; /* Firefox */ /* Chrome, Edge, and Safari */ } .modalDetail, .sdkDetail { scrollbar-width: thin; scrollbar-color: #000 #D9D9D9; } .modalDetail::-webkit-scrollbar, .sdkDetail::-webkit-scrollbar { width: 8px; } .modalDetail::-webkit-scrollbar-track, .sdkDetail::-webkit-scrollbar-track { background: #D9D9D9; } .modalDetail::-webkit-scrollbar-thumb, .sdkDetail::-webkit-scrollbar-thumb { background-color: #000; border-radius: 0px; border: transparent; } @media (min-width: 768px) { .modalDetail, .sdkDetail { max-width: 600px; } } .modalTitle, .sdkTitle { font-size: 15px; font-weight: 600; } @media (min-width: 768px) { .modalTitle, .sdkTitle { text-align: center; font-size: 21px; } } .modalTitle br, .sdkTitle br { display: block; } @media (min-width: 768px) { .modalTitle br, .sdkTitle br { display: none; } } .modalContent, .sdkContent { position: relative; background: #EBE9E9; padding: 10px 20px 40px; border: 1px solid #00CBEB; border-radius: 9px; color: #000; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .modalContent *, .sdkContent * { color: #000; } .modalContent .btnPrimary, .sdkContent .btnPrimary, .modalContent .btnPrimary *, .sdkContent .btnPrimary * { color: #FF0000; } .modalContent .btnPrimary:hover, .sdkContent .btnPrimary:hover, .modalContent .btnPrimary:hover *, .sdkContent .btnPrimary:hover * { color: #fff; } .modalContent .regLink, .sdkContent .regLink, .modalContent .regLink *, .sdkContent .regLink * { color: #FF0000; } .modalContent .modalTitle, .sdkContent .modalTitle, .modalContent .sdkTitle, .sdkContent .sdkTitle, .modalContent .headingTitle, .sdkContent .headingTitle { font-family: Mogra, cursive; font-weight: 400; } .modalContent .boxOpening__lead, .sdkContent .boxOpening__lead, .modalContent .modalDetail, .sdkContent .modalDetail, .modalContent .sdkDetail, .sdkContent .sdkDetail { font-family: Dekko, cursive; font-weight: 400; } .modalContent label, .sdkContent label, .modalContent input, .sdkContent input, .modalContent textarea, .sdkContent textarea, .modalContent select, .sdkContent select { font-family: Pangolin, cursive; } .modalTop { margin-top: 50px; overflow: visible; } .modalTop .modalTitle, .modalTop .sdkTitle { text-align: center; } .modalLogin .buttonClose { background-color: #F7EA31; } .modalLogin .buttonClose::after { background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' style='enable-background:new 0 0 20 20;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23000;%7D%0A%3C/style%3E%3Cpath class='st0' d='M10,8.6L2.9,1.5L1.5,2.9L8.6,10l-7.1,7.1l1.4,1.4l7.1-7.1l7.1,7.1l1.4-1.4L11.4,10l7.1-7.1l-1.4-1.4 C17.1,1.5,10,8.6,10,8.6z'/%3E%3C/svg%3E%0A"); -webkit-filter: invert(11%) sepia(63%) saturate(5990%) hue-rotate(315deg) brightness(98%) contrast(99%); filter: invert(11%) sepia(63%) saturate(5990%) hue-rotate(315deg) brightness(98%) contrast(99%); } .modalLogin .modalWrapper { width: calc(100% - 15px); max-width: 463px; margin: 0 auto; } .modalLogin .modalTitle, .modalLogin .sdkTitle { text-align: center; } .modalLogin .modalContent, .modalLogin .sdkContent { background-color: #AF0A68; border: 2px solid #06C3E5; border-radius: 5px; color: #fff; padding: 20px; } .modalLogin .modalContent .formLogin, .modalLogin .sdkContent .formLogin { width: 100%; max-width: 356px; margin: 20px auto; } .modalLogin .modalContent .formLogin .input-group, .modalLogin .sdkContent .formLogin .input-group { width: 100%; } .modalLogin .modalContent .formLogin label, .modalLogin .sdkContent .formLogin label { width: 100%; margin-bottom: 5px; font-size: 12px; font-weight: 600; display: inline-table; } .modalLogin .modalContent .formLogin input[type=email], .modalLogin .sdkContent .formLogin input[type=email] { width: 100%; border: 1px solid #1065A6; border-radius: 5px; height: 35px; padding: 0 10px; } .modalLogin .modalContent .formLogin span, .modalLogin .sdkContent .formLogin span { font-size: 9px; } .modalLogin .modalContent .formLogin .submitLogin, .modalLogin .sdkContent .formLogin .submitLogin { font-size: 11px; background-color: #fbda14; border: 1px solid #000; height: 37px; color: #000; font-weight: 500; text-transform: uppercase; width: 190px; margin: 30px auto 0; text-align: center; border-radius: 5px; display: block; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .modalLogin .modalContent .formLogin .submitLogin:hover, .modalLogin .sdkContent .formLogin .submitLogin:hover { background-color: #94d9ea; } .sdk { position: relative; } .sdkContent { padding: 10px 15px 20px; } @media (min-width: 768px) { .sdkContent { padding: 10px 20px 20px; } } .sdkDetail { max-height: calc(100% - 80px); } .sdk ul { padding-left: 10px; list-style: disc; } .sdk ul li { display: list-item; margin-left: 1em; } .sdk ul ul, .sdk ul ol { padding-left: 20px; list-style: circle; } .sdk ul ol { list-style: decimal; } .bgConic { background: #efe0a2; background: -moz-linear-gradient(165deg, #efe0a2 0%, #7f53c8 15%, #e96464 31%, #e0c07f 50%, #f3e8aa 70%, #4fdaf1 86%, #5463c2 100%); background: -webkit-linear-gradient(165deg, #efe0a2 0%, #7f53c8 15%, #e96464 31%, #e0c07f 50%, #f3e8aa 70%, #4fdaf1 86%, #5463c2 100%); background: linear-gradient(165deg, #efe0a2 0%, #7f53c8 15%, #e96464 31%, #e0c07f 50%, #f3e8aa 70%, #4fdaf1 86%, #5463c2 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#efe0a2", endColorstr="#5463c2", GradientType=1); background-attachment: fixed; } @media (min-width: 1026px) { .bgConic { background: conic-gradient(#E96464, #E0C07F, #F3E8AA, #4FDAF1, #5463C2, #1161A3, #7351D3, #7F53C8, #E96464); background-attachment: fixed; } } .bgConic--purple { background: #7f53c8; background: -moz-linear-gradient(180deg, #7f53c8 0%, #e96464 50%, #e0c07f 100%); background: -webkit-linear-gradient(180deg, #7f53c8 0%, #e96464 50%, #e0c07f 100%); background: -webkit-gradient(linear, left top, left bottom, from(#7f53c8), color-stop(50%, #e96464), to(#e0c07f)); background: linear-gradient(180deg, #7f53c8 0%, #e96464 50%, #e0c07f 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7f53c8", endColorstr="#e0c07f", GradientType=1); background-attachment: fixed; } @media (min-width: 1026px) { .bgConic--purple { background: conic-gradient(#E96464, #E0C07F, #F3E8AA, #4FDAF1, #5463C2, #1161A3, #7351D3, #7F53C8, #E96464); background-attachment: fixed; } } .bgConic--trans { background: conic-gradient(rgba(233, 100, 100, 0.5), rgba(224, 192, 127, 0.5), rgba(243, 232, 170, 0.5), rgba(79, 218, 241, 0.5), rgba(84, 99, 194, 0.5), rgba(17, 97, 163, 0.5), rgba(115, 81, 211, 0.5), rgba(127, 83, 200, 0.5), rgba(233, 100, 100, 0.5)); } .bgWinner { background: #f3e8aa; background: -moz-linear-gradient(180deg, #f3e8aa 0%, #4fdaf1 60%, #5463c2 100%); background: -webkit-linear-gradient(180deg, #f3e8aa 0%, #4fdaf1 60%, #5463c2 100%); background: -webkit-gradient(linear, left top, left bottom, from(#f3e8aa), color-stop(60%, #4fdaf1), to(#5463c2)); background: linear-gradient(180deg, #f3e8aa 0%, #4fdaf1 60%, #5463c2 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f3e8aa", endColorstr="#5463c2", GradientType=1); } .nominationForm { margin-top: 30px; margin-left: auto; margin-right: auto; } .nominationForm__input, .triviaForm__input, .nostalgiaPopup__area { width: 100%; padding: 10px 20px; margin-top: 10px; margin-bottom: 10px; border: 4px solid #fff; border-radius: 12px; background: #fff; font: 600 16px "Pangolin", cursive; resize: vertical; } @media (min-width: 768px) { .nominationForm { max-width: 400px; } } .nominationForm ::-webkit-input-placeholder { font-size: 13px; font-weight: 600; color: #8c8c8c; } .nominationForm :-moz-placeholder { font-size: 13px; font-weight: 600; color: #8c8c8c; } .nominationForm ::-moz-placeholder { font-size: 13px; font-weight: 600; color: #8c8c8c; } .nominationForm :-ms-input-placeholder { font-size: 13px; font-weight: 600; color: #8c8c8c; } .nominationForm__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media (min-width: 768px) { .nominationForm__wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .nominationForm__btn { padding: 10px 20px; border: 0; border-radius: 20px; background: #FEE100; cursor: pointer; } .nominationForm .custom-select-trigger { width: 100%; padding: 10px 20px; margin-top: 10px; margin-bottom: 10px; background: #fff; border: 4px solid #fff; border-radius: 12px; font: 600 16px "Pangolin", cursive; } .nominationForm .custom-select-trigger.unselect { font-size: 13px; font-weight: 600; line-height: 1.5; color: #8c8c8c; } .nominationForm .custom-select { display: block; } .nominationForm .custom-select-wrapper { display: block; } .nominationForm .custom-options { border-radius: 12px; border: 0; padding: 10px 20px; margin-bottom: 0; } .nominationForm .custom-option { border-bottom: 0; color: #202020; padding: 10px 22px 10px 32px; font: 400 16px "Pangolin", cursive; } .nominationForm .custom-option:first-of-type { border-radius: 25px 25px 0 0; } .nominationForm .custom-option:last-of-type { border-radius: 0 0 25px 25px; } .nominationForm .custom-option:hover, .nominationForm .custom-option.selection { background: transparent; } .nominationForm__option:before { content: ''; position: absolute; top: 9px; left: 0; height: 19px; width: 19px; background-color: #fff; border-radius: 50%; border: 2px solid #6d6e70; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .nominationForm .selection:after { content: ""; position: absolute; left: 5px; top: 13px; width: 10px; height: 10px; background: #1065A6; border-radius: 50%; } .collapse { display: none; visibility: hidden; } .collapseTrigger { position: relative; cursor: pointer; } .collapseTrigger:after { content: ''; display: block; height: 20px; width: 20px; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4zLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03LjQsOC42bDQuNiw0LjZsNC42LTQuNkwxOCwxMGwtNiw2bC02LTZMNy40LDguNnoiLz4NCjwvc3ZnPg0K); background-repeat: no-repeat; background-size: contain; position: absolute; right: 10px; top: 10px; -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .collapseTrigger[aria-expanded="true"]:after { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .collapseTrigger.collapsed:after { -webkit-transform: rotate(0deg); transform: rotate(0deg); bottom: 12%; } .collapse.show { visibility: visible; display: block; } .collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition-property: height, visibility; transition-property: height, visibility; -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-timing-function: ease; transition-timing-function: ease; } .tabcontent { display: none; } .tabcontent::after { clear: both; display: table; content: ''; } .helpWrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; bottom: 15px; right: 15px; padding: 8px; background: #1FA22C; border-radius: 100%; font-size: 10px; font-weight: 400; color: #fff; letter-spacing: 0.1px; z-index: 1; } @media (min-width: 768px) { .helpWrapper { padding: 8px 12px; border-radius: 14px; right: 25px; } } @media (min-width: 768px) and (max-width: 1026px) { .helpWrapper { bottom: 25px; } } .helpWrapper:hover { color: #fff; } .helpIcon { width: 24px; height: 24px; } @media (min-width: 768px) { .helpIcon { width: 14px; height: 14px; margin-right: 4px; } } .regPopup { top: 67px; position: relative; } @media (max-width: 768px) { .regPopup { top: 47px; } } .regPopup .modalDetail, .regPopup .sdkDetail { overflow-x: unset; } .regPopup.--volunteer .headingTitle { background: transparent; clip-path: none; color: #000; } .regPopup.--msg .regContent { background: #2F59F4; max-width: 620px; -webkit-box-shadow: none; box-shadow: none; } .regContent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; max-width: 100%; color: #FFFFFF; border: 0; -webkit-box-shadow: 6px 6px 0px 0px #000; box-shadow: 6px 6px 0px 0px #000; top: 0; padding-top: 0; max-height: calc(100vh - 100px); overflow: hidden; -ms-scroll-chaining: none; overscroll-behavior: contain; /* For Firefox */ } @media (min-width: 768px) { .regContent { max-width: 720px; } } .regContent ::-webkit-scrollbar { width: 8px; height: 8px; } .regContent ::-webkit-scrollbar-thumb { background-color: #000; border-radius: 0; } .regContent ::-webkit-scrollbar-track { background: #D9D9D9; } .regContent * { scrollbar-width: thin; scrollbar-color: #000 #D9D9D9; } @media (min-width: 768px) { .regContent--log:after { bottom: 0; } } .regContent--log .regForm__input { border: 2px solid #1065A6; } @media (min-width: 1026px) { .regContent--log .regDetail { max-height: unset; } } .regContent .boxOpening__lead { text-align: center; line-height: normal; background: transparent; } @media (max-width: 768px) { .regContent .boxOpening__lead { font-size: 16px; } } @media (min-width: 768px) { .regContent .boxOpening__lead { font-size: 17px; } } .regContent .headingTitle { max-width: 320px; width: 320px; } @media (max-width: 768px) { .regContent .headingTitle { font-size: 18px; } } @media (min-width: 768px) { .regContent .headingTitle { font-size: 28px; } } .regContent .formFile { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; width: 100%; cursor: pointer; color: #231f20; } .regContent .formFileTitle { max-height: unset; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; text-overflow: ellipsis; white-space: pre-line; overflow: hidden; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; pointer-events: none; } .regContent .formFileTitle::-webkit-input-placeholder { color: #231f20; } .regContent .formFileTitle::-moz-placeholder { color: #231f20; } .regContent .formFileTitle:-ms-input-placeholder { color: #231f20; } .regContent .formFileTitle::-ms-input-placeholder { color: #231f20; } .regContent .formFileTitle::placeholder { color: #231f20; } .regContent .formFileInput { display: none; } .regContent .formFileBtn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -ms-flex-item-align: stretch; align-self: stretch; width: auto; max-width: none; height: auto; max-height: none; margin-top: 10px; padding: 0 16px; } .regForm { max-width: 428px; margin-left: auto; margin-right: auto; } .regForm__wrap { margin-top: 14px; } .regForm__wrap:first-of-type { margin-top: 0; } .regForm__label { text-transform: uppercase; } @media (max-width: 768px) { .regForm__label { font-size: 13px; } } @media (min-width: 768px) { .regForm__label { font-size: 18px; } } .regForm__input { display: block; width: 100%; padding: 10px 14px; margin-top: 10px; border-radius: 0; border: 0; outline: none; font-size: 16px; font-weight: 600; color: #000; } .regForm__input ::-webkit-input-placeholder { font-size: 14px; font-weight: 600; color: #8c8c8c; } .regForm__input :-moz-placeholder { font-size: 14px; font-weight: 600; color: #8c8c8c; } .regForm__input ::-moz-placeholder { font-size: 14px; font-weight: 600; color: #8c8c8c; } .regForm__input :-ms-input-placeholder { font-size: 14px; font-weight: 600; color: #8c8c8c; } .regForm__input:focus { border: 2px solid #231f20; } .regForm__input--big { font-size: 22px; font-weight: 600; color: #202020; letter-spacing: 6.6px; } .regForm__input--big ::-webkit-input-placeholder { font-size: 22px; font-weight: 600; color: #8c8c8c; } .regForm__input--big :-moz-placeholder { font-size: 22px; font-weight: 600; color: #8c8c8c; } .regForm__input--big ::-moz-placeholder { font-size: 22px; font-weight: 600; color: #8c8c8c; } .regForm__input--big :-ms-input-placeholder { font-size: 22px; font-weight: 600; color: #8c8c8c; } @media (min-width: 768px) { .regForm__input--big { font-size: 32px; letter-spacing: 9.6px; } .regForm__input--big ::-webkit-input-placeholder { font-size: 32px; } .regForm__input--big :-moz-placeholder { font-size: 32px; } .regForm__input--big ::-moz-placeholder { font-size: 32px; } .regForm__input--big :-ms-input-placeholder { font-size: 32px; } } .regForm__radio { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 8px; cursor: pointer; } .regForm__radio input[type="radio"] { border-radius: 50%; -ms-flex-negative: 0; flex-shrink: 0; margin: 0; width: 15px; height: 15px; accent-color: #2F59F4; top: 2px; position: relative; -webkit-transition: -webkit-box-shadow .3s; transition: -webkit-box-shadow .3s; transition: box-shadow .3s; transition: box-shadow .3s, -webkit-box-shadow .3s; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff; border: 1px solid #362EA4; } .regForm__radio input[type="radio"]:checked { -webkit-box-shadow: inset 0 0 0 3px #fff; box-shadow: inset 0 0 0 3px #fff; background: #2F59F4; } .regForm__btn { background: #F9D069; width: 120px; text-align: center; border-radius: 3px; padding: 11px 20px; font-weight: 700; border: 0; cursor: pointer; } .regDetail { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 0; max-width: 100%; padding-right: 0; overflow-y: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; line-height: normal; } .regLink { display: inline; padding: 0; border: 0; text-transform: uppercase; border-radius: 0; background: transparent; color: #FF0000; font-size: 11px; font-weight: 700; text-decoration: underline; cursor: pointer; } .regLink:hover { color: #FF0000; } .buttonReg, .buttonLog, .buttonTrivia, .buttonUpload, .buttonSend { padding: 8px 28px; background-color: #4F80FF; } @media (max-width: 768px) { .buttonReg, .buttonLog, .buttonTrivia, .buttonUpload, .buttonSend { padding-top: 1px; padding-bottom: 1px; } } .buttonReg span, .buttonLog span, .buttonTrivia span, .buttonUpload span, .buttonSend span { bottom: 5px; right: 5px; position: relative; z-index: 1; } .buttonReg::before, .buttonLog::before, .buttonTrivia::before, .buttonUpload::before, .buttonSend::before { bottom: 5px; right: 5px; z-index: 0; background: #FF2852; border-color: #FF2852; } .trivia { font-size: 14px; font-weight: 400; } @media (min-width: 768px) { .trivia { font-size: 16px; } } .triviaWrap { margin-top: 180px; padding-bottom: 30px; } @media (min-width: 768px) { .triviaWrap { margin-top: 220px; } } .triviaBg { padding-left: 10px; padding-right: 10px; } @media (min-width: 1026px) and (min-height: 880px) { .triviaBg { max-height: calc(100vh - 419px); overflow: auto; /* Firefox */ /* Chrome, Edge, and Safari */ } .triviaBg { scrollbar-width: thin; scrollbar-color: #000 #D9D9D9; } .triviaBg::-webkit-scrollbar { width: 8px; } .triviaBg::-webkit-scrollbar-track { background: #D9D9D9; } .triviaBg::-webkit-scrollbar-thumb { background-color: #000; border-radius: 0px; border: transparent; } } .triviaBg__wrap { padding: 10px 10px 30px; background: #fff; border-radius: 9px; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } .triviaTitle { margin-left: 20px; margin-right: 20px; margin-bottom: 20px; text-align: right; text-transform: uppercase; font-size: 17px; font-weight: 600; color: #fff; } @media (min-width: 768px) { .triviaTitle { text-align: left; font-size: 28px; margin-left: 320px; margin-right: 10px; } } @media (max-width: 320px) { .triviaTitle { margin-left: 10px; margin-right: 10px; } } .triviaSubtitle { font-size: 14px; font-weight: 600; } @media (min-width: 768px) { .triviaSubtitle { font-size: 20px; } } .triviaImg { position: absolute; top: -30px; left: -15px; z-index: -1; } @media (min-width: 768px) { .triviaImg { top: -70px; left: 10px; } } .triviaBox { padding: 0 15px 10px; margin-top: 20px; margin-bottom: 20px; border-radius: 9px; background: #E2F7FB; } .triviaBox__title { padding: 8px 10px; display: inline-block; text-transform: uppercase; color: #fff; background: #1065A6; border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; } .triviaBox__price { background: #FFEFAF; } .triviaBox__price .triviaBox__title { background: #F64E76; } .triviaBox__price .triviaBox__text { font-weight: 600; color: #FF0404; } .triviaForm__wrap { margin-top: 10px; } .triviaForm__input { border: 2px solid #1065A6; } .triviaForm__col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 768px) { .triviaForm__col { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 20px; } } .triviaForm__col .triviaForm__wrap { width: 100%; } .triviaLabel { font-size: 12px; text-transform: uppercase; } @media (min-width: 768px) { .triviaLabel { font-size: 16px; font-weight: 600; } } .triviaScroll { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); pointer-events: visible; } .triviaScroll__wrap { position: absolute; top: 0; width: calc(100% - 20px); height: calc(100vh - 183px); z-index: 0; pointer-events: none; } @media (min-width: 768px) { .triviaScroll__wrap { height: calc(100vh - 240px); } } @media (min-width: 1440px) { .triviaScroll__wrap { height: calc(100vh - 332px); } } .rundown { margin-bottom: 31px; } .rundown:has(.footer) { margin-bottom: 0; } .rundown .footerBg__deco--left, .rundown .footerBg__deco--right { display: none; } .rundownImg, .nostalgiaImg { position: relative; z-index: 1; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 150px; } @media (max-width: 990px) { .rundownImg, .nostalgiaImg { width: 105px; } } .rundownFrame__img { display: none; } .rundownHead { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .rundownHead picture, .rundownHead .rundownImg, .rundownHead .nostalgiaImg, .rundownHead .loungeImg { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; } @media (min-width: 990px) { .rundownHead { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; text-align: left; } } @media (max-width: 990px) { .rundownHead { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; gap: 12px; } } .rundownMenu { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; -ms-flex-item-align: center; align-self: center; margin-bottom: 20px; } @media (min-width: 990px) { .rundownMenu { margin-left: auto; margin-right: 10px; margin-bottom: 0; } } @media (max-width: 990px) { .rundownMenu { margin-bottom: 0; } } .rundownMenu__item { display: inline-block; margin-left: 2px; margin-right: 2px; padding: 10px 14px; text-transform: uppercase; background: #1065A6; letter-spacing: 1.2px; border-radius: 4px; font-size: 10px; font-weight: 400; line-height: 17px; color: #fff; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } @media (min-width: 990px) { .rundownMenu__item { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; padding: 6px 24px; border-radius: 12px; font-size: 16px; font-weight: 400; line-height: 25px; color: #fff; } } .rundownMenu__item.active, .rundownMenu__item:hover { background: #FFD64B; color: #1065A6; } .rundownCaption { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; margin-right: 20px; padding: 0; background: transparent; clip-path: none; position: relative; z-index: 1; text-transform: uppercase; font-family: Mogra, cursive; font-size: 20px; font-weight: 400; color: #000; margin-right: 0; } @media (min-width: 990px) { .rundownCaption { font-size: 28px; text-align: left; } } .rundownWrap { margin-top: 112px; padding-bottom: 40px; min-height: calc(100vh - 292px); } @media (min-width: 768px) { .rundownWrap { margin-top: 150px; } } @media (min-width: 1026px) { .rundownWrap { padding-bottom: 60px; } } @media (min-width: 990px) { .rundownList { padding-right: 10px; margin-bottom: 10px; } } .rundownItem { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 20px; padding: 10px 10px 15px; background: #fff; color: #000; font-size: 14px; font-weight: 400; border-radius: 9px; -webkit-box-shadow: none; box-shadow: none; } .rundownItem:last-child { margin-bottom: 0; } @media (min-width: 990px) { .rundownItem { width: 100%; padding: 20px 15px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .rundownItem__img, .loungeItem__img { width: 100%; aspect-ratio: 388 / 259; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; border-radius: 11px; } @media (min-width: 990px) { .rundownItem__img, .loungeItem__img { max-width: 388px; } } .rundownItem .sponsorBox__img img { max-width: 50px; } @media (min-width: 990px) { .rundownItem .sponsorBox__img img { max-width: 80px; } } .rundownLeft { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow: hidden; } @media (min-width: 990px) { .rundownLeft { margin-right: 20px; } } .rundownRight { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 10px; font-weight: 400; line-height: 15px; } @media (min-width: 768px) { .rundownRight { font-size: 14px; line-height: 1.3; } } @media (min-width: 990px) { .rundownRight { width: calc(100% - 420px); } } .rundownContent { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-top: 20px; max-height: 75px; overflow: hidden; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } @media (min-width: 768px) { .rundownContent { max-height: unset; -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } } @media (min-width: 990px) { .rundownContent { margin-top: 0; } } .rundownContent.active { max-height: unset; } .rundownBtn__wrap { margin-top: 12px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } @media (min-width: 990px) { .rundownBtn__wrap { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .rundownBtn__wrap .buttonReg, .rundownBtn__wrap .buttonLog, .rundownBtn__wrap .buttonTrivia, .rundownBtn__wrap .buttonUpload, .rundownBtn__wrap .buttonSend { margin-top: 0; padding: 9px 40px; height: 36px; background: transparent; border: 1px solid #FF0000; border-radius: 8px; text-transform: uppercase; font-family: Pangolin, cursive; font-size: 13px; font-weight: 700; color: #FF0000; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } @media (max-width: 990px) { .rundownBtn__wrap .buttonReg, .rundownBtn__wrap .buttonLog, .rundownBtn__wrap .buttonTrivia, .rundownBtn__wrap .buttonUpload, .rundownBtn__wrap .buttonSend { width: 100%; } } .rundownBtn__wrap .buttonReg::before, .rundownBtn__wrap .buttonLog::before, .rundownBtn__wrap .buttonTrivia::before, .rundownBtn__wrap .buttonUpload::before, .rundownBtn__wrap .buttonSend::before { display: none; } .rundownBtn__wrap .buttonReg span, .rundownBtn__wrap .buttonLog span, .rundownBtn__wrap .buttonTrivia span, .rundownBtn__wrap .buttonUpload span, .rundownBtn__wrap .buttonSend span { position: static; bottom: auto; right: auto; } .rundownBtn__wrap .buttonReg:hover, .rundownBtn__wrap .buttonLog:hover, .rundownBtn__wrap .buttonTrivia:hover, .rundownBtn__wrap .buttonUpload:hover, .rundownBtn__wrap .buttonSend:hover { background: #FF0000; color: #fff; } @media (min-width: 990px) { .rundownBtn__wrap .buttonReg, .rundownBtn__wrap .buttonLog, .rundownBtn__wrap .buttonTrivia, .rundownBtn__wrap .buttonUpload, .rundownBtn__wrap .buttonSend { margin-right: 10px; } } .rundownBtn__wrap .buttonDis { background: transparent; border: 1px solid #8c8c8c; border-radius: 8px; color: #8c8c8c; } @media (min-width: 768px) { .rundownBtn__wrap .buttonDis { color: #8c8c8c; } } .rundownTitle { font-family: Mogra, cursive; font-size: 20px; font-weight: 400; line-height: 1.3; color: #000; } @media (min-width: 990px) { .rundownTitle { font-size: 26px; } } .rundownTitle.short { max-height: 45px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @media (min-width: 768px) { .rundownTitle.short { max-height: unset; -webkit-line-clamp: unset; } } .rundownTime { margin-top: 10px; display: inline-block; background: transparent; padding: 0; font-family: Pangolin, cursive; font-size: 11px; font-weight: 400; color: #000; } @media (min-width: 990px) { .rundownTime { font-size: 16px; } } .rundownTime span:before { content: "|"; display: inline-block; margin: 0 8px; color: #000; } .rundownSpeaker { -ms-flex-wrap: wrap; flex-wrap: wrap; } .rundownSpeaker .speakerPhoto { margin-right: 6px; height: 36px; width: 36px; -ms-flex-negative: 0; flex-shrink: 0; border-radius: 50%; overflow: hidden; } .rundownSpeaker .speakerPhoto img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; border-radius: 50%; } .rundownSpeaker .speakerItem { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-right: 10px; width: calc(100% / 2); } .rundownSpeaker .speakerName { font-family: Pangolin, cursive; color: #000; font-weight: 700; } .rundownSpeaker .speakerTitle { font-family: Pangolin, cursive; color: #8c8c8c; } .rundown .speakerCaption { text-transform: uppercase; font-family: Pangolin, cursive; font-size: 12px; font-weight: 700; color: #000; } @media (min-width: 990px) { .rundown .speakerCaption { font-size: 14px; } } .rundownContent p { font-family: Dekko, cursive; color: #000; } .rundownScroll { position: relative; z-index: 2; } @media (min-width: 1026px) { .rundownScroll { margin-bottom: 20px; } } @media (min-width: 1026px) and (min-height: 880px) { .rundownScroll { max-height: calc(100vh - 381px); overflow-y: auto; margin-bottom: 20px; /* Firefox */ /* Chrome, Edge, and Safari */ } .rundownScroll { scrollbar-width: thin; scrollbar-color: #000 #D9D9D9; } .rundownScroll::-webkit-scrollbar { width: 8px; } .rundownScroll::-webkit-scrollbar-track { background: #D9D9D9; } .rundownScroll::-webkit-scrollbar-thumb { background-color: #000; border-radius: 0px; border: transparent; } } .rundownScroll .lineup__itemTitle { top: 0; } .rundownGift { margin-top: 10px; font-size: 11px; font-weight: 400; color: #FF0000; } @media (min-width: 990px) { .rundownGift { margin-top: 0; font-size: 12px; } } .rundownGift .icon { vertical-align: text-bottom; margin-right: 6px; width: 15px; height: 15px; } .sponsorBox { margin-top: 10px; font: 400 10px "Pangolin", cursive; } @media (min-width: 990px) { .sponsorBox { font-size: 12px; margin-top: 30px; } } .sponsorBox__caption { display: inline-block; margin-top: 18px; margin-right: 10px; } .sponsorBox .advList { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0; -ms-flex-wrap: wrap; flex-wrap: wrap; overflow: visible; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (min-width: 990px) { .sponsorBox .advList { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .sponsorBox .advItem { position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .sponsorBox .advItem:hover.advItem--big { width: 46px; height: 46px; } .sponsorBox .advItem:hover.advItem--small { width: 34px; height: 34px; } .sponsorBox .advItem a { display: block; width: 100%; height: 100%; border-radius: 50%; } .sponsorBox .advItem img { display: block; width: 100%; height: 100%; aspect-ratio: 1/1; border-radius: 50%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -webkit-filter: grayscale(1); filter: grayscale(1); opacity: .7; -webkit-transition: opacity .25s ease, -webkit-filter .25s ease, -webkit-transform .25s ease, -webkit-box-shadow .25s ease; transition: opacity .25s ease, -webkit-filter .25s ease, -webkit-transform .25s ease, -webkit-box-shadow .25s ease; transition: filter .25s ease, opacity .25s ease, transform .25s ease, box-shadow .25s ease; transition: filter .25s ease, opacity .25s ease, transform .25s ease, box-shadow .25s ease, -webkit-filter .25s ease, -webkit-transform .25s ease, -webkit-box-shadow .25s ease; } .sponsorBox .advItem:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); opacity: 1; -webkit-transform: translateY(-2px); transform: translateY(-2px); -webkit-box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18); } .speakerWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-preferred-size: calc(100% - 37px); flex-basis: calc(100% - 37px); } .speakerBox { width: calc(100%/2 - 10px); background: #fff; padding: 4px 4px 10px; border-radius: 7px; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; } @media (min-width: 768px) { .speakerBox { width: calc(100%/3 - 20px); margin-left: 10px; margin-right: 10px; margin-bottom: 20px; } } .speakerBox:hover { background: #feb54b; background: -moz-linear-gradient(180deg, #feb54b 0%, #e4dd7b 20%, #9edfb5 40%, #49e1ff 60%, #88c7fe 80%, #d6a8fe 100%); background: -webkit-linear-gradient(180deg, #feb54b 0%, #e4dd7b 20%, #9edfb5 40%, #49e1ff 60%, #88c7fe 80%, #d6a8fe 100%); background: -webkit-gradient(linear, left top, left bottom, from(#feb54b), color-stop(20%, #e4dd7b), color-stop(40%, #9edfb5), color-stop(60%, #49e1ff), color-stop(80%, #88c7fe), to(#d6a8fe)); background: linear-gradient(180deg, #feb54b 0%, #e4dd7b 20%, #9edfb5 40%, #49e1ff 60%, #88c7fe 80%, #d6a8fe 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#feb54b", endColorstr="#d6a8fe", GradientType=1); } .speakerBox:hover .speakerName, .speakerBox:hover .speakerTitle { color: #fff; } .speakerPhoto { width: 37px; max-height: 37px; margin-right: 10px; overflow: hidden; } .speakerPhoto img { border-radius: 50%; } .speakerName { font-size: 12px; font-weight: 600; } @media (min-width: 990px) { .speakerName { font-size: 13px; } } .speakerTitle { font-size: 11px; font-weight: 300; } @media (min-width: 990px) { .speakerTitle { font-size: 13px; } } .speakerList { -ms-flex-wrap: wrap; flex-wrap: wrap; } .speakerList .speakerPhoto { margin-bottom: 6px; margin-right: 0; width: 100%; max-height: 120px; height: 120px; border-radius: 6px; } @media (min-width: 990px) { .speakerList .speakerPhoto { height: 220px; max-height: 220px; } } .speakerList .speakerTitle { font-size: 11px; font-weight: 400; color: #1065A6; } @media (min-width: 990px) { .speakerList .speakerTitle { font-size: 14px; } } @media (min-width: 990px) { .speakerList .speakerName { font-size: 18px; } } .speakerList img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; border-radius: 6px; } .speakerCaption { text-transform: uppercase; font: 400 11px "Pangolin", cursive; } @media (min-width: 990px) { .speakerCaption { font-size: 15px; } } .speakerImg { position: absolute; z-index: -1; top: 5px; left: -15px; } @media (min-width: 768px) { .speakerImg { top: -52px; left: 35px; } } .speakerDetail { padding-top: 10px; padding-bottom: 8px; } @media (min-width: 768px) { .speakerDetail { padding-top: 12px; padding-bottom: 10px; } } .nominee { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-left: -30px; margin-right: -30px; width: 100%; font: 400 18px "Pangolin", cursive; } .nomineeItem { margin-left: 10px; margin-right: 10px; margin-bottom: 10px; padding-bottom: 10px; background: #fff; position: relative; width: calc(100%/2 - 20px); cursor: pointer; } @media (min-width: 990px) { .nomineeItem { border: 3px solid #F9D595; width: calc(100%/5 - 20px); } } .nomineeItem.active .nomineePhoto img, .nomineeItem:hover .nomineePhoto img { -webkit-filter: none; filter: none; } .nomineeName { width: 100%; position: relative; padding: 10px; letter-spacing: .5px; font-size: 12px; font-weight: 600; } @media (min-width: 990px) { .nomineeName { font-size: 13px; text-transform: uppercase; } } .nomineePhoto img { width: 100%; aspect-ratio: 3/4; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; min-height: unset; -webkit-filter: grayscale(1); filter: grayscale(1); } @media (min-width: 768px) and (max-width: 1026px) { .nomineePhoto img { min-height: 469px; } } @media (min-width: 990px) { .nomineePhoto img { min-height: 227px; } } .nomineePopup { overflow: visible; } .nomineeContent { width: 100%; margin-top: 55px; padding: 20px 15px 20px; border: 1px solid #00CBEB; background: #FBF5E2; font-size: 11px; font-weight: 500; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } @media (min-width: 768px) { .nomineeContent { width: 560px; font-size: 13px; padding: 30px 20px 40px; } } .nomineeContent__img { position: absolute; top: -60px; max-width: 240px; } @media (min-width: 768px) { .nomineeContent__img { max-width: unset; } } .nomineeContent__ava img { -o-object-fit: cover; object-fit: cover; width: 82px; height: 82px; border: 3px solid #fff; border-radius: 50%; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } @media (min-width: 768px) { .nomineeContent__ava img { width: 100px; height: 100px; } } .nomineeContent .buttonVote { width: 180px; margin-right: 18px; border-radius: 7px; } @media (max-width: 320px) { .nomineeContent .buttonVote { width: 140px; margin-right: 15px; } } @media (min-width: 768px) { .nomineeContent .buttonVote { width: 190px; } } .nomineeContent__text { text-align: left; } .nomineeContent__name { font-size: 14px; font-weight: 600; } @media (min-width: 768px) { .nomineeContent__name { font-size: 20px; } } .nomineeContent .icon-user { -webkit-filter: grayscale(1) brightness(5); filter: grayscale(1) brightness(5); background-size: cover; } .nomineeContent__misc { max-width: 180px; text-align: left; font-size: 11px; font-weight: 500; } .nomineeContent__trig { padding: 6px 20px; background: #fff; text-transform: uppercase; letter-spacing: 1px; border-radius: 5px; font-size: 9px; font-weight: 500; color: #1065A6; } .nomineeBtn { margin: 0 10px; padding: 10px 20px; border: 0; border-radius: 20px; cursor: pointer; } .nomineeBtn:hover, .nomineeBtn.active { background: #1065A6; } .nomineeBtn__wrapper { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-line-pack: end; align-content: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 100%; } .nomineeBtn__share { position: relative; } .nomineeShare { visibility: hidden; opacity: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: absolute; top: 38px; margin: 10px 0; padding: 10px; border-radius: 30px; background: #FEE100; } .nomineeShare__item { margin: 0 5px; border-radius: 50%; background: #1065A6; width: 40px; height: 40px; } .nomineeShare__item span { display: block; margin-top: 10px; width: 40px; height: 20px; background-position: center center; } .nomineeShare__tw { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4zLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkUxNEY7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zMiw3LjFjLTEuMiwwLjUtMi40LDAuOS0zLjgsMWMxLjQtMC44LDIuNC0yLjEsMi45LTMuNmMtMS4zLDAuOC0yLjcsMS4zLTQuMiwxLjZDMjUuNyw0LjgsMjQsNCwyMi4yLDQNCgljLTMuNiwwLTYuNiwyLjktNi42LDYuNmMwLDAuNSwwLjEsMSwwLjIsMS41QzEwLjMsMTEuOCw1LjUsOS4yLDIuMiw1LjJjLTAuNiwxLTAuOSwyLjEtMC45LDMuM2MwLDIuMywxLjIsNC4zLDIuOSw1LjUNCgljLTEuMSwwLTIuMS0wLjMtMy0wLjhjMCwwLDAsMC4xLDAsMC4xYzAsMy4yLDIuMyw1LjgsNS4zLDYuNGMtMC42LDAuMS0xLjEsMC4yLTEuNywwLjJjLTAuNCwwLTAuOCwwLTEuMi0wLjENCgljMC44LDIuNiwzLjMsNC41LDYuMSw0LjZjLTIuMywxLjgtNS4xLDIuOC04LjIsMi44Yy0wLjUsMC0xLDAtMS42LTAuMWMyLjksMS45LDYuNCwzLDEwLjEsM2MxMi4xLDAsMTguNy0xMCwxOC43LTE4LjcNCgljMC0wLjMsMC0wLjYsMC0wLjlDMzAsOS42LDMxLjEsOC40LDMyLDcuMUwzMiw3LjF6Ii8+DQo8L3N2Zz4NCg=="); background-repeat: no-repeat; } .nomineeShare__wa { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4zLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkUxNEY7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yNy4zLDQuN2MtMy0zLTctNC43LTExLjItNC43QzcuMywwLDAuMiw3LjEsMC4yLDE1LjljMCwyLjgsMC43LDUuNSwyLjEsNy45TDAuMSwzMmw4LjQtMi4yDQoJYzIuMywxLjMsNC45LDEuOSw3LjYsMS45aDBsMCwwYzguNywwLDE1LjktNy4xLDE1LjktMTUuOUMzMS45LDExLjYsMzAuMyw3LjcsMjcuMyw0LjdMMjcuMyw0Ljd6IE0xNi4xLDI5TDE2LjEsMjkNCgljLTIuNCwwLTQuNy0wLjYtNi43LTEuOGwtMC41LTAuM2wtNSwxLjNsMS4zLTQuOWwtMC4zLTAuNWMtMS4zLTIuMS0yLTQuNS0yLTdjMC03LjMsNS45LTEzLjIsMTMuMi0xMy4yYzMuNSwwLDYuOCwxLjQsOS4zLDMuOQ0KCWMyLjUsMi41LDMuOSw1LjgsMy45LDkuM0MyOS4yLDIzLjEsMjMuMywyOSwxNi4xLDI5eiBNMjMuMywxOS4yQzIyLjksMTksMjEsMTgsMjAuNiwxNy45cy0wLjYtMC4yLTAuOSwwLjJjLTAuMywwLjQtMSwxLjMtMS4zLDEuNg0KCWMtMC4yLDAuMy0wLjUsMC4zLTAuOSwwLjFzLTEuNy0wLjYtMy4yLTJjLTEuMi0xLTItMi40LTIuMi0yLjdzMC0wLjYsMC4yLTAuOGMwLjItMC4yLDAuNC0wLjUsMC42LTAuN3MwLjMtMC40LDAuNC0wLjcNCgljMC4xLTAuMywwLjEtMC41LDAtMC43cy0wLjktMi4yLTEuMi0yLjljLTAuMy0wLjgtMC42LTAuNy0wLjktMC43Yy0wLjIsMC0wLjUsMC0wLjgsMFM5LjgsOC42LDkuNCw5QzksOS40LDgsMTAuNCw4LDEyLjMNCglzMS40LDMuOCwxLjYsNC4xYzAuMiwwLjMsMi44LDQuMyw2LjgsNmMwLjksMC40LDEuNywwLjYsMi4zLDAuOGMxLDAuMywxLjgsMC4zLDIuNSwwLjJjMC44LTAuMSwyLjMtMSwyLjctMS45czAuMy0xLjcsMC4yLTEuOQ0KCUMyNCwxOS41LDIzLjcsMTkuNCwyMy4zLDE5LjJMMjMuMywxOS4yeiIvPg0KPC9zdmc+DQo="); background-repeat: no-repeat; } .nomineeShare__fb { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4zLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkUxNEY7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xOSw2aDVWMGgtNWMtMy45LDAtNywzLjEtNyw3djNIOHY2aDR2MTZoNlYxNmg1bDEtNmgtNlY3QzE4LDYuNSwxOC41LDYsMTksNnoiLz4NCjwvc3ZnPg0K"); background-repeat: no-repeat; } .nomineeLink { width: 148px; height: 40px; background: #44DBFB; border: 1px solid #44DBFB; border-radius: 7px; text-transform: uppercase; font-size: 13px; font-weight: 500; color: #fff; } .nomineeLink:hover { background: #1065A6; color: #fff; } .nomineeLink:hover .icon-user { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .toggleCheck { width: 90px; height: 38px; position: absolute; opacity: 0; cursor: pointer; } .toggleCheck:checked ~ .nomineeBtn { background: #1065A6; } .toggleCheck:checked ~ .nomineeShare { visibility: visible; opacity: 1; } .toggleCheck:hover ~ .nomineeBtn { background: #1065A6; } .share { text-align: left; text-transform: uppercase; font-size: 11px; font-weight: 500; } .shareIcon { width: 32px; height: 32px; background-size: cover; } @media (min-width: 768px) { .shareIcon { width: 40px; height: 40px; } } .shareLink { display: inline-block; } .chat { max-height: 340px; overflow-x: auto; padding-right: 10px; } @media (min-width: 1026px) { .chat { max-height: calc(100vh - (46px + 114px + 20px + 18px + 18px + 20px + 19px + 45px + 38px)); } } .chat::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #fff; } .chat::-webkit-scrollbar { width: 5px; background-color: #fff; } .chat::-webkit-scrollbar-thumb { height: 20px; background-color: #4797ff; } .chatItem { position: relative; padding-bottom: 15px; font-size: 12px; color: #231f20; word-wrap: break-word; word-break: break-word; } .chatUser { float: left; margin-right: 8px; color: #1065A6; width: 100%; font-weight: 500; } .chatUser.active { color: #E20100; } .chatTime { position: absolute; display: block; right: 0; bottom: 3px; font: 400 10px "Pangolin", cursive; color: #8b96b0; } .chatForm { position: relative; } .chatBtn { width: 50px; position: absolute; margin: 0; top: 1px; right: 2px; background: #fff; } .chatBtn .icon-send { position: relative; top: 3px; width: 28px; height: 28px; background-position: center; background-repeat: no-repeat; } .chatWrapper { padding: 12px 10px 18px; background: #fff; border-radius: 9px; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } @media (min-width: 768px) { .chatWrapper { padding: 18px 20px; } } .chatWrapper .formInput { width: 100%; border-radius: 2px; border: 1px solid #202020; font-size: 12px; padding: 10px 55px 10px 10px; height: 38px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .chatTobottom { height: 25px; width: 25px; background: #1065A6 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyNC4zLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQoJLnN0MHtmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03LjQsOC42bDQuNiw0LjZsNC42LTQuNkwxOCwxMGwtNiw2bC02LTZMNy40LDguNnoiLz4NCjwvc3ZnPg0K); background-repeat: no-repeat; background-size: contain; border-radius: 50%; border: 0; padding: 0; margin: 0; cursor: pointer; } .userAvatar { aspect-ratio: 1/1; width: 22px; height: 22px; border-radius: 100%; } @media (min-width: 768px) { .userAvatar { width: 36px; height: 36px; } } .userName { font-size: 14px; font-weight: 500; } @media (min-width: 768px) { .userName { font-size: 18px; } } .upload__box { position: relative; display: block; height: 134px; background-color: #C2C2C2; border-radius: 6px; } @media (max-width: 320px) { .upload__box { height: 126px; } } @media (min-width: 768px) { .upload__box { height: 170px; } } .upload__box:after { content: ""; position: absolute; top: 45%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 31px; height: 25px; z-index: 0; background: url(../images/upload.png) 0% 0%/contain no-repeat; } @media (min-width: 768px) { .upload__box:after { width: 60px; height: 50px; } } .upload__box input { cursor: pointer; position: relative; width: 100%; height: 100%; opacity: 0; z-index: 2; } .upload__preview { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; overflow: hidden; border-radius: 6px; z-index: 0; } .upload__preview:before { content: "CHOOSE PHOTO"; position: absolute; width: 130px; height: 26px; left: 50%; bottom: 20px; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 12px; font-size: 9px; font-weight: 400; color: #1065A6; background-color: #fff; -webkit-transition: background-color 150ms ease-in-out 0s; transition: background-color 150ms ease-in-out 0s; padding: 6px; text-align: center; z-index: 0; } @media (min-width: 768px) { .upload__preview:before { width: 190px; height: 44px; padding: 12px 10px; font-size: 14px; } } .upload__preview.js--no-default { z-index: 1; } .card { max-width: 354px; padding: 12px; background: #fff; border-radius: 14px; } @media (max-width: 768px) { .card { padding: 8px; border-radius: 10px; } } .cardImg { max-height: 229px; border-radius: 8px; overflow: hidden; } .cardImg img { -o-object-fit: cover; object-fit: cover; width: 100%; } @media (min-width: 768px) { .cardImg img { max-height: 145px; } } @media (max-width: 768px) { .cardImg img { max-height: 110px; } } .cardTitle { font-weight: 500; font-size: 16px; margin: 12px 8px; min-height: 65px; max-height: 65px; overflow: hidden; } @media (max-width: 768px) { .cardTitle { font-size: 11px; margin: 8px 8px 3px; min-height: 42px; max-height: 42px; } } .cardDate { color: #676767; font-size: 14px; margin: 0 8px; height: 20px; overflow: hidden; } @media (max-width: 768px) { .cardDate { font-size: 9px; height: auto; } } .cardDate .icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi40NDkiIGhlaWdodD0iMTUuNDUyIiB2aWV3Qm94PSIwIDAgMTYuNDQ5IDE1LjQ1MiI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSI+PHBhdGggZD0iTTE3LjYyLDExLjZ2OC4zNjRIMy42NjNWOWgxLjVWOEgzLjUzOWEuODg3Ljg4NywwLDAsMC0uODcyLjlWMjAuMDU4YS44ODcuODg3LDAsMCwwLC44NzIuOUgxNy43NDVhLjg4Ny44ODcsMCwwLDAsLjg3Mi0uOXYtOC45QTMuNzEzLDMuNzEzLDAsMCwxLDE3LjYyLDExLjZaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMi42NjYgLTUuNTA4KSIvPjxwYXRoIGQ9Ik0xMC42NjcsMTguNjY3aDF2MWgtMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03LjY3NiAtMTIuMTg3KSIvPjxwYXRoIGQ9Ik0xOC42NjcsMTguNjY3aDF2MWgtMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMi42ODUgLTEyLjE4NykiLz48cGF0aCBkPSJNMjYuNjY3LDE4LjY2N2gxdjFoLTFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTcuNjk0IC0xMi4xODcpIi8+PHBhdGggZD0iTTM0LjY2NywxOC42NjdoMXYxaC0xWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIyLjcwMyAtMTIuMTg3KSIvPjxwYXRoIGQ9Ik0xMC42NjcsMjUuMzMzaDF2MWgtMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03LjY3NiAtMTYuMzYxKSIvPjxwYXRoIGQ9Ik0xOC42NjcsMjUuMzMzaDF2MWgtMVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMi42ODUgLTE2LjM2MSkiLz48cGF0aCBkPSJNMjYuNjY3LDI1LjMzM2gxdjFoLTFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTcuNjk0IC0xNi4zNjEpIi8+PHBhdGggZD0iTTM0LjY2NywyNS4zMzNoMXYxaC0xWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTIyLjcwMyAtMTYuMzYxKSIvPjxwYXRoIGQ9Ik0xMC42NjcsMzJoMXYxaC0xWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcuNjc2IC0yMC41MzYpIi8+PHBhdGggZD0iTTE4LjY2NywzMmgxdjFoLTFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTIuNjg1IC0yMC41MzYpIi8+PHBhdGggZD0iTTI2LjY2NywzMmgxdjFoLTFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTcuNjk0IC0yMC41MzYpIi8+PHBhdGggZD0iTTM0LjY2NywzMmgxdjFoLTFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjIuNzAzIC0yMC41MzYpIi8+PHBhdGggZD0iTTEyLjUsNi42NTRhLjUuNSwwLDAsMCwuNS0uNVYzLjE2NWEuNS41LDAsMSwwLTEsMFY2LjE1NkEuNS41LDAsMCwwLDEyLjUsNi42NTRaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOC41MSAtMi4xNjgpIi8+PHBhdGggZD0iTTIyLjA2OSw4SDE3LjMzM1Y5aDQuODc1YTMuNzMzLDMuNzMzLDAsMCwxLS4xNC0xWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTExLjg1IC01LjUwOCkiLz48ZWxsaXBzZSBjeD0iMi40OTIiIGN5PSIyLjQ5MiIgcng9IjIuNDkyIiByeT0iMi40OTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjQ2NSAwKSIvPjwvZz48L3N2Zz4="); } .cardTime .icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNi41OTgiIGhlaWdodD0iMTYuNTk4IiB2aWV3Qm94PSIwIDAgMTYuNTk4IDE2LjU5OCI+PHBhdGggZD0iTTIyLjAzNyw5LjUxOWEuNTE5LjUxOSwwLDAsMC0xLjAzNywwdjUuNzA1YS41MTkuNTE5LDAsMCwwLC4yNjEuNDVsMy42MzEsMi4wNzVhLjUxOS41MTksMCwwLDAsLjUxNS0uOWwtMy4zNjktMS45MjVaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTMuNzM5IC01Ljg4OCkiLz48cGF0aCBkPSJNOC4zLDE2LjZBOC4zLDguMywwLDEsMCwwLDguMyw4LjMsOC4zLDAsMCwwLDguMywxNi42Wk0xNS41Niw4LjNBNy4yNjEsNy4yNjEsMCwxLDEsOC4zLDEuMDM3LDcuMjYxLDcuMjYxLDAsMCwxLDE1LjU2LDguM1oiLz48L3N2Zz4="); } .cardPrice { margin: 8px 8px 12px; font-size: 18px; font-weight: bold; } @media (max-width: 768px) { .cardPrice { font-size: 14px; } } .cardLocation .icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMy45MTciIGhlaWdodD0iMTcuNzEzIiB2aWV3Qm94PSIwIDAgMTMuOTE3IDE3LjcxMyI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAwKSI+PHBhdGggZD0iTTE5LjY2MywxOC4zMjZhMy4xNjMsMy4xNjMsMCwxLDEsMy4xNjMtMy4xNjNBMy4xNjMsMy4xNjMsMCwwLDEsMTkuNjYzLDE4LjMyNlptMC01LjA2MWExLjksMS45LDAsMSwwLDEuOSwxLjlBMS45LDEuOSwwLDAsMCwxOS42NjMsMTMuMjY1WiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEyLjcwNCAtOC4yMDQpIi8+PHBhdGggZD0iTTE0LjQ1OSwyMC43MTMsOS4xMjIsMTQuNDE5cS0uMTExLS4xNDItLjIyLS4yODVBNi44ODksNi44ODksMCwwLDEsNy41LDkuOTU5YTYuOTU5LDYuOTU5LDAsMSwxLDEzLjkxNywwLDYuODg1LDYuODg1LDAsMCwxLTEuNCw0LjE3M3Ywcy0uMTkuMjQ5LS4yMTguMjgzWk05LjkxMSwxMy4zNzJzLjE0OC4xOTUuMTgyLjIzN2w0LjM2Niw1LjE0OUwxOC44MywxMy42Yy4wMjgtLjAzNS4xNzYtLjIzMS4xNzctLjIzMmE1LjYzMSw1LjYzMSwwLDAsMCwxLjE0Ni0zLjQxMSw1LjY5Myw1LjY5MywwLDEsMC0xMS4zODcsMCw1LjYzMyw1LjYzMywwLDAsMCwxLjE0NywzLjQxM1oiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03LjUgLTMpIi8+PC9nPjwvc3ZnPg=="); } .cardAction { margin: 0 8px; } .cardAction__btn { cursor: pointer; width: 100%; border: none; background: #1065a6; color: #fff; text-transform: uppercase; font-size: 12px; padding: 10px 12px; border-radius: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 768px) { .cardAction__btn { font-size: 10px; } } @media (min-width: 768px) { .cardAction__btn:hover { background: #00cbeb; color: #fff; } } .cardCaption { cursor: pointer; } .cardCaption b { font-size: 15px; } .cardCaption p { font-size: 13px; } .cardCaption li { font-size: 13px; } .cardCaption ol, .cardCaption ul { margin-left: 15px; } .cardCaption ol li, .cardCaption ul li { line-height: 15px; margin: 4px 0; } .cardCaption ul { list-style: disc; } .cardCaption ol { list-style: decimal; } .card--ticketDetails { width: 100%; max-width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 40px; padding: 26px; border-radius: 10px; } @media (max-width: 768px) { .card--ticketDetails { padding: 0px; } } .card--ticketDetails .cardTitle { padding-right: 20px; margin: 12px 0; max-height: 226px; height: auto; } @media (max-width: 768px) { .card--ticketDetails .cardTitle { font-size: 16px; padding-right: 0; height: auto; max-height: 100%; } } .card--ticketDetails .cardImg { max-height: 402px; border-radius: 10px; } @media (min-width: 768px) { .card--ticketDetails .cardLeft img { max-height: 397px; } } @media (max-width: 768px) { .card--ticketDetails .cardLeft img { max-height: 300px; } } .card--ticketDetails .cardCaption { max-height: 251px; overflow-y: auto; overflow-x: hidden; margin-top: 15px; padding-right: 15px; } @media (max-width: 768px) { .card--ticketDetails .cardCaption { margin: 15px; } } .card--ticketDetails .cardCaption::-webkit-scrollbar-track { border-radius: 4px; background-color: #e8e8e8; } .card--ticketDetails .cardCaption::-webkit-scrollbar { width: 8px; background-color: #e8e8e8; } .card--ticketDetails .cardCaption::-webkit-scrollbar-thumb { border-radius: 4px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #1065a6; } .card--ticketDetails .cardLeft { width: 568px; position: relative; } @media (max-width: 768px) { .card--ticketDetails .cardLeft { width: 100%; } } .card--ticketDetails .cardRight { width: 320px; position: absolute; right: -352px; top: 0; } @media (max-width: 768px) { .card--ticketDetails .cardRight { position: relative; right: 0; width: 100%; padding: 0 15px; } } .card--ticketDetails .cardRight .cardCaption { margin-top: 0; padding-right: 0; overflow: hidden; } @media (max-width: 768px) { .card--ticketDetails .cardRight .cardCaption { margin: 0; } } .card--ticketDetails .cardRight .cardAction { margin: 0; } .card--ticketDetails .cardTimeplace { margin: 15px 0; } .card--ticketDetails .cardTimeplace .cardDate, .card--ticketDetails .cardTimeplace .cardTime, .card--ticketDetails .cardTimeplace .cardLocation { margin: 0; color: #1065a6; font-size: 14px; margin: 8px 0; font-weight: 400; } .card--ticketDetailsPemesanan { width: 600px; max-width: none; margin: 40px auto; padding: 30px; } @media (max-width: 768px) { .card--ticketDetailsPemesanan { padding: 11px 16px; overflow: hidden; } .card--ticketDetailsPemesanan .classForm__title { margin-top: 4px; } } .card--ticketDetailsPemesanan-pembayaran .cardTicket__header { padding: 12px 16px; } .card--ticketDetailsPemesanan-pembayaran .classForm__title { margin-top: 0; } .card--ticketDetailsPemesanan-pembayaran .-hr { margin-left: -30px; margin-right: -30px; border-bottom: 0; border-top: 1px solid #acacac; } @media (max-width: 768px) { .card--ticketDetailsPemesanan-pembayaran { padding: 20px 16px; margin: 110px auto; } } @media (max-width: 376px) { .card--ticketDetailsPemesanan-pembayaran { padding: 11px 16px; margin: 40px auto; } } .cardTicket { background: #ebf5ff; border: 1px solid #1065a6; border-radius: 8px; margin-bottom: 20px; } .cardTicket__cropingCircle { content: ""; width: 20px; height: 20px; background: #fff; border-radius: 50%; position: absolute; bottom: -10px; border: 1px solid #1065a6; } .cardTicket__cropingCircle::after { top: -1px; content: ""; width: 20px; height: 20px; background: #fff; position: absolute; } .cardTicket__cropingCircle--left { left: -10px; } .cardTicket__cropingCircle--left::after { left: -57%; } .cardTicket__cropingCircle--right { right: -10px; } .cardTicket__cropingCircle--right::after { right: -57%; } .cardTicket__header { padding: 20px; font-size: 13px; border-bottom: 1px dashed #1065a6; position: relative; } @media (max-width: 768px) { .cardTicket__header { font-size: 12px; } } .cardTicket__content { padding: 20px; font-size: 13px; } .cardTicket__content b { font-size: 13px; } @media (max-width: 768px) { .cardTicket__content b { font-size: 12px; } } @media (max-width: 768px) { .cardTicket__content { font-size: 12px; } } .cardTicket__count { background: transparent; border: none; text-align: right; } .cardTicket__footer { padding: 0 20px; font-size: 13px; font-weight: 700; } .cardTicket__footer > div { padding: 12px 0; } .cardTicket__footer hr { padding: 0; margin: 0; border-bottom: 0; border-top: 1px dashed #1065a6; } @media (max-width: 768px) { .cardTicket__footer { font-size: 14px; } } .cardTicket .row { margin: 0 0 6px; } .cardTicket .row:last-child { margin-bottom: 0; } .cardTicket--detail { margin-bottom: 8px; } .cardTicket--detail .cardTicket__right { width: 140px; } .cardTicket .--detilHarga { font-size: 16px; font-weight: bold; background: none; height: auto; border: none; padding: 0; margin: 3px 0; outline: none; } .icon { background-repeat: no-repeat; background-size: contain; margin-right: 12px; } .game { position: relative; } .gameWrap { margin-top: 80px; padding-bottom: 30px; } @media (min-width: 768px) { .gameWrap { margin-top: 130px; } } .game iframe { width: 100%; border-radius: 12px; } .gameCaption { margin-left: 180px; margin-bottom: 10px; text-transform: uppercase; font-size: 17px; font-weight: 600; color: #fff; } @media (min-width: 768px) { .gameCaption { font-size: 28px; margin-left: 320px; margin-right: 10px; } } .gameImg { position: absolute; top: -30px; left: -15px; z-index: -1; } @media (min-width: 768px) { .gameImg { top: -80px; left: 10px; } } .gameBg { max-height: unset; padding: 10px 10px 40px; border: 1px solid #D6D6C6; border-radius: 14px; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); background: #c3f3f6; background: -moz-linear-gradient(180deg, #c3f3f6 0%, #fae8ff 100%); background: -webkit-linear-gradient(180deg, #c3f3f6 0%, #fae8ff 100%); background: -webkit-gradient(linear, left top, left bottom, from(#c3f3f6), to(#fae8ff)); background: linear-gradient(180deg, #c3f3f6 0%, #fae8ff 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c3f3f6", endColorstr="#fae8ff", GradientType=1); } @media (min-width: 768px) { .gameBg { padding: 0 10px 0; border: 0; background: none; -webkit-box-shadow: none; box-shadow: none; } } .gameBg__wrap { margin-top: 20px; padding: 0; background: none; -webkit-box-shadow: none; box-shadow: none; } @media (min-width: 768px) { .gameBg__wrap { padding: 10px 10px 40px; border: 1px solid #D6D6C6; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); background: #c3f3f6; background: -moz-linear-gradient(180deg, #c3f3f6 0%, #fae8ff 100%); background: -webkit-linear-gradient(180deg, #c3f3f6 0%, #fae8ff 100%); background: -webkit-gradient(linear, left top, left bottom, from(#c3f3f6), to(#fae8ff)); background: linear-gradient(180deg, #c3f3f6 0%, #fae8ff 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c3f3f6", endColorstr="#fae8ff", GradientType=1); } } .gamePrice { list-style-type: none; font-size: 14px; font-weight: 700; color: #F64E76; } @media (min-width: 768px) { .gamePrice { font-size: 17px; } } .gamePrice li { padding-left: 10px; } .gamePrice li:before { content: "-"; text-indent: -10px; display: inline-block; } .gameLeaderboard { padding: 10px; max-width: 585px; margin-top: 20px; margin-left: auto; margin-right: auto; border-radius: 14px; background: #2d77b2; background: -moz-linear-gradient(180deg, #2d77b2 0%, #44defc 20%, #89ceb6 50%, #f89a24 100%); background: -webkit-linear-gradient(180deg, #2d77b2 0%, #44defc 20%, #89ceb6 50%, #f89a24 100%); background: -webkit-gradient(linear, left top, left bottom, from(#2d77b2), color-stop(20%, #44defc), color-stop(50%, #89ceb6), to(#f89a24)); background: linear-gradient(180deg, #2d77b2 0%, #44defc 20%, #89ceb6 50%, #f89a24 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d77b2", endColorstr="#f89a24", GradientType=1); } @media (min-width: 768px) { .gameLeaderboard { padding: 15px; margin-top: 40px; } } .gameLeaderboard__box, .gameLeaderboard__title { padding: 10px 5px; border-radius: 14px; background: #2d77b2; background: -moz-linear-gradient(180deg, #2d77b2 0%, #44defc 100%); background: -webkit-linear-gradient(180deg, #2d77b2 0%, #44defc 100%); background: -webkit-gradient(linear, left top, left bottom, from(#2d77b2), to(#44defc)); background: linear-gradient(180deg, #2d77b2 0%, #44defc 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#2d77b2", endColorstr="#44defc", GradientType=1); } @media (min-width: 768px) { .gameLeaderboard__box, .gameLeaderboard__title { padding: 20px; } } .gameLeaderboard__title { position: relative; border-radius: 35px; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; font-weight: 700; line-height: 22px; color: #fff; } @media (min-width: 768px) { .gameLeaderboard__title { font-size: 22px; } } .gameLeaderboard__img { position: absolute; max-width: 50px; bottom: -16px; left: 0; } @media (min-width: 768px) { .gameLeaderboard__img { max-width: 60px; } } .gameLeaderboard__img--big { max-width: 220px; bottom: 10px; left: unset; right: 20px; } .gameWinner { margin-left: 5px; margin-right: 5px; word-wrap: break-word; word-break: break-word; } @media (min-width: 768px) { .gameWinner { margin-left: 20px; margin-right: 20px; } } .gameWinner__bg { margin-top: 6px; position: relative; } .gameWinner__bg:before { content: ''; position: absolute; left: -4px; top: -4px; width: 67px; height: 67px; border-radius: 50%; background: #8321cb; background: -moz-linear-gradient(230deg, #8321cb 0%, #3f0c80 20%, #5840ca 80%, #6656de 86%, #7f7cff 100%); background: -webkit-linear-gradient(230deg, #8321cb 0%, #3f0c80 20%, #5840ca 80%, #6656de 86%, #7f7cff 100%); background: linear-gradient(230deg, #8321cb 0%, #3f0c80 20%, #5840ca 80%, #6656de 86%, #7f7cff 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#8321cb", endColorstr="#7f7cff", GradientType=1); } @media (min-width: 768px) { .gameWinner__bg:before { left: -4.5px; top: -4px; width: 98px; height: 98px; } } .gameWinner__bg img { position: relative; z-index: 1; } .gameWinner__name { height: auto; max-height: 28px; overflow: hidden; font-size: 10px; font-weight: 700; color: #1065A6; } @media (min-width: 768px) { .gameWinner__name { font-size: 11px; height: auto; max-height: 30px; overflow: hidden; } } .gameWinner__point { letter-spacing: .5px; font-size: 16px; font-weight: 700; line-height: 25px; color: #F64E76; } @media (min-width: 768px) { .gameWinner__point { font-size: 21px; } } .gameWinner__ava { width: 60px; height: 60px; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } @media (min-width: 768px) { .gameWinner__ava { width: 90px; height: 90px; } } .gameWinner__top .gameWinner { width: 80px; } @media (min-width: 768px) { .gameWinner__top .gameWinner { width: 130px; } } @media (min-width: 768px) { .gameWinner__top .gameWinner:nth-child(2) { max-width: 120px; } } .gameWinner__top .gameWinner:nth-child(2) .gameWinner__ava { width: 80px; height: 80px; } @media (min-width: 768px) { .gameWinner__top .gameWinner:nth-child(2) .gameWinner__ava { width: 120px; height: 120px; } } .gameWinner__top .gameWinner:nth-child(2) .gameWinner__bg { margin-top: 10px; } .gameWinner__top .gameWinner:nth-child(2) .gameWinner__bg:before { content: ''; left: -4.5px; top: -4px; width: 88px; height: 88px; } @media (min-width: 768px) { .gameWinner__top .gameWinner:nth-child(2) .gameWinner__bg:before { left: -5px; top: -5px; width: 130px; height: 130px; } } .gameWinner__bottom .gameWinner { background: #FFEFAF; margin: 10px 0; border-radius: 10px; padding: 14px; } .gameWinner__bottom .gameWinner__bg:before { content: none; } @media (min-width: 768px) { .gameWinner__bottom .gameWinner__bg:before { content: ''; left: -2px; top: -1px; width: 39px; height: 39px; } } .gameWinner__bottom .gameWinner__ava { width: 36px; height: 36px; } .gameWinner__bottom .gameWinner__wrap { width: 100%; } .gameWinner__bottom .gameWinner__point { font-size: 11px; font-weight: 700; line-height: 20px; color: #F64E76; } @media (min-width: 768px) { .gameWinner__bottom .gameWinner__point { font-size: 17px; } } .gameWinner__bottom .gameWinner__rank { font-size: 11px; font-weight: 700; line-height: 10px; color: #1065A6; margin-right: 5px; width: 17px; } @media (min-width: 768px) { .gameWinner__bottom .gameWinner__rank { font-size: 15px; margin-right: 20px; } } .gameWinner__bottom .gameWinner__name { margin-right: 20px; } .gameWinner__rank { font-size: 11px; font-weight: 700; line-height: 20px; color: #fff; } @media (min-width: 768px) { .gameWinner__rank { font-size: 20px; } } .spacePromo { overflow: hidden; } @media (max-width: 768px) { .spacePromo { opacity: 0; } } @media (max-width: 768px) { .spacePromo.slick-initialized { opacity: 1; } } .spacePromo__item { width: 1000px; height: 360px; position: relative; } @media (max-width: 768px) { .spacePromo__item { max-width: 100%; } } .spacePromo__item::before { position: absolute; content: attr(title); top: 0; left: 0; right: 0; width: 100%; height: 100%; background: #b8b8b8; font-size: 36px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #fff; z-index: -1; } @media (max-width: 768px) { .spacePromo__item::before { font-size: 9px; } } .spacePromo__item .slick-slide img { display: block; z-index: 2; position: relative; -o-object-fit: cover; object-fit: cover; } .floatpopup { position: fixed; z-index: 100; top: 0; width: 100vw; height: 100vh; background: rgba(57, 133, 229, 0.78); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .floatpopupContent { border: 11px solid #015eff; position: relative; border-radius: 20px; background: #015eff; min-height: 400px; max-height: 500px; width: 700px; } @media (max-width: 992px) { .floatpopupContent { border: 8px solid #015eff; border-radius: 8px; margin: 0 15px; width: 320px; min-height: 350px; max-height: 480px; } } .floatpopupContent__close { cursor: pointer; position: absolute; top: -27px; right: -27px; width: 33px; height: 33px; background-size: contain; background-repeat: no-repeat; } @media (max-width: 992px) { .floatpopupContent__close { top: -16px; right: -16px; width: 27px; height: 27px; } } .floatpopupContent__img { border-radius: 16px; overflow: hidden; display: block; } @media (max-width: 992px) { .floatpopupContent__img { border-radius: 8px; } } .floatpopupContent__img img { width: 100%; } .floatpopup .mobile { display: none; } @media (max-width: 768px) { .floatpopup .mobile { display: inline; } .floatpopup .desktop { display: none; } } .compeHeading { text-align: center; text-transform: uppercase; font-family: Pangolin, cursive; font-weight: 400; line-height: .92; margin: 0 auto; position: relative; z-index: 1; } @media (max-width: 768px) { .compeHeading { font-size: 14px; } } @media (min-width: 768px) { .compeHeading { font-size: 24px; } } .compeList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .compeItem { position: relative; width: 100%; } @media (max-width: 768px) { .compeItem { max-width: calc(100%/2 - 16px); margin: 10px 8px 0; } } @media (min-width: 769px) and (max-width: 1365px) { .compeItem { max-width: 220px; margin: 24px 12px 0; } } @media (min-width: 1366px) and (max-width: 1919px) { .compeItem { max-width: 250px; margin: 32px 18px 0; } } @media (min-width: 1920px) and (max-width: 2559px) { .compeItem { max-width: 278px; margin: 40px 24px 0; } } @media (min-width: 2560px) { .compeItem { max-width: 300px; margin: 40px 28px 0; } } .compeContent { position: relative; background: transparent; min-height: 218px; font-size: 19px; line-height: 1.1; font-weight: 700; color: #000; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 6px; } .compeContent .btnPrimary { max-width: 118px; max-height: 30px; font-size: 14px; font-weight: 400; line-height: 1; width: 100%; padding: 5px 12px; border-radius: 5px; } @media (max-width: 768px) { .compeContent { font-size: 12px; min-height: calc(100% - 100px); } } .compeTitle { font-family: Mogra, cursive; font-weight: 400; line-height: 1.12; color: #000; letter-spacing: -0.3px; text-transform: uppercase; } @media (max-width: 768px) { .compeTitle { font-size: 13px; } } @media (min-width: 768px) { .compeTitle { font-size: 32px; } } .compeTxt { font-family: Dekko, cursive; letter-spacing: -0.2px; font-weight: 400; line-height: 1.2; height: calc(1.2em * 4); } @media (min-width: 768px) { .compeTxt { font-size: 20px; } } .compeLink { display: inline-block; padding: 7px 17px; margin-top: 12px; border-radius: 5px; background: #4F80FF; -webkit-box-shadow: 2px 2px 0px 0px #405AAF; box-shadow: 2px 2px 0px 0px #405AAF; text-transform: uppercase; font-size: 15px; font-weight: 700; color: #FAEB2C; } @media (max-width: 768px) { .compeLink { font-size: 12px; } } .compePrize { position: relative; max-width: 78%; margin: auto; background: transparent; border-radius: 7px; padding: 4px 8px; font-weight: 700; color: #FF0000; font-size: 21px; line-height: 1.05; letter-spacing: -0.2px; } @media (max-width: 768px) { .compePrize { font-size: 14px; max-width: 84%; padding: 4px 2px; } } .compePrize p { margin: 0; } .compePrize small { display: block; color: #000; } .compePrize small:first-child { font-size: 12px; line-height: 1.66; letter-spacing: -0.1px; text-transform: uppercase; } .compePrize small:last-child { font-weight: 400; font-size: 11px; letter-spacing: -0.1px; } @media (max-width: 768px) { .compePrize small:last-child { font-size: 7px; } } .compePrize .headingTitle { width: 440px; max-width: unset; } @media (max-width: 768px) { .compePrize .headingTitle { width: 100%; max-width: 300px; } } .compe .headingPrize b { font-size: 92px; } @media (max-width: 768px) { .compe .headingPrize b { font-size: 40px; } } .compe .headingPrize small { font-size: 25px; } @media (max-width: 768px) { .compe .headingPrize small { font-size: 12px; } } .sectionAbout { position: relative; top: -20px; z-index: 10; width: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(../images/2026/background-art-hitam.png); } @media (max-width: 768px) { .sectionAbout { background-image: url(../images/2026/background-art-hitam-m.png); } } @media (min-width: 769px) and (max-width: 1365px) { .sectionAbout { top: -70px; } } .aboutWrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding-top: 6%; padding-bottom: 6%; } @media (max-width: 768px) { .aboutWrap { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 12% 4%; } } .aboutPaper { position: relative; background: url(../images/2026/kertas-untuk-tentang-kompasiana.svg) no-repeat center; background-size: 100% 100%; color: #000; -webkit-box-sizing: border-box; box-sizing: border-box; } @media (min-width: 769px) and (max-width: 1365px) { .aboutPaper { width: 76%; top: 40px; margin-right: -3%; padding: 11% 6%; } } @media (min-width: 1366px) and (max-width: 1919px) { .aboutPaper { width: 74%; top: 48px; margin-right: -3%; padding: 7% 6%; } } @media (min-width: 1920px) and (max-width: 2559px) { .aboutPaper { width: 72%; top: 58px; margin-right: -3%; padding: 7% 6%; } } @media (min-width: 2560px) { .aboutPaper { width: 68%; top: 70px; margin-right: -3%; padding: 7% 6%; } } @media (max-width: 768px) { .aboutPaper { background-image: url(../images/2026/kertas-untuk-tentang-kompasiana-m.svg); background-size: 115% 100%; width: 100%; margin-right: 0; padding: 20% 9% 26%; } } .aboutPaper__title { margin: 0 0 20px; text-align: center; font-family: Mogra, cursive; font-weight: 400; text-transform: uppercase; color: #000; } @media (min-width: 769px) and (max-width: 1365px) { .aboutPaper__title { font-size: 22px; } } @media (min-width: 1366px) and (max-width: 1919px) { .aboutPaper__title { font-size: 26px; } } @media (min-width: 1920px) and (max-width: 2559px) { .aboutPaper__title { font-size: 32px; } } @media (min-width: 2560px) { .aboutPaper__title { font-size: 40px; } } @media (max-width: 768px) { .aboutPaper__title { font-size: 18px; margin-bottom: 14px; margin-top: 40px; } } .aboutPaper__text { margin: 0 0 16px; font-family: Dekko, cursive; line-height: 1.5; color: #000; } @media (min-width: 769px) and (max-width: 1365px) { .aboutPaper__text { font-size: 15px; } } @media (min-width: 1366px) and (max-width: 1919px) { .aboutPaper__text { font-size: 17px; } } @media (min-width: 1920px) and (max-width: 2559px) { .aboutPaper__text { font-size: 20px; } } @media (min-width: 2560px) { .aboutPaper__text { font-size: 24px; } } @media (max-width: 768px) { .aboutPaper__text { font-size: 15px; margin-bottom: 10px; } } .aboutPaper__text:last-child { margin-bottom: 0; } .aboutTitle { margin: 0; display: block; height: auto; } .aboutTitle--desktop { position: absolute; left: 2%; top: 64%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; } @media (max-width: 768px) { .aboutTitle--desktop { display: none; } } @media (min-width: 769px) and (max-width: 1365px) { .aboutTitle--desktop { max-width: 230px; } } @media (min-width: 1366px) and (max-width: 1919px) { .aboutTitle--desktop { max-width: 265px; } } @media (min-width: 1920px) and (max-width: 2559px) { .aboutTitle--desktop { max-width: 300px; } } @media (min-width: 2560px) { .aboutTitle--desktop { max-width: 360px; } } .aboutTitle--mobile { display: none; } @media (max-width: 768px) { .aboutTitle--mobile { display: block; float: left; margin: 2px 12px 4px 0; max-width: 120px; } } .award { position: relative; } .awardFrame__img { position: absolute; top: 30%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 0; pointer-events: none; width: calc((100vw - 1100px) / 2); max-width: 450px; height: auto; } .awardFrame__img--1 { left: 0; } .awardFrame__img--2 { right: 0; } @media (max-width: 768px) { .awardFrame__img { display: none !important; } } .award .footerBg__deco--left, .award .footerBg__deco--right { display: none; } .awardWrap { margin-top: 120px; padding-bottom: 60px; min-height: 100vh; } @media (min-width: 1026px) { .awardWrap { margin-top: 105px; } } @media (min-width: 768px) and (max-width: 1026px) { .awardWrap { margin-top: 230px; } } .awardCaption { position: relative; text-align: left; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; margin-bottom: 24px; } @media (max-width: 768px) { .awardCaption { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; row-gap: 12px; } .awardCaption .headingTitle { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .awardCaption .awardCaption__text { -ms-flex-preferred-size: 100%; flex-basis: 100%; width: 100%; max-width: 100%; } } @media (min-width: 768px) { .awardCaption { gap: 24px; margin-bottom: 30px; padding-left: 20px; padding-right: 20px; } } .awardCaption__pic { -ms-flex-negative: 0; flex-shrink: 0; } .awardCaption__body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } @media (max-width: 768px) { .awardCaption__body { display: contents; } } .awardCaption .headingTitle { max-width: -webkit-max-content; max-width: -moz-max-content; max-width: max-content; width: auto; margin: 0; padding: 0; position: relative; background: transparent; color: #000; font-family: Mogra, cursive; font-weight: 400; font-size: 22px; text-transform: uppercase; clip-path: none; top: 0; } @media (min-width: 768px) { .awardCaption .headingTitle { font-size: 28px; } } .awardCaption__text { margin: 0; padding: 0; max-width: 720px; background: transparent; -webkit-box-shadow: none; box-shadow: none; clip-path: none; color: #000; font-family: Pangolin, cursive; text-align: left; font-size: 15px; font-weight: 400; line-height: 22px; } @media (max-width: 768px) { .awardCaption__text { text-align: center; } } @media (min-width: 768px) { .awardCaption__text { font-size: 17px; font-weight: 400; line-height: 26px; } } .awardCaption .awardImg { z-index: 2; display: block; position: static; width: 100%; } @media (max-width: 768px) { .awardCaption .awardImg { max-width: 72px; } } @media (min-width: 769px) and (max-width: 1365px) { .awardCaption .awardImg { max-width: 140px; } } @media (min-width: 1366px) and (max-width: 1919px) { .awardCaption .awardImg { max-width: 160px; } } @media (min-width: 1920px) and (max-width: 2559px) { .awardCaption .awardImg { max-width: 187px; } } @media (min-width: 2560px) { .awardCaption .awardImg { max-width: 210px; } } .awardImg { position: static; max-width: none; } .award .buttonSdk { color: #FF0000; font-weight: 700; text-decoration: underline; font-family: Dekko, cursive; } .awardMenu { gap: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 990px) { .awardMenu { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .awardItem { margin-bottom: 10px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; } .awardItem::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 34px; background: #000; } .awardItem:first-child::before { display: none; } @media (max-width: 768px) { .awardItem { -webkit-box-flex: 30%; -ms-flex: 30%; flex: 30%; max-width: 33%; } .awardItem:nth-child(3n+1)::before { display: none; } } .awardItem:last-child { margin-bottom: 0; } .awardItem__title { text-transform: uppercase; font-family: Mogra, cursive; font-size: 12px; font-weight: 400; line-height: 1.15; color: #000; min-height: 2.3em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } @media (min-width: 768px) { .awardItem__title { font-size: 20px; } } .awardDate { font-family: Pangolin, cursive; font-size: 10px; font-weight: 400; color: #000; } @media (min-width: 768px) { .awardDate { font-size: 13px; } } .award .buttonAward.active .awardItem__title, .award .buttonAward.active .awardDate, .award .tablinks.active .awardItem__title, .award .tablinks.active .awardDate { color: #FF0000; } .awardDetail { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 20px 15px; background: #fff; border: 0; border-radius: 0; -webkit-box-shadow: none; box-shadow: none; } @media (min-width: 768px) { .awardDetail { padding: 30px 40px; } } .awardDetail__wrap { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } @media (min-width: 768px) { .awardDetail__wrap { -webkit-box-ordinal-group: unset; -ms-flex-order: unset; order: unset; } } .awardDetail__text { font-family: Dekko, cursive; font-size: 13px; font-weight: 400; line-height: 20px; color: #000; } @media (min-width: 768px) { .awardDetail__text { font-size: 16px; font-weight: 400; line-height: 24px; color: #000; } } .awardDetail ul { list-style-type: disc; margin-left: 18px; } .awardDetail__btn { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; display: inline-block; width: auto; -ms-flex-item-align: start; align-self: flex-start; margin-top: 20px; margin-bottom: 10px; padding: 12px 24px; border-radius: 8px; border: 1px solid #FF0000; background: transparent; text-transform: uppercase; text-align: center; font-family: Mogra, cursive; -webkit-animation: none; animation: none; font-size: 16px; font-weight: 400; color: #FF0000; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .awardDetail__btn:after { content: "AJUKAN NOMINASI SEKARANG!"; } @media (min-width: 768px) { .awardDetail__btn:after { content: none; } } @media (min-width: 768px) { .awardDetail__btn { margin-top: 30px; padding: 12px 28px; -webkit-box-ordinal-group: unset; -ms-flex-order: unset; order: unset; font-size: 18px; font-weight: 400; color: #FF0000; } } .awardDetail__btn:hover { color: #fff; background: #FF0000; } .awardDetail__btn span { display: none; } @media (min-width: 768px) { .awardDetail__btn span { display: inline-block; } } .awardDetail__misc { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; margin-top: 20px; font-family: Dekko, cursive; font-size: 13px; font-weight: 400; color: #000; } @media (min-width: 768px) { .awardDetail__misc { -webkit-box-ordinal-group: unset; -ms-flex-order: unset; order: unset; margin-top: 10px; } } .awardDetail__link { color: #FF0000; text-decoration: underline; } .awardTitle { font-family: Mogra, cursive; text-transform: uppercase; font-size: 18px; font-weight: 400; color: #000; } @media (min-width: 768px) { .awardTitle { font-size: 22px; font-weight: 400; color: #000; } } .awardRibbon { display: block; font-family: Mogra, cursive; font-weight: 400; line-height: 1.2; width: calc(100% - 10px); margin: 40px auto 20px; padding: 10px 15px; position: relative; text-align: center; text-transform: uppercase; color: #000; text-align: center; } @media (max-width: 768px) { .awardRibbon { font-size: 16px; } } @media (min-width: 769px) and (max-width: 1365px) { .awardRibbon { font-size: 18px; } } @media (min-width: 1366px) and (max-width: 1919px) { .awardRibbon { font-size: 20px; } } @media (min-width: 1920px) and (max-width: 2559px) { .awardRibbon { font-size: 22px; } } @media (min-width: 2560px) { .awardRibbon { font-size: 24px; } } @media (min-width: 768px) { .awardRibbon { width: auto; } } .winnerAward .nominee { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .winnerAward .winnerItem { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; margin: 0 10px 30px; background: transparent; } @media (min-width: 768px) { .winnerAward .winnerItem { width: calc(25% - 22px); } } @media (max-width: 768px) { .winnerAward .winnerItem { width: calc(50% - 20px); } } .winnerAward .nomineeItem { border: 0; } .winnerAward .nomineePhoto { width: 100% !important; max-width: none !important; aspect-ratio: 1 / 1; height: auto !important; overflow: hidden; } .winnerAward .nomineePhoto img { width: 100% !important; height: 100% !important; max-width: none; display: block; -o-object-fit: cover; object-fit: cover; -webkit-filter: grayscale(100%); filter: grayscale(100%); border: 0; } .winnerAward .winnerRibbon.winnerAward__ribbon { color: #000; font-weight: 400; } .winnerAward .winnerBox--left { width: 100%; text-align: center; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .winnerAward .winnerBox--right { width: 100%; -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .winnerAward .winnerBox__ribbon { font-family: Mogra, cursive; font-weight: 400; font-size: 16px; text-align: center; color: #000; margin-top: 4px; } .winnerAward .winnerBox__ribbon::before { display: none; content: none; } @media (min-width: 768px) { .winnerAward .winnerBox__ribbon { font-size: 20px; } } .winnerAward .winnerName { width: 100%; line-height: 1.2; background: transparent; color: #000; font-family: Pangolin, cursive; font-weight: 400; font-size: 18px; text-align: center; margin: 0; } @media (min-width: 768px) { .winnerAward .winnerName { font-size: 21px; } } .winnerAward__ribbon { margin-top: 30px; } .nominationWrap { margin-top: 125px; padding-bottom: 60px; min-height: 100vh; } .nomination .awardFrame__img { display: block; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: calc((100vw - 1100px) / 2); max-width: 450px; height: auto; } .nomination .awardFrame__img--1 { left: 0; } .nomination .awardFrame__img--2 { right: 0; } @media (max-width: 768px) { .nomination .awardFrame__img { display: none !important; } } .nominationCaption { font-size: 16px; font-weight: 600; line-height: #000; } .nominationCaption__text, .votingCaption__text { font-size: 13px; font-weight: 400; } @media (min-width: 768px) { .nominationCaption__text, .votingCaption__text { font-size: 16px; } } .nominationTitle, .votingTitle { text-transform: uppercase; font-size: 21px; } @media (min-width: 990px) { .nominationTitle, .votingTitle { font-size: 32px; } } .nominationMenu { padding-top: 40px; margin: 0 0 20px; width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (min-width: 990px) { .nominationMenu { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } } .nominationItem { text-align: center; margin: 10px 0; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; } .nominationItem::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 34px; background: #000; } .nominationItem:first-child::before { display: none; } @media (max-width: 768px) { .nominationItem { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .nominationItem:nth-child(2n+1)::before { display: none; } } .nominationLink { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; min-height: 48px; padding: 6px 10px; background: transparent; border: 0; text-transform: uppercase; font-family: Mogra, cursive; font-size: 12px; font-weight: 400; line-height: 1.2; color: #000; -webkit-transition: color 0.2s ease; -moz-transition: color 0.2s ease; -ms-transition: color 0.2s ease; -o-transition: color 0.2s ease; transition: color 0.2s ease; } @media (min-width: 768px) { .nominationLink { padding: 6px 20px; font-size: 18px; } } .nominationLink:hover, .nominationLink.active { color: #FF0000; } .nominationForm { max-width: 620px; margin: 30px auto 0; } .nominationForm__wrap { margin-top: 16px; margin-bottom: 16px; } .nominationForm__input, .triviaForm__input, .nostalgiaPopup__area { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; background: #fff; border: 0; border-radius: 0; outline: none; font-family: Pangolin, cursive; font-size: 15px; font-weight: 400; color: #000; } .nominationForm__input:focus, .triviaForm__input:focus, .nostalgiaPopup__area:focus { outline: 0; } .nominationForm__input ::-webkit-input-placeholder, .triviaForm__input ::-webkit-input-placeholder, .nostalgiaPopup__area ::-webkit-input-placeholder { color: #9a9a9a; } .nominationForm__input :-moz-placeholder, .triviaForm__input :-moz-placeholder, .nostalgiaPopup__area :-moz-placeholder { color: #9a9a9a; } .nominationForm__input ::-moz-placeholder, .triviaForm__input ::-moz-placeholder, .nostalgiaPopup__area ::-moz-placeholder { color: #9a9a9a; } .nominationForm__input :-ms-input-placeholder, .triviaForm__input :-ms-input-placeholder, .nostalgiaPopup__area :-ms-input-placeholder { color: #9a9a9a; } .nominationForm textarea.nominationForm__input, .nominationForm textarea.triviaForm__input, .nominationForm textarea.nostalgiaPopup__area { resize: vertical; min-height: 110px; } .nominationForm__radios { margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 10px; } .nominationForm__radio { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; cursor: pointer; font-family: Pangolin, cursive; font-size: 15px; font-weight: 400; color: #000; } .nominationForm__radio input[type="radio"] { -moz-appearance: none; appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; border: 1px solid #000; border-radius: 50%; background: #fff; -ms-flex-negative: 0; flex-shrink: 0; position: relative; cursor: pointer; } .nominationForm__radio input[type="radio"]:checked { border-color: #FF0000; } .nominationForm__radio input[type="radio"]:checked::after { content: ""; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #FF0000; } .nominationForm__btn { display: inline-block; width: 100%; margin-top: 20px; padding: 14px 24px; background: transparent; border: 1px solid #FF0000; border-radius: 8px; cursor: pointer; text-transform: uppercase; text-align: center; font-family: Pangolin, cursive; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } @media (max-width: 768px) { .nominationForm__btn { font-size: 16px; font-weight: 400; color: #FF0000; } } @media (min-width: 769px) and (max-width: 1365px) { .nominationForm__btn { font-size: 18px; font-weight: 400; color: #FF0000; } } @media (min-width: 1440px) { .nominationForm__btn { font-size: 20px; font-weight: 400; color: #FF0000; } } .nominationForm__btn:hover { background: #FF0000; color: #fff; } .nominationForm__misc { margin-top: 16px; text-align: center; font-family: Pangolin, cursive; font-size: 13px; font-weight: 400; color: #000; } .nominationLabel { font-family: Pangolin, cursive; font-size: 15px; font-weight: 400; color: #000; } .nominationPopup__title { text-transform: uppercase; } .donateTitle { font-size: 13px; font-weight: 500; } @media (min-width: 768px) { .donateTitle { font-size: 17px; } } .donateSponsor { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .donateSponsor .sponsorBox__caption { margin-top: 0; margin-bottom: 10px; } .donateDetail { font-size: 10px; font-weight: 500; } @media (min-width: 768px) { .donateDetail { font-size: 13px; } } .donateDetail__btn { margin-top: 10px; } .donateDetail__btn span { display: block; } .donateDetail__btn:after { content: none; } .donateDetail__trig { text-decoration: underline; color: #FF0000; } .donateDetail__popup { padding-right: 0; } .donateDetail__popup ol { padding-left: 35px; counter-reset: list; list-style: none; } @media (min-width: 768px) { .donateDetail__popup ol { padding-left: 60px; } } .donateDetail__popup li { counter-increment: list; position: relative; margin-top: 20px; margin-bottom: 20px; } .donateDetail__popup li:before { content: counter(list); margin-right: 10px; position: absolute; top: 0; right: 100%; width: 22px; height: 22px; padding: 3px 0; background: #1065A6; border-radius: 100%; text-align: center; font-size: 11px; font-weight: 500; color: #fff; } @media (min-width: 768px) { .donateDetail__popup li:before { width: 32px; height: 32px; top: -6px; padding: 6px 0; font-size: 15px; } } .donateCount { margin-top: 10px; font-size: 17px; font-weight: 600; } @media (min-width: 768px) { .donateCount { margin-top: 20px; font-size: 35px; } } .donateNum { margin-left: 2px; margin-right: 2px; padding: 4px 8px; background: #FFEFAF; border-radius: 8px; font-size: 18px; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } @media (min-width: 768px) { .donateNum { min-width: 52px; margin-left: 4px; margin-right: 4px; padding: 4px 12px; font-size: 41px; } } @media (min-width: 768px) and (max-width: 1026px) { .donateNum { min-width: 45px; font-size: 32px; } } .donate .space { display: inline-block; margin-left: 2px; margin-right: 2px; } @media (min-width: 768px) { .donate .space { margin-left: 6px; margin-right: 6px; } } .donateSuccess { border-radius: 9px; font-size: 11px; padding: 15px 10px; margin-top: 10px; background: #f8d2d8; background: -webkit-gradient(linear, left top, left bottom, from(#f8d2d8), color-stop(70%, #e7f2ab), to(#f5dc5f)); background: linear-gradient(180deg, #f8d2d8 0%, #e7f2ab 70%, #f5dc5f 100%); } @media (min-width: 768px) { .donateSuccess { font-size: 13px; margin-top: 20px; padding: 15px 20px; } } .donateSuccess .buttonVote { max-width: 300px; border-radius: 12px; } .donateSuccess__num { letter-spacing: .5px; font-size: 22px; font-weight: 700; } @media (min-width: 768px) { .donateSuccess__num { font-size: 25px; } } .donateSuccess__detail { padding-right: 0; } .donateSuccess__content { padding-bottom: 20px; padding-left: 10px; padding-right: 10px; } @media (min-width: 768px) { .donateSuccess__content { padding-left: 20px; padding-right: 20px; } } .votingWrap { margin-top: 120px; padding-bottom: 60px; min-height: 100vh; } .voting .awardFrame__img { display: block; top: 12%; -webkit-transform: none; transform: none; width: calc((100vw - 1100px) / 2); max-width: 450px; height: auto; } .voting .awardFrame__img--1 { left: 0; } .voting .awardFrame__img--2 { right: 0; } @media (max-width: 768px) { .voting .awardFrame__img { display: none !important; } } .voting .nominee { margin-left: 0; margin-right: 0; } .voting .nomineeItem { background: transparent; border: 0; padding-bottom: 0; } @media (min-width: 990px) { .voting .nomineeItem { border: 0; } } .voting .nomineePhoto { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; } .voting .nomineePhoto img { width: 100% !important; height: 100% !important; min-height: 0 !important; max-width: none; aspect-ratio: 1 / 1; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -webkit-filter: grayscale(100%); filter: grayscale(100%); display: block; } .voting .nomineeName { font-family: Pangolin, cursive; text-transform: none; color: #000; letter-spacing: 0; font-size: 16px; font-weight: 400; color: #000; } @media (min-width: 990px) { .voting .nomineeName { font-size: 18px; text-transform: none; } } .voting .awardCaption__text { text-align: center; } .voting .awardDetail__btn { -ms-flex-item-align: center; align-self: center; margin-left: auto; margin-right: auto; } .voting .awardDetail__misc { margin-top: 16px; } .voting .buttonVote { display: inline-block; width: auto; min-width: 120px; padding: 8px 24px; background: transparent; border: 1px solid #FF0000; border-radius: 8px; text-transform: uppercase; font-family: Pangolin, cursive; font-size: 13px; font-weight: 700; color: #FF0000; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .voting .buttonVote:hover { background: #FF0000; color: #fff; } .votingTitle { font-weight: 500; color: #000; } .votingCaption__text { font-weight: 500; color: #000; } .votingPopup__qt { padding: 20px 0 0; } @media (min-width: 768px) { .votingPopup__qt { padding: 20px 20px 0; } } .votingPopup__btn button { border-radius: 7px; width: 105px; height: 35px; position: relative; } @media (min-width: 768px) { .votingPopup__btn button { width: 120px; } } .votingPopup__btn .buttonClose { top: 0; right: 0; font-size: 13px; font-weight: 400; } .votingPopup__btn .buttonClose:after { content: none; } .nomineeContent { background: #fff; border: 0; border-radius: 12px; -webkit-box-shadow: none; box-shadow: none; padding: 30px; color: #000; max-width: 620px; } @media (max-width: 768px) { .nomineeContent { padding: 20px; } } .nomineeContent__ava { -ms-flex-negative: 0; flex-shrink: 0; } .nomineeContent__ava img { width: 120px; height: 120px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; border: 2px solid #fff; -webkit-box-shadow: 0 0 0 1px #e4e4e4; box-shadow: 0 0 0 1px #e4e4e4; } @media (max-width: 768px) { .nomineeContent__ava img { width: 84px; height: 84px; } } .nomineeContent__head { gap: 20px; } @media (max-width: 768px) { .nomineeContent__head { gap: 8px; } } .nomineeContent__profil { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: left; } .nomineeContent__name { font-family: Pangolin, cursive; } @media (max-width: 768px) { .nomineeContent__name { font-size: 17px; font-weight: 400; color: #000; } } @media (min-width: 768px) { .nomineeContent__name { font-size: 26px; font-weight: 400; color: #000; } } .nomineeContent__visit { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: auto; padding: 8px 20px; border: 1px solid #000; border-radius: 8px; text-transform: uppercase; font-family: Pangolin, cursive; font-size: 13px; font-weight: 400; color: #000; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .nomineeContent__visit .icon-user { -webkit-filter: brightness(0); filter: brightness(0); } .nomineeContent__visit:hover { background: #000; color: #fff; } .nomineeContent__visit:hover .icon-user { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .nomineeContent__text { font-family: Dekko, cursive; text-align: left; } @media (max-width: 768px) { .nomineeContent__text { font-size: 16px; font-weight: 400; line-height: 22px; color: #000; } } @media (min-width: 768px) { .nomineeContent__text { font-size: 17px; font-weight: 400; line-height: 24px; color: #000; } } .nomineeContent__foot { gap: 16px; } @media (max-width: 768px) { .nomineeContent__foot { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; gap: 16px; } } .nomineeContent .buttonVote { display: inline-block; width: auto; min-width: 160px; padding: 10px 24px; background: transparent; border: 1px solid #FF0000; border-radius: 8px; text-transform: uppercase; cursor: pointer; font-family: Pangolin, cursive; font-size: 14px; font-weight: 700; color: #FF0000; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .nomineeContent .buttonVote:hover { background: #FF0000; color: #fff; } @media (max-width: 768px) { .nomineeContent .buttonVote { width: 100%; } } .nomineeContent .share { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; } .nomineeContent .share__label { font-family: Pangolin, cursive; font-weight: 700; color: #000; } .nomineeContent .share__list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; margin: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .nomineeContent .share__list .shareIcon { width: 32px; height: 32px; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; } .nomineeContent .share__list .icon-fb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%231877F2'/%3E%3Cpath d='M21 20.5l.7-4.5H17.4v-2.9c0-1.2.6-2.4 2.6-2.4H22V7.9s-1.8-.3-3.5-.3c-3.6 0-5.9 2.2-5.9 6.1V16H8.9v4.5h3.7V32h4.8V20.5H21z' fill='%23fff'/%3E%3C/svg%3E"); } .nomineeContent .share__list .icon-wa-share { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%2325D366'/%3E%3Cpath d='M22.7 9.3C21 7.5 18.6 6.5 16.1 6.5c-5.2 0-9.4 4.2-9.4 9.4 0 1.7.4 3.3 1.3 4.7L6.5 25.5l5-1.3c1.4.8 2.9 1.2 4.5 1.2 5.2 0 9.4-4.2 9.4-9.4 0-2.5-1-4.9-2.7-6.7zM16.1 23.8c-1.4 0-2.8-.4-4-1.1l-.3-.2-3 .8.8-2.9-.2-.3c-.8-1.2-1.2-2.7-1.2-4.1 0-4.3 3.5-7.8 7.8-7.8 2.1 0 4 .8 5.5 2.3 1.5 1.5 2.3 3.4 2.3 5.5 0 4.4-3.6 7.8-7.8 7.8zm4.3-5.8c-.2-.1-1.4-.7-1.6-.8-.2-.1-.4-.1-.5.1-.2.2-.6.8-.7.9-.1.1-.3.2-.5.1-.2-.1-1-.4-1.9-1.2-.7-.6-1.2-1.4-1.3-1.6-.1-.2 0-.4.1-.5.1-.1.2-.3.4-.4.1-.1.2-.2.2-.4.1-.1 0-.3 0-.4-.1-.1-.5-1.3-.7-1.7-.2-.5-.4-.4-.5-.4h-.5c-.2 0-.4.1-.6.3-.2.2-.8.8-.8 1.9s.8 2.2.9 2.4c.1.2 1.6 2.5 3.9 3.4.5.2 1 .4 1.3.5.6.2 1.1.2 1.5.1.5-.1 1.4-.6 1.6-1.1.2-.6.2-1 .1-1.1-.1-.2-.2-.2-.4-.3z' fill='%23fff'/%3E%3C/svg%3E"); } .nomineeContent .share__list .icon-tw, .nomineeContent .share__list .icon-x { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23000'/%3E%3Cpath d='M17.8 14.8L23.5 8h-1.9l-4.6 5.4L13.1 8H8l6 8.7L8 24h1.9l4.9-5.7 3.9 5.7H24l-6.2-9.2zm-1.7 2l-.6-.8-4.8-6.9h2.1l3.7 5.3.6.8 4.8 6.9h-2.1l-3.9-5.6z' fill='%23fff'/%3E%3C/svg%3E"); } @media (max-width: 768px) { .nomineeContent .share { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .votingSuccess { padding-left: 40px; padding-right: 40px; } @media (max-width: 768px) { .votingSuccess { padding-left: 28px; padding-right: 28px; } } .votingSuccess__text { font-family: Pangolin, cursive; } .loungeCaption br { display: inline-block; } @media (min-width: 768px) { .loungeCaption br { display: none; } } .loungeTitle { font-family: Mogra, cursive; font-size: 20px; font-weight: 400; line-height: 1.3; color: #000; } @media (min-width: 768px) { .loungeTitle { font-size: 26px; } } .loungeBtn__wrap { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .loungeContent p { font-family: Dekko, cursive; font-size: 16px; font-weight: 400; line-height: 1.4; color: #000; } .loungeImg { position: relative; z-index: 2; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 112px; } @media (max-width: 990px) { .loungeImg { width: 75px; } } .loungeList { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-right: 0; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (min-width: 768px) { .loungeList { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 20px; } } .loungeItem { width: 100%; gap: 12px; margin-bottom: 10px; } .loungeItem:last-child { margin-bottom: 10px; } @media (min-width: 768px) { .loungeItem { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } @media (max-width: 768px) { .loungeItem { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .loungeItem__img { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } @media (min-width: 768px) { .loungeItem__img { width: 388px; max-width: 388px; max-height: none; aspect-ratio: 388/259; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } } @media (max-width: 768px) { .loungeItem__img { width: 100%; max-width: 100%; aspect-ratio: 388/259; max-height: none; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } } .regPopup--lounge .loungeRegHead { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 4px; } @media (max-width: 768px) { .regPopup--lounge .loungeRegHead { gap: 2px; } } .regPopup--lounge .loungeRegHead__icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: block; height: auto; } @media (max-width: 768px) { .regPopup--lounge .loungeRegHead__icon { width: 56px; } } @media (min-width: 768px) { .regPopup--lounge .loungeRegHead__icon { width: 78px; } } .regPopup--lounge .headingTitle { width: auto; max-width: none; margin: 0; padding: 0; top: 0; left: 0; right: auto; background: transparent; clip-path: none; text-align: left; color: #000; } @media (max-width: 768px) { .regPopup--lounge .headingTitle { font-size: 17px; } } @media (min-width: 768px) { .regPopup--lounge .headingTitle { font-size: 26px; } } .regPopup--lounge .boxOpening__lead { max-width: 560px; margin-left: auto; margin-right: auto; } .regPopup--lounge .regForm__note { display: block; margin-top: 8px; font-family: Pangolin, cursive; font-weight: 400; line-height: 1.35; color: #000; } @media (max-width: 768px) { .regPopup--lounge .regForm__note { font-size: 11px; } } @media (min-width: 768px) { .regPopup--lounge .regForm__note { font-size: 13px; } } .regPopup--lounge .loungeReg__submit { display: block; width: 100%; max-width: 220px; margin: 10px auto 0; } .regCaptcha { max-width: 360px; margin: 0 auto; } .regCaptcha__caption { margin-bottom: 8px; font-family: Pangolin, cursive; font-weight: 400; color: #000; } @media (max-width: 768px) { .regCaptcha__caption { font-size: 11px; } } @media (min-width: 768px) { .regCaptcha__caption { font-size: 13px; } } .regCaptcha__box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid #d3d3d3; border-radius: 3px; } .regCaptcha__check { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; cursor: pointer; font-family: Pangolin, cursive; font-weight: 400; color: #000; } @media (max-width: 768px) { .regCaptcha__check { font-size: 12px; } } @media (min-width: 768px) { .regCaptcha__check { font-size: 14px; } } .regCaptcha__check input[type="checkbox"] { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 24px; height: 24px; margin: 0; cursor: pointer; } .regCaptcha__brand { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; font-family: Roboto, sans-serif; color: #9aa0a6; } .regCaptcha__brandIcon { width: 32px; height: 32px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3.2-6.9'/%3E%3Cpolyline points='21 3 21 9 15 9'/%3E%3C/svg%3E"); } .regCaptcha__brandName { margin-top: 2px; font-size: 10px; } .regCaptcha__brandLink { font-size: 8px; } @media (max-width: 768px) { .regCaptcha { max-width: 100%; } .regCaptcha__box { padding: 10px 12px; } .regCaptcha__brandIcon { width: 26px; height: 26px; } } .stage { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 1026px) { .stage { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .stageMain .adv { display: none; } .stageWrap { margin-top: 46px; padding-bottom: 30px; } @media (min-width: 768px) and (max-width: 1026px) { .stageWrap { margin-top: 64px; } } .stageVid { width: 100%; } .stageVid video, .stageVid iframe { width: 100%; height: calc(100vh - 46px); } @media (max-width: 1026px) { .stageVid video, .stageVid iframe { height: calc(100vh - (46px + 36px + 20px + 103px + 20px)); } } @media (min-width: 768px) and (max-width: 1026px) { .stageVid video, .stageVid iframe { height: calc(100vh - (64px + 36px + 20px + 103px + 20px)); } } .stageChat { padding-top: 66px; margin-left: 10px; margin-right: 10px; } @media (min-width: 768px) { .stageChat { padding-top: 0; margin-left: 20px; margin-right: 20px; } } @media (min-width: 1026px) { .stageChat { width: 283px; } } .stageTitle { font-size: 13px; } .stageCaption { letter-spacing: .5px; font-size: 18px; font-weight: 400; color: #fff; } @media (min-width: 1026px) { .stageCaption { font-size: 24px; } } @media (min-width: 768px) { .stageContainer { margin-left: 30px; margin-right: 30px; padding: 0; } } .stageBox { padding: 12px 10px 18px; background: #fff; border-radius: 9px; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } @media (min-width: 768px) { .stageBox { padding: 18px 20px; } } .stageBox .sponsorBox { margin-top: 0; } .stageBox .advItem:hover.advItem--big { width: 46px; height: 46px; } .stagePlay { position: absolute; top: 0; margin-left: 10px; margin-right: 10px; width: calc(100% - 20px); padding: 9px 48px; height: 36px; letter-spacing: 1.6px; text-transform: uppercase; background: #00CBEB; border-radius: 8px; font-size: 14px; font-weight: 400; color: #fff; } @media (min-width: 768px) { .stagePlay { position: relative; width: auto; margin-left: 30px; margin-right: 30px; } } .stagePlay:hover { background: #1065A6; } .stageCol { position: relative; } .stageContent { max-height: unset; } .nostalgiaItem { background: #DDF7F9; } .nostalgiaItem--booth { background: #fff; } .nostalgiaItem--booth-detail { background: #E2FFF6; } .nostalgiaItem__detail { position: relative; z-index: 3; width: 100%; background: #FFF8E4; } @media (min-width: 768px) { .nostalgiaItem__detail { padding: 30px; } } .nostalgiaCaption { background: #fff; padding: 15px; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); font-size: 11px; font-weight: 500; } @media (min-width: 768px) { .nostalgiaCaption { padding: 30px; border-radius: 27px; font-size: 13px; } } .nostalgiaCaption--booth { background: #2F59F4; clip-path: polygon(98% 0, 99% 89%, 87% 100%, 2% 100%, 0% 48%, 2% 4%); max-width: 750px; margin: auto; padding: 50px 50px 30px; text-align: center; color: #fff; } .nostalgiaCaption--booth .buttonUpload { background: #FFDB62; color: #2F59F4; margin: 20px auto 0; } .nostalgiaTitle { text-align: center; margin-left: 30px; clip-path: polygon(95% 0, 99% 87%, 87% 100%, 2% 100%, 0% 48%, 2% 15%); background: #FF5F7B; padding: 10px 50px; z-index: -1; position: relative; display: inline-block; } @media (min-width: 768px) { .nostalgiaTitle { text-align: left; margin-left: 100px; } } @media (max-width: 768px) { .nostalgiaTitle { text-align: left; margin-left: 100px; } } .nostalgiaImg { top: -20px; max-width: 140px; } @media (min-width: 768px) { .nostalgiaImg { max-width: 129px; top: -42px; left: 25px; width: auto; } } @media (max-width: 768px) { .nostalgiaImg { max-width: 92px; width: auto; top: -18px; left: 60px; } } .nostalgiaThumb { position: relative; font-size: 14px; font-weight: 500; color: #1065A6; } @media (min-width: 768px) { .nostalgiaThumb { font-size: 15px; } } .nostalgiaIcon { width: 14px; height: 14px; margin-right: 6px; background-size: contain; vertical-align: middle; } .nostalgiaLike { position: relative; } .nostalgiaLike:after { content: '|'; position: relative; margin-left: 8px; margin-right: 8px; display: inline-block; color: #202020; } .nostalgiaTooltip { width: 89px; bottom: 30px; left: 8px; text-transform: none; font-size: 9px; font-weight: 400; color: #fff; } @media (min-width: 768px) { .nostalgiaTooltip { width: 110px; left: -8px; font-size: 11px; } } .nostalgiaModal { margin-top: 0; } .nostalgiaPopup { min-height: 360px; } @media (min-width: 768px) { .nostalgiaPopup { min-height: 406px; } } .nostalgiaPopup__area { font-size: 13px; font-weight: 500; margin-bottom: 0; } @media (min-width: 768px) { .nostalgiaPopup__area { font-size: 15px; } } .nostalgiaPopup__misc { font-size: 15px; font-weight: 600; } .nostalgiaPopup__detail { padding-right: 0; } @media (min-width: 768px) { .nostalgiaPopup__detail { min-width: 400px; } } @media (min-width: 768px) { .nostalgiaPopup .buttonUpload { margin: 10px auto; } } .nostalgiaPopup__content { padding-bottom: 20px; } .nostalgiaPopup__content--booth { background: #FFF8E4; border: 1px solid #4974B5; } .nostalgiaPopup__content--booth .buttonUpload { background: #1065A6; } .nostalgiaChat { max-height: unset; padding-right: 0; } @media (min-width: 768px) { .nostalgiaChat { padding-right: 10px; max-height: 170px; } } .nostalgiaWrap__col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 768px) { .nostalgiaWrap__col { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } .nostalgiaWrap--right { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } @media (min-width: 768px) { .nostalgiaWrap--right { margin-left: 15px; max-width: 300px; } } @media (min-width: 768px) { .nostalgiaWrap--right .nostalgiaContent { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } @media (min-width: 768px) { .nostalgiaWrap--right .nostalgiaChat { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; max-height: 325px; } } .nostalgiaArea { border: 1px solid #202020; } .photoboothImg { position: absolute; top: -28px; left: 25px; width: 80px; z-index: -1; } @media (min-width: 768px) { .photoboothImg { top: -60px; left: 35px; width: 135px; z-index: -1; } } @media (min-width: 768px) { .pagePhotobooth .loungeItem { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: calc(33.33% - 20px); -ms-flex: calc(33.33% - 20px); flex: calc(33.33% - 20px); gap: 0; } } .pagePhotobooth .misterychalangeLogo .nostalgiaImg { left: -59px; top: -33px; max-width: 190px; } @media (max-width: 768px) { .pagePhotobooth .misterychalangeLogo .nostalgiaImg { left: -120px; top: -33px; max-width: 180px; } } .pagePhotobooth .boothHead { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 20px; } @media (max-width: 768px) { .pagePhotobooth .boothHead { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; text-align: center; } } .pagePhotobooth .boothHead__icon { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; display: block; -ms-flex-item-align: center; align-self: center; } .pagePhotobooth .boothHead__icon img { display: block; width: 100%; max-width: 150px; height: auto; position: relative; top: 0; left: 0; } @media (max-width: 768px) { .pagePhotobooth .boothHead__icon img { max-width: 110px; } } @media (min-width: 1366px) and (max-width: 1919px) { .pagePhotobooth .boothHead__icon img { max-width: 160px; } } @media (min-width: 1920px) and (max-width: 2559px) { .pagePhotobooth .boothHead__icon img { max-width: 170px; } } .pagePhotobooth .boothHead .nostalgiaImg { top: 0; left: 0; } .pagePhotobooth .boothHead__body { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; } .pagePhotobooth .boothHead__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 24px; margin-top: 10px; } @media (max-width: 990px) { .pagePhotobooth .boothHead__row { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } } .pagePhotobooth .boothHead__cta { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; white-space: nowrap; } @media (max-width: 990px) { .pagePhotobooth .boothHead__cta { width: 100%; max-width: 280px; } } .pagePhotobooth .boothHead--detail { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pagePhotobooth .boothHead--detail .boothHead__body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-item-align: stretch; align-self: stretch; } .pagePhotobooth .boothHead--detail .triviaTitle { margin: 0; } @media (max-width: 768px) { .pagePhotobooth .boothHead--detail { -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 12px; } .pagePhotobooth .boothHead--detail .boothHead__body { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .pagePhotobooth .nostalgiaTitle { display: block; position: relative; z-index: auto; margin-left: 0; padding: 0; background: transparent; clip-path: none; text-align: left; } @media (min-width: 768px) { .pagePhotobooth .nostalgiaTitle { margin-left: 0; text-align: left; } } @media (max-width: 768px) { .pagePhotobooth .nostalgiaTitle { margin-left: 0; text-align: center; } } .pagePhotobooth .loungeItem__img { width: 100%; max-width: 100%; } .pagePhotobooth .triviaTitle { margin: 0; font-family: Mogra, cursive; font-weight: 400; text-transform: uppercase; color: #000; } @media (max-width: 768px) { .pagePhotobooth .triviaTitle { font-size: 20px; } } @media (min-width: 769px) and (max-width: 1365px) { .pagePhotobooth .triviaTitle { font-size: 24px; } } @media (min-width: 1366px) and (max-width: 1919px) { .pagePhotobooth .triviaTitle { font-size: 26px; } } @media (min-width: 1920px) and (max-width: 2559px) { .pagePhotobooth .triviaTitle { font-size: 28px; } } @media (min-width: 2560px) { .pagePhotobooth .triviaTitle { font-size: 32px; } } .pagePhotobooth .nostalgiaCaption { background: transparent; -webkit-box-shadow: none; box-shadow: none; border-radius: 0; } .pagePhotobooth .nostalgiaCaption--booth { max-width: 620px; margin: 0; padding: 0; background: transparent; clip-path: none; text-align: left; font-family: Dekko, cursive; font-weight: 400; line-height: 1.4; color: #000; } @media (max-width: 768px) { .pagePhotobooth .nostalgiaCaption--booth { font-size: 15px; } } @media (min-width: 768px) { .pagePhotobooth .nostalgiaCaption--booth { font-size: 17px; } } @media (max-width: 990px) { .pagePhotobooth .nostalgiaCaption--booth { max-width: 100%; text-align: center; } } .pagePhotobooth .rundownItem, .pagePhotobooth .loungeItem, .pagePhotobooth .nostalgiaItem { background: #E6E7E7; } .pagePhotobooth .nostalgiaItem--booth { background: #E6E7E7; } .pagePhotobooth .nostalgiaItem--booth-detail { background: #E6E7E7; } .pagePhotobooth .nostalgiaItem__detail { background: #E6E7E7; } .pagePhotobooth .nostalgiaThumb { position: relative; width: 100%; } .pagePhotobooth .nostalgiaTooltip { position: absolute; z-index: 2; bottom: 100%; left: 0; width: auto; max-width: 160px; margin-bottom: 4px; padding: 4px 8px; background: #fff; border: 1px solid #FF0000; border-radius: 4px; font-family: Pangolin, cursive; font-weight: 400; line-height: 1.2; color: #FF0000; } @media (max-width: 768px) { .pagePhotobooth .nostalgiaTooltip { font-size: 9px; } } @media (min-width: 768px) { .pagePhotobooth .nostalgiaTooltip { font-size: 10px; } } .pagePhotobooth .nostalgiaLike, .pagePhotobooth .nostalgiaComment { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; margin-right: 12px; font-family: Pangolin, cursive; font-weight: 400; color: #000; } @media (max-width: 768px) { .pagePhotobooth .nostalgiaLike, .pagePhotobooth .nostalgiaComment { font-size: 11px; } } @media (min-width: 768px) { .pagePhotobooth .nostalgiaLike, .pagePhotobooth .nostalgiaComment { font-size: 12px; } } .pagePhotobooth .nostalgiaYear { margin-left: auto; font-family: Pangolin, cursive; font-weight: 400; color: #000; } @media (max-width: 768px) { .pagePhotobooth .nostalgiaYear { font-size: 11px; } } @media (min-width: 768px) { .pagePhotobooth .nostalgiaYear { font-size: 12px; } } .pagePhotobooth .loungeTitle { font-family: Dekko, cursive; font-weight: 400; line-height: 1.4; color: #000; } @media (max-width: 768px) { .pagePhotobooth .loungeTitle { font-size: 15px; } } @media (min-width: 768px) { .pagePhotobooth .loungeTitle { font-size: 16px; } } .pagePhotobooth .userName { font-family: Pangolin, cursive; font-weight: 400; color: #000; } @media (max-width: 768px) { .pagePhotobooth .userName { font-size: 13px; } } @media (min-width: 768px) { .pagePhotobooth .userName { font-size: 15px; } } .pagePhotobooth .userAvatar { border-radius: 50%; -o-object-fit: cover; object-fit: cover; } .pagePhotobooth .nostalgiaContent .nostalgiaPopup__area { margin-bottom: 0; } .pagePhotobooth .nostalgiaContent .display-flex.jcontent-end { margin-top: 12px; } .pagePhotobooth .nostalgiaList { margin-top: 0; } .nostalgiaPopup__content--booth { background: #EBE9E9; color: #000; text-align: left; } .nostalgiaPopup__misc { font-family: Pangolin, cursive; font-weight: 400; color: #000; } @media (max-width: 768px) { .nostalgiaPopup__misc { font-size: 14px; } } @media (min-width: 768px) { .nostalgiaPopup__misc { font-size: 16px; } } .nostalgiaPopup__area { display: block; width: 100%; padding: 14px 16px; border: 0; border-radius: 6px; background: #fff; resize: vertical; outline: none; font-family: Pangolin, cursive; font-weight: 400; color: #000; } @media (max-width: 768px) { .nostalgiaPopup__area { font-size: 13px; min-height: 120px; } } @media (min-width: 768px) { .nostalgiaPopup__area { font-size: 15px; min-height: 150px; } } .nostalgiaPopup__area::-webkit-input-placeholder { color: #8c8c8c; } .nostalgiaPopup__area::-moz-placeholder { color: #8c8c8c; } .nostalgiaPopup__area:-ms-input-placeholder { color: #8c8c8c; } .nostalgiaPopup__area::-ms-input-placeholder { color: #8c8c8c; } .nostalgiaPopup__area::placeholder { color: #8c8c8c; } .nostalgiaPopup__submit { display: block; width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; } .upload__box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 40px; width: 100%; height: auto; padding: 40px 20px; background: #C4C4C4; border: 0; border-radius: 6px; cursor: pointer; overflow: hidden; } @media (max-width: 768px) { .upload__box { gap: 24px; padding: 28px 16px; } } @media (min-width: 768px) { .upload__box { height: auto; } } .upload__box::after { content: none; display: none; } .upload__box .image-upload { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .upload__preview { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; } .upload__icon { position: relative; width: 56px; height: 56px; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M4 14v4a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E"); } @media (max-width: 768px) { .upload__icon { width: 42px; height: 42px; } } .upload__cta { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; max-width: 320px; padding: 12px 20px; background: #fff; border: 1px solid #fff; border-radius: 4px; text-transform: uppercase; font-family: Pangolin, cursive; font-weight: 400; color: #000; pointer-events: none; } @media (max-width: 768px) { .upload__cta { font-size: 13px; padding: 10px 16px; } } @media (min-width: 768px) { .upload__cta { font-size: 16px; } } .winner { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; margin: 0; width: 100%; overflow-x: hidden; } .winnerWrap { margin-top: 125px; padding-bottom: 60px; min-height: 100vh; } .winnerName { width: 100%; margin: 0 0 20px; background: transparent; font-family: Pangolin, cursive; font-weight: 400; font-size: 18px; line-height: 1.2; text-align: center; color: #000; } @media (min-width: 768px) { .winnerName { font-size: 21px; } } .winnerBox { position: relative; text-align: center; font-family: Pangolin, cursive; font-weight: 400; color: #000; } @media (max-width: 768px) { .winnerBox { font-size: 14px; } } @media (min-width: 769px) and (max-width: 1365px) { .winnerBox { font-size: 16px; } } @media (min-width: 1026px) { .winnerBox { font-size: 18px; } } .winnerBox__ribbon { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 2; max-width: 100%; margin: 4px auto 0; padding: 0; min-height: 0; font-family: Mogra, cursive; font-weight: 400; font-size: 16px; line-height: 1.3; text-align: center; color: #000; } .winnerBox__ribbon::before { display: none; content: none; } @media (min-width: 768px) { .winnerBox__ribbon { font-size: 20px; } } .winnerBox__title { font-family: Pangolin, cursive; font-weight: 400; color: #000; } @media (max-width: 768px) { .winnerBox__title { font-size: 11px; } } @media (min-width: 769px) and (max-width: 1365px) { .winnerBox__title { font-size: 12px; } } @media (min-width: 1026px) { .winnerBox__title { font-size: 14px; } } .winnerBox__title span { display: block; padding: 4px 6px; color: #000; } @media (min-width: 768px) { .winnerBox__title span { padding-left: 12px; padding-right: 12px; } } .winnerBox--left { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 10px; } @media (max-width: 768px) { .winnerBox--left { width: 177px; max-width: 100%; padding: 0; } } .winnerBox--right .nomineePhoto { max-width: 120px; height: 100%; } @media (min-width: 768px) { .winnerBox--right .nomineePhoto { max-width: 250px; } } @media (min-width: 768px) and (max-width: 1026px) { .winnerBox--right .nomineePhoto { max-width: 120px; } } @media (max-width: 768px) { .winnerBox--right .nomineePhoto { height: 75%; } } .winnerBox--right .nomineePhoto img { width: 177px; min-height: unset; -o-object-fit: cover; object-fit: cover; -webkit-filter: none; filter: none; } @media (min-width: 768px) { .winnerBox--right .nomineePhoto img { height: 75%; } } @media (min-width: 768px) and (max-width: 1026px) { .winnerBox--right .nomineePhoto img { height: 75%; } } @media (max-width: 768px) { .winnerBox--right .nomineePhoto img { height: 100%; } } .winnerRibbon { width: calc(100% - 70px); min-height: 56px; padding: 10px; } @media (min-width: 768px) { .winnerRibbon { width: 540px; padding: 18px 10px; } } @media (min-width: 768px) { .winnerTab { --gap: 15px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 calc(-1 * var(--gap)) 50px calc(-1 * var(--gap)); width: calc(100% + var(--gap)); } } @media (min-width: 768px) { .winnerWrapper { width: calc(50% - var(--gap)); margin: var(--gap) 0 0 var(--gap); } } .winnerItem { position: relative; width: 100%; margin: 15px 0; padding-bottom: 0; background: #fff; border-radius: 5px; } @media (min-width: 990px) { .winnerItem { border: 1px solid #000; } } @media (min-width: 768px) { .winnerItem:first-child { margin-left: calc((5% - 20px) / 2); } } @media (min-width: 768px) { .winnerItem { width: calc(50% - 20px); margin-left: 10px; margin-right: 10px; } } @media (max-width: 768px) { .winnerItem { width: calc(50% - 20px); margin-left: 10px; margin-right: 10px; padding-bottom: 20px; } } .winnerPhoto { position: relative; width: 171px; height: 232px; } .winnerDesc { margin-top: 20px; font-family: Dekko, cursive; font-weight: 400; font-size: 16px; line-height: 1.4; color: #000; } @media (min-width: 768px) { .winnerDesc { margin: 20px -40px 0 -40px; } } .winnerTitle { font-family: Mogra, cursive; font-weight: 400; font-size: 16px; line-height: 1.3; color: #000; } @media (min-width: 768px) { .winnerTitle { font-size: 20px; } } .pageMisterychallange .footerBg__deco--left, .pageMisterychallange .footerBg__deco--right { display: none; } .pageMisterychallange .headingTitle { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 100%; gap: 10px; padding: 16px 0px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .pageMisterychallange .headingTitle img { max-width: 80px; } .misterychalangeWrap { margin-top: 130px; padding-bottom: 60px; min-height: 100vh; } .misterychalangeWrap--login { width: 450px; color: #000; } @media (max-width: 768px) { .misterychalangeWrap--login { width: 375px; } } @media (max-width: 375px) { .misterychalangeWrap--login { width: 320px; } } .misterychalangeWrap--login .misterychalangeDetail { text-align: center; } .misterychalangeWrap--login .misterychalangeDetail b { opacity: 0.8; } .misterychalangeWrap--login .misterychalangeInner input { width: 100%; border-radius: 5px; height: 34px; border: 1px solid #1065A6; outline: none; } .misterychalangeWrap--login .misterychalangeInner .input-group { text-align: left; } .misterychalangeWrap--login .misterychalangeInner .input-group label { font-size: 10px; font-weight: 600; opacity: 0.8; margin: 5px 2px; display: block; } .misterychalangeWrap--login .misterychalangeInner .input-group small { font-size: 8px; } .misterychalangeWrap--login .misterychalangeContent { padding: 10px 40px; } @media (max-width: 768px) { .misterychalangeWrap--login .misterychalangeContent { padding: 10px 20px; height: auto; } } .misterychalangeLogo { width: 100%; max-width: 350px; margin: 0 auto; text-align: center; position: relative; } @media (min-width: 1026px) { .misterychalangeLogo { margin: auto; } } @media (max-width: 1026px) { .misterychalangeLogo { max-width: 177px; } } .misterychalangeLogo .nostalgiaImg { left: -50px; } @media (max-width: 768px) { .misterychalangeLogo .nostalgiaImg { left: -30px; } } .misterychalangeLogo .nostalgiaTitle { font-size: 24px; line-height: 1; font-weight: 700; padding: 15px 23px 15px 30px; } @media (min-width: 768px) { .misterychalangeLogo .nostalgiaTitle { text-align: left; margin-left: 30px; } } @media (max-width: 768px) { .misterychalangeLogo .nostalgiaTitle { text-align: left; margin-left: 10px; } } .misterychalangeContent { width: 100%; max-width: 622px; overflow: hidden; background-color: #FFFFFF; border-radius: 5px; border: 10px solid transparent; -o-border-image: url(../images/2026/box-frame.svg) 10 stretch; border-image: url(../images/2026/box-frame.svg) 10 fill stretch; padding: 10px; margin: 30px auto; position: relative; } @media (max-width: 1026px) { .misterychalangeContent { height: 540px; } } .misterychalangeContent .venueLogo-in { width: 100%; max-width: 218px; height: auto; margin: 0 auto; } .misterychalangeContent .boxornament { position: absolute; bottom: 0; } .misterychalangeContent .boxornamentLeft { left: 30px; bottom: 15px; width: 100%; max-width: 68px; -webkit-transform: scaleX(-1); transform: scaleX(-1); } @media (max-width: 1026px) { .misterychalangeContent .boxornamentLeft { width: 160px; } } .misterychalangeContent .boxornamentRight { right: 30px; bottom: 80px; width: 100%; max-width: 68px; } @media (max-width: 1026px) { .misterychalangeContent .boxornamentRight { bottom: 20px; } } .misterychalangeInner { width: 100%; max-width: 356px; margin: 0 auto; position: relative; z-index: 1; } .misterychalangeInner button { font-size: 20px; padding: 0px 26px; margin: 10px 0 0; } .misterychalangeDetail { text-align: left; margin: 10px 0; } .misterychalangeDetail p { margin: 3px 0; font-size: 13px; color: #000; } .misterychalangeList { text-align: left; background-color: #fff; border-radius: 5px; padding: 5px; } .misterychalangeList-head { padding: 5px 0; border-bottom: 1px solid #000; margin-bottom: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .misterychalangeList-head .misterychalangeList-col1, .misterychalangeList-head .misterychalangeList-col2 { font-size: 12px; font-weight: 600; color: #000; } .misterychalangeList-head .misterychalangeList-col1, .misterychalangeList-head .misterychalangeList-col2 { padding: 5px; } .misterychalangeList-body { height: 190px; overflow-x: auto; padding: 0 0; } @media (max-width: 1026px) { .misterychalangeList-body { height: 230px; } } .misterychalangeList-body::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #fff; } .misterychalangeList-body::-webkit-scrollbar { width: 5px; background-color: #fff; } .misterychalangeList-body::-webkit-scrollbar-thumb { height: 20px; background-color: #4797ff; } .misterychalangeList-body .misterychalangeList-col1, .misterychalangeList-body .misterychalangeList-col2 { padding: 5px 10px 5px 0px; } .misterychalangeList-inhead, .misterychalangeList-item { display: -webkit-box; display: -ms-flexbox; display: flex; } .misterychalangeList-item { padding: 6px 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .misterychalangeList-item:not(:last-child) { border-bottom: 1px solid rgba(249, 198, 227, 0.5); } .misterychalangeList-col1 { width: calc(100% - 100px); font-size: 10px; color: #000; } .misterychalangeList-col1 p { margin: 0; } .misterychalangeList-col2 { width: 100%; max-width: 100px; font-size: 10px; font-weight: 600; color: #0aaf2b; text-transform: uppercase; text-align: center; } .misterychalangeList-col2.--notpassed { color: #FF0000; } .submitBtn { font-size: 11px; background-color: #fbda14; border: 1px solid #000; height: 37px; color: #000; font-weight: 500; text-transform: uppercase; width: 190px; margin: 30px auto 0; text-align: center; border-radius: 5px; display: block; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .submitBtn:hover { background-color: #94d9ea; } .heading { font-family: "Montserrat", sans-serif; font-size: 45px; font-weight: 600; position: relative; padding-left: 16px; margin: 20px 0 20px; } @media (max-width: 768px) { .heading { font-size: 16px; padding-left: 12px; } } .heading::before { content: ""; position: absolute; left: 0; width: 6px; height: 42px; top: 8px; background: #1065a6; } @media (max-width: 768px) { .heading::before { width: 2px; height: 16px; top: 2px; } } .classList__content { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 16px; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 768px) { .classList__content { gap: 7px; } } .classList__item { width: 233px; } @media (max-width: 768px) { .classList__item { -webkit-box-flex: calc(50% - 7px); -ms-flex: calc(50% - 7px); flex: calc(50% - 7px); margin-bottom: 4px; max-width: 50%; } } .classWrap { margin-top: 60px; } @media (min-width: 1920px) { .classWrap { padding-top: 20px; padding-bottom: 95px; } } @media (max-width: 768px) { .classWrap { padding-bottom: 25px; min-height: 100vh; } } @media (min-width: 768px) { .classWrap .slick-track { height: 395px; } } @media (max-width: 768px) { .classWrap .slick-track { height: 100%; } } @media (max-width: 768px) { .classWrap .slick-list { padding: 0 0% 0 0 !important; } } .classForm__group { position: relative; } .classForm__group .number { padding-left: 75px; } @media (max-width: 768px) { .classForm__group .number { padding-left: 60px; } } .classForm span.numberLabel { height: 45px; position: absolute; bottom: 0; left: 0; width: 70px; display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 2; margin: 20px auto; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 10px; border-right: 1px solid #ddd; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (max-width: 768px) { .classForm span.numberLabel { width: 50px; font-size: 10px; height: 34px; } } .classForm__title { margin-top: 10px; font-size: 16px; } @media (max-width: 768px) { .classForm__title { font-size: 16px; } } .classForm label, .classForm small { display: block; } .classForm label { font-size: 14px; font-weight: 600; margin: 8px 0 6px; } @media (max-width: 768px) { .classForm label { font-size: 13px; } } .classForm label small { font-weight: 400; font-size: 11px; color: #000; } @media (max-width: 768px) { .classForm label small { font-size: 10px; } } .classForm label small a { color: #1065a6; } .classForm small { font-size: 11px; color: #1065a6; } .classForm small.type2 { color: #000; font-size: 12px; margin: 10px 0; } .classForm small.type2 a { color: #1065a6; } .classForm input { border-radius: 4px; border: 1px solid #acacac; width: 100%; height: 45px; font-size: 14px; padding: 13px 20px; margin: 12px 0 20px; } @media (max-width: 768px) { .classForm input { font-size: 11px; height: 34px; padding: 9px 12px; } } .classForm .checkmark { width: auto; height: auto; margin: 8px 8px; cursor: pointer; } .classForm .checkmarkLabel { cursor: pointer; } .classForm .cardAction { margin: 25px 0 12px; } .classForm__paymentInfo { margin: 12px 0; } .classForm__paymentInfo .cardTicket__header { border-bottom: none; } .classForm__paymentInfo small { color: #000; font-size: 12px; margin: 4px 0; font-weight: 500; } .classForm__paymentInfo small a { color: #1065a6; } .classForm__paymentInfo .highlighted { background: #ceba7a; color: #fff; border-radius: 3px; padding: 2px 6px; margin: 4px 6px; height: auto; border: none; font-size: inherit; width: auto; outline: none; } .classForm__paymentInfoCopy { font-size: 11px; border: none; background: none; padding: 0; text-decoration: underline; color: #1065a6; cursor: pointer; } .heading--class { font-size: 24px; font-weight: 900; padding-left: 2px; margin: 40px 0 18px; } @media (max-width: 768px) { .heading--class { font-size: 12px; } } .heading--class small { font-size: 16px; font-weight: 400; padding-left: 8px; } @media (max-width: 768px) { .heading--class small { font-size: 9px; } } .heading--class::before { display: none; } .FormCaptcha { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .modalTitle, .sdkTitle { margin: 20px 0; } .modalDetail.donateDetail__popup, .donateDetail__popup.sdkDetail { max-height: 85%; } /** Custom Select **/ .custom-select-wrapper { position: relative; display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .custom-select-wrapper select { display: none; } .custom-select { position: relative; display: inline-block; } .custom-select-trigger { position: relative; display: block; width: 130px; padding: 0 84px 0 22px; font-size: 22px; font-weight: 300; color: #202020; line-height: 60px; background: #5c9cd8; border-radius: 4px; cursor: pointer; } .custom-select-trigger:after { position: absolute; display: block; content: ''; width: 10px; height: 10px; top: 50%; right: 25px; margin-top: -3px; border-bottom: 1px solid #202020; border-right: 1px solid #202020; -webkit-transform: rotate(45deg) translateY(-50%); transform: rotate(45deg) translateY(-50%); -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; } .custom-select.opened .custom-select-trigger:after { margin-top: 3px; -webkit-transform: rotate(-135deg) translateY(-50%); transform: rotate(-135deg) translateY(-50%); } .custom-options { position: absolute; display: block; top: 100%; left: 0; right: 0; min-width: 100%; margin: 15px 0; border: 1px solid #b5b5b5; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.07); box-shadow: 0 2px 1px rgba(0, 0, 0, 0.07); background: #fff; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; opacity: 0; visibility: hidden; pointer-events: none; -webkit-transform: translateY(-15px); transform: translateY(-15px); z-index: 1; } .custom-select.opened .custom-options { opacity: 1; visibility: visible; pointer-events: all; -webkit-transform: translateY(0); transform: translateY(0); } .custom-options:before { position: absolute; display: block; content: ''; bottom: 100%; right: 25px; width: 7px; height: 7px; margin-bottom: -4px; border-top: 1px solid #b5b5b5; border-left: 1px solid #b5b5b5; background: #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .option-hover:before { background: #f9f9f9; } .custom-option { position: relative; display: block; padding: 0 22px; border-bottom: 1px solid #b5b5b5; font-size: 18px; font-weight: 600; color: #b5b5b5; line-height: 47px; cursor: pointer; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .custom-option:first-of-type { border-radius: 4px 4px 0 0; } .custom-option:last-of-type { border-bottom: 0; border-radius: 0 0 4px 4px; } .custom-option:hover, .custom-option.selection { background: #f9f9f9; } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 30% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 40% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 70% { -webkit-transform: translateY(0); transform: translateY(0); } 80% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounce { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 30% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 40% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 70% { -webkit-transform: translateY(0); transform: translateY(0); } 80% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .animation-zoominout { -webkit-animation: zoominout 1s infinite; animation: zoominout 1s infinite; } @-webkit-keyframes zoominout { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); } 50% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); } } @keyframes zoominout { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); } 50% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); } } .hidden { display: none; } .display-desktop { display: none; } @media (min-width: 768px) { .display-desktop { display: block; } } .display-mobile { display: block; } @media (min-width: 768px) { .display-mobile { display: none; } } .display-desktop-flex { display: none; } @media (min-width: 768px) { .display-desktop-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } } .display-mobile-flex { display: -webkit-box; display: -ms-flexbox; display: flex; } @media (min-width: 768px) { .display-mobile-flex { display: none; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip: rect(0, 0, 0, 0); border: 0; } .mt40 { margin-top: 40px; } .wideContainer { width: 1100px; margin: auto; } @media (max-width: 768px) { .wideContainer { width: 100%; margin-left: 12px; margin-right: 12px; } } .nostalgiaList .loungeTitle { font-size: 13px; max-height: 58px; } @media (max-width: 768px) { .nostalgiaList .loungeTitle { font-size: 11px; overflow: hidden; height: 65px; max-height: 65px; } } .mainContent { position: relative; background: #2f59f4; overflow-x: clip; padding-top: 100px; padding-bottom: 100px; } @media (max-width: 768px) { .mainContent { overflow-x: clip; padding-bottom: 200px; } } .prokes { padding: 10px 54px 25px; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 611px; } @media (max-width: 768px) { .prokes { display: none; } } .prokes-m { padding: 6px 0px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; max-width: 611px; display: none; } @media (max-width: 768px) { .prokes-m { display: block; } } .prokes-m img { width: 100%; } @media (max-width: 768px) { .sectionExploreCol.--img { position: relative; width: 100%; max-height: 65vh; } /* Scrollable container */ .sectionExploreImg { overflow-y: auto; -webkit-overflow-scrolling: touch; /* smooth iOS scroll */ height: 65vh; border: 10px solid #2f59f4; } /* The image is taller than the view, so it can scroll */ .sectionExploreImg img { display: block; width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; -webkit-transform: none !important; transform: none !important; /* override inline transform */ position: relative; } /* Optional: hide scrollbar */ .sectionExploreImg::-webkit-scrollbar { display: none; } .sectionExploreBtn { width: 40px; height: 40px; bottom: -20px; left: 0; right: 0; margin: auto; } } /* Enable only on small screens */ @media (max-width: 768px) { .sectionExploreImg { height: 50vh; overflow: scroll; } } .sectionBlogmarathon .collapse.in { display: -webkit-box; display: -ms-flexbox; display: flex; } .sectionBlogmarathon .accordion__collapse { -ms-flex-wrap: wrap; flex-wrap: wrap; } .sectionBlogmarathon .accord__3 { -ms-flex-preferred-size: calc(100% / 3); flex-basis: calc(100% / 3); width: calc(100% / 3); -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; float: initial; } @media (max-width: 768px) { .sectionBlogmarathon .accord__3 { -ms-flex-preferred-size: calc(100%); flex-basis: calc(100%); width: calc(100%); } } .sectionBlogmarathon .accord__content { height: 100%; }