@font-face {
  font-family: 'Sriracha';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/Sriracha.ttf') format('truetype');
}

html, body{
	margin:0;
	padding:0;
	height: 100%;
	background-color: #fae1c8;
	display: flex;
	flex-direction: column;
	height: 100%;
	width:100%;
}
a{
	text-decoration: none;
}

.none{
	display: none;
}
/*
Layout
*/
.headerlogo_contaner{
	display: flex;
	flex-flow:row;
}
.header_contaner{
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 100%;
}
.footer_container{
	display: flex;
	justify-content: space-around;
}
.footer_block{
	display: flex;
	flex-flow: column;
}
.bottom_menu_container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items:  center;
	flex-wrap: wrap;
}
.head_menu_container > div{
	display: flex;
	justify-content: space-around;
	align-items:  center;
}
.content{
	display: flex;
    flex: 1 0 auto;
	align-items:  center;
}

@media (orientation: landscape) {
	.footer_container{
		flex-flow:row;
		align-items: center;
	}
	.head_menu_container{
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			grid-template-rows: repeat(2, 1fr);
	}
	.signup_box{
		grid-area: 1/1/3/3;
	}
	/*.preschool_box{
		grid-area: 2/1/3/2;
	}*/
	/*.tutors_box{
		grid-area: 2/1/3/3;
	}	*/
	.education_box{
		grid-area: 1/3/3/5;
	}
	.consultation_box{
		grid-area: 1/5/3/7;
	}
	/*.family_box{
		grid-area: 2/5/3/7;
	}*/
	/*.articles_box{
		grid-area: 2/6/3/7;
	}*/
	.content{
		flex-direction: row;
		justify-content: space-around;
	}
}
@media (orientation: portrait) {
	.footer_container{
		flex-flow:column;
		align-items: left;
	}
	.head_menu_container{
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			grid-template-rows: repeat(2, 1fr);
	}
	.signup_box{
		grid-area: 2/1/2/4;
	}
	/*.preschool_box{
		grid-area: 2/1/3/3;
	}*/
	/*.tutors_box{
		grid-area: 2/1/4/3;
	}	*/
	.education_box{
		grid-area: 1/3/2/5;
	}
	.consultation_box{
		grid-area: 2/4/2/7;
	}
	/*.family_box{
		grid-area: 2/5/4/7;
	}*/
	/*.articles_box{
		grid-area: 3/5/4/7;
	}*/
	.content{
		flex-direction: column;
	}
	.content > .under_text{
		margin-top:100px;
	}
}

/*
Header
*/
.head_logo{
	width: 159px;
	height: 159px;
	margin-left: 20px;
	margin-top: 20px;
}
.head_title{
	font-family: 'Sriracha';
	font-size: 40px;
	line-height: 50px; /*as head_img*/
	color: #98640e;
	width: 100%;
	text-align: center;
	margin: 20px 0 30px 0;
}
.head_title span{
	letter-spacing: -6px;
}
.head_title > div{
	display: inline-box;
}
.head_title > div:first-child{
	color: #b67e2b;
}
.subhead_title, .under_text{
	font-family: 'Sriracha';
	font-style: italic;
	margin: 0;
	color: #98640e;
	text-align: center;
	padding-top:0px;
}
body > .subhead_title{
	margin: 25px 0 0 0;
}
.recruitment{
	color: #FFA500 !important;
}

@media (orientation: landscape) {
	.head_title{
		font-size: 40px;
		line-height: 40px;
	}
	.subhead_title, .under_text{
		font-size: 30px;
		line-height: 30px;
	}
}
@media (orientation: portrait) {
	.head_title{
		font-size: 54px;
		line-height: 54px;
	}
	.subhead_title, .under_text{
		font-size: 46px;
		line-height: 46px;
	}
	.headerlogo_contaner > div.head_logo{
		display: none;
	}
}

/*
Footer
*/

.footer{
	margin-top:20px;
	color:  #c3ab93;
}
.footer a{
	color:  #c3ab93;
}

