/*CITATIONS

1360 Grid System based upon the original 960 Grid System - Text CSS.

Learn more ~ http://960.gs/

Licensed under GPL and MIT.

All images created by Simple Line and copyrighted by Adobe Stock and licensed for personal and commercial use through https://stock.adobe.com/.

All fonts licensed from Envato Elements for personal and commercial use through https://elements.envato.com/ 

Button Hover Styles 'underline' effect created by John Heiner and licensed under MIT. Available here:https://codepen.io/johnheiner/pen/EyaLQW

Great Button Animation effect created by Valentin Galmand and licensed under MIT. Available here: https://codepen.io/valentingalmand/pen/ggKrpY

Licenses are included in the root folder in a "licenses" folder. */

@charset "UTF-8";
/* CSS Document */
@font-face {
  font-family: 'Oliver';
  src: url("fonts/Oliver-Thin.ttf");
}
@font-face {
  font-family: 'Bornia-Bold';
  src: url("fonts/Bornia-Bold.ttf");
}
@font-face {
  font-family: 'Bornia-Semibold';
  src: url("fonts/Bornia-SemiBold.ttf");
}
@font-face {
  font-family: 'Bornia-Medium';
  src: url("fonts/Bornia-Medium.ttf");
}
@font-face {
  font-family: 'Bornia-Regular';
  src: url("fonts/Bornia-Regular.ttf");
}

@font-face {
  font-family: 'Bornia-Light';
  src:url("fonts/Bornia-Light.ttf");
}

@font-face {
  font-family: 'Bornia-Light-Italic';
  src: url("fonts/Bornia-LightItalic.ttf");
}
/*style all pages*/
body {
  min-width: 1360px;
  margin: 0px auto;
  padding: 10px auto;
  background: rgba(197, 185, 165, .4);
}
/*nav*/
nav a:link {
	text-decoration:none;
}
nav a:visited{
	text-decoration:none;
}
nav a:active{
	text-decoration:none;
}
nav a:hover{
	text-decoration:none;
}

.navbar {
  margin: 0 auto;
  padding: 0 auto;
  width: 100%;
  height: 54px;
  background: rgba(71, 92, 112, 1);
}
ul {
  margin: 0 auto;
}
li {
  padding: 20px 10px;
  display: inline;
  text-align: center;
  font-family: "Bornia-Medium", sans-serif;
  font-size: 15px;
  line-height: 15px;
  color: rgba(197, 185, 165, 1);
  text-transform: uppercase;
  letter-spacing: 1px;
}
/*end nav*/

.footerbar{
	color: rgba(197, 185, 165, 1);
	font-family: "Bornia-Regular", sans-serif;
	font-size:14px;
	line-height:14px;
	 margin-bottom: 0;
  width: 100%;
  height: 54px;
  background: rgba(71, 92, 112, 1);
	
}

footer{
	padding:20px;
	text-align:right;
}
h1 {
  font-family: 'Oliver', sans-serif;
  font-size: 50px;
  font-weight: 100;
  color: rgba(20, 20, 20, 1);
  text-transform: uppercase;
}
h2 {
  padding: 0 auto;
  text-align: center;
  font-family: 'Bornia-Semibold', sans-serif;
	font-weight:100;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: .015em;
  color: rgba(20, 20, 20, .9);
  text-transform: uppercase;
  padding-top: 5px;
	text-align:center;
	padding-left:50px;
}
p {
  font-family: "Bornia-Medium", sans-serif;
  color: rgba(20, 20, 20, .9);
  font-size: 18px;
  line-height: 24px;
  margin: 12px auto;
  padding: 3px auto;
}

p a:link{
	text-decoration:underline;
	color:rgba(20, 20, 20, .9);
}
p a:visited{
	text-decoration:underline;
	color:rgba(20, 20, 20, .9);
}
p a:hover{
	text-decoration:underline;
	color:rgb(71,92,112);
}
p a:active{
	text-decoration:underline;
	color:rgba(20, 20, 20, .9);
	
}

/*end style all*/
.indexcontent {
  width: auto;
  height: 715px;
	background: transparent url("../img/index2.png")
}
.indexhed1 {
  padding: 0 auto;
  text-align: right;
  font-size: 86px;
  line-height: 96px;
  letter-spacing: .045em;
  padding-top: 90px;
  padding-left: 60px;
  color: rgba(20, 20, 20, .8);
}
.indexhed2 {
  padding: 0 auto;
  text-align: right;
  font-size: 86px;
  line-height: 96px;
  letter-spacing: .045em;
  padding-top: 170px;
  padding-right: 60px;
  color: rgba(20, 20, 20, .8);
}
.bigbutton {
  padding-top: 160px;
  padding-left: 180px;
}
button {
  padding: 20px 40px;
  background: none;
  border: none;
  position: relative;
  text-transform: uppercase;
  font-family: 'Bornia-Bold', sans-serif;
  font-weight: bold;
  letter-spacing: 3px;
	  color: rgba(20, 20, 20, .9);
  cursor: pointer;
}
button:after, button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 2px solid #000;
  transition: transform 0.2s;
}
button:after {
  transform: translate(3px, 3px);
}
button:before {
  transform: translate(-3px, -3px);
}
button:hover:after, button:hover:before {
  transform: translate(0);
}

button a:link{
	text-decoration: none;
	color: rgba(20, 20, 20, .9);
}
button a:visited{
	text-decoration: none;
	color: rgba(20, 20, 20, .9);
}
button a:hover{
	text-decoration: none;
	color: rgba(20, 20, 20, .9);
}
button a:active{
	text-decoration: none;
	color: rgba(20, 20, 20, .9);
}
.promptcontent {
  width: auto;
  height: 715px;
  background: transparent url("../img/prompt3.png");
}
.prompthed {
  margin-top: 130px;
  padding-left: 120px;
	
}
.promptcopy {
  margin-top: 238px;
  text-align: left;
	margin-left:10px;
}
.purposecontent {
  width: auto;
  height: 699px;
  background: transparent url("../img/purpose3.png");
}
.purposecontent h1 {
  padding-top: 104px;
  line-height: 78px;
  text-align: center;
	margin-left:-310px;
}


.purposecopy {
  text-align: left;
  padding:10px;
  padding-bottom:0;
	width:680px;
	margin-left:320px;
	margin-top:80px;
	
}
.processcontent {
  width: auto;
  height: 715px;
  background: transparent url("../img/process2.png");
}
.processhed {
  margin-top: 55px;
  padding-left: 135px;
}
.processcopy {
  margin-top: 30px;
  text-align: left;
  margin-left: 20px;
}

/*nav hover */
.underline-btn{
	display: inline-block;
  	padding: 1em 0;
  	border-radius: 0;
	color: rgb(197,185,165);
  	text-decoration: none;
	position: relative;
	margin-top:-20px;
	&:before,
	&:after{
		content: '';
    	display: block;
    	position: absolute;
    	height: 2px;
    	width: 0;

	}
	&:before{
		transition: width 0s ease,background .4s ease;
		left: 0;
		right: 0;
    	bottom: 8px;
	}
	&:after{
		right: 2.2%;
    	bottom: 8px;
    	background: rgb(197,185,165);
		transition: width .4s ease;
	}
	
	&:hover{
		&:before{
			width: 97.8%;
			background:  rgb(197,185,165);
    		transition: width .4s ease;
		}
		&:after{
			width: 97.8%;
    		background: 0 0;
			transition: all 0s ease;
		}
	}
}