* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


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

		/*************************************************************************
		                                 Small Size
		*************************************************************************/
		/*********************************************************
		                      MASTER NAVIGATION
		**********************************************************/

		nav {
		  background-color: black;
			text-align: center;
			font-family: 'Oswald', sans-serif;
			font-size: 1em;
		  font-weight: 400;
			margin: 20px 0 0;
			height: 40px;
			margin: 0;
		  padding: 0;
		  border: 0;
		  padding: 5px 0; /* increases top and bottom space */
		  display: block;
		}

				#socialmedia {
			font-family: 'Oswald', sans-serif;
			font-size: .75em;
			background-color: white;
			color: lightgrey;
			text-align: center;
			line-height: 50%;
			padding-bottom: 10px;
		}


		 /*
		  header img {
		  height: 166px;
			width: 272px;
		}
		/***/

		#headline {
			font-size: 5em;
			font-weight: 600;
			line-height: 20%;
		}


		/*********************************************************
		                       Index Landing Page
		**********************************************************/

		#announcement {
		    background: linear-gradient(to bottom, #98b4cc, white);
		    padding: 35px 0px;
		    box-sizing: border-box; /* Ensure padding doesn't affect the div's width */
		    display: block;
		}

		/**** You Are Invited ******/
		#announcement h1 {
			font-family: 'Oswald', sans-serif;
			font-weight: 700;
			font-size: clamp(28px, 12vw, 60px);
			color: white;
			text-align: center;
			text-shadow: 2px 2px 5px black;
			line-height: 1em;
			margin-top: 10px;
			margin: 0;
    	padding: 0;
			}

		/**** To This FREE Event ******/
			#announcement h6 {
			font-family: 'Oswald', sans-serif;
			font-weight: 700;
			font-size: 1em;
			color: white;
		  text-shadow: 2px 2px 5px black;
			text-align: center;
			line-height: 0em;
			margin-top: 0px;
			margin-bottom: 0px;
			padding: 0px 0px;
			}

		/**** Theme: Why Jesus? ******/
		#HOJevent {
			font-family: 'Kanit', sans-serif;
			font-size: 2em;
			color: #be1e2d;
			text-align: center;
			line-height: .9em;
			font-weight: 600;
		}

		.Whyone {
			font-family: 'Kanit', sans-serif;
			color: #2e3192;
			text-align: center;
			line-height: .9em;
			font-weight: 600;
		  font-size: 1em;
		}

		/**** Date ******/
		#HOJdate {
			font-family: 'Kanit', sans-serif;
			color: black;
			text-align: center;
			font-weight: 600;
			line-height: 0.1em;
		  font-size: 1.6em;
		}

		/**** Location ******/
		#HOJlocation {
			font-family: 'Kanit', sans-serif;
			font-size: 1.25em;
			color: black;
			text-align: center;
			font-weight: 400;
			line-height: 1.1em;
			margin-top: 20px;
		}

		/**** 12 Sessions,12 Speakers ******/
		#HOJtagline {
			font-family: 'Kanit', sans-serif;
			font-size: 1.25em;
			color: #2e3192;
			text-align: center;
			font-weight: 600;
		}

		#HOJ_CTA {
			font-family: 'Kanit', sans-serif;
			font-weight: 600;
			font-size: 1.75em;
			padding: 0 20px 0 20px;
			text-align: center;
			line-height: 1.25em;
			margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 25px;
		}

		#HOJPerks {
			font-family: 'Kanit', sans-serif;
			font-size: 1.5em;
			color: black;
			text-align: center;
			font-weight: 400;
			line-height: 1.25em;
		}

		#HOJheadline h1 {
			font-family: 'Kanit', sans-serif;
			font-size: 2.2em;
			color: #f99f36;
			text-align: center;
			line-height: 1em;
			font-weight: 600;
		}

		.HOJheadline h2 {
			font-family: 'Kanit', sans-serif;
			font-size: 1.50em;
			color: #be1e2d;
			text-align: center;
			line-height: .6em;
			font-weight: 600;
		}

		.HOJheadline p {
			font-family: 'Kanit', sans-serif;
			font-weight: 300;
			font-size: 16px;
			padding: 0 20px 0 20px;
			text-align: justify;
			line-height: 1.25em;
			margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 25px;
			color: black;
			}

		/*********************************************************
		                       Schedule Page
		**********************************************************/

		.Sub_Page_02 h1 {
			font-family: 'Oswald', sans-serif;
			font-weight: 700;
			font-size: 2em;
			color: #f99f36;
			text-align: center;
			margin-top: 10px;
		}

		.Sub_Page_02 h4 {
			font-family: 'Oswald', sans-serif;
			font-weight: 700;
			font-weight: 600;
			color: #2e3192;
			font-size: 24px;
			text-align: center;
			line-height: 2em;
			margin: 0;
		}

		.Sub_Page_02 h6 {
			font-family: 'Kanit', sans-serif;
			font-weight: 600;
			color: #be1e2d;     /* 12HOJ Red  */
			font-size: 18px;
			text-align: center;
			line-height: 1em;
			margin: 0;
		}

		.Sub_Page_01 h5 {
			font-family: 'Kanit', sans-serif;
			font-weight: 600;
			color: #be1e2d;     /* 12HOJ Red  */
			font-size: 24px;
			text-align: center;
			line-height: .75em;
		}

		.Sub_Page_02 p {
			font-family: 'Kanit', sans-serif;
			font-weight: 200;
			color: black;
			font-size: 16px;
			text-align: center;
			line-height: .75em;
		}

		.Sub_Page_02 ul {
			list-style: none;
			font-family: 'Oswald', sans-serif;
			font-weight: 300;
			color: #2e3192;
			text-align: center;
			background: white;
			line-height: 1.25em;
			text-decoration: none;
			margin-left: -10px;
		    font-size: 16px;
		}

		.Sub_Page_02 li {
			line-height: 1.7em;
			text-decoration: none;
		}

		.Time {
			font-family: 'Oswald', sans-serif;
			font-weight: 400;
			color: black;
			font-size: 18px;
		}

		.SermTitle a {
			text-decoration: none;
			font-family: 'Oswald', sans-serif;
			font-weight: 600;
			color: #be1e2d;      /* 12HOJ Red  */
			font-size: 22px;
		}

		.Preacher {
			font-family: 'Oswald', sans-serif;
			font-weight: 600;
			color: #2e3192;
			font-size: 20px;
		}

		.SermTitle a:link {
			color: #be1e2d;     /* 12HOJ Red  */
		}

		.SermTitle a:visited {
			color: #be1e2d;       /* 12HOJ Red  */
		}

		.SermTitle a:hover {
			color: #be1e2d;     /* 12HOJ Red  */
		}

		.SermTitle a:active {
			color: #be1e2d;
		}
		}


