@import 'fonts.css';

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Avenir LT W01 45 Book', Helvetica, Arial;

	font-size: 21px;
	line-height: 1.4;
	/*font-size: 1.5vmax;*/

	color: #5b8187;

	background-color: #e0e0e0;

	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: inherit;
	text-decoration: none;
}

a img {
	border: none;
}

strong {
	font-family: 'Avenir LT W01 85 Heavy', Helvetica, Arial;
	font-weight: normal;
}

main {
	display: block;
	width: 70%;
	max-width: 1200px;

	margin: 0 auto;
}

a.anchor {
	display: block;
	position: relative;

	/*  Top negative offset should be same as header's height, and font size
		should be the same as the header's font size, so that the page scrolls
		according to the fixed header's height when following the anchor. */
	top: -2.5em;
	font-size: 70%;

	visibility: hidden;
}
section a.anchor {
	top: -2.5em;
	/* Due to that the section's font size is already 60%, use that. */
	font-size: inherit;
}

header {
	display: block;
	position: fixed;

	top: 0;
	left: 0;
	right: 0;

	width: 100%;
	/* dependencies: a.anchor, #main_top_margin */
	min-height: 3.0em;

	margin: 0;
	padding: 0;

	background-color: #212121;

	/* dependencies: a.anchor, #main_top_margin */
	font-family: 'Avenir LT W01 45 Book', Helvetica, Arial;
	font-size: 70%;
	color: #fff;
	white-space: normal;

	z-index: 2;
}

/*  Use the table cell method for vertical centering to provide
	backwards-compatibility. */
.Center-Container.is-Table {
	display: table;
	height: 3.0em;
	width: 100%;
}
.is-Table .Table-Cell {
	display: table-cell;
	vertical-align: middle;
}
.is-Table .Center-Block {
	width: 69%;
	max-width: 1200px;
	margin: 0 auto;
	text-align: right;
}

.header_logotype,
div#main_top_margin img {
	display: inline-block;
	float: left;
	height: 16px;
	padding: 1px 0px 0px 0px;
}

#menu-button {
	display: none;
}

header menu {
	display: inline;
}

div#main_top_margin {
	width: 100%;
	max-width: 1200px;

	margin: 0 auto;

	/*  Height needs to be the same as the header's. */
	min-height: 3em;

	margin-bottom: 1.37em;

	/*  Font size needs to be the same as the header's. */
	font-size: 70%;
	
	text-align: right;

	visibility: hidden;
}

section {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
}

section:after {
	content: '';
	display: table;
	clear: both;
}

section#s-welcome {
	padding-bottom: 2em;
	background-color: #fff;
	text-align: center;
}

section#s-partners {
  width: 100%;
  padding: 2em;
  background-color: #fff;
  text-align: center;
  margin: 0 auto;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  section#s-partners {
    padding: 2em 1.5em 2em 1.5em !important;
  }
}
 

section#s-welcome p {
	padding: 5px 18% 15px 18%;
}

div#top_photo_container {
	position: relative;

	width: 100%;

	margin-bottom: 0;
	padding-bottom: 52%;
	margin-bottom: -10px;

	background-image: url('gfx/top_photo.jpg');
	background-repeat: no-repeat;
	background-position: 40% 95%;
	background-size: 135%;
}
img#top_photo_logo {
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	
	height: 25%;
	margin: auto;
}
.addthis_horizontal_follow_toolbox {
	position: absolute;
	width:74px;
	bottom: 2%; left:2%;
}

h1 {
	margin: 0 0 0.5em 0;

	font-family: 'Avenir LT W01 85 Heavy', Helvetica, Arial;
	font-weight: normal;
	font-size: 26px;
	line-height: 30px;
}

h2 {
	margin: 0 0 0.5em 0;

	font-size: 110%;
	font-weight: normal;

	line-height: 1;
}

p {
	margin: 0 0 0.5em 0;
	font-size: 16px;
	line-height: 21px;
}