.footer_info_wrapper{
	background-color: #AD7B24;
}
.footer_info{
	background-color: #84570a;
	padding-left: 20px;
	padding-bottom: 5px;
	position: relative;
	z-index: 1;
	font-family: 'Sriracha';	
}

.spacer_bottom {
	fill: #AD7B24;
	position: relative;
	z-index: 0;
	top: 10px;
}
.spacer_footer {
	background-color: #AD7B24;
	fill: #84570a;
	position: relative;
	z-index: 0;
	top: 5px;
}
.ref_icon{
	padding-right: 20px;		
}
.ref_icon:last-child{
	padding-right: 0px;		
}
.ref_icon img{
	vertical-align: middle;	
}
.ref_icon span{
	display: inline-block;
	line-height: 42px;
	color:  #c3ab93;
	vertical-align: middle;	
}

.phone_info > a {
	padding-left: 5px;
}
.question{
	padding-left: 40px;
}
.footer_line{
	padding-top: 10px;
}
.footer_line a{
	display: inline-block;
}
.footer_line a:hover, .footer_line a:hover span{
	transform: scale(1.05);
	color: #ffffcc;
}

@media (orientation: landscape) {
	.ref_icon img{
		width: 42px;
		height: 42px;
	}
	.phone_info, .post_info{
		display: inline-block;
	}
	.post_info{
		padding-left: 30px;
	}
	.footer_info{
		font-size:16px;
	}
}
@media (orientation: portrait) {
	.ref_icon span{
		 white-space: pre-line;
		 overflow-wrap: break-word;
		 width: 180px;
	}
	.ref_icon img{
		width: 84px;
		height: 84px;
	}
	.phone_info, .post_info{
		display: block;
	}
	.footer_info{
		font-size:38px;
		padding-top: 20px;
	}
}

/*
Bottom menu
*/
.bottom_menu{
	background-color: #AD7B24;
}

.bottom_menu_item{
	text-decoration: none;
	text-align: center;
	display: inline-block;
    font-family: 'Sriracha';
	font-weight: bold;
	font-style: italic;
	padding-top: 10px;
	position: relative;
	z-index: 1;
}
a.bottom_menu_item:link, a.bottom_menu_item:visited {
	color: #fae1c8;
}
a.bottom_menu_item:hover {
	transform: scale(1.03);
	color: #ffffcc;
}

@media (orientation: landscape) {
	.bottom_menu_item{
		font-size: 24px;	
		flex-basis: content;
	}
}
@media (orientation: portrait) {
	.bottom_menu_item{
		font-size: 42px;	
		flex-basis: 45%;
	}
}

/*
Head menu
*/
.head_menu{
	margin: 20px 20px 25px 20px;
}
.head_menu_button{
	font-family: 'Sriracha';
	font-weight: bold;
	font-style: italic;
	line-height: 20px;
	text-align: center;
	display: flex;
	justify-content: space-around;
	align-items:  center;
}
a.head_menu_button:link, a.head_menu_button:visited {
	color: #fae1c8;
	background-color: #AD7B24;
}
a.head_menu_button:hover {
	transform: scale(1.03);
	color: #ffffcc;
}

.head_menu_round{
	border-radius: 50%;
	font-weight: bold;
	font-style: italic;
	font-family: 'Sriracha';
	text-align: center;
	position: relative; 
}
a.head_menu_round:link, a.head_menu_round:visited {
	color: #fae1c8;
	background-color: #AD7B24;
}
a.head_menu_round:hover {
	transform: scale(1.03);
	color: #ffffcc;
}

