/* Font directives */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:100,200,300,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Lato:200,300,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,600,700,800');

/* Global styling defaults */   

::placeholder {
   text-align: center;
   color: var(--turq);
   font-size: 1.5rem;
}

:root {
	--white: #FFFFFF;			/* White */
	--brown: #663300;			/* Brown */
	--light-brown: #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. */
	--powderblue: #7DC7F9;
	--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  */
	--purple: #AA00FF;			/* Purple */
	--pink: #FF1493;			/* Pink */
	--magnolia: #F0DDB3;		/* Magnolia  */
	--clr-theme1: blue;
	--clr-theme2: #AF01FF;

}

html {
	writing-mode: horizontal-tb;
  	box-sizing: border-box; 	/* Keeps borders inside the element bounds. */
  	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
  	font-size: 62.5%;			/* Allows 1 rem = 10px in both child and nested elements */
}

*, *::before, *::after {
  	/*! box-sizing: inherit; */
}


* {
	margin: 0;
    padding: 0;  
}


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

a:link {
	color: var(--blue);
	text-decoration: none;
}

a:visited {
	color: var(--blue);
	text-decoration: none;
}

a:hover {
	color: var(--blue);
	text-decoration: none;
}

a:active {
	color: var(--blue);
	text-decoration: none;
}

h1 {
	font-size: 2.5rem;
	margin-top:  0;
}

* h2 {
	font-family: Roboto;
	font-weight: 500;
	color: var(--clr-theme2);
}

body {
	overflow-x: hidden;
	overflow-y: scroll;
	margin: 0 auto;
	text-align: center;
	color: var(--blue);
    font-family: Open Sans, sans-serif;
	font-size: 1.5rem;
	background-color: var(--magnolia);
	height: auto;
}

.page-cont {
	margin:  0 auto;
	width:  100%;
	height:  auto;
	max-width: 1400px;
}
	
.cont {
	margin: 0% 2.5%;
	width: 95%;
	text-align: left;
}

header {
	width: 100%;
	margin: 0px auto;
}

.header {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	padding: 5px 0 0 0;
}

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

	.header {
		justify-content: center;
		width:  100%;
		margin: 0 auto;
	}
}

.logodiv {
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	height: auto;
	width: 50%;
	margin-bottom: 10px;
	min-width: 100px;
}

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

.logo {
	width: 100%;
}

.logo img {
	width: 100%;
}
 
.logosmall img {
	width: 100%;
	max-width: clamp(30px, 15vw, 100px);
}

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

	.logodiv {
		height: auto;
	}

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

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

	.logodiv {
		height: auto;
	}

	.logo {
	}
}


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

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

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


.logotext {
	display: grid;
	justify-items: center;
	align-items: center;
	align-content: center;
	margin-bottom: 5vw;
	height: auto;
	width: 100%;
	max-width: 580px;
}

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

	.logotext {
		margin-left:  10%;
		margin-bottom: 0;
	}
}

.logotext img {
	width: 100%;
	height: auto;
}

.essentials-cont {
	margin-bottom: 4vw;
	width: 100%;
	font-weight: 400;
	font-family: Open Sans;
	display: flex;
	justify-content: center;
}

.essentials {
	/*! display: flex; */
	flex-flow: row wrap;
	width: auto;
	font-size: min(1.6rem, 5vw);
	margin-bottom:  0;
	justify-content: flex-start;
	align-content: flex-start;
	align-items: flex-start;
}

.ess-cont1,
.ess-cont2 {
	display: block;
	width: 100%;
	text-align: left;
	margin: 0 auto;
}

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

	.essentials {
		font-size: 1.6rem;
	}

	.ess-cont1,
	.ess-cont2 {
		width: auto;
	}
}

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

	.essentials {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		font-size: 1.6rem;
		width: 100%;
	}

	.ess-cont1 {
		/*margin-right: 20px;*/
	}
}

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

	.essentials-cont {
		margin: 1em auto;
	}

	.essentials {
		display: flex;
		font-size: 1.7rem;
		font-weight: 400;
		flex-flow: row wrap;
		justify-content: space-around;
	}

	
	.ess-cont2 {
		margin-right: 1em;
		/*! margin-left: 2em; */
	}
}

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

	.ess-cont1,
	.ess-cont2 {
		display: flex; 
		margin: 0;
		flex-flow: row wrap; 
		justify-content: center; 
		padding-left: 10px;
	}

	.ess-cont2 {
		margin-right: 0.5em;
	}

	.ess + .ess {
		margin-left: 2em;  
	}
}


