/****************************************************************************
*************************** FONT HOSTING ************************************
****************************************************************************/

@font-face {
    font-family: 'open_sansextrabold_italic';
    src: url('./fonts/opensans-extrabolditalic-webfont.woff') format('woff2'),
    	 url('./fonts/opensans-extrabolditalic-webfont.woff2') format('woff');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'open_sansextrabold';
    src: url('./fonts/opensans-extrabold-webfont.woff') format('woff2'),
    	 url('./fonts/opensans-extrabold-webfont.woff2') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansbold_italic';
    src: url('./fonts/opensans-bolditalic-webfont.woff') format('woff2'),
    	 url('./fonts/opensans-bolditalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'open_sansbold';
    src: url('./fonts/opensans/opensans-bold-webfont.woff') format('woff2'),
    	 url('./fonts/opensans/opensans-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanssemibold';
    src: url('./fonts/opensans/opensans-semibold-webfont.woff2') format('woff2'),
    	 url('./fonts/opensans/opensans-semibold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'open_sanssemibold_italic';
    src: url('./fonts/opensans/opensans-semibolditalic-webfont.woff2') format('woff2'),
    	 url('./fonts/opensans/opensans-semibolditalic-webfont.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'open_sansregular';
    src: url('./fonts/opensans/opensans-regular-webfont.woff2') format('woff2'),
    	 url('./fonts/opensans/opensans-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'open_sansitalic';
    src: url('./fonts/opensans/opensans-regular-webfont.woff2') format('woff2'),
    	 url('./fonts/opensans/opensans-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'open_sanslight_italic';
    src: url('./fonts/opensans/opensans-lightitalic-webfont.woff2') format('woff2'),
    	 url('./fonts/opensans/opensans-lightitalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic
}

@font-face {
    font-family: 'open_sanslight';
    src: url('./fonts/opensans/opensans-light-webfont.woff2') format('woff2'),
    	 url('./fonts/opensans/opensans-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}




@font-face {
    font-family: 'robotoblack';
    src: url('./fonts/roboto/roboto-black-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-black-webfont.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'robotoblack_italic';
    src: url('./fonts/roboto/roboto-blackitalic-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-blackitalic-webfont.woff') format('woff');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'robotobold';
    src: url('./fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'robotobold_italic';
    src: url('./fonts/roboto/roboto-bolditalic-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-bolditalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'robotomedium';
    src: url('./fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-medium-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'robotomedium_italic';
    src: url('./fonts/roboto/roboto-mediumitalic-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-mediumitalic-webfont.woff') format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'robotoregular';
    src: url('./fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'robotoitalic';
    src: url('./fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-italic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'robotolight';
    src: url('./fonts/roboto/roboto-light-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'robotolight_italic';
    src: url('./fonts/roboto/roboto-lightitalic-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-lightitalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'robotothin';
    src: url('./fonts/roboto/roboto-thin-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-thin-webfont.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'robotothin_italic';
    src: url('./fonts/roboto/roboto-thinitalic-webfont.woff2') format('woff2'),
         url('./fonts/roboto/roboto-thinitalic-webfont.woff') format('woff');
    font-weight: 200;
    font-style: italic;
}




/* Global styling defaults */   

input::placeholder,
textarea::placeholder {
   text-align: center;
   color: white;
   font-size: 1.5rem;
}

:root {
	--white: #FFFFFF;			/* White */
	--cream: #FFFDD0;
	--brown: #663300;			/* Brown */
	--lightbrown: #CC7221;		/* Light brown */
	--chocbrown: #552B00;		/* Chocbrown */
	--earth: #734523;			/* Earth */
	--copper: #8A360F;			/* Copper */
	--jhcopper: #B85233;		/* JH copper */
	--darkred: #d42026;			/* dark red */
	--burgundy: #AD1938;		/* Major site color. */
	--skyblue: #0D9DFD;			/* Sky-blue */
	--blue: #0000FF;			/* Minor site color. */
	--washblue: #2441FF;		/* Pale blue */
	--deepblue: #111B61;		/* Deep blue */
	--navy: #000080; 			/* Minor site color. */
	--myyellow: #FFCC00;		/* Custom yellow */
	--gold: #FFB048; 			/* Minor site color. */
	--greytext: #292F33;		/* Default text color */
	--straw: #FFE399;			/* Hover glow */
	--lilac: #C8A2C8;			/* Lilac */
	--paleturq: #78EFFF;		/* Pale turquoise */
	--turq: #00FFFF;			/* Turquoise */
	--hturq: #1AACF4;			/* Heavy turquoise */
	--red: #FF0000;				/* Red */
	--redbrown: #923715;		/* Red-brown */
	--myorange: #FC7B03;
	--orange: #FF5900;			/* Orange */
	--darkorange: #CF5300;		/* Dark Orange */
	--magenta: #FF00FF;			/* Magenta  */
	--magenta-pink: #ff0080;	/* Magenta Pink */
	--purple: #AA00FF;			/* Purple */
	--hardpurple: #6a026a;		/* A darker purple */
	--pink: #FF1493;			/* Pink */
	--magnolia: #F0DDB3;		/* Magnolia  */
	--dalcassian-red: #CE0F25;  /* Dal gCais red */
	--slate-blue: #7795b0;
	--clr-bgd: #87b2d9;
	--clr-hero-bgd: grey;
	--clr-hero-butt: #00c3ff;
	--clr-hero-butt-hov: #00ABFF;
	--clr-home: white;
	--clr-nav1: white;
	--clr-nav2: silver;
	--clr-link1: navy;
	--clr-link2: white;
	--clr-res-nav1: var(--hardpurple);
	--clr-res-nav2: white;
	--clr-font: navy;
	--clr-nav-trim: var(--gold);
	--clr-theme: #CE0F25;
	--clr-theme-hov: #a80404;
	--clr-page-head: var(--hardpurple);
	--clr-sect-head: purple;
	--clr-date-ent-hov: var(--burgundy);
	--clr-find-date-hov: #FB5454;
	--clr-today-butt-hov: #FB5454;
	--clr-filled-hov: var(--purple);
	--clr-sat: var(--straw);
	--clr-today-bgd: var(--magenta);
	--clr-today-bgd-hov: var(--magenta-pink);
	--clr-news-grey:  #d9d9d9;
}

html {
	writing-mode: horizontal-tb;
  	box-sizing: border-box; 	/* Keeps borders inside the element bounds. */
  	font-size: 62.5%;			/* Allows 1 rem = 10px in both child and nested elements */
  	scroll-behavior: smooth;
}

*, *::before, *::after {
  	box-sizing: border-box;
}


* {
	margin: 0;
    padding: 0;  
}

a {
    outline: 0;
	text-decoration: none;
	margin: 0;
	padding: 0;
}

a:link {
	color: var(--clr-link1);
	text-decoration: underline;
	padding: 0;
}

a:visited {
	color: var(--clr-link1);
	text-decoration: none;
	margin: 0;
	padding: 0;
}

a:hover {
	color: var(--clr-link2);
	text-decoration: none;
	margin: 0;
	padding: 0;
}

a:active {
	color: var(--clr-link1);
	text-decoration: none;
	margin: 0;
	padding: 0;
}

.emailadd {
	font-weight: 600;
}

#text {
	margin: 0;
	padding: 0;
}

body {
	overflow-x: hidden;
	overflow-y: scroll;
	margin: 0 auto;
	text-align: center;
    font-family: Open Sans;
	max-width: 1400px;
	height: auto;
	background-color: var(--clr-bgd);
	color: var(--clr-font);
}

.page-cont {
	position: relative;
	margin: 0 auto;
	width: 100%;
	height: auto; 
  	background-repeat: no-repeat;
  	background-position: center center;
  	background-size: cover;
}

.bgi {
	background-image: url("../images/photos/thomond-bridge.jpg");
}
	
.cont {
	margin: 0 auto;
	width: 100%;
	text-align: left;
	height: auto;
}

header {
	width: 100%;
	margin: auto;
	height: auto;
	padding: 0;
}

.header {
	display: block;
	margin: 0 auto;
	height: auto;
	padding-top: 20px; 
}

@media screen and (min-width: 1050px) {

	.header {
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		align-content: center;
		justify-content: space-between;
	}
}

.logodiv {
	display: flex;
	height: auto;
	width: 60%;
	margin: 0 auto;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.logodiv:not(.point) logodiv, 
.logodiv:not(.point) logotext {
	cursor: pointer;
}

.logo {
	width: 40%;
	padding-top: 5px;
	min-width: 70px;
	height: auto;
}

.logo img {
	width:70%;
	height: auto;
	max-width: 70px;
}

@media screen and (min-width: 200px) {

	.logodiv {
		height: auto;
	}

	.logo {
		max-width: 120px;
	}
}

@media screen and (min-width: 400px) {

	.logodiv {
		height: auto;
	}

	.logo {
		max-width: 120px;
	}
}


@media screen and (min-width: 860px) {

	.logodiv {
		height: auto;
		width: auto;
		margin: 0 auto 0 30px;
	}

	.logo {
		width: 100%;
		height: auto;
		margin: auto;
		padding: 0;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: center;
	}
}


.logotype {
	width: 80%;
	margin: auto;
	height: calc(80vw * 490 / 810);
	background-image: url("../images/logos/logotype-mob.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

@media screen and (min-width: 450px)
{
	.logotype {
		width: 80%;
		max-width: 350px;
	}
}

@media screen and (min-width: 600px) {

	.logotype {
		/*! margin: 50px; */
		width: calc(80% - 30px);
		max-width: 600px;
		height: calc(384 * 80vw / 1466);
		background-image: url("../images/logos/logotype.svg");
	}
}

@media screen and (min-width: 1050px) {

	.logotype {
		width: 50%;
		height: calc(50vw*384/1477);
		background-image: url("../images/logos/logotype.svg");
		max-width: 700px;
		/*! margin-top: 30px; */
	}
}

.logotype {
	/*! margin: 0 auto; */
}

.logotype img {
	width: 100%;
	height: auto;
	margin: 30px auto;
}

nav {
	display:  flex;
	width: 100%;
	margin: 10px auto 0 auto;
	height: 90px;
	font-family: Roboto;
}

@media screen and (min-width: 860px) {
	nav {
		margin: 3em 1.5% 1em 1.5%;
		height: auto;
		color: var(--clr-home);
		width: 97%;
	}
}


.navbar {
	display: flex;
	list-style-type: none;
	flex-flow: row wrap;
	align-content: center;
	align-items: center;
	padding: 0 2em 0 0;
	height: fit-content;
	width: 100%;
	justify-content: space-around;
}

.pagelink {
	margin-left: auto;
}

.pagelink + .pagelink {
	margin-left: clamp(10px, 8vw, 30px);
}

.sociallink + .sociallink {
	margin-left: clamp(15px, 5vw, 30px);
}

.sociallink {
	width: 4%;
	min-width: 10px;
	margin: 0;
	display: grid;
	align-content: flex-start;
	align-items: flex-start;
}

.sociallink img {
	width: 100%;
}

@media screen and (min-width: 400px) {


	.sociallink { 
		width: 3%;
		max-width: 12px;
	}
}

@media screen and (min-width:  860px)
{
	.sociallink {
		width: 2%;
		max-width: 15px;
	}

	.sociallink + .sociallink {
		margin-left: 30px;
	}
}

nav li {
	position: relative;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 2em;
	text-align: left;
	color: var(--clr-nav1); 
}

nav li:not(.point, .active, #about-link, #events-link, #resources-link) {
	cursor: pointer;
}

nav li:not(.sociallink):hover {
	color: var(--paleturq);
}

@media screen and (min-width: 400px) {

	nav li {
    	font-size: 1.6rem;
	}
}

@media screen and (min-width: 860px) {

	nav li {
		font-size: 2.0rem;
	}
}

nav li::after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    content: '';
    height: 3px;
    width: 0;
    background-color: var(--clr-nav-trim);
    transition: all 1300ms;
}


.navlink:not(.point, .active, #logolink, .sociallink):hover::after {
	content: '';
    width: 100%;
    height: 3px;
    opacity: 1;
}

.active,
.point {
	cursor: none;
}

.point:not(.logodiv)::after {
	content: '';
    width: 100%;
    height: 3px;
    opacity: 1;
}

.down-arrow {
	vertical-align: top;
	font-size: 0.5em;
}

.dropdown {
	display: none;
	position: absolute;
	z-index: 1;
	list-style-type: none;
	top: -2em;
	left: -40%;
	width: auto;
	height: auto;
	margin: 0 auto;
	background-color: #a1a1a6;
}

.drop:hover .dropdown {
	display: block;
  	text-align: center;
	background-color: #65757b;
	margin: 0 auto;
}

.dropdown li {
	padding: 0 0.5em;
	background-color: inherit;
	opacity: 0.8;
}

/*@media screen and (min-width: 700px) {

	.drop:hover .dropdown {
		background-color: transparent;
	}
}*/

.dropdown-item:hover {
	color: var(--clr-nav2);
}

nav a {
    outline: 0;
	text-decoration: none;
}

nav a:link {
	color: var(--clr-link1);
	text-decoration: none;
}

nav a:visited {
	color: var(--clr-link1);
	text-decoration: none;
}

nav a:hover {
	color: var(--clr-link2);
	text-decoration: none;
}

nav a:active {
	color: var(--clr-link1);
	text-decoration: none;
}





/******************************************
***************** HOME ********************
******************************************/

main {
	display: block;
	width: 100%;
	margin: 0 auto;
	margin: 30px auto 0 auto;
}

main a {
	outline: 0;
	text-decoration: none;
	cursor: pointer;
}

main a:link,
main a:visited,
main a:hover,
main a:active {
	color: var(--clr-theme);
	text-decoration: none;
}

article {
	margin: 0 2.5%;
	
}

.page {
	display: none;
	width: 100%;
	max-width: 1100px;
	margin: 120px auto 0 auto;
	line-height: 2;
	font-size: 1.35rem;
}

.page h1 {
	font-size: 1.8rem;
	font-weight: 400;
	margin: 0 auto 2em auto;
	text-align: center;
	font-family: Roboto;
	color:var(--clr-page-head);
}

.page h2 {
	font-size: 1.6rem;
	font-weight: 400;
	text-align: center;
	margin: 1.5em auto 0.5em auto;
	font-family: Roboto;
	color:var(--clr-sect-head);
}

.page h3 {
	font-weight: 500;
	font-size: 1.4rem;
	color: var(--clr-sect-head);
	text-align: center;
	margin: 1em auto;
	font-family: Roboto;
}

.page section {
	text-align: justify;
	margin: 0 auto;
}

.page p {
	text-align: justify;
	padding: 0.15em;
}

@media screen and (min-width:  400px)
{
	.page h1 {
		font-size: 2.0rem;
	}

	.page h2 {
		font-size: 1.8rem;
	}

	.page h3 {
		font-size: 1.6rem;
	}

	.page,
	.page p {
		font-size: 1.4rem;
	}

	.page section {
		margin: 4em 0;
	}
}

@media screen and (min-width:  800px)
{
	.page h1 {
		font-size: 2.3rem;
	}

	.page h2 {
		font-size: 2rem;
	}

	.page h3 {
		font-size: 1.7rem;
		
	}

	.page, 
	.page p {
		font-size: 1.6rem;
	}

	.page section {
		/*! margin: 2em 1em; */
	}
}

.home {
	margin: 50px auto 0 auto;
	width: 100%;
	height: 90vh;
	color: var(--clr-home);
	max-width: 1400px;
}

@media screen and (min-width: 750px) {

	.home {
		margin: 0 auto 0 auto;
	}
}

.hero-cont {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: fit-content;
}

@media screen and (min-width: 750px) {

	.hero-cont {
		max-width: 700px;
		border-radius: 20px;
	}
}

@media screen and (min-width: 450px) {

	.hero-cont {
		max-width: 700px;
		border-radius: 20px;
	}
}

@media screen and (min-width: 250px) {

	.hero-cont {
		max-width: 300px;
		border-radius: 20px;
	}
}

.hero {
	background-color: #4f5d669c;
	font-size: 1.35rem;
	width: fit-content;
	opacity: 0.8;
	/*! border-radius: 8px; */
	margin: 50px auto 0 auto;
	padding: 1em 0.25em 0 0.25em;
}


.hero h1 {
	font-size: 1.6rem;
	margin: 1em 0 0.5em 0;
	color: white;
}

.hero h2 {
	font-size: 1.4rem;
	margin: 1em 0 0.5em 0;
	color: white;
}

@media screen and (min-width: 250px) {

	.hero h1 {
		font-size: 1.7rem;
	}

	.hero h2 {
		font-size: 1.5rem;
	}
}

@media screen and (min-width: 450px) {

	.hero h1 {
		font-size: 1.8rem;
	}

	.hero h2 {
		font-size: 1.6rem;
	}
}


@media screen and (min-width: 750px) {

	.hero h1 {
		font-size: 2rem;
	}

	.hero h2 {
		font-size: 1.8rem;
	}
}



.upcoming-events {
	margin:  0;
	padding: 0 0.2em;
	width: 100%;
}

@media screen and (min-width: 250px) {

	.upcoming-events {
		font-size: 1.2rem;
	}
}

@media screen and (min-width: 450px) {

	.upcoming-events {
		font-size: 1.5rem;
	}
}

@media screen and (min-width: 750px) {

	.upcoming-events {
		font-size: 1.6rem;
	}
}

.up-event {
	width: fit-content;
	margin: 0 0 1em 0;
	text-align: left;
}

.up-event .type,
.up-event .date-time,
.up-event .title {
	font-weight: 500;
	height: auto;
	text-align: left;
}

.up-event .type {
	width: fit-content;
}

.up-event .date-time {
	width: fit-content;
	font-weight: 600;
}

.up-event .title {
	width: fit-content;
	font-style: italic;
}

@media screen and (min-width: 250px) {
	.up-event .title {
		width: fit-content;
	}
}

@media screen and (min-width: 650px) {
	.up-event .title {
		max-width: 20em;
	}
}

.up-event a:link {
	color: var(--clr-home);
}

.up-event a:hover {
	color: var(--paleturq);
}

.members-cont {
	margin: 0 auto;
	width: 100%;
}/*

.members-cont h2 {
	margin: 1em auto 0.5em auto;
	text-align: center;
	font-size: 1.8rem;
}*/

.new-members {
	font-size: 1.25rem;
	text-align: justify;
	width: 100%;
	margin: 0 auto;
	max-width: 700px;
}

@media screen and (min-width: 650px)
{
	.new-members {
		font-size: 1.4rem;
	}
}

.hero-button {
	display: block;
	margin: 20px auto;
	width: 8em;
	height: 2em;
	color:  var(--clr-home);
	background-size: 400%;
  	background-position: 0% 0%;
	border: none;
	border-radius: 2em;
	font-size: 1.4rem; 
	font-weight: 700;
	font-family: Roboto;
	box-shadow: 0 3px #0c87ac;
	background-color: var(--clr-hero-butt);
}

@media screen and (min-width: 250px) {
	.hero-button {
		font-size: 1.5rem;
	}
}

@media screen and (min-width: 650px) {
	.hero-button {
		font-size: 1.6rem;
	}
}

.hero-button:hover {
	background-color: var(--clr-hero-butt-hov);
}






/**********************************************************************************
 ********************************** ABOUT PAGE ************************************
 *********************************************************************************/



.society {
	width: 100%;
	max-width: 1400px;
}

.society a:link,
.society a:visited,
.society a:active {
	color: var(--clr-link1);
	text-decoration: none;
}

.society a:hover {
	color: var(--clr-link2);
	text-decoration: none;
}

.society-wrapper {
	margin: 0 auto;
	width: 100%;
	
	height: auto;
}

.society .col2 h2 {
	margin: 1em 0 0.8em 0;
}

.society .col1 {
	width: 100%;
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
}

.societytext1 .col1 {
	background-image: url("../images/general/fulacht-fiadh.jpg");
	height: calc(100vw * 203 / 248);
}

.societytext2 .col1 {
	background-image: url("../images/general/castle-dig.jpg");
	height: calc(100vw * 319 / 400);
}

.societytext3 .col1 {
	background-image: url("../images/general/old-club-trip.jpg");
	height: calc(100vw * 900 / 1600);
}

.societytext4 .col1 {
	background-image: url("../images/general/field-trip-today.jpg");
	height: calc(100vw * 683 / 1024);
}

@media screen and (min-width: 400px) {

	.societytext1 .col1 {
		height: calc((100vw - 1em) * 203 / 248);
	}

	.societytext2 .col1 {
		height: calc((100vw - 1em) * 319 / 400);
	}

	.societytext3 .col1 {
		height: calc((100vw - 1em) * 900 / 1600);
	}

	.societytext4 .col1 {
		height: calc((100vw - 1em) * 683 / 1024);
	}
}

.society .col2 {
	width: 100%;
	height: auto;
	text-align: justify;
	font-size: min(1.3rem, 7vw);
	margin: 0 auto 1em auto;
	color: var(--clr-link1);
	padding: 0.25em;
}

.old-name {
	font-weight: 600;
}

@media screen and (min-width: 250px) {

	.society .col2 {
		font-size: min(1.4rem, 7vw);
	}
}

@media screen and (min-width: 400px) {

	.society .col2 {
		font-size: 1.5rem;
	}
}

@media screen and (min-width: 900px) {

	.societytext1,
	.societytext2,
	.societytext3,
	.societytext4 {
		display:  flex;
		width: 100%;
		margin: 2.5em auto;
		font-size: 1.7rem;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		height: auto;
		flex-flow: row wrap;
	}

	.society .col1 {
		width: 48%;
		margin: 0 auto;
		border-radius: 8px;
	}

	.societytext1 .col1 {
		height: calc(48vw * 203 / 248);
	}

	.societytext2 .col1 {
		height: calc(48vw * 319 / 400);
	}

	.societytext3 .col1 {
		height: calc(48vw * 900 / 1600);
	}

	.societytext4 .col1 {
		height: calc(48vw * 683 / 1024);
	}

	.society .col2 {
		text-align: justify;
		width: 48%;
		margin: 0 auto;
		font-size: 1.7rem;
		max-width: 800px;
	}
}

@media screen and (min-width: 1400px) {

	.societytext1,
	.societytext2,
	.societytext3,
	.societytext4 {
		display:  flex;
		width: 1400px;
		margin: 1em auto;
		font-size: 1.7rem;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		height: auto;
		flex-flow: row wrap;
	}

	.society .col1 {
		width: 672px;
		margin: 0 auto;
		border-radius: 8px;
	}

	.societytext1 .col1 {
		height: calc(672px * 203 / 248);
	}

	.societytext2 .col1 {
		height: calc(672px * 319 / 400);
	}

	.societytext3 .col1 {
		height: calc(672px * 900 / 1600);
	}

	.societytext4 .col1 {
		height: calc(672px * 683 / 1024);
	}

	.society .col2 {
		text-align: justify;
		width: 672px;
		margin: 0 auto;
		font-size: 1.7rem;
		max-width: 800px;
	}
}


.hon-sec-email::before {
	content: '';
	display: inline-block;
	margin: 0 0.5em 0 0;
	height: 1em;
	width: 1em;
	background-image: url("../images/icons/email-icon-navy.svg");
    background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
}

.society .join {
	display: flex;
	justify-content: center;
	flex-flow: row wrap;
}

.society .online {
	height: auto;
	margin: 1em auto;
}

.society .butt-join {
	margin: 1em auto;
	width: 7em;
	height: 2em;
	font-size: 1.7rem;
	color: var(--clr-home);
	background-color: var(--clr-theme);
	border: none;
	outline: 1px;
	border-radius: 1.5em;
	box-shadow: 0 3px #970c12;
}

.society .butt-join:hover {
	background-color: var(--clr-theme-hov);
	box-shadow: 0 3px #600408;
}



/*******************************************************************************************************
******************************************** GOVERNANCE & OFFICERS *************************************
*******************************************************************************************************/


.officers-intro {
	width: fit-content;
}

.officers .office {
	font-weight: 600;
	width: 10em;
}

.officers .holder {
	width: 12em;
}

.officers .email {
	width: 15em;
}

.officers-list {
	text-align: left;
}

.tahs-title {
	font-weight: 600;
}

.governance .hontres-list,
.governance .memtype-list,
.governance .agm-list {
	list-style-type: none;
    margin: 1em auto;
    padding-left: 0;
    text-align: left;
	width: 95%;
}

.governance .hontres-list li::before,
.governance .memtype-list li::before,
.governance .agm-list li::before {
	content: "\25CF";
    padding: 0 1em 0 0;
	font-size: 0.7em;
	display: inline;
	vertical-align: text-bottom;
}

.governance .hontres-list li,
.governance .memtype-list li,
.governance .agm-list li {

}

.officers table {
	margin: 0 auto;
}

.officers tr {
}

.officers table td {
	display: block;
	padding: 0;
	margin: 0.5em 0;
	text-align: left;
}

@media screen and (min-width: 550px) {

		.officers table td {
		display: inline-block;
		padding: 0.5em;
	}
}




/**********************************************************************************
 ********************************** NEWS PAGE *************************************
 *********************************************************************************/



.emph {
	font-weight: 500;
}

.news-intro {

}

.news h3 {
	text-align: left;
}

.intropara {
	width: fit-content;
	padding: 0 0 2em 0;
	margin: 0 auto;
}

.news-items {

}

.newshead {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}

.newsdate {
	text-align: left;
	font-weight: 500;
	text-decoration: none;
	font-size: 1.3rem;
}

.newshead img {
	width: 10vw;
	margin-right: 0;
	height: auto;
	max-width: 30px;
}

.newsitem-head {
	text-align: center;
	font-size: 1.4rem;
	font-weight: 400;
	margin: 1em 0;
	font-family: Roboto;
	color: var(--clr-sect-head);
	text-transform: capitalize;
}

.newsitem-content {
	display: none;
}

.nitem-show {
	display: block;
	font-size: 1.4rem;
	font-weight: 600;
	background-color: var(--clr-bgd);
	color: white;
	width: 9em;
	height: 3em;
	outline: none;
	border: none;
	border-radius: 6px;
	cursor:pointer;
	margin-left: auto;
}

.news-list {
	
}

@media screen and (min-width: 400px)
{
	.nitem-show {
		font-size: 1.5rem;
	}
}

@media screen and (min-width: 700px)
{
	.nitem-show {
		font-size: 1.7rem;
	}
}

.lead-button {
	display: none;
}

.lead-content {
	display: block;
}

@media screen and (min-width: 400px) {

	.newsdate {
		font-size: 1.5rem;
	}
	.newsitem-head {
		font-size: 1.6rem;
	}
}

@media screen and (min-width: 600px) {
	.newsdate  {
		font-size: 1.6rem;
	}
	.newsitem-head {
		font-size: 1.9rem;
		color: var(--clr-page-head);
		font-weight: 500;
	}
}

.newsevent {
	text-align: left;
	margin: 30px 0;
}

.newsevent-date {
	display:  inline-block;
	font-weight: 600;
	margin-bottom: 10px;
}

.newsevent-title {
	display:  inline-block;
	width: fit-content;
}

.newsblock {
	margin: 40px auto;
	background-color: #b0ceee;
	padding: 10px 0.1em;
}

@media screen and (min-width:  400px)
{
	.newsblock {
		padding: 1em 0.7em;
	}
}

@media screen and (min-width:  600px)
{
	.newsblock {
		padding: 1.5em 2em;
	}
}

@media screen and (min-width:  800px)
{
	.newsblock {
		margin: 2em auto;
	}
}

.page .newspara {
	text-align: justify;
	margin: 0.8em auto;
}

@media screen and (min-width:  400px)
{
	.newspara {
		text-align: justify;
	}
}

.newspara .re {
	text-align: center;
}

.news ul li {
	list-style-type: none;
	padding-left: 0;
	margin: 0 0.25em;
	text-align: left;
}

.news ul li::before {
	display: inline-block;
  	content: '\25CF';
  	font-size: 0.7em;
  	padding-right: 1em;
  	vertical-align: text-bottom;
}


.pub {
	text-align: left;
	margin: 1em 0;
}

.publer {

}

.pub.pub-email script {
	font-weight: 400;
	line-height: 1.5;
}

.publer .pub-email::before {
	background-image: url("../images/icons/email-icon-navy.svg");	
}

.newslink {
	font-weight: 500;
}

.off-member {
	margin: 20px auto;
	text-align: left;
}

.off-role {
	font-weight: 600;
	width: 9em;	
	margin-right: 2em;
	display: inline-block;
}

.off-name {
	width: 9em;
	margin-right: 2em;
	display: inline-block;
}

.email {
	width: 15em;
	display: inline-block;
}

.newspara.forward {
	font-family: Arial;
	font-size: 1em;
}




/**********************************************************************************
********************************** EVENTS - LECTURES ******************************
**********************************************************************************/

@media screen and (min-width: 600px)
{
	.lectures {
		width: 80%;
		max-width: 800px;
	}
}

.book-title {
	font-style: italic;
	font-weight: 500;
}

.lects {
	width: auto;
	margin: 0 auto;
}

.lect {
	height: auto;
	margin: 20px auto;
}

.date-head,
.event-head,
.title-head,
.led-head,
.venue-head,
.meet-head,
.time-head,
.info-head,
.reg-head
 {
	display: inline-block;
	font-weight: 600;
	width: 5em;
	height: 100%;
}


.info-head,
.reg-head {
	width: 7em;
}

@media screen and (min-width: 600px) 
{
	.date-head,
	.event-head, 
	.title-head, 
	.led-head, 
	.venue-head, 
	.meet-head, 
	.time-head, 
	.info-head, 
	.reg-head
	 {
		width: 7em;
	}
}

.title,
.event,
.led,
.aff,
.date,
.venue,
.meet,
.time,
.info,
.contact,
.reg {
	font-weight: 400;
}

.title {
	font-weight: 400;
}

.aff {
	margin-left: 2em;
}

/**********************************************************************************
********************************** EVENTS - OUTINGS *******************************
**********************************************************************************/



.outings section {
		margin: 2em 0.5em 2em 0.5em;
}


.outing {
	height: auto;
	margin: 20px auto;
	text-align: left;
	width: 100%;
}

@media screen and (min-width: 600px)
{
	.outings {
		width: 80%;
		max-width: 800px;
	}
}

.wed-eves,
.sun-afts {
	padding: 0.15em;
}



/**********************************************************************************
********************************** EVENTS - CONFERENCES ***************************
**********************************************************************************/


@media screen and (min-width: 600px)
{
	.conferences,
	.specials {
		width: 80%;
		max-width: 700px;
	}
}

.conferences.confs {
	width: auto;
	margin: 0 auto;
	text-align: left;
}

.conferences .conf {
	width: auto;
	height: auto;
	margin: 40px auto;
}



/**********************************************************************************
********************************** EVENTS - SPECIAL EVENTS ************************
**********************************************************************************/

.specs {
	width: auto;
	margin: 0 auto;
	text-align: left;
}

.spec {
	width: auto;
	height: auto;
	margin: 40px auto;
}



/**********************************************************************************
********************************** EVENTS - CALENDAR ******************************
**********************************************************************************/

.calendar-cont {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	align-items: flex-start;
	text-align: center;
	width: fit-content;
}

.calendar-div-large {
	width: 100%;
	max-width: 800px;
}

.calendar-key {
	width: 100%;
}

.cal-key h2 {
	text-align: center;
}

.cal-key {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 1fr;
	grid-gap: 10%;
	grid-template-areas: "cal-color . event-type"
						 "cal-color . event-type"
						 "cal-color . event-type"
						 "cal-color . event-type";
}

.cal-color,
.event-type {
}

.cal-color {
	grid-area: cal-color;

}

.event-type {
	grid-area: event-type;
}

/**********************************************************************************
 ********************************** JOURNAL ***************************************
 *********************************************************************************/

.journal .nmaj-images {
	width: 100%;
	margin: 0 auto;
}

.nmaj-set {
	display: inline-grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-gap: 0;
	grid-template-areas: "nmaj2021h";
}

.nmaj-imageh {
	margin: 0;
	padding: 0;
}

.nmaj2019h {
	display: none;
	grid-area: nmaj2019h;
}

.nmaj2020h {
	display: none;
	grid-area: nmaj2020h;
}

.nmaj2021h {
	display: block;
	grid-area: nmaj2021h;
}

@media screen and (min-width: 400px)
{
	.nmaj2020h {
		display: block;
	}

	.nmaj-set {
		grid-template-columns: 1fr 1fr;
		grid-gap: 10px;
		grid-template-areas: "nmaj2020h nmaj2021h";
	}
}

@media screen and (min-width: 700px)
{
	.nmaj2019h {
		display: block;
	}

	.nmaj-set {
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-areas: "nmaj2019h nmaj2020h nmaj2021h";
	}
}

.nmaj-image {
	width: 100%;
	height: 100%;
}

.title,
.nmaj-title {
	/*! font-style: italic; */
	font-weight: 500;
}

.pub-title {
	font-weight: 500;
}

.post-add {

}

.post-add::before {
	content: '';
	display: inline-block;
	margin: 0 1.0em 0 0;
	height: 1em;
	width: 1em;
    background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
}

.ed-email::before {
	content: '';
	display: inline-block;
	margin: 0 1.0em 0 0;
	height: 1em;
	width: 1em;
    background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
}

.post-add::before {
	background-image: url("../images/icons/address-icon-navy.svg");
}

.ed-email::before {
	background-image: url("../images/icons/email-icon-navy.svg");	
}







/**********************************************************************************
 ********************************** RESOURCES PAGE **********************************
 *********************************************************************************/



.foreword a:link,
.people a:link,
.places a:link,
.museums a:link,
.foreword a:visited,
.people a:visited,
.places a:visited,
.museums a:visited,
.foreword a:active,
.people a:active,
.places a:active,
.museums a:active {
	color: var(--clr-res-nav1);
	text-decoration: none;
	font-weight: 600;
}

.fwd-cont {
	display: block;
	margin: 0 auto 0 auto;
	width: 100%;
}

.fwd-intro {
	display: block;	
	width: 100%;
	font-size: 1.3rem;
	text-align:  justify;
}

.foreword .signature {
	margin: 1em 0 0 0em;
}

.fwd-intro-start, 
.fwd-intro-mid,
.fwd-intro-end {
	position: relative;
	margin: 0 5px;
}

@media screen and (min-width: 400px)
{
	.fwd-intro {
		font-size: 1.5rem;
	}

	.fwd-intro-start, 
	.fwd-intro-end {
		position: relative;
		margin: 0 5px;
	}

}

@media screen and (min-width: 800px)
{
	.fwd-intro {
		font-size: 1.7rem;
		max-width: 1100px;
		margin: 0 auto;
	}

	.fwd-intro-start, 
	.fwd-intro-mid, 
	.fwd-intro-end, 
	.signature {
		position: relative;
		margin: 0;
	}

}

.fwd-image {
	display: flex;
	align-content: center;
	width: 100%;
	margin: 80px auto 50px auto;
	max-width: 1100px;
}

.foreword img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 0 auto;	
	max-width: 1400px;
}

.fwd-title {
	font-weight: 500;
}

.people .list-head,
.places .list-head,
.museums .list-head {
	display: flex;
	flex-flow: row wrap;
	margin: 0 auto 40px auto;
	justify-content: space-between;
	width: 100%;
}

.people section .img-cont,
.places section .img-cont,
.museums section .img-cont,
.education section .img-cont,
.people .title-cont,
.places .title-cont,
.museums .title-cont,
.education .title-cont {
	display:  flex;
	width: 100%;
	height: auto;
	margin: 0 auto;
	flex-flow: row wrap;
	justify-content: center;
	max-width: 1400px;
}

.people .title-cont,
.places .title-cont,
.museums .title-cont,
.education .title-cont {
}

.people .img-cont img,
.places .img-cont img,
.museums .img-cont img,
.education .img-cont img {
	width: 11%;
	margin: 0.125em;
	min-width: 70px;
	min-height: 70px;
}


.places .img-cont img {
	width: 13%;
}

.places img {
	width: 15%;
}

.people .sources,
.places .sources,
.museums .sources,
.education .sources {
	text-align: justify;
	width: 100%;
	margin: 0 auto 20px auto;
	max-width: 1300px;
}

.people .source,
.places .source,
.museums .source,
.education .source {
	font-weight: 600;
	color: var(--hardpurple);
}

ul.res-people,
ul.res-places {
	width:  100%;
	margin: 0 auto;
}

ul.res-people li,
ul.res-places li {
	list-style-type: none;
	padding-left: 0;
	margin: 0 0.25em;
}

@media screen and (min-width: 800px) {

	ul.res-people li, 
	ul.res-places li {
		padding-left: 1em;
	}
}

ul.res-people li::before,
ul.res-places li::before {
	content: '\25CF';
	margin-right: 1em;
	font-size: 0.8em;
	color: var(--clr-sect-head);
	display: inline;
	vertical-align: text-bottom;
}

h2.east-india-company {
	margin: 0.5em;
	padding: 0;
}

ul.east-india {
	
}

ul.east-india li {
	list-style-type: none;
	padding-left: 1em;
}

ul.east-india li::before {
	content: '\25B8';
	font-size: 1.5em;
	vertical-align: baseline;
}

.people .item,
.places .item,
.museums .item,
.education .item {
	margin-bottom:  2em;
}


.foreword a:hover,
.people a:hover,
.places a:hover,
.museums a:hover {
	color: var(--clr-res-nav2);
}


.foreword .source a,
.people .source a,
.places .source a,
.museums .source a,
.foreword .source a,
.people .source a,
.places .source a,
.museums .source a {
	font-weight: 600;
}

.museums .museum-section {
	margin: 4em auto;
	padding: 0;
	width: 100%;
	height: auto;
}

.museums h2 {
	margin: 0 auto;
}

.museums .museum-section .museum-img {
	width: 100%;
	height: auto;
	margin: 2em auto;
}

/*.museums .museum-section a {

}*/





/******************************************
***************** FOOTER ******************
******************************************/


footer {
	margin: 300px auto 0px auto;
	background: var(--clr-theme);
}

.footer-cont {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	margin: 0% 1.5%;
	padding: 0;
	width: 97%;
	color: var(--clr-home);
	font-weight: 600;
}

footer a:link  {
	text-decoration: none;
	color: var(--clr-home);
}
footer a:visited  {
	text-decoration: none;
	color: var(--clr-home);
}
footer a:hover  {
	text-decoration: none;
	color: var(--clr-link2);
}
footer a:active  {
	text-decoration: none;
	color: var(--clr-home);
}

.rules-link {
	text-decoration: none;
	font-weight: 600;
	cursor: pointer;
}

.rules-link:hover {
	color: var(--gold);
}

footer h2 {
	color: var(--clr-home);
	font-size: 1.4rem;
	font-weight: 600;
	text-align: center;
	padding-bottom: 12px;
	border-bottom: solid 1px var(--gold);
}

footer h4 {
	font-size: 1.2rem;
	font-weight: 400;
	text-decoration: underline;
}

.org-details,
.smedia,
.calendar-div {
	margin-top: 20px;
	margin-bottom: 20px;
	width: 100%;
	font-size: 1.2rem;
	text-align: justify;
}

.calendar-div {
	text-align: center;
}



@media screen and (min-width: 250px) {

	.org-details,
	.smedia,
	.calendar-div {
		width: 90%;
	}

}

@media screen and (min-width: 450px) {
	.org-details,
	.smedia,
	.calendar-div {
		width: 48%;
	}
}

@media screen and (min-width: 750px) {
	.org-details,
	.smedia,
	.calendar-div {
		width: 30%;
	}
}


.trade-assocs {
	width: 100%;
	
	text-align: center;
}

.ta-cont {
	margin-top: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
}

.ta-cont img {
	width: 100%;
	
}

.trade-assocs .title {
	background-color: inherit;
	text-align: left;
	font-size: 1.2rem;
}

.smedia-cont {
	display: flex;
	justify-content: space-between;
	align-content: center;
	margin-bottom: 30px;
	
}

.smedia-cont a {
	width: 25%;
	text-align: center;
}

.smedia-cont img {
	width: 20px;
	height: 20px;
}

.mentions-cont a :hover {
	color: var(--clr-nav-trim);
}

.mentions {
	width: 100%;
	margin-top: 35px;
	/*! font-size: 1.1rem; */
	text-align: center;
}

.mentions-cont {
	width: 95%;
	margin: 0 2.5%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	align-content: flex-end;
}

.mentions-cont a {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	align-content: flex-end;
	width: 100%;
}

.mentions-cont img {
	width: 100%;
}

.mentions .comment {
	margin-top: 20px;
	text-align: justify;
	width: 100%;
}

.backtotop {
	display: flex;
	position: fixed;
	background-color: var(--dalcassian-red);
	bottom: 16px;
	right: 32px;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	text-decoration: none;
	opacity: 0; 
	pointer-events: none;
	transition: all 0.4s;
	border: none;
	outline: none;
	cursor: pointer;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.backtotop.alive {
	bottom: 32px;
	opacity: 1;
	pointer-events: auto;
}

.backtotop img {
	background-color: transparent;
	width: 50px;
	height: 50px;
	border-radius: 25px;
	margin: auto;
	outline: none;
	border: none;
}

.off-address,
.off-phone,
.off-email  {
	display: flex;
	align-items: center;
	align-content: center;
	line-height: 1.7;
	font-style: normal;
	margin: 1em 0;
}

.off-address::before,
.off-phone::before,
.off-email::before {
	content: '';
	display: inline-block;
	margin: 0 1.0em 0 0;
	height: 1.25em;
	width: 1.25em;
    background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
	min-width: 15px;
	text-align: justify;
}

.off-address::before {
	background-image: url("../images/icons/address-icon-white.svg");	
}

.off-email::before {
	background-image: url("../images/icons/email-icon-white.svg");	
}

.copyright {
	margin-top: 30px;
}

.copyright-symbol {
	font-size: 1.3em;
}

.copy-content {

}

p.web-des {
	margin-top: 80px;
	margin-left: 2.5%;
    background-color: inherit;
    text-align: left;
    font-weight: 600;
    bottom: 0;
    color: white;
    font-size: 1.1rem;
	position: relative;
}

.web-designer{
	color: var(--clr-home);
}

.web-designer:hover {
	color: var(--clr-nav-trim);
}


/*************************************************************************************************
************************************* CALENDAR STYLING *******************************************
**************************************************************************************************/

.calendar-table {
	width: 100%;
	text-align: center;
	margin: 0 auto;
}

.cal-body {
	text-align: center;
}

.cal-body tr {
	height: 4em;
}

th,
td {
	width: 35%;
	height: auto;
	padding: 0.5em 0.25em;
}

.cal-head {
	display: inline;
	text-align: center;
	
}

.month-head {
	margin-bottom: 5px;
	text-align: center;
	font-weight: 600;
	margin: 1em 0;
}

.month-year {
}

.year-chg, .month-chg {
	background-color: inherit;
	color: var(--clr-home);
	border: none;
	outline: none;
	padding: 0.25em;
	margin: 0;
	font-size: 1.5em;
}

.year-chg:hover, .month-chg:hover {
	color: var(--clr-nav-trim);
}

.date-entry-row {
	display: inline-grid;
	margin: 10px auto;
	width: 100%;
	grid-template-columns: 31% 10px 13% 10px calc(56% - 20px);
	grid-template-rows: auto;
	grid-template-areas: "dateentry . finddate . dateinfo";
}

.date-entry {
	grid-area: dateentry;
	height: 25px;
	text-align: center;
	/*! font-size: 1.0rem; */
	background-color: inherit;
	color: var(--clr-home);
	border: 1px solid #FB5454;
	border-radius: 6px;
	margin: 0;
	padding: 0;
	max-width: 12em;
}

.date-entry::placeholder {
	color: var(--clr-home);
	font-style: italic;
	font-size: 1.2rem;
}

.date-entry:hover {
	background-color: var(--burgundy);
}

.find-date {
	grid-area: finddate;
	height: 25px;
	text-align: center;
	/*! font-size: 1.2rem; */
	font-weight: 500;
	background-color: var(--magenta);
	color: var(--clr-home);
	border-radius: 13px;
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
	max-width: 8em;
}

.find-date:hover {
	background-color: var(--magenta-pink);
}

.date-entry:focus,
.find-date:focus {
	outline: none;
}

.date-info {
	grid-area: dateinfo;
	height: 25px;
	background-color: inherit;
	color: var(--clr-home);
	/*! font-size: 1.0rem; */
	line-height: 2.0;
	border: 1px solid red;
	border-radius: 6px;
	margin: 0;
	padding: 0;
}


.today-cap {
	text-align: center;
}

.today-div {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	align-items: center;
	align-content: center;

}

.left-info, .right-info{
	height: 25px;
	width: 39%;
    color: var(--clr-home);
	font-style: italic;
	font-size: 0.9rem;
	text-align: center;
}

.todayButt {
	background-color: var(--purple);
	color: var(--clr-home);
	text-align: center;
	/*! font-size: 1.2rem; */
	font-weight: 600;
	width: 22%;
	height: auto;
	border: none;
	outline: none;
	padding: 1em;
	margin: 0;
	border-radius: 1.5em;
	max-width: 12em;
}

.todayButt:hover {
	background-color: var(--magenta);
}

.back {
	float: left;
} 

.adv {
	float: right;
}

.day-init {
	font-size: inherit;
	width: 3.8%;
}

.day {
	width: 2.45%;
	/*! height: 25px; */
	padding: 0;
	text-align: center;
	border-radius: 2em;
	max-width: 4em;
}

.filled:hover {
	background-color: var(--clr-filled-hov);
}

.sat {
	color: var(--clr-sat);
}

.sunday {
	color: var(--clr-nav-trim);
}

.today {
	background-color: var(--clr-today-bgd);
}

.today:hover {
	background-color: var(--clr-today-bgd-hov);
}

.today:focus {
	outline: none;
}

.foundday {
	background-color: var(--pink);
}

.red-letter {
	color: var(--clr-today-bgd);
	position: relative;
}

.event-detail {
    visibility: visible;
	height: 25px;
    color: var(--clr-home);
	font-style: italic;
}

.err {
	border: 1px solid red;
}




/***************************************************************************************************************************
****************************************************************************************************************************

 .hidden, .visible and .shown selectors are entered LAST in <main> block to give them priority over existing class selectors.
 This avoids the need for  ! important  overrides and the potential conflicts resulting from them. 

****************************************************************************************************************************
***************************************************************************************************************************/

.hidden {
	display: none;
}

.visible {
	display: block;
}

.shown {
	opacity:  1.0;
}