.head_menu_round > div{
    display: inline-block;
	top: 50%; left: 50%; 
	transform: translate(-50%, -50%);
	position: absolute; 
}
.head_menu_round > span{
    display: block;
}
.head_menu_ref{
    font-family: 'Sriracha';
	font-weight: bold;
	font-style: italic;
	padding: 0px;	
	text-decoration: none;
	text-align: center;
}
a.head_menu_ref:link, a.head_menu_ref:visited {
	color: #98640e;
}
a.head_menu_ref:hover {
	transform: scale(1.03);
	color: #cc6633;
}
@media (orientation: landscape) {
	.head_menu_button{
		width: 195px;
		height: 58px;
		border-radius: 50px;
		font-size: 18px;	
		line-height: 24px;
	}
	.head_menu_round{
		width: 250px;
		height: 210px;
	}
	.head_menu_round .top{
		font-size: 28px;	
		line-height: 30px;
	}
	/*.head_menu_round .bot{
		font-size: 18px;
		line-height: 24px;
	}*/
	.head_menu_ref{
		width: 180px;
		font-size: 20px;	
		line-height: 24px;
	}
}
@media (orientation: portrait) {
	.head_menu_button{
		width: 390px;
		height: 120px;
		border-radius: 70px;
		font-size: 36px;	
		line-height: 36px;
	}
	.head_menu_round{
		width: 500px;
		height: 280px;
	}
	.head_menu_round .top{
		font-size: 42px;	
		line-height: 46px;
	}
	/*.head_menu_round .bot{
		font-size: 30px;
		line-height: 30px;
	}*/
	.head_menu_ref{
		width: 300px;
		font-size: 36px;	
		line-height: 36px;
	}
}

/*
Content
*/
.quote{
	padding: 20px 14px 50px 14px;	
	color: #98640e;
	font-family: 'Sriracha';
	text-indent: 25px;
}

.resource_container{
	position: relative;
	margin-top: 30px;
}
.video_ring b , .photo_ring b, .reviews_ring b{
	position: absolute;
	left: 50%;
	width: 0;
	font-family: 'Sriracha';
	color: #98640e;
}
.video_ring b , .photo_ring b{
	transform-origin: 0% 100%;
	bottom: 50%; 
	padding-bottom: 50%;
}
.reviews_ring b {
	transform-origin: 50% 0;
	top: 50%; 
	padding-top: 50%;	
}

.video_ring, .photo_ring, .reviews_ring{
	position: absolute;
	border-radius: 50%; 
	display: box;
}
.video_ring{
	top: 90px;
	left: 0px;
	z-index: 3;
}
.photo_ring{
	top: 0px;
	left: 160px;
	z-index: 2;
}
.reviews_ring{
	background-color: #ad7b24;
	z-index: 1;
}
.video_ring video , .photo_ring img{
	display: block;
	overflow: hidden;
	border-radius: 50%;
	position: absolute;
}

a.photo_ring:hover{
	z-index: 99;
}
/*a.reviews_ring:hover{
	z-index: 99;
}*/

.video_ring b:nth-of-type(1) { transform: rotate(270deg); }
.video_ring b:nth-of-type(2) { transform: rotate(276deg); }
.video_ring b:nth-of-type(3) { transform: rotate(282deg); }
.video_ring b:nth-of-type(4) { transform: rotate(288deg); }
.video_ring b:nth-of-type(5) { transform: rotate(294deg); }
.video_ring b:nth-of-type(6) { transform: rotate(300deg); }
.video_ring b:nth-of-type(7) { transform: rotate(306deg); }
.video_ring b:nth-of-type(8) { transform: rotate(312deg); }
.video_ring b:nth-of-type(9) { transform: rotate(318deg); }
.video_ring b:nth-of-type(10) { transform: rotate(324deg); }
.video_ring b:nth-of-type(11) { transform: rotate(330deg); }
.video_ring b:nth-of-type(12) { transform: rotate(336deg); }