.ban-address,
.ban-phone,
.ban-email,
.ban-hours {
	display: flex;
	height: 35px;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	width: auto;
	font-weight: 500;
}

.ban-address::before,
.ban-phone::before,
.ban-email::before,
.ban-hours::before {
    display: inline-block;
    content: "";
	margin: 0 0.5em 0 0;
	height: 1.0em;
	width: 1.5em;
    background-repeat: no-repeat;
	background-size: 60% 80%;
	background-position: center center;
}

@media screen and (min-width: 250px) {
	.ban-address::before,
	.ban-phone::before,
	.ban-email::before,
	.ban-hours::before {
		height: 1.1em;
		width: 1.65em;
	}
}

@media screen and (min-width: 400px) {
	.ban-address::before,
	.ban-phone::before,
	.ban-email::before,
	.ban-hours::before {
		height: 1.1em;
		width: 1.65em;
	}
}

@media screen and (min-width: 600px) {
	.ban-address::before,
	.ban-phone::before,
	.ban-email::before,
	.ban-hours::before {
		height: 1.1em;
		width: 1.65em;
	}
}

@media screen and (min-width: 860px) {
	.ban-address::before,
	.ban-phone::before,
	.ban-email::before,
	.ban-hours::before {
		height: 1.2em;
		width: 1.8em;
	}
}


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

.ban-phone::before {
	background-image: url("../images/icons/phone-icon-purple.svg");
}

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

.ban-hours::before {
	background-image: url("../images/icons/open-hours-icon-purple.svg");
}


nav {
	position: relative;
	display:  flex;
	width: 100%;
	margin: 2em auto;
	height: auto;
	font-family: Roboto;
}

@media screen and (min-width: 860px) {
	nav {
		margin: 40px auto 20px auto;
		height: auto;
	}
}


.navbar {
	display: flex;
	list-style-type: none;
	flex-flow: row wrap;
	align-content: center;
	align-items: center;
	padding: 0;
	height: auto;
	width: 100%;
	justify-content: space-between;
	margin-right: 10px;
}

.sociallink {
	margin-right:  auto;
}

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

.pagelink {
	margin-left: auto;
}

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

nav .sociallink {
	width: 1%;
	min-width: 15px;
	margin: 0 5px;
	display: grid;
	place-items: center;
}

nav a {
	width: 100%;
}

.sociallink img {
	width: 100%;
}

@media screen and (min-width: 400px)
{
	.sociallink img {
		width: 70%;
	}
}

@media screen and (min-width: 860px)
{
	.sociallink img {
		width: 50%;
	}
}

nav li {
    position: relative;
	height: auto;
	font-weight: 500;
	font-size: min(1.5rem, 6vw);
	line-height: 30px;
	text-align: center;
	color: var(--washblue); 
	cursor: pointer;
}

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

	nav li {
    	font-size: 1.6rem;
	}

	nav .sociallink { 
		width: 3%;
		min-width: 15px;
	}
}

@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-theme2);
    opacity: 1;
    transition: height 1300ms, opacity 1300ms, width 1300ms;
}


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

.navlink:not(.point, .sociallink):hover {
	color: blue;
}

.point {
	cursor: none;
}

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

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

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

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

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

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





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

main {
	display: block;
	width: 100%;
	text-align: center;
	margin: 10px auto;
	padding: 0;
}

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

main a:link {
	color: var(--blue);
	text-decoration: none;
}

main a:visited {
	color: var(--blue);
	text-decoration: none;
}

main a:hover {
	color: var(--blue);
	text-decoration: none;
}

main a:active {
	color: var(--blue);
	text-decoration: none;
}

article {
	margin: 0 2.5%;
	
}

.page {
	display: none;
	flex-flow: row wrap;
	justify-content: center;
	align-content: flex-start;
	align-items: center;
	margin: 0;
}

.home {
	margin: 0 auto;
	
}

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

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

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

	.page:not(.home) {
		margin-top: 3em;
	}
}

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

	.page:not(.home) {
		margin-top: 6em;
	}
}

.shopfront {
	margin: 0;
}

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

	.shopfront {
		width: 50%;
		max-width: 550px;
	}
}

.shopfront img {
	width: 100%;
	
}

.homeblurb-cont {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
	align-content: center;
	width: 100%;
	margin: 30px auto;
	background-color: rgba(240, 221, 179, 1.0);
}

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

	.homeblurb-cont {
		width: 45%;
		min-width: 400px;
		justify-content: center;
		margin-top: 40px;
		max-width: 300px;
	}
}

