/***************** GENERAL *****************/

html {
	/* fixes text to appear very big on mobile devices in landscape */
    -webkit-text-size-adjust: 100%;
}

body {
	/* fixes weird flicker of text with transitions */
	-webkit-font-smoothing: subpixel-antialiased; 
	font-weight: normal !important;
	background: white;
}

hr {
	margin-top: 0;	
}

a {
	color: black;
	font-family: freight-text-pro, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 18px;
	letter-spacing:0.5px;
	line-height: 34px;
}

a:hover, a:focus {
    color: #af0101; 
}

/*
.row{
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
}

@media screen and (min-width: 770px) and (max-width: 1023px) { 
	.row{
		max-width: 64rem;
	}
}

@media screen and (min-width: 1024px) { 
	.row{
		max-width: 78.125rem;
		width: 90%;
		margin-left: 5%;
		margin-right: 5%;
	}
}
*/

.center-vertically { /** NOTE: parent must have "position: relative;" --> SEE NEXT CLASS **/
	position: absolute;
  	top: 50%;
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

.center-vertically-container {
	position: relative;
}


/********* VISIBILITY CLASSES *********/

/* used in homepage */
@media screen and (min-width: 900px) {
  .show-between-770-899 {
    display: none !important; } }


/* used in homepage and for the index column of publications/articles */
@media screen and (max-width: 900px) {
  .show-from-900 {
    display: none !important; } }

    
/***************** NAVIGATION *****************/

.top-bar {
    background: white;
    padding-left: 0;
    width: 100%;
    height: 78px;
    display: -webkit-box;
    display: box;
}

@media screen and (min-width: 1024px) { /* show for large up */
	.top-bar {
		height: 110px;
	}
}

.top-bar ul {
    background: white;
}

.top-bar-title {
	margin: -2px 2.75rem .5rem 0;
}

@media screen and (min-width: 1024px) { /* show for large up */
	.top-bar-title {
	margin-top: .5rem;
	}
}

.top-bar-left {
	margin-top: 10px;
}

.top-bar-right {
	margin-top: 2px;
	margin-right: 20px;
}

@media screen and (min-width: 1250px) { 
	.top-bar-right {
		margin-right: 10px;
	}
}

#responsive-menu {
	width: 87%; 
	display: flex;
/*	position: absolute;
	margin-top: 20px; */
}

.logo-container {
	float: left;
    width: 75px;
    height: 75px;
    margin-left: 12px;
    margin-top: -3px;
}

@media screen and (min-width: 600px) and (max-width: 1023px) { /* show for medium */
	.logo-container {
		margin-left: 24px;
	}
}

@media screen and (min-width: 1024px) { /* show for large up */
	.logo-container {
		margin-left: 26px;
	}
}

@media screen and (min-width: 600px) and (max-width: 1023px) { /* show for medium */
	.logo-small-med {
		max-height: 120%;
		max-width: 120%;
	}
}


.menu > li {
	padding: 5px 30px 5px 0;
}
.menu > li > a {
	font-family: "PierSansBold";
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	padding: 0.3rem 0rem 0.1rem;
}

.menu-link{
  position: relative;
}


.menu-link:after{
  content: '';
  position: absolute;
  width: 0; height: 3px;
  display: block;
  margin-top: 5px;
  left: 0;
  background: #af0101;
  transition: width .2s ease;
  -webkit-transition: width .2s ease;
}
 
.menu-link:hover:after{
  width: 100%;
  left: 0;
  background: #af0101;
}

.menu .active {
  color: #af0101;
}

#arrow_top_big {
	z-index:999;
	margin: 0;
	padding: 0;
	opacity: 0;
	height:44px; 
	width: 44px;
	position: fixed;
	right: 15px;
	bottom: 35px;	
	
	-webkit-transition: opacity 0.4s ease-in;
       -moz-transition: opacity 0.4s ease-in;
        -ms-transition: opacity 0.4s ease-in;
         -o-transition: opacity 0.4s ease-in;
            transition: opacity 0.4s ease-in;
            
}

