<!--FARM-->
<!doctype html>
<html lang="en">
<head>
<link href='https://fonts.googleapis.com/css?family=Courgette|Kalam|Eagle+Lake|Merienda+One' rel='stylesheet' type='text/css' />
<style type="text/css">
body {
background: url(/_layout/images/bkg/harvest.png) no-repeat center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.HDR {font-size:14px; padding:.5em 1em .25em 1em; text-align:center;}
.REF {font-size:10px; padding:0 1em 0 0; text-align:right;}
.HDR2 {font-size:14px; padding:.5em 1em .25em 1em; text-align:center;}
.REF2 {font-size:10px; padding:0 1em 0 0; text-align:right;}
.SHC {font-size:14px; padding:0 1em; text-align: right;}
.LeftImage{visibility: visible;}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.HDR {font-size:18px; padding:.5em 2em .25em 2em; text-align:center;}
.REF {font-size:14px; padding:0 1em 0 0; text-align:right;}
.HDR2 {font-size:18px; padding:.5em 2em .25em 2em; text-align:center;}
.REF2 {font-size:14px; padding:0 1em 0 0; text-align:right;}
.SHC {font-size:14px; padding:0 1em; text-align: right;}
.LeftImage{visibility: hidden;}
}
/* Medium to large devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 770px) {
.HDR {font-size:20px; padding:3em 2em .25em 2em; text-align:center;}
.REF {font-size:16px; padding:0 1em 0 0; text-align:right;}
.HDR2 {font-size:20px; padding:2em 2em .25em 2em; text-align:center;}
.REF2 {font-size:16px; padding:0 1em 0 0; text-align:right;}
.SHC {font-size:18px; padding:0 1em; text-align: right;}
.LeftImage{visibility: visible;}
</style>
</head>
<body class="NavigationPage">
<div style="position:fixed; width:100%; z-index:98; overflow:hidden; border:none;">
<div class="SHC" style="font-family:'Kalam', cursive; color:#999999;">
Sacred Heart Catholic Church ~ Heron Lake, MN</div>
</div>
<div style=" position:absolute; bottom:0; width:100%; z-index:99; overflow:hidden; border:none;">
<div class="HDR" style="font-family:'Merienda One', cursive; color:#FFFFFF; text-shadow: 1px 1px #000000;">
Be patient, therefore, brothers, until the coming of the Lord. See how the farmer waits for the precious fruit of the earth, being patient with it until it receives the early and the late rains.
</div>
<div class="REF" style="font-family:'Merienda One', cursive; color:#FFFFFF; text-shadow: 1px 1px #000000;">
James 5:7
</div>
</div>
<div data-visible-from="20-10-03" data-visible-to="20-10-09">
<div style="position:fixed; width:100%; z-index:98; overflow:hidden; border:none;">
<div class="SHC" align="right" style="font-family:'Kalam', cursive; color:#0B3861; text-shadow: 1px 1px #CCCCCC;">
Sacred Heart Catholic Church ~ Heron Lake, MN</div>
</div>
<div style=" position:absolute; bottom:0; width:100%; z-index:99; overflow:hidden; border:none;">
<div class="HDR" align="center" style="font-family:'Yatra One', cursive; color:#FFFFFF; text-shadow: 1px 1px #0B3861;">
Do not be anxious about anything, but in every situation, by prayer and petition, with thanksgiving, present your requests to God.
</div>
<div class="REF" align="right" style="font-family:'Courgette', cursive; color:#FFFFFF; text-shadow: 1px 1px #0B3861;">
Philippians 4:6
</div>
</div>
</div>
<!--SCRIPT FOR REMOVING AFTER DATE-->
<script>
// i.e. "20-02-16" from "2016-02-16T......"
var md = (new Date()).toISOString().substring(2, 10);
[].slice.call(document.querySelectorAll("[data-visible-from],[data-visible-to]")).forEach(function(el) {
// Nab the visible-from date, or if it's not available, then the smallest
// possible date per year (1 Jan)
var from = el.dataset.visibleFrom || "20-01-01";
var to = el.dataset.visibleTo || "50-12-31";
// Then simply set the element's `display` to none if today's not the day.
el.style.display = (from <= md && md <= to ? "" : "none");
});
</script>
</body>
</html>