@media (min-width: 481px) and (max-width: 1023px) {

		/*************************************************************************
		                                  Medium Size
		*************************************************************************/


		/*********************************************************
		                       MASTER FOOTER
		**********************************************************/
		nav {
		  background-color: black;
			text-align: center;
			font-family: 'Oswald', sans-serif;
			font-size: 1em;
		}
		
		footer {
			max-width: 960px;
		  background: white;
			align-items: center;
		}

		#socialmedia {
			font-family: 'Oswald', sans-serif;
			font-size: .75em;
			background-color: white;
			color: lightgrey;
			text-align: center;
			line-height: 50%;
			padding-bottom: 10px;
		}

		#socialmedia img {
			width: 4%;
		  height: 4%;
			margin-top: 30px;
		}

		#copyright {
			font-family: 'Oswald', sans-serif;
			font-size: .75em;
			background-color: #2e3192;
			color: lightgrey;
			text-align: center;
			padding: 10px;
		}

		/*********************************************************
		                       Index Landing Page
		**********************************************************/


		#announcement {
		    background: linear-gradient(to bottom, #98b4cc, white);
		    padding: 35px 0px;
		    box-sizing: border-box; /* Ensure padding doesn't affect the div's width */
		}

		/**** You Are Invited ******/
		#announcement h1 {
			font-family: 'Oswald', sans-serif;
			font-weight: 700;
			font-size: 4em;
			color: white;
			text-align: center;
			text-shadow: 2px 2px 5px black;
			line-height: 1em;
			margin-top: 10px;
			}

		/**** To This FREE Event ******/
			#announcement h6 {
			font-family: 'Oswald', sans-serif;
			font-weight: 700;
			font-size: 2.5em;
			color: white;
		  text-shadow: 2px 2px 5px black;
			text-align: center;
			line-height: 1em;
			margin-top: 20px;
			margin-bottom: 0px;
			padding: 0px 0px;
			}

		/**** Theme: Why Jesus? ******/
		#HOJevent {
			font-family: 'Kanit', sans-serif;
			font-size: 2em;
			color: #be1e2d;
			text-align: center;
			line-height: .9em;
			font-weight: 600;
		}

		.Whyone {
			font-family: 'Kanit', sans-serif;
			color: #2e3192;
			text-align: center;
			line-height: 1em;
			font-weight: 600;
		  font-size: 1.5em;
		}

		/**** Date ******/
		#HOJdate {
			font-family: 'Kanit', sans-serif;
			font-size: 2em;
			color: black;
			text-align: center;
			font-weight: 600;
			line-height: 1em;
		}

		/**** Location ******/
		#HOJlocation {
			font-family: 'Kanit', sans-serif;
			font-size: 1.25em;
			color: black;
			text-align: center;
			font-weight: 400;
			line-height: 1.1em;
		}

		/**** 12 Sessions,12 Speakers ******/
		#HOJtagline {
			font-family: 'Kanit', sans-serif;
			font-size: 1.25em;
			color: #2e3192;
			text-align: center;
			font-weight: 600;
		}

		#HOJheadline h1 {
			font-family: 'Kanit', sans-serif;
			font-size: 2.2em;
			color: #f99f36;
			text-align: center;
			line-height: 1em;
			font-weight: 600;
		}

		.HOJheadline h2 {
			font-family: 'Kanit', sans-serif;
			font-size: 1.50em;
			color: #be1e2d;
			text-align: center;
			line-height: .6em;
			font-weight: 600;
		}

		.HOJheadline p {
			font-family: 'Kanit', sans-serif;
			font-weight: 300;
			font-size: 16px;
			padding: 0 20px 0 20px;
			text-align: justify;
			line-height: 1.25em;
			margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 25px;
			color: black;
		}

		#HOJ_CTA {
			font-family: 'Kanit', sans-serif;
			font-weight: 600;
			font-size: 1.75em;
			padding: 0 20px 0 20px;
			text-align: center;
			line-height: 1.25em;
			margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 25px;
		}

		#HOJPerks {
			font-family: 'Kanit', sans-serif;
			font-size: 1.5em;
			color: black;
			text-align: center;
			font-weight: 400;
			line-height: 1.25em;
		}


		/*********************************************************
		                       Preview Page
		**********************************************************/

		.preview_page p {
			font-family: 'Kanit', sans-serif;
			font-weight: 300;
			font-size: 18px;
			text-align: justify;
			line-height: 1.25em;
			margin-left: 40px;
			margin-right: 40px;
			margin-bottom: 25px;
			margin-top: 0px;
			color: black;
		}



		/*********************************************************
		                       Schedule Page
		**********************************************************/

		.Sub_Page_02 h1 {
			font-family: 'Oswald', sans-serif;
			font-weight: 700;
			font-size: 2em;
			color: #f99f36;
			text-align: center;
			margin-top: 10px;
		}

		.Sub_Page_02 h4 {
			font-family: 'Oswald', sans-serif;
			font-weight: 700;
			font-weight: 600;
			color: #2e3192;
			font-size: 24px;
			text-align: center;
			line-height: 2em;
			margin: 0;
		}

		.Sub_Page_02 h6 {
			font-family: 'Kanit', sans-serif;
			font-weight: 600;
			color: #be1e2d;     /* 12HOJ Red  */
			font-size: 18px;
			text-align: center;
			line-height: 1em;
			margin: 0;
		}

		.Sub_Page_01 h5 {
			font-family: 'Kanit', sans-serif;
			font-weight: 600;
			color: #be1e2d;     /* 12HOJ Red  */
			font-size: 24px;
			text-align: center;
			line-height: .75em;
		}

		.Sub_Page_02 p {
			font-family: 'Kanit', sans-serif;
			font-weight: 200;
			color: black;
			font-size: 18px;
			text-align: center;
			line-height: .15em;
		}

		.Sub_Page_02 ul {
			list-style: none;
			font-family: 'Oswald', sans-serif;
			font-weight: 300;
			color: #2e3192;
			text-align: center;
			background: white;
			line-height: 1.25em;
			text-decoration: none;
			margin-left: -10px;
		  font-size: 16px;
		}

		.Sub_Page_02 li {
			line-height: 1.7em;
			text-decoration: none;
		    text-align: center;
		}

		.Time {
			font-family: 'Oswald', sans-serif;
			font-weight: 400;
			color: black;
			font-size: 18px;
		}

		.SermTitle a {
			text-decoration: none;
			font-family: 'Oswald', sans-serif;
			font-weight: 600;
			color: #be1e2d;      /* 12HOJ Red  */
			font-size: 28px;
		  line-height: 1.7em;
		}

		.Preacher {
			font-family: 'Oswald', sans-serif;
			font-weight: 400;
			color: #2e3192;
			font-size: 18px;
		}

		.SermTitle a:link {
			color: #be1e2d;     /* 12HOJ Red  */
		}

		.SermTitle a:visited {
			color: #be1e2d;       /* 12HOJ Red  */
		}

		.SermTitle a:hover {
			color: #be1e2d;     /* 12HOJ Red  */
		}

		.SermTitle a:active {
			color: #be1e2d;
		}


		/*********************************************************
		                       Blog Page
		**********************************************************/

		.blog-grid {
		  display: grid;
		  grid-template-columns: repeat(3, 1fr);
		  gap: 0; /* removes white space between cards */
		  width: 100%; /* stretch across the entire viewport */
		  margin: 0;
		  padding: 0;
		}

		.blog-card {
		  background: white;
		  border: 1px solid #ddd;
		  padding: 2em;
		  box-sizing: border-box;
		  text-align: center;
		  transition: transform 0.3s ease, box-shadow 0.3s ease;
		}

		.blog-card:hover {
		  transform: translateY(-4px);
		  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
		}
		}





