:root {
	--cw: 40vw;
        font-family: Aster-Reg;
	background-color: #fffaf0;
}

@font-face {
	font-family: Aster-Reg;
    src: url("Fonts/Aster-RegC10.woff2") format("woff2");
}

@font-face {
	font-family: Aster-Ita;
    src: url("Fonts/Aster-RegIta.otf") format("opentype");
}

@font-face {
	font-family: Aster-Med;
    src: url("Fonts/Aster-Med.otf") format("opentype");
}

@font-face {
	font-family: Greciliae;
    src: url("Fonts/greciliae.ttf") format("truetype");
}

@font-face {
	font-family: Greextra;
    src: url("Fonts/greextra.ttf") format("truetype");
}

@font-face {
	font-family: Libertinus;
    src: url("Fonts/libertinusserif-regular.otf") format("opentype");
}

.Ast {
	font-family: Aster-Reg;
	font-size: .6em;
}

.AstRed {
	font-family: Aster-Reg;
	font-size: .6em;
	fill: red;
}

.Bst {
	font-family: Aster-Reg;
	font-size: 2.4em;
}

.Gre {
	font-family: Greciliae;
	font-size: 1.6em;
}

.Ext {
	font-family: Greextra;
	font-size: .6em;
}

body {
	font-family: Aster-Reg;
	scrollbar-color: #000 #fffaf0;
	padding: 0;
	margin: 0;
}

tspan {
	font-family: Aster-Ita;
}

h1 {
	font-size: .8rem;
	font-family: Aster-Reg;
	text-align: center;
}

h2 {
	font-size: .6rem;
	font-family: Aster-Med;
	text-align: center;
}

@media (orientation: landscape) {
	#svg-container {
		margin: 10px 2vw 0px;
		padding: 0vw;
		height: 90svh;
		column-count: auto;
		column-width: var(--cw);
		column-gap: 4vw;
		column-rule-style: solid;
                column-fill: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		overflow-x: scroll;
	        background-color: #fffaf0;
		scrollbar-color: #000 #fffaf0;
	}
}

@media (orientation: portrait) {
	#svg-container {
		--cw: 80vw;
		margin: 5vw;
		padding: 0vw;
		height: 90svh;
		column-count: auto;
		column-width: var(--cw);
		column-gap: 10vw;
		/*column-rule-style: solid;*/
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	        background-color: #fffaf0;
		scrollbar-color: #000 #fffaf0;
		overflow-x: scroll;
	}
}

.scroll {
	position: relative;
	top: 0px;
	height: 1px;
	width: 1px;
        background-color: #fffaf0;
	scroll-snap-align: start;
}

.normal {
	font-family: Aster-Reg;
	font-size: .6rem;
}

.normal > p {
	display: inline-block;
	font-size: .6rem;
	text-indent: -15.0px;
	padding-left: 15.0px;
	padding-bottom: 0;
	padding-top: 0;
	margin-bottom: 0;
	margin-top: 0;
	text-align: justify;
	text-justify: inter-word;
}

.revpara > p {
        display: block;
	font-size: .6rem;
	text-indent: 15.0px hanging;
	padding-bottom: 0;
	padding-top: 0;
	margin-bottom: 0;
	margin-top: 0;
	max-width: var(--cw);
}

.pscaption {
	color: red;
	text-align: center;
	font-size: .6rem;
	margin-top: .4rem;
	margin-bottom: .4rem;
	break-after: avoid;
	max-width: var(--cw);
        break-after: avoid;
}

.psquote {
	font-family: Aster-Ita;
	font-size: .6rem;
        break-after: avoid;
}

.pssrc {
	font-family: Aster-Reg;
	font-size: .6rem;
        break-after: avoid;
}
.psalm1 {
	font-size: .6rem;
        text-indent: -40px;
        padding-left: 40px;
	padding-bottom: 0;
	padding-top: 0;
	margin-bottom: 0;
	margin-top: 0;
	max-width: var(--cw);
}

.psalm2 {
	font-size: .6rem;
	text-indent: -15.0px;
        padding-left: 40px;
	padding-bottom: 0;
	/*padding-top: 0;*/
	margin-bottom: 0;
	/*margin-top: 0;*/
	max-width: var(--cw);
}


.itpara {
        display: block;
	font-size: .6rem;
	font-family: Aster-Ita;
	text-indent: 15.0px;
        padding-top: 0px;
        margin-top: 0px;
}

