@font-face {
  font-family: Caveat-Regular;
  src: url('../webfonts/Caveat-Regular.ttf') format('truetype'),  /* Safari, Android, iOS */
	url('../webfonts/webfonts/Caveat-Regular.woff') format("woff"), /* Modern Browsers */
    url('../webfonts/webfonts/Caveat-Regular.woff2') format("woff2"), /* Modern Browsers */
	url('../webfonts/webfonts/Caveat-Regular.eot') format("embedded-opentype"), /* IE6-IE8 */
    url('../webfonts/webfonts/Caveat-Regular.otf') format("opentype"), /* Open Type Font */
    url('../webfonts/webfonts/Caveat-Regular.svg') format("svg"); /* Legacy iOS */
  font-weight: normal;
  font-style: normal;
}

* { margin: 0; padding: 0; text-decoration: none; box-sizing: border-box; font-family: Caveat-Regular; }

h3 { font-size: 25pt; }
h4 { font-size: 20pt; }
h5 { font-size: 17pt; }
p, a, td, ul li { font-size: 16pt; }
p.small { font-size: 12pt; }
ul li { font-size: 12pt; }

h3, h4 { margin: .8em 0; }
p { margin-bottom: .3em; }

.ctr--box { width: 100%; text-align: center; }

a, ul li { color: #222; }

td { vertical-align: top; padding: .1em; }
tr > td:nth-child(2) { text-align: center; }
thead tr td { font-size: 1.6em; border-bottom: 1px dashed #111; }
table.leads tr td { min-width: 6em; }

.flex--box { display: flex; justify-content: space-around; }
.flex--box > div { width: 50%; }

.content--seperator { clear: both; border-top-style: solid; border-top-width: .25em; border-top-color: #11410f; width: 50%; margin: 2.5em auto; }

/**---  image   ---**/
img.small--sm { width: 10%; height: auto; margin: 0 1.5em 0; }
img.small { width: 17.5%; height: auto; margin: 1.5em 1.5em 0; }
img.middle { width: 40%; height: auto; margin: 1.5em 1.5em 0; }
img.big { width: 70%; height: auto; margin: 1.5em 1.5em 0; }
img.double { margin: 0 2em 5em; }
img.sc--double { margin: 0 0 10em; }
img.galerybox { width: 80%; margin: 4% 10%; }

figure.double { width: 45%; text-align: center; }
figure { margin-bottom: 1em; }

/**---   main   ---**/
main { display: flex; align-items: stretch; }

/**---   menu   ---**/
#left--box { width: 20vw; height: 100vh; }
#left--box .img--tp--box { position: fixed; top: 0; width: 20%; display: flex; justify-content: center; }
#left--box .img--tp--box img { width: 35%; height: auto; }
#left--box .img--bttm--box { position: fixed; bottom: 1em; width: 20%; }
#left--box .img--bttm--box a { display: flex; justify-content: center; }
#left--box .img--bttm--box img { width: 40%; height: auto; }
#left--box .nav--box { position: fixed; top: 50%; left: 3%; text-align: center; width: 20%; z-index: 5; transform: translateY(-50%); }
#left--box .nav--box.tiny { top: 50%; }

#left--box .nav--box nav h3 { display: none; }
#left--box .nav--box nav ul { list-style: none; padding: .4em 0; }
#left--box .nav--box nav ul a li.double--span { line-height: 1.1em; }
#left--box .nav--box nav ul a li.double--span > span { font-size: 10pt; line-height: .6em; }
#left--box .nav--box nav ul li p { font-size: 11pt; line-height: .7em; margin: 0; }
#left--box .nav--box nav ul li { width: 70%; line-height: 1em; margin: .25em 0; background: #cfe5cf;  }
#left--box .nav--box nav ul li:nth-child(5) { padding-top: .5em; }
#left--box .nav--box nav ul a li:hover { cursor: pointer; background: #94db94; }
#left--box .nav--box nav ul ul { display: block; width: 100%; text-align: left; } 
#left--box .nav--box nav ul ul a li { width: 100%; }
#left--box .nav--box nav ul ul > li { width: 100%; line-height: 1em; }
#left--box .nav--box nav ul ul ul > a li { width: 100%; font-size: 10pt; line-height: 1em; }
#left--box .nav--box nav ul ul ul a li::before { padding: 0 .5em; content: '-'; }

/**---right - box---**/
#right--box { position: relative; width: 80vw; background: #cfe5cf; color: #222; padding: 2%; }
#right--box a { text-decoration: underline; color: #444; }
#right--box a:hover	{ color: #999; }
#right--box .index--cb { width: 70%; margin: 1em auto; text-align: center; z-index: 100;}
#right--box .index--cb img { width: 30%; height: auto; }

#right--box .footer--box { position: absolute; bottom: 0; width: 96%; display: flex; justify-content: space-between; padding-bottom: .5%; }
#right--box .footer--box .ftrbx--right a { margin: 0 .5em }

/**---  timeline ---**/
#right--box .page--cb .timeline { position: relative; }
#right--box .page--cb .timeline::after {
	content: '';
	position: absolute;
	width: 6px;
	background-color: white;
	top: 0;
	bottom: 0;
	left: 50%;
	margin-left: -3px;
}

.timeline-content--box { display: flex; }
.timeline-content--box h2 { width: 15%; font-size: 4em; }

.timeline--box { padding: 10px 40px; position: relative; background-color: inherit; width: 50%; }
.timeline--bigbox { padding: 10px 40px; position: relative; background-color: inherit; width: 100%;  }

.timeline--box::after {
	content: '';
	position: absolute;
	width: 25px;
	height: 25px;
	right: -17px;
	background-color: white;
	border: 4px solid #10400e;
	top: 15px;
	border-radius: 50%;
	z-index: 1;
}

.left { left: 0; }

.right { left: 50%; }
.right--big { left: 0; }

.left::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	right: 30px;
	border: medium solid white;
	border-width: 10px 0 10px 10px;
	border-color: transparent transparent transparent white;
}

.right::before, .right--big::before {
	content: " ";
	height: 0;
	position: absolute;
	top: 22px;
	width: 0;
	z-index: 1;
	left: 30px;
	border: medium solid white;
	border-width: 10px 10px 10px 0;
	border-color: transparent white transparent transparent;
}

.right::after, .right--big::after { left: -16px; }
.tmlnbx--content { padding: 20px 30px; background-color: white; position: relative; border-radius: 6px; }

.tmlnbx--content ul { padding-left: 1.2em; }
.tmlnbx--content ul li { margin-bottom: .2em; }

/**---   quote  ---**/
.quote--box { display: flex; }
.quote--box > div:first-of-type { width: 20%; }
.quote--box > div:last-of-type { width: 60%; }
.quote--box .quote-img { width: 15%;  }
.quote--box .quote-img i { font-size: 5em; }
.quote--box .quote-img img { width: 90%; height: auto; }

/**--- imggalery ---**/
img { vertical-align: middle; }

#container { position: fixed; width: 80%; height: 100%; top: 0; left: 20%; display: none; z-index: 100; background: rgba(0, 0, 0, .6); }
.mySlides { display: none; }
.cursor { cursor: pointer; }

.prev,
.next { cursor: pointer; position: absolute; top: 0; width: 50%; height: 100%; }
.next { right: 0; }

.numbertext { color: #f2f2f2; background: rgba(0, 0, 0, 0.6); font-size: 1.5em; padding: 8px 12px; position: absolute; width: 100%; text-align: center; z-index: 1000; }
.numbertext i { position: absolute; top: 10px; right: 10px; color: #fff; }
.numbertext i:hover	{cursor: pointer; color: #ddd; }

.caption-container { position: fixed; bottom: 0; width: 80%; text-align: center; padding: 15px 16px; color: #f2f2f2; background: rgba(0, 0, 0, .8); }

.row { margin: .5em 0; }
.row:after { content: ""; display: table; clear: both; }

.column { float: left; width: 16.66%; height: 150px; overflow: hidden; }

.demo { opacity: 0.8; }

.active,
.demo:hover { opacity: 1; }
 
/**---animation---**/
#left--box .nav--box { 
	-webkit-transition: .5s; 
	-moz-transition: .5s; 
	-o-transition: .5s; 
	transition: .5s; 
}

#left--box .nav--box nav ul a > li:hover, 
#left--box .nav--box nav ul > li:hover,
#left--box .nav--box nav ul li:hover > ul,
#right--box a,
a:hover.back-to-top,
li.more::after { 
	-webkit-transition: .3s; 
	-moz-transition: .3s; 
	-o-transition: .3s; 
	transition: .3s; 
}