@-ms-viewport{
	width: device-width;
 }

 :root *, :root *::before, :root *::after {
	box-sizing: border-box;
 }

html {
	margin: 0;
	padding: 0;

	font-family: 'Inter var', sans-serif;
	font-size: 62.5%;
	font-weight: 400;
	color: hsla(241,27%,23%,1.00);

	font-variant-ligatures: contextual common-ligatures;
	text-rendering: optimizeLegibility;
  	-webkit-text-size-adjust: none;
  	-ms-text-size-adjust: 100%;
  	text-size-adjust: none;

  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
	
	background: hsla(219,17%,96%,1.00);
	background: hsla(237,12%,96%,1.00);
}

html * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: 0;
}

body {
	display: flex;
	flex-direction: column;
}

a {
	color: hsla(212,100%,46%,1.00);
	text-decoration: none;
}

/* -------- */

.block {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	padding: 0 32px;
}

@media screen and (max-width: 840px) {
	.block {
		max-width: 100%;
		padding: 0 24px;
	}
}

@media only screen and (max-width: 640px) {
	.block {
		max-width: 100%;
		padding: 0 16px;
	}
}

/* -------- */

input, textarea, select {
	-webkit-appearance: none;
	appearance: none;
	padding: 10px 12px;
	font-family: 'Inter var', sans-serif;  font-size: 1.7rem;
	font-weight: 400;
	color: hsla(106,0%,20%,1.00);
	letter-spacing: -0.024em;
	border: 2px hsla(215,13%,84%,1.00) solid;
	border-radius: 4px;
	background: hsla(100,100%,100%,1.00);
}

select {
	max-width: 100%;
	padding-right: 64px;
	font-size: 1.5rem;
	font-family: 'Inter var', sans-serif;  font-size: 1.7rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 2.4rem 2.4rem;
	background-repeat: no-repeat;
	background-position: right 8px top 50%;
}

/* -------- */

nav {
	width: 100%;
	padding: 32px 0;
	background: hsla(100,100%,100%,1.00);
}

@media only screen and (max-width: 840px) {
	nav {
		padding: 24px 0;
	}
}

