/*** CSS declarations for LOTH pages ***/

p.rubric {
	font-size: 80%;
	font-family: sans-serif;
	color: red;
	font-family: "Source Sans 3", Helvetica, sans-serif;
}
p.rubric::before { content: "[ "; color: red; }
p.rubric::after { content: " ]"; color: red; }

.hour {
	/*font-family: 'STIX Two Text', serif;*/
	font-family: Cormorant, serif; 
	text-align: center; 
	font-weight: normal; 
	font-size: 2em;
	color: black;
}

.loth { /** This is the main container **/
	font-family: Cardo;
	color: black;
	}

.loth_body { /** Applies to the office's contents **/
	width: 75%;
	margin: auto;
	color: black;
	}

.loth h1, .loth h2, .loth h3, .loth h4, .loth h5, .loth h6 {
	color: red;
	font-family: Cormorant;
	font-weight: 700;
	letter-spacing: 0em;
	text-transform: none;
	text-align: center;
}

.loth h1 { font-size: 250%; color: #585858; margin-bottom: 1em;} 
.loth h2 { font-size: 180%; margin-bottom: 0.5em; margin-top: 1em; text-transform: uppercase; line-height: 1; }
.loth h3 { font-size: 150%; margin-bottom: 0.5em; } 
.loth h4 { font-size: 120%; margin-bottom: 0em; }
.loth h5 { font-size: 100%; }
.loth h6 { font-size: 75%; }

.feastdate {
	font-weight: normal; 
	font-size:smaller;
	margin: 0;
	padding: 0;
	padding-bottom: 0.5em;
}

.compact p {
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
	line-height: 1.2;
}

.hymnus p {
	margin-bottom: 1em;
	text-indent: 1em;
}

div.hymnbutton {
	text-align: center; 
	margin: 0em auto 1em auto; 
	font-family: sans-serif; 
	font-size: 85%; 
	font-weight: bold;
}

a.hymnbutton {
	text-decoration: none; 
	padding: 5px; 
	border: 2px solid maroon;
}

.psalmnumber {
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.psalmtitle {
	font-style: italic; 
	font-size: 125%;
	color: red;
	text-align: center;
	margin-top: -.5em;
	margin-bottom: 0.75em;
}

.psalmcomment {
	font-style: italic;
	font-size: small;
	padding-bottom: 1.5em;
	text-align: center;
}
.psalmcommentsrc {
	font-style: normal;
}

/* currently: Bilbo Swash Caps, Cardo, Charis SIL, Cormorant, EB Garamond, Judson, My Soul, STIX Two Text */
/* Junicode is also available as locally hosted WOFF */

.specialglyph {
	font-family: Junicode; /* This is a locally hosted WOFF */
	color: red;
	}

.versicle, .response { padding-left: 1.25em; text-indent: -1.25em; line-height: 1.2; } /* Make the line hang */
.versicle { margin-bottom: 0.25em; }
.response { margin-bottom: 0.75em; }

.versicle::before { content: "℣. "; color: red; font-family: Junicode; }
.response::before { content: "℟. "; color: red; font-family: Junicode; }


.ant, .ant_I, .ant_II, .ant_III {  /* Hanging indent */ 
	padding-left: 5.5em; 
	text-indent: -5.5em;
	line-height: 1.5;
}

.ant::before { content: "Antipuna. "; color: red; }
.ant_I::before { content: "Antipuna 1. "; color: red; }
.ant_II::before { content: "Antipuna 2. "; color: red; }
.ant_III::before { content: "Antipuna 3. "; color: red; }

.hangingindent {}

.hangingindent br {padding-left: 1.5em;}

/*** The ff. is for the asterisk/star at the end of a line **/
.q::after {	content: "  ✻"; color: red; font-family: Junicode; font-size: 50%; }

.q2 {padding: 0em 0em 1em 1.5em;}


.preces_intro {padding: 0em 0em 1em 0em; margin: 0px;}
.preces {padding: 0em 0em 0.25em 0em; margin: 0px;}
.preces_r {padding: 0em 0em 1em 1em; margin: 0px;}
.preces_r::before { content: "— "; color: red; }


.lectio_incipit {
	margin: 0px;
}
.lectio_src, .lectio_title {
	color:red;
}
.lectio_src {
	font-size: smaller;
	text-align: right;
}
.lectio_title {
	text-align: center;
	font-style: italic;
	margin-top: 0.75em;
	margin-bottom: 0.75em;
}
.lectio_body p {
	margin-bottom: 0.5em;
	text-indent: 2em;
}

.te_deum p, .oratio p {
	margin-bottom: 0em;
	padding-left: 1.25em; 
	text-indent: -1.25em; 
	line-height: 1.2;
}

img.deogratias { width: 20%; }

/********** Need these for the text display toggler script ****/

.invisible { display: none; }
.visible { display: block; }


/*** LOTH-related declarations for mobile screens **/

@media screen and (max-width: 736px) {
	.loth_body {min-width: 100%; font-size: 1.5rem; }
	.loth h1 {font-size: calc(2rem); line-height: 1; }
	.loth h2 {font-size: calc(1.8rem); line-height: 1; }
	.loth h3 {font-size: calc(1.6rem); line-height: 1; }
	.loth h4 {font-size: calc(1.4rem); line-height: 1; }
	.loth h5 {font-size: calc(1.5rem); line-height: 1; }
	.loth h6 {font-size: calc(1.25rem); line-height: 1; }
	div.hymnbutton {font-size: calc(0.85rem); margin-bottom: 2em;}
	.ant, .ant_I, .ant_II, .ant_III {  /* Hanging indent */ 
		padding-left: 5.5em; text-indent: -5.5em; line-height: 1.2;
	}
	.psalmtitle {font-size: calc(1.4rem); line-height: 1; margin-top: 1%; } /* should be the same as h3 or a little smaller */
	.lectio_src { font-size: x-small; text-align: right; }
	img.deogratias { width: 35%; }
}

@media screen and (max-width: 480px) {
	img.deogratias { width: 55%; }
	.ant, .ant_I, .ant_II, .ant_III {  /* Hanging indent */ 
	padding-left: 1.5em; text-indent: -1.5em; line-height: 1.2;
	}
	.lectio_src { font-size: small; text-align: right; }
}