/* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap'); */
/*@import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Roboto:wght@300;500&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Ovo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Roboto:wght@300;500&display=swap');
/* https://fonts.google.com/specimen/DM+Sans */

:root {
	--bold: 500;
	--bolder: 700;
	--normal: 400;
	--light: 300;
	--blue: #10437d;
	--blueHighlight: #1a67ae;
}

html {
	font-family: 'DM Sans', Roboto, Helvetica, Arial, sans-serif;
	font-weight: 300;
	min-height: 100vh;
	background-image: url(images/birds-1280.jpg);
	background-size: cover;
	background-position: right center;
	background-attachment: fixed;
	text-rendering: optimizeLegibility;
	font-size: 18px; /* 20 */
}



body {
	margin: 0px;
	min-height: 100vh;
	display: flex;
	flex-flow: column nowrap;
}

#main {
	display: flex;
	flex-flow: column nowrap;
	min-height: 100vh;
}

/* Begin Block Widths */

.content {
	max-width: 1200px; /* 1280 */
/* 	margin: auto; */
}

.nav nav {
	max-width: 1200px;
}


header {
	width: 1200px;
	max-width: 1200px;
}

footer {
	max-width: 1200px;
}

/* End Block Widths */


header h1 {
	font-size: 50px;
	margin: 0px;
}

header h2 {
	margin: 0px;
	font-size: 17px;
	font-weight: var(--normal);
}


main {
	font-weight: var(--normal);
	color: #444;
}

main strong,
main em {
	color: #222;
}


h1 {
	font-family: 'Ovo';
	font-weight: 400;
}

h2 {
	font-size: 11px;
}


h2, h3, h4, h5, h6{
	font-family: 'DM Sans';
/* 	font-weight: var(--bold); */
	font-weight: 400;
}

h3 {
/* 	text-decoration: underline; */
	font-size: 48px;
/* 	font-weight: var(--bold); */
	margin: 0px 0px 10px 0px;

}

h3 {
/* 	background-image: url(images/birds/bird3.png); */
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
}


h3 span {
	border-bottom: 5px solid var(--blue);
}


p, li {
	line-height: 150%;

}

a {
	color: var(--blue);
}

strong, b {
/* 	font-weight: var(--normal); */
	
}

address {
	font-style: normal;
}



.columns {
	display: grid;
	grid-template-columns: 1fr 350px;
	grid-gap: 40px;
}

footer .columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 40px;
}


.columns > img {
	max-width: 100%;
}

.columns img.aboutpic {
	width: 350px;
	height: 367px;
	object-fit: cover;
	object-position: center center;
}

header {
	flex: 0 0 auto;
	color: white;
	margin: 0px auto;
	box-sizing: border-box;
	padding: 60px 20px 20px 20px;
/* 	background-color: red; */
	text-align: right;
	font-family: 'DM Sans';
}


#content {
	flex: 1 0 auto;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	
}

.nav {
	background-color: white;
	position: sticky;
	top: 0;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
}

.nav nav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: stretch;
	font-weight: 500;
	box-sizing: border-box;
	margin: auto;
}

.nav nav a {
	flex-grow: 1;
	flex-shrink: 1;
	box-sizing: border-box;
	background-color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	padding: 5px 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.nav nav a:hover {
	color: white;
	background-color: var(--blueHighlight);
}

.nav nav .active img,
.nav nav a:hover img {
	filter: invert(100%);
}

.nav nav a.active {
	/* 	margin-right: 0px; */
/* 	background-color: var(--blue); */
	color: white;
	background-color: var(--blueHighlight);
	/* background-image: url(images/birds/bird1.svg); */
	background-size: auto 50%;
	background-position: left center;
	background-repeat: no-repeat;
}

.nav nav img {
	height: 50px;
	padding: 2px 10px;
}


ul {
	list-style-type: square;
}




main {
/* 	flex: 1 0 80%; */
	box-sizing: border-box;
/* 	padding: 40px; */
	box-sizing: border-box;
}


#home .columns a {
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	padding: 14px 20px 12px 20px;
	transition: all 0.25s;
	background-color: var(--blue);
	color: white;
	font-size: 12px;
	position: relative;
}

#home .columns a:hover {
	background-color: #1a67ab; /* #3785c2 */

}

