:root {
	--def-color: #131415;
	--gold-color: #e2bc4e;
	--red-color: #DC4128;
	--grey-color: #F4F3F2;
}


* { margin: 0; padding: 0; outline: none; box-sizing: border-box;}
html {font-size: 16px;}
html, body { width: 100%; height: 100%; }
body, th, td, p, div, span, ul, li, textarea, input, select, sup, sub {color: #333; font-size: 1.25rem; font-family: "Montserrat", Arial, Helvetica, sans-serif; font-weight: 400;}
body {position: relative;}

a:link, a:visited, a:active, .content a:hover { color: #C2351F; text-decoration: none; }
a:hover, .content a {text-decoration: underline;}
img { border: 0; }

h1, .h1, h2, h3, h4, h5, h6 {
	/* margin-top: .5rem; */
	margin-bottom: 1.7rem;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
}
h2 { font-size: 2rem; }
h3 { font-size: 1.875rem; }

/* clearfix */
.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	zoom: 1;
}
.clear { clear: both; margin: 0; padding: 0; font-size: 0; line-height: 0; }
.flt_l { float: left; }
.flt_r { float: right; }

::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
	height: 7px
}

::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: #C2351F;
}

.pointer {cursor: pointer;}

/* ========================================================================== */

.section {
	position: relative;
	padding-top: 80px; padding-bottom: 80px;
	z-index: 2;
	min-height: calc(100vh - 80px);
}
.header + .section {padding-top: 200px;}
@media screen and (max-width: 1600px) {
	.header + .section h1 {
		padding-left: calc(100% - 70vw);
		text-align: right;
	}
}
@media screen and (max-width: 400px), (max-width: 800px) and (orientation: landscape) {
	.header + .section {padding-top: 80px;}
}

/* =====HEADER====================================================================== */
.header {
	position: fixed;
	top: 0; left: 0;
	padding: 20px 50px;
	width: 100%; height: 80px;
	border-bottom: 1px solid #eee;
	background-color: rgba(255,255,255, .9);
	z-index: 999;
}
.desktop .header {padding: 20px 50px}
.mobile .header {padding: 5px 10px; height: 50px;}


.header .row {
	position: relative;
	justify-content: space-between; align-items: center;
}

.logo {
	display: block; 
}
.logo a {
	display: block;
	width: 152px; height: 168px;
	position: absolute; top: -20px; left: 0;
	background: url(../images/9may2020.svg) 50% 0 no-repeat;
	background-size: contain;

	-webkit-transition: all 500ms ease-in-out;
	-moz-transition: all 500ms ease-in-out;
	-o-transition:  all 500ms ease-in-out;
	-ms-transition: all 500ms ease-in-out;
	transition: all 500ms ease-in-out;
}
.__fixed .logo a, .footer .logo a {
	width: 192px; height: 80px; 
	background: url(../images/9may2020-sm.svg) 50% 0 no-repeat;
	background-size: contain;
}

@media screen and (max-width: 400px), (max-width: 800px) and (orientation: landscape) {
	.header .logo a {
		top: -6px;
		width: 140px; height: 60px; 
		background: url(../images/9may2020-sm.svg) 50% 0 no-repeat;
		background-size: contain;
	}

}

/* NAVIGATION */

.desktop .navigation {align-items: center; width: 66vw;}
.mobile .navigation {
	position: fixed; top: 0; right: 0;
	flex-direction: column;
	justify-content: center;
	margin-right: -4%;
	padding: 60px 40px 40px;
	width: 50%; height: 100vh;
	background-color: #fff;
	transform: translateX(100%);
	transition: transform .8s cubic-bezier(.175,.885,.32,1.275);}
	.mobile .navigation * {text-align: center;}
.nav-open .navigation {transform: translateX(0); z-index: 1010;}

.navigation svg {
	display: none;
	position: absolute; top: 10px; left: 10px;
	width: 44px; height: 44px;
	cursor: pointer;}


/* TIMELINE */

.timeline {position: relative; margin: 0 20px;}
.desktop .timeline {flex-grow: 1;}
.mobile .timeline {flex-grow: 0;}

