@charset "UTF-8";
		
		#metallics-hero {
			display: grid;
			grid-auto-flow: row;
			background: radial-gradient(at 50% 50%, #3E3A39 30%, #171717 80%);
			background: cover;
			min-height: 25rem;
			width: 100%;
			margin: auto;
			justify-content: center;
		}
		#hero-text {
			display: grid;
            grid-auto-flow: row;
			width: 100%;
			height: 75%;
			grid-template-rows: 2em 6em 6em 2em;
			grid-template-columns: 1fr 1fr 1fr 30px);
			grid-column-gap: 10px;
		}
		#examples {
			display:grid;
			grid-template-columns: repeat(3 1fr);
			grid-column-gap: 25%;
			grid-auto-flow: row;
			grid-row: 4;
			margin-top: 30px;
			width: 100%;
			height: 100%;
			justify-content: center;
}
		.holiday-text-gold {
			display: grid;
			justify-content: flex-end;
			grid-column: 2;
			grid-row: 3;
			font-family: 'Archivo Black', sans-serif;
			font-size: calc(7em + 4vw);
			color: #C8990F;
			margin-top: 40px;
			text-shadow: 2 2 20 #000000;
			opacity: 0;
			animation-name: gold;
			animation-delay: 0s;
			animation-duration: 1s;
			animation-fill-mode: forwards;
		}
		
		@keyframes gold {
			from {
				margin-top: -250px;
			}
			1% { opacity: 0;
			}
			10% {opacity: 1;}
			to {
				margin-top: 50px;
				opacity: 1;
			}
		}
				.holiday-text-silver {
			display: grid;
			justify-content: flex-end;
			grid-row: 2;
			grid-column: 2;
			color: #ACA9A9;
			font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
			font-style: bold;
			font-size: calc(7.25em + 4vw);
            margin-top: -50em;
			opacity: 0;
			animation-name: silver;
			animation-delay: 1s;
			animation-duration: 1s;
			animation-fill-mode: forwards;

		}
				@keyframes silver {
			from {
				margin-top: -150px;
			}
			1% { opacity: 0;
			}
			10% {opacity: 1;}
			to {
				margin-top: -20px;
				opacity: 1;
			}
		}
		.holiday-text {
			display: grid;
			justify-content: flex-end;
			grid-column: 2;
			grid-row: 2;
			color: #ffffff;
			font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
			font-style: italic;
			font-size: 7em;
			margin-top: .75em;
			z-index: 10;
			text-shadow: 2px 2px 7px #000000;
			opacity: 0;
			animation-name: appear;
			animation-delay: 2.5s;
			animation-duration: .5s;
			animation-fill-mode: forwards;
			animation-iteration-count: 1;

		}
				@keyframes appear {
			0% {
				opacity: 0;
			}
			
			100% {
				opacity: 1;
			}
		}

		.metallics {
			grid-column: 3;
			grid-row: 1 / 4;
			writing-mode: vertical-rl;
  			text-orientation: sideways;
			font-family: 'Roboto', sans-serif;
			font-size: 1.1em;
			margin: auto;
			opacity: 0;
			animation-name: metallics;
			animation-delay: 2s;
			animation-duration: 1s;
			animation-fill-mode: forwards;

		}
		@keyframes metallics {
			  from {
    margin-left: 5px;
  }

  to {
    margin-left: 5px;
	  opacity: 1;
  }
		}


        .examples {
			text-align: center;
            font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
            font-size: calc(.75em + 1vw);
            opacity: 0;
            animation-name: appear;
			animation-direction: normal;
			animation-duration: 2.0s;
			animation-fill-mode: forwards;

        }
        .delay-1 {
            animation-delay: 2.25s;
            grid-column: 1;
        }
        .delay-2 {
            animation-delay: 3s;
            grid-column: 2;
        }
        .delay-3 {
            animation-delay: 4s;
            grid-column: 3;
        }
		
		@media screen and (max-width : 1275px ) {
			
			.holiday-text-left {
				margin-top: 2.1em;
			}
			@keyframes slidein {
				to {
					margin-left: 100px;
				}
			}
            .examples {
                text-justify: center;
            }
		}
		@media screen and (max-width : 1024px ){
			
					@keyframes slidein {
				to {
					margin-left: 75px;
				}
			}

		.holiday-text-left {
			
			margin-top: 3em;
			}
		}
		


		@media screen and (max-width : 850px ) {

           #examples {
				column-gap: 10%;
            }

			.holiday-text-left {
				grid-row: 1;
				grid-column: 1 / 4;
                text-align: center;
				margin: 20px 0px 0px 80px;
				opacity: 0;
				animation-delay: 2.75s;
				animation-duration: 2s;
			}

			@keyframes slidein {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}
		
			.holiday-text {
				margin-top: 1.1em;
				animation-delay: 1.75s;
			}

			.examples {
				font-size: 1.3em;
				margin-top: 3em;
			}
		.holiday-text-gold{
			font-size: 11.75em;
			margin-top: 1em;
			animation-delay: 0s;
			}
		.holiday-text-silver {
			padding-top: 20px;
			font-size: 11.75em;
			animation-delay: 1s;
			}
			.metallics {
				font-size: 1.5em;
			}
}
        @media screen and (max-width : 540px ) {
			.holiday-text-gold, 
			.holiday-text-silver {
				font-size: 11em;
			}
}
		@media screen and (max-width : 440px) {
			#holiday-hero {
				min-height: 420px;
				max-height: 420px;
			}
			.holiday-text-silver {
				font-size: 8em;
			}
			.holiday-text-gold {
				font-size: 8em;
			}
			.holiday-text {
				margin-top: 90px;
			}
			.holiday-text-left {
				margin-left: 0px;
			}
			.examples {
				margin-top: 25px;
				font-size: 1.1em;
			}
			}
		@media screen and (max-width : 375px) {
			.holiday-text-silver {
				font-size: 8.5em;
			}
			.holiday-text-gold {
				font-size: 7.75em;
			}
			.examples {
				font-size: 1.1em;
			}
		}