body {
	margin: 0px;
	padding: 0px;
	font-size: 18px;
	/*background: fixed;*/
}
.mobilebreak, .storymobilebreak, .referencetitlebreak, .sloganmobilebreak, .storybreak {
	display: none;
}
.acme-gothic-condensed-light {
	font-family: "acme-gothic-condensed", sans-serif;
	font-weight: 300;
	font-style: normal;
}
.acme-gothic-condensed-regular {
	font-family: "acme-gothic-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.acme-gothic-condensed-semibold {
	font-family: "acme-gothic-condensed", sans-serif;
	font-weight: 600;
	font-style: normal;
}
.acme-gothic-condensed-bold {
	font-family: "acme-gothic-condensed", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.acme-gothic-condensed-black {
	font-family: "acme-gothic-condensed", sans-serif;
	font-weight: 800;
	font-style: normal;
}
#splashintro {
	margin: 0px;
	padding: 0px;	
}
#splashintro {
	/*box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.3);*/
	width: 100%;
}
#frontpagesplash {
	position: relative;
}
#frontpagesplash #downarrow img {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 300px;
	display: block;
	left: 50%;
	bottom: 40px;
	transform: translate(-50%);
}
#downarrow {
    animation: bounce 0.5s;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
    animation-iteration-count: infinite;
}
@keyframes bounce {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(0, 40px, 0);
    }
}
#charactertitle, #charactertitlemobile {
	margin-top: -5px;
	padding: 25px 0px 35px 0px;
	text-align: center;
    width: 100%;
    background-position: top center;
    background-size: 100%;
    border-top: 15px solid white;
}
#charactertitle h1, #charactertitlemobile h1 {
	margin-top: 30px;
	margin-bottom: 40px;
	color: white;
    text-shadow: 2px 2px 7px black;
    font-size: calc(4vw + 4vh);
    text-transform: uppercase;
}
#charactertitlemobile h1 {
    text-transform: none !important;
}
#charactertitle img, #charactertitlemobile img {
	position: absolute;
	left: 0;
	right: 0;
	margin: -60px auto 0px auto;
	width: 100%;
	max-width: 397px;
}
#weekdayofyear {
	font-size: calc(1.5vw + 1.5vh);
}
#pfocslogan {
	position: absolute;
	color: #fde6b7;
	text-align: center;
	margin-top: 125px;
	z-index: 100;
	width: 100%;
	font-weight: 300;
	font-style: italic;
	margin-left: -7px;
}
#mainbody {
    padding: 100px 40px 10px 40px;
    border-top: 15px solid white;
}
#definition {
	text-align: center;
    font-size: calc(2.7vw + 2.7vh);
    color: #ffd57f;
}
#definitionmobile .mobiledefined {
	padding-left: 40px;
	padding-right: 40px;
	text-align: center;
    font-size: calc(2.4vw + 2.4vh);
    color: #ffd57f;
}
#definitionmobile .mobiledefined2 {
	padding-left: 40px;
	padding-right: 40px;
	text-align: justify;
    font-size: calc(2.2vw + 2.2vh);
    color:white;
}
.qrcode {
	box-shadow: 1px 1px 12px black;
}
.qrcode img {
	width: 100% !important;
}
#quote {
	margin: 10px 40px 10px 40px;
	text-align: center;
    font-size: calc(2.5vw + 2.5vh);
    color: white;
    border: thin solid black;
    border-radius: 25px;
    box-shadow: inset 0px 0px 70px black;
    padding: 5px 60px 5px 60px;
    line-height: 1.3em;
}
#scripture, #scripture2 {
	margin-top: 50px;
	width: 100%;
    background-position: top center;
    background-size: 100%;
    border-top-left-radius: 100% 50%;
    border-top-right-radius: 100% 50%;
    border-top: 15px solid white;
    border-bottom: 15px solid white;
    box-shadow: 0px 0px 30px black inset;
}
#scripture {
	margin-bottom: 0px;
    border-top-left-radius: 100% 50%;
    border-top-right-radius: 100% 50%;
    border-top: 15px solid white;
    border-bottom: none !important;
    clip-path: inset(0px 0px 20px 0px);
}
#scripture2 {
	margin-top: -65px;
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
    border-top: none !important;
    border-bottom: 15px solid white !important;
    clip-path: inset(30px 0px 0px 0px);
}
#scriptcontent, #scriptcontent2 {
    text-align: center;
    padding: 50px 40px 0px 40px;
}
#scriptcontent h1, #scriptcontent2 h1 {
	color: white;
    text-shadow: 2px 2px 7px black;
    font-size: calc(2.5vw + 2.5vh);
    margin-bottom: 40px;
    line-height: 1.2em;
}
#scriptcontent p, #scriptcontent ul, #scriptcontent2 p, #scriptcontent2 ol {
	color: black;
    font-size: calc(1.7vw + 1.7vh);
	font-family: "acme-gothic-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
}
#story, #storymobile {
	padding: 0px 100px;
}
#story p, #storymobile p, #storymobile ul {
	color: #5d0000 !important;
	font-weight: 600 !important;
}
#story p, #storymobile p, #scriptcontent p, #scriptcontent ul, #scriptcontent2 p, #scriptcontent2 ol {
	margin: 10px 0px 10px 0px;
}
.clickref {
	display: block;
	color: white !important;
    text-shadow: 1px 1px 3px black;
    font-size: calc(1.3vw + 1.3vh) !important;
    line-height: 1.1em;
    margin-top: 5px;
}
.ref {
	/*margin: 10px 0px 30px 0px;*/
	display: block;
    font-size: calc(1.5vw + 1.5vh) !important;
	font-weight: 600 !important;
}
.bible-link {
	color: #5d0000 !important;
}
#content-divider {
	text-align: center !important;
	margin: 80px auto 80px auto;
}
#content-divider-2 {
	margin: 40px auto 80px auto;
}
#content-divider img {
	margin: 0px auto 0px auto;
}
#content-divider-2 img {
	margin: 0px auto 0px auto;
}
#content-divider-white {
	text-align: center;
	margin: 0px auto 30px auto !important;
}
#content-divider-white img {
	margin: 0px auto 0px auto;
}
#content-divider img, #content-divider-2 img {
	max-width: 700px;
	width: 100%;
}
#content-divider-white img {
	max-width: 400px;
	width: 100%;
}
#references, #outline {
	padding: 0px 70px 50px 70px;
}
#references p, #outline p {
    /*text-shadow: 0px 0px 10px #ffefd2;*/
	line-height: 1.4em;
}
.refhighlight {
	font-weight: 600 !important;
	text-decoration: underline;
}
footer {
	padding: 20px;
}
#copyright {
	width: 100%;
	color: #ffefd2;
	text-align: center;
	font-family: "acme-gothic-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 1.3em;
}
a.telink, a.jslink {
	color: #ffefd2;
	text-decoration: none;
}
#traitlinks {
	font-family: "acme-gothic-condensed", sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	line-height: 1.5em;
}
#traitlinks p, #traitlinks a {
	color: #ffd57f !important;
	font-size: 16px !important;
}
#traitlinks a:hover {
	color: #ffefd2 !important;
	text-decoration: underline !important;
}
.linebreak {
	display: none;
}