.redsc {
	font-family: Libertinus;
	font-variant: small-caps;
	color: red;
	font-size: .6rem;
	margin-bottom: .4rem;
	break-after: avoid;
}

.redcntr {
	color: red;
	text-align: center;
	font-size: .6rem;
	margin-top: .4rem;
	margin-bottom: .4rem;
	break-after: avoid;
	max-width: var(--cw);
}

.blackit {
	font-family: Aster-Ita;
	font-size: .6rem;
}

.lp {
	max-width: var(--cw);
	color: red;
	text-align: left;
	font-variant: small-caps;
	font-size: .6rem;
	break-after: avoid;
}

.lpleft {
	width: 66.6666%;
	text-align: left;
}

.lpright {
	color: red;
	text-align: right;
	width: 33.33333%;
}

.lpflex {
	display: flex;
	max-width: var(--cw);
	margin-bottom: .4rem;
	font-family: Libertinus;
	font-size: .6rem;
	break-after: avoid;
}

.lptitle {
	text-align: center;
	color: red;
	font-size: .6rem;
	break-after: avoid;
	font-family: Aster-Ita;
        break-after: avoid;
        max-width: var(--cw);
}

.la {
        padding-top: .6rem;
	max-width: var(--cw);
	color: red;
	text-align: left;
	font-variant: small-caps;
	font-size: .6rem;
	break-after: avoid;
}

.lasrc1 {
	font-size: .6rem;
	max-width: calc(var(--cw) * .6666); 
	text-align: left;
        break-after: avoid;
        break-inside: avoid;
}

.lasrc2 {
	font-size: .6rem;
	color: red;
        padding-bottom: .4rem;
        padding-left: 16.6666%;
        padding-right: 26.6666%;
        break-after: avoid;
        break-inside: avoid;
        max-width: var(--cw);
}

.latitle {
	text-align: center;
	color: red;
	font-size: .6rem;
	break-after: avoid;
	font-family: Aster-Ita;
        break-after: avoid;
        max-width: var(--cw);
}

.releft {
	width: 33.3333%;
        color: red;
        font-family: Libertinus;
        font-variant: small-caps;
	text-align: left;
        padding-top: .6rem;
}

.reright {
	color: red;
	text-align: right;
	width: 66.6666%;
        padding-top: .6rem;
}

.reflex {
	display: flex;
	max-width: var(--cw);
	margin-bottom: .4rem;
	font-family: Libertinus;
	font-size: .6rem;
	break-after: avoid;
}

.quote {
       font-family: Aster-Ita;
       font-size: .6rem;
}

.or {
	text-align: center;
        font-size: .6rem;
        color: red;
        padding-top: .6rem;
	break-after: avoid;
        max-width: var(--cw);
}

.verseno {
	color: red;
	vertical-align: super;
	font-size: .4rem;
}

.vr {
	font-size: .6rem;
        color: red;
}

.verse1 {
	max-width: var(--cw);
	font-size: .6rem;
        padding-left: 15.0px;
        padding-top: .6rem;
        paddding-bottom: 0;
}

.verse2 {
	max-width: var(--cw);
	font-size: .6rem;
        padding-left: 15.0px;
        padding-top: 0;
        padding-bottom: .6rem;
}

.ctlleft {
	width: 33.3333%;
	text-align: left;
        font-size: .6rem;
        color: red;
}

.ctlright {
	color: red;
	text-align: right;
	width: 66.6666%;
}

.cttitle {
	text-align: center;
        font-size: .6rem;
        color: red;
        padding-top: .6rem;
	break-after: avoid;
        max-width: var(--cw);
        max-width: var(--cw);
}

.ctquote {
        font-family: Aster-Ita;
        font-size : .6rem;
        max-width: var(--cw);
}

.ctsrc {
       font-family: Aster-Reg;
       font-size: .6rem;
}

.ctvleft {
	width: 33.3333%;
	text-align: left;
        font-size: .6rem;
        color: red;
}

.ctvcntr {
	width: 33.3333%;
	text-align: center;
        font-size: .6rem;
        color: red;
}

.ctvright {
	color: red;
	text-align: right;
        font-size: .6rem;
	width: 33.3333%;
}

.ctflex {
	display: flex;
	max-width: var(--cw);
	margin-bottom: .4rem;
	font-family: Libertinus;
	font-size: .6rem;
	break-after: avoid;
}

