﻿@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

* {
  padding: 0;
  margin: 0;
  	
}

html {
  box-sizing: border-box;
	clear: both;     
      	scroll-behavior: smooth; 
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  font-family: 'Open Sans';
	color: #000000;
  height: 100%; height: auto !important;
  min-height: 100vh;   
  background-color: #ebf3ff; 
	overflow-x: hidden;
}


#the_Header {
	width: 100% !important;
	height: 19px !important;
	float: left;
	border: 0px;    
	box-sizing: border-box; /**DO NOT REMOVE**/ 
	clear: both;  
	margin-bottom: 55px;   
	}

#THEfirstORDER {
	height: 100%;
	font-size: 12pt;
	text-align: center;
	border: 0px;
	margin-top: 3px; 
	box-sizing: border-box; /**DO NOT REMOVE**/ 
	clear: both;
	/** color brilliance**/
		/*   text-shadow: 0 0 5px #f562ff, 0 0 15px #f562ff, 0 0 25px #f562ff,
    			0 0 20px #f562ff, 0 0 30px #890092, 0 0 80px #890092, 0 0 80px #890092;
  			color: #fccaff; */
  		text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    		color: #fff6a9;
  		text-align: center;
  		animation: blink 12s infinite;
  		-webkit-animation: blink 12s infinite;
	/** end of color brilliance**/
	}

.container {
  display: flex;
  flex-flow: column;
  777width: 60%;
  height: auto;
  margin: 0 auto;
  align-items: center;
  justify-content: center; 
}




/* SMALLER TABLET screens */   /* SMALLER TABLET */
@media screen and (max-width: 480px) {
  	.container {
		width: 100%
  		}
	}





@media only screen and (min-width : 320px) and (max-width : 480px) {/* Mobile portrait */
  	.container {
		width: 100%; 
  		}
	}





@media only screen and (min-width : 480px) and (max-width : 595px) {/* Mobile landscape */
  	.container {
		width: 100%; 
  		}
	}





@media only screen and (min-width : 595px) and (max-width : 690px) {/* Small tablet portrait */
  	.container {
		width: 100%;  
  		}
	}





@media only screen and (min-width : 690px) and (max-width : 769px) {/* Tablet portrait */
  	.container {
		width: 100%;  
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture) --- SMALLER TABLET */
@media only screen and (min-width : 769px) and (max-width : 800px) {/* Small tablet landscape */
	.container {
		width: 100%; 
  		}
	}





/* SMALLER TABLET screens */   /* (location for ID picture --- SMALLER TABLET */
@media only screen and (min-width : 800px) and (max-width : 1024px) {/* Small tablet landscape */
  	.container {
		width: 100%;  
  		}
	}





@media only screen and (min-width : 1024px) and (max-width : 1224px) {/* Tablet landscape */
  	.container {
		width: 100%;  
  		}
	}






/* Desktops and laptops */  /* SMALL DESKTOP */
@media only screen 
and (min-width : 1224px) {
  	.container {
		width: 70%; 
		} 
	}





/** ------------------------------------- **/

.hover-container {
  text-align: center;
  margin-bottom: 2em;
}

.body-text {
  margin: 0.5em 0; 
}

.body-text-header-paragraph {
  margin: 0.5em 0;  
	padding-left: 32px; padding-right: 10px;  
	text-align: justify !important;
}

/* --- this is the code you probably want ---- */

h1 {
  border-bottom: 3px solid #ff8cbc;
  font-size: clamp(1.2rem, 1.5vw, 4.1vh);  
  transition: all 0.25s linear;
  position: relative;
}

h1:before {
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: #61a3ff;
  position: absolute;
  left: 0;
  bottom: -3px; /* this is to match where the border is */
  transform-origin: left; 
  transform: scale(0);
  transition: 0.25s linear;
/*   will-change: transform; */
}

h1:hover:before {
  transform: scale(1);
}











html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

#be-ye-thankful {
  777background-color: #eaeaeaff;
  777font-family: "Montserrat", sans-serif;
  font-size: 0.875em; 
  color: #444444; color: #000000;
  line-height: 1.5;
}

.dl-blurbs {
  display: grid;
}
@media (min-width: 768px) {
  .dl-blurbs {
    grid-template-columns: repeat(2, 1fr);
    gap: 2vw;
  }
}

/* LIST */
dl {
  counter-reset: count;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.04) 20%, rgba(255, 255, 255, 0) 0%);
  padding-left: 4vw;
  padding-right: 4vw;
  margin: 0; 
}
@media (min-width: 768px) {
  dl {
    padding-left: 2vw;
  }
}
@media (min-width: 1024px) {
  dl {
    padding-top: 3vw;
    padding-bottom: 3vw;
  }
}

dl + dl {
  counter-reset: counter 4;
}

dt {
  counter-increment: count;
  color: #4f6d7aff;
  777font-family: "Montserrat", sans-serif;
  font-size: clamp(1.2rem, 1.5vw, 4.1vh);
  text-transform: uppercase;
	font-weight: 900;
}

dt::before {
  content: counter(count, decimal-leading-zero) ".";
  777font-family: "Abril Fatface", cursive;
  color: #5ea5b8ff;
  margin-left: -1vw;
  padding-right: 12px; 
	font-weight: 900;
}

dd {
  margin-left: 5vw;
  margin-bottom: 2vh;
}




.date-privacy {
	width: 100%; 
	height: 55px; 
	border: 0px;
	}

 

.date-marker {
	width: auto;
	height: 25px;
	float: left;
	left: 0;
	margin-left: 35px;
	padding-top: 40px;
	border: 0px;
  	font-size: 11px;
  	color: #000000;
	margin-top: 0px;  
        font-family: effra, sans-serif; 
	position: absolute; 
	display: inline;
	}

.privacy-marker {
	width: auto;
	height: 25px;
	float: right;
	right: 0;
	margin-right: 35px;
	padding-top: 40px;
	border: 0px;
  	font-size: 11px;
  	color: #000000;
	margin-top: 0px;  
        font-family: effra, sans-serif; 
	position: absolute; 
	display: inline;
	}

.footer-address {
  	display: inline;
  	font-style: normal;   
	}


/**** FOR CLEAR BACKGROUND-COLOR  **TERMS & PRIVACY ELEMENTS***************(DO NOT CHANGE OR UPDATE)***************************/
.Stand-Alone-generic-anchor_CLEAR-BG { 
	FONT-SIZE: 11PX;
	color: #003399 !important;/**DO NOT CHANGE**/ 
	text-decoration: none; 
	}

.Stand-Alone-generic-anchor_CLEAR-BG:link { 
	FONT-SIZE: 11PX;
	color: #003399 !important;/**DO NOT CHANGE**/ 
	}

.Stand-Alone-generic-anchor_CLEAR-BG:visited {
	color: #004d00 !important;/**DO NOT CHANGE**/ 
	}

.Stand-Alone-generic-anchor_CLEAR-BG:hover {
	color: #400080 !important;/**DO NOT CHANGE**/ 
	}

.Stand-Alone-generic-anchor_CLEAR-BG:active {
	color: #801a00 !important;/**DO NOT CHANGE**/ 
	}

.Stand-Alone-generic-anchor_CLEAR-BG:focus {
	color: #86592d !important;/**DO NOT CHANGE**/ 
	}
/*****END OF FOR CLEAR BACKGROUND-COLOR BOTTOM NAVIGATION ELEMENTS********************(DO NOT CHANGE OR UPDATE)***************/
