@charset "UTF-8";
/* CSS Document */

*{margin:0;}

body{
	/*
	background-image: url("../images/bg.png");
	background-repeat: repeat;
	color: white;
*/
}
	
#container{
	width: 960px;
	margin: 0 auto;/*this will center a div*/}
	
	
/*--------------- index styles ---------------*/

#logo{
	padding: 90px 0 60px 330px;}

#header{
	width: 960px;}
	
p{
	color: #262626;
	font-size:20px;
	font-family: 'Droid Sans', sans-serif;
	letter-spacing: 1px;
	margin-top: -60px;
	padding: 20px 0 80px 290px;}
	
/*--------------- navigation styles ---------------*/
	
.overlay-navigation {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, 0.8);
  transform: translateY(-100%);
}

.overlay-slide-down {
  transition: all .4s ease-in-out;
  transform: translateY(0)
}

.overlay-slide-up {
  transition: all .8s ease-in-out;
  transform: translateY(-100%)
}

nav,
nav ul {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  flex-basis: 20%;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
  transform: translateY(-100%);
}

nav li a {
  position: relative;
  top: 46%;
  color: #fff;
  text-transform: uppercase;
  font-family: 'Work sans', sans-serif;
  font-weight: 300;
  letter-spacing: 4px;
  text-decoration: none;
  display: block;
  text-align: center;
  font-size: 0.9rem;
}

nav li a:before {
  content: '';
  width: 70px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 100;
  transform: translateX(-100%);
  opacity: 0;
  transition: all .2s linear;
}

nav li a:after {
  content: attr(data-content);
  font-size: 0.7rem;
  transition: all .2s linear;
  opacity: 0;
  position: absolute;
  z-index: 100;
  color: #ffffff;
  display: block;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  bottom: -50px;
  text-transform: none;
  font-family: 'Open sans', serif;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0;
}

nav li a:hover:before {
  transform: translateX(0);
  opacity: 1;
}

nav li a:hover:after {
  transform: translateY(15px);
  opacity: 1;
}

/*
nav li:nth-of-type(1){background-color: #9fcd6b}
nav li:nth-of-type(2){background-color: #91d9cc}
nav li:nth-of-type(3){background-color: #a66382}
nav li:nth-of-type(4){background-color: #d95276}
nav li:nth-of-type(5){background-color: #d9bc78}
*/
nav li:nth-of-type(1){background-color: #080808}
nav li:nth-of-type(2){background-color: #202020}
nav li:nth-of-type(3){background-color: #303030}
nav li:nth-of-type(4){background-color: #3D3D3D}
nav li:nth-of-type(5){background-color: #4D4D4D}
.slide-in-nav-item {
  animation: slide-in-nav-item 0.4s linear 1 .2s both;
}

.slide-in-nav-item-delay-1 {
  animation: slide-in-nav-item 0.4s linear 1 .4s both;
}

.slide-in-nav-item-delay-2 {
  animation: slide-in-nav-item 0.4s linear 1 .6s both;
}

.slide-in-nav-item-delay-3 {
  animation: slide-in-nav-item 0.4s linear 1 .8s both;
}

.slide-in-nav-item-delay-4 {
  animation: slide-in-nav-item 0.4s linear 1 1s both;
}

.slide-in-nav-item-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 .5s both;
}

.slide-in-nav-item-delay-1-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 .4s both;
}

.slide-in-nav-item-delay-2-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 .3s both;
}

.slide-in-nav-item-delay-3-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 .2s both;
}

.slide-in-nav-item-delay-4-reverse {
  animation: slide-in-nav-item-reverse .3s linear 1 both;
}


/*--------------- hamburger nav styles ---------------*/

.open-overlay {
  position: absolute;
  right: 5rem;
  top: 3.2rem;
  z-index: 100;
  width: 34px;
  display: block;
  cursor: pointer;
}

.open-overlay span {
  display: block;
  height: 3px;
  background-color: #262626;
  cursor: pointer;
  margin-top: 8px;
}

.animate-top-bar {
  animation: animate-top-bar .6s linear 1 both
}

.animate-bottom-bar {
  animation: animate-bottom-bar .6s linear 1 both
}

.animate-middle-bar {
  animation: animate-middle-bar .6s linear 1 both
}

.animate-out-top-bar {
  animation: animate-out-top-bar .6s linear 1 both
}

.animate-out-bottom-bar {
  animation: animate-out-bottom-bar .6s linear 1 both
}

.animate-out-middle-bar {
  animation: animate-out-middle-bar .6s linear 1 both
}

/*--------------- animation nav keyframes styles ---------------*/

@keyframes slide-in-nav-item {
  from {
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%)
  }
  to {
	-webkit-transform: translateY(0);
	transform: translateY(0)
  }
}