.homeblurb {
	width: 100%;
	margin: 0 auto;
}

.welcome {
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--clr-theme2);
}

.welcome::before,
.welcome::after {
	display: block;
	content:"~~~~~~~~~~~~~~~~~~~~~~~~~";
}

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

	.welcome {
		font-size: clamp(1.4rem,7vw, 2.1rem);
	}
}

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

	.welcome {
		font-size: 2.5rem;
	}
}

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

	.welcome {
		font-size: 2.7rem;
	}
}

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

	.welcome {
		margin: 1em auto 0 auto;
		text-align: center;
		font-size: 2.7rem;
		font-style: italic;
	}
}

.tildas {
	color: var(--clr-theme2);
	display: none;
}

.bullets {
	margin: 0 auto;
	text-align: left;
	list-style-type: none;
	width: fit-content;
	font-size: 1rem;
	max-width: 100%;
}

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

	.bullets {
		font-size: 1.55rem;
	}

}

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

	.bullets {
		font-size: 1.65rem;
	}

}

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

	.bullets {
		font-size: 1.65rem;
	}

}

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

	.bullets {
		font-size: 1.7rem;
	}

}

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

	.bullets {
		font-size: 1.8rem;
	}

}

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

	.bullets {
		font-size: 1.7rem;
	}

}

.bullets li {
	line-height: 2.5;
	width: fit-content;
	text-align: left;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
}

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

	.bullets {
	}
}


.bullets li:not(.red-alert)::before {
	content: "\25CF";
	font-size: 5vw;
	color: var(--clr-theme2);
	margin-right: 2em;
}

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

	.bullets li:not(.red-alert)::before {
		font-size: 1.3rem;
	}
}

@media screen and (min-width: 400px) {
	
	.bullets li:not(.red-alert)::before {
		/*! margin: auto 1.5em 0 auto; */
		font-size: 1.3rem;
	}
}

.red-alert {
	font-weight: 600;
	color: red;
}

@keyframes heartpulse {
  from { color: var(--magnolia); }
  to   { color: red; }
}

.bullets li.red-alert::before {
	content: "\2764";
	margin-right: 0.5em;
	font-size: 6vw;
	animation-name: heartpulse;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;  
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
}

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

	.bullets li.red-alert::before {
		margin-right: 1em;
		font-size: 1.3rem;
	}
}

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

	.bullets li.red-alert::before {
		margin-right: 1em;
		font-size: 1.25em;
	}
}

.quality {
	font-weight: 500;
}

.adieupara {
	font-size: 1.4rem;
	text-align: justify;
	margin: 1em auto;
	padding: 0 0.25em;
	line-height: 2;
}

@media screen and (min-width: 400px) {
	.adieupara {
		width: 85%;
		font-size: 1.45rem;
	}
}

@media screen and (min-width: 800px) {
	.adieupara {
		width: 80%;
		max-width: 800px;
		font-size: 1.7rem;
	}
}






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



.about {
}


.about-sshow {
	width: 100%;
	margin: 0 auto;
	height: auto;
	max-width: 1100px;
}

.aboutss-slide {
	position: relative;
	width: 100%;
	margin: 0 auto;
	height: calc(100vw * 674 / 1200);
}

@media screen and (min-width: 1100px)
{
	.aboutss-slide {
		height: 618px;
	}
}

.aboutss-image{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	-webkit-transition: opacity 4s ease-in-out;
    -moz-transition: opacity 4s ease-in-out;
    -o-transition: opacity 4s ease-in-out;
    transition: opacity 4s ease-in-out;
}

.aboutss-slide img {
	border-radius: 4px;
}

#aboutss-image1{
	z-index: 0;
}

#aboutss-image2{
	z-index: 1;
}

#aboutss-image3{
	z-index: 2;
}

#aboutss-image4{
	z-index: 3;
}

#aboutss-image5{
	z-index: 4;
}

#aboutss-image6{
	z-index: 5;
}

#aboutss-image7{
	z-index: 6;
}

.aboutss-console {
	width: 45%;
	min-width: 150px;
	margin: 0px auto;
}

.aboutss-controls {
		width: 10px;
		margin: 0 1em;
		height: 10px;
		outline: none;
		background-color: var(--skyblue);
		background-size: cover;
		background-repeat: no-repeat;
		border-radius: 50%;
		border: none;
	}


