html {
	margin: 0;
	overflow-x: hidden;
	width: 100%;
}

body {
	margin: 0;
	overflow-x: hidden;
	overflow-y: hidden;
	width: 100%;
}


nav{
	position: absolute;
	/* background-color: rgba(0, 0, 0, 0.4);*/
	top: 0;
	left: 0;
  	right: 0;
  	z-index: 5;
	width: 100%;
	height:8%;
	padding: 1.25rem 0;
}

.animated-words{
	font-size: 1.5em;
	font-family: 'Roboto:100', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.3em;
    width: 50%;
    text-align: center;
}


@media only screen and (min-width: 320px) {
	.animated-words {
	font-size: 15px;
	font-family: 'Roboto:100', sans-serif;
	color: black;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-align: center;
	}
}

@media only screen and (min-width: 400px) {
	.animated-words {
	font-size: 15px;
	font-family: 'Roboto:100', sans-serif;
	color: black;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-align: center;
	}
}

@media only screen and (min-width: 680px) {
	.animated-words {
	font-size: 1.2em;
	font-family: 'Roboto:100', sans-serif;
	color: black;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-align: center;
	}
}

@media only screen and (min-width: 950px) {
	.animated-words {
	font-size: 1.5em;
	font-family: 'Roboto:100', sans-serif;
	color: black;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-align: center;
	}
}

@media only screen and (min-width: 1400px) {
	.animated-words {
	font-size: 1.5em;
	font-family: 'Roboto:100', sans-serif;
	color: black;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-align: center;
	}
}

@media only screen and (min-width: 1900px) {
	.animated-words {
	font-size: 2em;
	font-family: 'Roboto:100', sans-serif;
	color: black;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-align: center;
	}
}

@media only screen and (min-width: 2500px) {
	.animated-words {
	font-size: 2.8em;
	font-family: 'Roboto:100', sans-serif;
	color: black;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	text-align: center;
	}
}


.words span{
    position: absolute;
    width: 50%;
    text-align: center;
  	line-height: normal;
	overflow: hidden;
	opacity: 0;
	color: black;
	padding-top: 2px;
	padding-bottom: 8px;
	padding-left: 5px;
	padding-right: 5px;
	-o-transition: color 0.2s ease-in;
	-ms-transition: color 0.2s ease-in;
	-moz-transition: color 0.2s ease-in;
	-webkit-transition: color 0.2s ease-in;
	transition: color 0.2s ease-in;
}

/* Animation */
.words span{
	animation: fade 32s linear infinite 0s;
	color: #ffd578;
}
.words span:nth-child(2) { 
	animation-delay: 4s; 
	color: black;
}
.words span:nth-child(3) { 
	animation-delay: 8s; 
	color: black;	
}
.words span:nth-child(4) { 
	animation-delay: 12s; 
	color: black;
}
.words span:nth-child(5) { 
	animation-delay: 16s; 
	color: black;
}
.words span:nth-child(6) {  
	animation-delay: 20s; 
	color: black;
}
.words span:nth-child(7) {  
	animation-delay: 24s; 
	color: black;
}

.words span:nth-child(8) {  
	animation-delay: 28s; 
	color: black;
}

@keyframes fade {
    0% { 	opacity: 0; 
    		animation-timing-function: ease-in; 
    		height: 100%; }
    10% { opacity: 1; height: 100%; }
    15% { opacity: 1; height: 100%; }
	19% { opacity: 0; height: 100%; }
    100% { opacity: 0; }
}


/* Quicklinks */

div.content-wrapper-3{
	font-family: 'Roboto:500', sans-serif;
	color: black;
	text-transform: uppercase;
	text-align: center;
	font-size: 0.5rem;
	display: none;
	float: left;
	position: absolute;
	margin-top: 25%;
	letter-spacing: 0.2rem;
	left: 10%;
	transform: rotate(-90deg);
	z-index: 8;
}


@media only screen and (min-width: 320px) {
	div.content-wrapper-3 {
	display: none;
	font-family: 'Roboto:500', sans-serif;
	color: black;
	text-transform: uppercase;
	position: absolute
	text-align: center;
	margin-left: 15%;
	font-size: 11px;
	margin-top: 10%;
	letter-spacing: 0.075rem;
	transform: rotate(0deg);
	z-index: 8;
	}
}

@media only screen and (min-width: 400px) {
	div.content-wrapper-3 {
	display: none;
	font-family: 'Roboto:500', sans-serif;
	color: black;
	text-transform: uppercase;
	position: absolute
	text-align: center;
	margin-left: 20%;
	font-size: 11px;
	margin-top: 10%;
	letter-spacing: 0.075rem;
	transform: rotate(0deg);
	z-index: 8;
	}
}

@media only screen and (min-width: 680px) {
	div.content-wrapper-3 {
	display: block;
	font-family: 'Roboto:500', sans-serif;
	color: black;
	text-transform: uppercase;
	position: absolute
	text-align: center;
	margin-left: 29%;
	font-size: 11px;
	margin-top: 6%;
	letter-spacing: 0.075rem;
	transform: rotate(0deg);
	z-index: 8;
	}
}

@media only screen and (min-width: 950px) {
	div.content-wrapper-3 {
	font-family: 'Roboto:500', sans-serif;
	color: black;
	text-transform: uppercase;
	text-align: center;
	font-size: 0.4rem;
	display: block;
	float: left;
	position: absolute;
	margin-top:32%;
	letter-spacing: 0.2rem;
	left: -33%;
	transform: rotate(-90deg);
	z-index: 8;
	}
}

@media only screen and (min-width: 1200px) {
	div.content-wrapper-3 {
	font-family: 'Roboto:500', sans-serif;
	color: black;
	text-transform: uppercase;
	text-align: center;
	font-size: 0.6rem;
	display: block;
	float: left;
	position: absolute;
	margin-top: 30%;
	letter-spacing: 0.2rem;
	left: -32%;
	transform: rotate(-90deg);
	z-index: 8;
	}
}


@media only screen and (min-width: 1400px) {
	div.content-wrapper-3 {
	font-family: 'Roboto:500', sans-serif;
	color: black;
	text-transform: uppercase;
	text-align: center;
	font-size: 0.6rem;
	display: block;
	float: left;
	position: absolute;
	margin-top: 25%;
	letter-spacing: 0.2rem;
	left: -31%;
	transform: rotate(-90deg);
	z-index: 8;
	}
}

@media only screen and (min-width: 1900px) {
	div.content-wrapper-3 {
	font-family: 'Roboto:500', sans-serif;
	color: black;
	text-transform: uppercase;
	text-align: center;
	font-size: 0.9rem;
	display: block;
	float: left;
	position: absolute;
	margin-top: 27%;
	letter-spacing: 0.2rem;
	left: -31%;
	transform: rotate(-90deg);
	z-index: 8;
	}
}

@media only screen and (min-width: 2500px) {
	div.content-wrapper-3 {
	font-family: 'Roboto:500', sans-serif;
	color: black;
	text-transform: uppercase;
	text-align: center;
	font-size: 1.25em;
	display: block;
	float: left;
	position: absolute;
	margin-top: 27%;
	letter-spacing: 0.2rem;
	left: -30%;
	transform: rotate(-90deg);
	z-index: 8;
	}
}

a.quicklink--resume{
	color: black;
	text-decoration: none; 
}


a.quicklink--resume:hover{
	color: #ffd578;
}

a.quicklink--pdf-portfolio{
	color: black;
	text-decoration: none; 
}

a.quicklink--pdf-portfolio:hover{
	color: #ffd578;
}

a.quicklink--email{
	color: black;
	text-decoration: none; 
}

a.quicklink--email:hover{
	color: #ffd578;
}

.panel {
	height: 100%;
	width: 100%;
}

	/* About Me */

#slide1{
	position: relative;
	background: #ffffff;
	/*min-height: 80vh;*/
	/*height: 980px;*/
	width: 100%;
  	box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
  	z-index: 1; 
}

@media only screen and (min-width: 320px) {
	#slide1 {
		position: relative;
		background: #ffffff;
		min-height: 105vh;
		height: 500px;
		width: 100%;
	  	z-index: 1; 
	}
}

@media only screen and (min-width: 375px) {
	#slide1 {
		position: relative;
		background: #ffffff;
		min-height: 120vh;
		height: 500px;
		width: 100%;
	  	z-index: 1;
	}
}

@media only screen and (min-width: 400px) {
	#slide1 {
		position: relative;
		background: #ffffff;
		min-height: 120vh;
		height: 500px;
		width: 100%;
	  	z-index: 1;
	}
}

@media only screen and (min-width: 680px) {
	#slide1 {
		position: relative;
		/*padding: 12vh 5%;*/
		background: #ffffff;
		min-height: 50vh;
		height: 480px;
		width: 100%;
	  	box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 1;
	}
}

@media only screen and (min-width: 769px) {
	#slide1 {
		position: relative;
		/*padding: 12vh 5%;*/
		background: #ffffff;
		height: 500px;
		width: 100%;
	  	box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 1;
	}
}

@media only screen and (min-width: 800px) {
	#slide1 {
		position: relative;
		background: #ffffff;
	 	height: 540px;
		width: 100%;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 1; 
	}
}

@media only screen and (min-width: 900px) {
	#slide1 {
		position: relative;
		background: #ffffff;
	 	height: 580px;
		width: 100%;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 1; 
	}
}

@media only screen and (min-width: 950px) {
	#slide1 {
		position: relative;
		/*padding: 12vh 5%;*/
		background: #ffffff;
		/*min-height: 100vh;*/
		height: 650px;
		width: 100%;
	  	box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 1;
	}
}

@media only screen and (min-width: 1000px) {
	#slide1 {
		position: relative;
		/*padding: 12vh 5%;*/
		background: #ffffff;
		/*min-height: 100vh;*/
		height: 720px;
		width: 100%;
	  	box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 1;
	}
}

@media only screen and (min-width: 1200px) {
	#slide1 {
		position: relative;
		background: #ffffff;
		/*min-height: 100vh;*/
		height: 800px;
		width: 100%;
	  	box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 1;
	}
}


@media only screen and (min-width: 1400px) {
	#slide1 {
		position: relative;
		/*padding: 12vh 5%;*/
		background: #ffffff;
		/*min-height: 100vh;*/
		height: 800px;
		width: 100%;
	  	box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 1;
	}
}

@media only screen and (min-width: 1600px) {
	#slide1 {
		position: relative;
		/*padding: 12vh 5%;*/
		background: #ffffff;
		/*min-height: 100vh;*/
		height: 944px;
		width: 100%;
	  	box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 1;
	}
}

@media only screen and (min-width: 1900px) {
	#slide1 {
		position: relative;
		/*padding: 12vh 5%;*/
		background: #ffffff;
		/*min-height: 100vh;*/
		height: 1069px;
		width: 100%;
	  	box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 1;
	}
}

@media only screen and (min-width: 2500px) {
	#slide1 {
		position: relative;
		/*padding: 12vh 5%;*/
		background: #ffffff;
		/*min-height: 100vh;*/
		height: 1406px;
		width: 100%;
	  	box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 1;
	}
}

.greeting{
	position: absolute;
	margin-top: 18%;
    margin-left: 52px;
	font-size: 7em;
	font-family: 'Cormorant Garamond:300', serif;
	color: #f2f2f2;
	text-transform: uppercase;
}

@media only screen and (min-width: 320px) {
	.greeting {
		position: absolute;
		margin-top: 110%;
		margin-left: 10%;		
		font-size: 3em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
	    z-index: 0;
	}
}

@media only screen and (min-width: 375px) {
	.greeting {
		position: absolute;
		margin-top: 111%;
		margin-left: 10%;		
		font-size: 3em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
	    z-index: 0;
	}
}

@media only screen and (min-width: 400px) {
	.greeting {
		position: absolute;
		margin-top: 110%;
		margin-left: 10%;		
		font-size: 3.5em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
	    z-index: 0;
	}
}

@media only screen and (min-width: 680px) {
	.greeting {
		position: absolute;
		margin-top: 22%;
	    margin-left: 52%;
		font-size: 4em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
	}
}

