/* Global Stylesheet for Wellpha */

@font-face {
  font-family: 'Bathilda';
  src: url('../font/Bathilda.otf'); /* IE9 Compat Modes */
}
* {
	font-family: Poppins, sans-serif;
	color: #5E2B80;
}
body {
	margin: 0;
	padding: 0;
}
.logo {
	max-width: 180px;
	display: inline-block;
}
img {
	max-width: 100%;
}
header {				
	width: calc(100% - 80px);
	max-width: 1200px;
	margin: auto;
	padding: 24px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	z-index: 10;
}
header nav {
	width:  400px;
	display: flex;
	justify-content: space-between;
}
header nav a {
	color:  #43206E;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 500;
	position: relative;
	display: block;
}
header nav a::before {
	content:  '';
	display: block;
	background:  url(../img/nav-active-purple.png) no-repeat;
	background-size: contain;
	position: absolute;
	left:  0rem;
	width:  2rem;
	height: 1.5rem;
	opacity: 0;
	transition: .5s;
}
header nav a:hover::before, header nav a.active::before {
	left:  -2rem;
	opacity: 1;
	transition: .5s;
}
@media(max-width: 1200px) and (min-width:  600px) {
	.wrapper {
		padding: 1rem 2rem;
	}
}
@media(max-width: 600px) {
	.wrapper {
		flex-direction: column;
		padding: 1rem;
	}

	.logo {
		max-width: 120px;
	}

	header {
		box-sizing: border-box;
		width:  100%;
		max-width: 100vw;
		overflow: hidden;

    transition: .5s;
	}
	header nav {
		display: none;
	}

	.mobile-opener {
    background: rgb(154,80,128);
    background: linear-gradient(90deg, rgba(154,80,128,1) 0%, rgba(94,43,128,1) 100%);
    width: 15rem;
    height: 15rem;
    position: absolute;
    right: -7rem;
    top: -10.45rem;
    border-radius: 100%;
    padding-top: 11.75rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 8.5rem;
    transition: .5s;
	}
	.mobile-opener div {
    background: #fff;
    height: 4px;
    width: 40px;
    margin-bottom: 5px;
    position: relative;
    z-index: 20;

    transition: .5s;
	}
	header nav a::before {
		display: none;
	}

	header.open {
    height: 100vh;
    max-height: 100vh;
    width: 100vw;
    align-items: flex-start;
	}
	header.open .mobile-opener {
    width: 100%;
    height: 100%;
    right: 0;
    top:  0;
    border-radius: 0;
    padding: 1rem;
    padding-top: 1.7rem;
    padding-right: 1.5rem;
    position: fixed;
	}
	header.open .mobile-opener div {
		transform:  rotate(45deg);
		top:  10px;
	}
	header.open .mobile-opener div:nth-child(2) {
		transform:  rotate(-45deg);
		top:  1px;
	}
	header.open .mobile-opener div:nth-child(3) {
		display: none;
	}
	header.open nav {
    display: block;
    text-align: center;
    width: 100%;
    position: fixed;
    height: calc(100% - 3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    margin-left: -1rem;
    font-size: 2rem;
    margin-top: 3rem;
	}
	header nav a {
    color: #ffffff;
    font-weight: 600;
    margin-top: -4rem;
	}
}

.header-image {
	position: absolute;
	top:  0;
	left: -2.5%;
	z-index: 0;
	width:  70%;
	z-index: -1;
}

.banner {
	padding-top: 12vw;
	margin:  0;
}
.banner p {
	max-width:  70%;
}
@media(max-width: 600px) {
	.header-image {
		display: none;
	}
	.banner p {
		max-width: none;
	}
}

.content {
	width: calc(100% - 80px);
	max-width: 600px;
	margin-left: calc((100% - 1200px) / 2);
	box-sizing: border-box;
}

form {
	position: relative;
}
form input[type="email"], form input[type="text"], form input[type="tel"], form textarea {
	width: 100%;
	border: 2px solid #5E2B80;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
	border-radius: 1rem;
}
form input[type="submit"] {
	background: #ffffff;
	-webkit-appearance:  none;
	font-weight: 600;
	padding:  1rem 3rem;
}
.btn {
	border-radius: 1rem;
	border: 2px solid #5E2B80;
	font-weight: 400;
	text-transform: uppercase;
	text-decoration: none;
	padding: .5rem 2rem;
	transition:  .5s;
}
.btn:hover, .btn.active {
	background: #5E2B80;
	color:  #ffffff;
}
::placeholder {
	color: #BE8E9E;
}
p.msg {
  margin-top: .5rem;
  font-size: .75rem;
}

#cta {
	background: url(../img/switch-bg.png);
	background-size:  50rem;
	padding: 4rem 0;
}
#cta .wrapper {
	background: #ffffff;
	padding:  4rem;
	height: auto;
	display: block;
	text-align: center;
}
#cta h3 {
	font-size: 1.5rem;
}
#cta p {
	max-width: 920px;
	margin: auto;
	margin-bottom: 3rem;
}

.contact .wrapper {
	justify-content: space-around;
	height: auto;
	padding:  4rem 0;
	display: flex;
  align-items: center;
}
.contact img {
	display: block;
	margin:  1rem auto;
	width: 4rem;
}
.contact .contact-item a {
	text-decoration: none;
	text-align: center;
}
@media(max-width: 600px) {
	.contact-item {
    margin-bottom: 1rem;
    text-align: center;
	}
}

footer {
	background: rgb(154,80,128);
	background: linear-gradient(90deg, rgba(154,80,128,1) 0%, rgba(94,43,128,1) 100%);
	padding: 2rem 0;
}
footer .wrapper {
	height:  auto;
	justify-content: space-between;	
	display: flex;
  align-items: center;
}
footer .social {
	display: flex;
}
footer .social a {
	height: 1rem;
	display: block;
	margin:  0 1rem;
}
footer .social a img {
	width: auto;
	height:  100%;
}
footer nav a {
	color:  #ffffff;
	text-decoration: none;
	margin:  0 1rem;
	text-transform: uppercase;
}
footer p, footer p span, footer p a {
	text-align: right;
	color:  #ffffff;
	font-size: .8rem;
	margin-bottom: 0;
	margin-top: 1rem;
	font-weight: 200;
}
@media(max-width: 1260px) {
	header {
		padding: 1rem;
		margin-left: 0;
	}
	.content {
		padding: 1rem;
		margin-left: 0;
		width: 55%;
		max-width: none;
		position: relative;
		z-index: 1;
	}
}
@media(max-width: 1080px) {
	h1 span {
		font-size: 2.5rem;
		word-spacing: -1rem;
	}
	.content {
		padding: 1rem;
		margin-left: 0;
		width: 70%;
		max-width: none;
	}
/*	p+p {
		max-width: 16rem;
	}*/
}

@media(max-width: 760px) {
	h1 {
		font-size: 3rem;
	}
	.content {
		width: 100%;
		margin-top: 6rem;
	}
}
@media(max-width: 600px) {
	footer nav {
		display: flex;
		margin: 2rem auto;
		width: calc(100% - 2rem);
		justify-content: space-around;
	}
}