div.top_icon {
	float: left;
	/*  In the PSD the 4 icons occupy 1343 px edge-to-edge but for correct
		centering of each icon it should be 1526 px. The bounding box for each
		icon should thus be 1526 / 4 = 381.5 px wide. The container's width is
		1959 px so the corresponding percentage is 381.5 / 1959 = 19.47%. */
	width: 19.47%;
}

div.top_icon img {
	display: block;
	height: 3em;
	margin: 0 auto;
}

img.icons {
	height: 3.5em;
}

div.icons {
	height: 3.5em;
	margin: 0 7.4% -10px;
	background-image: url('gfx/icon_all.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

div.partners {
	height: 3.5em;
	margin: 0 7.4% -10px;
	background-image: url('gfx/icon_partner.svg');
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
}

div.top_icon.first {
	margin-left: 11.5%;
}

section#s-courses-services,
section#s-contact_us {
	box-sizing: border-box;

	position: relative;

	padding: 0.5em 0 2em 53%;
	
	font-size: 65%;
	line-height: 1.3;
	color: #000;

	background-color: #cdd9db;
}

section#s-courses-services .img_container,
section#s-contact_us .img_container {
	position: absolute;
	top: 0;
	left: 0;
	right: 50%;
	bottom: 0;
	
	width: 50%;
	height: 100%;
	/*margin: -1em 3.8% -1em 0;*/

	background-repeat: no-repeat;
	background-position: 35% center;
	background-size: cover;
}
section#s-contact_us .img_container {
	background-position: 70% 50%;
	background-size: auto 110%;
}
section#s-courses-services .img_container img,
section#s-contact_us .img_container img {
	display: block;
	width: 100%;
}
#s-courses-services .img_container {
	background-image: url('gfx/photo_courses-services.jpg');
}
#s-contact_us .img_container {
	background-image: url('gfx/photo_contact_2025.jpg');
}

section#s-courses-services h1,
section#s-contact_us h1 {
	margin-top: 0;
	padding-top: 0.5em;
	color: #010101;
	white-space: normal;
}

section#s-courses-services p,
section#s-contact_us p {
	margin-right: 3.8%;
	white-space: normal;
}

section#s-courses-services img {
	display: block;
	margin-top: 0.9em;
	height: 2.5em;
}

section#s-about-us,
section#s-reviews {
	box-sizing: border-box;

	width: 100%;
	padding: 2em 2em 2em 1.5em;

	background-color: #fff;

	font-size: 70%;
	line-height: 1.4;
	color: #000;

	-webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
	-webkit-column-gap: 4em;
	-moz-column-gap: 4em;
	column-gap: 4em;
}

section .ingress {
	font-family: 'Avenir LT W01 45 Book', Helvetica, Arial;
	font-size: 20px;
	line-height: 28px;
	color: #000;
	padding-top: 0.5em;
}

section#s-choose_your_style {
	box-sizing: border-box;

	padding: 1.2em 1.2em;

	color: #5b8187;

	background-image: url('gfx/photo-choose_your_style.jpg');
	background-repeat: no-repeat;
	background-position: center 3%;
	background-size: cover;
}

section#s-choose_your_style h1 {
}

section#s-choose_your_style img {
	display: block;
	margin-top: 0.9em;
	height: 1.5em;
}

section#s-reviews h1 { color: #000; }

section#s-reviews {
	font-family: 'Avenir LT W01 45 Book', Helvetica, Arial;
	line-height: 1.4;
	color: #5b8187;
}

section#s-reviews p {
	padding-top: 0.5em;
}

section#s-reviews span.author {
	font-family: 'Avenir LT W01 45 Book', Helvetica, Arial;
	color: #000;
}

a.contact {
	display: block;
	font-family: 'Avenir LT W01 85 Heavy', Helvetica, Arial;
	font-size: 14px;
}
a.contact img {
	height: 18px;
    margin: 4px 2px -4px 0px;
	padding-top: 2px;
}