@media only screen and (min-width: 950px) {
	.greeting {
		position: absolute;
		margin-top: 19%;
	    margin-left: 52%;
		font-size: 5.5em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
	}
}

@media only screen and (min-width: 1200px) {
	.greeting {
		position: absolute;
		margin-top: 18.5%;
   		margin-left: 52%;
		font-size: 7em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
	}
}

@media only screen and (min-width: 1400px) {
	.greeting {
		position: absolute;
		margin-top: 18.5%;
   		margin-left: 52%;
		font-size: 7em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
	}
}

@media only screen and (min-width: 1900px) {
	.greeting {
		position: absolute;
		margin-top: 18.5%;
   		margin-left: 52%;
		font-size: 8em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
	}
}

@media only screen and (min-width: 2500px) {
	.greeting {
		position: absolute;
		margin-top: 18.5%;
   		margin-left: 52%;
		font-size: 10em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
	}
}

.body-text{
	position: relative;
	font-family: 'Roboto:300', sans-serif;
	color: black;
	font-size: 1.5em;
	width: 40%;
	float: right;
	margin-left: 5%; 
	margin-top: 19%;
	padding: 0 5%;
}

@media only screen and (min-width: 320px) {
	.body-text {
		position: relative;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 0.7em;
		z-index: 3;
		width: 70%;
		float: left;
		margin-left: 10%;
		margin-top: 121%;
		padding: 0 5%;
	}
}

@media only screen and (min-width: 375px) {
	.body-text {
		position: relative;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 0.98em;
		z-index: 3;
		width: 70%;
		float: left;
		margin-left: 10%;
		margin-top: 120%;
		padding: 0 5%;
	}
}

@media only screen and (min-width: 400px) {
	.body-text {
		position: relative;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 0.9em;
		z-index: 3;
		width: 70%;
		float: left;
		margin-left: 10%;
		margin-top: 120%;
		padding: 0 5%;
	}
}

@media only screen and (min-width: 680px) {
	.body-text {
		position: absolute;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 0.9em;
		z-index: 3;
		width: 33%;
		float: left;
		margin-left: 50%;
		margin-top: 28%;
		padding: 0 5%;
	}
}

@media only screen and (min-width: 950px) {
	.body-text {
		position: absolute;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 1.1em;
		z-index: 3;
		width: 33%;
		float: left;
		top: -4%;
	    left: 1%;
		padding: 0 5%;
	}
}

@media only screen and (min-width: 1200px) {
	.body-text {
		position: absolute;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 1.3em;
		z-index: 3;
		width: 31%;
		float: left;
		top: -5%;
	    left: 0%;
		padding: 0 5%;
	}
}

@media only screen and (min-width: 1400px) {
	.body-text {
		position: absolute;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 1.3em;
		z-index: 3;
		width: 31%;
		float: left;
		top: -7%;
	    left: 0%;
		padding: 0 5%;
	}
}

@media only screen and (min-width: 1900px) {
	.body-text {
		position: absolute;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 1.5em;
		z-index: 3;
		width: 32%;
		float: left;
		top: -8%;
	    left: 0%;
		padding: 0 5%;
	}
}

@media only screen and (min-width: 2500px) {
	.body-text {
		position: absolute;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 2.25em;
		z-index: 3;
		width: 32%;
		float: left;
		top: -8.5%;
	    left: 0%;
		padding: 0 5%;
	}
}

#big-bio{
	color: #ffd578;
	letter-spacing: 0.2em;
	font-size: 1.75rem;
}

@media only screen and (min-width: 320px) {
	#big-bio {
		color: #ffd578;
		letter-spacing: 0.1em;
		font-size: 12.5px;
	}
}

@media only screen and (min-width: 375px) {
	#big-bio {
		color: #ffd578;
		letter-spacing: 0.1em;
		font-size: 17px;
	}
}

@media only screen and (min-width: 400px) {
	#big-bio {
		color: #ffd578;
		letter-spacing: 0.1em;
		font-size: 1.25em;
	}
}

@media only screen and (min-width: 680px) {
	#big-bio {
		color: #ffd578;
		letter-spacing: 0.1em;
		font-size: 1em;
	}
}

@media only screen and (min-width: 950px) {
	#big-bio {
		color: #ffd578;
		letter-spacing: 0.1em;
		font-size: 1.3em;
	}
}

@media only screen and (min-width: 1400px) {
	#big-bio {
		color: #ffd578;
		letter-spacing: 0.1em;
		font-size: 1.4em;
	}
}

@media only screen and (min-width: 1900px) {
	#big-bio {
		color: #ffd578;
		letter-spacing: 0.1em;
		font-size: 1.4em;
	}
}

@media only screen and (min-width: 2500px) {
	#big-bio {
		color: #ffd578;
		letter-spacing: 0.1em;
		font-size: 1.5em;
	}
}

#bio-animation{
	position: absolute;
	float: left;
	width: 30%;
}

@media only screen and (min-width: 320px) {
	#bio-animation {
		position: absolute;
		margin-left: 10%;
		width: 75%;
		height: auto;
	    z-index: 4;
	    margin-top: 25%;
	}
}

@media only screen and (min-width: 375px) {
	#bio-animation {
		position: absolute;
		margin-left: 8%;
		width: 80%;
		height: auto;
	    z-index: 4;
	    margin-top: 25%;
	}
}

@media only screen and (min-width: 400px) {
	#bio-animation {
		position: absolute;
		margin-left: 10%;
		width: 75%;
		height: auto;
	    z-index: 4;
	    margin-top: 27%;
	}
}

@media only screen and (min-width: 680px) {
	#bio-animation {
		position: absolute;
		float: left;
		width: 40%;
		height: auto;
	    z-index: 4;
	    margin-top: 15%;
	    margin-left: 5%;
	}
}

@media only screen and (min-width: 950px) {
	#bio-animation {
		position: absolute;
		float: left;
		width: 40%;
		height: auto;
		margin-top: 12%;
	    z-index: 4;
	    margin-left: 8%;
	}
}

@media only screen and (min-width: 1400px) {
	#bio-animation {
		position: absolute;
		float: left;
		width: 35%;
		height: auto;
		margin-top: 11%;
	    z-index: 4;
	    margin-left: 10%;
	}
}

#bio-animation img{
	width: 100%;
	height: auto;
}


/*Line*/

.line{
	position: absolute;
	margin: 0;
	/*float: left;*/
	/*width: 90%;*/
	/*margin-top: -14%;*/
	/*z-index: 4;*/
	/*margin-left: 13.5%;*/
	/*top: 1484.120px;*/
	/*margin-left: 269.4022px;*/
  	z-index: 6; 
}

@media screen and (max-width: 600px) {
  .line {
    visibility: hidden;
    clear: both;
    display: none;
  }
}

#animated-line{
	width: 700px;
	height: 700px;
}


/* Ethos */

.slide2{
	position: relative;
	/*padding: 12vh 5%;*/
 	min-height: 100vh;
 	height: 500px;
	width: 100%;
	background: #999999;
	box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
  	z-index: 0; 
}

/*@media screen and (max-width: 600px) {
  .slide2 {
    visibility: hidden;
    clear: both;
    display: none;
  }
}*/

@media only screen and (min-width: 680px) {
	.slide2 {
		position: relative;
		min-height: 40%;
	 	/*height: 153px;*/
		width: 100%;
		background: #999999;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 0; 
	}
}

@media only screen and (min-width: 800px) {
	.slide2 {
		position: relative;
	 	height: 550px;
		width: 100%;
		background: #999999;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 0; 
	}
}

@media only screen and (min-width: 900px) {
	.slide2 {
		position: relative;
	 	height: 580px;
		width: 100%;
		background: #999999;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 0; 
	}
}

@media only screen and (min-width: 950px) {
	.slide2 {
		position: relative;
	 	/*min-height: 90vh;*/
	 	height: 650px;
		width: 100%;
		background: #999999;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 0; 
	}
}

@media only screen and (min-width: 1000px) {
	.slide2 {
		position: relative;
	 	/*min-height: 90vh;*/
	 	height: 675px;
		width: 100%;
		background: #999999;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 0; 
	}
}

@media only screen and (min-width: 1200px) {
	.slide2 {
		position: relative;
	 	/*min-height: 90vh;*/
	 	height: 730px;
		width: 100%;
		background: #999999;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 0; 
	}
}

@media only screen and (min-width: 1350px) {
	.slide2 {
		position: relative;
	 	/*min-height: 90vh;*/
	 	height: 768px;
		width: 100%;
		background: #999999;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 0; 
	}
}

@media only screen and (min-width: 1400px) {
	.slide2 {
		position: relative;
	 	/*min-height: 85vh;*/
	 	height: 692px;
		width: 100%;
		background: #999999;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 0; 
	}
}

@media only screen and (min-width: 1600px) {
	.slide2 {
		position: relative;
	 	/*min-height: 85vh;*/
	 	height: 800px;
		width: 100%;
		background: #999999;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 0; 
	}
}

@media only screen and (min-width: 1900px) {
	.slide2 {
		position: relative;
	 	/*min-height: 85vh;*/
	 	height: 918px;
		width: 100%;
		background: #999999;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 0; 
	}
}

@media only screen and (min-width: 2500px) {
	.slide2 {
		position: relative;
	 	/*min-height: 85vh;*/
	 	height: 1224px;
		width: 100%;
		background: #999999;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	  	z-index: 0; 
	}
}

#ethos-background{
	/*visibility: visible;*/
}

@media screen and (max-width: 679px) {
  #ethos-background {
    visibility: hidden;
    clear: both;
    display: none;
  }
}

#ethos-title{
	position: absolute;
	width: 50%;
	top: -23%;
	margin-left: 3%;
	text-transform: uppercase;
	font-family: 'Roboto:300', sans-serif;
	font-size: 15em;
	color: rgba(242, 242, 242, 0.1);
	float: left;
}

@media only screen and (min-width: 680px) {
	#ethos-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(242, 242, 242, 0.1);
		margin-top: 16%;
		margin-left: 3%;
		font-size: 9em;
		float: left;
	}
}

@media only screen and (min-width: 800px) {
	#ethos-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(242, 242, 242, 0.1);
		margin-top: 17%;
		margin-left: 3%;
		font-size: 10em;
		float: left;
	}
}

@media only screen and (min-width: 950px) {
	#ethos-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(242, 242, 242, 0.1);
		margin-top: 17%;
		margin-left: 3%;
		font-size: 12em;
		float: left;
	}
}

@media only screen and (min-width: 1200px) {
	#ethos-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(242, 242, 242, 0.1);
		margin-top: 13%;
		margin-left: 2%;
		font-size: 15rem;
		float: left;
	}
}

@media only screen and (min-width: 1400px) {
	#ethos-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(242, 242, 242, 0.1);
		margin-top: 11%;
		margin-left: 2%;
		font-size: 15rem;
		float: left;
	}
}

@media only screen and (min-width: 1900px) {
	#ethos-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(242, 242, 242, 0.1);
		margin-top: 12%;
		margin-left: 2%;
		font-size: 17rem;
		float: left;
	}
}

@media only screen and (min-width: 2500px) {
	#ethos-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(242, 242, 242, 0.1);
		margin-top: 12%;
		margin-left: 2%;
		font-size: 25em;
		float: left;
	}
}

.ethos-body-text{
	position: relative;
	font-family: 'Roboto:300', sans-serif;
	color: black;
	font-size: 2em;
	width: 35%;
	float: right;
	margin-right: 5%;
	margin-top: 19%;
	padding: 0 5%;
}

@media only screen and (min-width: 680px) {
	.ethos-body-text {
		position: relative;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 1.1em;
		width: 40%;
		float: right;
		margin-right: 1%;
		margin-top: 22%;
		padding: 0 5%;
	}
}

@media only screen and (min-width: 950px) {
	.ethos-body-text {
		position: relative;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 1.3em;
		width: 35%;
		float: right;
		margin-right: 5%;
		margin-top: 22%;
		padding: 0 5%;
	}
}

@media only screen and (min-width: 1200px) {
	.ethos-body-text {
		position: relative;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 1.5em;
		width: 35%;
		float: right;
		margin-right: 5%;
		margin-top: 20%;
		padding: 0 5%;
	}
}