@media screen and (min-width: 651px)
{
	.aboutss-controls {
		width: 15px;
		margin: 0 40px;
		height: 15px;
	}
}

.prev-slide:hover, 
.next-slide:hover {
	background-color: lightblue;
}

.playing-slide {
	background-color: red;
	border: none;
}

.paused-slide {
	background-color: green;
}

.playing-slide:hover {
	background-color: pink;
	border: none;
}

.paused-slide:hover {
	background-color: lightgreen;
}

.abouttext {
	display: block;
	width: 100%;
}

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

	.abouttext {
		display: block;
		margin: 2em auto;
		font-size: 1.7rem;
	}
}

.col1 h2, 
.col2 h2, 
.hist-cont h2 {
	text-align: center;
	margin: 1em 0 0 0;
	font-size: 2.3rem;
	color: var(--clr-theme2);
}

.abouttext section {
	text-align: justify;
	font-size: min(1.35rem, 7vw);
	line-height: 2.0;
	width: 100%;
}

.abouttext p {
	margin: 1em 2px;
}

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

	.abouttext section {
		font-size: min(1.45rem, 7vw);
	}
}

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

	.abouttext section {
		font-size: 1.55rem;
	}
}

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

	.abouttext section {
		text-align: justify;
		line-height: 2.0;
		width: 100%;
		margin: 0 auto;
		font-size: 1.7rem;
		max-width: 1100px;
	}
}


.history-heading {
	display: block;
	margin: 3em auto 2em auto;
}

.history {
	display: block;
	text-align: left;
}

.abouttext img {
	width: 100%;
	height: auto;
}

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

	.history {
		margin-bottom: 20px;
		display: inline-block;
		text-align: left;
		width: 75%;	margin: 0 auto;
		max-width: 900px;
	}
}

.old-photo-comment {
	width: 95%;
	margin: 0 auto 50px auto;
	line-height: 2.0;
	font-size: 1.2rem;
	text-align: justify;
}

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

	.old-photo {
		margin: 0 auto;
		width: 99%;
	}

	.old-photo-comment {
		margin: 0 auto 50px auto;
		width: 95%;
		line-height: 2.0;
		font-size: 1.3rem;
		text-align: justify;
	}
}

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

	.old-photo {
		margin: 0 auto;
		width: 99%;
	}

	.old-photo-comment {
		margin: 0 auto 50px auto;
		width: 95%;
		line-height: 2.0;
		font-size: 1.5rem;
		text-align: justify;
	}
}

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

	.old-photo {
		width: 60%;
		
	}

	.old-photo img {
		width: 100%;
		
	}

	.old-photo-comment {
		width: 100%;
		line-height: 2.0;
		font-size: 1.7rem;
		text-align: justify;
		margin: 30px auto;
	}
}


.old-newspaper {
	width: 100%;
}

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

	.old-newspaper {
		width: 75%;
		margin: 0 auto;
		max-width: 900px;
	}
}





/**********************************************************************************
********************************** SERVICES ***************************************
**********************************************************************************/



.services {
	width: 100%;
	margin: 0 auto;
}

.intro {
	background-color: #0077FF;
	color: #FFFFFF;
}

.services-wrapper {
	margin: 0 auto;
  	display: flex;
  	flex-flow: row wrap;
  	justify-content: space-between;
  	align-items: center;
  	align-content: center;
  	width: 100%;
  	color: #444;
}

.box {
	display: flex;
	width: 100%;
	height: calc(105vw - 5.25px);
	justify-content: center;
	align-items: center;
	position: relative;
	color: white;
	text-align: center;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 50%;
	margin: 2.5px;
}

.box:hover .title {
	display: none;
}

.box:hover {
}

.wash {
	background-image: url(../images/services/wash.jpg);
}

.steam {
	background-image: url(../images/services/steam.jpg);
	background-position: center center;
}

.dry-clean {
	background-image: url(../images/services/dry-clean.jpg);
}

.shirt {
	background-image: url(../images/services/shirt.jpg);
}

.duvet {
	background-image: url(../images/services/duvet.jpg);
}

.covering {
	background-image: url(../images/services/covering.jpg);
}

.curtain {
	background-image: url(../images/services/curtain.jpg);
}

.sport {
	background-image: url(../images/services/sports-kits.jpg);
}

.formal {
	background-image: url(../images/services/formal.jpg);
}

.evening {
	background-image: url(../images/services/evening.jpg);
	background-position: top center;
}