footer {
	display: block;
	width: 100%;
	height: 3.5em;
	margin-top: 1.5em;
	padding-top: 1.5em;
	padding-bottom: 2.0em;
	background-color: #fff;

	text-align: center;
	font-size: 10px;
	color: #708090;
}
footer div {
	width: 70%;
	max-width: 1200px;
	margin: 0 auto 0 auto;

}
.footer_slogan {
	float: left;
	color: #000;
}

/* At certain viewport width, turn off relative side margins. */
@media	screen and (orientation: portrait) and (max-width: 600px) and (-webkit-min-device-pixel-ratio : 2),
		screen and (orientation: portrait) and (max-width: 600px) and (min--moz-device-pixel-ratio: 2),
		screen and (orientation: portrait) and (max-width: 600px) and (min-device-pixel-ratio : 2),
		screen and (orientation: portrait) and (max-width: 780px) and (-webkit-min-device-pixel-ratio : 1),
		screen and (orientation: portrait) and (max-width: 780px) and (min--moz-device-pixel-ratio : 1),
		screen and (orientation: portrait) and (max-width: 780px) and (min-device-pixel-ratio : 1) {

	main { width: 437px; } /* 437 / 780 = 56 % */
	header .Center-Block, footer > div { width: 437px !important; }

}

@media screen and (device-width: 1024px) {
	main { width: 819px; } /* 437 / 780 = 56 % */
	header .Center-Block, footer > div { width: 819px !important; }
}

/* At certain device and viewport width, turn off relative side margins. */
@media	screen and (max-width: 1440px) and (-webkit-max-device-pixel-ratio : 1),
		screen and (max-width: 1440px) and (max--moz-device-pixel-ratio : 1),
		screen and (max-width: 1440px) and (max-device-pixel-ratio : 1) {

	main { width: 806px; } /* 806 / 1440 = 56 % */
	header .Center-Block, footer > div { width: 806px !important; }

}

/* At certain viewport width, remove side margins. */
@media	screen and (orientation: portrait) and (max-width: 600px) and (-webkit-min-device-pixel-ratio : 2),
		screen and (orientation: portrait) and (max-width: 600px) and (min--moz-device-pixel-ratio : 2),
		screen and (orientation: portrait) and (max-width: 600px) and (min-device-pixel-ratio : 2),
		screen and (orientation: portrait) and (max-width: 437px) and (-webkit-min-device-pixel-ratio : 1),
		screen and (orientation: portrait) and (max-width: 437px) and (min--moz-device-pixel-ratio : 1),
		screen and (orientation: portrait) and (max-width: 437px) and (min-device-pixel-ratio : 1),
		screen and (max-width: 806px) and (-webkit-min-device-pixel-ratio : 1),
		screen and (max-width: 806px) and (min--moz-device-pixel-ratio : 1),
		screen and (max-width: 806px) and (min-device-pixel-ratio : 1) {

	body {
		font-size: 7vw;
	}

	header .Center-Block { width: 96% !important; padding: 1px 0px 0px 4%; }

	main {
		width: 100%;
		margin: 0;
	}
	footer div {
		width: 96% !important;
		padding: 0 2% 0 2%;
	}

	div#main_top_margin { overflow: hidden !important; margin-bottom: 0 !important; }

	img#top_photo_logo {
		font-size: 4vw;
		height: 3.5em;
	}

	section#s-courses-services,
	section#s-contact_us {
		padding: 220px 2em 2em 1.5em;
	}

	/* Move image to top of section instead of floating to the left. */
	section#s-courses-services .img_container,
	section#s-contact_us .img_container {
		width: 100%;
		height: 100px;

		bottom: auto;
		padding-bottom: 30%;

		/*  Left margin should be negative of container left padding to make the
			image fill 100% of the width of the container. */
		/*margin: 0 0 2em -2em;*/

		background-position: 50% 30%;

		/*overflow: hidden;*/
	}

	section#s-contact_us .img_container {
		background-size: cover;
	}

	section#s-courses-services .img_container img,
	section#s-contact_us .img_container img {
		position: absolute;
		height: auto;
		margin: auto;

		left: 0;
		right: 0;
	}
	/*  The top and bottom relative positions affect the vertical centering
	anchor. */
	section#s-courses-services .img_container img {
		top: 185%; bottom: 70%;
	}
	section#s-contact_us .img_container img {
		top: 60%; bottom: 70%;
	}
	section#s-about-us, section#s-reviews {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		column-count: 1;
	}

	footer { margin-top: 0; }

	#footer_slogan {
		display: none;
	}

}