@media screen and (min-width: 600) { /* show for small up */
	#arrow_top_big {
		right: 30px;
		bottom: 25px;
	}
}

/***************** NAVIGATION SMALL for index5.html *****************/

#modal-menu {
	border-left: 5px solid black;
}

.close-button {
	font-size: 4em;
	top: 0;
	right: 24px;
}

.menu-small-screen {
    margin-left: 30px;
}

.menu-link-small{
  position: relative;
  width: 100%;
  margin: 20px 0;
}

.menu-link-small:after{
  content: '';
  position: absolute;
  width: 0; height: 3px;
  display: block;
  margin-top: 5px;
  left: 0;
  background: #af0101;

}

.menu-link-small > a {
  font-size: 26px !important;
  line-height: .2;
}

.menu-icon.dark {
	width: 40px;
	margin-right: 10px;
	margin-top: 14px;
	padding-bottom: 34px;
}

@media screen and (min-width: 600px) and (max-width: 1023px) { /* show for small and medium */
	.menu-icon.dark {
		margin-right: 20px;
	}
}

@media screen and (min-width: 1024px) { /* show for large up */
	.menu-icon.dark {
		margin-right: 7px;
	}
}

.menu-icon.dark::after {
	height: 5px;
	-webkit-box-shadow: 0 15px 0 black, 0 30px 0 black;
	box-shadow: 0 15px 0 black, 0 30px 0 black;
	background: black;
}

.menu-icon.dark:hover::after {
	height: 5px;
	-webkit-box-shadow: 0 15px 0 #8a8a8a, 0 30px 0 #8a8a8a;
	box-shadow: 0 15px 0 #8a8a8a, 0 30px 0 #8a8a8a;
	background: #8a8a8a;
}

.language-link {
	font-family: freight-text-pro, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
}

/*******************************************
 ************ LANGUAGES MENU ***************
 *******************************************/
.dropdown {
	z-index: 9999;
}

.is-dropdown-submenu {
    min-width: 60px;
}

.is-dropdown-submenu-parent > a {
	color: gray;
	opacity: 0.4;
}

.is-dropdown-submenu > li > a {
	color: gray;
	opacity: 0.4;
}

.dropdown.menu.medium-horizontal>li.is-dropdown-submenu-parent>a::after {
	border-color: gray transparent transparent;
}

.dropdown.menu>li.is-active>a {
	color: gray;
}

.languages-menu > li {
	padding: 5px 0;
}

.dropdown.menu.medium-horizontal>li.opens-left>.is-dropdown-submenu {
    right: auto;
    left: 0;
}

/***************** HEADERS *****************/

h1 {
	font-family: "PierSansRegular";
	font-style: normal;
	font-weight: 400;
	color: #af0101;
	font-size: 4rem;
	word-spacing: -10px;
	margin-left: -5px;
}

@media screen and (min-width: 770px) and (max-width: 899px) { /* show for small */
	h1 {
		font-size: 5rem;
	}
}

@media screen and (min-width: 900px) { /* show for medium up */
	h1 {
		font-size: 6rem;
	}
}

.h1-homepage {
	margin-top: -10px;
	line-height: 60px;
}

@media screen and (min-width: 600px) and (max-width: 769px) { /* show for small */
	.h1-homepage {
		margin-top: -28px;
		line-height: inherit;
	}
}

@media screen and (min-width: 770px) and (max-width: 899px) { /* show for small */
	.h1-homepage {
		margin-top: -37px;
		line-height: inherit;
	}
}

@media screen and (min-width: 900px) { /* show for medium up */
	.h1-homepage {
		margin-top: -42px;
		line-height: inherit;
	}
}

h2 {
	font-family: freight-text-pro, serif;
	font-style: normal;
	font-weight: 400;
	color: #af0101;
	font-size: 23px;
	margin-top: -12px;
}