.suede {
	background-image: url(../images/services/suede.jpg);
}

.special {
	background-image: url(../images/services/special.jpg);
}

.title {
	position: absolute;
	width: auto;
	height: auto;
	line-height: 25px;
	font-family: Roboto;
	font-size: 1.6rem;
	font-weight: 500;
	background-color: #138efb;
	opacity: 0.7;
	padding: 10px;
	border-radius: 5px;
}

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

	.title {
		font-size: 1.7rem;
	}
}

@media screen and (min-width: 400px) {
    
    .services-wrapper {
        padding: 0 2.5px 5px 2.5px;
    }

	.box {
		width: calc(50% - 5px);
		height:  calc(1.05 * 50vw - 5.25px);
		margin: 2.5px;
	}

	.title {
		font-size: 1.8rem;
	}
}

@media screen and (min-width: 600px) {
    
    .services-wrapper {
        padding: 0 2.5px 5px 2.5px;
    }

	.box {
		width: calc(50% - 5px);
		height:  calc(1.05 * 50vw - 5.25px);
		margin: 2.5px;
	}

	.title {
		font-size: 1.9rem;
	}
}

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

	.box {
		width: calc(33.333% - 5px);
		height:  calc(1.05 * 33.333vw - 5.25px);
		max-width: 1400px;
		max-height: calc(1.05 * 1400px / 3 - 5.25px);
	}

	.title {
		font-size: 2.0rem;
	}
}


.labelling {
	width: 97%;
	margin: 30px auto 0 auto;
	font-size: 1.1rem;
}

.labelling h2 {
	font-size: 1.2rem;
	margin: 20px auto;
}


@media screen and (min-width: 400px) {
	
	.labelling {
		width: 70%;
		font-size: 1.4rem;
	}

	.labelling h2 {
		font-size: 1.4rem;
	}
}

@media screen and (min-width: 850px) {
	
	.labelling {
		width: 50%;
		font-size: 1.6rem;
	}

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



/**********************************************************************************
 ********************************** PRICES PAGE ***********************************
 *********************************************************************************/


.prices {
	margin: 30px auto 0 auto;
	text-align: center;
}

.prices-title {
	text-align: center;
	font-weight: bold;
	font-size: 2.2rem;
	margin-bottom: 20px;
}

.pricelist-cont {
	display: flex;
	flex-flow: row wrap;
	flex: 0 1 auto;
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;
	font-size: 1.2rem;
	margin: 0 auto;
	padding: 0;
	width: 100%;
}

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

	.pricelist-cont {
		font-size: 1.3rem;
	}
}

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

	.pricelist-cont {
		font-size: 1.3rem;
	}
}

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

	.pricelist-cont {
		font-size: 1.52rem;
	}
}

.price-warning {
	margin: 0 10px 10px 10px;
	width: 100%;
	max-width: 750px;
	font-size: 1.1rem;
	color: #6700DF;
	text-align: justify;
	line-height: 1.5;
}

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

	.price-warning {
		font-size: 1.1rem;
	}
}

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

	.price-warning {
		font-size: 1.2rem;
	}
}

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

	.price-warning {
		font-size: 1.35rem;
	}
}

.prices-col {
	width: 300px;
	margin: 0 auto;
	padding: 10px;
}

.list-notes {
	margin-top: 15px;
	width: 100%;
	line-height: 2.0;
	text-align: left;
	font-size: 1.0rem;
	font-weight: 400;
	color: var(--burgundy);
}


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

	.list-notes {
		margin-top: 15px;
	}
}

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

	.list-notes {
		font-size: 1.1rem;
	}
}

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

	.list-notes {
		margin-top: -5px;
		font-size: 1.1rem;
	}
}

.sub-head {
	font-size: 1.3rem;
	font-family: Roboto;
	font-weight: 500;
	line-height: 2.5;
}


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

	.sub-head {
		font-size: 1.4rem;
	}
}

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

	.sub-head {
		font-size: 1.5rem;
	}
}

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

	.sub-head {
		font-size: 1.8rem;
	}
}


.list {
	
}

ul.leaders {
    max-width: 40em;
    padding: 0;
    overflow-x: hidden;
    list-style: none;
	text-align: left;
}

ul.leaders li {
	line-height: 2.0;
}
	

ul.leaders li:before {
    float: left;
    width: 0;  
    white-space: nowrap;
    content:
 ". . . . . . . . . . . . . . . . . . . . "
 ". . . . . . . . . . . . . . . . . . . . ";
 }
 
 
