/*
* @Author: tyler
* @Date:   2016-12-08 23:44:30
* @Last Modified by:   odbol
* @Last Modified time: 2018-10-29 22:52:56
*/


body {
    margin: 0;
    padding: 0;
    
    background: #fefeff;

    font-family: Josefin Sans, Helvetica, sans-serif;
    font-weight: 100;
    font-size: 1.2em;
    line-height: 1.6em;
}



div, h1, h2 {
    margin: 0;
    padding: 0;
}

h1, h2 {
	/*font-weight: 700;*/
    font-weight: 100;
}

h2 {
	font-weight: 300;
	/* font-weight: 100; */
	font-size: 1.1em;
	margin: 1em 0;
	/* border-bottom: 1px solid; */
	font-variant: small-caps;
}

/*h2 {
	padding-right: 89px;
	background: url('flourish.png') no-repeat right center;
}*/

ul, ol {
    line-height: 2em;
    color: #999;
    /* margin: 0; */
    /* padding-left: 17px; */
}

a,
a:hover,
a:link,
a:active,
a:visited {
	text-decoration: underline;
	color: #999;
}

.nav a,
.nav a:hover,
.nav a:link,
.nav a:active,
.nav a:visited {
	text-decoration: none;
	color: inherit;
}

a.next::after {
	content: " ⟶";
}

.credits {
	font-size: 0.8em;
	font-style: italic;
}



.col {
	height: 100%;
	width: 50%;
	position: absolute;

	overflow: auto;

    margin: 0;
    padding: 0;

     /* Firefox: https://developer.mozilla.org/en/docs/Web/CSS/overflow */
    /*overflow: auto -moz-scrollbars-none;*/
    /* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
    -ms-overflow-style: none;
    scrollbar-width: none; /* Firefox 64 */
}

.col::-webkit-scrollbar { 
    display: none; 
}

.left {
	text-align: right;
}

.right {

	right:0;
}

.farright {
	display: none;
	right: -50%;
}

	.farright.active {
		display: block;
	}


.element {
	width: 100%;
	height: 100%; /* has to be % not vh to avoid mobile toolbar offset problem */
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column; /* works with column or column */
	flex-direction: column;
	/* -webkit-align-items: center; */
	/* align-items: center; */
	-webkit-justify-content: center;
	justify-content: center;
}


.logo {
	/* padding-top: calc(50vh); */
	/* position: relative; */
	box-sizing: content-box;


	transition: opacity 2s ease-in-out;
}


/* hide until scroller is ready and scrolled*/
.loading .logo {
	opacity: 0;
}

html .go .logo {
	opacity: 1;
}


.left .log {
	top: calc(50vh + 1.4ex);
}



.content {
    text-align: justify;
    font-weight: 300;
}

	.content img {
		max-width: 100%;
		max-height: 60vh;
		display:block;
		/* text-align: center; */
		/* margin: auto; */
	}


	.content p {
		margin-right: 2px;
	}





/**** LOADER ****/

.progress {
	width: 100%;
	height: 2px;
	position: absolute;

	background: #333;

	transition: opacity 0.5s linear;
}

.loading .progress {
    
	background-size: 100%;
    background-repeat: repeat-x;
    background-position: left bottom;

	transform: scaleX(.1);
	transform-origin: bottom left;

	animation:backgroundgrow ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    
    animation-timing-function: cubic-bezier(0.01, 0.82, 0.63, 1.01);

    animation-fill-mode: both;  
	/*animation-delay: .3s;*/
	animation-duration: 30s;
}

html .go .progress {
	transform: scaleX(1);
	opacity: 0;

	animation-name: none;
}

@keyframes backgroundgrow {
  from {
	transform: scaleX(.1);
  }

  to {
	transform: scaleX(1);
  }
}


@keyframes backgrounddone {
  0% {
	transform: scaleX(.1);
  }

  20% {
	transform: scaleX(1);
  }
}













	.debug  .left {
		background: #ccffff;
	}
	.debug .right {
		background: #ffffcc;
	}



/* scroll hint */
.scrollHint {
	display: block;
	position: fixed;
	bottom: 20px;
	width: 200px;
	height: auto;
	margin-left: -100px; 
	left: 50%;
	text-align: center;
	/* transform: scaleX(.1); */
	/* transform-origin: bottom left; */
	animation:scrollHintFade ease-in-out infinite;
	animation-fill-mode: both;
	animation-delay: 4s;
	animation-duration: 5s;
	animation-iteration-count: infinite;
}

.hasScrolled .scrollHint {
	animation-duration: 1s;
	animation-iteration-count: 1;
}

@keyframes scrollHintFade {
  0% {
	opacity: 0
  }

  20% {
	opacity: 1;
  }

  30% {
	opacity: 0;
  }

  60% {
	opacity: 1;
  }

  80% {
	opacity: 0;
  }

  100% {
	opacity: 0;
  }
}