@charset "utf-8";
/* CSS Document */


/* My Colours:

*/




* {
  box-sizing: border-box;
}

html {
	
}


/* margin resets*/

nav, ul, li, p, section, a, div, h1, h2, h3, h4, h5, h6, img, aside {
	padding: 0px;
	margin: 0px;
}

li {
	list-style: circle;
}


body {
	position: relative;
	width: 90%;
	max-width: 1920px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 90%;
	margin: 0px auto 50px auto;
	
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}


#navigation [class*="col-"], #mobileNavigation [class*="col-"] {
	padding: 0px;
}


nav {
	margin: 0px auto 0px auto;
	background-color: white;
		
}



nav ul li {
	list-style: none;
	
}


nav ul li a {
	display: block;
	float: left;
	width: 48%;
	height: 50px;
	margin: 1%;
	background: #09F;
	text-decoration: none;
	color: white;
	font-size: 80%;
	text-align: center;
	vertical-align: middle;
	line-height: 50px;
	
}

nav a:hover {
	color: #FFF;
	background: #0CF;
}

#welcomePhoto {
	margin-top: 0px;
}

#welcomePhoto div:first-child img {
	display: block;
	width: 100%;
	max-width: 175px;
	height: auto;
	
}

#welcomePhoto div:first-child div {
	height: auto;
	vertical-align: middle;
	text-align: center;


}

#welcomePhoto p, #welcomePhoto h2 {
	display: block;
}

#welcomePhoto img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 450px;
	margin: 0 auto 0 auto;
}


p {
	margin-bottom: 20px;
}

h2 {
	margin: 35px;
	text-align: center;
}



#aboutCherrie, #cherrieCredentials, #services, #therapyAreas, #therapyConcerns, #assessment, #fees, #cancellation, #contact {
	border-style: solid;
	border-width: 15px;
	border-color: #E8E8E8;
	margin-bottom: 15px;
	margin-top: 15px;
}

#aboutCherrie, #therapyAreas, #fees {
	margin-bottom: 0px;
	border-bottom-style: none;
}


#cherrieCredentials, #therapyConcerns, #cancellation {
	margin-top: 0px;
	border-top-style: none;
}

#cherrieCredentials div {
	height: 200px;
	padding: 20px 30px 30px 30px;
}



#cherrieCredentials .qualifications {
	background-color: #BFDFEC;
}


#cherrieCredentials .training {
	background-color: #8CC5DD;
}

#cherrieCredentials .experience {
	background-color: #BFDFEC;
}





#aboutCherrie h3, #aboutCherrie h2, #cherrieCredentials h3, #cherrieCredentials h2, #services h3, #services h2, #therapyConcerns h3, #therapyConcerns h2, #therapyAreas h3, #therapyAreas h2, #assessment h3, #assessment h2, #fees h3, #fees h2, #cancellation h3, #cancellation h2, #contact h3, #contact h2 {
	column-span: all;
	text-align: center;
	margin: 20px;
}


#aboutCherrie > div, #services div, #therapyConcerns div, #assessment div {
	column-count: 3;
	column-gap: 50px;
	column-rule-style: solid;
	column-rule-width: 1px;
	column-rule-color: grey;
}


#therapyConcerns div {
	column-count: 2;
	min-height: 285px;
	height: auto;
	padding: 0px 30px 30px 30px;

}

#therapyConcerns .adultConcerns {
	background-color: #8CC5DD;
}

#therapyConcerns .youngConcerns {
	background-color: #BFDFEC;
}

#therapyAreas {
	padding-bottom: 25px;
}

#therapyAreas [class*="col-"] {
	padding: 0px;
}


#therapyAreas ul li {
	display: block;
	float: left;
	width: 48%;
	height: 100px;
	margin: 1%;
	background-color: white;
	text-decoration: none;
	font-size: 110%;
	font-weight: bold;
	color: #45A2C7;
	text-align: center;
	vertical-align: middle;
	line-height: 80px;
	border-radius: 48%;
	border-style: solid;
	border-width: 10px;
	border-color: #45A2C7;
	
}


#fees {
	margin: 0px auto 0px auto;
}

.feeType, .feePrice {
	display: block;
	text-align: center;
	vertical-align: middle;
}


.feeType {
	height: 125px;
	font-size: 135%;
	color: white;
	background-color: #616161;
	padding: 50px 25px 35px 25px;
}


.feePrice {
	height: 60px;
	background-color: black;
	color: white;
	font-weight: bold;
	font-size: 150%;
	line-height: 60px;
}


#cancellation div {
	min-height: 270px;
	height: auto;
	
}

#cancellation .cancellation {
	background-color: #9A9A9A;
	
}

#cancellation .nonAttendance {
	background-color: #D4D4D4;
	
}



#contact > div {
	min-height: 175px;
	padding: 2px;
	margin: 0px auto 0px auto;
	text-align: center;
	vertical-align: middle;
	line-height: 150px;
	font-size: 120%;
	color: white;
}

#contact > div h4 {
	background: red;
	color: white;
	font-size: 90%;
	width: 100%;
	height: 35px;
	line-height: 35px;
	text-align: center;
	vertical-align: middle;
}


#contact .email h4 {
	background-color: #0B5004;
}

#contact .email div {
	font-size: 125%;
	background-color: #027108;
}


#contact .phone h4 {
	background-color: #0B5004;
}

#contact .phone div {
	background-color: #027108;
	line-height: 75px;
}


#contact .address h4 {
	background-color: #0B5004;
}

#contact .address div {
	line-height: 20px;
	padding: 25px 0 25px 0px;
	background-color: #027108;
}





#footer {
	text-align: center;
	font-size: 70%;
}


/* Media Queries */


/* For Mobiles */

@media (max-width: 600px) {
  
	[class*="col-"] {width: 100%;}
	

	
	#aboutCherrie div, #services div, #therapyConcerns div, #assessment div {
		column-count: 1;
	}

	
	#welcomePhoto div:first-child img {
		max-width: 125px;
	
}
	
	nav ul li a {
		width: 48%;
		height: 40px;
		margin: 0.5%;
		font-size: 80%;
		line-height: 40px;

	}
	
	body {
		margin-bottom: 0px;
	}
	
		
	
	
}

/* For a size between Desktop & Mobile */


@media (min-width: 601px) and (max-width: 800px) {
	
	#therapyAreas ul li {
		font-size: 90%;
	}
	/*
	#therapyAreas .therapyIndividualsYoung ul li:last-child {
		font-size: 75%;
	}
	*/
	
	
	#cherrieCredentials div {
	height: 250px;
    }

	#cherrieCredentials h3 {
		font-size: 100%;
	}
	#aboutCherrie > div, #services div, #therapyConcerns div, #assessment div {
		column-count: 2;

	}
	
	#therapyConcerns div {
		column-count: 2;
		min-height: 350px;
		height: auto;
		padding: 0px 30px 30px 30px;

	}
	
	#cancellation div {
		min-height: 335px;

	}

#contact .phone {
	font-size: 90%;
}
	
#contact .address {
	font-size: 85%;
	}

#contact .email {
	font-size: 90%;
}





}



/* For Laptops & Desktops */

@media (min-width: 601px) {

	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}

	
	
}