ul.leaders span:first-child {
    padding-right: 0.33em;
	background-color: var(--magnolia);
}
ul.leaders span + span {
    float: right;
    padding-left: 0.33em;
	background-color: var(--magnolia);
}






/**********************************************************************************
 ********************************** REVIEWS ***************************************
 *********************************************************************************/

.reviews-cont {
	margin: 30px 0;
}

.reviews {
	position:  relative;
	display: block;
	height:  auto;
}


.revs-intro {
	margin: 100px auto 50px auto;
}

.revs-intro h1 {
	font-size:  2.5rem;
	font-weight: 600;
	color: var(--washblue);
	font-family: Roboto;
}


.revsshow {
 	width: 55%;
 	height: auto;
 	margin: 70px auto 0 auto;
 	font-style: italic;
}

.revs {
 	position: relative;
 	height: 12em;
 	width: auto;
}

.rev::before,
.rev::after {
 	display: block;
	position: absolute;
 	content: '';
 	width: 2em;
 	height: 2em;
 	font-size: 2.0rem;
	background-size: cover;
	background-repeat: no-repeat;
 	color: var(--washblue);
}

.rev::before {
	top: -1.5em;
	left: -3em;
	background-image: url(../images/icons/open-quotes.svg);
}

.rev::after {
 	bottom: -2em;
 	right: -3em;
	background-image: url(../images/icons/close-quotes.svg);
 }

.rev {
	position: absolute;
	width: auto;
	text-align: left;
	opacity: 0;
	-webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
 	font-size: 1.6rem;
}

.rev1 {
	z-index: 0;
}

.rev2 {
	z-index: 1;
}

.rev3 {
	z-index: 2;
}

.rev4 {
	z-index: 3;
}

.quot {
	width:  100%;
	text-align: left;
}


.sig {
	width: 100%;
	text-align: right;
	margin-top: 20px;
}


.revss-console {
	width: 85%;
	margin: 0 auto 0 auto;
	display: inline-block;
	color: blue;
	font-size: 2.0rem;
}

.revss-butt {
	width: 15px;
	aspect-ratio: 1;
	margin: 30px 20px;
	outline: none;
	border: 1px solid var(--skyblue);
	background-color: transparent;
	background-size: cover;
	background-repeat: no-repeat;
	border-radius: 50%;
}

@media and (min-width: 500px) {

	.revss-console {
		width: 85%;
	}

	.revss-butt {
		margin: 0 40px;
	}
}


.prev-rev:hover, 
.next-rev:hover {
	background-color: var(--skyblue);
}

.playing-rev {
	background-color: green;
	border: 1px solid green;
}

.paused-rev{
	background-color: red;
	border: 1px solid red;
}

.playing-rev:hover:hover {
	background-color: lightgreen;
	border: 1px solid lightgreen;
}

.paused-rev:hover {
	background-color: pink;
	border: 1px solid pink;
} 

.post-review {
	width:  auto;
	margin: 30px auto 0 auto;
}

.create-review {
	margin: 0 auto;
	width: auto;
	height: 40px;
	background-color: var(--washblue);
	color: white;
	border-radius: 20px;
	outline: none;
	border:  none;
	font-size: 1.8rem;
	padding: 0 1em;
}

.create-review:hover {
	background-color: var(--skyblue);
}

.rev-modal {
	display: none;
	margin: 0 auto;
	border-radius: 12px;
	border: 1px solid var(--washblue); 
	height: auto;
	width: 75%;
	outline: none;
	background-color: var(--washblue);
}

.rev-modal-content {
	display: inline-block;
	margin: 0;
	padding: 20px;
	height: auto;
	width: 100%;
	border-radius: 10px;
}

.rev-form-head{
	color: white;
	margin-bottom: 40px;
	font-size: 2.8rem;
	letter-spacing: 1px;
	font-family: Argesta;
	font-weight: 600;
}

.close-rev-modal-cont {
	text-align: right;
}

.rev-modal-close {
	color: white;
	width: 5%;
	padding-left:  90%;
	padding: 0;
	font-size: 28px;
	font-weight: bold;
}

.rev-modal-close:hover,
.rev-modal-close:focus {
	color: var(--turq);
	text-decoration: none;
	cursor: default;
}

.rev-entries {
	display: block;
	width: auto;
	padding: 0 10px;
	margin: 0 auto;
	text-align: center;
}

.reviewer-data {
	display: block;
	margin: 0 auto;
	width: 90%;
	max-width: 400px;
}