@keyframes slide-in-nav-item-reverse {
  from {
	-webkit-transform: translateY(0);
	transform: translateY(0)
  }
  to {
	-webkit-transform: translateY(-100%);
	transform: translateY(-100%)
  }
}

@keyframes animate-top-bar {
  0% {
	background-color: #fff;
  }
  50% {
	-webkit-transform: translateY(9px);
	transform: translateY(9px)
  }
  80% {
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
	background-color: #fff;
  }
  100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	background-color: #29363B;
  }
}

@keyframes animate-bottom-bar {
  0% {
	background-color: #fff;
  }
  50% {
	-webkit-transform: translateY(-9px);
	transform: translateY(-9px)
  }
  80% {
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
	background-color: #fff;
  }
  100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	background-color: #29363B;
  }
}

@keyframes animate-middle-bar {
  0% {
	background-color: #fff;
  }
  80% {
	background-color: #fff;
  }
  100% {
	background-color: #29363B;
  }
}

@keyframes animate-out-top-bar {
  0% {
	background-color: #29363B
  }
  50% {
	-webkit-transform: translateY(9px);
	transform: translateY(9px)
  }
  80% {
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
	background-color: #29363B
  }
  100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	background-color: #fffff;
  }
}

@keyframes animate-out-bottom-bar {
  0% {
	background-color: #29363B
  }
  50% {
	-webkit-transform: translateY(-9px);
	transform: translateY(-9px)
  }
  80% {
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
	background-color: #29363B;
  }
  100% {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	background-color: #fffff;
  }
}

@keyframes animate-out-middle-bar {
  0% {
	background-color: #29363B
  }
  80% {
	background-color: #29363B;
  }
  100% {
	background-color: #fffff;
  }
}
.home a{
  font-family: "Work Sans", sans-serif;
  color: #fff;
  font-weight: 300;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  position: absolute;
  z-index: 10;
  top:50px;
  left:50px;
  padding-bottom: 3px;
  border-bottom: 1px solid #fff;
}
@media (max-width: 640px) {
  nav ul li a {
	font-size: 11px;
  }
  nav li a:after {
	font-size: 0.6rem;
  }
  .open-overlay {
	right: 1rem;
  }
  nav li a:before {
	width: 15px;
  }
}

/*--------------- about styles ---------------*/

.parallax {
	/* The image used */
	background-image: url("images/banner.png");

	/* Set a specific height */
	min-height: 500px; 

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: left top;
	background-repeat: no-repeat;
	background-size: auto;}
	
#title1{
	color: #9b9b9b;
	font-size: 16px;
	font-family: 'Droid Sans', sans-serif;
	letter-spacing: 1px;
	padding: 140px 0 50px 0;}
	
#title2{
	color: #9b9b9b;
	font-size: 16px;
	font-family: 'Droid Sans', sans-serif;
	letter-spacing: 1px;
	padding: 50px 0 50px 0;}
	
#title3{
	color: #9b9b9b;
	font-size: 16px;
	font-family: 'Droid Sans', sans-serif;
	letter-spacing: 1px;
	padding: 50px 0 50px 0;}
	
#title4{
	color: #9b9b9b;
	font-size: 16px;
	font-family: 'Droid Sans', sans-serif;
	letter-spacing: 1px;
	padding: 50px 0 50px 0;}
	
#subtext1{
	margin-top: -90px;
	margin-left: -100px;}
	
#subtext1 p {
	color: #262626;
	font-size: 16px;
	font-family: 'Droid Sans', sans-serif;
	letter-spacing: 1px;}
	
