/*---  GENERAL --- */

		:root {
			/*--grey: #999;*/
			--grey: #3D5520;
			/*--dark: #333;*/
			--dark: #0D0D0B;
			/*--light: #EFEFEF;*/
			--light: #C4CF98;
			/*--lightgrey: #bcbcbc;*/
			--lightgrey: #9CAE77;
			--bright: #FFF;
			--contrast: #D458AD; /*PINK*/
			--lightcontrast:  #F7ADDD; /*#ed91D1;*/
			/*--contrast: #F0C302;  DARK YELLOW */
			/*--contrast: #9AA61E; YELLOW GREEN*/
		}

		*,
		*::before,
		*::after {
			box-sizing: border-box;
			margin: 0;
		}
		
		body{
			font-size: 18px;
			font-weight: 400;
			font-family: 'Raleway', sans-serif;
			color: var(--dark);
		}

		/* --- LAYOUTS --- */

		.container {
			max-width: 1000px;
			margin: 0 auto;
		}

		.alt-nav-container {
			position: relative;
			padding: 0 2em;
			z-index: 100;
		}

		.header {
			/*background: linear-gradient(to bottom, rgba(40,40,40, 0.8), rgba(40,40,40, 0.7)),  url('../images/background1.jpg') no-repeat;*/
			background: linear-gradient(to bottom, rgba(61,85,32, 0.8), rgba(61,85,32, 0.9), rgba(61,85,32, 0.8)),  url('../images/background1.jpg') no-repeat;
			background-position: center;
			background-size: cover;
			/*background: var(--grey);*/
			color: var(--bright);
		}

		.home {
			display: flex;
			flex-direction: column;
			align-items: center;
			/*Added to change to a fixed navigation menu*/
			margin-top: 7rem;
		}

		/* --- TYPOGRAPHY --- */

		h1, h2, h3, h4, h5 {
			font-weight: 400;
			text-align: center;
			/*font-family: 'Playfair Display', serif;*/
		}

		h1, h2, h3, h4, h5, p, ul {
			margin: 1em;
		}

		p, li {
			line-height: 	1.75em;
		}

		h2 {font-size: 2.25rem;}
		h3 {font-size: 1.45rem;}


		.address-title {
			text-align: left;
			font-size: 1.25rem;
			font-weight: 600;
			margin-bottom: 	0;
		}

		.address-text {
			margin-top: 0;
		}

		.home h1 {
			position: relative;
		}

		.home p {
			max-width: 700px;
		}

		.home h1 span {
			display: block;
			font-size: 1.65rem;
			color: var(--bright);
		}

		.home h1 span::before {
			content: '';
			position: absolute;
			width: 12em;
			height: 2px;
			background: var(--lightgrey);
			top: 1.5em;
		}

		.fees-subtitle {
			font-size: 1.75rem;
			font-weight: 400;
		}

		.fees-sub-subtitle {
			font-size: 1.5rem;
			font-weight: 300;
		}

		.about {
			background: var(--light);
			/*clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);*/ /*CHANGES*/
			color: var(--dark);

			/*CHANGES*/
			/*position: relative;
			z-index: -2;*/
		}

		.image1 {
			background: linear-gradient(to bottom, rgba(248,249,250, 0.4), rgba(248,249,250,0.75), rgba(248,249,250,0.7)),  url('../images/background2.jpg') no-repeat;
			background-size: cover;
			background-position: center;
			padding: 2em;
			margin-bottom: 1em;
			/*clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);*/
		}

		.image2 {
			background:var(--lightcontrast);
			background: linear-gradient(to bottom, rgba(248,249,250, 0.8), rgba(248,249,250,0.5), rgba(248,249,250,0.5)),  url('../images/background3s.jpg') no-repeat;
			background-size: cover;
			background-position: center;
			padding: 2em;
			margin-bottom: 1em;
		}

		.contact {
			background: var(--dark);
			color: var(--light);
		}

		.important {
			display: none;
		}



		/* --- UTILTIES --- */
		.padding-sections {
			padding: 2em;
		}

		.header {
			padding-top: 0.25em;
		}

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

		.banner-text {
	    	margin-top: -2.2em;
	    	margin-left: 50px;
        	/*background: var(--dark);/*rgba(0,0,0,0.5);*/*/
        	padding: 0.3em 0;
        	width: 65%;
        	text-align: left;
        	/*border-top: 2px solid var(--grey);*/
	        /*border-right: 2px solid var(--grey);
	        border-left: 2px solid var(--grey);
	        border-bottom: 2px solid var(--grey);*/
	    }

		.flex-row {
			display: block;
			/*flex-direction: row;*/
		}

		.flex {
			display: flex;
			flex-direction: column;
			/*justify-content: center;*/
			align-items: center;
		}

		.small-font {
			font-size: 0.8em;
		}

		/*CHANGES*/
		.therapy {
			/*position: relative;
			z-index: -2;*/
		}
		/*CHANGES*/
		.fees-location {
			/*position: relative;
			z-index: -3;*/
		}

		.therapy-list li {
			list-style-type: none;
			position: relative;
		}

		.therapylist li a:focus {
			color: var(--lightcontrast);
		}

		.therapy-list li::before {
			content: '';
			position: absolute;
			top: 5px;
			left: -25px;
			width: 0; 
			height: 0;
			border-left: 10px solid var(--dark);
			border-top: 7px solid transparent;
			border-bottom: 7px solid transparent;
		}

		.therapy-list li:hover::before {
			border-left: 10px solid var(--contrast);
			border-top: 7px solid transparent;
			border-bottom: 7px solid transparent;
		}

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

		.logo {
			width: 200px;
			margin: 1em;
		}

		.logo-small picture {
			width: 150px;
			margin: 1em 1.25em;
		}

		.padding {
			margin: 2em 0;
			display: flex;
			gap: 1.5rem;
		} 

		.text-link-light {
			text-decoration: underline;
			color: var(--lightgrey);
			font-weight: 600;
			cursor: pointer;
		}

		.text-link-dark {
			text-decoration: underline;
			color: var(--dark);
			font-weight: 600;
		}

		a:hover,
		a:focus {
			color: var(--contrast);
		}



		.map-modal {
			cursor: pointer;
			margin-left: 1em;
		}

		.map-modal:hover,
		.map-modal:focus {
			color: var(--contrast);
		}

		.show-map {
			display: block;
			position: fixed;
			top: 5rem;
			left: 10vw;
		}

		.close {
			position: absolute;
			top: 10px;
			right: 10px;
			width: 25px;
			height: 25px;
			background: red;
			border-radius: 50%;
			display: grid;
			align-items: center;
			justify-content: center;
			color: white;
			padding-bottom: 8px;
			cursor: pointer;
		}

		.close:hover,
		.close:focus {
		    opacity: 65%;
		}

		.close:before {
		    content:'';
		    display: block;
		    position: absolute;
		    top: 3px;
		    left: 11px;
		    width: 4px;
		    height: 20px;
		    background: white;
		    transform: rotate(45deg);
		    border-radius: 1px;
		}

		.close:after {
		    content:'';
		    display: block;
		    position: absolute;
		    top: 3px;
		    left: 11px;
		    width: 4px;
		    height: 20px;
		    background: white;
		    transform: rotate(-45deg);
		    border-radius: 1px;
		}

		iframe {
		  min-width: 80vw;
		  min-height: 80vh;
		}

		.hidden {
			display: none;
		}

		.title {
			margin-top: 1.5em;
		}

		
		/* --- COMPONENTS --- */

		/* Main navigation*/

		.navigation {
/*			margin-bottom: 1rem;*/
			/*Added to change to a fixed navigation menu*/
			position: fixed;
			min-width: 1000px;
			background: rgba(0,0,0,0.8);
			top: 0;
			left: calc((100vw - 1000px)/2 - 0.5em);
			z-index: 100;
		}

		.nav-list {
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding: 0;
			margin: 0.5em;
		}
		.nav {
			list-style-type: none;
			/*padding: 0.25rem 0.75rem;*/
			padding: 0.25vh 1vw;			
		}

		.nav a {
			text-decoration: none;
			color: var(--light);
		}

		.nav-link {
			position: relative;
		}

		*:focus {
			outline: none;
		}

		.nav-link:hover::before,
		.nav-link:focus::before {
		    content:'';
		    position: absolute;
		    display: block;
		    top: -4px;
		    left: 0px;
		    width: 100%;
		    height: 2px;
		    background: var(--light);
		    opacity: 0.5;
		}

		.nav-link:hover,
		.nav-link:focus {
			color: var(--bright);
		}

		/* Hamburger */
		.nav-container {
			display: block;
			cursor: pointer;
			width: 51px;
			height: 40px;
			display: grid;
			align-items: center;
			margin: 20px 0;

			/*CHANGES*/
			position: fixed;
			background: rgba(0,0,0,0.5);
			padding: 6px;
			border-radius: 6px;
		}

		.nav-container:focus {
			background: rgba(0,0,0,0.4);
		}

		.hamburger {
			display: block;
			width: 40px;
			height: 3px;
			background: var(--bright);
			position: relative;
			cursor: pointer;
			/*box-shadow: 2px 2px 4px 1px var(--dark);
			z-index: 10;*/	
		}

		.hamburger::before,
		.hamburger::after {
			content: '';
			display: block;
			width: 40px;
			height: 3px;
			background: var(--bright);
/*			box-shadow: 2px 2px 4px 1px var(--dark);
*/			position: absolute;
			
		}

		.hamburger::before {
			top: -10px;
			left: 0;
		}

		.hamburger::after {
			top: 10px;
			left: 0;
		}

		/* alternative navigation (overlay) */

		.alt-navigation {
			/*display: fixed;*/
			position: fixed; /*CHANGES*/

			top: 15vh;
			width: 100vw;
			background: rgba(0,0,0,0.8); /*rgba(61,85,32,0.9);*/

			margin-left: -2em;
			padding: 0.5em;
		}

		.alt-nav-list {
			display: flex;
			flex-direction: column;

			padding: 0;
		}

		.alt-nav {
			margin: 0.25em 0;
			list-style-type: none;

		}

		.alt-nav-link {
			display: block;
			width: 90%;
			height: 2em;
			padding: 0.3em;
			border-bottom: 1px solid white;
			color: var(--bright);
		}

		.alt-nav-link:hover,
		.alt-nav-link:focus {
			background: var(--lightcontrast);
			color: var(--dark);
		}

		/* Quotes */

		.quotes {
			
		}

		.quote {
			font-size: 1.2rem;
			max-width: 550px;
			margin: 1em auto;
			position: relative;
			padding: 1em 2em;
			color: var(--dark);
			line-height: 2rem;
			/*z-index: -1;*/
		}

		.quote span {
			font-size: 0.9rem;
			display: block;
			text-align: right;
		}

		.quote::before {
			/*content: open-quote;*/
			/*content: '';*/
			content: url('../images/quote_.svg');
			
			position: absolute;
			top: 8px;
			left: -20px;
			width: 50px;
			height: 50px;

		}

		/* Buttons */

		.btn {
			border: none;
			font-size: 1rem;
			padding: 0.75rem 1.55rem;
			margin-top: 1.5em;
			border-radius: 10px;
			outline: 1px solid var(--light);
			background: none;
			color: var(--light);
		}

		.dark {
			outline: 1px solid var(--dark);
			background: none;
			color: var(--dark);
			display: block;
			margin: 1em 0 3em 0;
			max-width: 30%;
			
			/*margin: 0 auto;*/
			/*margin-top: 0.75em;*/
			text-align: center;
		}

		.btn:hover,
		.btn:focus {
			opacity: 0.7;
			color: var(--dark);
			background: var(--lightcontrast);
		}

		/* Round Images */

		.image-round {
        	width:200px;
        	margin: 0 auto 0 auto;
        	/*padding: 1.5em 0;*/
        }

        .image-round img {
        	width:200px;
        	border-radius: 50%;
        	/*border: 6px solid var(--bright);*/
        	box-shadow: 0 0 0 6px var(--bright), 0 0 0 8px var(--lightgrey);
        }

        .flip {
        	-webkit-transform: scaleX(-1);
  			transform: scaleX(-1);
        }

        .banner {
        	width: 65%;
	        /*border-top: 2px solid var(--grey);
	        border-right: 2px solid var(--grey);
	        border-left: 2px solid var(--grey);*/
	        /*border-bottom: 2px solid var(--grey);*/
        }

        .overlap-top {
			margin-top: -40px;
			
		}

        /* Items */

        .items {
				display: block;
				position: relative;
				padding: 2em;
				/*z-index: -6;*/
			}

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

        .item {
        	background: var(--dark);
        	color: var(--light);
        	border-radius: 16px 0 16px 0 ;
        	padding: 1em;
        	margin: 1em auto;
        	font-size: 0.9em;
        	font-weight: 300;
        	width: 90%;
        }

        .fee-cards {
        	display: flex;
        	flex-direction: row;
        	flex-wrap: wrap;
        	justify-content: center;
        	gap: 1em;
        }

        .fee-card {
        	background: rgba(255,255,255,0.4);
        	color: var(--dark);
        	border-radius: 16px 0 16px 0 ;
        	padding: 1em;
        	/*margin: 1em auto;*/
        	font-size: 0.9em;
        	font-weight: 300;
        	flex: 1;
        	flex-grow: 0;
        	min-width:280px;
        	display: flex;
        	flex-direction: column;
        	align-items: center;
        }

        .fee-card-title {
        	font-size: 1.15rem;
        	font-weight: 600;
        }

        .fee-amount {
	        	font-size: 1.75em;
	        	margin: 0;
	        }

        .fee-text {
        	text-align: center;
        }

        /*  Form  */

        .form {
        	max-width: 600px;
        	margin: 0 auto;
        	display: flex;
        	flex-direction: column;
        	justify-content: center;
        	gap: 0.5em;
        	
        }

        .form-input,
        .form-text,
        .select {
        	width: 100%;
        	font-size: 1.1rem;
			padding:0.3em;
			margin-bottom: 0.25em;
			font-family: 'Raleway', sans-serif;
			padding: 18px;
        }

        .form-text {
        	height: 150px;
        }

        .radio {
        	width: 25px;
        	height: 25px;
        	margin-bottom: 23px;
        }
        .no-margin label {
        	padding: 0px 23px 23px 10px;
        }

        .no-margin {
        	display: flex;
        	align-items: center;
        }

        .invisible {
        	position: absolute;
        	left: -1000px;
        }

        .select {
		    border: 1px solid var(--grey);
		    /*font-size: 1rem;
		    width: 100%;
		    padding:0.3em;
		    margin-bottom: 0.25em;*/
		    background: white;
		    border-radius: 10px;
		    border: none;
		}

        .submit {
        	max-width: 30%;
			
			margin: 0 auto;
			margin-top: 0.75em;
        }

        .footer p {
        	font-size: 0.9rem;
        	/*font-weight: 600;*/
        	color: var(--dark);
        }

        .top {
        	width: 30px;
        	height: 30px;
        	background: rgba(0,0,0,0.4);
        	color: var(--bright);
        	position: fixed;
        	bottom: 20px;
        	right: 10px;
        	border-radius: 50%;
        	box-shadow: 0 0 0 3px var(--bright);
        	display: grid;
        	align-items: center;
        	justify-content: center;
        	font-weight: 900;
        	font-size: 2rem;
        	overflow: hidden;
        	cursor: pointer;
        }

        .top:hover,
        .top:focus {
        	background: rgba(0,0,0,0.6);
        }

        /* Location cards */

        .location-cards {
        	display: block;
        	padding: 2em;
        }

        .location-card {
        	/*outline: 3px solid var(--grey);*/
        	/*background: var(--light); */
        	background: var(--lightcontrast);
        	padding: 1em;
        	margin-bottom: 1em;

        	border-radius: 16px 0 16px 0 ;
/*        	font-size: 0.9em;*/
        	font-weight: 300;
        	width: 100%;
        }

        /*  ------------   4.1 Action  ------------ */

		.action {
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    flex-direction: column;
		    text-align: center;
		    color: var(--bright);
		    background: var(--contrast);
		    cursor: pointer;

		    /*CHANGES*/
		    /*position: relative;
		    z-index:-1;*/
		}

		.action:hover,
		.action:focus {
		    background: var(--dark);
		    box-shadow: 0 0 0 3px var(--bright), 0 0 0 6px var(--dark);
		    color: var(--light);
		}

		.action:active {
		    opacity: 50%;
		}

		.action-title {
		    font-size: 3.5rem;
		    font-family: 'Amatic SC', cursive;
		    font-weight: 400;
		}

		.action-txt {
		    font-size: 1rem;
		    font-weight: 400;
		}

		.circle {
		    box-shadow: 0 0 0 3px var(--bright), 0 0 0 6px var(--contrast);
		    position: relative;

		}

		.image {
		    width: 195px;
		    height: 195px;
		    /*border: 4px solid var(--bright);*/
		    overflow: no-display;
		    margin: 0.5em auto;
		    border-radius: 50%;
		    position: relative;
		}

		.no-margin {
			margin-top: 0.2em;
			margin-bottom: 0.2em;
		}

		/* FOR RESOURCES PAGE*/
		.shade {
			background: var(--lightgrey);
			padding: 1em 0;
			margin-top: 3em;
		}

		.darker {
			color: var(--dark);
		}


		/* --- MEDIA QUERIES ---*/

		@media only screen and (min-width: 761px) {
			.items {
	        	display: flex;
	        	flex-wrap: wrap;
	        	justify-content: center;
	        }

	        .item {
	        	width: 46%;
	        }

	        .nav-container {
				display: none;
			}      

	        .location-cards {
	        	display: flex;
	        	gap: 1em;
	        }

	        .flex-row {
				display: flex;
				flex-direction: row;
			}
		}

		@media only screen and (max-width: 760px) {
			.navigation {
				display: none;
			}

			

			.form {
				min-width: 100%;
			}

			.banner {
	        	width: 95%;
	        	margin-top: 90px; /*CHANGES*/
	        	box-shadow: none;
	        	/*box-shadow: 0 0 0 6px var(--grey), 0 0 0 7px var(--lightgrey);*/
	        }
	        
	        .banner-text {
	        	width: 95%;
	        }

	        .top {
	        	display: none;
	        }

	        /*CHANGES*/
	        .home h1 {
	        	font-size: 2rem;
	        }
	        .home h1 span {
				font-size: 1.25rem;
			}

			.home h1 span::before {
				display: none;
			}
		}

		@media only screen and (max-width: 760px) {
			.banner-text {
	        	margin-top: 0.5em;
		    	/*margin-left: 0;*/
	        	padding: 0;
	        	width: 95%;

	        	text-align: center;
		        }
		    .banner {
		    	max-width: 500px;
		    }

		    .home {
				/*Added to change to a fixed navigation menu*/
				margin-top: 1rem;
			}

		}