@media screen and (min-width: 600px) and (max-width: 769px) { /* show for small */
	h2 {
		font-size: 26px;
		margin-top: -26px;
	}
}

@media screen and (min-width: 770px) and (max-width: 899px) { /* show for small */
	h2 {
		font-size: 28px;
		margin-top: -34px;
	}
}

@media screen and (min-width: 900px) { /* show for medium up */
	h2 {
		font-size: 34px;
		margin-top: -39px;
	}
}


h3 {
	margin: 20px 0 20px;
	font-family: freight-text-pro, serif;
	font-style: normal;
	font-weight: 700;
	font-size: 32px;
}

.title-the {
	font-family: freight-text-pro, serif;
	font-style: italic;
	font-weight: 400;
    color: #af0101;
    font-size: 26px;
}

@media screen and (min-width: 600px) and (max-width: 769px) { /* show for small */
	.title-the {
		font-size: 28px;
	}
}

@media screen and (min-width: 770px) and (max-width: 899px) { /* show for small */
	.title-the {
		font-size: 32px;
	}
}

@media screen and (min-width: 900px) { /* show for medium up */
	.title-the {
		font-size: 36px;
	}
}

.section-title-1 {
	font-family: "PierSansBold";
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	font-size: 34px;
}

.section-title-2 {
	font-family: freight-text-pro, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 26px;
}

@media screen and (min-width: 770px) { /* show for medium up */
	.section-title-2 {
		font-size: 26px;
	}
}

.main-body {
	max-width: 1360px;
	background: #f5f5f5;
	padding:15px;
}

@media screen and (min-width: 600px) and (max-width: 1023px) { /* show for small and medium */
	.main-body {
		padding: 30px;
	}
}

@media screen and (min-width: 1024px) and (max-width: 1184px) { /* show for small and medium */
	.main-body {
		padding: 30px 18px 60px 30px;
	}
}

@media screen and (min-width: 1185px) { /* show for large up */
	.main-body {
		padding: 30px 18px 60px 145px;
	}
}

.main-title {
	color: #af0101;
	margin-bottom: 60px;
}

.subtitle {
	font-family: "PierSansBold";
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	color: #555;
	font-size: 28px;
}

/***************** MARGINGS *************************/
.column-margin-top { 
	margin-top: 16px;
}

@media screen and (min-width: 770px) { /* show for medium up */
	.column-margin-top { 
		margin-top: 30px;
	}
}


.column-margin-bottom { 
	margin-bottom: 14px; 
}

@media screen and (min-width: 770px) { /* show for medium up */
	.column-margin-bottom {
		margin-bottom: 24px;
	}
}


/**************** FOOTER *****************/
.footer-copyright {
	padding: 15px 0 15px 15px;
	font-family: freight-text-pro, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	letter-spacing:0.5px;
    color: #000;
}

@media screen and (min-width: 1185px) { /* show for large up */
	.footer-copyright {
		padding-left: 130px;
	}
}


/***************** TEXT *****************/

p {
	font-family: freight-text-pro, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 19px;
	letter-spacing:0.25px;
	color: black;
}

@media screen and (min-width: 770px) { /* show for medium up */
	p {
		line-height: 1.6;
	}
}

.italics {
	font-style: italic;
}

.bold {
	font-weight: 600;
}

p.introduction::first-letter {
  float: left;
  font-size: 66px;
  line-height: 50px;
  padding-right: 7px;
  padding-left: 3px;
  padding-top: 2px;
}


p.small {
	font-size: 14px;
}

@media screen and (min-width: 770px) { /* show for medium up */
	p.small {
		font-size: 16px;
		line-height: 24px; 
	}
}

.separator-line {
	width: 100px;
	border-bottom: 3px gray solid;
	margin: 20px 0;
}

.separator-line-vertical {
	border-left: 3px gray solid;
	height: 100px;
}

.underline {
  border-bottom: 3px solid black;
  display: inline-block;
  line-height: 1.2;
}