#subtext2{
	margin-top: -90px;
	margin-left: -100px;}
	
#subtext2 p {
	color: #262626;
	font-size: 16px;
	font-family: 'Droid Sans', sans-serif;
	letter-spacing: 1px;}
	
#subtext3{
	margin-top: -90px;
	margin-left: -100px;}
	
#subtext3 p {
	color: #262626;
	font-size: 16px;
	font-family: 'Droid Sans', sans-serif;
	letter-spacing: 1px;}
	
#subtext4{
	margin-top: -90px;
	margin-left: -100px;}
	
#subtext4 p {
	color: #262626;
	font-size: 16px;
	font-family: 'Droid Sans', sans-serif;
	letter-spacing: 1px;}
	
#socialbuttons{
	width: 520px;
	margin-left: 200px;
	border-top: 1px solid #b9b9b9;
	border-bottom: 1px solid #b9b9b9;
	padding: 20px 0 20px 120px;}
	
#socialbuttons a{
	color: #262626;
	text-decoration: none;
	padding-left: 40px;}
	
#socialbuttons a.one:hover {
	color: #9fcd6b;}
	
#socialbuttons a.two:hover {
	color: #91d9cc;}
	
#socialbuttons a.three:hover {
	color: #a66382;}
	
#socialbuttons a.four:hover {
	color: #d95276;}
	
/*--------------- contact styles ---------------*/

.parallax2 {
	/* The image used */
	background-image: url("images/banner02.png");

	/* Set a specific height */
	min-height: 500px; 

	/* Create the parallax scrolling effect */
	background-attachment: fixed;
	background-position: left top;
	background-repeat: no-repeat;
	background-size: auto;}

#contact p{
	color: #9b9b9b;
	font-size: 12px;
	font-family: 'Droid Sans', sans-serif;
	letter-spacing: 1px;
	padding: 225px 0 0 200px;}
	
.note{
	color: #262626;}

form{
	/* padding: 40px 0 0 200px; */
	padding: 0px 0px 0px 0px;
	}
form p{
	color: #9b9b9b;
	margin-top: -10px;
	padding: 0 0 7px;}
	
#name,#email,#phone,#message{
	color: #9b9b9b;
	width: 520px;
	height: 30px;
	border: none;
	border-bottom: 1px solid #9b9b9b;
	background: #f6f6f6;
	padding: 8px;}
	
#name:focus,#email:focus,#phone:focus,#message:focus{
	background: #81d4a3;
	color: #262626;}
	
#message{
	font-size: 11px;
	font-family: 'Droid Sans', sans-serif;
	height: 100px;
	resize: none;}
	
.btn{ 
	float: left;
	margin: -5px 17px 0 -14px;}
	
.btn input{
	color: #ffffff;
	font-family: 'Droid Sans', sans-serif;
	letter-spacing: 2px;
	width: 100px;
	height: 40px;
	margin: 20px 0 0 15px;
	background: #81d4a3;
	border: none;
	curser: pointer;}
	
#reset:hover{
	background: #9b9b9b;}

#submit:hover{
	background: #9b9b9b;}
	
/*--------------- footer styles ---------------*/
	
#footer{
	height: 100px;
	width: 960px;
	margin-top: 100px;
	padding-top: 40px;
	clear: both;}
	
#footerleft{
	height: 100px;
	width: 340px;
	float: left;}
	
#footerleft p{
	color: #262626;
	font-size: 14px;
	font-family: 'Droid Sans', sans-serif;
	letter-spacing: 1px;
	padding: 100px 0 0 1px;}

#footermiddle{
	height: 60px;
	width: 300px;
	float: left;
	padding: 40px 0 0 70px;}
	
#footermiddle a{
	color: #262626;
	font-family: 'Droid Sans', sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
	text-decoration: none;}
	
#footerright{
	height: 60px;
	width: 200px;
	float: right;
	padding: 40px 0 0 40px;}
	
#footerright a{
	color: #262626;
	font-family: 'Droid Sans', sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
	text-decoration: none;}
	
#footerright a:hover{
	text-decoration: underline;}