@media screen and (min-width: 1024px) {

		/*************************************************************************
		                                  Large Size
		*************************************************************************/


		/*********************************************************
		                       MASTER FOOTER
		**********************************************************/
		nav {
		  background-color: black;
			text-align: center;
			font-family: 'Oswald', sans-serif;
			font-size: 1em;
		}

		footer {
			max-width: 960px;
		  background: white;
			align-items: center;
		}

		#socialmedia {
			font-family: 'Oswald', sans-serif;
			font-size: .75em;
			background-color: white;
			color: lightgrey;
			text-align: center;
			line-height: 50%;
			padding-bottom: 10px;
		}

		#socialmedia img {
			width: 4%;
		  height: 4%;
			margin-top: 30px;
		}

		#copyright {
			font-family: 'Oswald', sans-serif;
			font-size: .75em;
			background-color: #2e3192;
			color: lightgrey;
			text-align: center;
			padding: 10px;
		}

		/*********************************************************
		                       Index Landing Page
		**********************************************************/


		#announcement {
		    background: linear-gradient(to bottom, #98b4cc, white);
		    padding: 35px 0px;
		    box-sizing: border-box; /* Ensure padding doesn't affect the div's width */
		}

		/**** You Are Invited ******/
		#announcement h1 {
			font-family: 'Oswald', sans-serif;
			font-weight: 700;
			font-size: 4em;
			color: white;
			text-align: center;
			text-shadow: 2px 2px 5px black;
			line-height: 1em;
			margin-top: 10px;
			}

		/**** To This FREE Event ******/
			#announcement h6  {
			font-family: 'Oswald', sans-serif;
			font-weight: 700;
			font-size: 2.5em;
			color: white;
		  text-shadow: 2px 2px 5px black;
			text-align: center;
			line-height: 1em;
			margin-top: 0px;
			margin-bottom: 0px;
			padding: 0px 0px;
			}

		/**** Theme: Why Jesus? ******/
		#HOJevent {
			font-family: 'Kanit', sans-serif;
			font-size: 2em;
			color: #be1e2d;
			text-align: center;
			line-height: 1em;
			font-weight: 600;
		}

		.Whyone {
			font-family: 'Kanit', sans-serif;
			color: #2e3192;
			text-align: center;
			line-height: 1em;
			font-weight: 600;
		  font-size: 1.5em;
		}

		/**** Date ******/
		#HOJdate {
			font-family: 'Kanit', sans-serif;
			font-size: 2.5em;
			color: black;
			text-align: center;
			font-weight: 600;
			line-height: 1em;
			margin-top: 20px;

		}

		/**** Location ******/
		#HOJlocation {
			font-family: 'Kanit', sans-serif;
			font-size: 1.75em;
			color: black;
			text-align: center;
			font-weight: 400;
			line-height: 1.1em;
			margin-top: 20px;
		}

		/**** 12 Sessions,12 Speakers ******/
		#HOJtagline {
			font-family: 'Kanit', sans-serif;
			font-size: 2em;
			color: #2e3192;
			text-align: center;
			font-weight: 600;
		}

		.HOJheadline h1 {
			font-family: 'Kanit', sans-serif;
			font-size: 2.2em;
			color: #f99f36;
			text-align: center;
			line-height: 1em;
			font-weight: 600;
		}

		.HOJheadline h2 {
			font-family: 'Kanit', sans-serif;
			font-size: 1.50em;
			color: #be1e2d;
			text-align: center;
			line-height: 1em;
			font-weight: 600;
		}

		.HOJheadline p {
			font-family: 'Kanit', sans-serif;
			font-weight: 300;
			font-size: 16px;
			padding: 0 20px 0 20px;
			text-align: justify;
			line-height: 1.25em;
			margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 25px;
			color: black;
		}

		#HOJ_CTA {
			font-family: 'Kanit', sans-serif;
			font-weight: 600;
			font-size: 1.75em;
			padding: 0 20px 0 20px;
			text-align: center;
			line-height: 1.25em;
			margin-left: 25px;
			margin-right: 25px;
			margin-bottom: 25px;
		}

		#HOJPerks {
			font-family: 'Kanit', sans-serif;
			font-size: 1.5em;
			color: black;
			text-align: center;
			font-weight: 400;
			line-height: 1.25em;
		}


		/*********************************************************
		                       Preview Page
		**********************************************************/

		.preview_page p {
			font-family: 'Kanit', sans-serif;
			font-weight: 300;
			font-size: 18px;
			text-align: justify;
			line-height: 1.25em;
			margin-left: 40px;
			margin-right: 40px;
			margin-bottom: 25px;
			margin-top: 0px;
			color: black;
		}



		/*********************************************************
		                       Schedule Page
		**********************************************************/

		.Sub_Page_02 h1 {
			font-family: 'Oswald', sans-serif;
			font-weight: 700;
			font-size: 2em;
			color: #f99f36;
			text-align: center;
			margin-top: 10px;
		}

		.Sub_Page_02 h4 {
			font-family: 'Oswald', sans-serif;
			font-weight: 700;
			font-weight: 600;
			color: #2e3192;
			font-size: 24px;
			text-align: center;
			line-height: 2em;
			margin: 0;
		}

		.Sub_Page_02 h6 {
			font-family: 'Kanit', sans-serif;
			font-weight: 600;
			color: #be1e2d;     /* 12HOJ Red  */
			font-size: 18px;
			text-align: center;
			line-height: 1em;
			margin: 0;
		}

		.Sub_Page_01 h5 {
			font-family: 'Kanit', sans-serif;
			font-weight: 600;
			color: #be1e2d;     /* 12HOJ Red  */
			font-size: 24px;
			text-align: center;
			line-height: 1em;
		}

		.Sub_Page_02 p {
			font-family: 'Kanit', sans-serif;
			font-weight: 200;
			color: black;
			font-size: 18px;
			text-align: center;
			line-height: 1em;
		}

		.Sub_Page_02 ul {
			list-style: none;
			font-family: 'Oswald', sans-serif;
			font-weight: 300;
			color: #2e3192;
			text-align: center;
			background: white;
			line-height: 1.25em;
			text-decoration: none;
			margin-left: -10px;
		  font-size: 16px;
		}

		.Sub_Page_02 li {
			line-height: 1.7em;
			text-decoration: none;
		    text-align: center;
		}

		.Time {
			font-family: 'Oswald', sans-serif;
			font-weight: 400;
			color: black;
			font-size: 18px;
		}

		.SermTitle a {
			text-decoration: none;
			font-family: 'Oswald', sans-serif;
			font-weight: 600;
			color: #be1e2d;      /* 12HOJ Red  */
			font-size: 28px;
		  line-height: 1.7em;
		}

		.Preacher {
			font-family: 'Oswald', sans-serif;
			font-weight: 400;
			color: #2e3192;
			font-size: 18px;
		}

		.SermTitle a:link {
			color: #be1e2d;     /* 12HOJ Red  */
		}

		.SermTitle a:visited {
			color: #be1e2d;       /* 12HOJ Red  */
		}

		.SermTitle a:hover {
			color: #be1e2d;     /* 12HOJ Red  */
		}

		.SermTitle a:active {
			color: #be1e2d;
		}


		/*********************************************************
		                       Blog Page
		**********************************************************/

		.blog-grid {
		  display: grid;
		  grid-template-columns: repeat(3, 1fr);
		  gap: 0; /* removes white space between cards */
		  width: 100%; /* stretch across the entire viewport */
		  margin: 0;
		  padding: 0 1%;
		}

		.blog-card {
		  background: white;
		  border: 1px solid #ddd;
		  padding: 2em;
		  box-sizing: border-box;
		  text-align: center;
		  transition: transform 0.3s ease, box-shadow 0.3s ease;
		}

		.blog-card:hover {
		  transform: translateY(-4px);
		  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
		}
}