@import url(https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700);

body {
  margin: 0;
  font-family:'Libre Baskerville', serif;
}

div.instructions {
    position:fixed;
	z-index:2;
}

.intro_wrapper {
    width:35%;
    position:absolute;
    left:50%;
    bottom:15%;
    padding:20px;
}
.title {
	font-family: 'Libre Baskerville', serif;
    text-shadow: 0px 1px 10px rgba(0,0,0,0.7);
    font-size: 36px;
    color: #DBDDD8;
}
.credo {
	background:rgba(255,255,255,0.6);
	border-radius:12px;
	background-clip:padding-box; 
	padding:10px;
}
.credo span {
	color:#000;
	font-weight:bold;
	font-size:24px;
    text-shadow:2px 2px 2px rgba(255,255,255,0.5);
}
.credo div.pronouce {
	color:#222;
	font-size:18px;
    text-shadow:2px 2px 1px rgba(255,255,255,0.25);
}
.credo div.definition {
	color:#000;
	font-size:18px;
	font-style:italic;
    text-shadow:2px 2px 1px rgba(255,255,255,0.25);
}
.scrolldown, .scrollup {
	position: fixed;
    margin: 0px auto;
    color: #fff;
    text-decoration: none;
    font-family: arial,sans-serif;
    font-size: 13px;
    left: calc(50% - (85px / 2));
    bottom: 80px;
}
.scrollup:before {
	content:'';
	width:40px;
	height:40px;
	position:absolute;
	margin:auto;
	-webkit-animation:3s arrow infinite ease;
	animation:3s arrow infinite ease;
	margin-left:20px;
	margin-top:-45px;

	border-left:4px solid #FFF;
	border-bottom:4px solid #FFF;
	-ms-transform:rotate(135deg);
	-webkit-transform:rotate(135deg);	
}

.scrolldown:after {
	content:'';
	width:40px;
	height:40px;
	position:absolute;
	margin:auto;
	-webkit-animation:3s arrow infinite ease;
	animation:3s arrow infinite ease;
	margin-left:20px;
	margin-top:-20px;
	
	border-right:4px solid #FFF;
	border-bottom:4px solid #FFF;
	-ms-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}

.welcome {
	background:rgba(255,68,86,0.7);
}

.textslide {
  padding:40px;
}

.textslide:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}

section div.content {
  position: relative;
  top: 40%;
  transform: translateY(-50%);
}

section h2 {
	font-size:400%;
    /*text-shadow:2px 2px 2px rgba(255,255,255,0.5);*/
}

section span.copy {
	font-size:200%;
    /*text-shadow:2px 2px 8px rgba(255,255,255,0.5);*/
	display: inline-block;
	width: 70%;
}

section.recap span.copy {
	font-size: calc(200% - 13px);
}


.jgray {
	/*background: url(jgray.png) no-repeat top left;*/
    position: absolute;
    right: 10px;
    width: 324px;
    height: 527px;
    display: block;
    z-index: 3;
    opacity: 0.1;
}

span#jage, span#mage, span#fage {
    font-weight: normal;
    background-color: rgba(255,255,255,0.1);
	padding: 0px 6px;
}

ol {
	margin-left:20px;
}

.nav {
    position: fixed;
    right: 20px;
    top: calc(50% - 200px);
	z-index:100;
}

.nav .link a {
	color:#fff;
	font-size:24px;
	text-decoration:none;
	padding:0px 5px;
	text-shadow:0px 0px 6px #000
}

.nav .link.active a {
	color:#000;
	text-shadow:inherit;
}

@-webkit-keyframes arrow {
	0%,100% {
		top:10px;
	}
	50% {
		top:30px;
	}
	
	font-family: 'Libre Baskerville', serif;
    text-shadow: 0px 1px 10px rgba(0,0,0,0.7);
    font-size: 36px;
    color: #DBDDD8;
}
@keyframes arrow {
	0%,100% {
		top:10px;
	}
	50% {
		top:30px;
	}
}

@media 
  only screen and (max-width: 660px) and (orientation: portrait),
  only screen and (-webkit-device-pixel-ratio: 2),
  only screen and (-webkit-device-pixel-ratio: 3 and max-width:751px)  {
  
  /*body {
    opacity:0.5;
  }*/
  
  .backstretch img {
	/*margin-left:100px !important;*/
  }
  
  .intro_wrapper {
    width:100%;
    height:100%;
    position:absolute;
    left:inherit;
    bottom:inherit;
    padding:inherit;
	text-align:center;
  }
  
  .credo {
    position:absolute;
	bottom:120px;
	width:80%;
	margin-left:10%;
  }
  
  section h2 {
	font-size:300%;
  }

  section span.copy {
	font-size:150%;
	width:100%;
  }
  
  section.recap span.copy {
	font-size: calc(150% - 6px);
  }
  
  .scrollup:before {
	border-left:2px solid #FFF;
	border-bottom:2px solid #FFF;
	-webkit-animation:inherit;
	animation:inherit;
	zoom:2;
	margin-left:0px;
  }

  .scrolldown:after {
	border-right:2px solid #FFF;
	border-bottom:2px solid #FFF;
	-webkit-animation:inherit;
	animation:inherit;
	zoom:2;
	margin-left:0px;
  }
  
  .jgray {
	display:none; 
  }
  
  .textslide:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: none;
}


}