#home .columns a img {
	position: absolute;
	top: -27px;
	right: -10px;
}

#home .columns a:hover img {
	animation-name: hop;
	animation-duration: 3s;
	animation-iteration-count: infinite;
}

@keyframes hop {
	0% {
		transform: translateY(0px);
	}
	
	5% {
		transform: translateY(-10px);
	}

	10% {
		transform: translateY(0px);
	}

}






section {
	background-color: white;
	padding: 30px;
	margin: 0px 0px 20px 0px;
	
}


section#home .columns > div{
	display:  flex;
	flex-flow:  column nowrap;
	justify-content:  center;
}




section#about {
	display: flex;
	flex-flow: row wrap;
}

section#about > h3 {

}

section#about > div {
	
}

section#about > aside {
	width: 25%;
}


#counselling ul {
	columns: 2;
	column-gap: 40px;
}



section nav {
	width: 100%;
	box-sizing: border-box;	
	margin-top: 20px;
	padding: 20px 0px;
	border-top: 4px solid #eeeeee;

	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

section nav a {
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	padding: 14px 20px 12px 20px;
	transition: all 0.25s;
}

section nav a:hover {
	background-color: var(--blue);
	color: white;
}

section nav a.prev::before {
	content: '\25C0';
	margin-right: 10px;
	line-height: 100%;
}

section nav a.next::after {
	content: '\25B6';
	margin-left: 10px;
	line-height: 100%;
}




aside {
	flex: 0 0 25%;
}



figure {
	display: flex;
	flex-flow: column nowrap;
/* 	border: 20px solid white; */
/* 	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); */
	margin: 0px;
}

figure img {
	max-width: 100%;
}

figure figcaption {
	text-align: right;
	font-size: 16px;
	max-width: 100%;
	box-sizing: border-box;
/* 	padding: 20px; */
	padding: 10px;
/* 	background-color: white; */
	font-size: 14px;
}

figure figcaption strong {
	font-size: 150%;
}



blockquote {
/* 	font-size: 24px; */
/* 	background-color: rgba(0, 0, 0, 0.1); */
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
/* 	background-image: url(images/birds-1280.jpg); */
	background-position: right top;
	margin: 0px;
	margin-top: 40px;
	padding: 40px;
/* 	color: white; */
	position:  relative;
}

blockquote p {
	margin: 0px;
}

#counselling blockquote p,
#supervision blockquote p {
	margin: 10px 10px;
	font-style: italic;
}



blockquote .cite {
	color: #aaa;
}

blockquote img {
	position:  absolute;
	top:  0px;
	right:  0px;
	width:  60px;
	height:  60px;
	transform:  translateX(25px) translateY(-35px);
}



.footer {
	background-color: #161616;
	background-image: linear-gradient(#333, #111);

}

footer {
	margin: auto;
	padding: 20px;
	
	font-size: 14px;
	
/* 	flex: 0 0 auto; */
	color: white;
/* 	vertical-align: middle; */
	
}

footer a {
	color: white;
}

footer .acknowledgement img {
	height: 29px;
	vertical-align: middle;
}

footer .acknowledgement img:last-child {
	height: 32px;
}


footer ul {
	list-style-type: none;
	padding-left: 0px;
}

.hr, 
footer hr {
	margin: 20px auto;
	border: none;
	background-color: #444;
	height: 1px;
}





.location {
/*	display: flex;
	flex-flow: row nowrap;
*/
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;

}



.location .details {
/* 	flex: 0 1 auto; */
/* 	display:  flex; */
/* 	flex-flow:  column nowrap; */
/* 	justify-content:  space-evenly; */
}

.location .details address {
	margin-top: 50px;
}


.location iframe {
/* 	flex: 0 0 800px; */
/* 	margin-left: 20px; */

	width: 600px;
	height: 450px;
	width: 100%;

}

.location .bird {
	position: absolute;
	right: -25px;
	bottom: -50px;
	width: 60px;
	height: 60px;
}

.bird {
	width: 50px;
	pointer-events: none;
}





#counselling #bird-row {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
}

#counselling #bird-row .bird {
 	transform: translateY(28px) translateX(-135px);
}


#contactform {
	display: flex;
	flex-flow: row wrap;
}

#contactform label {
	padding: 10px 0px;
	box-sizing: border-box;
	width: 100%;
}