@media only screen and (min-width: 1400px) {
	.ethos-body-text {
		position: relative;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 1.75em;
		width: 35%;
		float: right;
		margin-right: 5%;
		margin-top: 17%;
		padding: 0 5%;
	}
}

@media only screen and (min-width: 1900px) {
	.ethos-body-text {
		position: relative;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 2em;
		width: 35%;
		float: right;
		margin-right: 5%;
		margin-top: 17%;
		padding: 0 5%;
	}
}

@media only screen and (min-width: 2500px) {
	.ethos-body-text {
		position: relative;
		font-family: 'Roboto:300', sans-serif;
		color: black;
		font-size: 2.75em;
		width: 35%;
		float: right;
		margin-right: 5%;
		margin-top: 17%;
		padding: 0 5%;
	}
}

#ethostxt{
	position: absolute;
	font-size: 1.5em;
	width: 20%;
	font-family: 'Roboto:100', sans-serif;
	color: #ffd578;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	margin-left: 79%;
	margin-top: 53%;
    z-index: 3;
}

@media only screen and (min-width: 680px) {
	#ethostxt {
		position: absolute;
		font-size: 1em;
		width: 30%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 68%;
		margin-top: 60%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 769px) {
	#ethostxt {
		position: absolute;
		font-size: 1.175em;
		width: 30%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 70%;
		margin-top: 57%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 800px) {
	#ethostxt {
		position: absolute;
		font-size: 1.2em;
		width: 30%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 69%;
		margin-top: 57%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 850px) {
	#ethostxt {
		position: absolute;
		font-size: 1.3em;
		width: 30%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 69%;
		margin-top: 56%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 900px) {
	#ethostxt {
		position: absolute;
		font-size: 1.3em;
		width: 30%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 70%;
		margin-top: 55%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 950px) {
	#ethostxt {
		position: absolute;
		font-size: 1.3em;
		width: 30%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 72%;
		margin-top: 60%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 1000px) {
	#ethostxt {
		position: absolute;
		font-size: 1.5em;
		width: 30%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 70%;
		margin-top: 57%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 1050px) {
	#ethostxt {
		position: absolute;
		font-size: 1.5em;
		width: 30%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 72%;
		margin-top: 54%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 1200px) {
	#ethostxt {
		position: absolute;
		font-size: 1.5em;
		width: 25%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 74%;
		margin-top: 52%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 1400px) {
	#ethostxt {
		position: absolute;
		font-size: 1.5em;
		width: 20%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 78%;
		margin-top: 43%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 1550px) {
	#ethostxt {
		position: absolute;
		font-size: 1.5em;
		width: 20%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 78%;
		margin-top: 40%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 1600px) {
	#ethostxt {
		position: absolute;
		font-size: 1.75em;
		width: 20%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 78%;
		margin-top: 43%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 1800px) {
	#ethostxt {
		position: absolute;
		font-size: 1.75em;
		width: 20%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 80%;
		margin-top: 40%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 1880px) {
	#ethostxt {
		position: absolute;
		font-size: 1.75em;
		width: 20%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 80%;
		margin-top: 39%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 1950px) {
	#ethostxt {
		position: absolute;
		font-size: 1.75em;
		width: 20%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 80%;
		margin-top: 43%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 2000px) {
	#ethostxt {
		position: absolute;
		font-size: 2em;
		width: 30%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 78%;
		margin-top: 40%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 2100px) {
	#ethostxt {
		position: absolute;
		font-size: 2em;
		width: 30%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 78%;
		margin-top: 37%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 2300px) {
	#ethostxt {
		position: absolute;
		font-size: 2.25em;
		width: 20%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 78%;
		margin-top: 35%;
	    z-index: 3;
	}
}

@media only screen and (min-width: 2500px) {
	#ethostxt {
		position: absolute;
		font-size: 2.5em;
		width: 20%;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
		margin-left: 78%;
		margin-top: 43%;
	    z-index: 3;
	}
}

#ethos-animation{
	position: absolute;
	float: left;
	width: 30%;	
	margin-left: 8%;
	margin-top: 10%;
/*	-webkit-transform: translateZ(0);
    transform: translateZ(0);*/
    /*z-index: 4;*/
}

@media only screen and (min-width: 320px, 500px) {
	#ethos-animation {
	/*display: none;*/
	visibility: hidden;
	}
}

@media only screen and (min-width: 680px) {
	#ethos-animation {
		float: left;
		width: 35%;
	    z-index: 4;
	    margin-top: -13%;
	    margin-left: 7%;
	}
}

@media only screen and (min-width: 950px) {
	#ethos-animation {
		float: left;
		width: 40%;
		margin-top: 1%;
		margin-left: 8%;
	    z-index: 4;
	}
}

@media only screen and (min-width: 1200px) {
	#ethos-animation {
		float: left;
		width: 35%;
		margin-top: 1%;
		margin-left: 9%;
	    z-index: 4;
	}
}

@media only screen and (min-width: 1400px) {
	#ethos-animation {
		float: left;
		width: 30%;
		margin-top: 0%;
		margin-left: 12%;
	    z-index: 4;
	}
}

@media only screen and (min-width: 1900px) {
	#ethos-animation {
		float: left;
		width: 40%;
		margin-top: 6%;
		margin-left: 5%;
	    z-index: 4;
	}
}

@media only screen and (min-width: 2500px) {
	#ethos-animation {
		float: left;
		width: 40%;
		margin-top: 10%;
		margin-left: 5%;
	    z-index: 4;
	}
}

.path3 {
  stroke-dasharray: 6000;
  stroke-dashoffset: 6000;
  animation: dash 10s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

/* Projects */

/*.project-1{
	width: 100%;
	margin: 0;
}
.project-2{
	width: 100%;
	margin: 0;
}
.project-3{
	width: 100%;
	margin: 0;
}
.project-4{
	width: 100%;
	margin: 0;
}
.project-5{
	width: 100%;
	margin: 0; 
}*/

.slide3{
	position: relative;
	width: 100%;
	/*margin: 0;*/
	/*overflow-x: hidden;*/
	/*padding: 12vh 5%;*/
 	/*min-height: min-content;*/
 	height: 2400px;
	
	background: #ffffff;
	/*box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);*/
	box-sizing: border-box;
  	z-index: 1; 
}

@media only screen and (min-width: 320px) {
	.slide3 {
		position: relative;
	 	min-height: 100vh;
		width: 100%;
		margin-top: 0;
		background: #ffffff;
		box-sizing: border-box;
	  	z-index: 1; 
	}
}

@media only screen and (min-width: 375px) {
	.slide3 {
		position: relative;
	 	/*min-height: 260vh;*/
	 	/*height: 500px;*/
		width: 100%;
		margin-top: 0;
		background: #ffffff;
		box-sizing: border-box;
	  	z-index: 1;
	}
}

@media only screen and (min-width: 400px) {
	.slide3 {
		position: relative;
	 	/*min-height: 260vh;*/
	 	/*height: 500px;*/
		width: 100%;
		margin-top: 0;
		background: #ffffff;
		box-sizing: border-box;
	  	z-index: 1;
	}
}

@media only screen and (min-width: 680px) {
	.slide3 {
		position: relative;
		/*padding: 12vh 5%;*/
	 	/*min-height: 130vh;*/
	 	/*height: 500px;*/
		width: 100%;
		background: #ffffff;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
		box-sizing: border-box;
	  	z-index: 1; 
	}
}

@media only screen and (min-width: 950px) {
	.slide3 {
		position: relative;
		/*padding: 12vh 5%;*/
	 	/*min-height: 170vh;*/
	 	/*height: 500px;*/
		width: 100%;
		background: #ffffff;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
		box-sizing: border-box;
	  	z-index: 1; 
	}
}

@media only screen and (min-width: 1200px) {
	.slide3 {
		position: relative;
		/*padding: 12vh 5%;*/
	 	/*min-height: 250vh;*/
	 	/*height: 500px;*/
		width: 100%;
		background: #ffffff;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
		box-sizing: border-box;
	  	z-index: 1; 
	}
}

@media only screen and (min-width: 1400px) {
	.slide3 {
		position: relative;
		/*padding: 12vh 5%;*/
	 	/*min-height: 250vh;*/
	 	/*height: 500px;*/
		width: 100%;
		background: #ffffff;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
		box-sizing: border-box;
	  	z-index: 1; 
	}
}

@media only screen and (min-width: 1900px) {
	.slide3 {
		position: relative;
		/*padding: 12vh 5%;*/
	 	/*min-height: 250vh;*/
	 	/*height: 500px;*/
		width: 100%;
		background: #ffffff;
		box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
		box-sizing: border-box;
	  	z-index: 1; 
	}
}


#work-title{
	position:absolute;
	width: 50%;
	text-transform: uppercase;
	font-family: 'Roboto:300', sans-serif;
	color: rgba(0, 0, 0, 0.1);
	margin-top: -3%;
	font-size: 15rem;
	float: left;
}

@media only screen and (min-width: 320px) {
	#work-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(0, 0, 0, 0.1);
		margin-top: -10%;
		margin-left: 5%;
		font-size: 4rem;
	}
}

@media only screen and (min-width: 375px) {
	#work-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(0, 0, 0, 0.1);
		margin-top: -22%;
		font-size: 5rem;
	}
}

@media only screen and (min-width: 400px) {
	#work-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(0, 0, 0, 0.1);
		text-align: center;
		margin-top: -20%;
		font-size: 5.5rem;
	}
}

@media only screen and (min-width: 680px) {
	#work-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(0, 0, 0, 0.1);
		margin-top: 2%;
		font-size: 9rem;
		float: left;
	}
}

@media only screen and (min-width: 950px) {
	#work-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(0, 0, 0, 0.1);
		margin-top: 2%;
		font-size: 12rem;
		float: left;
	}
}

@media only screen and (min-width: 1200px) {
	#work-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(0, 0, 0, 0.1);
		margin-top: 1%;
		margin-left: 3%;
		font-size: 14rem;
		float: left;
	}
}

@media only screen and (min-width: 1400px) {
	#work-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(0, 0, 0, 0.1);
		margin-top: 1%;
		margin-left: 3%;
		font-size: 15rem;
		float: left;
	}
}

@media only screen and (min-width: 1900px) {
	#work-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(0, 0, 0, 0.1);
		margin-top: 2%;
		margin-left: 1%;
		font-size: 17rem;
		float: left;
	}
}

@media only screen and (min-width: 2500px) {
	#work-title {
		position: absolute;
		width: 50%;
		text-transform: uppercase;
		font-family: 'Roboto:300', sans-serif;
		color: rgba(0, 0, 0, 0.1);
		margin-top: 2%;
		margin-left: 3%;
		font-size: 25rem;
		float: left;
	}
}

#video-home1{
	position: absolute;
	width: 25%;
	margin-left: -2%;
	margin-top: 7%;
	z-index: 3;
	opacity: .75;
}

@media only screen and (max-width: 600px) {
	#video-home1 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}

@media only screen and (min-width: 680px) {
	#video-home1 {
		position: absolute;
		width: 25%;
		margin-left: 12%;
		margin-top: 17%;
		z-index: 3;
		opacity: 0.8;
	}
}

@media only screen and (min-width: 950px) {
	#video-home1 {
		position: absolute;
		width: 25%;
		margin-left: 9%;
		margin-top: 14%;
		z-index: 3;
		opacity: 0.8;
	}
}

#project1{
	position: absolute;
	width: 25%;
	margin-left: -2%;
	margin-top: 7%;
	z-index: 3;
	opacity: .75;
}

@media only screen and (min-width: 320px) {
	#project1 {
		position: relative;
		width: 80%;
		margin-top: 5%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 400px) {
	#project1 {
		position: relative;
		width: 80%;
		margin-top: 5%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 680px) {
	#project1 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}


#project1hide{
	position: absolute;
	width: 25%;
	margin-left: -2%;
	margin-top: 7%;
	z-index: 4;
	opacity: 0;
	-o-transition: opacity 0.2s ease-in;
	-ms-transition: opacity 0.2s ease-in;
	-moz-transition: opacity 0.2s ease-in;
	-webkit-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
}

@media only screen and (max-width: 679px) {
	#project1hide {
		opacity: 0;
		z-index: 3;
	}
}

