/* --------------------------------------------------
   reset
-------------------------------------------------- */

* { 
  box-sizing:border-box;
  outline:0;
}

html { 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,
b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

ol, ul { list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0;
}

::selection { background:black; color:white; }
::-moz-selection { background:black; color:white; }







/* --------------------------------------------------
   font import
-------------------------------------------------- */

/* rubik-regular - latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/rubik-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/rubik-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/rubik-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/rubik-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/rubik-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/rubik-v23-latin-regular.svg#Rubik') format('svg'); /* Legacy iOS */
}
/* rubik-900 - latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/rubik-v23-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/rubik-v23-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/rubik-v23-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/rubik-v23-latin-900.woff') format('woff'), /* Modern Browsers */
       url('fonts/rubik-v23-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/rubik-v23-latin-900.svg#Rubik') format('svg'); /* Legacy iOS */
}








/* --------------------------------------------------
   typography
-------------------------------------------------- */

html {
  font-size:15px;
}

  @media only screen and (min-width :  600px) { html { font-size:16px; } }
  @media only screen and (min-width :  800px) { html { font-size:17px; } }
  @media only screen and (min-width : 1000px) { html { font-size:18px; } }
  @media only screen and (min-width : 1200px) { html { font-size:19px; } }

body {
  font-family:'Rubik','Arial',sans-serif;
  font-size:1rem;
  line-height:1.5;
  color:#333;
}

h1,h2,h3 {
  line-height: 1.1;
}

h1 {
  font-size:4rem;
  font-weight:900;
  margin-bottom:3rem;
}

  @media only screen and (min-width :  600px) { h1 { font-size:6rem; } }

h2 {
    font-size:2.5rem;
    font-weight:900;
    margin-bottom: 3rem;
}

h3 {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

p {
  margin:1.6rem 0;
}

p:first-child {
  margin-top:0;
}

p:last-child {
  margin-bottom:0;
}

a {
  color: rgb(65 87 123);
}

strong {
    font-weight:900;
}

em {
  font-style:italic;
}

.small {
  font-size:80%;
}








/* --------------------------------------------------
   fundamentals
-------------------------------------------------- */

body {
	background:#f5f5f5;
}








/* --------------------------------------------------
   homepage
-------------------------------------------------- */

.title {
	padding:3rem 1rem 0;
	text-align:center;
}

.hero-image {
	padding:4rem 0;
}

	.hero-image img {
		display:block;
		width:100%;
		height:auto;
		min-height:25rem;
		object-fit:cover;
	}

.timeline {
	height:70vh;
	overflow-x: scroll;
}

	.timeline img {
		display:block;
		height:100%;
		width:auto;
		min-width:100%;
		object-fit: contain;
	}

@media only screen and (min-width : 1200px) { 

	.timeline {
		background:white;
		height:unset;
		padding:3rem 0;
	}

	.timeline img {
		width:100%;
	}

}

.images {
	max-width:50rem;
	margin:0 auto;
	padding:4rem 2rem;

}

	.images img {
		display:block;
		width:100%;
		height:auto;
	}

footer {
	padding:2rem 1rem;
	text-align:center;
}