#contactform label#contactname,
#contactform label#contactemail {
	flex-grow: 1;
	flex-basis: 25%;
}

#contactform label#contactname {
	margin-right: 20px;
}

#contactform input,
#contactform textarea,
.iris button#iris-btn-send {
	font-size: 18px;
	padding: 10px;
}

#contactform textarea {
	min-height: 200px;
}

#contactform input[type="text"],
#contactform textarea {

	margin: 0px;
	box-sizing: border-box;
	border: 2px solid black;
	display: block;
	width: 100%;
}




#contactform input[type="submit"], .iris button#iris-btn-send {
	display: block;
	border: none;
/* 	margin: 10px; */
	width: 100%;
	transition: background-color 0.5s;
}

.iris button#iris-btn-send {
	margin-bottom: 20px;
}

#contactform input[type="submit"]:hover,
.iris button#iris-btn-send:hover {
	cursor: pointer;
	background-color: #333;
	background-color: black;
	color: white;
}



/* Start Contact Form */


#contact-page {

}


.validation-message {
	display: inline-block;
}



label {
/* 	display: block; */
}

.field,
.g-recaptcha {
/* 	margin: 0px 0px 20px 0px; */
}

.g-recaptcha  {
/* 	border: 1px solid pink; */
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	margin: 10px 0px;
	text-align: center;
}

.g-captcha > div {
	width: 100%;
}

.g-captcha > div > div {
	overflow: visible;
}


.field:hover {
	/*background-color: pink;*/
}

input, textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 15px;
	font-size: 1em;
	border: 1px solid #A1A1A1;
	font-family: 'DM Sans', Roboto, Helvetica, Arial, sans-serif;
}
		
button#send-message {
	padding: 12px 60px;
	background-color: #125999;
	border: none;
	color: white;
	font-size:1em;
	font-weight: 600;
	cursor: pointer;
}

button#send-message[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

button#send-message {
	cursor: wait;
}


#mail-status {
	padding: 12px 20px;
	width: 100%;
	display:none; 
	font-size: 1em;
	font-family: "Georgia", Times, serif;
	color: rgb(40, 40, 40);
}
.error { background-color: #F7902D;  margin-bottom: 40px; }
.success { background-color: #48e0a4; }


/* End Contact Form */

.iris {
/*	-webkit-font-smoothing: antialiased;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: .9em;
	color: #1e2a28;
	width: 740px;
	margin: 0 auto;
	padding: 0px 20px 20px 20px;*/
}


input[type=text].iris-input, .iris input, .iris textarea, .iris select,
	.iris-input, .iris-select {
/*	box-sizing: border-box;
	width: 200px;
	height: initial;
	padding: 8px 5px;
	border: 1px solid #9a9a9a;
	border-radius: 3px;*/
}

.iris input[type="checkbox"] {
	width: auto;
}

.iris input[type="radio"] {
	width: auto;
}

.checkboxes .checkbox {
	display: inline-block;
	padding-right: 20px;
	white-space: nowrap;
}

.checkboxes input {
	width: auto;
	vertical-align: middle;
	margin-left: 0;
	display: initial;
	opacity: initial;
	position: inherit;
	pointer-events: initial;
}

.checkboxes .checkbox-label {
	vertical-align: middle;
	color: #666;
}

.iris textarea, .iris-textarea {
/* 	width: 300px; */
}

.iris select, .iris-select {
	display: initial;
	height: 30px;
	background-color: #fff;
	padding: 2px 5px;
}

.iris button {
/* 
	width: 100px;
	padding: 6px 0px;
 */
/* 	font-size: 1em; */
/*	cursor: pointer;
	border-radius: 3px;
	background: #1871e6;
	color: #FFF;
	margin: 0px 20px 5px 0;
	border: #1469d8 1px solid;*/
}

.iris button:focus {
	outline: none;
}

.iris .iris-row {
/* 	margin-bottom: 20px; */
/* 	padding-top: 15px; */
}

#iris-message {
	padding: 6px 20px;
	display: none;
	font-size: 1em;
	color: rgb(40, 40, 40);
	box-sizing: border-box;
	margin: 0px;
	border-radius: 3px;
	width: 100%;
	overflow: auto;
}

.iris .error {
	padding: 6px 20px;
	border-radius: 3px;
	background-color: #fb817c;
	border: 1px solid #e46b66;
}

.iris #iris-message.success {
	background-color: #10437d;
	color: white;
	border: none;
}

