/*   
Theme Name: Skin Health Wellness Clinic
Theme URI: http://skinhealthwellness.com
Description: Theme for Skin Health and Wellness
Author: Mitch Wienecke
Author URI: http://crashcreative.ca
Version: 0.9.992
*/

/* -----  LAYOUT  ----- */


/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

html, body {
	height: 100%;
	min-height: 100%;
	background-color: #FFF;
}
body {
	margin: 0 !important;
	padding: 0 !important;
}
html[lang] {
  margin-top: 0 !important;
}


/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ---- POPUP MODAL ---- POPUP MODAL ---- POPUP MODAL ---- POPUP MODAL ---- POPUP MODAL ---- POPUP MODAL ---- POPUP MODAL ------ */
/* ----------------------------------------------------------------------------------------------------------------------------- */


.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0); 
  background-color: rgba(0,0,0,0.6); 
}
.modal-content {

}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-top: -5px;
}
.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
} 
.modal-body { 
	padding: 20px 20px;
}
.modal-content {
  background: #000;
  color: white;
  border-radius: 1em;
  padding: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  border: 5px solid #FFF;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.75s;
  max-width: 85%;
}
@keyframes animatetop {
  from {top: -600px; opacity: 0}
  to {top: 50%; opacity: 1}
} 
.modal-body p {
	font-family: sans-serif;
	font-size: 1.15em;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	line-height: 1.4;
	margin: 5% 0;
	font-style: italic;
}



/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ---- UNDER CONSTRUCTION PAGE ---- UNDER CONSTRUCTION PAGE ---- UNDER CONSTRUCTION PAGE ---- UNDER CONSTRUCTION PAGE --------- */
/* ----------------------------------------------------------------------------------------------------------------------------- */


#uc-page-wrap {
	width: 95%;
	max-width: 725px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-content: center;
}
.uc-contact-wrap {
	align-self: center;
}
.uc-logo-wrap h1 {
	font-family: sans-serif; 
	font-size: 3rem; 
	color: #000; 
	text-align: center;
	letter-spacing: 0.225rem;
}
.uc-logo-wrap img {
	width: 90%;
	max-width: 350px;
	display: block; 
	margin: 0.8rem auto 4.5rem;
}
.uc-contact-info {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
}
.uc-contact-info.flex-start {
	align-items: flex-start;

}
.uc-contact-info.uc-personnel-wrap {
	align-items: flex-start;
}
.uc-contact-info img {
	width: 15%;
	height: 15%;
	width: 60px;
	/*
	max-width: 60px;
	*/
	margin-right: 20px;
}
.uc-contact-info a img {
	width: 100%;
	height: 100%;
	width: 60px;
	/*
	max-width: 60px;
	*/
}
.uc-contact-info a, .uc-contact-info ul li {
	font-family: sans-serif; 
	font-size: 1.15rem; 
	color: #000;
	text-decoration: none;
}
.uc-contact-info ul {
	margin-right: 20px;
}
.uc-contact-info ul li {
	padding-bottom: 8px;
	
	line-height: 1.1;
}
.uc-contact-info ul li.personnel-title {
	font-weight: bold;
	text-decoration: underline;
	font-size: 1.25rem;
	padding-top: 22px;
	padding-bottom: 20px;
}

.bold-title {
	font-weight: bold;
}
.uc-contact-info ul.bullet-list {
	/*
	list-style: disc;
	*/
	list-style: square;
}
.uc-contact-info ul.bullet-list.hyphens {
	list-style-type: "- ";
	list-style-position: outside;
}
.uc-contact-info ul.bullet-list.hyphens li:before {
	/*
	content: "- ";
	*/
}
.uc-contact-info ul.bullet-list.first-list {
	margin-top: 20px;
}
.uc-contact-info ul.bullet-list li {
	padding-bottom: 8px;
	margin-left: 30px;
}
.uc-contact-info ul.bullet-list ul {
	margin-left: 30px;
}
.uc-contact-info ul.bullet-list li.bold-title {
	list-style: none;
	margin-left: 0px;
}