.white-bg {
	background: white;
	padding: 20px;
	margin-left: -15px;
	margin-right: -15px;
	max-width: 115%;
}

@media screen and (min-width: 600px) and (max-width: 769px) { /* show for small */
	.white-bg {
		width: 105%;
	}
}

@media screen and (min-width: 770px) { /* show for medium up */
	.white-bg {
		/*margin: 0 0 0 -15;*/
		padding: 20px;
		width: 100%;
	}
}

/****** SERMONS PAGE ******/
.sermon-title {
	font-family: "PierSansBold";
	font-weight: 400;
	font-size: 2.5rem;
	letter-spacing: 2px;
}

@media screen and (min-width: 600px) { /* show for small up */
	.sermon-title {
		font-size: 3.5rem;
	}
}

.sermon-cell {
	padding: 20px 5px 20px 15px;
	margin-left: -15px;
	margin-right: -15px;
	width: 108%;
}

@media screen and (min-width: 600px) and (max-width: 769px) { /* show for small */
	.sermon-cell {
		/*margin: 0 0 0 -15;*/
		padding: 20px 10px 4px 20px;
		width: 105%;
	}
}

@media screen and (min-width: 770px) { /* show for medium up */
	.sermon-cell {
		/*margin: 0 0 0 -15;*/
		padding: 20px 10px 4px 20px;
		width: 100%;
	}
}

.sermon-cell:nth-child(even) {
	background: white;
}

.special-sermon-cell {
	padding: 20px 15px;
	margin-left: -15px;
	margin-right: -15px;
	width: 108%;
}

@media screen and (min-width: 600px) and (max-width: 769px) { /* show for small */
	.special-sermon-cell {
		/*margin: 0;*/
		padding: 20px;
		width: 105%;
	}
}

@media screen and (min-width: 770px) { /* show for medium up */
	.special-sermon-cell {
		/*margin: 0;*/
		padding: 20px;
		width: 100%;
	}
}

.special-sermon-cell:nth-child(odd) {
	background: white;
}

.sermons-table {
	max-width: 115%;
}

@media screen and (min-width: 1024px) { /* show for medium up */
	.sermons-table {
		margin-top: 0;
		padding-right: 34px;
	}
}

.sermon-transcript {
	margin: 0 12px;
}

.sermon-link {
	font-weight: 600;
	font-size: 15px;
	color: #555;
}

.sermon-link-left {
	font-family: freight-text-pro, serif;
	font-style: normal;
	font-weight: 700;
    font-size: 15px;
    color: #555;
}

.tooltip-holder {
	position: relative;
}

.tooltip-holder .tooltip-text {
	visibility: hidden;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 0;
	width: 50px;

	/* Position the tooltip */
	position: absolute;
	z-index: 1;
	top: 130%;
	left: 50%;
	margin-left: -25px;

	font-family: "PierSansRegular";
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 28px;
}

.tooltip-holder:hover .tooltip-text {
  visibility: visible;
}

.mixlr-img { 
	max-height: 120px;
}

.youtube-img {
	max-height: 160px;
}

.hymns-img {
	height: 75px;
	min-height: 75px;
	min-width: 75px;
}

.red-arrow {
	margin-top: -4px;
}

.sermon-date {
	margin-bottom: 10px;
}

.sermon-name {
}

/****** SERMONS ARCHIVE PAGE ******/
.sermon-table-header {
	background: #e6e6e8 !important;
	padding: 1rem .625rem 1rem 20px;
    font-family: freight-text-pro, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
}

@media screen and (min-width: 600px) { /* show for small up */
	.sermon-table-header {
		padding-left: 20px;
	}
}

.index-sermons-archive {
	margin-top:0px;
	margin-bottom: 40px;
}

@media screen and (min-width: 1024px) { /* show for small up */
	.index-sermons-archive {
		margin-top:-68px;
	}
}

/********* PUBLICATIONS PAGE *********/
.masonry-css {
  -webkit-column-count: 1;
          column-count: 1;
  -webkit-column-gap: 1rem;
          column-gap: 1rem;
  margin: 0 -15px;
}