.rev-label {
	font-size: 1.5rem;
	color: var(--turq);
	text-align: left;
	width: 70%;
	display: inline-block;
	margin: 0 auto;
}

.ta-label {
	width: 100%;
}

.fname,
.sname,
.remail {
	padding: 0;
	height: 40px;
	border: none;
	background-color: var(--washblue);
	outline: none;
	text-align: center;
	color: white;
	font-size: 1.6rem;
	margin: 0 auto 3em auto;
	display: block;
	width: 70%;
	max-width: 300px;
	border-bottom: 1px solid var(--turq);
}

.remail {
	margin-bottom: 0;
}

.rev-field-block:hover > .rev-label {
	color: white;
}

.rev-field-block:hover > .rev-data {
	border-bottom: 1px solid white;
}

.rev-field-err {
	display:  block;
}

.rev-text {
	width: 90%;
	margin: 0 auto;
	max-width: 700px;
}

.rev-text:hover > .rev-label {
	color: white;
}

.rev-text:hover > .review {
	border: 1px solid white;
}

.review {
	width: 100%;
	height:  240px;
	padding: 10px 20px;
	color: white;
	font-size: 1.7rem;
	outline: none;
	background-color: var(--washblue);
	border: 1px solid var(--turq);
	border-radius: 12px;
	margin: 0.5em auto;
}

.review:hover {
	border:  1px solid var(--gold);
}

.review:focus {
	outline: none;
}


.rev-field-err,
.review-err,
.rev-submit-err {
	outline: none;
	border: none;
	color: #FF0000;
	display: block;
	margin: 0 auto;
	height: 40px;
	background-color: var(--washblue);
}

.review-err {
	min-height: 40px;
	width: 90%;
	border-radius: 3px;
	text-align: center;
	max-width: 800px;
	height: auto;
}

.rev-submit-grid {

}

button {
	outline: none;
	background-color: white;
	border-radius: 3px;
}

.rev-submit-butt {
	width: 150px;
	height: 45px;
	margin: 0;
	box-shadow: 0 12px 12px -6px rgba(0,0,0,0.5);
	transition: transform ease-in-out 250ms;
	color: white;
	font-size: 1.9rem;
	border-radius: 22px;
	outline: 0;
	font-family: Roboto;
	border: none;
	font-weight: 500;
	background-color: #9b4df9;
}

.rev-submit-butt:hover {
	background-color: var(--turq);
}

.rev-submit-butt:focus {
	box-shadow: 10px 12px 18px -10px rgba(0,0,0,0.5);
	transform: scale(1.125);
	font-size: 2.0rem;
	background-color: paleblue;
}

.rev-submit-err {

}





/**********************************************************************************
 ********************************** CONTACT PAGE **********************************
 *********************************************************************************/


.contact {
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: flex-start;
	align-items: flex-start;
	margin: 0 auto;
	padding: 0;
	font-size: 1.2rem;
	width: 100%;
	max-width: 1400px;
}

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

	.contact {
		font-size: 1.3rem;
	}
}

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

	.contact {
		font-size: 1.4rem;
	}
}

section p {
	margin: auto;
	line-height: 2.0;
	text-align: justify;
}


.contacttext {
	width: 400px;
	display: grid;
	align-items: center;
	margin: 30px 5px;
	font-size: 1.35rem;
}

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

	.contacttext {
		font-size: 1.45rem;
		margin: 30px 5px;
	}
}

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

	.contacttext {
		width: 100%;
		font-size: 1.55rem;
		margin: 40px 10px;
	}
}

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

	.contacttext {
		margin: auto 10px auto 0;
		font-size: 1.7rem;
		width: calc(45% - 55px);
	}
}


.contacttext table {
	margin: 0;
}

.contacttext h2 {
	margin: 10px 0;
	text-align: left;
	font-size: 1.45rem;
	color: var(--clr-theme2);
}

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

	.contacttext h2 {
		font-size: 1.55rem;
		margin: 15px 0;
	}
}

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

	.contacttext h2 {
		font-size: 1.7rem;
	}
}

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

	.contacttext h2 {
		font-size: 1.9rem;
		margin-top: 20px;
		color: var(--clr-theme2);
	}
}


.contacttext table {
	width: 100%;
}

.contacttext tr {
	text-align: center;
	margin: auto;
	line-height: 2.0;
}

.contacttext td {
	text-align: left;
}

.days,
.mode {
	width: 35%;
}

