/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */

.hamburger
{
	padding: 23px 23px;
	display: inline-block;
	cursor: pointer;
	transition-property: opacity, filter;
	transition-duration: 0.15s;
	transition-timing-function: linear;
	font: inherit;
	color: inherit;
	text-transform: none;
	background-color: transparent;
	border: 0;
	margin: 0;
	overflow: visible;
}

.hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after { background-color: #000; }

.hamburger-box
{
	width: 40px;
	height: 24px;
	display: inline-block;
	position: relative;
}

.hamburger-inner
{
	display: block;
	top: 50%;
	margin-top: -2px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after
{
	width: 40px;
	height: 3px;
	background-color: #000;
	border-radius: 4px;
	position: absolute;
	transition-property: transform;
	transition-duration: 0.15s;
	transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after
{
	content: "";
	display: block;
}

.hamburger-inner::before { top: -10px; }
.hamburger-inner::after { bottom: -10px; }

/*
   * Squeeze
   */

.hamburger--squeeze .hamburger-inner
{
	transition-duration: 0.075s;
	transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze .hamburger-inner::before { transition: top 0.075s 0.12s ease, opacity 0.075s ease; }
.hamburger--squeeze .hamburger-inner::after { transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--squeeze.is-active .hamburger-inner
{
	transform: rotate(45deg);
	transition-delay: 0.12s;
	transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--squeeze.is-active .hamburger-inner::before
{
	top: 0;
	opacity: 0;
	transition: top 0.075s ease, opacity 0.075s 0.12s ease;
}

.hamburger--squeeze.is-active .hamburger-inner::after
{
	bottom: 0;
	transform: rotate(-90deg);
	transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}


*
{
	margin: 0;
	padding: 0;
	outline-style: none;
	outline-width: 0;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

html, body
{
	position: relative;
	font-family: 'Raleway', sans-serif;
	background-color: #eff2f2;
	font-weight: 400;
	font-size: 16px;
}

h1, h2, h3, .title, #menu ul li a, .mm-menu, .contact 
{ 
	font-family: 'Josefin Sans', sans-serif; 
}

strong
{
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.title
{
	display: block;
	font-size: 64px;
	line-height: 76px;
	font-weight: 300;
	position: absolute;
	bottom: 30px;
	left: 40px;
	color: white;
}

h1
{
	font-size: 34px;
	font-weight: 400;
	padding-top: 70px;
	margin-bottom: 0px;
	line-height: 48px;
	text-transform: uppercase;
}

.no-header 
{ 
	margin-top: 70px !important; 
}

/*h1:not(:first-child) { 
	margin-top: 70px; 
}*/

h2
{
	font-size: 24px;
	font-weight: 300;
	margin-top: 0px;
	margin-bottom: 30px;
	padding-bottom: 10px;
	text-align: center;
	text-transform: uppercase;
	color: #969ea8;
	border-bottom: 1px #ccc solid;
	letter-spacing: 1px;
}

h3
{
	font-size: 24px;
	font-weight: 400;
	margin-top: 50px;
	margin-bottom: -10px;
	text-transform: uppercase;
}

.logo
{
	position: absolute;
	padding-left: 46px;
	padding-right: 46px;
	display: flex;
	align-items: center;
	height: 84px;
}

.logo img
{
	width: 475px;
	height: auto;
}

#menu ul { 
	padding-right: 34px; 
}

#menu ul li { 
	display: inline-block;
}

#menu ul li a
{
	font-size: 17px;
	text-decoration: none;
	padding: 39px 12px 22px 12px;
	display: inline-block;
	color: black;
	font-weight: 600;
}

.header
{
	height: 84px;
	text-align: right;
	background-color: #fff;
}

#menu-icon
{
	position: absolute;
	top: 7px;
	left: 0px;
}

.title-wrapper
{
	position: relative;
	height: calc(100vh - 84px);
	width: 100%;
	background-color: grey;
	overflow: hidden;
}

.title-wrapper img
{
	object-fit: cover;
	object-position: right center;
	font-family: 'object-fit: cover; object-position: right center;';
	width: 100%;
	height: 100%;
}

.title-wrapper img.center-image
{
	object-position: center center;
}

/*
#intro-link
{
	position: absolute;
	text-align: center;
	line-height: 40px;
	width: 40px;
	height: 40px;
	bottom: 40px;
	right: 40px;
	font-size: 20px;
	z-index: 100;
	background-color:rgba(0,0,0,0.8);
	color: white;
	border-radius: 50%;
	cursor: pointer;
}
*/

#intro-link
{
	position: absolute;
	bottom: 40px;
	right: 40px;
	font-size: 40px;
	z-index: 100;
	/*background-color:rgba(0,0,0,0.8);*/
	color: white;
	cursor: pointer;
	transition: opacity 0.2s;
	opacity: 1;
}

.arrow-scrolled
{
	opacity: 0 !important;
}

.content-column
{
	max-width: 50%;
	box-sizing: border-box;
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 0px;
	padding-bottom: 20px;
	margin-bottom: 0px;
}

.content-column img
{
	width: 100%;
	margin-top: 50px;
	margin-bottom: 50px;
	display: block;
}

.content-column img.graphic
{
	box-sizing: border-box;
	margin-top: 80px;
	margin-bottom: 80px;
	padding-left: 16px;
	padding-right: 16px;
}

.content-column .caption
{
	width: 100%;
	margin-top: -50px;
	margin-bottom: 50px;
	padding-left: 26px;
	padding-right: 26px;
	padding-top: 16px;
	padding-bottom: 16px;
	background: black;
	color: white;
	box-sizing: border-box;
}

.content-column p
{
	line-height: 26px;
	margin-top: 24px;
	margin-bottom: 24px;
	text-align: justify;
}

.home .content-column p a
{
	color: black;
	text-decoration: underline;
}

.content-column ul
{
	margin-left: 20px;
	margin-top: 24px;
}

.content-column li
{
	margin-top: 15px;
	margin-bottom: 15px;
	font-weight: 600;
}

.nowrap 
{ 
	white-space: nowrap; 
}

.contact
{
	font-size: 17px;
	display: block;
	color: black;
	padding-top: 0px;
	text-decoration: none;
	font-weight: 600;
	padding-bottom: 5px;
}

.contact span 
{ 
	padding-right: 10px;
}

.privacy li 
{ 
	font-weight: 400;
}

.diagram
{
	background-color: #ffffff;
	position: relative;
	padding-top: 40px;
	padding-bottom: 50px;
	padding-left: 40px;
	padding-right: 40px;
	margin-top: 30px;

}

.diagram-wrapper
{
	text-align: center;
	max-width: 50%;
}

.diagram-inner 
{ 
	position: relative; 
}

.diagram-wrapper-twin .diagram-inner { 
	display: inline-block; 
}

.diagram img
{
	display: inline-block;
	position: relative;
	width: 100%;
	/*box-sizing: border-box;*/
	max-width: 448px;
}

.diagram-twin img
{
	display: inline-block;
	vertical-align: top;
}

.twin-A
{
	border-right: 1px #ccc solid;
	padding-right: 30px;
	margin-right: 30px;
}

.tree-background
{
	background-color: #4f4f6b;
	width: 100%;
	position: absolute;
	bottom: 0px;
	top: 364px;
	border-radius: 6px;
}

.tree-wrap 
{ 
	position: relative;
}

.swiper-container 
{ 
	position: relative;
}

.swiper-slide
{
	box-sizing: border-box;
	margin-top: 60px;
	padding: 70px 150px 80px 150px;
	text-align: center;
	/* Center slide text vertically */
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	background: #4f4f6b;
	color: white;
}

.swiper-button-prev, .swiper-button-next {
  	margin-top: -0px;
} 

.testimonial p
{
	font-style: italic;
	background-image: url(../imgs/icon-quote-italic.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-size: 50px 50px;
	padding-top: 28px;
	padding-bottom: 28px;
	padding-left: 60px;
	line-height: 24px;
}

.membership-logos
{
	display: inline-block;
	background-color: #98a09f;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 70px;
	padding-bottom: 70px;
	text-align: center;
}

.membership-logos img
{
	height: 80px;
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.membership-logos p
{
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 20px;
	color: #fff;
	line-height: 24px;
}

.base-text
{
	background-color: #98a09f;
	text-align: center;
	padding-bottom: 20px;
	font-size: 12px;
	
}

.base-text, .base-text a
{
	color: #eee;
	text-decoration: none;
}

.base-text a:hover 
{ 
	text-decoration: underline; 
}

.base:not(:nth-child(3))
{ 
	border-right: 1px #ccc solid;
}

.base
{
	padding-left: 5px;
	padding-right: 5px;
}

@media (max-width: 1450px)
{
	.content-column, .diagram-wrapper 
	{ 
	max-width: 66.666%; 
	}
}

@media (max-width: 1184px)
{
	
	#intro-link, #intro-link-alt 
	{
	display: none;
	}
	
	.membership-logos
	{
	padding-top: 50px;
	padding-bottom: 40px;
	}
	
	.swiper-button-prev, .swiper-button-next
	{
    width: 18px;
    height: 30px;
    margin-top: -0px;
    background-size: 18px 30px;
   	}
   	
   	.swiper-button-next
   	{
   	right: 20px
   	}
   	
   	.swiper-button-prev
   	{
   	left: 20px;
   	}
   	
   .swiper-slide
	{
	
	margin-top: 50px;
	padding: 70px 110px 80px 110px;
	}

	.testimonial p
	{
	background-size: 50px 50px;
	padding-top: 28px;
	padding-bottom: 28px;
	padding-left: 60px;
	line-height: 24px;
	}
	
	#menu { display: none !important; }
	.content-column, .diagram-wrapper { max-width: 100%; }
	
	.logo
	{
		justify-content: right;
		left: auto;
		right: 0px;
		padding-right: 40px;
		padding-left: 84px;
		box-sizing: border-box;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	
	.title
	{
		font-size: 52px;
		line-height: 62px;
	}
	
	h1
	{
		font-size: 28px;
		line-height: 36px;
	}
	
	h2
	{
		font-size: 18px;
		
	}
	
	.diagram-wrapper-twin { text-align: center; }
	
	.mm-navbars_bottom a
	{
		text-align: center;
		color: white !important;
		font-size: 24px;
		border-radius: 50%;
		background-color: black;
		width: 52px;
		height: 52px;
		line-height: 52px;
	}
	
	.mm-navbars_bottom { border: none; }
	.mm-menu { background-color: blue !important; }
}

@media (min-width: 1181px)
{
	#mm-menu, #menu-icon 
	{ 
		display: none !important; 
	}
}

@media (max-width: 1051px)
{
	.twin-A
	{
		border-right: 0px;
		border-bottom: 1px #ccc dotted;
		padding-right: 0px;
		margin-right: 0px;
		margin-bottom: 24px;
		padding-bottom: 24px;
	}
}

@media (max-width: 502px)
{
	.tree-background
	{
	background-color: #4f4f6b;
	width: 100%;
	position: absolute;
	bottom: 0px;
	top: 0px;
	border-radius: 6px;
	}
}

@media (max-width: 620px)
{
	
	.membership-logos p
	{
	font-size: 12px;
	line-height: 18px !important;
	}
	
	h3 {
    font-size: 20px;
   	margin-top: 40px;
    margin-bottom: -10px;
	}
	
	.base
	{
	display: block;
	padding-top: 1px;
	padding-bottom: 2px;
	border: none !important; 
	}
	
	.base-text
	{
	border-top: 1px #ccc solid;
	padding-top: 16px; 
	}
	
	.swiper-button-prev, .swiper-button-next
	{
   
    width: 14px;
    height: 23px;
    margin-top: -10px;
    background-size: 14px 23px;
   	}
   	
   	.swiper-button-next
   	{
   	right: 14px
   	}
   	
   	.swiper-button-prev
   	{
   	left: 14px;
   	}
	
	strong
	{
		
	font-size: 12px;
		
	}

	.swiper-slide
	{
		margin-top: 20px;
		padding: 36px 50px 46px 50px;
	}

	.testimonial p
	{
		background-position: center 0px;
		background-size: 38px 38px;
		padding-top: 44px;
		padding-bottom: 20px;
		padding-left: 0px;
		line-height: 22px;
	}
	
	.content-column p
	{
		line-height: 22px;
		margin-top: 22px;
		margin-bottom: 22px;
		text-align: left;
	}

	html, body
	{
		font-size: 14px;
	}
	
	h1
	{
		font-size: 20px;
		line-height: 26px;
		padding-top: 30px;
	}
	
	.no-header 
	{ 
	margin-top: 30px !important; 
	}
	
	h2
	{
		font-size: 16px;
		
	}
	
	.diagram
	{
		padding-top: 30px;
		padding-bottom: 40px;
		padding-left: 24px;
		padding-right: 24px;
		margin-top: 10px;
	}
	
	.title
	{
		font-size: 30px;
		bottom: 20px;
		left: 22px;
		line-height: 38px;
	}
	
	.logo { padding-right: 22px; }
	
	.membership-logos
	{
		
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	
	.membership-logos img
	{
		height: 40px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	.membership-logos p
	{
		margin-left: 14px;
		margin-right: 14px;
		margin-top: 10px;
		color: #fff;
		line-height: 24px;
	}
	
	.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after
	{
		width: 30px;
		height: 2px;
	}
	
	.hamburger-inner::before 
	{ 
		top: -8px; 
	}
	
	.hamburger-inner::after 
	{ 
		bottom: -8px;
	}
	
	.content-column 
	{
		padding: 22px;
	}
	
	.logo img 
	{ 
		width: 265px; 
	}
}

@media (max-width: 374px)
{
	.logo img 
	{ 
		width: 220px;
	}
}

@media (max-aspect-ratio: 3/4) and (max-width: 620px)
{
	.title-wrapper 
	{ 
		height: calc(100vh - 150px);
	}
}