html { scroll-behavior: smooth; } :root { --color-primary: #112D4E; --color-primary-dark: #102743; --color-primary-light-1: #19467a; --color-primary-light-2: #225c9e; --color-secondary: #F9F7F7; --color-secondary-dark: #b8b8b8; --color-secondary-dark-2: #d4d4d4; --color-secondary-dark-3: #ededed; --color-secondary-dark-4: #c4c4c4; --color-tertiary: #DBE2EF; --color-yellow: #ffe600; --color-yellow-dark: #b09418; --color-yellow-dark-1: #c1a31c; --color-yellow-dark-2: #dab821; --color-yellow-dark-3: #ecc722; --color-grey: #5a5a5a; --color-grey-dark: #4e4e4e; --color-grey-dark-1: #333333; --color-grey-light-1: #a1a1a1; --color-grey-light-2: #b1b1b1; --color-red: red; --color-green: rgb(0, 183, 0); --color-blue-light-1: #b3d8ff; --color-shs: #a0eeff; --color-shs-dark: #44656c; --color-shs-dark-1: rgb(58, 86, 93); --color-soc: #d8d017; --color-soc-light-1: #fef61d; --color-soc-dark: #66630c; --color-sbla: #ca1d1d; --color-sbla-dark: #570d0d; --color-soda: #00a6cb; --color-soda-dark: #004555; --font-primary: 'Nunito', sans-serif; --font-display: 'Josefin Sans', sans-serif; --default-font-size: 1.6rem; --nav-btn-height: 7rem; --nav-btn-width: 7rem; --slide-progress: 35%; --slide-progress--transition: all 200ms cubic-bezier(0.82, 0.02, 0.39, 1.01); } .heading-1, .heading-3, .heading-5, .welcome-message { font-family: var(--font-display); font-weight: 400; } @keyframes animateTopLeft { 0% { transform: translate(-100%, -100%); } 100% { transform: translate(0); background-color: var(--color-secondary); } } @keyframes animateTopRight { 0% { transform: translate(100%, -100%); } 100% { transform: translate(0); background-color: var(--color-secondary); } } @keyframes animateBottomLeft { 0% { transform: translate(-100%, 100%); } 100% { transform: translate(0); background-color: var(--color-secondary); } } @keyframes animateBottomRight { 0% { transform: translate(100%, 100%); } 100% { transform: translate(0); background-color: var(--color-secondary); } } @keyframes opacityLogin { 0% { opacity: 0; filter: drop-shadow(0 2rem 3rem rgba(0, 0, 0, 0)); transform: translateY(1rem); background-color: var(--color-quaternary); } 50% { opacity: 1; } 70% { transform: translateY(-2rem); transform: scale(1.05); filter: drop-shadow(0 1rem 2rem rgba(0, 0, 0, 0.7)); } 100% { transform: translateY(0); filter: drop-shadow(0 1rem 1rem rgba(0, 0, 0, 0.7)); background-color: var(--color-secondary); } } @keyframes pulsate { 0% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.05); box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.3); } 100% { transform: scale(1); box-shadow: none; } } @keyframes pulsateText { 0% { transform: scale(1); text-shadow: none; } 50% { transform: scale(1.05); text-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.3); } 100% { transform: scale(1); text-shadow: none; } } @keyframes animateTextboxBg { 0% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 0%, transparent 0%); } 5% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 5%, transparent 5%); } 10% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 10%, transparent 10%); } 15% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 15%, transparent 15%); } 20% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 20%, transparent 20%); } 25% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 25%, transparent 25%); } 30% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 30%, transparent 30%); } 35% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 35%, transparent 35%); } 40% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 40%, transparent 40%); } 45% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 45%, transparent 45%); } 50% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 50%, transparent 50%); } 55% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 55%, transparent 55%); } 60% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 60%, transparent 60%); } 65% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 65%, transparent 65%); } 70% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 70%, transparent 70%); } 75% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 75%, transparent 75%); } 80% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 80%, transparent 80%); } 85% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 85%, transparent 85%); } 90% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 90%, transparent 90%); } 95% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 95%, transparent 95%); } 100% { background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 100%, transparent 100%); } } @keyframes animateWelcomeMessageBg { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } @keyframes animateWelcomeBg { 0% { background-image: linear-gradient(to right, #102743 0%, #102743 0%, transparent 0%); } 1.25% { background-image: linear-gradient(to right, #102743 0%, #102743 1.25%, transparent 1.25%); } 2.5% { background-image: linear-gradient(to right, #102743 0%, #102743 2.5%, transparent 2.5%); } 3.75% { background-image: linear-gradient(to right, #102743 0%, #102743 3.75%, transparent 3.75%); } 5% { background-image: linear-gradient(to right, #102743 0%, #102743 5%, transparent 5%); } 6.25% { background-image: linear-gradient(to right, #102743 0%, #102743 6.25%, transparent 6.25%); } 7.5% { background-image: linear-gradient(to right, #102743 0%, #102743 7.5%, transparent 7.5%); } 8.75% { background-image: linear-gradient(to right, #102743 0%, #102743 8.75%, transparent 8.75%); } 10% { background-image: linear-gradient(to right, #102743 0%, #102743 10%, transparent 10%); } 11.25% { background-image: linear-gradient(to right, #102743 0%, #102743 11.25%, transparent 11.25%); } 12.5% { background-image: linear-gradient(to right, #102743 0%, #102743 12.5%, transparent 12.5%); } 13.75% { background-image: linear-gradient(to right, #102743 0%, #102743 13.75%, transparent 13.75%); } 15% { background-image: linear-gradient(to right, #102743 0%, #102743 15%, transparent 15%); } 16.25% { background-image: linear-gradient(to right, #102743 0%, #102743 16.25%, transparent 16.25%); } 17.5% { background-image: linear-gradient(to right, #102743 0%, #102743 17.5%, transparent 17.5%); } 18.75% { background-image: linear-gradient(to right, #102743 0%, #102743 18.75%, transparent 18.75%); } 20% { background-image: linear-gradient(to right, #102743 0%, #102743 20%, transparent 20%); } 21.25% { background-image: linear-gradient(to right, #102743 0%, #102743 21.25%, transparent 21.25%); } 22.5% { background-image: linear-gradient(to right, #102743 0%, #102743 22.5%, transparent 22.5%); } 23.75% { background-image: linear-gradient(to right, #102743 0%, #102743 23.75%, transparent 23.75%); } 25% { background-image: linear-gradient(to right, #102743 0%, #102743 25%, transparent 25%); } 26.25% { background-image: linear-gradient(to right, #102743 0%, #102743 26.25%, transparent 26.25%); } 27.5% { background-image: linear-gradient(to right, #102743 0%, #102743 27.5%, transparent 27.5%); } 28.75% { background-image: linear-gradient(to right, #102743 0%, #102743 28.75%, transparent 28.75%); } 30% { background-image: linear-gradient(to right, #102743 0%, #102743 30%, transparent 30%); } 31.25% { background-image: linear-gradient(to right, #102743 0%, #102743 31.25%, transparent 31.25%); } 32.5% { background-image: linear-gradient(to right, #102743 0%, #102743 32.5%, transparent 32.5%); } 33.75% { background-image: linear-gradient(to right, #102743 0%, #102743 33.75%, transparent 33.75%); } 35% { background-image: linear-gradient(to right, #102743 0%, #102743 35%, transparent 35%); } 36.25% { background-image: linear-gradient(to right, #102743 0%, #102743 36.25%, transparent 36.25%); } 37.5% { background-image: linear-gradient(to right, #102743 0%, #102743 37.5%, transparent 37.5%); } 38.75% { background-image: linear-gradient(to right, #102743 0%, #102743 38.75%, transparent 38.75%); } 40% { background-image: linear-gradient(to right, #102743 0%, #102743 40%, transparent 40%); } 41.25% { background-image: linear-gradient(to right, #102743 0%, #102743 41.25%, transparent 41.25%); } 42.5% { background-image: linear-gradient(to right, #102743 0%, #102743 42.5%, transparent 42.5%); } 43.75% { background-image: linear-gradient(to right, #102743 0%, #102743 43.75%, transparent 43.75%); } 45% { background-image: linear-gradient(to right, #102743 0%, #102743 45%, transparent 45%); } 46.25% { background-image: linear-gradient(to right, #102743 0%, #102743 46.25%, transparent 46.25%); } 47.5% { background-image: linear-gradient(to right, #102743 0%, #102743 47.5%, transparent 47.5%); } 48.75% { background-image: linear-gradient(to right, #102743 0%, #102743 48.75%, transparent 48.75%); } 50% { background-image: linear-gradient(to right, #102743 0%, #102743 50%, transparent 50%); } 51.25% { background-image: linear-gradient(to right, #102743 0%, #102743 51.25%, transparent 51.25%); } 52.5% { background-image: linear-gradient(to right, #102743 0%, #102743 52.5%, transparent 52.5%); } 53.75% { background-image: linear-gradient(to right, #102743 0%, #102743 53.75%, transparent 53.75%); } 55% { background-image: linear-gradient(to right, #102743 0%, #102743 55%, transparent 55%); } 56.25% { background-image: linear-gradient(to right, #102743 0%, #102743 56.25%, transparent 56.25%); } 57.5% { background-image: linear-gradient(to right, #102743 0%, #102743 57.5%, transparent 57.5%); } 58.75% { background-image: linear-gradient(to right, #102743 0%, #102743 58.75%, transparent 58.75%); } 60% { background-image: linear-gradient(to right, #102743 0%, #102743 60%, transparent 60%); } 61.25% { background-image: linear-gradient(to right, #102743 0%, #102743 61.25%, transparent 61.25%); } 62.5% { background-image: linear-gradient(to right, #102743 0%, #102743 62.5%, transparent 62.5%); } 63.75% { background-image: linear-gradient(to right, #102743 0%, #102743 63.75%, transparent 63.75%); } 65% { background-image: linear-gradient(to right, #102743 0%, #102743 65%, transparent 65%); } 66.25% { background-image: linear-gradient(to right, #102743 0%, #102743 66.25%, transparent 66.25%); } 67.5% { background-image: linear-gradient(to right, #102743 0%, #102743 67.5%, transparent 67.5%); } 68.75% { background-image: linear-gradient(to right, #102743 0%, #102743 68.75%, transparent 68.75%); } 70% { background-image: linear-gradient(to right, #102743 0%, #102743 70%, transparent 70%); } 71.25% { background-image: linear-gradient(to right, #102743 0%, #102743 71.25%, transparent 71.25%); } 72.5% { background-image: linear-gradient(to right, #102743 0%, #102743 72.5%, transparent 72.5%); } 73.75% { background-image: linear-gradient(to right, #102743 0%, #102743 73.75%, transparent 73.75%); } 75% { background-image: linear-gradient(to right, #102743 0%, #102743 75%, transparent 75%); } 76.25% { background-image: linear-gradient(to right, #102743 0%, #102743 76.25%, transparent 76.25%); } 77.5% { background-image: linear-gradient(to right, #102743 0%, #102743 77.5%, transparent 77.5%); } 78.75% { background-image: linear-gradient(to right, #102743 0%, #102743 78.75%, transparent 78.75%); } 80% { background-image: linear-gradient(to right, #102743 0%, #102743 80%, transparent 80%); } 81.25% { background-image: linear-gradient(to right, #102743 0%, #102743 81.25%, transparent 81.25%); } 82.5% { background-image: linear-gradient(to right, #102743 0%, #102743 82.5%, transparent 82.5%); } 83.75% { background-image: linear-gradient(to right, #102743 0%, #102743 83.75%, transparent 83.75%); } 85% { background-image: linear-gradient(to right, #102743 0%, #102743 85%, transparent 85%); } 86.25% { background-image: linear-gradient(to right, #102743 0%, #102743 86.25%, transparent 86.25%); } 87.5% { background-image: linear-gradient(to right, #102743 0%, #102743 87.5%, transparent 87.5%); } 88.75% { background-image: linear-gradient(to right, #102743 0%, #102743 88.75%, transparent 88.75%); } 90% { background-image: linear-gradient(to right, #102743 0%, #102743 90%, transparent 90%); } 91.25% { background-image: linear-gradient(to right, #102743 0%, #102743 91.25%, transparent 91.25%); } 92.5% { background-image: linear-gradient(to right, #102743 0%, #102743 92.5%, transparent 92.5%); } 93.75% { background-image: linear-gradient(to right, #102743 0%, #102743 93.75%, transparent 93.75%); } 95% { background-image: linear-gradient(to right, #102743 0%, #102743 95%, transparent 95%); } 96.25% { background-image: linear-gradient(to right, #102743 0%, #102743 96.25%, transparent 96.25%); } 97.5% { background-image: linear-gradient(to right, #102743 0%, #102743 97.5%, transparent 97.5%); } 98.75% { background-image: linear-gradient(to right, #102743 0%, #102743 98.75%, transparent 98.75%); } 100% { background-image: linear-gradient(to right, #102743 0%, #102743 100%, transparent 100%); } 0% { background-image: linear-gradient(to right, #102743 0%, #102743 0%, transparent 0%); } 1.25% { background-image: linear-gradient(to right, #102743 0%, #102743 1.25%, transparent 1.25%); } 2.5% { background-image: linear-gradient(to right, #102743 0%, #102743 2.5%, transparent 2.5%); } 3.75% { background-image: linear-gradient(to right, #102743 0%, #102743 3.75%, transparent 3.75%); } 5% { background-image: linear-gradient(to right, #102743 0%, #102743 5%, transparent 5%); } 6.25% { background-image: linear-gradient(to right, #102743 0%, #102743 6.25%, transparent 6.25%); } 7.5% { background-image: linear-gradient(to right, #102743 0%, #102743 7.5%, transparent 7.5%); } 8.75% { background-image: linear-gradient(to right, #102743 0%, #102743 8.75%, transparent 8.75%); } 10% { background-image: linear-gradient(to right, #102743 0%, #102743 10%, transparent 10%); } 11.25% { background-image: linear-gradient(to right, #102743 0%, #102743 11.25%, transparent 11.25%); } 12.5% { background-image: linear-gradient(to right, #102743 0%, #102743 12.5%, transparent 12.5%); } 13.75% { background-image: linear-gradient(to right, #102743 0%, #102743 13.75%, transparent 13.75%); } 15% { background-image: linear-gradient(to right, #102743 0%, #102743 15%, transparent 15%); } 16.25% { background-image: linear-gradient(to right, #102743 0%, #102743 16.25%, transparent 16.25%); } 17.5% { background-image: linear-gradient(to right, #102743 0%, #102743 17.5%, transparent 17.5%); } 18.75% { background-image: linear-gradient(to right, #102743 0%, #102743 18.75%, transparent 18.75%); } 20% { background-image: linear-gradient(to right, #102743 0%, #102743 20%, transparent 20%); } 21.25% { background-image: linear-gradient(to right, #102743 0%, #102743 21.25%, transparent 21.25%); } 22.5% { background-image: linear-gradient(to right, #102743 0%, #102743 22.5%, transparent 22.5%); } 23.75% { background-image: linear-gradient(to right, #102743 0%, #102743 23.75%, transparent 23.75%); } 25% { background-image: linear-gradient(to right, #102743 0%, #102743 25%, transparent 25%); } 26.25% { background-image: linear-gradient(to right, #102743 0%, #102743 26.25%, transparent 26.25%); } 27.5% { background-image: linear-gradient(to right, #102743 0%, #102743 27.5%, transparent 27.5%); } 28.75% { background-image: linear-gradient(to right, #102743 0%, #102743 28.75%, transparent 28.75%); } 30% { background-image: linear-gradient(to right, #102743 0%, #102743 30%, transparent 30%); } 31.25% { background-image: linear-gradient(to right, #102743 0%, #102743 31.25%, transparent 31.25%); } 32.5% { background-image: linear-gradient(to right, #102743 0%, #102743 32.5%, transparent 32.5%); } 33.75% { background-image: linear-gradient(to right, #102743 0%, #102743 33.75%, transparent 33.75%); } 35% { background-image: linear-gradient(to right, #102743 0%, #102743 35%, transparent 35%); } 36.25% { background-image: linear-gradient(to right, #102743 0%, #102743 36.25%, transparent 36.25%); } 37.5% { background-image: linear-gradient(to right, #102743 0%, #102743 37.5%, transparent 37.5%); } 38.75% { background-image: linear-gradient(to right, #102743 0%, #102743 38.75%, transparent 38.75%); } 40% { background-image: linear-gradient(to right, #102743 0%, #102743 40%, transparent 40%); } 41.25% { background-image: linear-gradient(to right, #102743 0%, #102743 41.25%, transparent 41.25%); } 42.5% { background-image: linear-gradient(to right, #102743 0%, #102743 42.5%, transparent 42.5%); } 43.75% { background-image: linear-gradient(to right, #102743 0%, #102743 43.75%, transparent 43.75%); } 45% { background-image: linear-gradient(to right, #102743 0%, #102743 45%, transparent 45%); } 46.25% { background-image: linear-gradient(to right, #102743 0%, #102743 46.25%, transparent 46.25%); } 47.5% { background-image: linear-gradient(to right, #102743 0%, #102743 47.5%, transparent 47.5%); } 48.75% { background-image: linear-gradient(to right, #102743 0%, #102743 48.75%, transparent 48.75%); } 50% { background-image: linear-gradient(to right, #102743 0%, #102743 50%, transparent 50%); } 51.25% { background-image: linear-gradient(to right, #102743 0%, #102743 51.25%, transparent 51.25%); } 52.5% { background-image: linear-gradient(to right, #102743 0%, #102743 52.5%, transparent 52.5%); } 53.75% { background-image: linear-gradient(to right, #102743 0%, #102743 53.75%, transparent 53.75%); } 55% { background-image: linear-gradient(to right, #102743 0%, #102743 55%, transparent 55%); } 56.25% { background-image: linear-gradient(to right, #102743 0%, #102743 56.25%, transparent 56.25%); } 57.5% { background-image: linear-gradient(to right, #102743 0%, #102743 57.5%, transparent 57.5%); } 58.75% { background-image: linear-gradient(to right, #102743 0%, #102743 58.75%, transparent 58.75%); } 60% { background-image: linear-gradient(to right, #102743 0%, #102743 60%, transparent 60%); } 61.25% { background-image: linear-gradient(to right, #102743 0%, #102743 61.25%, transparent 61.25%); } 62.5% { background-image: linear-gradient(to right, #102743 0%, #102743 62.5%, transparent 62.5%); } 63.75% { background-image: linear-gradient(to right, #102743 0%, #102743 63.75%, transparent 63.75%); } 65% { background-image: linear-gradient(to right, #102743 0%, #102743 65%, transparent 65%); } 66.25% { background-image: linear-gradient(to right, #102743 0%, #102743 66.25%, transparent 66.25%); } 67.5% { background-image: linear-gradient(to right, #102743 0%, #102743 67.5%, transparent 67.5%); } 68.75% { background-image: linear-gradient(to right, #102743 0%, #102743 68.75%, transparent 68.75%); } 70% { background-image: linear-gradient(to right, #102743 0%, #102743 70%, transparent 70%); } 71.25% { background-image: linear-gradient(to right, #102743 0%, #102743 71.25%, transparent 71.25%); } 72.5% { background-image: linear-gradient(to right, #102743 0%, #102743 72.5%, transparent 72.5%); } 73.75% { background-image: linear-gradient(to right, #102743 0%, #102743 73.75%, transparent 73.75%); } 75% { background-image: linear-gradient(to right, #102743 0%, #102743 75%, transparent 75%); } 76.25% { background-image: linear-gradient(to right, #102743 0%, #102743 76.25%, transparent 76.25%); } 77.5% { background-image: linear-gradient(to right, #102743 0%, #102743 77.5%, transparent 77.5%); } 78.75% { background-image: linear-gradient(to right, #102743 0%, #102743 78.75%, transparent 78.75%); } 80% { background-image: linear-gradient(to right, #102743 0%, #102743 80%, transparent 80%); } 81.25% { background-image: linear-gradient(to right, #102743 0%, #102743 81.25%, transparent 81.25%); } 82.5% { background-image: linear-gradient(to right, #102743 0%, #102743 82.5%, transparent 82.5%); } 83.75% { background-image: linear-gradient(to right, #102743 0%, #102743 83.75%, transparent 83.75%); } 85% { background-image: linear-gradient(to right, #102743 0%, #102743 85%, transparent 85%); } 86.25% { background-image: linear-gradient(to right, #102743 0%, #102743 86.25%, transparent 86.25%); } 87.5% { background-image: linear-gradient(to right, #102743 0%, #102743 87.5%, transparent 87.5%); } 88.75% { background-image: linear-gradient(to right, #102743 0%, #102743 88.75%, transparent 88.75%); } 90% { background-image: linear-gradient(to right, #102743 0%, #102743 90%, transparent 90%); } 91.25% { background-image: linear-gradient(to right, #102743 0%, #102743 91.25%, transparent 91.25%); } 92.5% { background-image: linear-gradient(to right, #102743 0%, #102743 92.5%, transparent 92.5%); } 93.75% { background-image: linear-gradient(to right, #102743 0%, #102743 93.75%, transparent 93.75%); } 95% { background-image: linear-gradient(to right, #102743 0%, #102743 95%, transparent 95%); } 96.25% { background-image: linear-gradient(to right, #102743 0%, #102743 96.25%, transparent 96.25%); } 97.5% { background-image: linear-gradient(to right, #102743 0%, #102743 97.5%, transparent 97.5%); } 98.75% { background-image: linear-gradient(to right, #102743 0%, #102743 98.75%, transparent 98.75%); } 100% { background-image: linear-gradient(to right, #102743 0%, #102743 100%, transparent 100%); } } @keyframes animateMessage { 0% { transform: translate(-50%, calc(-50% - 100vh)); opacity: 1; visibility: visible; } 12.5% { transform: translate(-50%, calc(-50% + 10rem)); opacity: 1; visibility: visible; } 25% { transform: translate(-50%, -50%); opacity: 1; visibility: visible; } 72.4% { transform: translate(-50%, -50%); opacity: 1; visibility: visible; } 85% { transform: translate(-50%, calc(-50% - 10rem)); opacity: 1; visibility: visible; } 100% { transform: translate(-50%, calc(-50% + 100vh)); opacity: 0; visibility: hidden; } } @keyframes animateLastMessage { 0% { transform: translate(-50%, calc(-50% - 100vh)); opacity: 1; visibility: visible; } 12.5% { transform: translate(-50%, calc(-50% + 10rem)); opacity: 1; visibility: visible; } 25% { transform: translate(-50%, -50%); opacity: 1; visibility: visible; } 72.4% { transform: translate(-50%, -50%); opacity: 1; visibility: visible; } 100% { transform: translate(-50%, -120%); opacity: 1; visibility: visible; animation: none; } } @keyframes animateMessageButton { 0% { transform: translate(-50%, calc(-50% + 100vh)); opacity: 1; visibility: visible; } 70% { transform: translate(-50%, 5vh); } 100% { transform: translate(-50%, 3vh); opacity: 1; visibility: visible; animation: none; } } @keyframes pulsateMessageButton { 0% { opacity: 1; visibility: visible; transform: translate(-50%, 3vh) scale(1); filter: drop-shadow(0); } 50% { opacity: 1; visibility: visible; filter: drop-shadow(0 1rem 4rem rgba(0, 0, 0, 0.4)); transform: translate(-50%, 3vh) scale(1.05); } 100% { opacity: 1; visibility: visible; transform: translate(-50%, 3vh) scale(1); filter: drop-shadow(0); } } @keyframes endButton { 0% { transform: translate(-50%, 3vh); clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); opacity: 1; visibility: visible; } 50% { transform: translate(-10vh, 3vh); clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); opacity: 1; visibility: visible; } 100% { clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); transform: translate(100vh, 3vh); } } @keyframes endMessage { 0% { transform: translate(-50%, -120%); opacity: 1; visibility: visible; } 50% { transform: translate(-50%, -1vh); opacity: 1; visibility: visible; } 100% { transform: translate(-50%, -100vh); } } @keyframes animateSublink { 0% { transform: translateX(10rem); opacity: 0; } 100% { transform: translateX(0); } } @keyframes animateSublist { 0% { height: 0; } 100% { height: 80vh; } } @keyframes moveInTop { 0% { transform: translateY(-8rem); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes moveInBottom { 0% { transform: translateY(8rem); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes moveInBottomGallery { 0% { transform: translateY(15rem); opacity: 0; } 100% { transform: translateY(-45rem); opacity: 1; } } @keyframes moveToTopTextbox { 0% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, -65%); } } @keyframes animateAboutText { 0% { transform: scale(0); opacity: 0; visibility: hidden; } 100% { transform: scale(1); opacity: 1; visibility: visible; } } @keyframes animateAboutHighlight { 0% { color: var(--color-secondary-dark-4); } 50% { color: var(--color-yellow-dark); } 100% { color: var(--color-yellow-dark-2); } } @keyframes animateMeetIacLineAcaHea { 0% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 0%, transparent 0%); } 1.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 1.25%, transparent 1.25%); } 2.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 2.5%, transparent 2.5%); } 3.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 3.75%, transparent 3.75%); } 5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 5%, transparent 5%); } 6.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 6.25%, transparent 6.25%); } 7.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 7.5%, transparent 7.5%); } 8.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 8.75%, transparent 8.75%); } 10% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 10%, transparent 10%); } 11.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 11.25%, transparent 11.25%); } 12.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 12.5%, transparent 12.5%); } 13.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 13.75%, transparent 13.75%); } 15% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 15%, transparent 15%); } 16.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 16.25%, transparent 16.25%); } 17.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 17.5%, transparent 17.5%); } 18.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 18.75%, transparent 18.75%); } 20% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 20%, transparent 20%); } 21.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 21.25%, transparent 21.25%); } 22.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 22.5%, transparent 22.5%); } 23.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 23.75%, transparent 23.75%); } 25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 25%, transparent 25%); } 26.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 26.25%, transparent 26.25%); } 27.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 27.5%, transparent 27.5%); } 28.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 28.75%, transparent 28.75%); } 30% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 30%, transparent 30%); } 31.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 31.25%, transparent 31.25%); } 32.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 32.5%, transparent 32.5%); } 33.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 33.75%, transparent 33.75%); } 35% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 35%, transparent 35%); } 36.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 36.25%, transparent 36.25%); } 37.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 37.5%, transparent 37.5%); } 38.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 38.75%, transparent 38.75%); } 40% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 40%, transparent 40%); } 41.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 41.25%, transparent 41.25%); } 42.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 42.5%, transparent 42.5%); } 43.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 43.75%, transparent 43.75%); } 45% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 45%, transparent 45%); } 46.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 46.25%, transparent 46.25%); } 47.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 47.5%, transparent 47.5%); } 48.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 48.75%, transparent 48.75%); } 50% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 50%, transparent 50%); } } @keyframes animateMeetIacLineDep { 0% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 0%, transparent 0%); } 1.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 1.25%, transparent 1.25%); } 2.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 2.5%, transparent 2.5%); } 3.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 3.75%, transparent 3.75%); } 5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 5%, transparent 5%); } 6.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 6.25%, transparent 6.25%); } 7.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 7.5%, transparent 7.5%); } 8.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 8.75%, transparent 8.75%); } 10% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 10%, transparent 10%); } 11.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 11.25%, transparent 11.25%); } 12.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 12.5%, transparent 12.5%); } 13.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 13.75%, transparent 13.75%); } 15% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 15%, transparent 15%); } 16.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 16.25%, transparent 16.25%); } 17.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 17.5%, transparent 17.5%); } 18.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 18.75%, transparent 18.75%); } 20% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 20%, transparent 20%); } 21.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 21.25%, transparent 21.25%); } 22.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 22.5%, transparent 22.5%); } 23.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 23.75%, transparent 23.75%); } 25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 25%, transparent 25%); } 26.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 26.25%, transparent 26.25%); } 27.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 27.5%, transparent 27.5%); } 28.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 28.75%, transparent 28.75%); } 30% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 30%, transparent 30%); } 31.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 31.25%, transparent 31.25%); } 32.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 32.5%, transparent 32.5%); } 33.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 33.75%, transparent 33.75%); } 35% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 35%, transparent 35%); } 36.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 36.25%, transparent 36.25%); } 37.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 37.5%, transparent 37.5%); } 38.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 38.75%, transparent 38.75%); } 40% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 40%, transparent 40%); } 41.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 41.25%, transparent 41.25%); } 42.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 42.5%, transparent 42.5%); } 43.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 43.75%, transparent 43.75%); } 45% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 45%, transparent 45%); } 46.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 46.25%, transparent 46.25%); } 47.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 47.5%, transparent 47.5%); } 48.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 48.75%, transparent 48.75%); } 50% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 50%, transparent 50%); } 51.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 51.25%, transparent 51.25%); } 52.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 52.5%, transparent 52.5%); } 53.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 53.75%, transparent 53.75%); } 55% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 55%, transparent 55%); } 56.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 56.25%, transparent 56.25%); } 57.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 57.5%, transparent 57.5%); } 58.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 58.75%, transparent 58.75%); } 60% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 60%, transparent 60%); } 61.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 61.25%, transparent 61.25%); } 62.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 62.5%, transparent 62.5%); } 63.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 63.75%, transparent 63.75%); } 65% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 65%, transparent 65%); } 66.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 66.25%, transparent 66.25%); } 67.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 67.5%, transparent 67.5%); } 68.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 68.75%, transparent 68.75%); } 70% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 70%, transparent 70%); } 71.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 71.25%, transparent 71.25%); } 72.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 72.5%, transparent 72.5%); } 73.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 73.75%, transparent 73.75%); } 75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 75%, transparent 75%); } 76.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 76.25%, transparent 76.25%); } 77.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 77.5%, transparent 77.5%); } 78.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 78.75%, transparent 78.75%); } 80% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 80%, transparent 80%); } 81.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 81.25%, transparent 81.25%); } 82.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 82.5%, transparent 82.5%); } 83.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 83.75%, transparent 83.75%); } 85% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 85%, transparent 85%); } 86.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 86.25%, transparent 86.25%); } 87.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 87.5%, transparent 87.5%); } 88.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 88.75%, transparent 88.75%); } 90% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 90%, transparent 90%); } 91.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 91.25%, transparent 91.25%); } 92.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 92.5%, transparent 92.5%); } 93.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 93.75%, transparent 93.75%); } 95% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 95%, transparent 95%); } 96.25% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 96.25%, transparent 96.25%); } 97.5% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 97.5%, transparent 97.5%); } 98.75% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 98.75%, transparent 98.75%); } 100% { background-image: linear-gradient(to bottom, #c1a31c 0%, #c1a31c 100%, transparent 100%); } } *, *::before, *::after { border: 0; margin: 0; padding: 0; box-sizing: border-box; } html { box-sizing: border-box; font-size: 62.5%; background-color: var(--color-secondary); } @media only screen and (max-width: 62.5em) { html { font-size: 50%; } } @media only screen and (max-width: 50em) { html { font-size: 48%; } } body { font-family: var(--font-primary); color: var(--color-quaternary); font-weight: 300; line-height: 1.6; overflow-x: hidden; } .heading-primary { font-family: var(--font-display); color: #000; } .heading-primary--main { display: block; font-size: 6rem; font-weight: 400; color: var(--color-primary-light-2); letter-spacing: 3.5rem; animation: moveInBottom 1s 2s backwards; } @media only screen and (max-width: 31.25em) { .heading-primary--main { font-size: 4rem; letter-spacing: 1.5rem; } } .heading-primary--sub { display: block; font-size: var(--default-font-size); text-transform: uppercase; animation: moveInTop 1s 1s backwards; } @media only screen and (max-width: 31.25em) { .heading-primary--sub { font-size: var(--default-font-size); letter-spacing: 1rem; } } .heading-1 { font-family: var(--font-display); font-size: 3rem; line-height: 1; text-transform: uppercase; letter-spacing: .1rem; color: var(--color-blue-light-1); transition: all .2s ease; } .heading-1:hover { transform: skewY(2deg) skewX(15deg) scale(1.1); text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.5); } .heading-1--white { color: var(--color-secondary); } .heading-1--blue { color: var(--color-primary-light-2); } .heading-1--yellow { color: var(--color-yellow-dark); } .heading-3 { font-size: 1.6rem; line-height: 1; text-transform: uppercase; } .heading-3--blue { color: var(--color-primary); } .heading-3--white { color: var(--color-secondary); } .heading-3--yellow { color: var(--color-yellow); } .heading-3--yellow-dark { color: var(--color-yellow-dark); } .heading-5 { font-size: 1.2rem; font-weight: 700; line-height: 1; text-transform: uppercase; } .heading-5--blue { color: var(--color-soda); } .paragraph { font-family: var(--font-primary); font-size: var(--default-font-size); font-weight: 400; } .mb-xs { margin-bottom: 1rem; } .mb-sm { margin-bottom: 2rem; } .mb-md { margin-bottom: 3rem; } .mb-lg { margin-bottom: 4rem; } .mb-hg { margin-bottom: 8rem; } .mt-xs { margin-top: 1rem; } .mt-sm { margin-top: 2rem; } .mt-md { margin-top: 3rem; } .mt-lg { margin-top: 4rem; } .mt-hg { margin-top: 8rem; } .yellow-text { color: var(--color-yellow); } .login { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50rem; height: 50rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); perspective: 150rem; -moz-perspective: 150rem; } @media only screen and (max-width: 50em) { .login { transform: translate(-50%, -50%) scale(0.8); } } .login__shadow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 1rem 1rem rgba(0, 0, 0, 0.7)); animation: opacityLogin 1s ease-out 5.75s; animation-fill-mode: backwards; z-index: 10; } .login__side { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; transition: all .5s ease; backface-visibility: hidden; position: absolute; top: 0; left: 0; } .login__side .iac-logo { align-self: center; width: 5rem; object-fit: cover; display: block; } .login__side--front { text-align: center; line-height: 1.2; background-color: var(--color-primary); color: var(--color-secondary); gap: 2rem; cursor: pointer; } .login__side--front .greetings { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 3.5rem; } .login__side--front .greetings .gamechanger-text { text-transform: uppercase; font-size: 4.5rem; font-weight: 400; background-image: linear-gradient(to right, var(--color-yellow), var(--color-yellow-dark)); display: inline-block; -webkit-background-clip: text; color: transparent; } .login__side--front .hover-click-text { font-family: var(--font-primary); font-size: var(--default-font-size); font-weight: 400; animation: pulsateText 1s infinite; } .login__side--back { transform: rotateY(180deg); background-color: var(--color-primary); display: flex; flex-direction: column; align-items: center; } .login.active .login__side--front { transform: rotateY(-180deg); } .login.active .login__side--back { transform: rotateY(0); } .section-login { width: 100vw; height: 100vh; position: relative; } .section-login .intro-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; font-family: var(--font-display); font-weight: 300; font-size: 3.5rem; color: var(--color-secondary); } @media only screen and (max-width: 37.5em) { .section-login .intro-message { font-size: 2.5rem; } } @media only screen and (max-width: 31.25em) { .section-login .intro-message { z-index: 1; } } .section-login .intro-message .iac-bg-logo { width: 15rem; object-fit: cover; display: block; } @media only screen and (max-width: 37.5em) { .section-login .intro-message .iac-bg-logo { width: 10rem; } } .bg-video { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 0; opacity: .05; overflow: hidden; } .bg-video__content { height: 100%; width: 100%; object-fit: cover; } .form { display: flex; flex-direction: column; align-items: flex-start; max-width: 70%; } .form__group:last-child { align-self: center; max-width: 100%; } .form__input { font-size: 1.5rem; font-family: var(--font-primary); padding: 1.25rem 1.75rem; display: block; border-radius: .2rem; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border: none; border-bottom: 2px solid transparent; transition: all .3s; border-bottom: 2px solid var(--color-secondary); background-color: transparent; } .form__input:hover:focus, .form__input:focus, .form__input:hover { outline: none; background-image: linear-gradient(to top, #F9F7F7 0%, #F9F7F7 100%, transparent 100%); color: var(--color-grey); animation: animateTextboxBg .15s ease; animation-fill-mode: backwards; } .form__input:not(:focus):not(:hover) { color: var(--color-secondary-dark); } .form__input:invalid:hover:focus, .form__input:invalid:hover, .form__input:invalid:focus { border-bottom: 2px solid var(--color-red); } .form__input:invalid:hover:focus + label, .form__input:invalid:hover + label, .form__input:invalid:focus + label { color: var(--color-red); } .form__input:valid:hover:focus, .form__input:valid:hover, .form__input:valid:focus { border-bottom: 2px solid var(--color-green); } .form__input:valid:hover:focus + label, .form__input:valid:hover + label, .form__input:valid:focus + label { color: var(--color-green); } .form__input::placeholder { color: var(--color-secondary-dark); } .form__input--select { align-self: flex-start; } .form__label { font-family: var(--font-primary); font-size: 1rem; font-weight: 500; color: var(--color-secondary); margin-left: 1.75rem; margin-top: .5rem; display: block; transition: all .3s; } .form__input:placeholder-shown + .form__label { opacity: 0; visibility: hidden; transform: translateY(-4rem); } .form__dropdown :first-child { font-style: italic; } .form__dropdown:invalid + .form__label { opacity: 0; visibility: hidden; transform: translateY(-4rem); } .btn-text { background: none; border: none; outline: none; padding: .5rem; cursor: pointer; font-family: var(--font-display); font-size: var(--default-font-size); color: var(--color-yellow); border-bottom: 0.1rem solid var(--color-yellow); transition: all .2s; } .btn-text:hover { box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5); transform: translateY(-0.2rem); } .btn-text:hover span { margin-left: 8px; } .btn-text:active { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.5); transform: translateY(0); } .btn-text:focus { animation: pulsate 1s infinite; animation-fill-mode: backwards; } .btn-text span { margin-left: 4px; transition: all .2s; } .btn-inquire { border: none; outline: none; border-radius: 4px; padding: 1.2rem; background-color: var(--color-primary-light-2); cursor: pointer; transition: all .2s ease; display: flex; align-items: center; gap: 1rem; } @media only screen and (max-width: 31.25em) { .btn-inquire { width: auto; } } .btn-inquire__icon-info-with-circle { width: 2rem; height: 2rem; fill: var(--color-secondary); } .btn-inquire__text { font-family: var(--font-primary); font-weight: 600; color: var(--color-secondary); text-transform: uppercase; letter-spacing: .15rem; } @media only screen and (max-width: 31.25em) { .btn-inquire__text { display: none; } } .btn-inquire:hover, .btn-inquire:active { background-color: var(--color-primary-light-1); } .gallery-video { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; overflow: hidden; } .gallery-video__content { width: 100%; height: 100%; object-fit: cover; } .section-gallery-intro.cover .gallery-video__content { display: none; } .gallery-video__content--picture { display: none; object-fit: cover; width: 100%; height: 100%; object-fit: cover; } .section-gallery-intro.cover .gallery-video__content--picture { display: block; object-position: bottom; } .welcome-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 80%; animation-fill-mode: backwards; opacity: 0; visibility: hidden; font-family: var(--font-display); font-size: 4rem; font-weight: 400; letter-spacing: .1rem; color: var(--color-secondary-dark-3); transition: all .2s ease; text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.5); } @media only screen and (max-width: 37.5em) { .welcome-message { font-size: 3.6rem; } } @media only screen and (max-width: 31.25em) { .welcome-message { font-size: 3.2rem; } } @media only screen and (max-width: 21.8em) { .welcome-message { font-size: 2.8rem; } } .welcome-message--1 { animation: animateMessage 2s; } .welcome-message--2 { animation: animateMessage 2s 2s; } .welcome-message--3 { animation: animateMessage 2s 4s; } .welcome-message--4 { animation: animateMessage 2s 6s; } .welcome-message--5 { animation: animateMessage 2s 8s; } .welcome-message--6 { animation: animateLastMessage 2s 10s; animation-fill-mode: forwards; } .welcome-message--6.end { animation-fill-mode: backwards; animation: endMessage 1s; } .welcome-message--button:link, .welcome-message--button:visited { display: block; background-color: var(--color-yellow-dark-2); width: 5rem; height: 5rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); animation: animateMessageButton 2s 10s; animation-fill-mode: forwards; position: relative; transition: all .2s ease; } .welcome-message--button:link:hover, .welcome-message--button:visited:hover { clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); } .welcome-message--button:link:active, .welcome-message--button:visited:active { color: var(--color-yellow-dark); clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%); width: 4.6rem; height: 4.6rem; } .welcome-message--button:link.end, .welcome-message--button:visited.end { animation: endButton 1s; } .welcome-message--button__shadow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 1rem 1rem rgba(0, 0, 0, 0.4)); animation: pulsateMessageButton 1s infinite; } .welcome-message__highlight { font-weight: 700; color: var(--color-yellow-dark-2); } .list { list-style: none; padding: 3rem 0; display: flex; flex-wrap: wrap; gap: 1rem; max-width: 40rem; } @media only screen and (max-width: 50em) { .list { flex-direction: column; align-items: center; gap: 3rem; } } .list__item { flex: 0 0 calc(50% - 1rem); margin-bottom: .7rem; padding-bottom: .7rem; border-bottom: 1px solid var(--color-secondary-dark); color: var(--color-secondary); font-family: var(--font-primary); display: flex; align-items: center; gap: 1rem; } @media only screen and (max-width: 50em) { .list__item { border-bottom: none; } } .search__checkbox { display: none; } .search__button { background-color: transparent; height: 7rem; width: 7rem; border-radius: 50%; z-index: 200; position: fixed; top: 4rem; right: 14rem; text-align: center; cursor: pointer; transition: all .5s ease; } @media only screen and (max-width: 37.5em) { .search__button { top: 12rem; right: 4rem; } } .search__button.colored { background-color: var(--color-primary-light-2); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2); } .search__button.colored > .search__icon { fill: var(--color-secondary); } .search__background { height: 6rem; width: 6rem; border-radius: 50%; position: fixed; top: 4.5rem; right: 14.5rem; background-image: radial-gradient(rgba(17, 45, 78, 0.95), rgba(16, 39, 67, 0.95)); z-index: 100; transform: scale(0); transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1); } @media only screen and (max-width: 37.5em) { .search__background { top: 12.5rem; right: 4.5rem; } } .search__search-area { height: 100vh; position: fixed; top: 0; left: 0; z-index: 150; opacity: 0; width: 0; transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6); display: flex; flex-direction: column; align-items: center; justify-content: center; } .search__checkbox:checked ~ .search__search-area .search__content { transform: translateX(0); } @media only screen and (max-width: 48em) { .search__checkbox:checked ~ .search__search-area .search__content { transform: translateX(10rem); } } .search__content { transition: all .5s ease; transform: translateX(-100%); } .search__form { z-index: 200; margin-bottom: 6rem; display: flex; flex-direction: column; } .search__input { border: none; background-color: transparent; font-family: var(--font-primary); font-size: 8rem; font-weight: 600; color: var(--color-secondary); max-width: 55rem; padding: 1rem; } .search__input::-webkit-input-placeholder { color: var(--color-secondary-dark); } .search__label { font-size: var(--default-font-size); color: var(--color-secondary-dark); letter-spacing: .05rem; margin-left: 1rem; } .search__checkbox:checked ~ .search__background { transform: scale(80); } .search__checkbox:checked ~ .search__search-area { opacity: 1; width: 100%; z-index: 1100; } .search__checkbox:checked ~ .search__background { z-index: 1000; } .search__checkbox:checked + .search__button { z-index: 1999; background-color: var(--color-secondary); } .search__button:hover { background-color: var(--color-primary-light-1); } .search__icon { height: 2rem; width: 2rem; fill: var(--color-secondary-dark); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .search__checkbox:not(:checked) + .search__button:hover .search__icon { fill: var(--color-secondary-dark-3); } .search__checkbox:checked + .search__button.colored .search__icon { fill: var(--color-grey-light-1); } .about { color: var(--color-secondary-dark-4); margin: 25rem 20rem; display: flex; flex-direction: column; } @media only screen and (max-width: 48em) { .about { margin: 25rem 5rem; } } .about__text { min-height: 25rem; } .about__text p { font-size: 2rem; animation: animateAboutText 1s backwards; transform-origin: bottom; } .about__text > p:not(:last-child) { margin-bottom: 4rem; } .about__button { margin: 0 auto; } .about.shown { animation: animateAboutText 1.4s backwards; opacity: 1; visibility: visible; } .about:not(.shown) { opacity: 0; visibility: hidden; } .about.shown .about__highlight-phrase { font-family: var(--font-display); font-style: italic; font-size: 2.2rem; color: var(--color-yellow-dark-2); } .about.shown .about__highlight-phrase--1 { animation: animateAboutHighlight 1.5s 2s backwards; } .about.shown .about__highlight-phrase--2 { animation: animateAboutHighlight 1.5s 3.5s backwards; } .about.shown .about__highlight-phrase--3 { animation: animateAboutHighlight 1.5s 5s backwards; } .about__heading { text-align: center; } .header { height: 100vh; overflow: hidden; background-color: var(--color-secondary); z-index: -2; overflow: hidden; } .header__text-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -65%); text-align: center; z-index: 1; animation: moveToTopTextbox 1s 3s backwards; } .next-prev { display: flex; justify-content: space-between; align-items: center; } @media only screen and (max-width: 48em) { .next-prev { transform: translateY(10rem); } } @media only screen and (max-width: 26.56em) { .next-prev { transform: translateY(15rem); } } .next-prev__indicator { width: 18rem; height: 2rem; display: flex; gap: 1.25rem; } @media only screen and (max-width: 64em) { .next-prev__indicator { width: 32rem; gap: 4rem; } } .next-prev__indicator > * { width: 33.33%; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background-color: var(--color-grey-light-1); transition: all .5s ease; cursor: pointer; } .next-prev__indicator:hover :not(:hover):not(.next-prev__indicator:hover.active) { transform: scale(0.8); } .next-prev__button { user-select: none; width: 2rem; height: 2rem; } @media only screen and (max-width: 64em) { .next-prev__button { width: 3.2rem; height: 3.2rem; } } .next-prev__button.active { background-color: var(--color-secondary); transform: scale(1.3); } .campus { width: 100%; height: 50vw; background-color: var(--color-primary); display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 50%); } @media only screen and (max-width: 87.5em) { .campus { grid-template-rows: 60% 40%; } } @media only screen and (max-width: 75em) { .campus { grid-template-rows: 65% 35%; } } @media only screen and (max-width: 90em) { .campus { height: 70vw; } } @media only screen and (max-width: 64em) { .campus { height: 75vw; } } @media only screen and (max-width: 48em) { .campus { grid-template-columns: repeat(2, 1fr); grid-template-rows: 3fr repeat(2, 1fr); height: 200vw; } } @media only screen and (max-width: 31.25em) { .campus { height: 225vw; } } @media only screen and (max-width: 26.56em) { .campus { height: 350vw; } } @media only screen and (max-width: 20em) { .campus { height: 400vw; } } .campus__top, .campus__bottom, .campus__text-area { position: relative; z-index: 2; /* Ensure these elements are above the pseudo-element */ overflow: hidden; } .campus__text-area { grid-row: 1 / -1; grid-column: 1 / 2; position: relative; padding: 8rem; display: flex; flex-direction: column; align-items: center; } @media only screen and (max-width: 87.5em) { .campus__text-area { grid-row: 1 / 2; grid-column: 1 / -1; justify-content: center; } } @media only screen and (max-width: 48em) { .campus__text-area { padding: 4rem; } } .campus__text-area::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40%; height: 40%; background-image: url("../img/iac-logo.webp"); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.08; z-index: 1; } .campus__text-area.shown > * { animation: animateAboutText 1.4s backwards; opacity: 1; visibility: visible; } .campus__text-area:not(.shown) > * { opacity: 0; visibility: hidden; } .campus__paragraphs { color: var(--color-blue-light-1); } @media only screen and (max-width: 87.5em) { .campus__paragraphs { column-count: 2; column-gap: 4rem; column-rule: 1px solid var(--color-primary-light-1); } } @media only screen and (max-width: 48em) { .campus__paragraphs { column-count: 1; } } .campus__paragraphs :not(:last-child) { margin-bottom: 3rem; } .campus__top { grid-row: 1 / 2; grid-column: 2 / 3; } @media only screen and (max-width: 87.5em) { .campus__top { grid-row: 2 / 3; grid-column: 1 / 2; } } @media only screen and (max-width: 48em) { .campus__top { grid-row: 2 / 3; grid-column: 1 / -1; } } .campus__bottom { grid-row: 2 / 3; grid-column: 2 / 3; } @media only screen and (max-width: 48em) { .campus__bottom { grid-row: 3 / 4; grid-column: 1 / -1; } } .campus__img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 100%; cursor: pointer; display: block; transform: scale(1.2); transition: all 2s ease; } .campus__img.active { transform: scale(1); object-position: 25% 0%; } .campus__caption { font-family: var(--font-display); font-size: 7rem; font-weight: 600; text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2); background-image: linear-gradient(to top, var(--color-primary-light-1) 0%, var(--color-primary-light-1) 50%, var(--color-secondary) 50%); display: inline-block; -webkit-background-clip: text; color: transparent; position: absolute; top: 60%; left: 55%; transition: all 1s ease 1.5s; transform: translateY(25rem); } @media only screen and (max-width: 64em) { .campus__caption { transform: translate(-5rem, 25rem); } } .campus__img.active + .campus__caption { transform: translateY(0); } @media only screen and (max-width: 64em) { .campus__img.active + .campus__caption { transform: translate(-5rem, 0); } } .meet-iac { width: 100%; height: 50vw; padding: 10rem; background-color: var(--color-secondary); display: grid; grid-template-columns: 1fr 3fr; grid-template-rows: 1fr 5fr; align-items: center; row-gap: 6rem; overflow: hidden; } @media only screen and (max-width: 1600px) { .meet-iac { height: 60vw; } } @media only screen and (max-width: 87.5em) { .meet-iac { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 5fr; row-gap: 0; height: 80vw; } } @media only screen and (max-width: 75em) { .meet-iac { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 5fr; row-gap: 4rem; } } @media only screen and (max-width: 50em) { .meet-iac { padding: 5rem; row-gap: 0; } } @media only screen and (max-width: 1200px) { .meet-iac { height: 100vw; } } @media only screen and (max-width: 1100px) { .meet-iac { height: 120vw; } } @media only screen and (max-width: 660px) { .meet-iac { height: 160vw; } } @media only screen and (max-width: 600px) { .meet-iac { height: 200vw; } } @media only screen and (max-width: 31.25em) { .meet-iac { padding: 2rem; } } @media only screen and (max-width: 400px) { .meet-iac { height: 225vw; } } .meet-iac__heading { grid-row: 1 / 2; grid-column: 1 / 2; justify-self: center; align-self: center; z-index: 100; } @media only screen and (max-width: 400px) { .meet-iac__heading { transform: translateX(-3rem); } } @media only screen and (max-width: 380px) { .meet-iac__heading { transform: translateX(-5rem); } } @media only screen and (max-width: 345px) { .meet-iac__heading { transform: translateX(-7rem); } } .meet-iac__nav { grid-row: 2 / 3; grid-column: 1 / 2; align-self: start; z-index: 100; } .meet-iac__gallery { grid-row: 1 / -1; grid-column: 2 / 3; justify-self: center; align-items: center; height: 50rem; width: 100%; } @media only screen and (max-width: 87.5em) { .meet-iac__gallery { grid-row: 3 / 4; grid-column: 1 / 2; } } .iac-nav { height: 60%; display: grid; grid-template-columns: 3rem 1fr; grid-template-rows: repeat(3, 1fr); align-items: center; column-gap: 1rem; } @media only screen and (max-width: 87.5em) { .iac-nav { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); } } @media only screen and (max-width: 31.25em) { .iac-nav { grid-template-columns: 2fr 8fr; grid-template-rows: repeat(3, 1fr); column-gap: 0; row-gap: 1rem; } } @media only screen and (max-width: 31.25em) { .iac-nav { justify-self: start; } } .iac-nav__dot-wrap { cursor: pointer; } .iac-nav__dot-wrap--1 { grid-row: 1 / 2; grid-column: 1 / 2; align-self: start; } @media only screen and (max-width: 87.5em) { .iac-nav__dot-wrap--1 { grid-row: 2 / 2; grid-column: 1 / 2; justify-self: center; align-self: start; } } @media only screen and (max-width: 31.25em) { .iac-nav__dot-wrap--1 { grid-row: 1 / 2; grid-column: 1 / 2; align-self: center; } } .iac-nav__dot-wrap--2 { grid-row: 2 / 3; grid-column: 1 / 2; } @media only screen and (max-width: 87.5em) { .iac-nav__dot-wrap--2 { grid-row: 2 / 2; grid-column: 2 / 3; justify-self: center; align-self: start; } } @media only screen and (max-width: 31.25em) { .iac-nav__dot-wrap--2 { grid-row: 2 / 3; grid-column: 1 / 2; align-self: center; } } .iac-nav__dot-wrap--3 { grid-row: 3 / 4; grid-column: 1 / 2; align-self: end; } @media only screen and (max-width: 87.5em) { .iac-nav__dot-wrap--3 { grid-row: 2 / 2; grid-column: 3 / 4; justify-self: center; align-self: start; } } @media only screen and (max-width: 31.25em) { .iac-nav__dot-wrap--3 { grid-row: 3 / 4; grid-column: 1 / 2; align-self: center; } } .iac-nav__dot { width: 1.5rem; height: 1.5rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background-color: var(--color-secondary-dark); transition: all 1s ease; } .iac-nav.man-com .iac-nav__dot-wrap#dotManCom > * { background-color: var(--color-yellow-dark-1); } .iac-nav.aca-hea .iac-nav__dot-wrap#dotManCom > * { background-color: var(--color-yellow-dark-1); transition: all 1s ease; } @media only screen and (max-width: 87.5em) { .iac-nav.aca-hea .iac-nav__dot-wrap#dotManCom > * { background-color: var(--color-secondary-dark); } } .iac-nav.aca-hea .iac-nav__dot-wrap#dotAcaHea > * { background-color: var(--color-yellow-dark-1); transition: all 1s ease 1s; } @media only screen and (max-width: 87.5em) { .iac-nav.aca-hea .iac-nav__dot-wrap#dotAcaHea > * { transition: all 1s ease; } } .iac-nav.dep .iac-nav__dot-wrap#dotManCom > * { background-color: var(--color-yellow-dark-1); transition: all 1s ease 1s; } @media only screen and (max-width: 87.5em) { .iac-nav.dep .iac-nav__dot-wrap#dotManCom > * { background-color: var(--color-secondary-dark); } } .iac-nav.dep .iac-nav__dot-wrap#dotAcaHea > * { background-color: var(--color-yellow-dark-1); transition: all 1s ease 1s; } @media only screen and (max-width: 87.5em) { .iac-nav.dep .iac-nav__dot-wrap#dotAcaHea > * { background-color: var(--color-secondary-dark); transition: all 1s ease; } } .iac-nav.dep .iac-nav__dot-wrap#dotDep > * { background-color: var(--color-yellow-dark-1); transition: all 1s ease 1.5s; } @media only screen and (max-width: 87.5em) { .iac-nav.dep .iac-nav__dot-wrap#dotDep > * { transition: all 1s ease; } } .iac-nav__line { grid-row: 1 / -1; grid-column: 1 / 2; margin-left: .67rem; width: .2rem; height: 100%; background-color: var(--color-grey-light-1); background-size: cover; } @media only screen and (max-width: 87.5em) { .iac-nav__line { display: none; } } .iac-nav.aca-hea .iac-nav__line { animation: animateMeetIacLineAcaHea 1s .2s backwards; background-image: linear-gradient(to bottom, var(--color-yellow-dark-1) 0%, var(--color-yellow-dark-1) 50%, transparent 50%); } .iac-nav.dep .iac-nav__line { animation: animateMeetIacLineDep 1s .2s backwards; background-image: linear-gradient(to bottom, var(--color-yellow-dark-1) 0%, var(--color-yellow-dark-1) 100%, transparent 100%); } .iac-nav__text { font-family: var(--font-display); font-size: 2.2rem; font-weight: 350; color: var(--color-grey-light-1); cursor: pointer; transition: all .5s ease; } @media only screen and (max-width: 87.5em) { .iac-nav__text { text-align: center; } } @media only screen and (max-width: 31.25em) { .iac-nav__text { text-align: start; } } .iac-nav__text--1 { grid-row: 1 / 2; grid-column: 2 / 3; align-self: start; transform: translateY(-20%); } .iac-nav__text--1:hover { transform: translate(1rem, -20%); } @media only screen and (max-width: 87.5em) { .iac-nav__text--1:hover { transform: translateY(-1rem); } } @media only screen and (max-width: 87.5em) { .iac-nav__text--1:hover { transform: translateX(1rem); } } @media only screen and (max-width: 87.5em) { .iac-nav__text--1 { grid-row: 1 / 2; grid-column: 1 / 2; transform: translateY(0); align-self: center; justify-self: center; } } @media only screen and (max-width: 31.25em) { .iac-nav__text--1 { grid-row: 1 / 2; grid-column: 2 / 3; justify-self: start; } } .iac-nav__text--2 { grid-row: 2 / 3; grid-column: 2 / 3; } .iac-nav__text--2:hover { transform: translateX(1rem); } @media only screen and (max-width: 87.5em) { .iac-nav__text--2:hover { transform: translateY(-1rem); } } @media only screen and (max-width: 87.5em) { .iac-nav__text--2:hover { transform: translateX(1rem); } } @media only screen and (max-width: 87.5em) { .iac-nav__text--2 { grid-row: 1 / 2; grid-column: 2 / 3; justify-self: center; transform: translateY(0); } } @media only screen and (max-width: 31.25em) { .iac-nav__text--2 { grid-row: 2 / 3; grid-column: 2 / 3; justify-self: start; } } .iac-nav__text--3 { grid-row: 3 / 4; grid-column: 2 / 3; align-self: end; transform: translateY(20%); } .iac-nav__text--3:hover { transform: translate(1rem, 20%); } @media only screen and (max-width: 87.5em) { .iac-nav__text--3:hover { transform: translateY(-1rem); } } @media only screen and (max-width: 87.5em) { .iac-nav__text--3:hover { transform: translateX(1rem); } } @media only screen and (max-width: 87.5em) { .iac-nav__text--3 { grid-row: 1 / 2; grid-column: 3 / 4; justify-self: center; align-self: center; transform: translateY(0); } } @media only screen and (max-width: 31.25em) { .iac-nav__text--3 { grid-row: 3 / 4; grid-column: 2 / 3; justify-self: start; } } .iac-nav.man-com .iac-nav__text#managementCommittee { color: var(--color-primary); } .iac-nav.aca-hea .iac-nav__text#academicHeads { color: var(--color-primary); } .iac-nav.dep .iac-nav__text#departments { color: var(--color-primary); } .iac-gallery { align-self: center; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 1fr); column-gap: 2rem; transition: all 1s ease; } @media only screen and (max-width: 160em) { .iac-gallery { row-gap: 3rem; } } @media only screen and (max-width: 660px) { .iac-gallery { grid-template-rows: repeat(7, 1fr); align-self: start; } } @media only screen and (max-width: 31.25em) { .iac-gallery { transform: scale(0.8); } } @media only screen and (max-width: 26.56em) { .iac-gallery { transform: scale(0.8) translateX(-2rem); } } @media only screen and (max-width: 400px) { .iac-gallery { transform: scale(0.8) translateX(-3rem); } } @media only screen and (max-width: 390px) { .iac-gallery { transform: scale(0.8) translateX(-6rem); } } @media only screen and (max-width: 370px) { .iac-gallery { transform: scale(0.75) translateX(-7rem); } } @media only screen and (max-width: 350px) { .iac-gallery { transform: scale(0.75) translateX(-9rem); } } @media only screen and (max-width: 330px) { .iac-gallery { transform: scale(0.75) translateX(-11rem); } } .iac-gallery__instruction { grid-row: 3 / 4; grid-column: 4 / span 2; font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--color-grey-light-2); z-index: 500; cursor: pointer; transition: color .2s ease; display: flex; justify-content: center; align-items: center; } .iac-gallery__instruction:hover { color: var(--color-grey-light-1); } .iac-gallery__instruction.used { display: none; } .iac-gallery__item { width: 100%; height: 100%; filter: drop-shadow(0 0.2rem 1rem rgba(0, 0, 0, 0.2)); display: flex; justify-content: center; align-items: center; transition: all 1s ease; } @media only screen and (max-width: 160em) { .iac-gallery__item { transform: scale(1.5); } } @media only screen and (max-width: 1900px) { .iac-gallery__item { transform: scale(1.2); } } @media only screen and (max-width: 1600px) { .iac-gallery__item { transform: scale(1); } } .iac-gallery__item--1 { grid-row: 1 / 2; grid-column: 4 / span 2; } .iac-gallery__item--2 { grid-row: 2 / 3; grid-column: 4 / 5; } .iac-gallery__item--3 { grid-row: 2 / 3; grid-column: 5 / 6; } .iac-gallery__item--4 { grid-row: 3 / 4; grid-column: 3 / span 2; } @media only screen and (max-width: 48em) { .iac-gallery__item--4.mc { transform: translateX(-4rem); } } .iac-gallery__item--5 { grid-row: 3 / 4; grid-column: 4 / span 2; } .iac-gallery__item--6 { grid-row: 3 / 4; grid-column: 5 / span 2; } @media only screen and (max-width: 48em) { .iac-gallery__item--6.mc { transform: translateX(4rem); } } .iac-gallery__item--7 { grid-row: 4 / 5; grid-column: 3 / 4; } .iac-gallery__item--8 { grid-row: 4 / 5; grid-column: 4 / 5; } .iac-gallery__item--9 { grid-row: 4 / 5; grid-column: 5 / 6; } .iac-gallery__item--10 { grid-row: 4 / 5; grid-column: 6 / 7; } .iac-gallery__item--11 { grid-row: 5 / 6; grid-column: 2 / span 2; } @media only screen and (max-width: 75em) { .iac-gallery__item--11 { transform: translateX(-2rem); } } @media only screen and (max-width: 600px) { .iac-gallery__item--11 { transform: translateX(-4rem); } } .iac-gallery__item--12 { grid-row: 5 / 6; grid-column: 3 / span 2; } .iac-gallery__item--13 { grid-row: 5 / 6; grid-column: 4 / span 2; } .iac-gallery__item--14 { grid-row: 5 / 6; grid-column: 5 / span 2; } .iac-gallery__item--15 { grid-row: 5 / 6; grid-column: 6 / span 2; } @media only screen and (max-width: 75em) { .iac-gallery__item--15 { transform: translateX(2rem); } } @media only screen and (max-width: 600px) { .iac-gallery__item--15 { transform: translateX(4rem); } } .iac-gallery__item.text-item { font-size: 1rem; } .iac-gallery__item.text-item > * { transition: all 1s ease; } .iac-gallery__item.text-item > * > * { transition: all .5s ease 1s; } .iac-gallery__item--soda-text { grid-row: 2 / 3; grid-column: 1 / span 3; font-family: var(--font-display); color: var(--color-soda); } @media only screen and (max-width: 660px) { .iac-gallery__item--soda-text { grid-row: 6 / 7; grid-column: 3 / span 4; } } .iac-gallery__item--sbla-text { grid-row: 3 / 4; grid-column: 7 / span 2; font-family: var(--font-display); color: var(--color-sbla); } @media only screen and (max-width: 660px) { .iac-gallery__item--sbla-text { grid-row: 7 / 8; grid-column: 3 / span 4; } } .iac-gallery__item--soc-text { grid-row: 4 / 5; grid-column: 1 / span 2; font-family: var(--font-display); color: var(--color-soc); } @media only screen and (max-width: 660px) { .iac-gallery__item--soc-text { grid-row: 8 / 9; grid-column: 3 / span 4; } } .iac-gallery__item--shs-text { grid-row: 5 / 6; grid-column: 8 / span 2; font-family: var(--font-display); color: var(--color-shs); } @media only screen and (max-width: 660px) { .iac-gallery__item--shs-text { grid-row: 9 / 10; grid-column: 3 / span 4; } } .iac-gallery__item--departments { grid-row: 1 / -1; grid-column: 1 / -1; justify-self: end; width: 90%; height: 100%; padding: 8rem; filter: drop-shadow(0 0.2rem 1rem rgba(0, 0, 0, 0.5)); background-size: cover; background-position: left; } @media only screen and (max-width: 87.5em) { .iac-gallery__item--departments { grid-row: 1 / -1; grid-column: 1 / -1; width: 100%; } } @media only screen and (max-width: 48em) { .iac-gallery__item--departments { padding: 4rem; } } @media only screen and (max-width: 26.56em) { .iac-gallery__item--departments { width: 120%; transform: translateX(10rem); } } @media only screen and (max-width: 26.56em) { .iac-gallery__item--departments { width: 130%; transform: translateX(15rem); } } .iac-gallery__item--departments--admission { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 70%, transparent 70%), url(../img/admission-office-department.webp); } @media only screen and (max-width: 600px) { .iac-gallery__item--departments--admission { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 100%, transparent 100%), url(../img/admission-office-department.webp); } } .iac-gallery__item--departments--registrar { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 70%, transparent 70%), url(../img/registrar.webp); } @media only screen and (max-width: 600px) { .iac-gallery__item--departments--registrar { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 100%, transparent 100%), url(../img/registrar.webp); } } .iac-gallery__item--departments--finance { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 70%, transparent 70%), url(../img/finance-office.webp); } @media only screen and (max-width: 600px) { .iac-gallery__item--departments--finance { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 100%, transparent 100%), url(../img/finance-office.webp); } } .iac-gallery__item--departments--it { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 70%, transparent 70%), url(../img/it.webp); } @media only screen and (max-width: 600px) { .iac-gallery__item--departments--it { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 100%, transparent 100%), url(../img/it.webp); } } .iac-gallery__item--departments--osas { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 70%, transparent 70%), url(../img/osas.webp); } @media only screen and (max-width: 600px) { .iac-gallery__item--departments--osas { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 100%, transparent 100%), url(../img/osas.webp); } } .iac-gallery__item--departments--scholar-dep { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 70%, transparent 70%), url(../img/scholar-dep.webp); } @media only screen and (max-width: 600px) { .iac-gallery__item--departments--scholar-dep { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 100%, transparent 100%), url(../img/scholar-dep.webp); } } .iac-gallery__item--departments--partnership { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 70%, transparent 70%), url(../img/partnership.webp); } @media only screen and (max-width: 600px) { .iac-gallery__item--departments--partnership { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 100%, transparent 100%), url(../img/partnership.webp); } } .iac-gallery__item--departments--human-resource { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 70%, transparent 70%), url(../img/hr.webp); } @media only screen and (max-width: 600px) { .iac-gallery__item--departments--human-resource { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 100%, transparent 100%), url(../img/hr.webp); } } .iac-gallery__item--departments--building-admin { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 70%, transparent 70%), url(../img/building-admin.webp); } @media only screen and (max-width: 600px) { .iac-gallery__item--departments--building-admin { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 100%, transparent 100%), url(../img/building-admin.webp); } } .iac-gallery__item--departments--purchase { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 70%, transparent 70%), url(../img/purchase.webp); } @media only screen and (max-width: 600px) { .iac-gallery__item--departments--purchase { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 100%, transparent 100%), url(../img/purchase.webp); } } .iac-gallery__item--departments--faculty { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 70%, transparent 70%), url(../img/faculty-room.webp); } @media only screen and (max-width: 600px) { .iac-gallery__item--departments--faculty { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 100%, transparent 100%), url(../img/faculty-room.webp); } } .iac-gallery__item--departments--faculty { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 70%, transparent 70%), url(../img/faculty-room.webp); } @media only screen and (max-width: 600px) { .iac-gallery__item--departments--faculty { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 100%, transparent 100%), url(../img/faculty-room.webp); } } .iac-gallery__item--departments--library { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 70%, transparent 70%), url(../img/library.webp); } @media only screen and (max-width: 600px) { .iac-gallery__item--departments--library { background-image: linear-gradient(105deg, rgba(17, 45, 78, 0.9) 0%, rgba(17, 45, 78, 0.9) 100%, transparent 100%), url(../img/library.webp); } } .iac-gallery:not(.active) .iac-gallery__item { z-index: 10; } .iac-gallery:not(.active) .iac-gallery__item > * > * { opacity: 0; visibility: hidden; } .iac-gallery:not(.active) .iac-gallery__item--1 { transform: translate(-14rem, 25rem) scale(1.3); } .iac-gallery:not(.active) .iac-gallery__item--1 > * { background-color: var(--color-soc); } .iac-gallery:not(.active) .iac-gallery__item--2 { transform: translate(23rem, -5rem) scale(0.5); } .iac-gallery:not(.active) .iac-gallery__item--2 > * { background-color: var(--color-soda); } .iac-gallery:not(.active) .iac-gallery__item--3 { transform: translate(-5em, -20rem) scale(1.8); } .iac-gallery:not(.active) .iac-gallery__item--3 > * { background-color: var(--color-sbla); } .iac-gallery:not(.active) .iac-gallery__item--4 { transform: translate(8rem, 7rem) scale(0.7); } .iac-gallery:not(.active) .iac-gallery__item--4 > * { background-color: var(--color-shs); } .iac-gallery:not(.active) .iac-gallery__item--5 { transform: translate(42rem, -15rem) scale(1.1); } .iac-gallery:not(.active) .iac-gallery__item--5 > * { background-color: var(--color-soc); } .iac-gallery:not(.active) .iac-gallery__item--6 { transform: translate(-68rem, 20rem) scale(0.5); } .iac-gallery:not(.active) .iac-gallery__item--6 > * { background-color: var(--color-sbla); } .iac-gallery:not(.active) .iac-gallery__item--7 { transform: translate(-68rem, 15rem); } .iac-gallery:not(.active) .iac-gallery__item--7 > * { background-color: var(--color-soc); } .iac-gallery:not(.active) .iac-gallery__item--8 { transform: translate(-71rem, -38rem) scale(2.3); } .iac-gallery:not(.active) .iac-gallery__item--8 > * { background-color: var(--color-soda); } .iac-gallery:not(.active) .iac-gallery__item--9 { transform: translate(-28rem, 18rem) scale(0.7); grid-row: 4 / 5; grid-column: 5 / 6; } .iac-gallery:not(.active) .iac-gallery__item--9 > * { background-color: var(--color-sbla); } .iac-gallery:not(.active) .iac-gallery__item--10 { transform: translate(15rem, 18rem) scale(1.3); grid-row: 4 / 5; grid-column: 6 / 7; } .iac-gallery:not(.active) .iac-gallery__item--10 > * { background-color: var(--color-shs); } .iac-gallery:not(.active) .iac-gallery__item--11 { transform: translate(-15rem, 18rem) scale(1.7); grid-row: 5 / 6; grid-column: 2 / span 2; } .iac-gallery:not(.active) .iac-gallery__item--11 > * { background-color: var(--color-soda); } .iac-gallery:not(.active) .iac-gallery__item--12 { transform: translate(-40rem, -14rem) scale(1.3); grid-row: 5 / 6; grid-column: 3 / span 2; } .iac-gallery:not(.active) .iac-gallery__item--12 > * { background-color: var(--color-soda); } .iac-gallery:not(.active) .iac-gallery__item--13 { transform: translate(-27rem, -18rem) scale(0.4); grid-row: 5 / 6; grid-column: 4 / span 2; } .iac-gallery:not(.active) .iac-gallery__item--13 > * { background-color: var(--color-soda); } .iac-gallery:not(.active) .iac-gallery__item--14 { transform: translate(5rem, -18rem) scale(1.1); grid-row: 5 / 6; grid-column: 5 / span 2; } .iac-gallery:not(.active) .iac-gallery__item--14 > * { background-color: var(--color-sbla); } .iac-gallery:not(.active) .iac-gallery__item--15 { transform: translate(5rem, -18rem) scale(0.8); grid-row: 5 / 6; grid-column: 6 / span 2; } .iac-gallery:not(.active) .iac-gallery__item--15 > * { background-color: var(--color-soc); } .iac-gallery__content { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background-color: var(--color-primary-light-1); width: 10rem; height: 10rem; aspect-ratio: 1 / 1; transition: all .5s ease 1s; cursor: pointer; } .iac-gallery__content--departments { width: 70%; display: flex; flex-direction: column; } @media only screen and (max-width: 600px) { .iac-gallery__content--departments { width: 100%; } } .iac-gallery__content--departments .department__name { font-family: var(--font-display); font-size: 3rem; font-weight: 450; color: var(--color-yellow-dark-1); display: block; } .iac-gallery__content--departments .department__floor { font-family: var(--font-primary); font-size: 2rem; font-weight: 500; color: var(--color-secondary-dark-2); display: block; } .iac-gallery__content--departments .department__list { list-style: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2.5rem; } .iac-gallery__content--departments .department__item-content { font-family: var(--font-primary); font-size: 1.4rem; color: var(--color-secondary); letter-spacing: .1rem; display: flex; align-items: center; gap: 1.5rem; } .iac-gallery__content--departments .department__item-content--email:link, .iac-gallery__content--departments .department__item-content--email:visited { transition: all .2s ease; } .iac-gallery__content--departments .department__item-content--email:hover { color: var(--color-secondary-dark); } .iac-gallery__content--departments .department__icon-container { display: flex; align-items: center; justify-content: center; } .iac-gallery__content--departments .department__icon { width: 2rem; height: 2rem; fill: var(--color-secondary); transition: all .2s ease; } .iac-gallery__content--departments .department__item-content--email:hover .department__icon { fill: var(--color-secondary-dark); } .iac-gallery__item.soda .iac-gallery__content { background-color: var(--color-soda); } .iac-gallery__item.sbla .iac-gallery__content { background-color: var(--color-sbla); } .iac-gallery__item.soc .iac-gallery__content { background-color: var(--color-soc); } .iac-gallery__item.shs .iac-gallery__content { background-color: var(--color-shs); } .iac-gallery__item:hover { z-index: 20; } .iac-gallery__content:hover, .iac-gallery__content.active { transition: all .5s ease; transform: scale(1.2); } .iac-gallery__caption { transition: all .5s ease 1s; text-align: center; } .iac-gallery__caption > .name { font-family: var(--font-display); font-size: 1rem; color: var(--color-yellow); } .iac-gallery__caption > .position { font-family: var(--font-primary); font-size: .8rem; font-weight: 400; color: var(--color-secondary); } .iac-gallery__content:hover .iac-gallery__caption, .iac-gallery__content.active .iac-gallery__caption { transition: all .5s ease; transform: translateY(-8rem); } .iac-gallery__picture { transition: all .5s ease 1s; width: 100%; height: 100%; object-fit: cover; object-position: top; } .iac-gallery__content:hover .iac-gallery__picture, .iac-gallery__content.active .iac-gallery__picture { transition: all .5s ease; filter: brightness(70%) blur(3px); transform: scale(0.9); object-position: top; } .department-nav { width: 80%; z-index: 2000; display: flex; justify-content: space-between; gap: 1rem; } @media only screen and (max-width: 1600px) { .department-nav { width: 100%; gap: 2rem; } } @media only screen and (max-width: 26.56em) { .department-nav { flex-wrap: wrap; } } .department-nav > * { font-family: var(--font-display); font-size: var(--default-font-size); font-weight: 300; color: var(--color-yellow); cursor: pointer; transition: all .5s ease; display: flex; align-items: center; gap: 1rem; } .department-nav > *:hover { color: var(--color-yellow-dark-1); } .department-nav__prev { text-align: start; } .department-nav__prev:hover { transform: translateX(-1rem); } .department-nav__next { text-align: end; } .department-nav__next:hover { transform: translateX(1rem); } .u-gallery-last-item { grid-row: 4 / 5; grid-column: 5 / 6; } . { width: 100%; padding: 5rem; background-color: var(--color-secondary); display: flex; flex-direction: column; align-items: center; } .events { width: 100%; padding: 15rem 5rem; background-color: var(--color-secondary-dark-3); display: flex; flex-direction: column; align-items: center; gap: 5rem; } @media only screen and (max-width: 26.56em) { .events { padding: 15rem 2rem; } } .events > h2 { color: var(--color-yellow-dark-2); } @media only screen and (max-width: 450px) { .events > h2 { text-align: center; } } .events > h2 > span { color: var(--color-primary-light-2); } .checklist { width: 100%; padding: 5rem; height: 50rem; background-image: linear-gradient(to right, rgba(20, 50, 100, 0.92), rgba(20, 50, 100, 0.92)), url(../img/applying-to-iacademy.webp); background-size: cover; display: grid; align-items: center; grid-template-rows: 1fr 1fr 1.5fr 4fr; grid-template-columns: repeat(4, 1fr); position: relative; } @media only screen and (max-width: 1000px) { .checklist { grid-template-rows: 1fr 1fr 1.5fr 4fr 1.5fr 4fr; grid-template-columns: repeat(2, 1fr); row-gap: 3rem; height: auto; } } @media only screen and (max-width: 420px) { .checklist { grid-template-rows: 1fr 1fr 1.5fr 4fr 1.5fr 4fr 1.5fr 4fr 1.5fr 4fr; grid-template-columns: 1fr; row-gap: 1rem; } } .checklist__heading { grid-row: 1 / 2; grid-column: 1 / -1; position: absolute; background-image: linear-gradient(to top, var(--color-yellow-dark-2) 0%, var(--color-yellow-dark-2) 50%, var(--color-secondary) 50%); display: inline-block; -webkit-background-clip: text; color: transparent; } .checklist__subheading { grid-row: 2 / 3; grid-column: 1 / -1; align-self: start; text-transform: uppercase; font-weight: 500; color: var(--color-secondary); letter-spacing: .1rem; font-style: italic; } .checklist__step { justify-self: center; width: 80%; height: 7rem; background-color: white; clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0 100%, 10% 50%, 0% 0%); padding-left: 15%; overflow: hidden; position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; } @media only screen and (max-width: 1000px) { .checklist__step { transform: translateY(2rem); } } .checklist__step::before { content: ""; position: absolute; left: 80%; width: 80%; height: 7rem; background-color: var(--color-red); clip-path: polygon(90% 0%, 100% 50%, 90% 100%, 0 100%, 10% 50%, 0% 0%); z-index: 1; } .checklist__step--1 { grid-row: 3 / 4; grid-column: 1 / 2; } .checklist__step--2 { grid-row: 3 / 4; grid-column: 2 / 3; } @media only screen and (max-width: 420px) { .checklist__step--2 { grid-row: 5 / 6; grid-column: 1 / 2; } } .checklist__step--3 { grid-row: 3 / 4; grid-column: 3 / 4; } @media only screen and (max-width: 1000px) { .checklist__step--3 { grid-row: 5 / 6; grid-column: 1 / 2; } } @media only screen and (max-width: 420px) { .checklist__step--3 { grid-row: 7 / 8; grid-column: 1 / 2; } } .checklist__step--4 { grid-row: 3 / 4; grid-column: 4 / 5; } @media only screen and (max-width: 1000px) { .checklist__step--4 { grid-row: 5 / 6; grid-column: 2 / 3; } } @media only screen and (max-width: 420px) { .checklist__step--4 { grid-row: 9 / 10; grid-column: 1 / 2; } } .checklist__step-content { align-self: flex-start; margin-top: 2rem; margin-left: 2rem; color: white; } @media only screen and (max-width: 420px) { .checklist__step-content { transform: translateY(2rem); } } .checklist__step-content > h3 { text-transform: uppercase; letter-spacing: .1rem; font-size: var(--default-font-size); color: var(--color-yellow); } .checklist__step-content > ul { margin-left: 2rem; font-size: 1.4rem; } .checklist__step-content--1 { grid-row: 4 / 5; grid-column: 1 / 2; } .checklist__step-content--2 { grid-row: 4 / 5; grid-column: 2 / 3; } @media only screen and (max-width: 420px) { .checklist__step-content--2 { grid-row: 6 / 7; grid-column: 1 / 2; } } .checklist__step-content--3 { grid-row: 4 / 5; grid-column: 3 / 4; } @media only screen and (max-width: 1000px) { .checklist__step-content--3 { grid-row: 6 / 7; grid-column: 1 / 2; } } @media only screen and (max-width: 420px) { .checklist__step-content--3 { grid-row: 8 / 9; grid-column: 1 / 2; } } .checklist__step-content--4 { grid-row: 4 / 5; grid-column: 4 / 5; } @media only screen and (max-width: 1000px) { .checklist__step-content--4 { grid-row: 6 / 7; grid-column: 2 / 3; } } @media only screen and (max-width: 420px) { .checklist__step-content--4 { grid-row: 10 / 11; grid-column: 1 / 2; } } .bold { font-weight: 600; } .goodluck { font-family: var(--font-display); text-decoration: none; color: var(--color-primary); font-weight: 600; font-size: 3rem; } .card { perspective: 150rem; -moz-perspective: 150rem; position: absolute; top: 5%; left: 5%; height: 52rem; width: 30rem; cursor: pointer; transition: all .5s ease; } @media only screen and (max-width: 50em) { .card { left: 50%; transform: translate(-50%, 50%); } } @media only screen and (max-width: 50em) { .card.flipped { transform: translate(-50%, -40%); } } .card__side { font-size: 2rem; height: 52rem; transition: all .8s ease; position: absolute; top: 0; left: 0; width: 100%; backface-visibility: hidden; border-radius: 1rem; overflow: hidden; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); } .card__side--front { background-color: var(--color-secondary); } .card__side--back { transform: rotateY(180deg); } .card__side--back-2 { background-image: linear-gradient(to right bottom, var(--color-yellow), var(--color-yellow-dark)); } .card.flipped .card__side--front { transform: rotateY(-180deg); } @media only screen and (max-width: 50em) { .card.flipped .card__side--front { transform: rotateY(0); } } .card.flipped .card__side--back { transform: rotateY(0); } .card__picture { background-size: cover; height: 23rem; background-blend-mode: screen; -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); } .card__picture--2 { background-image: linear-gradient(to right bottom, var(--color-yellow-dark), var(--color-yellow)), url(../img/FIRST.webp); background-size: cover; } .card__heading { font-size: 2.8rem; font-weight: 300; text-transform: uppercase; text-align: right; color: var(--color-primary); position: absolute; top: 12rem; right: 2rem; width: 75%; } @media only screen and (max-width: 50em) { .card__heading { top: 1rem; text-align: center; right: 50%; transform: translateX(50%); font-size: 2rem; } } .card__heading-span { padding: 1rem 1.5rem; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .card__heading-span--2 { background-image: linear-gradient(to right bottom, rgba(255, 230, 0, 0.85), rgba(176, 148, 24, 0.85)); font-family: var(--font-display); font-weight: 400; } .card__details { padding: 3rem; } .card__details ul { list-style: none; width: 80%; margin: 0 auto; transform: translateY(-3rem); } .card__details ul li { text-align: center; font-size: 1.5rem; padding: 1rem; font-size: 1.3rem; } .card__details ul li:not(:last-child) { border-bottom: 1px solid var(--color-secondary-dark); } .card__cta { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; text-align: center; } .card__price-box { text-align: center; margin-bottom: 8rem; color: #fff; } .card__price-only { font-family: var(--font-display); font-size: 1.4rem; font-weight: 500; text-transform: uppercase; } .card__price-value { font-size: 6rem; font-weight: 100; } @media only screen and (max-width: 56.25em), only screen and (hover: none) { .card { height: auto; border-radius: 1rem; background-color: #fff; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); } .card__side { height: auto; position: relative; box-shadow: none; } .card__side--back { transform: rotateY(0); clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%); } .card:hover .card__side--front { transform: rotateY(0); } .card__details { padding: 1rem 3rem; } .card__cta { position: relative; top: 0%; left: 0%; transform: translate(0); width: 100%; padding: 7rem 4rem 4rem 4rem; } .card__price-box { margin-bottom: 3rem; } .card__price-value { font-size: 6rem; } } .bg-animation { position: absolute; top: 0; left: 0; height: 100vh; width: 100vw; display: grid; grid-template: repeat(2, 50vh)/repeat(2, 50vw); background-color: var(--color-primary); overflow: hidden; } .bg-animation > *:not(:last-child) { display: flex; justify-content: center; align-items: center; color: black; animation-fill-mode: backwards; background-size: cover; font-family: var(--font-display); font-size: 5rem; color: var(--color-secondary); } @media only screen and (max-width: 31.25em) { .bg-animation > *:not(:last-child) { /*z-index: 2;*/ } } .bg-animation__top-left { animation: animateTopLeft 1s ease-out 0.75s; background-image: linear-gradient(to right bottom, rgba(160, 238, 255, 0.8) 0%, rgba(68, 101, 108, 0.8) 80%), url(../img/shs.webp); background-position: top; } .bg-animation__top-left span { transform: translate(0, -75%); } @media only screen and (max-width: 31.25em) { .bg-animation__top-left span { transform: translate(0); } } .bg-animation__top-right { animation: animateTopRight 1s ease-out 1.75s; background-image: linear-gradient(to left bottom, rgba(216, 208, 23, 0.8) 0%, rgba(102, 99, 12, 0.8) 80%), url(../img/soc.webp); background-position: top; } .bg-animation__top-right span { transform: translate(0, -75%); } @media only screen and (max-width: 31.25em) { .bg-animation__top-right span { transform: translate(0); } } .bg-animation__bottom-left { animation: animateBottomLeft 1s ease-out 2.75s; background-image: linear-gradient(to right top, rgba(202, 29, 29, 0.8) 0%, rgba(87, 13, 13, 0.8) 80%), url(../img/sbla.webp); } .bg-animation__bottom-left span { transform: translate(0, 75%); } @media only screen and (max-width: 31.25em) { .bg-animation__bottom-left span { transform: translateY(30px); } } .bg-animation__bottom-right { animation: animateBottomRight 1s ease-out 3.75s; background-image: linear-gradient(to left top, rgba(0, 166, 203, 0.8) 0%, rgba(0, 69, 85, 0.8) 80%), url(../img/soda.webp); background-position: center; } .bg-animation__bottom-right span { transform: translate(0, 75%); } @media only screen and (max-width: 31.25em) { .bg-animation__bottom-right span { transform: translateY(30px); } } .top-heading { height: 15rem; width: 82.5vw; display: flex; align-items: center; justify-content: space-between; gap: 2rem; overflow: hidden; } @media only screen and (max-width: 75em) { .top-heading { width: 75vw; } } @media only screen and (max-width: 62.5em) { .top-heading { width: 72.5vw; } } @media only screen and (max-width: 50em) { .top-heading { width: 65vw; } } .top-heading__logo { height: 8rem; margin-left: 8rem; object-fit: cover; margin-right: auto; } @media only screen and (max-width: 26.56em) { .top-heading__logo { margin-left: 4rem; } } @media only screen and (max-width: 50em) { .navigation h4 { display: none; } } .navigation__checkbox { display: none; } .navigation__button { background-color: transparent; height: 7rem; width: 7rem; border-radius: 50%; position: fixed; top: 4rem; right: 4rem; z-index: 200; text-align: center; cursor: pointer; transition: all .5s ease; } .navigation__button.colored { background-color: var(--color-primary-light-2); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2); } .navigation__button:hover { background-color: transparent; } .navigation__button.colored .navigation__icon, .navigation__button.colored .navigation__icon::before, .navigation__button.colored .navigation__icon::after { background-color: var(--color-secondary); } .navigation__checkbox:checked + .navigation__button { background-color: var(--color-secondary); } .navigation__background { height: 6rem; width: 6rem; border-radius: 50%; position: fixed; top: 4.5rem; right: 4.5rem; background-image: radial-gradient(rgba(17, 45, 78, 0.95), rgba(16, 39, 67, 0.95)); z-index: 100; transform: scale(0); transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1); } .navigation__nav { height: 100vh; position: fixed; top: 0; left: 0; z-index: 150; opacity: 0; width: 0; transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6); display: flex; align-items: center; } .navigation__list { list-style: none; margin-left: 10rem; } @media only screen and (max-width: 23.43em) { .navigation__list { margin-left: 3rem; } } .navigation__list:not(:hover) + .navigation__sublist:not(:hover) { opacity: 0; visibility: hidden; } .navigation__sublist { margin-left: 2rem; border-left: 1.5px solid var(--color-secondary); transition: all .5s ease; height: 80vh; display: flex !important; flex-direction: column; justify-content: center; } @media only screen and (max-width: 550px) { .navigation__sublist { display: none !important; } } .navigation__sublist.animate { animation: animateSublist .5s; animation-fill-mode: backwards; } .navigation__item { margin: 1rem; text-align: end; } .navigation__subitem { text-align: start; } .navigation__link:link, .navigation__link:visited { display: inline-block; font-family: var(--font-display); font-size: 2.5rem; font-weight: 400; padding: 1rem 2rem; color: var(--color-secondary); text-decoration: none; background-image: linear-gradient(120deg, transparent 0%, transparent 50%, var(--color-secondary) 50%); background-size: 235%; transition: all .4s ease; } .navigation__link:hover, .navigation__link:active { background-position: 100%; color: var(--color-primary-dark); transform: translateX(1rem); } .navigation__sublink:link, .navigation__sublink:visited { display: inline-block; font-family: var(--font-primary); font-size: 1.5rem; font-weight: 350; letter-spacing: .2rem; padding: .75rem 1.5rem; color: var(--color-secondary-dark); text-decoration: none; text-transform: uppercase; transition: all .4s ease; animation: animateSublink 1s .4s; animation-fill-mode: backwards; } .navigation__sublink:hover, .navigation__sublink:active { color: var(--color-secondary); } .navigation__checkbox:checked ~ .navigation__background { transform: scale(80); } .navigation__checkbox:checked ~ .navigation__nav { opacity: 1; width: 100%; z-index: 1100; } .navigation__checkbox:checked ~ .navigation__background { z-index: 1000; } .navigation__checkbox:checked + .navigation__button { z-index: 1999; } .navigation__button:hover { background-color: var(--color-primary-light-1); } .navigation__icon { position: relative; margin-top: 3.5rem; } .navigation__icon, .navigation__icon::before, .navigation__icon::after { width: 3rem; height: 2px; background-color: var(--color-secondary-dark); display: inline-block; } .navigation__icon::before, .navigation__icon::after { content: ""; position: absolute; left: 0; transition: all .25s; } .navigation__icon::before { top: -.8rem; } .navigation__icon::after { top: .8rem; } .navigation__checkbox:not(:checked) + .navigation__button:hover .navigation__icon, .navigation__checkbox:not(:checked) + .navigation__button:hover .navigation__icon::before, .navigation__checkbox:not(:checked) + .navigation__button:hover .navigation__icon::after { background-color: var(--color-secondary-dark-3); } .navigation__checkbox:checked + .navigation__button.colored .navigation__icon::before, .navigation__checkbox:checked + .navigation__button.colored .navigation__icon::after { background-color: var(--color-grey-light-1); } .navigation__button:hover .navigation__icon::before { top: -1rem; } .navigation__button:hover .navigation__icon::after { top: 1rem; } .navigation__checkbox:checked + .navigation__button .navigation__icon { background-color: transparent; } .navigation__checkbox:checked + .navigation__button .navigation__icon::before { transform: rotate(135deg); top: 0; } .navigation__checkbox:checked + .navigation__button .navigation__icon::after { transform: rotate(-135deg); top: 0; } .navigation__checkbox:not(:checked) ~ .navigation__nav { opacity: 0; visibility: hidden; } .quick-link { align-self: flex-end; margin: 0 10rem 10rem auto; } @media only screen and (max-width: 50em) { .quick-link { margin: 0 5rem 5rem auto; } } .quick-link__icon { width: 2rem; height: 2rem; fill: var(--color-secondary-dark); } @media only screen and (max-width: 50em) { .quick-link__icon { width: 3rem; height: 3rem; } } .quick-link__text { color: var(--color-secondary-dark); font-size: var(--default-font-size); font-weight: 550; } @media only screen and (max-width: 50em) { .quick-link__text { display: none; } } .quick-link__item { cursor: pointer; } .quick-link__item > * { transition: all .4s ease; } .quick-link__item:hover .quick-link__icon { fill: var(--color-secondary); } .quick-link__item:hover .quick-link__text { color: var(--color-secondary); } .gallery-grid { width: 100%; position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 12.5vw); gap: 3rem; padding: 1.5rem; } .gallery-grid__item { object-fit: cover; border-radius: 2rem; overflow: hidden; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4); } @media only screen and (max-width: 50em) { .gallery-grid__item--1, .gallery-grid__item--2, .gallery-grid__item--4, .gallery-grid__item--5, .gallery-grid__item--6, .gallery-grid__item--7 { opacity: 0; visibility: hidden; } } .gallery-grid__item--1 { grid-row: 1 / span 2; grid-column: 1 / 2; transform: translateY(10rem); } .gallery-grid__item--2 { grid-row: 1 / 2; grid-column: 2 / 3; transform: translateY(5rem); } .gallery-grid__item--3 { grid-row: 1 / span 2; grid-column: 3 / span 2; z-index: 10; } @media only screen and (max-width: 50em) { .gallery-grid__item--3 { transform: scale(2); border-radius: .8rem; } } .gallery-grid__item--4 { grid-row: 1 / 2; grid-column: 5 / 6; transform: translateY(5rem); } .gallery-grid__item--5 { grid-row: 1 / span 2; grid-column: 6 / 7; transform: translateY(10rem); } .gallery-grid__item--6 { grid-row: 2 / 3; grid-column: 2 / 3; transform: translateY(5rem); } .gallery-grid__item--7 { grid-row: 2 / 3; grid-column: 5 / 6; transform: translateY(5rem); } .gallery-grid__img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-grid > * { width: 100%; transition: all 1s ease; } .gallery-grid.cover .gallery-grid__item--3 { width: 260%; height: 105rem; transform: translate(-30%, 5%) scale(1.25); } @media only screen and (min-height: 87.5em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 27%) scale(1.5); } } @media only screen and (max-width: 90em) and (max-height: 87.5em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 15%) scale(1.5); } } @media only screen and (max-width: 90em) and (max-height: 75em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 12%) scale(1.25); } } @media only screen and (max-width: 90em) and (max-height: 75em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 12%) scale(1.25); } } @media only screen and (max-width: 64em) and (max-height: 87.5em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 22%) scale(1.32); } } @media only screen and (max-width: 64em) and (max-height: 75em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 12%) scale(1.32); } } @media only screen and (max-width: 90em) and (max-height: 62.5em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 10%) scale(1.32); } } @media only screen and (max-width: 90em) and (max-height: 62.5em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-30%, 10%) scale(1.28); } } @media only screen and (max-width: 48em) and (max-height: 87.5em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-30%, 40%) scale(1.8); } } @media only screen and (max-width: 48em) and (max-height: 75em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-30%, 15%) scale(1.5); } } @media only screen and (max-width: 48em) and (max-height: 62.5em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, -8%) scale(1.25); } } @media only screen and (max-width: 48em) and (max-height: 50em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, -8%) scale(1.25); } } @media only screen and (max-width: 26.56em) and (max-height: 87.5em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 25%) scale(1.8); } } @media only screen and (max-width: 26.56em) and (max-height: 75em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 25%) scale(1.5); } } @media only screen and (max-width: 26.56em) and (max-height: 62.5em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 8%) scale(1.4); } } @media only screen and (max-width: 26.56em) and (max-height: 50em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-31%, 18%) scale(1.4); } } @media only screen and (max-width: 23.43em) and (max-height: 87.5em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 37.5%) scale(1.8); } } @media only screen and (max-width: 23.43em) and (max-height: 75em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 33%) scale(1.6); } } @media only screen and (max-width: 23.43em) and (max-height: 62.5em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 23%) scale(1.6); } } @media only screen and (max-width: 23.43em) and (max-height: 50em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 20%) scale(1.5); } } @media only screen and (max-width: 20em) and (max-height: 50em) { .gallery-grid.cover .gallery-grid__item--3 { transform: translate(-32%, 20%) scale(1.5); } } .gallery-grid.cover > .gallery-grid__item--1, .gallery-grid.cover > .gallery-grid__item--2, .gallery-grid.cover > .gallery-grid__item--6 { transform: translateX(-25rem); opacity: 0; visibility: hidden; } .gallery-grid.cover > .gallery-grid__item--4, .gallery-grid.cover > .gallery-grid__item--5, .gallery-grid.cover > .gallery-grid__item--7 { transform: translateX(25rem); opacity: 0; visibility: hidden; } /*.facilities{ display: grid; place-items: center; align-content: center; min-height: 100vh; padding: 2rem 0; } /*.facilities-gallery { display: flex; justify-content: center; overflow: hidden; } .facility-image { max-width: 100%; margin: 0 10px; } .facilities-gallery__nav .prev, .facilities-gallery__nav .next { cursor: pointer; } /*.facilities-gallery { background-color: var(--color-secondary-dark-3); padding: 1.5rem; width: 100%; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(5, 5vw); gap: 1.5rem; } .facilities-gallery__nav { width: 100%; display: flex; justify-content: space-between; } .facilities-gallery__nav > * { display: flex; align-items: center; gap: 1rem; font-family: var(--font-display); font-size: 2rem; font-weight: 500; color: var(--color-grey-light-2); transition: all .2s ease; cursor: pointer; } .facilities-gallery__nav > *:hover { color: var(--color-grey-light-1); } .facilities-gallery__item { transition: all .5s ease; overflow: hidden; position: relative; } .facilities-gallery__item--1 { grid-row: 1 / span 2; grid-column: 1 / span 2; } .facilities-gallery__item--2 { grid-row: 1 / span 3; grid-column: 3 / span 3; } .facilities-gallery__item--3 { grid-row: 1 / span 2; grid-column: 6 / 7; } .facilities-gallery__item--4 { grid-row: 1 / span 2; grid-column: 7 / span 2; } .facilities-gallery__item--5 { grid-row: 3 / span 3; grid-column: 1 / span 2; } .facilities-gallery__item--6 { grid-row: 4 / span 2; grid-column: 3 / span 2; } .facilities-gallery__item--7 { grid-row: 4 / span 2; grid-column: 5 / 6; } .facilities-gallery__item--8 { grid-row: 3 / span 3; grid-column: 6 / span 2; } .facilities-gallery__item--9 { grid-row: 3 / span 3; grid-column: 8 / 9; } .facilities-gallery__item--meeting-rooms { grid-row: 1 / span 3; grid-column: 1 / span 2; } .facilities-gallery__item--osas { grid-row: 1 / span 3; grid-column: 3 / span 3; } .facilities-gallery__item--elpd { grid-row: 1 / span 5; grid-column: 6 / span 3; } .facilities-gallery__item--it { grid-row: 4 / span 2; grid-column: 1 / 2; } .facilities-gallery__item--hr { grid-row: 4 / span 2; grid-column: 2 / span 2; } .facilities-gallery__item--executive-office { grid-row: 4 / span 2; grid-column: 4 / span 2; } .facilities-gallery__item--parking, .facilities-gallery__item--cafeteria { grid-row: 1 / span 4; grid-column: 3 / span 4; z-index: 1; } .facilities-gallery__item--parking:hover, .facilities-gallery__item--cafeteria:hover { z-index: 2; } .facilities-gallery__item--parking:not(:hover), .facilities-gallery__item--cafeteria:not(:hover) { transform: scale(0.9); } .facilities-gallery__item--purchase, .facilities-gallery__item--grass { grid-row: 2 / span 4; grid-column: 1 / span 4; } .facilities-gallery__item--purchase:hover, .facilities-gallery__item--grass:hover { z-index: 2; } .facilities-gallery__item--purchase:not(:hover), .facilities-gallery__item--grass:not(:hover) { transform: scale(0.9); } .facilities-gallery__item--stock, .facilities-gallery__item--employee-lounge { grid-row: 2 / span 4; grid-column: 5 / span 4; } .facilities-gallery__item--stock:hover, .facilities-gallery__item--employee-lounge:hover { z-index: 2; } .facilities-gallery__item--stock:not(:hover), .facilities-gallery__item--employee-lounge:not(:hover) { transform: scale(0.9); } .facilities-gallery__item--admin, .facilities-gallery__item--library { grid-row: 1 / -1; grid-column: 1 / -1; } .facilities-gallery__item--sewing { grid-row: 1 / span 3; grid-column: 1 / span 4; } .facilities-gallery__item--pink { grid-row: 1 / span 3; grid-column: 5 / span 4; } .facilities-gallery__item--green { grid-row: 4 / span 2; grid-column: 1 / span 3; } .facilities-gallery__item--sound { grid-row: 4 / span 2; grid-column: 4 / span 2; } .facilities-gallery__item--multimedia { grid-row: 4 / span 2; grid-column: 6 / span 3; } .facilities-gallery__item--multimedia > img { object-position: 0 25%; } .facilities-gallery__item.shown-caption:not(:hover) > figcaption { font-size: 2rem; height: 3vw; opacity: 1; visibility: visible; } .facilities-gallery__item--2i1 { grid-row: 1 / -1; grid-column: 1 / span 5; } .facilities-gallery__item--2i2 { grid-row: 2 / span 3; grid-column: 5 / span 3; z-index: 1; } .facilities-gallery__item--1i { grid-row: 1 / -1; grid-column: 1 / -1; } .facilities-gallery__item--3i1 { grid-row: 1 / span 4; grid-column: 3 / span 4; z-index: 1; } .facilities-gallery__item--3i1:hover { z-index: 2; } .facilities-gallery__item--3i1:not(:hover) { transform: scale(0.9); } .facilities-gallery__item--3i2 { grid-row: 2 / span 4; grid-column: 1 / span 4; } .facilities-gallery__item--3i2:hover { z-index: 2; } .facilities-gallery__item--3i2:not(:hover) { transform: scale(0.9); } .facilities-gallery__item--3i3 { grid-row: 2 / span 4; grid-column: 5 / span 4; } .facilities-gallery__item--3i3:hover { z-index: 2; } .facilities-gallery__item--3i3:not(:hover) { transform: scale(0.9); } .facilities-gallery__item.active { z-index: 2; grid-row: 1 / -1; grid-column: 1 / -1; } .facilities-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: all .5s ease; } .facilities-gallery__item:not(.active):hover { box-sizing: content-box; border: 1.5rem solid var(--color-primary-light-2); width: 100%; height: 100%; transform: translate(-1.5rem, -1.5rem); } .facilities-gallery__caption { position: absolute; bottom: 0; left: 0; background-color: rgba(17, 45, 78, 0.8); width: 100%; height: 5vw; transition: all .5s ease; opacity: 0; visibility: hidden; font-family: var(--font-display); font-size: 3rem; font-weight: 500; color: var(--color-yellow-dark-2); text-transform: uppercase; text-align: center; display: flex; align-items: center; justify-content: center; } .facilities-gallery__item.active .facilities-gallery__caption { opacity: 1; visibility: visible; } .not-shown-caption:hover > .facilities-gallery__caption { font-size: 2rem; height: 3vw; opacity: 1; visibility: visible; } .not-shown-caption--sm .facilities-gallery__caption { font-size: 2rem !important; height: 10vw !important; }*/ .u-top-view { object-position: top; } .u-bot-view { object-position: bottom; } .u-center-view { object-position: bottom; } .u-caption-shown { opacity: 1; visibility: visible; } .events-gallery { background-color: var(--color-secondary-dark-3); padding: 1.5rem; width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 22vw); gap: 2rem; } @media only screen and (max-width: 75em) { .events-gallery { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 40vw); } } @media only screen and (max-width: 37.5em) { .events-gallery { grid-template-columns: 1fr; grid-template-rows: repeat(9, 60vw); padding: 0; } } .events-gallery__item { background-color: var(--color-secondary-dark); position: relative; overflow: hidden; } .events-gallery__img { width: 100%; height: 100%; object-fit: cover; display: block; } .events-gallery__text { position: absolute; top: 0; right: 0; width: 70%; display: flex; flex-direction: column; } @media only screen and (max-width: 26.56em) { .events-gallery__text { width: 80%; } } .events-gallery__text > * { background-color: var(--color-primary); padding: 0 1rem; } .events-gallery__text > *:last-child { padding-bottom: 1rem; } .events-gallery__name { padding-top: 1rem; font-family: var(--font-display); font-size: 2rem; color: var(--color-yellow-dark-2); } .events-gallery__date-and-indicator { font-family: var(--font-display); color: var(--color-secondary-dark-4); cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .events-gallery__date { font-size: var(--default-font-size); } .events-gallery__indicator { font-size: 3rem; font-weight: 400; transition: color .2s ease; display: block; } .events-gallery__date-and-indicator:hover .events-gallery__indicator { color: var(--color-grey-light-1); } .events-gallery__description { font-family: var(--font-primary); font-size: 1.4rem; color: var(--color-secondary); transform: translateX(100%); transition: all .5s ease; } .events-gallery__date-and-indicator.active + .events-gallery__description { transform: translateX(0); } .first-day { width: 100vw; height: 50rem; overflow: hidden; background-size: cover; background-position: right; cursor: pointer; } @media only screen and (max-width: 1600px) { .first-day { background-position: center; } } @media only screen and (max-width: 1450px) { .first-day { background-position-x: 60%; } } @media only screen and (max-width: 1400px) { .first-day { height: 40rem; } } @media only screen and (max-width: 1150px) { .first-day { height: 30rem; } } @media only screen and (max-width: 1150px) { .first-day { background-image: 0; } } @media only screen and (max-width: 425px) { .first-day { height: 100rem; display: flex; flex-direction: column; background-color: var(--color-primary); position: relative; } .first-day::before { content: ""; width: 15rem; height: 40rem; background-image: url(../img/slide-arraw.webp); background-size: contain; background-repeat: no-repeat; position: absolute; top: 52%; left: 21%; transform: rotate(-98deg); z-index: 5; } } .first-day.slide1 { background-image: url(../img/slide1.webp); } @media only screen and (max-width: 425px) { .first-day.slide1 { background-image: none; } } .first-day.slide2 { background-image: url(../img/slide2.webp); } @media only screen and (max-width: 425px) { .first-day.slide2 { background-image: none; } } .first-day.slide3 { background-image: url(../img/slide3.webp); } @media only screen and (max-width: 425px) { .first-day.slide3 { background-image: none; } } .first-day.slide4 { background-image: url(../img/slide4.webp); } @media only screen and (max-width: 425px) { .first-day.slide4 { background-image: none; } } .first-day__mobile-view-text { display: none; } @media only screen and (max-width: 425px) { .first-day__mobile-view-text { display: block; } } .first-day.slide1 > .first-day__mobile-view-text { margin: 5rem auto; } .first-day.slide1 > .first-day__mobile-view-text > ul { color: var(--color-secondary); font-family: var(--font-primary); font-size: 2.2rem; text-align: center; list-style: none; } .first-day.slide1 > .first-day__mobile-view-text li { margin-bottom: 3rem; height: 5rem; border-bottom: 1px solid var(--color-primary-light-2); } .first-day.slide2, .first-day.slide3, .first-day.slide4 { padding: 5rem; } .first-day> .first-day__mobile-view-text > p { font-family: var(--font-primary); color: var(--color-secondary); font-size: var(--default-font-size); } .first-day> .first-day__mobile-view-text > p:not(:last-child) { margin-bottom: 3rem; } .first-day.slide2 > .first-day__mobile-view-text > ul, .first-day.slide3 > .first-day__mobile-view-text > ul, .first-day.slide4 > .first-day__mobile-view-text > ul { font-family: var(--font-primary); color: var(--color-secondary); font-size: var(--default-font-size); margin-left: 2rem; } .first-day__mobile-view-text h3 { font-family: var(--font-primary); color: var(--color-yellow-dark-2); font-size: var(--default-font-size); margin-top: 3rem; } .first-day__circle { width: 80rem; height: 80rem; transform: translate(-55%, -20%); border-radius: 50%; transition: all .5s ease; position: relative; display: grid; grid-template-rows: repeat(2, 50%); grid-template-columns: repeat(2, 1fr); } @media only screen and (max-width: 1400px) { .first-day__circle { margin-top: -5rem; } } @media only screen and (max-width: 1150px) { .first-day__circle { margin-top: -8.5rem; } } @media only screen and (max-width: 425px) { .first-day__circle { background-color: var(--color-blue-light-1); transform: translate(0, 0); margin: 0; margin-bottom: -50rem; align-self: center; position: absolute; bottom: 0; } } .first-day.slide1 > .first-day__circle { transform: translate(-65%, -20%) rotate(0deg); } @media only screen and (max-width: 425px) { .first-day.slide1 > .first-day__circle { transform: rotate(0); } } .first-day.slide2 > .first-day__circle { transform: translate(-65%, -20%) rotate(90deg); } @media only screen and (max-width: 425px) { .first-day.slide2 > .first-day__circle { transform: rotate(90deg); } } .first-day.slide3 > .first-day__circle { transform: translate(-65%, -20%) rotate(180deg); } @media only screen and (max-width: 425px) { .first-day.slide3 > .first-day__circle { transform: rotate(180deg); } } .first-day.slide4 > .first-day__circle { transform: translate(-65%, -20%) rotate(270deg); } @media only screen and (max-width: 425px) { .first-day.slide4 > .first-day__circle { transform: rotate(270deg); } } .first-day__header { display: flex; justify-content: center; align-items: center; } .first-day__header > span { font-size: 2rem; font-weight: bold; width: 25rem; margin-left: 15rem; } @media only screen and (max-width: 1450px) { .first-day__header > span { margin-left: 5rem; width: 20rem; } } @media only screen and (max-width: 1400px) { .first-day__header > span { margin-left: 0; width: 20rem; } } @media only screen and (max-width: 1200px) { .first-day__header > span { font-size: 1.6rem; } } @media only screen and (max-width: 425px) { .first-day__header > span { text-align: center; margin-bottom: 12rem; position: relative; font-size: 2.2rem; font-family: var(--font-display); width: 30rem; } } .first-day__header--1 { grid-row: 1 / -1; grid-column: 2 / -1; } @media only screen and (max-width: 425px) { .first-day__header--1 { grid-row: 1 / 2; grid-column: 1 / -1; } } .first-day__header--2 { grid-row: 1 / 2; grid-column: 1 / -1; transform: rotate(-90deg); } @media only screen and (max-width: 425px) { .first-day__header--2 { grid-row: 1 / -1; grid-column: 1 / 2; } } .first-day__header--3 { grid-row: 1 / -1; grid-column: 1 / 2; transform: rotate(180deg); } @media only screen and (max-width: 425px) { .first-day__header--3 { grid-row: 2 / -1; grid-column: 1 / -1; } } .first-day__header--4 { grid-row: 2 / -1; grid-column: 1 / -1; transform: rotate(90deg); } @media only screen and (max-width: 425px) { .first-day__header--4 { grid-row: 1 / -1; grid-column: 2 / -1; } } /* .checklist-circle { width: 80rem; aspect-ratio: 1 / 1; border-radius: 50%; background-color: var(--color-secondary); position: absolute; transition: all 1s ease; cursor: pointer; } @media only screen and (max-width: 87.5em) { .checklist-circle { margin-left: 15rem; } } @media only screen and (max-width: 50em) { .checklist-circle { margin-left: 0; } } .checklist-circle.rotate-1 { transform: rotate(0); } .checklist-circle.rotate-1 h3.first { animation: pulsateText 1s infinite; } .checklist-circle.rotate-2 { transform: rotate(-60deg); } .checklist-circle.rotate-2 h3.second { animation: pulsateText 1s infinite; } .checklist-circle.rotate-3 { transform: rotate(-130deg); } .checklist-circle.rotate-3 h3.third { animation: pulsateText 1s infinite; } .checklist-circle.rotate-4 { transform: rotate(-229deg); } .checklist-circle.rotate-4 h3.fourth { animation: pulsateText 1s infinite; } .checklist-circle.rotate-5 { transform: rotate(-300deg); } .checklist-circle.rotate-5 h3.last { animation: pulsateText 1s infinite; } .checklist-circle__item { position: absolute; } .checklist-circle__item--1 { top: 10%; left: 50%; transform: translateX(-50%); } .checklist-circle__item--2 { top: 35%; right: 15%; transform: translateX(50%) rotate(60deg); } .checklist-circle__item--3 { top: 35%; left: 15%; transform: translateX(-50%) rotate(-60deg); } .checklist-circle__item--4 { bottom: 20%; right: 20%; transform: translateX(50%) rotate(130deg); } .checklist-circle__item--5 { bottom: 25%; left: 25%; transform: translateX(-50%) rotate(-130deg); } .checklist-circle__item-heading { font-family: var(--font-display); font-size: 2rem; color: var(--color-primary); } .checklist-circle .checklist-list { margin-top: 1rem; list-style: decimal; } .checklist-circle .checklist-list__item { font-family: var(--font-primary); font-size: 1.4rem; color: #000; } */ .section-welcome { background-color: var(--color-primary); width: 100vw; height: 100vh; position: relative; overflow: hidden; } .section-welcome::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(16, 39, 67, 0.5); transform: translateY(0); animation: animateWelcomeMessageBg 25s backwards; } .section-gallery-intro { width: 100vw; height: 150vh; overflow: visible; position: relative; transform: translateY(-50rem); display: flex; align-items: center; backface-visibility: hidden; animation: moveInBottomGallery 1s 3s backwards; } @media only screen and (max-width: 160em) and (max-height: 87.5em) { .section-gallery-intro { margin-top: -60rem; } } @media only screen and (max-width: 160em) and (max-height: 75em) { .section-gallery-intro { margin-top: -30rem; } } @media only screen and (max-width: 160em) and (max-height: 62.5em) { .section-gallery-intro { margin-top: -10rem; } } @media only screen and (max-width: 160em) and (max-height: 50em) { .section-gallery-intro { margin-top: 10rem; } } @media only screen and (max-width: 90em) and (max-height: 87.5em) { .section-gallery-intro { margin-top: -60rem; } } @media only screen and (max-width: 90em) and (max-height: 75em) { .section-gallery-intro { margin-top: -50rem; } } @media only screen and (max-width: 90em) and (max-height: 62.5em) { .section-gallery-intro { margin-top: -30rem; } } @media only screen and (max-width: 90em) and (max-height: 50em) { .section-gallery-intro { margin-top: 0rem; } } @media only screen and (max-width: 64em) and (max-height: 87.5em) { .section-gallery-intro { margin-top: -80rem; } } @media only screen and (max-width: 64em) and (max-height: 75em) { .section-gallery-intro { margin-top: -50rem; } } @media only screen and (max-width: 64em) and (max-height: 62.5em) { .section-gallery-intro { margin-top: -30rem; } } @media only screen and (max-width: 64em) and (max-height: 50em) { .section-gallery-intro { margin-top: -12rem; } } @media only screen and (max-width: 48em) and (max-height: 87.5em) { .section-gallery-intro { margin-top: -110rem; } } @media only screen and (max-width: 48em) and (max-height: 75em) { .section-gallery-intro { margin-top: -80rem; } } @media only screen and (max-width: 48em) and (max-height: 62.5em) { .section-gallery-intro { margin-top: -45rem; } } @media only screen and (max-width: 48em) and (max-height: 50em) { .section-gallery-intro { margin-top: -25rem; } } @media only screen and (max-width: 26.56em) and (max-height: 87.5em) { .section-gallery-intro { margin-top: -110rem; } } @media only screen and (max-width: 26.56em) and (max-height: 75em) { .section-gallery-intro { margin-top: -90rem; } } @media only screen and (max-width: 26.56em) and (max-height: 62.5em) { .section-gallery-intro { margin-top: -60rem; } } @media only screen and (max-width: 26.56em) and (max-height: 50em) { .section-gallery-intro { margin-top: -40rem; } } @media only screen and (max-width: 23.43em) and (max-height: 87.5em) { .section-gallery-intro { margin-top: -115rem; } } @media only screen and (max-width: 23.43em) and (max-height: 75em) { .section-gallery-intro { margin-top: -90rem; } } @media only screen and (max-width: 23.43em) and (max-height: 62.5em) { .section-gallery-intro { margin-top: -60rem; } } @media only screen and (max-width: 23.43em) and (max-height: 50em) { .section-gallery-intro { margin-top: -40rem; } } @media only screen and (max-width: 20em) and (max-height: 50em) { .section-gallery-intro { margin-top: -50rem; } } .section-gallery-intro.cover { position: fixed; top: 25%; z-index: 0; } @media only screen and (max-height: 37.5em) { .section-gallery-intro.cover { top: 33%; } } .section-main { width: 100vw; background-color: rgba(17, 45, 78, 0.8); position: absolute; margin-top: 90rem; z-index: 1; overflow: hidden; } .centered-div{ margin: 0 auto; } .dev { //color: var(--color-secondary-dark-4); padding: 25rem 20rem; display: flex; flex-direction: column; align-items: center; background-color: var(--color-secondary-dark-3); } .dev__heading { text-align: center; font-size: 3.5rem; } .dev__text h2 { margin: 0; font-size: 3rem; } .dev__text h3 { margin: 0; font-size: 2.2rem; } .dev__text p { margin: 5px 0 0 0; font-size: 1.5rem; } .dev__profile--left, .dev__profile--right { display: flex; align-items: center; margin: 2rem; flex-direction: row; width: 100%; } .dev__profile--right { flex-direction: row-reverse; /* Reverses the order of the flex items */ } .dev__image--left, .dev__image--right { max-width: 150px; width: 100%; height: auto; border-radius: 50%; /* Makes the image circular if it's a square */ } .dev__image--left { margin-right: 2rem; /* Adjusts space between image and text */ } .dev__image--right { margin-left: 2rem; /* Adjusts space between image and text */ } @media only screen and (max-width: 48em) { .dev__profile--left, .dev__profile--right { flex-direction: column; align-items: center; text-align: center; } .dev__image--left, .dev__image--right { margin: 0 0 1rem 0; /* Adjusts space around image in smaller viewports */ } .dev__text h2 { /*font-size: 1.8rem;*/ } .dev__text p { /*font-size: 0.9rem;*/ } } .container { display: grid; place-items: center; align-content: center; min-height: 50vh; padding: 5rem 0 5rem 0; background-color: var(--color-primary); } .container h1 { font-size: 3rem; line-height: 1.4; margin-bottom: .5em; color: hsla(210, 50%, 20%, 1); position: relative; z-index: 5; } .slider { position: relative; display: grid; place-items: center; max-width: 80%; /*overflow: hidden;*/ box-shadow: 20px 20px 50px hsla(210, 50%, 40%, .4), -20px -20px 50px hsla(210, 50%, 80%, .2); ; } .slide { height: auto; max-height: 100vh; display: flex; } .slide img { width: 100%; flex: 1 0 100%; object-fit: contain; } .slider__progress{ position: absolute; width: 100%; height: 6px; background: linear-gradient(90deg, hsla(210, 50%, 90%, .2), hsla(210, 50%, 70%, .1)); bottom: 0; z-index: 4; } .slider__progress::after { content: ''; position: absolute; background: linear-gradient(90deg, hsla(210, 50%, 90%, .7), hsla(210, 50%, 70%, .6)); width: var(--slide-progress); height: 6px; left: 0; transition: var(--slide-progress--transition); } .slider__btn-container{ position: absolute; width: 100%; } .slider__btn-container h2{ position: absolute; z-index: 5; top: 50%; display: grid; place-items: center; } .slider__btn { border-radius:50%; position: absolute; z-index: 2; padding: .2rem; top: 50%; display: grid; place-items: center; cursor: pointer; background: hsla(210, 50%, 30%, .15); color: hsla(210, 50%, 95%, .9); scale: 1.5; } @media only screen and (max-width: 31.25em){ .slider__btn { scale: 1; } } .slider__btn svg { pointer-events: none; } .slider__btn--left { left: 0; transform: translate(50%, -50%); } .slider__btn--left:is(:hover, :focus) { animation: 850ms infinite moveLeft cubic-bezier(0.25,-0.50, 0.17, 1.2); } @keyframes moveLeft { 10% { left: -3px; } } .slider__btn--right { right: 0; transform: translate(-50%, -50%); } .slider__btn--right:is(:hover, :focus) { animation: 850ms infinite moveRight cubic-bezier(0.25,-0.50, 0.17, 1.2); } @keyframes moveRight { 10% { right: -3px; } }