/* import fontu*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Oswald:wght@200..700&display=swap');

:root {
	
	/* main margins and paddings*/
	--main-gap-half: 12px;
	--main-gap: 24px;
	--main-gap-double: 48px;

	--green: #3B5248;
	--green-400: #50675C;
	--green-300: #687E72;
	--green-200: #81968A;
	--green-100: #9AAEA3;

	--cream: #c6b49e;
	--cream-400: #D1C2AE;
	--cream-300: #DCD1BF;
	--cream-200: #E7DFCF;
	--cream-100: #F2EEE0;

	--cuprum: #A8673E;
	--cuprum-400: #B27E5B;
	--cuprum-300: #C0957A;
	--cuprum-200: #CDAE9A;
	--cuprum-100: #DBC7BB;
	
	--coffee: #4f392b;
	--coffee-400: #695042;
	--coffee-300: #83775F;
	--coffee-200: #9E8E7B;
	--coffee-100: #B8A697;

	/* main margins and paddings*/
	--main-gap-half: 10px;
	--main-gap: 20px;
	--main-gap-double: 40px;
	--main-gap-tripple: 60px;
}

/* DEFAULT DEFINITION */
/* reset to default */
* { font-weight: inherit; font-family: inherit; font-style: inherit; color: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; vertical-align: top;  }
* { transition: background 0.4s; }

/* body */
body { background: #fff; font: 10px 'Inter', Helvetica, Arial, 'Arial CE', sans-serif; height: 100%; color: #252525;  }

/* base elements */
h1 { color: var(--green); font-size: 4.2em; font-weight: 600; margin-bottom: 20px; }
h2 { color: var(--coffee); font-size: 2.8em; margin-bottom: 10px; }
h3 { color: var(--coffee); font-size: 2em;  margin-bottom: 10px; }

h1, h2, h3 { font-family: 'Oswald', sans-sans-serif;  line-height: 1.2em; }

@media only screen and (max-width: 768px) {
	h1 { font-size: 3em; }
	h2 { font-size: 2.2em; }
}

p, ul, ol { font-size: 1.6em; margin-bottom: 20px; line-height: 1.6em;  } 

input, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }

.playground_half, .tmp_playground_half { padding: 0px 10px 0px 10px; }
.playground, .content_vop { padding: 0px 20px 0px 20px; }

strong, b { font-weight: 600; }
a:hover { cursor: pointer; }

p { margin-bottom: 1em; }
header {padding: 30px 0px 30px 0px; background: #4f392B; }

/* middle div */
.middle { max-width: 1600px; margin: 0 auto; position: relative;}
.middle_t { max-width: 960px; margin: 0 auto; position: relative;}

.middle_st { max-width: 768px; margin: 0 auto; position: relative;}

.middle_list { max-width: 1560px; margin: 0 auto; padding: 0px 20px 0px 20px; position: relative; }
.middle_formular { max-width: 960px; margin: 0 auto; padding: 0px 20px 0px 20px; position: relative; }

#top_logo { width: 250px; }

/* top */
@media only screen and (max-width: 1000px) {
	#top_logo { width: 30%; }
}

@media only screen and (max-width: 768px) {
	#top_logo { width: 50%; }
}

/* helping element */
.float_left { float: left; }
.float_right { float: right; }
.align_center { text-align: center; }
.align_right { text-align: right; }
.align_left { text-align: left; }
.hide { display: none; }

/* clearing element */
div.clear, div.util, div.cleaner{ display: block; clear: both; font-size: 0px; line-height: 0px; z-index: 2000; }

#alert {  padding: 0px; font-size: 1.6em; margin-bottom: 10px; }
.alert_message { padding: 10px;  }
.alert_color_green { background: #c0f4bd; color: Green; }
.alert_color_red { background: #c00; color: white; }

@media only screen and (max-width: 1200px) {
	.no_small_pc { display: none; }
}

@media only screen and (min-width: 1200px) {
	.is_small_pc { display: none; }
}

@media only screen and (max-width: 980px) {
	.no_tablet { display: none; }
}

@media only screen and (min-width: 980px) {
	.is_tablet { display: none; }
}

@media only screen and (max-width: 768px) {
	.no_mobile { display: none; }
}

@media only screen and (min-width: 768px) {
	.is_mobile { display: none; }
}

.margin_b { margin-bottom: var(--main-gap); }
.margin_bh { margin-bottom: 10px;}
.margin_bn  { margin-bottom: 0px;}

/*
	=======================================
	HELPERS
	=======================================
*/
.width_full { width: 100%; box-sizing: border-box; }
.width_fourty{ width: 40%; box-sizing: border-box; }
.width_half{ width: 50%; box-sizing: border-box; }
.width_eighty{ width: 80%; box-sizing: border-box; }
.width_seventy{ width: 70%; box-sizing: border-box; }
.width_sixty{ width: 60%; box-sizing: border-box; }
.width_thirty{ width: 30%; box-sizing: border-box; }
.width_quad{ width: 25%; box-sizing: border-box; }
.width_twenty{ width: 20%; box-sizing: border-box; }
.width_ten { width: 10%; box-sizing: border-box; }
.width_third{ width: 33.333%; box-sizing: border-box; }
.width_threequad{ width: 75%; box-sizing: border-box; }
.width_75pr{ width: 75%; box-sizing: border-box; }
.width_sixth { width: 16.6666666667%; box-sizing: border-box; }

@media only screen and (max-width: 960px) {
	.width_fourty, .width_half, .width_sixty, .width_thirty, .width_third, 
	.width_quad, .width_twenty, .width_threequad, .width_ten, .width_eighty, .width_75pr,
	.width_seventy{ width: 100%; }
	.width_sixth { width: 33.333%; }
}

@media only screen and (min-width: 768px) {
	.simulte_line { display: block; }
}