/*
Theme Name: Blue Lodge
Theme URI: https://masonsonthelevel.com/themes/bluelodge
Author: Masons on the Level (W.Bro. Ephraim Sng, P.M.)
AuthorURI: https://MasonOnTheLevel.com
Description: A Wordpress theme made for Masonic Blue Lodges as a starter to help create a clean, presentable website.
Version: 5.0
*/

:root {
	--worn-black: #303030;
	--eggshell: #F2F2F2;
	--parchment: #F1E2C1;
	--maroon: #B13E3B;
	--gold: #E3BC79;
}

body{ 
	background-color: var(--eggshell);
	color: var(--worn-black);
	font-family:"Poppins", serif;
}
main:not(#home){
	margin-top:66px;
}

h1, h2, h3{ 
	font-family: 'Amiri', serif; }
h1{ text-transform: uppercase;}
a{ color: var(--maroon);}

.dark{ background-color: var(--worn-black); color: var(--eggshell); }
.eggshell{ background-color: var(--eggshell); }
.parchment{ background-color: var(--parchment); }
.dark h2{ color: var(--gold);}
.parchment h2{ color: var(--maroon);}
.maroon{ color: var(--maroon);}

.btn-primary{ 
	background-color: var(--maroon);
	border-color: var(--maroon);
}
.btn-primary:hover{
	background-color: #912c29;
	border-color: #912c29;
	
}

header {
	background-color:rgba(0,0,0,.7);
	position: fixed;
	top: 0;
	width:100%;
}

.sub-menu {
	display: flex;
	flex-direction: column;
	position: absolute;
	background: rgba(25, 25, 25, 0.4);
	display: none;
	opacity: 0;
	overflow: visible; }

li:hover .sub-menu, .has-dropdown.expanded + .sub-menu {
	display: flex;
	opacity: 1;
	transition: all 1s; }

bento-accordion{}
.i-amphtml-accordion-header{ 
	font-size: 1.5rem;
	padding:.5rem;
}

#hero{
	background: linear-gradient( rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) ), url("/wp-content/uploads/2021/12/masonic-lodge-background.jpg") center;
	background-size: cover;
}
.pillar-bg{ 
	position:relative;
	z-index:0;}
.pillar-bg::before, .pillar-bg::after{
	content: " ";
	background-image: url(https://www.midvalemasonry.com/wp-content/uploads/2022/01/corinthian-column.png);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	height:50%;
	width: 50%;
	bottom:0;
	z-index:-1;
	mix-blend-mode: darken;
}
.pillar-bg::after{ right:0; transform: scalex(-1);}

#copyright{background-color:black;}

#scroller{ --scroll-size: 1rem; }

.scroll-window {
	font-size: var(--scroll-size);
	height: calc(var(--scroll-size));
	padding-bottom: calc(var(--scroll-size)*.1);
	line-height: var(--scroll-size);
	overflow:hidden;
	position: relative;
}

.scroll-window::before,
.scroll-window::after{
	left: 0;
	z-index: 1;
	width: 100%;
	content: '';
	height: .5rem;
	position: absolute;
}

.scroll-window::before {
	top: 0;
	/* 	background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0)); */
}

.scroll-window::after {
	bottom:0 ;
	/* 	background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1)); */
}

.scroll-list{
	padding-inline-start: 0;
	animation: scroll 18s ease-in-out 2s infinite alternate;
}

.scroll-list li{ list-style:none; }

..map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}

.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.quote-slider {
  width: 100%;
  height: 450px;
  overflow: hidden;
  font-size: 1rem;
  position: relative;
}

.quote-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 450px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.quote-slider .slide.active {
  opacity: 1;
}

#quote-slider .carousel-item{ height:245px; padding: 16px;}

blockquote span {
  display: inline-block;
  animation: fadeInLetter 0.5s ease-in-out;
  animation-fill-mode: both;
  color: inherit;
}

.slide blockquote p {
  animation: 3s ease-out forwards tightChars;
  font-style: italic; 
  position: relative;
/*   max-width: 800px; */
}


blockquote {
  margin: 0 auto;
  position: relative; /* Added */
}

span {
  display: inline-block;
  animation: fadeIn 0.5s ease-in-out;
  animation-fill-mode: both;
  color: inherit;
}

cite {
  display: block;
  position: absolute;
  font-size: 0.8em;
  margin-top: 1em;
  right: 20%;
  color: #fff;
  animation: fadeRight 2s ease-in-out;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

.quote-slider .portrait{
  position: absolute;
  right: 20%;
  bottom: 0;
  animation: 3s fadeRight;
}

.quote-slider button{ 
  border: none;
  background-color: transparent;
}

@keyframes fadeInLetter {
  from {
    opacity: 0;
    transform: scale(2.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(-2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes tightChars {
     0% { 
          letter-spacing: 0.5em;
     }
     100% { 
          letter-spacing: 0;
     }
}

@keyframes scroll {
	0%  {transform:translateY(0);}
	20%  {transform:translateY(calc(var(--scroll-size)*-1));}
	40%  {transform:translateY(calc(var(--scroll-size)*-2));}
	60%  {transform:translateY(calc(var(--scroll-size)*-3));}
	80% {transform:translateY(calc(var(--scroll-size)*-4));}
	100% {transform:translateY(calc(var(--scroll-size)*-5));}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	#scroller{  --scroll-size: 1.8rem; }
	.pillar-bg::before, .pillar-bg::after{
		width: 100%; 
		height: 100%;
	}
	#quote-slider { font-size: 1.5rem;
	max-height: 300px;}
	
/* 	#quote-slider blockquote {  
		padding: 0 75px;
		width: 60%; } */
	
	blockquote:before{
	font-size: 6rem;
	color: #333;
	display: inline-block;
	position: absolute;
	content: open-quote no-close-quote; 
	left: 10px; 
	top: -25px;}
}