/* nav */
.navbar {
  @apply fixed top-0 left-0 right-0 z-999 bg-transparent py-3 transition-all duration-500 font-playfair;

  .l-light {
    @apply inline-block;
  }

  @media (max-width: 991.98px) {
    .l-dark {
        @apply !inline-block;
    }
    .l-light {
        @apply !hidden;
    }
  }
}

/* mobile menu */
.toggle-btn>div::after {
  --tw-translate-y: 0px;
  --tw-rotate: -45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.toggle-btn>div::before {
  --tw-translate-y: 0px;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.toggle-btn>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-color: transparent;
}

a, button {
  transition: 0.3s;
}
a:hover, button:hover {
	cursor: pointer;
}	
.wysiwyg p {
	margin-bottom: 20px;
}

.wysiwyg ul {
	padding-left: 30px;
	margin-bottom: 20px;
}

.wysiwyg ul li {
	list-style: disc;
}

.wysiwyg h2 {
	margin-top: 1.25rem;
	font-size: 1.35rem;
	line-height: 2.25rem;
	padding-bottom: 0rem;
}

.wysiwyg a {
	color: #ed2124;
}
.wysiwyg a:hover {
	text-decoration: underline;
	cursor: pointer;	
}

.wysiwyg img {
	margin: 14px;
}

.wysiwyg img.imageRight {
	float: right;
  margin: 15px 0 16px 20px;
}

.wysiwyg img.imageCenter {
	display:block;
	margin:0 auto;
}	
a.docLink {
	transition: 0.3s;
}

a.docLink:hover {
	opacity: 0.8;
}

#frmContact input.formInput, #frmContact textarea.formTextarea {
    width: 100%;
    color: #121719;
    padding: 15px 0;
    text-indent: 15px;
    margin-bottom: 10px;
    border: 1px solid #dbdbdb;
}

#frmContact select {
  background-color: white;
  border: 1px solid #dbdbdb;
  border-radius: 0px;
  display: inline-block;
  font: inherit;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  /* reset */
  margin: 0 0 10px 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') 100% 50% no-repeat #fff; }
}

#frmContact select {
  background-image:
    linear-gradient(45deg, transparent 50%, gray 50%),
    linear-gradient(135deg, gray 50%, transparent 50%),
    linear-gradient(to right, var(--gray), var(--gray));
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  width: 100%;
}

#frmContact select:focus {
  background-image:
    linear-gradient(45deg, var(--black) 50%, transparent 50%),
    linear-gradient(135deg, transparent 50%, var(--black) 50%),
    linear-gradient(to right, var(--gray), var(--gray));
  background-position:
    calc(100% - 15px) 1em,
    calc(100% - 20px) 1em,
    calc(100% - 2.5em) 0.5em;
  background-size:
    5px 5px,
    5px 5px,
    1px 1.5em;
  background-repeat: no-repeat;
  outline: 0;
}

#frmContact .submitButton {
	
}

#errorMessage, #successMessage {
    width:auto;
    color: #fff;
    line-height:1;
    padding:20px;
    margin-bottom:20px;
    background: #ed2124;
}
#successMessage {
	color:#000;
	padding-left:70px;
	background:#dff2bf url("/img/greenCheck.png") no-repeat 10px 50%;
}

/* Back to top */
.backToTop:link, .backToTop:active, .backToTop:visited {float:right;
	display:none;
	position:fixed;
	bottom:5%;
	right:2%;
	color:rgba(237,33,36);
	font-size:18px;
	font-size:1.8rem;
	padding:15px 10px 10px;
	text-align:center;
	z-index:999;
	width:40px;
	transition: 0.3s;
}
.backToTop:hover {color:rgb(237,33,36);}

#contactBlock h2 {
	color: var(--color-khaki);
	font-family: var(--font-noto);
	font-size: 1.2rem;
	line-height: normal;
}

#contactBlock p {
	margin-bottom: 16px;
}

/* photos in page editor */
.photoStripe, .photoAlbums {
    display: flex;
    flex-wrap: wrap;
}
.photoStripe img { 
	max-width: 175px; 
	margin: 7px;
	transition: 0.3s;
}

.photoStripe img:hover, .photoAlbums img:hover { 
	opacity: 0.7;
}	

.photoAlbums img {
	max-width: 250px; 
	margin: 7px;
	transition: 0.3s;	
}
.eventCat, a.eventCat {
	margin-left: 12px;
    background: #767676;
    color: #fff;	
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 66%;
	transition: 0.3s;
}
a.eventCat:hover {
    background: var(--color-primary);
	text-decoration: none;
}	
/* max 639px Pixels */
@media only screen and (max-width: 639px) {
	.wysiwyg img.imageRight {
		margin: 10px auto;
		float: none;
		width: 90%;
	}
}