#iris-loader-icon {
	color: #1871e6;
	font-weight: bold;
	padding: 6px 20px 6px 0;
	display: none;
	vertical-align: middle;
}

#iris-loader-ack-icon {
	color: #1871e6;
	font-weight: bold;
	padding: 6px 20px 6px 0;
	display: none;
	vertical-align: middle;
}

#iris-btn-send:hover {
/* 
	background: #1363cc;
	border: #105bbd 1px solid;
 */
}

.iris .validation-message {
	color: #e20900;
	display: inline-block;
}

.iris .label {
/* 	margin-bottom: 3px; */
}

.iris-form {
}

.g-recaptcha {
/* 	padding-top: 15px; */
}

.iris .display-none {
	display: none;
}

.icon-add-more-attachment {
	cursor: pointer;
	font-style: italic;
	font-size: .9em;
}

.attachment-row {
	margin-bottom: 5px;
}

.delete-attachment {
	margin-left: 10px;
	display: none;
	cursor: pointer;
	cursor: pointer;
	font-style: italic;
	font-size: .9em;
}

.inline-block {
	display: inline-block;
}

@media all and (max-width: 780px) {
	.iris {
		width: auto;
	}
}

@media all and (max-width: 400px) {
	.iris {
		padding: 0px 20px;
	}
	.iris h1 {
		font-size: 1.2em;
	}
	.iris input, .iris textarea, .iris select {
		width: 100%;
	}
	.iris-form {
		border: none;
		padding: 0;
	}
	#rc-imageselect, .g-recaptcha {
		transform: scale(0.8);
		-webkit-transform: scale(0.8);
		transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
	}
}


@media all and (max-width: 1024px) {
	main {
		padding: 0px;
	}
	
	
}

@media all and (max-width: 900px) {
	.columns,
	#contact .location {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
	
	figure {
		align-items: center;
	}

	#home figure figcaption {
		max-width: 500px;
	}

	
	#about figure figcaption {
		max-width: 370px;
	}
	
	
	figure img {
		max-height: 400px;
		object-fit: cover;
		object-position: center 20%;
	}
	

	.nav nav a {
		flex-grow: 1;
		flex-shrink: 1;
		box-sizing: border-box;
		background-color: rgba(255, 255, 255, 0.8);
		text-decoration: none;
		padding: 5px 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}


@media all and (max-width: 1200px) {
	header {
		width: 100%;
	}
}

@media all and (max-width: 800px) {
	.nav nav {
		font-size: 14px;
	}

}

@media all and (max-width: 640px) {

	header h1 {
		font-size: 36px;
	}
	
	.nav nav a:first-child {
		position: sticky;
		top: 0px;
		background-color: whitesmoke;
		color: #222;
		box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.5);
	}

	.nav nav a:hover,
	#homepage .nav nav a:first-child {
		background-color: var(--blue);
		color: white;
	}

	.nav {
		position: relative;
	}

	.nav nav {
		flex-flow: column nowrap;
		font-size: 16px;
	}

	.nav nav a {
		padding: 10px 20px;
	}

	#home .columns a {
		padding: 8px 10px 7px 10px;
		font-size: 11px;
	}
	
	#consultation h3 span img {
		display: none;
	}
	
	header {
		padding: 20px;
	}
	
	header h1 {
		margin-top: 0px;
	}
	
	h3 {
		font-size: 32px;
	}
	
	section {
		margin: 0px;
		max-width: 100vw;
		box-sizing: border-box;
	}
	
	section nav {
		font-size: 13px;
	}
	
	section nav a.prev::before,
	section nav a.next::after {
/* 		content: ''; */
/* 		margin: 0px; */
	}
	
	.g-recaptcha {
		display: initial;
	}


}


@media all and (max-width: 500px) {
	footer .columns {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		hyphens: auto;
		gap: 0px;
	}
	
	.acknowledgement p:first-child {
		margin-top: 0px;
	}
	
	#counselling ul {
		columns: 1;
		column-gap: 0px;
	}

	
	
	
}

@media all and (min-width: 500px) {
	hr.single-column {
		display: none;
	}
}