nav .block .wrapper {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

nav .logo {
	width: 192px;
	height: 24px;
}

nav .btn-sign-up {
	width: 100%;
	max-width: 200px;
	padding: 15px 24px 13px 24px;
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	color: hsla(100,100%,100%,1.00);
	background: hsla(209,86%,58%,1.00);
	border-radius: 4px;
	letter-spacing: 0.032em;
}

/* -------- */

header {
	width: 100%;
	background: hsla(241,27%,23%,1.00);
}

header .block .wrapper {
	width: 100%;
	padding: 64px 32px 103px 32px;
	font-size: 2.4rem;
	color: hsla(100,100%,100%,0.84);
	text-align: center;
	line-height: 1.45;
	border-radius: 12px;
}

header h1 {
	margin: -4px 0 32px 0;
	font-size: 4.8rem;
	font-weight: 600;
	color: hsla(195,94%,64%,1.00);
	line-height: 1;
}

@media only screen and (max-width: 840px) {
	header .block .wrapper {
		padding: 48px 24px 87px 24px;
		font-size: 2.1rem;
	}

	header h1 {
		font-size: 4.4rem;
	}
}

header strong {
	font-weight: 600;
	color: hsla(195,94%,64%,0.92);
}

header span.trademark {
	letter-spacing: 0.08em;
	color: hsla(100,100%,100%,0.80);
}
header span.trademark strong {
	color: hsla(100,100%,100%,0.80);
}

header p + p {
	margin-top: 24px;
}

header p.secondary {
	max-width: 804px;
	margin-left: auto;
	margin-right: auto;
	font-size: 2.1rem;
}
header p.secondary.top {
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px hsla(195,94%,64%,0.32) solid;
}

/* -------- */

header.educator .block .wrapper {
	width: 100%;
	padding: 128px 0 64px 0;
	text-align: left;
}

header.educator h2 {
	margin: -4px 0 0 0;
	font-size: 1.7rem;
	color: hsla(195,94%,64%,1.00);
	text-transform: uppercase;
}


/* -------- */

.card_filter {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 24px;
	background: hsla(100,100%,100%,1.00);
	border-radius: 6px;
	box-shadow: 0 1px 3px 0 hsla(0,0%,0%,0.10),0 1px 2px 0 hsla(0,0%,0%,0.06);

	transform: translateY(-48px);
}

.card_filter legend {
	width: 100%;
	margin: -2px 0 0 0;
	padding-bottom: 8px;
	font-size: 1.6rem;
	font-weight: 600;
	text-transform: uppercase;
}

.card_filter .fieldwrap {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.card_filter .widgets {
	max-width: 100%;
	margin-right: 12px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-grow: 1;
}

.card_filter .widgets select {
	width: calc((100% - 24px) / 3);
}

input[type="submit"] {
	padding: 10px 24px;
	border: 0;
	font-weight: 600;
	color: hsla(100,100%,100%,1.00);
	background: hsla(350,99%,68%,1.00);
	border-radius: 6px;
}

/* -------- */

section.list {
	width: 100%;
	padding: 0 0 48px 0;
}

a.link_detail {
	display: block;
	color: hsla(241,27%,23%,1.00);
}
a.link_detail + a.link_detail {
	margin-top: 24px;
}

.card_educator {
	width: 100%;
	padding: 24px;
	background: hsla(100,100%,100%,1.00);
	border-radius: 6px;
/*	box-shadow: 0 1px 3px 0 hsla(0,0%,0%,0.10),0 1px 2px 0 hsla(0,0%,0%,0.06);*/
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.card_educator .educator_info {
	flex-grow: 1;
}
.card_educator .educator_name {
	width: 100%;
	margin-bottom: 4px;
	font-size: 2.4rem;
	font-weight: 600;
	color: hsla(209,86%,58%,1.00);
}
.card_educator .educator_quick_view {
	width: 100%;
	font-size: 1.8rem;
	font-weight: 500;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}
/*.card_educator .educator_quick_view div {
	margin-right: 24px;
	font-size: 1.7rem;
	font-weight: 500;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}*/

.card_educator .icon_pointer {
	width: 32px;
	height: 32px;
	margin-left: 48px;
	
	background-image: url("/_img/icon.pointer.svg");
	background-size: 32px auto;
	background-position: center center;
	background-repeat: no-repeat;

	opacity: 0.16;
	transition: opacity 0.3s ease-in-out;
}

a.link_detail:hover .icon_pointer {
	opacity: 1.00;
}

/* -------- */

.educator_profile {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 48px;
	font-size: 1.8rem;
	line-height: 1.5;
	background: hsla(100,100%,100%,1.00);
	border-radius: 6px;
	/*box-shadow: 0 1px 3px 0 hsla(0,0%,0%,0.10),0 1px 2px 0 hsla(0,0%,0%,0.06);*/

	transform: translateY(-48px);
}

@media only screen and (max-width: 840px) {
	.educator_profile {
		padding: 32px;
	}
}

.educator_profile h1 {
	margin: -3px 0 8px 0;
	font-size: 3.2rem;
	line-height: 1;
}

.educator_profile p + p {
	margin: 16px 0 0 0;
}

.educator_profile h2 {
	width: 100%;
	margin: 32px 0 0 0;
	padding: 27px 0 0 0;
	font-size: 1.7rem;
	font-weight: 900;
	color: hsla(241,27%,23%,1.00);
	text-transform: uppercase;
	border-top: 1px hsla(241,27%,23%,0.08) solid;
}
.educator_profile p + h2 {
	margin-top: 25px;
}

/* -------- */

.the_form {
	width: 100%;
	max-width: 960px;
	margin: 48px auto 0 auto;
	padding: 48px;
	background: hsla(100,100%,100%,1.00);
	border-radius: 6px;
	box-shadow: 0 1px 3px 0 hsla(0,0%,0%,0.10),0 1px 2px 0 hsla(0,0%,0%,0.06);

	transform: translateY(-48px);
}

@media only screen and (max-width: 840px) {
	.the_form {
		padding: 32px;
	}
}

.the_form legend {
	width: 100%;
	font-size: 2.8rem;
	font-weight: 800;
	color: hsla(241,27%,23%,1.00);
	line-height: 1;
}

.the_form .fieldset {
	width: 100%;
	margin: 24px 0 0 0;
	padding: 24px 0 0 0;
	border-top: 2px hsla(241,27%,23%,0.08) solid;
}

.the_form label {
	width: 100%;
	margin: 0 0 6px 0;
	font-size: 1.8rem;
	font-weight: 900;
	display: block;
}

.the_form input[type="text"] {
	width: 50%;
}

.the_form textarea {
	width: 100%;
	height: 128px;
}

.the_form input + label {
	margin-top: 30px;
}

.the_form input[type="submit"] {
	background: hsla(209,86%,58%,1.00);
}

/* -------- */

footer {
	width: 100%;
	margin-top: auto;
	background: hsla(195,94%,64%,0.24);
}

footer a {
	font-weight: 500;
}

footer .block .wrapper {
	width: 100%;
	padding: 32px 0;
	font-size: 1.6rem;
	line-height: 1.5;
}

footer .basics {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}

footer .basics div:first-of-type {
	width: 64%;
}

footer h3 {
	width: 100%;
	margin: 0 0 8px 0;
	font-size: 1.5rem;
	font-weight: 700;
	text-transform: uppercase;
}

footer p + p {
	margin-top: 12px;
}

footer .disclaimers {
	width: 100%;
	margin-top: 32px;
	padding-top: 32px;
	border-top: 2px hsla(241,27%,23%,0.16) solid;
}

@media only screen and (max-width: 720px) {
	nav .logo {
		width: 128px;
		height: 16px;
	}

	nav .btn-sign-up {
		width: auto;
		max-width: auto;
		padding: 15px 16px 13px 16px;
		font-weight: 600;
		letter-spacing: -0.032em;
	}

	header .block .wrapper {
		padding: 48px 16px 87px 16px;
		font-size: 1.7rem;
	}

	header h1 {
		margin-bottom: 16px;
		font-size: 2.1rem;
		line-height: 1.2;
	}

	.card_filter {
		padding: 16px;
		transform: translateY(-42px);
	}

	.card_filter legend {
		font-size: 1.4rem;
	}

	.card_filter .widgets {
		margin-right: 0;
	}

	.card_filter .widgets select {
		width: 100%;
	}

	.card_filter .widgets select + select {
		margin-top: 12px;
	}

	input[type="submit"] {
		width: 100%;
		margin-top: 12px;
	}

	a.link_detail + a.link_detail {
		margin-top: 16px;
	}

	.card_educator {
		padding: 16px;	
	}

	.card_educator .educator_name {
		font-size: 1.8rem;
	}

	.card_educator .educator_quick_view {
		margin-right: 16px;
		font-size: 1.6rem;
		line-height: 1.45;
	}

	.card_educator .icon_pointer {
		display: none;
	}

	.educator_profile {
		padding: 24px 16px;
		font-size: 1.6rem;
	}

	.educator_profile h1 {
		font-size: 2.2rem;
	}

	.educator_profile h2 {
		margin: 24px 0 0 0;
		padding: 19px 0 0 0;
		font-size: 1.6rem;
	}
	.educator_profile p + h2 {
		margin-top: 17px;
	}

	.the_form {
		margin: 32px auto 0 auto;
		padding: 24px 16px;
		transform: translateY(-32px);
	}

	.the_form legend {
		font-size: 2.2rem;

	}

	.the_form .fieldset {
		width: 100%;
		margin: 24px 0 0 0;
		padding: 24px 0 0 0;
		border-top: 2px hsla(241,27%,23%,0.08) solid;
	}

	.the_form label {
		width: 100%;
		margin: 0 0 6px 0;
		font-size: 1.8rem;
		font-weight: 900;
		display: block;
	}

	footer .basics div:first-of-type, footer .basics div {
		width: 100%;
	}

	footer .basics div + div {
		margin-top: 32px;
	}
}

@media only screen and (max-width: 480px) {
	.the_form input[type="text"] {
		width: 100%;
	}
}

@media only screen and (max-width: 360px) {
	nav .btn-sign-up {
		padding: 15px 12px 13px 12px;
	}

	header .block .wrapper {
		padding: 32px 12px 71px 12px;
		font-size: 1.5rem;
	}

	header h1 {
		margin-bottom: 12px;
		font-size: 1.8rem;
	}
}