@media only screen and (min-width: 680px) {
	#project1hide {
		position: absolute;
		width: 25%;
		margin-left: 12%;
		margin-top: 17%;
		z-index: 3;
		opacity: 0;
	}
}

@media only screen and (min-width: 950px) {
	#project1hide {
		position: absolute;
		width: 25%;
		margin-left: 9%;
		margin-top: 14%;
		z-index: 3;
		opacity: 0;
	}
}


#project1hide:hover{
	opacity: 1;
}

@media only screen and (min-width: 320px) {
	#project1hide:hover {
		opacity: 0;
	}
}

@media only screen and (min-width: 400px) {
	#project1hide:hover {
		opacity: 0;
	}
}

@media only screen and (min-width: 680px) {
	#project1hide:hover {
		opacity: 1;
	}
}

@media only screen and (min-width: 950px) {
	#project1hide:hover {
		opacity: 1;
	}
}

#video-home2{
	position: absolute;
	width: 25%;
	margin-left: 50%;
	margin-top: 30%;
	z-index: 3;
	opacity: .75;
}

@media only screen and (max-width: 600px) {
	#video-home2 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}

@media only screen and (min-width: 680px) {
	#video-home2 {
		position: absolute;
		width: 25%;
		margin-left: 60%;
		margin-top: 40%;
		z-index: 3;
		opacity: 1;
	}
}

@media only screen and (min-width: 950px) {
	#video-home2 {
		position: absolute;
		width: 25%;
		margin-left: 60%;
		margin-top: 37%;
		z-index: 3;	
		opacity: 1;
	}
}


#project2{
	position: absolute;
	width: 25%;
	margin-left: 50%;
	margin-top: 30%;
	z-index: 3;
	opacity: .75;
}

@media only screen and (min-width: 320px) {
	#project2 {
		position: relative;
		width: 80%;
		margin-top: 10%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 400px) {
	#project2 {
		position: relative;
		width: 80%;
		margin-top: 10%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 680px) {
	#project2 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}

#project2hide{
	position: absolute;
	width: 25%;
	margin-left: 50%;
	margin-top: 30%;
	z-index: 3;
	opacity: 0;
	-o-transition: opacity 0.2s ease-in;
	-ms-transition: opacity 0.2s ease-in;
	-moz-transition: opacity 0.2s ease-in;
	-webkit-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
}

@media only screen and (max-width: 679px) {
	#project2hide {
		opacity: 0;
		z-index: 3;
	}
}

@media only screen and (min-width: 680px) {
	#project2hide {
		position: absolute;
		width: 25%;
		margin-left: 60%;
		margin-top: 40%;
		z-index: 3;
		opacity: 0;
	}
}

@media only screen and (min-width: 950px) {
	#project2hide {
		position: absolute;
		width: 25%;
		margin-left: 60%;
		margin-top: 37%;
		z-index: 3;
		opacity: 0;
	}
}

#project2hide:hover{
	opacity: 1;
	z-index: 4;
}

@media only screen and (min-width: 320px) {
	#project2hide:hover {
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 400px) {
	#project2hide:hover {
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 680px) {
	#project2hide:hover {
		opacity: 1;
		z-index: 4;
	}
}

@media only screen and (min-width: 950px) {
	#project2hide:hover {
		opacity: 1;
		z-index: 4;
	}
}

#video-home3{
	position: absolute;
	width: 25%;
	margin-left: 5%;
	margin-top: 58%;
	/*z-index: 3;*/
	opacity: .75;
}

@media only screen and (max-width: 600px) {
	#video-home3 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}

@media only screen and (min-width: 680px) {
	#video-home3 {
		position: absolute;
		width: 25%;
		margin-left: 5%;
		margin-top: 58%;
		z-index: 3;
		opacity: 1;
	}
}

@media only screen and (min-width: 950px) {
	#video-home3 {
		position: absolute;
		width: 25%;
		margin-left: 5%;
		margin-top: 58%;
		z-index: 3;
		opacity: 1;
	}
}

#project3{
	position: absolute;
	width: 25%;
	margin-left: 5%;
	margin-top: 58%;
	/*z-index: 3;*/
	opacity: .75;
}

@media only screen and (min-width: 320px) {
	#project3 {
		position: relative;
		width: 80%;
		margin-top: 10%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 400px) {
	#project3 {
		position: relative;
		width: 80%;
		margin-top: 10%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 680px) {
	#project3 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}

#project3hide{
	position: absolute;
	width: 25%;
	margin-left: 5%;
	margin-top: 58%;
	z-index: 3;
	opacity: 0;
	-o-transition: opacity 0.2s ease-in;
	-ms-transition: opacity 0.2s ease-in;
	-moz-transition: opacity 0.2s ease-in;
	-webkit-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
}

@media only screen and (max-width: 679px) {
	#project3hide {
		opacity: 0;
		z-index: 3;
	}
}

@media only screen and (min-width: 680px) {
	#project3hide {
		position: absolute;
		width: 25%;
		margin-left: 5%;
		margin-top: 58%;
		z-index: 3;
		opacity: 0;
	}
}

@media only screen and (min-width: 950px) {
	#project3hide {
		position: absolute;
		width: 25%;
		margin-left: 5%;
		margin-top: 58%;
		z-index: 3;
		opacity: 0;
	}
}

#project3hide:hover{
	opacity: 1;
	z-index: 4;
}

@media only screen and (min-width: 320px) {
	#project3hide:hover {
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 400px) {
	#project3hide:hover {
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 680px) {
	#project3hide:hover {
		opacity: 1;
		z-index: 4;
	}
}

@media only screen and (min-width: 950px) {
	#project3hide:hover {
		opacity: 1;
		z-index: 4;
	}
}

#video-home4{
	position: absolute;
	width: 25%;
	margin-left: 57%;
	margin-top: 83%;
	z-index: 3;
	opacity: .75;
}

@media only screen and (max-width: 600px) {
	#video-home4 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}

@media only screen and (min-width: 680px) {
	#video-home4 {
		position: absolute;
		width: 25%;
		margin-left: 67%;
		margin-top: 83%;
		z-index: 3;
		opacity: 1;
	}
}

@media only screen and (min-width: 950px) {
	#video-home4 {
		position: absolute;
		width: 25%;
		margin-left: 65%;
		margin-top: 83%;
		z-index: 3;
		opacity: 1;
	}
}


#project4{
	position: absolute;
	width: 25%;
	margin-left: 57%;
	margin-top: 83%;
	z-index: 3;
	opacity: .75;
}

@media only screen and (min-width: 320px) {
	#project4 {
		position: relative;
		width: 80%;
		margin-top: 10%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 400px) {
	#project4 {
		position: relative;
		width: 80%;
		margin-top: 10%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 680px) {
	#project4 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}

#project4hide{
	position: absolute;
	width: 25%;
	margin-left: 57%;
	margin-top: 83%;
	z-index: 3;
	opacity: 0;
	-o-transition: opacity 0.2s ease-in;
	-ms-transition: opacity 0.2s ease-in;
	-moz-transition: opacity 0.2s ease-in;
	-webkit-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
}

@media only screen and (max-width: 679px) {
	#project4hide {
		opacity: 0;
		z-index: 3;
	}
}

@media only screen and (min-width: 680px) {
	#project4hide {
		position: absolute;
		width: 25%;
		margin-left: 67%;
		margin-top: 83%;
		z-index: 3;
		opacity: 0;
	}
}

@media only screen and (min-width: 950px) {
	#project4hide {
		position: absolute;
		width: 25%;
		margin-left: 65%;
		margin-top: 83%;
		z-index: 3;
		opacity: 0;
	}
}


#project4hide:hover{
	opacity: 1;
	z-index: 4;
}

@media only screen and (min-width: 320px) {
	#project4hide:hover {
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 400px) {
	#project4hide:hover {
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 680px) {
	#project4hide:hover {
		opacity: 1;
		z-index: 4;
	}
}

@media only screen and (min-width: 950px) {
	#project4hide:hover {
		opacity: 1;
		z-index: 4;
	}
}

#video-home5{
	position: absolute;
  	width: 25%;
	margin-left: 15%;
	margin-top: 100%;
	z-index: 3;
	opacity: 1;
}

@media only screen and (max-width: 600px) {
	#video-home5 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}

@media only screen and (min-width: 680px) {
	#video-home5 {
		position: absolute;
		width: 25%;
		margin-left: 22%;
		margin-top: 105%;
		z-index: 3;
		opacity: 1;
	}
}

@media only screen and (min-width: 950px) {
	#video-home5 {
		position: absolute;
		width: 25%;
		margin-left: 20%;
		margin-top: 100%;
		z-index: 3;
		opacity: 1;
	}
}


#project5{
  	position: absolute;
  	width: 25%;
	margin-left: 15%;
	margin-top: 100%;
	z-index: 3;
	opacity: .75;
}

@media only screen and (min-width: 320px) {
	#project5 {
		position: relative;
		width: 80%;
		margin-top: 10%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 400px) {
	#project5 {
		position: relative;
		width: 80%;
		margin-top: 10%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 680px) {
	#project5 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}

#project5hide{
  	position: absolute;
  	width: 25%;
	margin-left: 15%;
	margin-top: 100%;
	z-index: 3;
	opacity: 0;
	-o-transition: opacity 0.2s ease-in;
	-ms-transition: opacity 0.2s ease-in;
	-moz-transition: opacity 0.2s ease-in;
	-webkit-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
}

@media only screen and (max-width: 679px) {
	#project5hide {
		opacity: 0;
		z-index: 3;
	}
}

@media only screen and (min-width: 680px) {
	#project5hide {
		position: absolute;
		width: 25%;
		margin-left: 22%;
		margin-top: 105%;
		z-index: 3;
		opacity: 0;
	}
}

@media only screen and (min-width: 950px) {
	#project5hide {
		position: absolute;
		width: 25%;
		margin-left: 20%;
		margin-top: 100%;
		z-index: 3;
		opacity: 0;
	}
}


#project5hide:hover{
	opacity: 1;
	z-index: 4;
}

@media only screen and (min-width: 320px) {
	#project5hide:hover {
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 400px) {
	#project5hide:hover {
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 680px) {
	#project5hide:hover {
		opacity: 1;
		z-index: 4;
	}
}

@media only screen and (min-width: 950px) {
	#project5hide:hover {
		opacity: 1;
		z-index: 4;
	}
}


/*Project 6*/

#video-home6{
	position: absolute;
  	width: 25%;
	margin-left: 15%;
	margin-top: 100%;
	z-index: 3;
	opacity: 1;
}

@media only screen and (max-width: 600px) {
	#video-home6 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}

@media only screen and (min-width: 680px) {
	#video-home6 {
		position: absolute;
		width: 25%;
		margin-left: 72%;
		margin-top: 125%;
		z-index: 3;
		opacity: 1;
	}
}

@media only screen and (min-width: 950px) {
	#video-home6 {
		position: absolute;
		width: 25%;
		margin-left: 70%;
		margin-top: 120%;
		z-index: 3;
		opacity: 1;
	}
}

#project6{
  	position: absolute;
  	width: 25%;
	margin-left: 15%;
	margin-top: 100%;
	z-index: 3;
	opacity: .75;
}

@media only screen and (min-width: 320px) {
	#project6 {
		position: relative;
		width: 80%;
		margin-top: 10%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 400px) {
	#project6 {
		position: relative;
		width: 80%;
		margin-top: 10%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 680px) {
	#project6 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}

#project6hide{
  	position: absolute;
  	width: 25%;
	margin-left: 15%;
	margin-top: 100%;
	z-index: 3;
	opacity: 0;
	-o-transition: opacity 0.2s ease-in;
	-ms-transition: opacity 0.2s ease-in;
	-moz-transition: opacity 0.2s ease-in;
	-webkit-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
}

@media only screen and (max-width: 679px) {
	#project6hide {
		opacity: 0;
		z-index: 3;
	}
}

@media only screen and (min-width: 680px) {
	#project6hide {
		position: absolute;
		width: 25%;
		margin-left: 72%;
		margin-top: 125%;
		z-index: 3;
		opacity: 0;
	}
}