.phone,
.email, 
.hours {
	width: 65%;
}

.map {
	width: 100%;
	border-radius: 7px;
	height: 250px;
	border-radius: 15px;
}

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

	.map {
		width: 98%;
		height: 350px;
	}
}

@media screen and (min-width: 400px) {
	
	.map {
		width: 95%;
		height: 450px;
		margin: 0 auto;
	}
	
}

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

	.map {
		width: 55%;
		height: 581px;
		margin:  0 30px 0 0;
	}
}






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


footer{
	margin: 300px auto 0px auto;
	background: linear-gradient(to bottom, var(--washblue), var(--deepblue));
}

.footer-cont {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	margin: 0% 1.5%;
	padding: 0;
	width: 97%;
	 
	color: white;
}

footer a:link  {
	text-decoration: none;
	color: #FFFFFF;
}
footer a:visited  {
	text-decoration: none;
	color: #FFFFFF;
}
footer a:hover  {
	text-decoration: none;
	color: var(--turq);
}
footer a:active  {
	text-decoration: none;
	color: #FFFFFF;
}

footer h2 {
	color: #FFFFFF;
	font-size: 1.4rem;
	font-weight: normal;
	text-align: center;
	padding-bottom: 12px;
	border-bottom: solid 1px var(--turq);
}

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: left;
}

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

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

}

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

@media screen and (min-width: 850px) {
	.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: 25px;
	
	height: 25px;
}

.mentions-cont a :hover {
	color: var(--gold);
}

.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: 50%;
}

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

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

.reg-off-head {
	font-weight: 600;
	line-height: 2.0;
}

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

.off-address::before,
.off-hours::before,
.off-phone::before,
.off-email::before {
	content: '';
	display: inline-block;
	margin: 0 1.0em 0 0;
	height: 1.2em;
	width: 1.2em;
    background-repeat: no-repeat;
	background-size: 100%;
	background-position: center center;
}

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

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

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

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

.copyright {
	margin-top: 30px;
}

.copy-content {

}

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

.web-designer{
	color: white;
}

.web-designer:hover {
	color: var(--straw);
}

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

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


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

tr {
	text-align: center;
}

td {
	width: 100%;
	height: auto
}

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

.month-head {
	margin-bottom: 5px;
	font-size: 1.2rem;
	text-align: center;
}

.month-year {
}

.year-chg, .month-chg {
	background-color: inherit;
	color: #FFFFFF;
	border: none;
	outline: none;
	padding: 4px;
	margin: 0px;
	font-size: 1.6rem;
}

.year-chg:hover, .month-chg:hover {
	color: var(--turq);
}

.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: white;
	border: 1px solid var(--turq);
	border-radius: 6px;
	margin: 0;
	padding: 0;
}

.date-entry::placeholder {
	color: white;
	font-style: italic;
	font-size: 1.2rem;
}

.date-entry:hover {
	background-color: #3A80EE;
}

.find-date {
	grid-area: finddate;
	height: 25px;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 600;
	background-color: var(--turq);
	color: white;
	border: none;
	border-radius: 12px;
	margin: 0;
	padding: 0;
	outline: none;
}

.find-date:hover {
	background-color: #8DD9F7;
}

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

.date-info {
	grid-area: dateinfo;
	height: 25px;
	background-color: inherit;
	color: white;
	font-size: 1.0rem;
	line-height: 2.0;
	border: 1px solid inherit;
	border-radius: 2px;
	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: #FFFFFF;
	font-style: italic;
	font-size: 0.9rem;
	text-align: center;
}

.todayButt {
	background-color: var(--turq);
	color: white;
	text-align: center;
	font-size: 1.2rem;
	font-weight: 800;
	width: 22%;
	height: 25px;
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	border-radius: 12px;
}

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

.back {
	float: left;
} 

.adv {
	float: right;
}

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

.day {
	font-size: 1.2rem;
	width: 15%;
	height: 25px;
	padding: 0;
	text-align: center;
	border-radius: 6px;
}

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

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

.sunday {
	color: var(--gold);
}

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

.today:hover {
	background-color: var(--turq);
}

.today:focus {
	outline: none;
}

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

.red-letter {
	color: #FF0000;
	position: relative;
}

.event-detail {
    visibility: visible;
	height: 25px;
    color: #FFFFFF;
	font-style: italic;
}

.err {
	border: 1px solid red;
}






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

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

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

.hidden {
	display: none;
}

.visible {
	display: flex;
}

.shown {
	opacity:  1.0;
}