@media	screen and (orientation: landscape) and (max-width: 806px) and (-webkit-min-device-pixel-ratio : 1),
		screen and (orientation: landscape) and (max-width: 806px) and (min--moz-device-pixel-ratio : 1),
		screen and (orientation: landscape) and (max-width: 806px) and (min-device-pixel-ratio : 1) {
		
		body {  font-size:5vw;}
		}


@media	screen and (orientation: portrait) and (max-width: 600px) and (-webkit-min-device-pixel-ratio : 2),
		screen and (orientation: portrait) and (max-width: 600px) and (min--moz-device-pixel-ratio : 2),
		screen and (orientation: portrait) and (max-width: 600px) and (min-device-pixel-ratio : 2),
		screen and (orientation: portrait) and (max-width: 437px) and (-webkit-min-device-pixel-ratio : 1),
		screen and (orientation: portrait) and (max-width: 437px) and (min--moz-device-pixel-ratio : 1),
		screen and (orientation: portrait) and (max-width: 437px) and (min-device-pixel-ratio : 1),
		screen and (max-width: 806px) and (-webkit-min-device-pixel-ratio : 1),
		screen and (max-width: 806px) and (min--moz-device-pixel-ratio : 1),
		screen and (max-width: 806px) and (min-device-pixel-ratio : 1) {

	header img { display: inline-block; }

	.header_logotype,
	div#main_top_margin img {
		margin: 0.25em 0;
	}

	div#main_top_margin span {display: none;}

	#menu-button {
		display: inline-block;

		width: 20%;
		height: 100%;
		max-height: 100%;
		margin: 0;
		padding: 0 16px 2px 2px;

		/* Font size is percentage of the header's font size. */
		font-family: inherit;
		font-size: inherit;
		color: #fff;

		text-align: right;

		background: none;

		border-radius: 0;
		border: none;

		box-shadow: none;

		cursor: pointer;
	}
	#menu-button img {
		height: 18px;
		margin: 0;
	}
	#menu-button:focus {
		pointer-events: none;
		outline: none;
	}
	#menu-button:focus::-moz-focus-inner {
		border: 0;
	}
	#menu-button:focus + menu {
		opacity: 1;
		visibility: visible;
	}
	header menu {
		display: block;

		position: absolute;
		top: 100%;
		right: 0;

		margin: 0;
		padding: 0.5em 1em;

		text-align: right;

		background: #000;

		opacity: 0;
		visibility: hidden;
		transition: visibility 0.5s;
	}

	header menu a {
		display: block;
	}

}

/*@media screen and (orientation: portrait) and (max-width: 437px) and (-webkit-min-device-pixel-ratio : 1),
	   screen and (orientation: portrait) and (max-width: 437px) and (min--moz-device-pixel-ratio : 1),
	   screen and (orientation: portrait) and (max-width: 437px) and (min-device-pixel-ratio : 1) {
	main { font-size: 18px; }
}

@media	screen and (orientation: portrait) and (-webkit-min-device-pixel-ratio : 2),
		screen and (orientation: portrait) and (min--moz-device-pixel-ratio: 2),
		screen and (orientation: portrait) and (min-device-pixel-ratio : 2) {
	main { font-size: 12px; }
	body { font-size: 4.5vw; }
}*/