@media only screen and (min-width: 950px) {
	#project6hide {
		position: absolute;
		width: 25%;
		margin-left: 70%;
		margin-top: 120%;
		z-index: 3;
		opacity: 0;
	}
}


#project6hide:hover{
	opacity: 1;
	z-index: 4;
}

@media only screen and (min-width: 320px) {
	#project6hide:hover {
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 400px) {
	#project6hide:hover {
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 680px) {
	#project6hide:hover {
		opacity: 1;
		z-index: 4;
	}
}

@media only screen and (min-width: 950px) {
	#project6hide:hover {
		opacity: 1;
		z-index: 4;
	}
}

/*Project 7*/

#video-home7{
	position: absolute;
  	width: 25%;
	margin-left: 15%;
	margin-top: 100%;
	z-index: 3;
	opacity: 1;
}

@media only screen and (max-width: 600px) {
	#video-home7 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}

@media only screen and (min-width: 680px) {
	#video-home7 {
		position: absolute;
		width: 25%;
		margin-left: 11%;
		margin-top: 140%;
		z-index: 3;
		opacity: 1;
	}
}

@media only screen and (min-width: 950px) {
	#video-home7 {
		position: absolute;
		width: 25%;
		margin-left: 10.5%;
		margin-top: 135%;
		z-index: 3;
		opacity: 1;
	}
}

#project7{
  	position: absolute;
  	width: 25%;
	margin-left: 15%;
	margin-top: 100%;
	z-index: 3;
	opacity: .75;
}

@media only screen and (min-width: 320px) {
	#project7 {
		position: relative;
		width: 80%;
		margin-top: 10%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 400px) {
	#project7 {
		position: relative;
		width: 80%;
		margin-top: 10%;
		margin-left: 10%;
		vertical-align: center;
		z-index: 4;
		opacity: 0.75;
	}
}

@media only screen and (min-width: 680px) {
	#project7 {
		visibility: hidden;
	    clear: both;
	    display: none;
	}
}

#project7hide{
  	position: absolute;
  	width: 25%;
	margin-left: 15%;
	margin-top: 100%;
	z-index: 3;
	opacity: 0;
	-o-transition: opacity 0.2s ease-in;
	-ms-transition: opacity 0.2s ease-in;
	-moz-transition: opacity 0.2s ease-in;
	-webkit-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
}

@media only screen and (max-width: 679px) {
	#project7hide {
		opacity: 0;
		z-index: 3;
	}
}

@media only screen and (min-width: 680px) {
	#project7hide {
		position: absolute;
		width: 25%;
		margin-left: 11%;
		margin-top: 140%;
		z-index: 3;
		opacity: 0;
	}
}

@media only screen and (min-width: 950px) {
	#project7hide {
		position: absolute;
		width: 25%;
		margin-left: 10.5%;
		margin-top: 135%;
		z-index: 3;
		opacity: 0;
	}
}


#project7hide:hover{
	opacity: 1;
	z-index: 4;
}

@media only screen and (min-width: 320px) {
	#project7hide:hover {
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 400px) {
	#project7hide:hover {
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 680px) {
	#project7hide:hover {
		opacity: 1;
		z-index: 4;
	}
}

@media only screen and (min-width: 950px) {
	#project7hide:hover {
		opacity: 1;
		z-index: 4;
	}
}


/* Numbers */

.background-text-sm{
	position: absolute;
	font-size: 7em;
	font-family: 'Cormorant Garamond:300', serif;
	color: #f2f2f2;
	text-transform: uppercase;
	opacity: 1;
    z-index: 3;
}

@media only screen and (min-width: 320px) {
	.background-text-sm {
		opacity: 0;
	}
}

@media only screen and (min-width: 400px) {
	.background-text-sm {
		opacity: 0;
	}
}

@media only screen and (min-width: 680px) {
	.background-text-sm {
		position: fixed;
		font-size: 4em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
		opacity: 1;
	    z-index: 3;
	}
}

@media only screen and (min-width: 950px) {
	.background-text-sm {
		position: fixed;
		font-size: 6em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
		opacity: 1;
	    z-index: 3;
	}
}

@media only screen and (min-width: 1200px) {
	.background-text-sm {
		position: fixed;
		font-size: 7.5em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
		opacity: 1;
	    z-index: 3;
	}
}

@media only screen and (min-width: 1400px) {
	.background-text-sm {
		position: fixed;
		font-size: 8em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
		opacity: 1;
	    z-index: 3;
	}
}

@media only screen and (min-width: 1900px) {
	.background-text-sm {
		position: fixed;
		font-size: 10em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
		opacity: 1;
	    z-index: 3;
	}
}

@media only screen and (min-width: 2500px) {
	.background-text-sm {
		position: fixed;
		font-size: 12em;
		font-family: 'Cormorant Garamond:300', serif;
		color: #f2f2f2;
		text-transform: uppercase;
		opacity: 1;
	    z-index: 3;
	}
}

#one{
	position: absolute;
	width: 30%;
	margin-left: 30%;
	margin-top: 17%;
	opacity: 1;
	z-index: 6;
}

@media only screen and (min-width: 320px) {
	#one {
		opacity: 0;
	}
}

@media only screen and (min-width: 400px) {
	#one {
		opacity: 0;
	}
}

@media only screen and (min-width: 680px) {
	#one {
		position: absolute;
		width: 30%;
		margin-left: 38.5%;
		margin-top: 22%;
		opacity: 1;
		z-index: 6;
	}
}

@media only screen and (min-width: 950px) {
	#one {
		position: absolute;
		width: 30%;
		margin-left: 35%;
		margin-top: 20%;
		opacity: 1;
		z-index: 6;
	}
}

@media only screen and (min-width: 1200px) {
	#one {
		position: absolute;
		width: 30%;
		margin-left: 35%;
		margin-top: 17%;
		opacity: 1;
		z-index: 6;
	}
}

@media only screen and (min-width: 1400px) {
	#one {
		position: absolute;
		width: 30%;
		margin-left: 35%;
		margin-top: 17%;
		opacity: 1;
		z-index: 6;
	}
}

@media only screen and (min-width: 1900px) {
	#one {
		position: absolute;
		width: 30%;
		margin-left: 35.5%;
		margin-top: 17%;
		opacity: 1;
		z-index: 6;
	}
}

#two{
	position: absolute;
	width: 30%;
	margin-left: 45%;
	margin-top: 45%;
	opacity: 1;
	z-index: 6;
}

@media only screen and (min-width: 320px) {
	#two {
		opacity: 0;
	}
}

@media only screen and (min-width: 400px) {
	#two {
		opacity: 0;
	}
}

@media only screen and (min-width: 680px) {
	#two {
		position: absolute;
		width: 30%;
		margin-left: 54%;
		margin-top: 42%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 950px) {
	#two {
		position: absolute;
		width: 30%;
		margin-left: 53%;
		margin-top: 40%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1200px) {
	#two {
		position: absolute;
		width: 30%;
		margin-left: 53%;
		margin-top: 37%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1400px) {
	#two {
		position: absolute;
		width: 30%;
		margin-left: 53%;
		margin-top: 37%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1900px) {
	#two {
		position: absolute;
		width: 30%;
		margin-left: 53.5%;
		margin-top: 37%;
		opacity: 1;
		z-index: 3;
	}
}

#three{
	position: absolute;
	width: 30%;
	margin-left: 38%;
	margin-top: 67%;
	opacity: 1;
	/*z-index: 3;*/
}

@media only screen and (min-width: 320px) {
	#three {
		opacity: 0;
	}
}

@media only screen and (min-width: 400px) {
	#three {
		opacity: 0;
	}
}

@media only screen and (min-width: 680px) {
	#three {
		position: absolute;
		width: 30%;
		margin-left: 32%;
		margin-top: 60%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 950px) {
	#three {
		position: absolute;
		width: 30%;
		margin-left: 32%;
		margin-top: 62%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1200px) {
	#three {
		position: absolute;
		width: 30%;
		margin-left: 32%;
		margin-top: 62%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1400px) {
	#three {
		position: absolute;
		width: 30%;
		margin-left: 32%;
		margin-top: 62%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1900px) {
	#three {
		position: absolute;
		width: 30%;
		margin-left: 32%;
		margin-top: 62%;
		opacity: 1;
		z-index: 3;
	}
}

#four{
	position: absolute;
	width: 30%;
	margin-left: 69%;
	margin-top: 88%;
	opacity: 1;
	z-index: 3;
}

@media only screen and (min-width: 320px) {
	#four {
		opacity: 0;
	}
}

@media only screen and (min-width: 400px) {
	#four {
		opacity: 0;
	}
}

@media only screen and (min-width: 680px) {
	#four {
		position: absolute;
		width: 30%;
		margin-left: 60%;
		margin-top: 83%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 950px) {
	#four {
		position: absolute;
		width: 30%;
		margin-left: 58%;
		margin-top: 83%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1200px) {
	#four {
		position: absolute;
		width: 30%;
		margin-left: 58%;
		margin-top: 83%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1400px) {
	#four {
		position: absolute;
		width: 30%;
		margin-left: 58%;
		margin-top: 83%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1900px) {
	#four {
		position: absolute;
		width: 30%;
		margin-left: 58.5%;
		margin-top: 83%;
		opacity: 1;
		z-index: 3;
	}
}

#five{
	position: absolute;
	width: 30%;
	margin-left: 57%;
	margin-top: 132%;
	opacity: 1;
	z-index: 3;
}

@media only screen and (min-width: 320px) {
	#five {
		opacity: 0;
	}
}

@media only screen and (min-width: 400px) {
	#five {
		opacity: 0;
	}
}

@media only screen and (min-width: 680px) {
	#five {
		position: absolute;
		width: 30%;
		margin-left: 49%;
		margin-top: 113%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 950px) {
	#five {
		position: absolute;
		width: 30%;
		margin-left: 47%;
		margin-top: 110%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1200px) {
	#five {
		position: absolute;
		width: 30%;
		margin-left: 47%;
		margin-top: 110%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1400px) {
	#five {
		position: absolute;
		width: 30%;
		margin-left: 47%;
		margin-top: 110%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1900px) {
	#five {
		position: absolute;
		width: 30%;
		margin-left: 47%;
		margin-top: 110%;
		opacity: 1;
		z-index: 3;
	}
}


#six{
	position: absolute;
	width: 30%;
	margin-left: 57%;
	margin-top: 132%;
	opacity: 1;
	z-index: 3;
}

@media only screen and (min-width: 320px) {
	#six {
		opacity: 0;
	}
}

@media only screen and (min-width: 400px) {
	#six {
		opacity: 0;
	}
}

@media only screen and (min-width: 680px) {
	#six {
		position: absolute;
		width: 30%;
		margin-left: 65%;
		margin-top: 133%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 950px) {
	#six {
		position: absolute;
		width: 30%;
		margin-left: 63%;
		margin-top: 130%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1200px) {
	#six {
		position: absolute;
		width: 30%;
		margin-left: 63%;
		margin-top: 130%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1400px) {
	#six {
		position: absolute;
		width: 30%;
		margin-left: 63%;
		margin-top: 130%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1900px) {
	#six {
		position: absolute;
		width: 30%;
		margin-left: 63%;
		margin-top: 130%;
		opacity: 1;
		z-index: 3;
	}
}


#seven{
	position: absolute;
	width: 30%;
	margin-left: 57%;
	margin-top: 132%;
	opacity: 1;
	z-index: 3;
}

@media only screen and (min-width: 320px) {
	#seven {
		opacity: 0;
	}
}

@media only screen and (min-width: 400px) {
	#seven {
		opacity: 0;
	}
}

@media only screen and (min-width: 680px) {
	#seven {
		position: absolute;
		width: 30%;
		margin-left: 38%;
		margin-top: 148%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 950px) {
	#seven {
		position: absolute;
		width: 30%;
		margin-left: 38%;
		margin-top: 145%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1200px) {
	#seven {
		position: absolute;
		width: 30%;
		margin-left: 38%;
		margin-top: 145%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1400px) {
	#seven {
		position: absolute;
		width: 30%;
		margin-left: 38%;
		margin-top: 145%;
		opacity: 1;
		z-index: 3;
	}
}