.photo_ring b:nth-of-type(1) { transform: rotate(18deg); }
.photo_ring b:nth-of-type(2) { transform: rotate(26deg); }
.photo_ring b:nth-of-type(3) { transform: rotate(32deg); }
.photo_ring b:nth-of-type(4) { transform: rotate(38deg); }
.photo_ring b:nth-of-type(5) { transform: rotate(44deg); }
.photo_ring b:nth-of-type(6) { transform: rotate(50deg); }
.photo_ring b:nth-of-type(7) { transform: rotate(56deg); }
.photo_ring b:nth-of-type(8) { transform: rotate(62deg); }
.photo_ring b:nth-of-type(9) { transform: rotate(68deg); }
.photo_ring b:nth-of-type(10) { transform: rotate(74deg); }
.photo_ring b:nth-of-type(11) { transform: rotate(80deg); }

.reviews_ring b:nth-of-type(1) { transform: rotate(349deg); }
.reviews_ring b:nth-of-type(2) { transform: rotate(342deg); }
.reviews_ring b:nth-of-type(3) { transform: rotate(336deg); }
.reviews_ring b:nth-of-type(4) { transform: rotate(330deg); }
.reviews_ring b:nth-of-type(5) { transform: rotate(324deg); }
.reviews_ring b:nth-of-type(6) { transform: rotate(318deg); }

.feature_menu{
	margin-top: 25px;
	margin-bottom: 25px;
}
a.feature_menu_item:link, a.feature_menu_item:visited {
	color: #98640e;
}
a.feature_menu_item:hover{
	transform: scale(1.03);
	color: #cc6633;
}

@media (orientation: landscape) {
	.quote{
		font-size: 18px;
		width: 500px;
	}
	.resource_container{
		width: 500px;
		height: 350px;
	}
	.resource_container b {
		font-size: 22px;
	}
	.video_ring, .photo_ring , .reviews_ring, .video_ring video, .photo_ring img{
		width: 270px;
		height: 270px;
	}
	.reviews_ring{
		top: 70px;
		left: 110px;
	}
	.feature_menu_item{
		width: 500px;
	}
}
@media (orientation: portrait) {
	.quote{
		font-size: 32px;
		width: 90%;
		display:none;
	}
	.resource_container{
		height: 600px;
		width: 600px;
	}
	.resource_container b {
		font-size: 34px;
	}
	.video_ring, .photo_ring , .reviews_ring, .video_ring video, .photo_ring img{
		height: 450px;
		width: 450px;
	}
	.reviews_ring{
		top: 100px;
		left: 130px;
	}
	.feature_menu_item{
		width: 90%;
	}
}

/*
Signup form
*/
.field_error, .form_error{
	color: red;
	text-align: center;
}
.mark_error{
	border-color:red;
	color:red;
}
.org_content, .questionary_content{
	display: flex;
	justify-content: center;
    flex: 1 0 auto;
	align-items:  stretch;
	margin: 40px;
}

.select_form{
	font-family: 'Sriracha';
	color: #98640e;
	border-color:#98640e;
	border-style: solid;
}

.layout_button{
	display: flex;
	justify-content: center;
}

.form_button{
	border: 0;
	padding: 0 20px;
	font-family: 'Sriracha';
	text-align: center;
	color: #fae1c8;
	background-color: #ad7b24;
}

.form_button:hover {
	background-color: #b38029;
}

.form_button:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 60%),
    inset 2px 2px 3px rgb(0 0 0 / 60%);
}
#warning{	
	color: red;
	margin-top:30px;
}

