:root {
	--font-1: 'Questrial';
	--font-2: 'Montserrat';
	--font-body: var(--font-2);
	--font-h: var(--font-1);
}


h6 {
	font-size: var(--scale-md-1-5);
	font-weight: normal;
	margin: var(--scale-md-1-5);
	text-align: center;
}

/* Grid section block */
.grid-2-80 {
	--grid-columns:2;
	width:80%;
	margin-bottom: var(--scale-lg-5);
}


/* Jumbotron */

.jumbotron {
	position:relative;
	height: 100vh;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7f7f7+0,ffffff+22,eeeeee+40,eeeeee+40,fcfcfc+88 */
	background: rgb(247,247,247); /* Old browsers */
	background: -moz-linear-gradient(-45deg,  rgba(247,247,247,1) 0%, rgba(255,255,255,1) 22%, rgba(238,238,238,1) 40%, rgba(238,238,238,1) 40%, rgba(252,252,252,1) 88%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  rgba(247,247,247,1) 0%,rgba(255,255,255,1) 22%,rgba(238,238,238,1) 40%,rgba(238,238,238,1) 40%,rgba(252,252,252,1) 88%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  rgba(247,247,247,1) 0%,rgba(255,255,255,1) 22%,rgba(238,238,238,1) 40%,rgba(238,238,238,1) 40%,rgba(252,252,252,1) 88%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#fcfcfc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.jumbotron > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jumbotron .sign {
	position:absolute;
	top: var(--scale-lg-1);
	left:8vw;
	/*width: 27vw;*/
	width:fit-content;
	max-width: 42.5%;
	padding:2rem;
	border-radius:3px;
	background-color:rgba(23,23,23,0.5);
	color:#f3f3f3;
}

.jumbotron .sign.black {
	background-color: #fffbf1c4;
	color:#202020;
}

.jumbotron .sign h2 {
	font-weight: 600;
	font-style: normal;
	font-size:5vw;
	font-size: var(--scale-xl-1-5);
	margin: 5vw 0 4vw 0;
	margin-top:1.5rem;
}

.jumbotron .sign h3 {
	font-weight: 400;
	font-style: normal;
	font-size: var(--scale-md-3-5);
	line-height: 2rem;
}

.card {
	margin:var(--scale-xl-3-5) var(--scale-lg-1) var(--scale-xl-2) var(--scale-lg-1);
	width:80%;
	text-align: center;
}

.card p {
	font-weight: 400;
	font-style: normal;
	font-size:var(--scale-md-2);
	letter-spacing:1px;
	line-height:1.5em;
}

.card h1, .card h2, .card h3, .card h4 {
	color: #666;
}

.card h1  {
	font-weight: 600;
	font-style: normal;
	font-size:1.2em;
	text-align:center;
	letter-spacing:1.5px;
}

.card h2 {
	font-size: var(--scale-lg-3);
	color: #333;
	letter-spacing: 1px;
	line-height: 1.5em;
	margin: 1.5rem 0 2rem 0;
}

.card h3 {
	font-size:1.7rem;
	letter-spacing:1.5px;
}

.card h4 {
	font-size: 1.3em;
	letter-spacing: 1px;
	line-height: 1.5em;
}


.card.policy p {
	text-align:justify;
	font-size:var(--scale-sm-8);
}

h2 {
	font-weight: 600;
	font-style: normal;
	font-size: 5vw;
	margin: 5vw 0 4vw 0;
}

h3, h4 {
	font-family: var(--font-2);
	font-weight: 400;
	font-style: normal;
}

.big-quote {
	padding: var(--scale-xl-1) var(--scale-lg-3);
    margin: var(--scale-lg-4) var(--scale-md-1);
    width: 90%;
}

.big-quote h2 {
	font-weight: 300;
	font-style: normal;
	font-size:var(--scale-lg-2-5);
	color: #666;
	text-align:center;
	letter-spacing:1.5px;
	font-style:italic;
	line-height: var(--scale-lg-3-5);
}

.long-text {
	font-family: var(--font-2);
	font-weight: 400;
	font-style: normal;
	letter-spacing:1px;
	padding:1rem;
}

.long-text h2 {
	font-weight: 400;
	font-style: normal;
	font-size: 3rem;
	color: #666;
	text-align:center;
	letter-spacing:1.5px;
	margin-top:1rem;
}

.long-text p {
	font-weight: 400;
	font-size:1rem;
	line-height:2.2rem;
	text-align:justify;
}

.long-text blockquote {
	position: relative;
	font-weight: 500;
	font-size: 1.3rem;
	line-height: 2.8rem;
	text-align: left;
	margin: 3.5rem 1.5rem;
}

.long-text blockquote:before {
	color: #666;
	content: open-quote;
	font-size: 3rem;
	top: -1rem;
	left: 0;
}

.long-text blockquote:after {
	color: #666;
	position: absolute;
	content: close-quote;
	font-size: 3rem;
	bottom: -1rem;
	right: 0;
}

button.gold, a.gold {
	font-family: 'Arial';
	display: inline-block;
	text-transform: uppercase;
	font-weight: 500;
	font-style: normal;
	font-size: 0.655rem;
	letter-spacing: 0.3em;
	color: rgba(223,190,106,0.7);
	border-radius: 0;
	padding: 18px 80px 20px;
	text-decoration: none;
	margin: 0.625rem;
	border: none;
	background: linear-gradient(270deg, rgba(223, 190, 106, 0.8), rgba(146, 111, 52, 0.8));
	color: #fff;
	box-shadow: #8f8f8f77 0 0 10px 1px;
}

.scroll-into-view-show {
	position:relative;
	opacity:0;
	top: 40px;
	transition: opacity 600ms ease 150ms, top 600ms ease 150ms;
}

.scroll-into-view-show2 {
	position:relative;
	opacity:0;
	transition: opacity 800ms ease 150ms;
}

.scroll-into-view-show3 {
	position:relative;
	opacity:0;
	transition: opacity 1000ms ease 700ms;
}

.scroll-into-view-show-transition {
	opacity:1;
	top:0;
}

/* ==========================================================================
   4. THE RESPONSIVE RESPIRATOR (Smart Viewport Breakpoints)
   ========================================================================== */

/* PHASE 1: Desktop Mode Only (Monitors above 1024px) */
@media screen and (min-width: 1025px) {
    html { 
        
    }
}

/* PHASE 2: Tablet & Small Window Adaptive Layout (Below 1024px) */
@media screen and (max-width: 1024px) {
    /* Snaps the passport card edge-to-edge so small screens don't waste horizontal space */
    .passport {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-shadow: none;
        border-radius: 0;
    }

	.jumbotron .sign {
		left: 5%;
		width:fit-content;
		max-width: 80%;
	}

	header {
		/* Instantly glides up or down when the class switches */
		transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
		transform: translateY(0);
	}

	/* The Snapping Target */
	header.header-hidden {
		transform: translateY(-100%);
	}
}

/* PHASE 3: Pure Mobile Phone Protection (Below 600px) */
@media screen and (max-width: 600px) {
    /* 
       Forces a clean mobile vertical stack only when the screen 
       is physically too narrow to read side-by-side text columns.
    */
    .grid > * {
        /* On phones, we completely wipe out the custom start tracks 
           so everything flows naturally, full-width, down the screen. */
        grid-column: 1 / span var(--grid-columns) !important;
        /*order: 0 !important;*/ /* Returns text flow to natural HTML sequence */
    }

    .jumbotron .sign {
		left: 5%;
		width:fit-content;
		max-width: 90%;
	}

	#biology-cards {
		margin-inline:var(--scale-sm-1) !important;
	}

	.block-1 h2 {
		font-size: var(--scale-lg-3);
		letter-spacing: 1px;
	}

	header {
		/* Instantly glides up or down when the class switches */
		transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
		transform: translateY(0);
	}

	/* The Snapping Target */
	header.header-hidden {
		transform: translateY(-100%);
	}
}