/*---   responsive design   ---*/
.mobile--bar { display: none; position: fixed; }
.mobile--bar::before { font-family: "Font Awesome 5 Free"; color: #222; font-weight: 600; content: '\f0c9'; }
.mobile--bar.open::before { content: '\f00d'; }

@media only screen and ( max-width: 1600px ) { 
	p, a, td, ul li, #left--box .nav--box nav ul ul > a li, #left--box .nav--box nav ul li p, #left--box .nav--box nav ul a li.double--span > span, #right--box .footer--box  { font-size: 8.5pt; } 
	
	.quote--box i { display: none; }
}

@media only screen and (max-width: 1366px) {
	p, a, td, ul li, #left--box .nav--box nav ul ul > a li, #left--box .nav--box nav ul li p, #left--box .nav--box nav ul a li.double--span > span { font-size: 10pt; }
	
	#left--box .img--bttm--box { position: fixed; bottom: .2em; width: 20%; }	
}

@media only screen and (max-width: 1024px) {
	body { background: #cfe5cf; }
	body.open { overflow: hidden; }
	
	p, a, td, ul li, #left--box .nav--box nav ul ul > a li, #left--box .nav--box nav ul li p, #left--box .nav--box nav ul a li.double--span > span, #right--box .footer--box  { font-size: 11pt; } 
	
	img.galerybox { width: 100%; margin: 30% 0 0; }
	/**---   main   ---**/
	main { display: flex; flex-direction: column; font-family: Monotype Corsiva; }
	
	.quote--box { flex-direction: column; }
	.quote--box > div:first-of-type, .quote--box > div:last-of-type { width: 100%; }
	.quote--box h3 { text-align: center; }
	.quote--box i { display: none; }
	.quote--box .quote-img { width: 100%; text-align: center; }
	.quote--box .quote-img img { width: 35%; margin-bottom: .5em; }
	
	video { width: 100%; }
	
	/**---   menu   ---**/
	.mobile--bar { display: inherit; margin: 1em; font-size: 3em; right: 1em; }
	
	#left--box { height: 10em; width: 100%; background: #fff; display: flex; justify-content: space-between; }
	#left--box .img--tp--box { width: 6em; height: 7em; margin:  1em 2em; }
	#left--box .img--tp--box img { width: 100%; height: auto; }
	#left--box .img--bttm--box { display: none; }
	#left--box .img--bttm--box.open { display: inherit; position: absolute; width: 100vw; z-index: 1000; text-align: center; }
	#left--box .img--bttm--box.open a { width: 100vw; }
	#left--box .img--bttm--box.open img { width: 35%; }

	#left--box .nav--box { display: none; }
	#left--box .nav--box.open { display: inherit; position: absolute; background: #fff; left: 0; top: 10em; width: 100vw; height: 100vh; z-index: 1000; transform: translateY(0); }
	#left--box .nav--box nav h3 { display: initial; line-height: 4em; }
	#left--box .nav--box nav { width: 80%; height: auto; position: absolute; left: 50%; top: 20%; transform: translate(-50% , -50%); }
	#left--box .nav--box nav ul li { width: 100%; }

	/**---right - box---**/
	#right--box { width: 100%; overflow-x: hidden; }
	#right--box .index--cb { width: 95%; }
	
	#container { left: 0; width: 100%; top: 0; }
	.caption-container { width: 100%; }
	
	.column { width: 33.3%; }
}

@media only screen and (max-width: 414px) {
	body { overflow-x: hidden; }
	
	.mobile--bar { margin: .5em; font-size: 2.5em; right: .2em; }
	
	#left--box { height: 6em; }
	#left--box .img--tp--box { width: 4.5em; height: 5.5em; margin: .2em;  }
	#left--box .img--bttm--box.open img { display: none; }

	#left--box .nav--box.open { top: 6em; }
	#left--box .nav--box nav h3 { display: initial; line-height: 1em; }
	#left--box .nav--box nav {  width: 100%; left: 0; top: 0; transform: translate(0 , 0); background: #fff; padding-bottom: 4em; }
	
	#right--box .footer--box { position: relative; flex-direction: column; width: 100%; text-align: center; }
	
	.column { width: 49.9%; height: 125px; }
	
	/**---  timeline ---**/
	#right--box .page--cb .timeline::after { left: 1em; }
	
	.timeline--box { width: 100%; }
	.timeline--box::after { left: 0; }
	
	.right { left: 0; }
	.left::before { left: 30px; border-width: 10px 10px 10px 0; border-color: transparent white transparent transparent; }
	
	.timeline-content--box { flex-direction: column; }
	.timeline-content--box h2 { width: 100%; }
 
	.right--big::before { display: none; }

	/**---  image   ---**/
	img.small { width: 100%; margin: 0; }
	img.middle { width: 100%; margin: 0; }
	img.big { width: 100%; margin: 0; }
}