@media only screen and (min-width: 1900px) {
	#seven {
		position: absolute;
		width: 30%;
		margin-left: 38%;
		margin-top: 145%;
		opacity: 1;
		z-index: 3;
	}
}

/*======================================
=            Project Titles            =
======================================*/

.title-text2{
	font-size: 1.5em;
	/*width: 20%;*/
	font-family: 'Roboto:100', sans-serif;
	color: #ffd578;
	text-transform: uppercase;
	letter-spacing: 0.3em;
}

@media only screen and (min-width: 320px) {
	.title-text2 {
		font-size: 1.2em;
		/*width: 50%;*/
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.2em;
	}
}

@media only screen and (min-width: 400px) {
	.title-text2 {
		font-size: 1.3em;
		/*width: 50%;*/
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.25em;
	}
}

@media only screen and (min-width: 680px) {
	.title-text2 {
		font-size: 1.1em;
		/*width: 50%;*/
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.2em;
	}
}

@media only screen and (min-width: 950px) {
	.title-text2 {
		font-size: 1.3em;
		/*width: 20%;*/
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.25em;
	}
}

@media only screen and (min-width: 1200px) {
	.title-text2 {
		font-size: 1.4em;
		/*width: 20%;*/
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
	}
}

@media only screen and (min-width: 1400px) {
	.title-text2 {
		font-size: 1.5em;
		/*width: 20%;*/
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
	}
}

@media only screen and (min-width: 1900px) {
	.title-text2 {
		font-size: 1.8em;
		/*width: 20%;*/
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
	}
}

@media only screen and (min-width: 2500px) {
	.title-text2 {
		font-size: 2.5em;
		/*width: 20%;*/
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
		text-transform: uppercase;
		letter-spacing: 0.3em;
	}
}


#projectone{
	position: absolute;
	width: 30%;
	margin-left: 25%;
	margin-top: 25%;
	z-index: 3;
}

@media only screen and (min-width: 320px) {
	#projectone {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -50%;
		z-index: 6;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);		
	}
}

@media only screen and (min-width: 400px) {
	#projectone {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -50%;
		z-index: 6;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);		
	}
}

@media only screen and (min-width: 680px) {
	#projectone {
		position: absolute;
		width: 50%;
		margin-left: 30.5%;
		margin-top: 30.5%;
		z-index: 2;
	}
}

@media only screen and (min-width: 950px) {
	#projectone {
		position: absolute;
		width: 50%;
		margin-left: 26%;
		margin-top: 30%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1200px) {
	#projectone {
		position: absolute;
		width: 50%;
		margin-left: 21%;
		margin-top: 26.5%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1400px) {
	#projectone {
		position: absolute;
		width: 50%;
		margin-left: 24%;
		margin-top: 26%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1600px) {
	#projectone {
		position: absolute;
		width: 50%;
		margin-left: 22.5%;
		margin-top: 26%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1900px) {
	#projectone {
		position: absolute;
		width: 50%;
		margin-left: 23.5%;
		margin-top: 26%;
		z-index: 2;
	}
}

@media only screen and (min-width: 2500px) {
	#projectone {
		position: absolute;
		width: 50%;
		margin-left: 23.5%;
		margin-top: 25%;
		z-index: 2;
	}
}

#projecttwo{
	position: absolute;
	width: 30%;
	margin-left: 35%;
	margin-top: 53%;
	z-index: 3;
}

@media only screen and (min-width: 320px) {
	#projecttwo {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -45%;
		z-index: 6;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);		
	}
}

@media only screen and (min-width: 400px) {
	#projecttwo {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -45%;
		z-index: 6;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 680px) {
	#projecttwo {
		position: absolute;
		width: 30%;
		margin-left: 36.5%;
		margin-top: 50.5%;
		z-index: 2;
	}
}

@media only screen and (min-width: 950px) {
	#projecttwo {
		position: absolute;
		width: 30%;
		margin-left: 36%;
		margin-top: 50%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1200px) {
	#projecttwo {
		position: absolute;
		width: 30%;
		margin-left: 37%;
		margin-top: 46.5%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1400px) {
	#projecttwo {
		position: absolute;
		width: 30%;
		margin-left: 37%;
		margin-top: 46%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1900px) {
	#projecttwo {
		position: absolute;
		width: 30%;
		margin-left: 37.5%;
		margin-top: 46%;
		z-index: 2;
	}
}

@media only screen and (min-width: 2500px) {
	#projecttwo {
		position: absolute;
		width: 30%;
		margin-left: 37.5%;
		margin-top: 45%;
		z-index: 2;
	}
}

#projectthree{
	position: absolute;
	width: 30%;
	margin-left: 32%;
	margin-top: 75%;
	z-index: 3;
}

@media only screen and (min-width: 320px) {
	#projectthree {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -44%;
		z-index: 6;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 400px) {
	#projectthree {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -44%;
		z-index: 6;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 680px) {
	#projectthree {
		position: absolute;
		width: 30%;
		margin-left: 24%;
		margin-top: 69%;
		z-index: 2;
	}
}

@media only screen and (min-width: 950px) {
	#projectthree {
		position: absolute;
		width: 30%;
		margin-left: 23%;
		margin-top: 72%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1200px) {
	#projectthree {
		position: absolute;
		width: 30%;
		margin-left: 22.5%;
		margin-top: 71.5%;
		z-index: 2;
	}
}


@media only screen and (min-width: 1400px) {
	#projectthree {
		position: absolute;
		width: 30%;
		margin-left: 22%;
		margin-top: 71%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1900px) {
	#projectthree {
		position: absolute;
		width: 30%;
		margin-left: 22%;
		margin-top: 71%;
		z-index: 2;
	}
}

@media only screen and (min-width: 2500px) {
	#projectthree {
		position: absolute;
		width: 30%;
		margin-left: 22%;
		margin-top: 70%;
		z-index: 2;
	}
}

#projectfour{
	position: absolute;
	width: 30%;
	margin-left: 60%;
	margin-top: 96%;
	z-index: 3;
}

@media only screen and (min-width: 320px) {
	#projectfour {
		position: absolute;
		width: 70%;
		text-align: center;
		margin-left: 15%;
		margin-top: -44%;
		z-index: 6;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 400px) {
	#projectfour {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -44%;
		z-index: 6;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 680px) {
	#projectfour {
		position: absolute;
		width: 30%;
		margin-left: 40%;
		margin-top: 91.5%;
		z-index: 2;
	}
}

@media only screen and (min-width: 950px) {
	#projectfour {
		position: absolute;
		width: 30%;
		margin-left: 40%;
		margin-top: 93%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1200px) {
	#projectfour {
		position: absolute;
		width: 30%;
		margin-left: 40%;
		margin-top: 92.5%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1400px) {
	#projectfour {
		position: absolute;
		width: 30%;
		margin-left: 40%;
		margin-top: 92%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1600px) {
	#projectfour {
		position: absolute;
		width: 30%;
		margin-left: 40%;
		margin-top: 92%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1900px) {
	#projectfour {
		position: absolute;
		width: 30%;
		margin-left: 41%;
		margin-top: 92%;
		z-index: 2;
	}
}

@media only screen and (min-width: 2500px) {
	#projectfour {
		position: absolute;
		width: 30%;
		margin-left: 41%;
		margin-top: 91%;
		z-index: 2;
	}
}

#projectfive{
	position: absolute;
	width: 30%;
	margin-left: 55%;
	margin-top: 140%;
	z-index: 3;
	text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

@media only screen and (min-width: 320px) {
	#projectfive {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -44%;
		z-index: 6;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 400px) {
	#projectfive {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -44%;
		z-index: 6;
	}
}

@media only screen and (min-width: 680px) {
	#projectfive {
		position: absolute;
		width: 30%;
		margin-left: 45%;
		margin-top: 122%;
		z-index: 2;
	}
}

@media only screen and (min-width: 950px) {
	#projectfive {
		position: absolute;
		width: 30%;
		margin-left: 42.5%;
		margin-top: 120%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1200px) {
	#projectfive {
		position: absolute;
		width: 30%;
		margin-left: 40.5%;
		margin-top: 119.5%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1400px) {
	#projectfive {
		position: absolute;
		width: 30%;
		margin-left: 41%;
		margin-top: 119%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1600px) {
	#projectfive {
		position: absolute;
		width: 30%;
		margin-left: 39.5%;
		margin-top: 119%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1900px) {
	#projectfive {
		position: absolute;
		width: 30%;
		margin-left: 40.5%;
		margin-top: 119%;
		z-index: 2;
	}
}

@media only screen and (min-width: 2500px) {
	#projectfive {
		position: absolute;
		width: 30%;
		margin-left: 40.5%;
		margin-top: 118%;
		z-index: 2;
	}
}


#projectsix{
	position: absolute;
	width: 30%;
	margin-left: 55%;
	margin-top: 140%;
	z-index: 3;
	text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

@media only screen and (min-width: 320px) {
	#projectsix {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -44%;
		z-index: 6;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 400px) {
	#projectsix {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -44%;
		z-index: 6;
	}
}

@media only screen and (min-width: 680px) {
	#projectsix {
		position: absolute;
		width: 30%;
		margin-left: 50%;
		margin-top: 142%;
		z-index: 2;
	}
}

@media only screen and (min-width: 950px) {
	#projectsix {
		position: absolute;
		width: 30%;
		margin-left: 49.5%;
		margin-top: 140%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1200px) {
	#projectsix {
		position: absolute;
		width: 30%;
		margin-left: 48.5%;
		margin-top: 139.5%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1400px) {
	#projectsix {
		position: absolute;
		width: 30%;
		margin-left: 49%;
		margin-top: 139%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1600px) {
	#projectsix {
		position: absolute;
		width: 30%;
		margin-left: 47.5%;
		margin-top: 139%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1900px) {
	#projectsix {
		position: absolute;
		width: 30%;
		margin-left: 47.5%;
		margin-top: 139%;
		z-index: 2;
	}
}

@media only screen and (min-width: 2500px) {
	#projectsix {
		position: absolute;
		width: 30%;
		margin-left: 40.5%;
		margin-top: 138%;
		z-index: 2;
	}
}

#projectseven{
	position: absolute;
	width: 30%;
	margin-left: 55%;
	margin-top: 140%;
	z-index: 3;
	text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

@media only screen and (min-width: 320px) {
	#projectseven {
		position: absolute;
		width: 70%;
		text-align: center;
		margin-left: 15%;
		margin-top: -44%;
		z-index: 6;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 400px) {
	#projectseven {
		position: absolute;
		width: 70%;
		text-align: center;
		margin-left: 15%;
		margin-top: -44%;
		z-index: 6;
	}
}

@media only screen and (min-width: 680px) {
	#projectseven {
		position: absolute;
		width: 30%;
		margin-left: 34.5%;
		margin-top: 157%;
		z-index: 2;
	}
}

@media only screen and (min-width: 950px) {
	#projectseven {
		position: absolute;
		width: 30%;
		margin-left: 33.5%;
		margin-top: 155.5%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1200px) {
	#projectseven {
		position: absolute;
		width: 30%;
		margin-left: 33%;
		margin-top: 155%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1400px) {
	#projectseven {
		position: absolute;
		width: 30%;
		margin-left: 32.25%;
		margin-top: 154.5%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1600px) {
	#projectseven {
		position: absolute;
		width: 30%;
		margin-left: 32%;
		margin-top: 154%;
		z-index: 2;
	}
}

@media only screen and (min-width: 1900px) {
	#projectseven {
		position: absolute;
		width: 30%;
		margin-left: 32%;
		margin-top: 154%;
		z-index: 2;
	}
}

@media only screen and (min-width: 2500px) {
	#projectseven {
		position: absolute;
		width: 30%;
		margin-left: 31.75%;
		margin-top: 154%;
		z-index: 2;
	}
}

/*======================================
=         Project Descriptions         =
======================================*/

.title-text3{
	font-family: 'Roboto:500', sans-serif;
	color: black;
	text-transform: uppercase;
	font-size: 0.5rem;
	letter-spacing: 0.2rem;
	z-index: 6;
}

@media only screen and (min-width: 320px) {
	.title-text3 {
		font-family: 'Roboto:500', sans-serif;
		color: white;
		text-transform: uppercase;
		font-size: 0.5rem;
		letter-spacing: 0.2rem;
		z-index: 6;
	}
}