#traitlinks .buttundiv:hover {
	box-shadow: 0px 0px 3px black;
	background: linear-gradient(to bottom, tan, beige);
	color: black !important;
	transition: ease .5s;
}
#traitlinks .buttundiv {
	padding: 10px 10px 5px 10px;
	display: inline-block;
	border: thin solid black;
	border-radius: 5px;
	background: linear-gradient(to bottom, beige, tan);
	color: brown !important;
	text-decoration: none;
	box-shadow: 2px 2px 5px black;
	transition: ease .5s;
	line-height: 10px;
	overflow: visible;
}
#traitlinks a.buttonlinks {}


/*******************************/
@media (max-width: 1350px) {
	.sloganmobilebreak {
		display: inline-block;
	}
}
@media (max-width: 1200px) {
	#charactertitle h1, #charactertitlemobile h1 {
		margin-top: 5px;
		margin-bottom: 40px;
	}
	#pfocslogan {
		margin-top: 115px;
	}
}

@media (max-width: 1000px) {
	#charactertitle, #charactertitlemobile {
		padding: 10px 0px 35px 0px;
	}
	#charactertitle img, #charactertitlemobile img {
		max-width: 300px;
		margin-top: -33px;
	}
	#pfocslogan {
		margin-top: 107px;
		font-size: 20px;
	}
	#mainbody {
	    padding-top: 64px;
	}
	#references, #outline {
	  	padding: 0px 50px 50px 50px;
	}
	#story, #storymobile {
	  	padding: 0px 80px;
	}
	#content-divider {
		margin: 40px 0px 20px 0px;
	}
	#scriptcontent h1, #scriptcontent2 h1 {
		margin-bottom: 20px;
	}	
	#mainbody, #charactertitle, #charactertitlemobile {
	    border-top: 10px solid white;
	}
	#scripture, #scripture2 {
    	border-bottom: 10px solid white;
	}
	#quote {
  		margin: 0px 20px 0px 20px;
  	}
	#traitlinks p, #traitlinks a {
		font-size: 14px !important;
	}
	#frontpagesplash #downarrow img {
		width: 25% !important;
		bottom: 30px !important;
	}
	#definitionmobile .mobiledefined {
		padding-left: 20px;
		padding-right: 20px;
	}
	#definitionmobile .mobiledefined2 {
		padding-left: 0px;
		padding-right: 0px;
	}
}
@media (max-width: 1200px) {
	#traitlinks .buttundiv {
		padding: 7px 10px 10px 10px;
	}
}
@media (max-width: 800px) {
	#charactertitle h1, #charactertitlemobile h1 {
	    margin-top: 10px;
	    margin-bottom: 20px;
	    font-weight: 700 !important;
	}
	#charactertitle img, #charactertitlemobile img {
		max-width: 250px;
		margin-top: -20px;
	}
	#pfocslogan {
		margin-top: 95px;
		font-size: 18px;
	}
    #copyright {
    	font-size: 16px;
    }
	#content-divider {
		margin: 60px 0px 60px 0px;
	}
	#content-divider img {
		max-width: 500px;
	}
	#content-divider-white img {
		max-width: 300px;
	}
	#references, #outline {
		padding: 0px 0px 50px 0px;
	}
	#traitlinks p, #traitlinks a {
		font-size: 12px !important;
	}
}
@media (max-width: 700px) {
    #copyright {
    	font-size: 16px;
    }
    .mobilehide {
   		display: none;
    }
    .mobilebreak, .storybreak {
   		display: inline;
    }
    #scripture, #scripture2 {
  		margin-top: 40px;
    }
	#story, #storymobile {
	  	padding: 0px 30px;
	}
	#quote {
  		margin: 0px 0px 0px 0px;
  	}
}
@media (max-width: 600px) {
	#quote {
	    padding: 5px 40px 5px 40px;
	}
	#charactertitle h1, #charactertitlemobile h1 {
    	font-size: calc(3.4vw + 3.4vh);
	}
    #scripture, #scripture2 {
  		margin-top: 30px;
    }
	.clickref {
		font-size: 16px !important;
		margin-top: 5px;
	}
   .storymobilehide {
   		display: none;
   }
   .storymobilebreak {
   		display: inline;
   }
}
@media (max-width: 500px) {
	#quote {
	    padding: 5px 30px 5px 30px;
	}
	#charactertitle h1, #charactertitlemobile h1 {
    	font-size: calc(3vw + 3vh);
		margin-top: 10px;
	}
	#content-divider {
		margin: 30px 0px 30px 0px;
	}
	#mainbody {
		padding: 65px 20px 10px 20px;
	}
	.clickref {
		font-size: 12px;
	}
	.tilde {
		display: none;
	}
	#references p, #outline p {
		font-size: calc(2vw + 2vh);
	}
	.referencetitlebreak {
		display: inline;
	}
	#traitlinks p, #traitlinks a {
		font-size: 16px !important;
	}
	#scriptcontent, #scriptcontent2 {
	    padding: 50px 20px 0px 20px;
	}
}
@media (max-width: 400px) {
	.linebreak {
		display: block;
	}
	#charactertitle h1, #charactertitlemobile h1 {
    	font-size: calc(3vw + 3vh);
	    margin-bottom: 10px;
	}
	#charactertitle img, #charactertitlemobile img {
		max-width: 200px;
		margin-top: -10px;
	}
	#pfocslogan {
		margin-top: 90px;
	}
	#references, #outline {
	  	padding: 0px 0px 50px 0px;
	}
	#scriptcontent, #scriptcontent2 {
		padding: 50px 20px 0px 20px;
	}
	#scriptcontent h1, #scriptcontent2 h1 {
		font-size: calc(3vw + 3vh);
	}
}

/* GLOWING TEXT FOR REFERENCES */

.glow {
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 0 #fff, 0 0 0 #fff, 0 0 0 #fff, 0 0 0 #fff, 0 0 0 #fff, 0 0 0 #fff, 0 0 0 #fff;
  }
  to {
    text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 7px #fff, 0 0 9px #fff, 0 0 12px #fff, 0 0 15px #fff, 0 0 18px #fff;
  }
}