@charset "utf-8";
/* CSS Document */

html
{
	scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------------- */
/* Fonts */
/* ---------------------------------------------------------------------------- */

@font-face 
{
   font-family: dyslexicFriendlyFont;
   src: url("../fonts/OpenDyslexicMono-Regular.otf");
}

h2,
h5,
.header,
.titleRow,
#filters li span,
.pageNavigation,
.headerRowRight_Label
{
	font-family: 'Raleway', sans-serif;
}

/* ---------------------------------------------------------------------------- */
/* Standard HTML Tags */
/* ---------------------------------------------------------------------------- */

h1
/* Content Page Header */
{
	font-family: 'Cherry Swash', serif;  
    font-size: 32px;  /* 2.0rem */
}

h5
/* Banner Header */
{
	font-size: 45px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 20px;
	padding-top: 80px;
}

p,
ul,
.btn-lg
{
    font-family: 'Nunito', sans-serif;
	font-size: 18px;
}

a
{
	text-decoration: none;
}

/* ---------------------------------------------------------------------------- */
/* Header */
/* ---------------------------------------------------------------------------- */

.header-wrapper-tall
{
	width: 100%;
	padding-bottom: 30px;
	min-height: 210px;
}

.header-wrapper-short
{
	width: 100%;
	padding-bottom: 10px;
	
	position: fixed;
	z-index: 1000;
}

.header 
{
	width: 960px; 
	max-width: 80%;
	
	display: flex;
	justify-content: space-between;
	margin: auto;
	align-items: center;
	padding-top: 6px;
}

.header_Left
{
  	float: left;
}

.header_Right
{
  	float: right;
	text-align: center;
}

.headerRowRight_Label 
{
	left: 0px; /* Changed for RTL */

	margin-right: 0px; /* Changed for RTL */
	margin-left: 0px; /* Changed for RTL */
}

#id_header_Name
{
	font-size: 24px;
	font-weight: bold;
}


/* ---------------------------------------------------------------------------- */
/* Navigation Top and Bottom */
/* ---------------------------------------------------------------------------- */

.pageNavigation
{
	width: 960px; 
	max-width: 97%;
	
	display: flex;
	justify-content: space-between;
	margin-right: 1%;
	padding-top: 30px;
}

.navigate_Left
{
	float: left;
}

.navigate_Right
{
	float: right;
}


/* ---------------------------------------------------------------------------- */
/* General Custom Classes and ID's */
/* ---------------------------------------------------------------------------- */

.imgFrame_MediumWide
{
	text-align: center;
}

.imgFrame_MaximumWide
{
	width: 100%;
	text-align: center;
}


#myPic
{
	top:0px;
}

/* ---------------------------------------------------------------------------- */
/* Buttons */
/* ---------------------------------------------------------------------------- */

.btn-lg 
{
    margin: 15px;
	padding: 1rem 1.5rem;

	font-size: 15px;
	
    border: none;
	border-radius: .3rem;
	
	-webkit-appearance: button;
	
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out;
}

/* ---------------------------------------------------------------------------- */
/* Title Animations */
/* ---------------------------------------------------------------------------- */

.titleRow
{
	font-size: 21px;
	width: 700px;
	margin-left: auto;
	margin-right: auto;
}

#id_header_title_1
{
	animation-duration: 4.25s;
  	animation-name: titleFade1;
  	animation-iteration-count: infinite;
}

@keyframes titleFade1 
{
  from 
  {
    opacity: 0;
  }

  33% 
  {
    opacity: 1;
  }
  
  66%
  {
  	opacity: 0;
  }

  to 
  {
    opacity: 0;
  }
}

#id_header_title_2
{
	animation-duration: 4.25s;
  	animation-name: titleFade2;
  	animation-iteration-count: infinite;
}

@keyframes titleFade2
{
  from 
  {
    opacity: 0;
  }

  33% 
  {
    opacity: 0;
  }
  
  66%
  {
  	opacity: 1;
  }

  to 
  {
    opacity: 0;
  }
}

#id_header_title_3
{
	animation-duration: 4.25s;
  	animation-name: titleFade3;
  	animation-iteration-count: infinite;
}

@keyframes titleFade3
{
  from 
  {
    opacity: 0;
  }

  33% 
  {
    opacity: 0;
  }
  
  66%
  {
  	opacity: 0;
  }

  to 
  {
    opacity: 1;
  }
}


/* ---------------------------------------------------------------------------- */
/* Transitions */
/* ---------------------------------------------------------------------------- */

body, span, .container, .newActive
{
	-webkit-transition: background-color 0.25s ease-out;
  	-moz-transition: background-color 0.25s ease-out;
  	-o-transition: background-color 0.25s ease-out;
}

a, #id_header_Name
{
	-webkit-transition: color 0.5s ease-out;
  	-moz-transition: color 0.5s ease-out;
  	-o-transition: color 0.5s ease-out;
}

/* ---------------------------------------------------------------------------- */
/* Misc. Mobile-First Adjustments */
/* ---------------------------------------------------------------------------- */


@media only screen and (max-width: 767px) 
{
	.titleRow
	{
		width: 70%;
	}
	
	.imgFrame_MediumWide iframe
	{
		width: 100%;
		height: auto;
	}
	
	h5
	{
		width: 70%;
	}
}

@media only screen and (max-width: 635px) 
{
	.pageNavigation
	{
		padding-top: 50px;
	}
	
	.header-wrapper-tall
	{
		padding-top: 30px;
	}
}

@media only screen and (max-width: 455px) 
{
	
	h5
	{
		font-size: 25px;
		width: 90%;
	}
	
	.titleRow
	{
		width: 90%;
	}
}

@media only screen and (max-width: 415px) 
{
	.titleRow
	{
		font-size: 12px;
	}
	
	h5
	{
		font-size: 20px;
	}
}