.uc-contact-info ul.bullet-list li a.heavy-link {
	font-weight: bold;
	color: #000;
	opacity: 1;
}
.uc-contact-info ul.bullet-list li a.heavy-link:hover {
	opacity: 0.75;
}

/* ----------------------------------------------------------------------------------------------------------------------------- */
/* ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING -------- */
/* ----------------------------------------------------------------------------------------------------------------------------- */

#booking-page-wrap {
	font-family: 'DM Sans', sans-serif;
	line-height: 1;
}

.initial-screen-section {
	display: flex;
	flex-direction: column;
	width: 100%;
	/*
    height: 100vh;
	*/
	/*
	min-height: -webkit-fill-available;
	min-height: 100vh;
	*/
}
.logo-section {
	background-color: #FFF;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	
	/*
	height: 34vh;
	*/
	
	padding: 4% 0;
}
.button-section {
	background-color: #000;
	display: flex;
	flex-direction: column;
	width: 100%;
	/*
	height: 66vh;
	*/
	align-items: center;
	justify-content: center;
	color: #FFF;
	
	padding: 4% 0;
}

.logo-section img {
	width: 30vh;
	max-width: 1000px;
}
.button-section .content-wrap {
	/*
	max-width: 1300px;
	*/
	padding: 0 2rem;
	max-width: 1000px;
}
.button-section h1 {
	font-size: 2.5rem;
	text-align: center;
	margin-bottom: 2.5rem;
}
.button-section h2 {
	font-size: 1.25rem;
	text-align: center;
	line-height: 1.1;
}
.button-section h2 a {
	text-decoration: underline;
	color: #FFF;
}
.button-section h2 a:hover {
	opacity: 0.8;
}
.button-section h2 a:visited {
	color: #FFF;
}
.button-section h2.extra-space {
	margin: 1.25rem 0;
}
.button-section h2.extra-spacex2 {
	margin: 2rem 0;
}
.booking-buttons {
	margin: 0px auto;
	display: flex;	
	align-items: center;
	/*
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1200px;
	*/
	flex-direction: column;
}
.booking-buttons button {
	border: solid 2px #FFF;
	background-color: #000;
	width: 380px;
	padding: 8px 8px;
	margin: 0px 4px 24px;
	color: #FFF;
	font-family: 'DM Sans', sans-serif;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.3rem;
}
.booking-buttons button:hover {
	cursor: pointer;
	background-color: #FFF;
	color: #000;
}


.clinic-wrap button {
	border: solid 2px #000;
	background-color: #000;
	width: 300px;
	padding: 5px 8px;
	margin: 0px 4px;
	color: #FFF;
	font-family: 'DM Sans', sans-serif;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.5rem;
}
.clinic-wrap button:hover {
	cursor: pointer;
	background-color: #FFF;
	color: #000;
}


#acne-rosacea, #wart, #womensHealth, #hyperhidrosis, #generalDermatology, #alopecia, #pediatric {
	padding: 5rem 2rem 4rem;
}

.clinic-section {
	background-color: #FFF;
	color: #000;
}
.clinic-wrap {
	max-width: 1200px;
	margin: 0px auto;
	padding: 0 1rem;
}
.clinic-wrap h1 {
	font-size: 3.75rem;
	margin-bottom: 0.6rem;
}
.clinic-wrap h3 {
	font-size: 1.75rem;
	text-decoration: underline;
	margin-bottom: 1rem;
}
.clinic-wrap p {
	font-size: 1.25rem;
	margin-bottom: 0.9rem;
}
.clinic-wrap ol {
    list-style-type: decimal;
	list-style-position: outside;
	margin-left: 1.35rem;
	font-size: 1.25rem;
	line-height: 1.1;
}
.clinic-wrap ol li {
	margin-bottom: .8rem;
}
.clinic-wrap button {
	margin: 1rem 0 4rem;
}
.clinic-wrap ol li a {
	color: #666;
	text-decoration: none;
}
.clinic-wrap ol li a:hover {
	color: #c3c3c3;
}







