/* General */
#wrapper { background: #daf1eb; padding: 0 0 93px; }

/* Banner */
#banner { background: #41bfb4; border-top: 2px solid #000; border-bottom: 2px solid #000; height: 198px; position: relative; overflow: visible; margin: 55px 0 0; }
#banner div { max-width: 100%; width: max-content; width: -webkit-max-content; text-align: center; margin: auto; text-transform: uppercase; position: absolute; top: 50%; bottom: 0; left: 38%; transform: translateY( -50% ) translateX( -50% ); }
#banner div:before { content: ' '; display: block; width: 258px; height: 226px; background: no-repeat url( '../../images/pages/characters/bg/dr-hen.png' ); position: absolute; right: -290px; bottom: -50px; }
#banner p { margin: 0; font: 500 16pt/1.2 'Creative Block', 'Arial', sans-serif; color: #030303; }

/* Navigation */
#wrapper nav { margin: 50px 0; background: #000; padding: 13px 0; }
#wrapper .container:before, #wrapper .container:after { content: ' '; display: block; height: 10px; background: repeat-x url( '../../images/pages/characters/bg/border.png' ); }
#wrapper section { padding: 8px 0; }
#wrapper img { display: block; }
#wrapper nav img { max-width: 111px; max-height: 111px; }
#wrapper .owl-nav button { position: absolute; top: 50%; top: 50%; transform: translateY( -50% ); left: -48px; z-index: 99; }
#wrapper .owl-nav .owl-next { left: auto; right: -48px; }
#wrapper .owl-nav button:before { cursor: pointer; transition: all .4s; content: '\e801'; font: 700 15pt/1 'halza', sans-serif; display: block; background: #f3d54e; border: 1px solid #f3d54e; border-radius: 50%; color: #fff; width: 32px; height: 32px; text-align: center; line-height: 32px; }
#wrapper .owl-nav .owl-next:before { content: '\e802'; }
#wrapper .owl-nav button:hover:before { background: 0; color: #f3d54e; }
#wrapper .owl-nav span { display: none; }
#wrapper .big { z-index: 999; }
#wrapper .big a { width: 120px ; height: 120px; display: block; transition: all .4s; }
#wrapper .big img { transition: all .2s; transform: scale( 1.08 ); transform-origin: 50% 0; }

/* Main content */
main { border-radius: 70px; margin: 50px auto 0; box-sizing: border-box; border: 50px solid #4f5a57; width: 1065px; max-width: 90%; background: #fff; padding: 84px 69px 84px 22px; position: relative; }
main [data-id] { display: none; }
main [data-id]:first-of-type { display: block; }
main [data-id]:after { clear: both; display: block; content: ' '; }
main [data-id] figure { width: 240px; float: left; }
main [data-id] figure > img { max-height: 350px; width: auto; max-width: 100%; margin: auto; }
main [data-id] > div { float: right; width: calc( 100% - 275px ); font-size: 14pt; line-height: 1.3; }
main [data-id] section { font-size: 0; margin: 0 0 37px; }
main [data-id] section div { display: inline-block; vertical-align: top; color: #42bfb5; font-weight: 700; font-size: 16.5pt; width: 33%; box-sizing: border-box; padding: 0 20px 0 0; }
main [data-id] section div:first-of-type { width: 31%; }
main [data-id] section div:nth-of-type( 2 ) { width: 36%; }
main [data-id] section div:last-of-type { padding: 0; }
main [data-id] section label { display: block; color: #5f5e5f; font-size: 15pt; }
main .yellow-button { margin: 0px auto 0; display: none; width: max-content; width: -webkit-max-content; }

@media (max-width: 1250px) {
	nav .container { width: 668px; }
}

@media (max-width: 1000px) {
	main { border-width: 30px; }
	main [data-id] section label, main [data-id] section div, main [data-id] > div { font-size: 13pt; line-height: 1.3; }
}

@media (max-width: 900px) {
	main [data-id] figure { width: 130px; }
	main [data-id] > div { width: calc( 100% - 163px ); }
}

@media (max-width: 800px) {
	#banner { margin: 220px 0 0; height: auto; }
	#banner div { transform: none; position: relative; padding: 20px; left: auto; top: auto; box-sizing: border-box; }
	#banner div:before { bottom: 100%; right: 50%; transform: translateX( 50% ); background-size: 100%; width: 200px; height: 177px; }
	#banner div br { display: none; }
	
	#wrapper .owl-nav button:hover:before { background: #f3d54e; color: #fff; }
	
	nav .container { width: 334px; }
}

@media (max-width: 740px) {
	main { border-width: 20px; padding: 23px; }
	main [data-id] figure { float: none; margin: 0 auto 20px; }
	main [data-id] > div { float: none; width: 100%; }
	main .yellow-button { margin: 0px auto; display: none; }
}

@media (max-width: 490px) {
	main [data-id] { text-align: center; }
	main [data-id] section { margin: 0 0 6px; }
	main [data-id] section div, main [data-id] section div:first-of-type, main [data-id] section div:nth-of-type( 2 ) { width: 100%;  display: block; padding: 0; margin: 0 0 10px; }
	main [data-id] figure > img { max-height: 290px; }
	main [data-id] > div { font-size: 12pt; }
}

@media (max-width: 460px) {
	nav .container { width: 285px; }
	#wrapper nav img { max-width: 95px; max-height: 95px; }
	#wrapper .owl-nav button:before { width: 25px; height: 25px; font-size: 13pt; line-height: 25px; }
	#wrapper .owl-nav button { left: -12px; }
	#wrapper .owl-nav .owl-next { right: -12px; }
	#wrapper .big a { width: 102px; height: 102px; }
}