.timeline-bar {width: 100%; height: 1px; background-color: #ddd;}
.mobile .timeline-bar {display: none;}
.timeline-bar__fill {
	position: absolute;
	width: 100%;
	top: -2px;
	height: 4px;
	background: #dc4128;
	transition: .3s ease;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scaleX(0);
	-webkit-transform-origin: left top;
	-ms-transform-origin: left top;
	transform-origin: left top;
}

.timeline-points {position: relative; width: 100%;}
.timeline .point {
	position: absolute;
	top: -5px;
	left: 0;
	width: 9px; height: 9px;
	border-radius: 50%;
	border: 2px solid #fff;
	background-color: #C2351F;
}
.timeline .point.hasYear {
	top: -7px;
	width: 13px; height: 13px;
	background-color: #C2351F;
	cursor: pointer;
}
.point.active ~ .point {
	background-color: #ddd;
}
.timeline .point::after {
	content: attr(data-filter);
	font-size: 12px;
    font-weight: 700;
	line-height: 1;
	position: absolute;
	left: -11px;
	top: -18px;
	color: #C2351F;
}
.timeline .point.hasYear::after {color: #6a7177;}

.timeline .nav-item {padding: 4px 0; font-size: 0.7em; text-align: center; color: #ddd;}
.timeline .nav-item.hasYear {padding: 8px 0; font-size: 1.2em; color: #000; cursor: pointer;}
.timeline .nav-item:hover.hasYear, .timeline .nav-item.hasYear.active {color: #C2351F;}

.mobile .timeline .nav-item {display:none;}
.mobile .timeline .nav-item.hasYear {display:block;}
.mobile .timeline {margin-top: 20px}

.hamburger {
	display: none;
	position: relative;
	width: 2.75rem; height: 40px;
	cursor: pointer;
	z-index: -1;
}
.mobile .hamburger {display: block; z-index: 1020;}
.hamburger-inner {
	position: relative;
	display: block;
	top: 50%;
	margin-top: -1px;
}
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
	content: '';
	position: absolute; left: 0;
	width: 100%;
	height: 3px;
	background-color: #C2351F;
  /* border-radius: .25em; */
  transition: transform .2s;
}
.hamburger-inner::before {top: -10px;}
.hamburger-inner::after {bottom: -10px;}
  /* .hamburger:hover .hamburger-inner::before {transform: translateY(-2px);}
  .hamburger:hover .hamburger-inner::after {transform: translateY(2px);} */

.nav-open .hamburger-inner {background-color: transparent;}
.nav-open .hamburger-inner::before {top: 0; transform: rotate(45deg);}
.nav-open .hamburger-inner::after {bottom:0; transform: rotate(-45deg);}

/* =====LAYOUT===================================================================== */
.top_img {
	position: fixed;
	width: 100vw; height: 100vh;
	z-index: 1;
	}
	.top_img .front {
		position: absolute; top: 0; left: 0;
		width: 100%; height: 100%;
		background-color: #e4e3e0;
		overflow: hidden;
	}
	.top_img .back {
		position: absolute; top: -2.6%; left: -1.5%;
		width: 103%; height: 105%;
		background: url(../images/bkg-map.jpg) 50% 50% repeat;
		background-size: cover;
	}
	.top_img .overlay {
		position: absolute; top: 0; left: 0;
		width: 100%; height: 100%;
		background: url(../images/linescover.png) 50% 50% no-repeat;
		background-size: cover;
		opacity: .75;
		pointer-events: none;
	}

	@media screen and (max-width: 400px) {
		.top_img .back {
			top: 0; left: 0;
			width: 100%; height: 100%;}
	}


/* ====CONTENT====================================================================== */
.title.thumb img {position: relative; width: 100%; opacity: 0;}
.title.thumb h2 {position: absolute; top: 0; left: 0; padding: 10px;}

.thumb {
  position: relative;
  float: left;
  width: calc(20% - 20px);
  /* width:160px; height:160px; */
  margin:10px;

  -webkit-transition-property: opacity, transform;
     -moz-transition-property: opacity, transform;
      -ms-transition-property: opacity, transform;
       -o-transition-property: opacity, transform;
          transition-property: opacity, transform;
}
.thumb--double { 
	width: calc(40% - 20px);
	/* width: 340px; height: 340px;  */
}
@media screen and (max-width: 600px) {
	.thumb {
		width: calc(33% - 8px);
		margin: 4px;
	}
	.thumb--double {
		width: calc(66% - 8px);
	}
}
@media screen and (max-width: 400px) {
	.thumb {
		width: calc(50% - 8px);
		margin: 4px;
	}
	.thumb--double {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}
/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* =====FOOTER====================================================================== */
.footer { position: relative; padding: 20px 0; height: 80px; background-color: #982e1d; z-index: 10;}
.footer * {color: #fff !important; font-size: 0.875rem;}
.footer .logo a {top: -20px;}

.footer h4 {color: #C2351F !important;}
.footer .copyright {padding: 60px 0 0; font-size: .9rem; opacity: 0.4;}
.author {line-height: 40px; text-align: right;}

@media (max-width: 991.98px) {
	html {font-size: 14px;}
}
@media (max-width: 767.98px) {
	.section {padding-top: 60px; padding-bottom: 60px;}
}
@media (max-height: 750px) and (orientation: landscape) {
	.top_img {height: 100%;}
	.top_img p {font-size: 10vh; line-height: normal;}
}
@media (max-width: 575.98px) {
	html {
		font-size: 12px;
	}
	.top_img {height: 100%;}
	.top_img p {font-size: 2.5rem; line-height: 2.5rem;}
	.section {padding-top: 40px; padding-bottom: 40px;}
	.mobile .navigation {width: 80%;}
	.footer {padding: 5px 0; height: 50px;}
	.footer .fcol-l {display:none}
	.footer .fcol-r {flex: 0 0 100% ;max-width: 100%;}
}