@media screen and (max-width: 800px) {
	
	/* ----------------------------------------------------------------------------------------------------------------------------- */
	/* ---- UNDER CONSTRUCTION HOME ---- UNDER CONSTRUCTION HOME ---- UNDER CONSTRUCTION HOME ---- UNDER CONSTRUCTION HOME --------- */
	/* ----------------------------------------------------------------------------------------------------------------------------- */
	
	.uc-logo-wrap img {
		margin: 0.5em auto 3em;
	}
	.uc-logo-wrap h1 {
		font-size: 2rem;
		letter-spacing: 0.15rem;
	}
	.uc-contact-info {
		margin-bottom: 30px;
	}
	.uc-contact-info img {
		/*
		max-width: 40px;
		*/
		width: 40px;
		margin-right: 14px;
	}
	.uc-contact-info a img {
		/*
		max-width: 40px;
		*/
		width: 40px;
	}
	.uc-contact-info a, .uc-contact-info ul li {
		font-size: 0.95rem; 
	}
	.uc-contact-info ul {
		margin-right: 14px;
	}
	.uc-contact-info ul li {
		padding-bottom: 6px;
	}
	.uc-contact-info ul li.personnel-title {
		font-size: 1.05rem;
		padding-top: 15px;
		padding-bottom: 14px;
	}
	
	
	.uc-contact-info ul.bullet-list.first-list {
		margin-top: 13px;
	}
	
	/* ----------------------------------------------------------------------------------------------------------------------------- */
	/* ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING -------- */
	/* ----------------------------------------------------------------------------------------------------------------------------- */
	
	
	/* UPPER HALF */
	/*
	.initial-screen-section {
	    height: 100svh;
	}
	.logo-section {
		height: 30vh;
	}
	.button-section {
		height: 70vh;
	}
	.logo-section img {
		width: 25vh;
		width: 30vw;
		max-width: 600px;
	}
	*/
	
	.button-section .content-wrap {
		padding: 1rem 1rem 0rem;
	}
	.button-section h1 {
		font-size: 2rem;
		margin-bottom: 2.5rem;
	}
	.button-section h2 {
		font-size: 1.25rem;
		line-height: 1.4;
	}
	.button-section h2.extra-space {
		margin: 1rem 0;
	}
	.button-section h2.extra-spacex2 {
		margin: 2rem 0;
	}
	.booking-buttons button {
		width: 48%;
		padding: 5px 8px;
		margin: 10px 0px;	
		font-size: 1rem;
		font-weight: normal;
	}
	#acne-rosacea, #wart, #womensHealth, #hyperhidrosis, #generalDermatology, #alopecia {
		padding: 3rem 2rem 1rem;
	}
	
	

	/*
	.button-section .content-wrap {
		padding: 0rem 2rem;
	}
	.button-section h1 {
		font-size: 2.75rem;
		margin-bottom: 0.4rem;
	}
	.button-section h2 {
		font-size: 1.75rem;
		line-height: 1.1;
	}
	.button-section h2.extra-space {
		margin: 0.6rem 0;
	}
	.booking-buttons button {
		width: 250px;
		padding: 5px 8px;
		margin: 0px 4px;	
		font-size: 1.35rem;
	}
	.clinic-wrap button {
		width: 250px;
		padding: 5px 8px;
		margin: 0px 4px;	
		font-size: 1.35rem;
	}
	
	.clinic-wrap {
		max-width: 800px;
		margin: 0px auto;
	}
	.clinic-wrap h1 {
		font-size: 2.75rem;
		margin-bottom: 0.4rem;
	}
	.clinic-wrap h3 {
		font-size: 1.5rem;
		margin-bottom: 0.7rem;
	}
	.clinic-wrap p {
		font-size: 1.1rem;
		margin-bottom: 0.9rem;
	}
	.clinic-wrap ol {
		margin-left: 1.35rem;
		font-size: 1.1rem;
		line-height: 1.1;
	}
	.clinic-wrap ol li {
		margin-bottom: 0.6rem;
	}
	.clinic-wrap button {
		margin: 1rem 0 4rem;
	}
	*/
	
}
@media screen and (max-width: 500px) {
	
	/* ----------------------------------------------------------------------------------------------------------------------------- */
	/* ---- UNDER CONSTRUCTION HOME ---- UNDER CONSTRUCTION HOME ---- UNDER CONSTRUCTION HOME ---- UNDER CONSTRUCTION HOME --------- */
	/* ----------------------------------------------------------------------------------------------------------------------------- */
	
	.uc-logo-wrap img {
		margin: 0.4em auto 2.5em;
	}
	.uc-logo-wrap h1 {
		font-size: 2rem;
		letter-spacing: 0.15rem;
	}
	.uc-contact-info {
		margin-bottom: 20px;
	}
	.uc-contact-info img {
		/* max-width: 30px; */
		width: 30px;
		margin-right: 11px;
	}
	.uc-contact-info a img {
		/* max-width: 30px; */
		width: 30px;
	}
	.uc-contact-info a, .uc-contact-info ul li {
		font-size: 0.85rem; 
	}
	.uc-contact-info ul {
		margin-right: 11px;
	}
	.uc-contact-info ul li {
		padding-bottom: 4px;
	}
	.uc-contact-info ul li.personnel-title {
		font-size: 0.9rem;
		padding-top: 11px;
		padding-bottom: 11px;
	}
	.uc-contact-info ul.bullet-list.first-list {
		margin-top: 10px;
	}
	
	
	/* ----------------------------------------------------------------------------------------------------------------------------- */
	/* ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING ---- BOOKING -------- */
	/* ----------------------------------------------------------------------------------------------------------------------------- */
	/*
	.initial-screen-section {
	    height: 100svh;
	}
	
	.logo-section {
		height: 25vh;
	}
	.button-section {
		height: 75vh;
	}
	*/
	.logo-section img {
		width: 25vh;
		width: 33%;
		max-width: 400px;
	}
	.button-section .content-wrap {
		padding: .5rem .5rem 0rem;
	}
	.button-section h1 {
		font-size: 1.2rem;
		margin-bottom: 1.2rem;
	}
	.button-section h2 {
		font-size: 0.85rem;
		line-height: 1;
	}
	.button-section h2.extra-space {
		margin: 0.5rem 0;
	}
	.button-section h2.extra-spacex2 {
		margin: 1.5rem 0;
	}
	.booking-buttons button {
		width: 49%;
		padding: 5px 5px;
		margin: 5px 0px;	
		font-size: 0.75rem;
		font-weight: normal;
		border: solid 1px #FFF;
	}
	
	
	/* LOWER HALF */
	.clinic-wrap button {
		width: 175px;
		padding: 5px 8px;
		margin: 0px 4px;	
		font-size: 1.0rem;
	}
	#acne-rosacea, #wart, #womensHealth, #hyperhidrosis, #generalDermatology, #alopecia {
		padding: 1.25rem 0.75rem 0.75rem;
	}
	.clinic-wrap h1 {
		font-size: 1.5rem;
		margin-bottom: 0.5rem;
	}
	.clinic-wrap h3 {
		font-size: 1.25rem;
		margin-bottom: 0.5rem;
	}
	.clinic-wrap p {
		font-size: 1rem;
		margin-bottom: 1rem;
	}
	.clinic-wrap ol {
		margin-left: 1rem;
		font-size: 0.9rem;
		line-height: 1.05;
	}
	.clinic-wrap ol li {
		margin-bottom: 0.6rem;
	}
	.clinic-wrap button {
		margin: 1rem 0 4rem;
	}
	
}