.lbleft {
	width: 33.3333%;
	font-family: Libertinus;
        font-variant: small-caps;
	text-align: left;
        font-size: .6rem;
        color: red;
}

.lbright {
	width: 66.6666%;
	text-align: right;
        font-size: .6rem;
        color: red;
}

.lbflex {
	display: flex;
	max-width: var(--cw);
	margin-top: .6rem;
	margin-bottom: .4rem;
	font-size: .6rem;
	break-after: avoid;
}

.pr {
        display: block;
	font-family: Libertinus;
        font-variant: small-caps;
	text-align: left;
        font-size: .6rem;
        color: red;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.tinyred {
	color: red;
	vertical-align: super;
	font-size: .4rem;
}

.para>p {
	text-indent: 15.0px;
	font-size: .6rem;
	max-width: var(--cw);
	text-align: justify;
	text-justify: inter-word;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.printro {
        display: block;
	text-indent: -15.0px;
	padding-left: 15.0px;
	font-size: .6rem;
	max-width: var(--cw);
        padding-top: 0px;
        margin-top: -.8lh;
        padding-bottom: 0px;
        margin-bottom: 0px;
	text-align: justify;
	text-justify: inter-word;
}

.prresp {
        display: block;
	text-indent: 15.0px;
	font-size: .6rem;
	max-width: var(--cw);
        padding-top: 0px;
        margin-top: -.8lh;
        padding-bottom: 0px;
        margin-bottom: -.8lh;
	text-align: justify;
	text-justify: inter-word;
        font-family: Aster-Ita;
}

.preces > p {
        display: block;
	font-size: .6rem;
	text-indent: -1.8ch;
	padding-left: 1.8ch;
	padding-bottom: 0;
	padding-top: 0;
	margin-bottom: 0;
	margin-top: 0;
	max-width: var(--cw);
}

.occtitle {
  font-size: .8rem;
  font-family: Aster-Reg;
  text-align: center;
  max-width: var(--cw);
  break-after: avoid;
}

.hourtitle {
  font-size: .6rem;
  font-family: Aster-Med;
  text-align: center;
  max-width: var(--cw);
  margin-top: .6rem;
  margin-bottom: 1rem;
  break-after: avoid;
}

.Greg[title="Hymni"]::before {
  font-family: Libertinus;
  font-variant: small-caps;
  color: red;
  font-size: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  content: "Hymnus";
  break-after: avoid;
}

.Greg[title="Hymni"]::after {
  font-family: Libertinus;
  font-variant: small-caps;
  color: red;
  font-size: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  content: "Psalmodia";
  break-after: avoid;
}

.Greg[title="Antiphonae"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Antiphona";
  break-after: avoid;
}
  
.Greg[title="Antiphonae(1)"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Antiphona 1";
  break-after: avoid;
}
  
.Greg[title="Antiphonae(2)"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Antiphona 2";
  break-after: avoid;
}

.Greg[title="Antiphonae(3)"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Antiphona 3";
  break-after: avoid;
}

.Greg[title="Antiphonae(B)"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Antiphona ad Benedictus";
  break-after: avoid;
}

.Greg[title="Antiphonae(Bb)"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Antiphona ad Benedictus";
  break-after: avoid;
}

.Greg[title="Antiphonae(B_ante_Asc)"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Antiphona ad Benedictus";
  break-after: avoid;
}
.Greg[title="Antiphonae(M)"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Antiphona ad Magnificat";
  break-after: avoid;
}

.Greg[title="Antiphonae(Mb)"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Antiphona ad Magnificat";
  break-after: avoid;
}

.Greg[title="Antiphonae(M_ante_Asc)"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Antiphona ad Magnificat";
  break-after: avoid;
}

.Greg[title="Alleluia"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Antiphona 1";
  break-after: avoid;
}
  
.Greg[title="Alleluia(1)"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Antiphona 1";
  break-after: avoid;
}
  
.Greg[title="Alleluia(2)"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Antiphona 3";
  break-after: avoid;
}
  
.Greg[title="Responsoria_Brevia"]::before {
  font-family: Libertinus;
  color: red;
  font-size: .6rem;
  margin-top: .6rem;
  margin-bottom: .4rem;
  display: block;
  break-after: avoid;
  text-align: center;
  max-width: var(--cw);
  content: "Responsorium Breve";
  break-after: avoid;
}