@media only screen and (min-width: 400px) {
	.title-text3 {
		font-family: 'Roboto:500', sans-serif;
		color: white;
		text-transform: uppercase;
		font-size: 0.75rem;
		letter-spacing: 0.2rem;
		z-index: 6;
	}
}

@media only screen and (min-width: 680px) {
	.title-text3 {
		font-family: 'Roboto:500', sans-serif;
		color: black;
		text-transform: uppercase;
		font-size: 0.5rem;
		letter-spacing: 0.2rem;
		z-index: 6;
	}
}

@media only screen and (min-width: 950px) {
	.title-text3 {
		font-family: 'Roboto:500', sans-serif;
		color: black;
		text-transform: uppercase;
		font-size: 0.75em;
		letter-spacing: 0.2em;
		z-index: 6;
	}
}

@media only screen and (min-width: 1400px) {
	.title-text3 {
		font-family: 'Roboto:500', sans-serif;
		color: black;
		text-transform: uppercase;
		font-size: 0.8em;
		letter-spacing: 0.2em;
		z-index: 6;
	}
}

@media only screen and (min-width: 1900px) {
	.title-text3 {
		font-family: 'Roboto:500', sans-serif;
		color: black;
		text-transform: uppercase;
		font-size: 1.1em;
		letter-spacing: 0.2em;
		z-index: 6;
	}
}

@media only screen and (min-width: 2500px) {
	.title-text3 {
		font-family: 'Roboto:500', sans-serif;
		color: black;
		text-transform: uppercase;
		font-size: 1.5em;
		letter-spacing: 0.2em;
		z-index: 6;
	}
}

#project_1{
	position: absolute;
	text-align: center;
	display: block;
	margin-top :25%;
	margin-left: -17%;
	opacity: 1;
}

@media only screen and (min-width: 320px) {
	#project_1 {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -34%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 400px) {
	#project_1 {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -35%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 680px) {
	#project_1 {
		position: absolute;
		text-align: center;
		display: block;
		margin-top: 34%;
		margin-left: 23.5%;
		opacity: 1;
		z-index: 2;
	}
}

@media only screen and (min-width: 950px) {
	#project_1 {
		position: absolute;
		text-align: center;
		display: block;
		margin-top: 34%;
		margin-left: 18.5%;
		opacity: 1;
		z-index: 2;
	}
}

@media only screen and (min-width: 1200px) {
	#project_1 {
		position: absolute;
		text-align: center;
		display: block;
		margin-top: 29%;
		margin-left: 16%;
		opacity: 1;
		z-index: 2;
	}
}

@media only screen and (min-width: 1400px) {
	#project_1 {
		position: absolute;
		text-align: center;
		display: block;
		margin-top: 29%;
		margin-left: 17%;
		opacity: 1;
		z-index: 2;
	}
}

@media only screen and (min-width: 1600px) {
	#project_1 {
		position: absolute;
		text-align: center;
		display: block;
		margin-top: 29%;
		margin-left: 16%;
		opacity: 1;
		z-index: 2;
	}
}

@media only screen and (min-width: 1900px) {
	#project_1 {
		position: absolute;
		text-align: center;
		display: block;
		margin-top: 29%;
		margin-left: 17.5%;
		opacity: 1;
		z-index: 2;
	}
}

@media only screen and (min-width: 2500px) {
	#project_1 {
		position: absolute;
		text-align: center;
		display: block;
		margin-top: 28%;
		margin-left: 17.5%;
		opacity: 1;
		z-index: 2;
	}
}

#project_2{
	position: absolute;
	text-align: center;
	display: block;
	margin-top: 25%;
	margin-left: -17%;
	opacity: 1;
}

@media only screen and (min-width: 320px) {
	#project_2 {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -34%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 400px) {
	#project_2 {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -35%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 680px) {
	#project_2 {
		position: absolute;
		width: 30%;
		margin-left: 33.5%;
		margin-top: 54%;
		opacity: 1;
		z-index: 2;
	}
}

@media only screen and (min-width: 950px) {
	#project_2 {
		position: absolute;
		width: 30%;
		margin-left: 34%;
		margin-top: 54%;
		opacity: 1;
		z-index: 2;
	}
}

@media only screen and (min-width: 1200px) {
	#project_2 {
		position: absolute;
		width: 30%;
		margin-left: 36%;
		margin-top: 49%;
		opacity: 1;
		z-index: 2;
	}
}

@media only screen and (min-width: 1400px) {
	#project_2 {
		position: absolute;
		width: 30%;
		margin-left: 36%;
		margin-top: 49%;
		opacity: 1;
		z-index: 2;
	}
}

@media only screen and (min-width: 2500px) {
	#project_2 {
		position: absolute;
		width: 30%;
		margin-left: 36%;
		margin-top: 48%;
		opacity: 1;
		z-index: 2;
	}
}


#project_3{
	position: absolute;
	text-align: center;
	display: block;
	margin-top: 25%;
	margin-left: -17%;
	opacity: 1;
}

@media only screen and (min-width: 320px) {
	#project_3 {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -34%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 400px) {
	#project_3 {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -35%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 680px) {
	#project_3 {
		position: absolute;
		width: 30%;
		margin-left: 23%;
		margin-top: 72.5%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 950px) {
	#project_3 {
		position: absolute;
		width: 30%;
		margin-left: 21.5%;
		margin-top: 76%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 1200px) {
	#project_3 {
		position: absolute;
		width: 30%;
		margin-left: 20.5%;
		margin-top: 74%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 1400px) {
	#project_3 {
		position: absolute;
		width: 30%;
		margin-left: 20.5%;
		margin-top: 74%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 2500px) {
	#project_3 {
		position: absolute;
		width: 30%;
		margin-left: 20.5%;
		margin-top: 73%;
		z-index: 2;
		opacity: 1;
	}
}

#project_4{
	position: absolute;
	text-align: center;
	display: block;
	margin-top: 25%;
	margin-left: -17%;
	opacity: 1;
}

@media only screen and (min-width: 320px) {
	#project_4 {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -34%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 400px) {
	#project_4 {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -35%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 680px) {
	#project_4 {
		position: absolute;
		text-align: center;
		display: block;
		margin-left: 31%;
		margin-top: 95%;
		opacity: 1;
		z-index: 2;	
	}
}

@media only screen and (min-width: 950px) {
	#project_4 {
		position: absolute;
		text-align: center;
		display: block;
		margin-left: 32%;
		margin-top: 97%;
		opacity: 1;
		z-index: 2;	
	}
}

@media only screen and (min-width: 1200px) {
	#project_4 {
		position: absolute;
		text-align: center;
		display: block;
		margin-left: 33%;
		margin-top: 95%;
		opacity: 1;
		z-index: 2;	
	}
}

@media only screen and (min-width: 1400px) {
	#project_4 {
		position: absolute;
		text-align: center;
		display: block;
		margin-left: 32%;
		margin-top: 95%;
		opacity: 1;
		z-index: 2;	
	}
}

@media only screen and (min-width: 1600px) {
	#project_4 {
		position: absolute;
		text-align: center;
		display: block;
		margin-left: 33.5%;
		margin-top: 95%;
		opacity: 1;
		z-index: 2;	
	}
}

@media only screen and (min-width: 1900px) {
	#project_4 {
		position: absolute;
		text-align: center;
		display: block;
		margin-left: 32.5%;
		margin-top: 95%;
		opacity: 1;
		z-index: 2;	
	}
}

@media only screen and (min-width: 2500px) {
	#project_4 {
		position: absolute;
		text-align: center;
		display: block;
		margin-left: 33%;
		margin-top: 94%;
		opacity: 1;
		z-index: 2;	
	}
}

#project_5{
	position: absolute;
	text-align: center;
	display: block;
	margin-top: 25%;
	margin-left: -17%;
	opacity: 1;
}

@media only screen and (min-width: 320px) {
	#project_5 {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -34%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 400px) {
	#project_5 {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -35%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 680px) {
	#project_5 {
		position: absolute;
		width: 30%;
		margin-left: 41%;
		margin-top: 125.5%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 950px) {
	#project_5 {
		position: absolute;
		width: 30%;
		margin-left: 38%;
		margin-top: 124%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 1200px) {
	#project_5 {
		position: absolute;
		width: 30%;
		margin-left: 36%;
		margin-top: 122%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 1400px) {
	#project_5 {
		position: absolute;
		width: 30%;
		margin-left: 37%;
		margin-top: 122%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 1600px) {
	#project_5 {
		position: absolute;
		width: 30%;
		margin-left: 36%;
		margin-top: 122%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 2500px) {
	#project_5 {
		position: absolute;
		width: 30%;
		margin-left: 37%;
		margin-top: 121%;
		z-index: 2;
		opacity: 1;
	}
}


#project_6{
	position: absolute;
	text-align: center;
	display: block;
	margin-top: 25%;
	margin-left: -17%;
	opacity: 1;
}

@media only screen and (min-width: 320px) {
	#project_6 {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -34%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 400px) {
	#project_6 {
		position: absolute;
		width: 50%;
		text-align: center;
		margin-left: 25%;
		margin-top: -35%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 680px) {
	#project_6 {
		position: absolute;
		width: 30%;
		margin-left: 44%;
		margin-top: 145.5%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 950px) {
	#project_6 {
		position: absolute;
		width: 30%;
		margin-left: 44.5%;
		margin-top: 144%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 1200px) {
	#project_6 {
		position: absolute;
		width: 30%;
		margin-left: 45%;
		margin-top: 142.5%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 1400px) {
	#project_6 {
		position: absolute;
		width: 30%;
		margin-left: 46%;
		margin-top: 142%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 1600px) {
	#project_6 {
		position: absolute;
		width: 30%;
		margin-left: 46%;
		margin-top: 142%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 2500px) {
	#project_6 {
		position: absolute;
		width: 30%;
		margin-left: 47%;
		margin-top: 141%;
		z-index: 2;
		opacity: 1;
	}
}

#project_7{
	position: absolute;
	text-align: center;
	display: block;
	margin-top: 25%;
	margin-left: -17%;
	opacity: 1;
}

@media only screen and (min-width: 320px) {
	#project_7 {
		position: absolute;
		width: 70%;
		text-align: center;
		margin-left: 15%;
		margin-top: -34%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 400px) {
	#project_7 {
		position: absolute;
		width: 70%;
		text-align: center;
		margin-left: 15%;
		margin-top: -35%;
		z-index: 6;
		opacity: 1;
		text-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	}
}

@media only screen and (min-width: 680px) {
	#project_7 {
		position: absolute;
		width: 40%;
		margin-left: 31%;
		margin-top: 160.5%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 950px) {
	#project_7 {
		position: absolute;
		width: 30%;
		margin-left: 33.5%;
		margin-top: 159.5%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 1200px) {
	#project_7 {
		position: absolute;
		width: 30%;
		margin-left: 32.5%;
		margin-top: 158%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 1400px) {
	#project_7 {
		position: absolute;
		width: 30%;
		margin-left: 31%;
		margin-top: 157%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 1600px) {
	#project_7 {
		position: absolute;
		width: 30%;
		margin-left: 31%;
		margin-top: 157%;
		z-index: 2;
		opacity: 1;
	}
}

@media only screen and (min-width: 2500px) {
	#project_7 {
		position: absolute;
		width: 30%;
		margin-left: 31.5%;
		margin-top: 157%;
		z-index: 2;
		opacity: 1;
	}
}

/*==============================
=            Footer            =
==============================*/
#site-content {
	min-height: 100%;
	min-height: 100vh;
	width: 100%;
	padding-top: 0px;
	position: relative;
	z-index: 2;

/*	-webkit-box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	-moz-box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);
	box-shadow: 0 -1px 10px rgba(0, 0, 0, .5);*/
  
}

#site-footer {
	padding: 0px 0;
	font-size: 85%;
	/*background-color: #2A2A2A;*/
	position: fixed;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
}

.footer{
	position: absolute;
	/*position: fixed;*/
	background: #999999;
	height: 20vh;
  	width: 100%;
  	z-index: 10;
}