@media screen and (min-width: 600px) and (max-width: 799px) {
	.masonry-css {
		margin: 0 -30px;
	}
}

@media screen and (min-width: 50em) { /***** 800px *****/
  .masonry-css {
    -webkit-column-count: 2;
            column-count: 2;
    margin: 0;
  }
}

@media screen and (min-width: 68.75em) { /*** 1100px ***/
  .masonry-css {
    -webkit-column-count: 3;
            column-count: 3;
    margin: 0;
  }
}

.masonry-css-item {
  /*-webkit-column-break-inside: avoid;
          break-inside: avoid;
  margin-bottom: 1rem;*/
  -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display: table; 
    width: 100%;
}

.callout {
    border: none;
}

.publications-item-title {
	font-family: "PierSansBold";
	font-style: normal;
	font-weight: 400;
	font-size: 22px;
	color: #000;
	/* text-align: center; */
	letter-spacing: 0.5px;
	line-height: 30px;
}

.publications-item-text {
	font-size: 16px;
}

@media screen and (min-width: 770px) { /* show for medium up */
	.publications-item-text {
		font-size: 18px;
		line-height: 28px; 
	}
}

.publications-item-photo {
	margin: 30px auto 15px auto;
	display: block;
}


/********* PUBLICATIONS - ARTICLES PAGES *********/

.round {
    border-radius: 10px;
    -webkit-box-border-radius: 10px;
    -moz-border-radius: 10px;
    background: #E6E6E6;
    padding: 3px 9px;
    width: auto;
    margin-top: 15px;
    margin-right: 10px;
    float: left;
    font-weight: 400;
    font-size: 16px;
    padding: 8px;
    line-height: 20px;
}

.round:hover {
    color: #af0101;
    background: #DBDCDB;
    -webkit-transition: background .2s ease-in;
    -moz-transition: background .2s ease-in;
    transition: background .2s ease-in;
}

#top-page {
    display: none;
    margin-top: 14px;
    min-width: 32px;
}

.title-publications-article {
	font-family: freight-text-pro, serif;
	font-style: italic;
	font-weight: 400;
	line-height: 1;
	color: black;
	font-size: 38px;
}

@media screen and (min-width: 600px) { /* show for small up */
	.title-publications-article {
		font-size: 55px;
	}
}

blockquote {
	padding-left: 2rem;
}

blockquote p {
	color: black;
}

ol {
    font-family: freight-text-pro, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
    letter-spacing: 0.25px;
}

@media screen and (min-width: 770px) { /* show for medium up */
	ol {
		line-height: 1.6;
	}
}


/****** PUBLICATIONS - TOPICS ******/
.accordion-title {
	font-family: "PierSansRegular";
	font-style: normal;
	font-weight: 400;
	font-size: 20px;
	color: #000;
	/* text-align: center; */
	letter-spacing: 0.5px;
	line-height: 30px;
}

@media screen and (min-width: 770px) { /* show for medium up */
	.accordion-title {
		font-size: 22px;
	}
}

/******* HOLY DAYS PAGE ********/
thead {
	background: #e6e6e8;
}

tbody tr:nth-child(even) {
	background-color: #f5f5f5;
}

thead th {
	padding: 1rem .625rem;
	font-family: freight-text-pro, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 30px;
}

tbody td {
	padding: 1rem .625rem;
	font-family: freight-text-pro, serif;
    font-style: normal;
    font-weight: 400;
    font-size: 19px;
}

.small-text {
	font-size: 14px;
}

/*** HYMNS PAGE ****/
.hymn-link {
	font-weight: 400;
}

/*** CONTRIBUTIONS PAGE ****/
.contribution-button {
	background-color: white;
    color: black;
	font-family: "PierSansBold";
    font-weight: 400;
    letter-spacing: 0.5px;
}

 .contribution-button:hover, .contribution-button:focus {
    background-color: #af0101;
}