@media (orientation: landscape) {
	.select_form{
		font-size: 20px;
	}
	.select_form label{
		line-height: 50px;
	}
	.form_button{
		margin-right: 20px;
		margin-top: 20px;
		width: 180px;
		font-size: 18px;
		line-height: 2.5;
		border-radius: 10px;
		text-shadow: 1px 1px 1px #000;
		background-image: linear-gradient(
			to top left,
			rgb(0 0 0 / 10%),
			rgb(0 0 0 / 10%) 20%,
			rgb(0 0 0 / 0%)
		);
		box-shadow:
			inset 2px 2px 3px rgb(255 255 255 / 40%),
			inset -2px -2px 3px rgb(0 0 0 / 40%);
	}
	#warning{	
		font-size: 22px;
	}
}
@media (orientation: portrait) {
	.select_form{
		font-size: 40px;
	}
	.select_form> input, .select_form > label {
		font-size: 45px;
	}
	.select_form label{
		line-height: 70px;
	}
	input[type=radio],input[type=checkbox] {
	  transform: scale(2.6)  translate(-5%, -15%);
	  vertical-align: middle;
	  margin-right: 15px;
	 font-size: 45px;
	}
	.form_button{
		margin-right: 40px;
		margin-top: 40px;
		width: 380px;
		font-size: 45px;
		line-height: 2.5;
		border-radius: 20px;
		text-shadow: 2px 2px 2px #000;
		background-image: linear-gradient(
			to top left,
			rgb(0 0 0 / 15%),
			rgb(0 0 0 / 15%) 20%,
			rgb(0 0 0 / 0%)
		);
		box-shadow:
			inset 5px 5px 8px rgb(255 255 255 / 40%),
			inset -5px -5px 8px rgb(0 0 0 / 40%);
	}
	#warning{	
		font-size: 45px;
	}
}
/*
Questionary
*/

.questionary_content form{
	font-family: 'Sriracha';
	color: #98640e;
}
.questionary_content textarea{
	resize: none;
}

.questionary_content option, .questionary_content select{
	font-family: 'Arial';
	color: #000;
	background-color: #fff; 
}

.indent{
	margin-top: 12px;
}

.errorbox{
	border-color: red;
}

.layout_questionary{
	display: flex;
	flex-direction: column;
}

.label_left {
	display: inline-block;
	text-align: left;
}
.label_top {
	display: block;
	text-align: left;
}
.form_comment{
	display: block;
	font-style: italic;
}
.questionary_content .margleft{
	margin-left: 20px;
}

@media (orientation: landscape) {
	.questionary_content form{
		font-size: 16px;
	}
	.label_left {
		width: 270px;
	}
	.questionary_content input[type="text"], .questionary_content input[type="number"]{
		font-size: 16px;
		width: 370px;
	}
	.questionary_content option, .questionary_content select{
		font-size: 16px;
		width: 378px;
		box-sizing: border-box; 
	}
	.questionary_content textarea{
		width: 585px;
		height: 75px;
	}
}
@media (orientation: portrait) {
	.questionary_content form{
		font-size: 36px;
	}
	.label_left {
		width: 370px;
	}
	.questionary_content input[type="text"], .questionary_content input[type="number"]{
		font-size: 36px;
		width: 470px;
	}
	.questionary_content select{
		font-size: 36px; 
		width: 480px; 
	} 
	.questionary_content option{
		font-size: 14px; 
	}
	.questionary_content textarea{
		width: 685px;
		height: 75px;
		font-size: 36px; 
	}
}
/*
Content
*/
.content_wrap{
	align-self: flex-start;
	display: block;
}
.introduction, .list_text li{
	font-family: 'Sriracha';
	color: #98640e;
}
@media (orientation: landscape) {
	.introduction, .list_text li{
		font-size: 20px;
		margin: 20px;
	}
	.content_wrap{
		width: 50%;
	}
}
@media (orientation: portrait) {
	.introduction, .list_text li{
		font-size: 36px;
		margin: 30px;
	}
	.content_wrap{
		width: 100%;
	}
}

/*
Organizer
*/

.photo{
	width:260px;
	height:426px;
	margin-right: 30px;
	margin-bottom: 30px;
	border-radius: 50%; 
}
.user_name{
	font-family: 'Sriracha';
	text-wrap:nowrap;
	color: #98640e;
	width: 100%;
	text-align: center;  
}
.layout_button{
	display: flex;
	justify-content: center;
}
@media (orientation: landscape) {
	.user_name{
		line-height: 25px;
		font-size: 25px;
	}
}
@media (orientation: portrait) {
	.user_name{
		line-height: 36px;
		font-size: 36px;
	}
}