.footer-title{
	position: absolute;
	left: 2%;
	bottom: 60%;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	font-size: 1.25em;
	font-family: 'Roboto:100', sans-serif;
	color: #ffd578;
}

@media only screen and (min-width: 320px) {
	.footer-title {
		position: absolute;
		left: 5%;
		bottom: 65%;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}

@media only screen and (min-width: 400px) {
	.footer-title {
		position: absolute;
		left: 5%;
		bottom: 60%;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1.2em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}

@media only screen and (min-width: 680px) {
	.footer-title {
		position: absolute;
		left: 4%;
		bottom: 64%;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1.25em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}

@media only screen and (min-width: 950px) {
	.footer-title {
		position: absolute;
		left: 3%;
		bottom: 60%;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1.25em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}

@media only screen and (min-width: 1400px) {
	.footer-title {
		position: absolute;
		left: 2%;
		bottom: 60%;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1.4em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}

@media only screen and (min-width: 1900px) {
	.footer-title {
		position: absolute;
		left: 2%;
		bottom: 60%;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1.75em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}

@media only screen and (min-width: 2500px) {
	.footer-title {
		position: absolute;
		left: 2%;
		bottom: 58%;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 2.75em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}

.contact-info{
	position: absolute;
	left: 4%;
	bottom: 44%;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	font-size: 1em;
	font-family: 'Roboto:100', sans-serif;
	color: white;
}

@media only screen and (min-width: 320px) {
	.contact-info {
		position: absolute;
		left: 5%;
		bottom: 45%;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 0.75em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}

@media only screen and (min-width: 400px) {
	.contact-info {
		position: absolute;
		left: 5%;
		bottom: 43%;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 0.8em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}

@media only screen and (min-width: 680px) {
	.contact-info {
		position: absolute;
		left: 4%;
		bottom: 48%;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}

@media only screen and (min-width: 950px) {
	.contact-info {
		position: absolute;
		left: 3%;
		bottom: 42%;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}

@media only screen and (min-width: 1200px) {
	.contact-info {
		position: absolute;
		left: 3%;
		bottom: 45%;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}

@media only screen and (min-width: 1400px) {
	.contact-info {
		position: absolute;
		left: 2%;
		bottom: 42%;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}

@media only screen and (min-width: 1600px) {
	.contact-info {
		position: absolute;
		left: 2%;
		bottom: 46%;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}

@media only screen and (min-width: 1900px) {
	.contact-info {
		position: absolute;
		left: 2%;
		bottom: 42%;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1.25em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}

@media only screen and (min-width: 2500px) {
	.contact-info {
		position: absolute;
		left: 2%;
		bottom: 37%;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 2em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}

a[href^="tel"] {
  color: inherit;
  text-decoration: none;
}

/*.contact-info i{
	color: #ffd578
}*/

/*.pin{
	position: absolute;
	height: 17px;
	width: 12px;
	bottom: 50%;
	left: 3.2%;
}

@media only screen and (min-width: 320px) {
	.pin {
		position: absolute;
		height: 13px;
		width: 9px;
		bottom: 60%;
		left: 9.5%;
	}
}

@media only screen and (min-width: 400px) {
	.pin {
		position: absolute;
		height: 13px;
		width: 9px;
		bottom: 59%;
		left: 10%;
	}
}

@media only screen and (min-width: 680px) {
	.pin {
		position: absolute;
		height: 16px;
		width: 11px;
		bottom: 54%;
		left: 4.5%;
	}
}

@media only screen and (min-width: 950px) {
	.pin {
		position: absolute;
		height: 17px;
		width: 12px;
		bottom: 55%;
		left: 3%;
	}
}

@media only screen and (min-width: 1400px) {
	.pin {
		position: absolute;
		height: 17px;
		width: 12px;
		bottom: 55%;
		left: 2.2%;
	}
}*/


/*.contact{
	position: absolute;
	left: 4.5%;
	bottom: 28%;
	font-size: 1em;
	font-family: 'Roboto:100', sans-serif;
	color: white;
}

@media only screen and (min-width: 320px) {
	.contact {
		position: absolute;
		left: 14%;
		bottom: 34%;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 0.75em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}

@media only screen and (min-width: 400px) {
	.contact {
		position: absolute;
		left: 13.5%;
		bottom: 36%;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 0.75em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}

@media only screen and (min-width: 680px) {
	.contact {
		position: absolute;
		left: 7%;
		bottom: 34%;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}

@media only screen and (min-width: 950px) {
	.contact {
		position: absolute;
		left: 4.75%;
		bottom: 30%;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}

@media only screen and (min-width: 1400px) {
	.contact {
		position: absolute;
		left: 3.5%;
		bottom: 29%;
		text-transform: uppercase;
		letter-spacing: 0.25em;
		font-size: 1em;
		font-family: 'Roboto:100', sans-serif;
		color: white;
	}
}*/


div.footer-quicklinks{
	position: absolute;
	text-align: center;
	font-size: 0.7em;
	font-family: 'Roboto:100', sans-serif;
	text-transform: uppercase;
	color: white;
	letter-spacing: 0.15em;
	display: block;
	left: 5%;
	bottom: 10%;
	z-index: 10;
}

@media screen and (max-width: 400px) {
  div.footer-quicklinks {
		position: absolute;
		text-align: center;
		font-size: 0.7em;
		font-family: 'Roboto:100', sans-serif;
		text-transform: uppercase;
		color: white;
		letter-spacing: 0.15em;
		display: block;
		left: 5%;
		bottom: 10%;
		z-index: 10;
  }
}

@media only screen and (min-width: 680px) {
	div.footer-quicklinks {
		position: absolute;
		text-align: center;
		font-size: 0.8em;
		font-family: 'Roboto:100', sans-serif;
		text-transform: uppercase;
		color: white;
		letter-spacing: 0.2em;
		display: block;
		left: 4%;
		bottom: 10%;
		z-index: 10;
	}
}

@media only screen and (min-width: 950px) {
	div.footer-quicklinks {
		position: absolute;
		text-align: center;
		font-size: 1em;
		font-family: 'Roboto:100', sans-serif;
		text-transform: uppercase;
		color: white;
		letter-spacing: 0.25em;
		display: block;
		left: 3%;
		bottom: 10%;
		z-index: 10;
	}
}

@media only screen and (min-width: 1400px) {
	div.footer-quicklinks {
		position: absolute;
		text-align: center;
		font-size: 1em;
		font-family: 'Roboto:100', sans-serif;
		text-transform: uppercase;
		color: white;
		letter-spacing: 0.25em;
		display: block;
		left: 2%;
		bottom: 10%;
		z-index: 10;
	}
}

@media only screen and (min-width: 1900px) {
	div.footer-quicklinks {
		position: absolute;
		text-align: center;
		font-size: 1.25em;
		font-family: 'Roboto:100', sans-serif;
		text-transform: uppercase;
		color: white;
		letter-spacing: 0.25em;
		display: block;
		left: 2%;
		bottom: 10%;
	}
}

@media only screen and (min-width: 2500px) {
	div.footer-quicklinks {
		position: absolute;
		text-align: center;
		font-size: 2.2em;
		font-family: 'Roboto:100', sans-serif;
		text-transform: uppercase;
		color: white;
		letter-spacing: 0.25em;
		display: block;
		left: 2%;
		bottom: 10%;
	}
}

a.quicklink-pdfportfolio{
	text-decoration: none;
	color: white;
}

a.quicklink-pdfportfolio:hover{
	color: #ffd578;
}

a.quicklink-pdfresume{
	text-decoration: none;
	color: white;
}

a.quicklink-pdfresume:hover{
	color: #ffd578;
}

div.bottom-icons{
	width: 30%;
	position: absolute;
	bottom: 55%;
	right: 1%;
	z-index: 10;
}

@media only screen and (min-width: 320px) {
	div.bottom-icons {
		width: 80%;
		position: absolute;
		bottom: 90%;
		right: 1%;
		z-index: 10;
	}
}

@media only screen and (min-width: 400px) {
	div.bottom-icons {
		width: 80%;
		position: absolute;
		bottom: 85%;
		right: 2%;
    z-index: 10;
	}
}

@media only screen and (min-width: 680px) {
	div.bottom-icons {
		width: 55%;
		position: absolute;
		bottom: 85%;
		right: 1.5%;
		z-index: 10;
	}
}

@media only screen and (min-width: 950px) {
	div.bottom-icons {
		width: 43%;
		position: absolute;
		bottom: 85%;
		right: 1%;
		z-index: 10;
	}
}

@media only screen and (min-width: 1400px) {
	div.bottom-icons {
		width: 30%;
		position: absolute;
		bottom: 85%;
		right: 1%;
		z-index: 10;
	}
}

@media only screen and (min-width: 2500px) {
	div.bottom-icons {
		width: 35%;
		position: absolute;
		bottom: 85%;
		right: 1%;
	}
}

.bottom-icons img{
	height: 50px;
	width: 50px;
	position: absolute;
	z-index: 10;
}

@media only screen and (min-width: 320px) {
	.bottom-icons img{
		height: 30px;
		width: 30px;
		position: absolute;
		z-index: 10;
	}
}

@media only screen and (min-width: 400px) {
	.bottom-icons img{
		height: 35px;
		width: 35px;
		position: absolute;
		z-index: 10;
	}
}

@media only screen and (min-width: 680px) {
	.bottom-icons img{
		height: 50px;
		width: 50px;
		position: absolute;
		z-index: 10;
	}
}

@media only screen and (min-width: 950px) {
	.bottom-icons img{
		height: 45px;
		width: 45px;
		position: absolute;
		z-index: 10;
	}
}

@media only screen and (min-width: 1400px) {
	.bottom-icons img{
		height: 50px;
		width: 50px;
		position: absolute;
		z-index: 10;
	}
}

@media only screen and (min-width: 1900px) {
	.bottom-icons img{
		height: 60px;
		width: 60px;
		position: absolute;
	}
}

@media only screen and (min-width: 2500px) {
	.bottom-icons img{
		height: 90px;
		width: 90px;
		position: absolute;
	}
}

#first{
	opacity: 1;
}

#first:hover{
	opacity: 0;
}

#hidden-icon{
	opacity: 0;
	-o-transition: opacity 0.2s ease-in;
	-ms-transition: opacity 0.2s ease-in;
	-moz-transition: opacity 0.2s ease-in;
	-webkit-transition: opacity 0.2s ease-in;
	transition: opacity 0.2s ease-in;
}

#hidden-icon:hover{
	opacity: 1;
}


.row:after {
    content: "";
    display: table;
    clear: both;
}

#insta{
	float: right;
  	width: 12%;  
  	padding: .6%;
  	z-index: 10;
 }

#linkedin{
	float: right;
  	width: 12%;  
  	padding: .6%;
  	z-index: 10;
}

#email{
	float: right;
  	width: 12%;  
  	padding: .6%; 
  	z-index: 10;
}

.copyright{
	position: absolute;
	right: 2%;
	bottom: 10%;
	font-size: 0.75em;
	font-family: 'Roboto:100', sans-serif;
	color: #ffd578;
}

@media only screen and (min-width: 320px) {
	.copyright {
		position: absolute;
		right: 4%;
		bottom: 10%;
		font-size: 0.5em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}

@media only screen and (min-width: 400px) {
	.copyright {
		position: absolute;
		right: 4%;
		bottom: 10%;
		font-size: 0.5em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}

@media only screen and (min-width: 680px) {
	.copyright {
		position: absolute;
		right: 2%;
		bottom: 10%;
		font-size: 0.75em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}

@media only screen and (min-width: 950px) {
	.copyright {
		position: absolute;
		right: 2%;
		bottom: 10%;
		font-size: 0.75em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}

@media only screen and (min-width: 1400px) {
	.copyright {
		position: absolute;
		right: 2%;
		bottom: 10%;
		font-size: 0.75em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}

@media only screen and (min-width: 1900px) {
	.copyright {
		position: absolute;
		right: 2%;
		bottom: 10%;
		font-size: 1em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}

@media only screen and (min-width: 2500px) {
	.copyright {
		position: absolute;
		right: 2%;
		bottom: 10%;
		font-size: 1.5em;
		font-family: 'Roboto:100', sans-serif;
		color: #ffd578;
	}
}