body{
	margin:0px;
	padding:0px;
	max-width:100vw;
	 overflow-x: hidden;

}



/*MEDIA QUERY*/
@media only screen and (max-width : 980px) {

body{
  /* trying to get over small iphone text problem font-size: 2.5em; */
}

header {
		position: fixed;
    top:0;
    /* testing here */height:200px;
	}


	nav li {
		text-align: left;
		width: 100%;
		padding: 0px 0;
		margin: 0;
	}


  .logo{
    height:/*150px*/ 50px;
  	width:/*450px*/ 150px;
  	float:left;
  	background-image:url(graphics/philly_imprint_color.svg);
  	background-repeat: no-repeat;
  }

  .logolink{
  	display:block;
  	height:150px;
  	width:450px;

  }


  .headline{
  	    color:#1f313f;
  	    font-family: 'Playfair Display', serif;
  	    font-size:3.5em;
  	    letter-spacing: .1em;
  			line-height: 1;

  }

  .headline_gradient{
  	font-size:3.5em;
  	font-family: 'Playfair Display', serif;
  	letter-spacing: .1em;
  	line-height: 1;
  	background: rgb(59,32,0);
  	background: linear-gradient(90deg, rgba(59,32,0,1) 0%, rgba(59,74,38,1) 100%);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
  }





.menu-content {
  color: #5F7A80;
  text-decoration: none;
  font-size:calc(1em + 3vh);
  font-weight:300;
  font-family: 'Lato';
  letter-spacing: .3vw;
  height:auto;
	overflow: hidden;
	padding: 0 0 0 0px;
	width:90vw;
	max-height:0;
}


.collapsible-menu {
    background-color: rgb(255, 255, 255);/* White background box */
    padding: 0px 0px;
    position:absolute;
    top:50px;
    right:0;
    z-index:50;
		padding-left:1em;
}

/* This one works */
.collapsible-menu label {
    font-family:'Lato';
		font-weight:100;
    font-size: 1.5em;
    color:#DC8627;
    cursor: pointer;
    padding: 0px 0 0px 0px;
    margin-top:-50px;
    position:relative;
		float:right;
}

input#menu {
    display: none;
}

input:checked +label {
    background-image: url(close.png);
}



/* Toggle Effect */
input:checked ~ label {
    background-image: url(close.png);
}
input:checked ~ .menu-content {
    max-height: 100%;

}

.sample_descriptor:before {
    display:none;
}




}  /* END MEDIA QUERY */



@media only screen and (min-width : 981px) {

/* TRYING TO FIX SAFARI */


		.collapsible-menu {
		    /*background-color: rgb(255, 255, 255);*/
        background-color:none;
		    padding: 0px 0px;
		    position:absolute;
		    top:0px;
		    right:0;
		    z-index:50;
				padding-left:1em;
		}

		/*  TESTING */


.collapsible-menu label {
    display:none;
}
input#menu {
    display: none;
}


#oneblue{
display:none;
}

.menu-content{
  font-size:calc(.5em + .8vw);
}

.sample_descriptor:before {
    content: ""; /* This is necessary for the pseudo element to work. */
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0;
    width: 100%; /* Change this to whatever width you want. */
    padding-top: 2em; /* This creates some space between the element and the border. */
		margin-right:2em;
    border-top: 2px solid #1BC1E1; /* This creates the border. Replace black with whatever color you want. */
}


/*THIS WWAS BELOW MEDIA QUERY> MOVING IT INSIDE TO TEST from here to bottom of media query */
/*THIS WWAS BELOW MEDIA QUERY> MOVING IT INSIDE TO TEST */
/*THIS WWAS BELOW MEDIA QUERY> MOVING IT INSIDE TO TEST */

/* HEADER AND NAV */
/* HEDER AND NAV */
/* HEADER AND NAV */

header{
	height:100px;
	width:100vw;
}


.logo{
  height:50px;
	width:150px;
	float:left;
	background-image:url(graphics/philly_imprint_color.svg);
	background-repeat: no-repeat;
}

.logolink{
	display:block;
	height:50px;
	width:150px;

}


.logo:hover{
			/*background: rgb(59,32,0);
			background: linear-gradient(90deg, rgba(59,32,0,1) 0%, rgba(59,74,38,1) 100%);
			mix-blend-mode:saturation;*/
			opacity: 0.5;
	/*background: rgba(39, 62, 84, 0.82);*/
}



ul li a{
	font-family: 'Lato';
	font-weight:300;
	font-style:italic;

}

.active{
	color:#4f3b5c;
}


/* END HEADER AND NAV */
/* END HEDER AND NAV */
/* END HEADER AND NAV */





}  /* END MEDIA QUERY */








/* PAGE SECTIONS */
/* PAGE SECTIONS */
/* PAGE SECTIONS */

#one{
display:grid;
height:100vh;
width:90vw;
padding-left:5vw;
padding-right:5vw;
overflow:hidden;
text-overflow:clip;
text-align:center;
position:absolute;
top:0;
z-index:5;

animation: fadeone 1s;
}

#home #one{
	background-image: url(images/splash_culture.jpg);
	background-repeat:no-repeat;
	background-size: cover;
	/*background-position:0px 7vw;*/
	background-position:0px 15vh;
	transition-timing-function: ease-in;
	/*animation: fadeout 4s;*/
}

#home #one:hover{
	/*mix-blend-mode:difference;*/
}

@keyframes fadeout {
0%   {opacity:100;}
50%   {opacity:100;}
75%   {opacity:100;}
100%  {opacity:0;}
}

@keyframes fadeone {
    0%   {opacity:0;}
    50%   {opacity:0;}
    100%  {opacity:100%;}
}

#one_B, #one_C, #one_D, #one_E, #one_F{
display:grid;
height:100vh;
width:90vw;
padding-left:5vw;
padding-right:5vw;
overflow:hidden;
text-overflow:clip;
text-align:center;
position:absolute;
top:100vh;
z-index:5;
/*background: rgb(146,156,165);
background: linear-gradient(30deg, rgba(146,156,165,1) 0%, rgba(119,134,146,1) 47%, rgba(119,134,146,1) 100%); */
animation: fadeone 1s;
}

#one_B{
	top:100vh;
}

#one_B .body_sub, #work #two .body_sub, #work #three .body_sub{
	align-self: center;
}

#one_B .h3{
	/*color:#1f313f;*/
}

#about #one{
  background:url(graphics/come_together.jpg);
  background-size: cover;
}

#about #one_D{
  background:url(graphics/treerings.svg);
  background-size:cover;
}



#work #two .body_sub, #work #two .h3{
	color:#fff;
}

#one_C{
top:200vh;
background: url(graphics/custom_scribble.png), linear-gradient(to bottom, #344f66, #294055);
background-blend-mode: multiply;
background-size: cover;
mix-blend-mode:multiply;
}

#work #one_C{
	top:200vh;
}

#work p{
	max-width:800px;
	align-content: center;
	align-items: center;
	align-self: center;
	margin-left:auto;
	margin-right:auto;
}

#one_C .body, #one_C .body_sub, #one_C .headline, #one_C .h3{
	color:white;
	align-self: center;

}

#work #one_C{
	background:linear-gradient(to bottom, #344f66, #294055);
}

#one_E .h3, #one_E .body_sub, #one_E .body{
	color:white;
}

#one_D{
top:300vh;
}

#one_D .body_sub, #one_E .body_sub, #work #two, #work #three .body_sub{
	align-self: center;
}

#one_E{
top:400vh;
/*background: linear-gradient(to bottom, #748895, #ee9f2b);*/
/*background: rgb(238,159,43);
background: linear-gradient(30deg, rgba(116,136,149,1) 0%,rgba(158,182,0,1) 100%);*/
background: url(graphics/practical.svg), linear-gradient(to bottom, #344f66, #294055) ;
background-size:cover;
}

#one_E .h2{
	color:#778692;

}

#one_E .h2sub{
	color:#fff;
}

#one_F{
top:500vh;
}

#contact #one{
	background-image:url(images/fingerprint.jpg);
	background-size: cover;
}

.column_container{
	display: flex;
	flex-wrap:wrap;
	flex-direction: row;
	justify-content: center;
	text-align: left;

}

.column{
	min-width:300px;
	width:40%;
	max-width:500px;
  height:auto;
	padding-left:2vw;
	padding-right:2vw;

}

.column:nth-child(3n) {

}

#two{
display:grid;
height:100vh;
width:90vw;
padding-left:5vw;
padding-right:5vw;
overflow:hidden;
text-overflow:clip;
text-align:center;
position:absolute;
top:100vh;
z-index:5;
background: linear-gradient(to right, #773800, #77813c);
 background-blend-mode: multiply;
 mix-blend-mode:multiply;
animation: fadeone 1s;
}

#two_B{
display:grid;
height:100vh;
width:90vw;
padding-left:5vw;
padding-right:5vw;
overflow:hidden;
text-overflow:clip;
text-align:center;
position:absolute;
top:100vh;
z-index:5;
background:linear-gradient(to bottom, #344f66, #294055);

}

#three{
display:grid;
grid-template-rows:1fr auto .5fr auto 1fr;
height:100vh;
width:90vw;
padding-left:5vw;
padding-right:5vw;
overflow:hidden;
text-overflow:clip;
text-align:center;
position:absolute;
top:200vh;
z-index:5;
animation: fadeone 1s;
}

.grid_content_one{
	grid-row:2;
}

.grid_content_two{
	grid-row:4;
}

#four{
	display:grid;
	height:100vh;
	width:90vw;
	padding-left:5vw;
	padding-right:5vw;
	overflow:hidden;
	text-overflow:clip;
	text-align:center;
	position:absolute;
	top:300vh;
	z-index:5;
	animation: fadeone 1s;
	background: rgb(146,156,165);
	background: linear-gradient(30deg, rgba(146,156,165,1) 0%, rgba(119,134,146,1) 47%, rgba(119,134,146,1) 100%);
	/*background:         linear-gradient(to right, #cdcdcd, #778692); */
}

#five{
		display:grid;
		height:100vh;
		width:90vw;
		padding-left:5vw;
		padding-right:5vw;
		overflow:hidden;
		text-overflow:clip;
		text-align:center;
		position:absolute;
		top:400vh;
		z-index:5;
		animation: fadeone 1s;

}


#portfolio_images{
	display:grid;
	/*grid-auto-rows: auto;
	grid-template-columns: 4.36% 23.66% 4.8% 23.44% 4.47% 34.72% 4.36%;
	grid-row-gap: 4em;*/
	height:auto;
	width:100vw;/* change back to 100 */
	max-width:100%;
	overflow: hidden;
	margin-top:315vh;
	text-align: center;
	justify-content: center;
margin-left:auto;
margin-right:auto;
}


.port_image{
	display:grid;
	text-align: center;
	margin-bottom:3vh;
}

.port_image img{
	width:90%;
	max-width:1200px;
	overflow: hidden;

}


.hometext{
	text-align: center;
  align-self: center;

}

.headline{
	    color:#1f313f;
	    font-family: 'Playfair Display', serif;
	    font-size:5em;
	    letter-spacing: .1em;
			line-height: 1;

}

.headline_gradient{
	font-size:5em;
	font-family: 'Playfair Display', serif;
	letter-spacing: .1em;
	line-height: 1;
	background: rgb(59,32,0);
	background: linear-gradient(90deg, rgba(59,32,0,1) 0%, rgba(59,74,38,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.background_impact{
	font-size:/*65em*/ calc( 100vh + 40vw);
	width:100vw;
	height:115vh;
	font-family: 'Playfair Display', serif;
	letter-spacing: .1em;
	/*background: rgb(59,32,0);*/
	background: linear-gradient(90deg, rgba(59,32,0,1) 0%, rgba(59,74,38,1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity:0.15;
	z-index:1;
	overflow:hidden;
	text-overflow:clip;
	text-align:center;
	justify-content: center;
	position:absolute;
	align-items:center;
	vertical-align: top;
	line-height:1;
	top:-15vh;
}


.headline_italic{
	/*font-size:176px;*/
	font-size:5em;
	font-family: 'Playfair Display', serif;
	font-style:italic;
	letter-spacing: .1em;
	line-height: 1;
	background: rgb(59,32,0);
	background: linear-gradient(90deg, rgba(59,32,0,1) 0%, rgba(59,74,38,1) 100%);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subhead{
	color:#778692;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	font-size:2.625em;
	letter-spacing: .1em;
}

.firstcharacter {
  color: #3b4d5c;
  float: left;
	font-family: 'Playfair Display', serif;
	font-style: italic;
  /*font-size: 491px;*/
	font-size:calc(3em + 35vw + 10vh);
  line-height: 220px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
	margin-bottom:-200px;
	mix-blend-mode: darken;
}

.overlapping{
	line-height:1;
	margin-top:-200px;
	z-index:6;
	max-width:90vw;
	text-align: center;
	align-self: center;
}

.h2{
	font-family: 'Playfair Display', serif;
	/*font-size:72px;*/
	font-size:calc(2em + 3vw);
	color:white;
	line-height:calc(1.2em + 1vw);
}

.h2 a{
	color:#9eb600;
	text-decoration: none;
}

.h3{
	font-family: 'Playfair Display', serif;
	/*font-size:72px;*/
	font-size:calc(1em + 3vw);
	color:white;
}

.body a{
	color:#9eb600;
	text-decoration: none;
	font-style: italic;
}

#three .h2{
	color:#778692;
}

.h2sub{
	font-family: 'Playfair Display', serif;
	font-style:italic;
	/*font-size:36px;*/
	font-size:calc(.7em + 2vw);
	color:#b9d501;
	/*line-height:1;*/
	overflow-wrap:break-word;
}

.h3{
	/*font-size:42px;*/
	font-size:calc(1.1em + 2vw);
	font-family: 'Playfair Display', serif;
	color:#cd7503;
	line-height:1;
}

.h3 a{
	color:#cd7503;
	text-decoration: none;
}

.italic_header{
	/*font-size:176px;*/
	font-size:calc(4em + 8vw + 4vh);
	font-family: 'Playfair Display', serif;
	font-style:italic;
	background: rgb(59,32,0);
	background: linear-gradient(90deg, rgba(59,32,0,1) 0%, rgba(59,74,38,1) 100%);
	-webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}



.centered{
	align-self: center;
}

.body{
	/*font-size:42px;*/
	font-size:calc(.7em + 2vw);
	font-family: 'Playfair Display', serif;
	font-weight: 200;
	color:#1f313f;
	line-height:1.2;
}

.body_sub{
	font-size:calc(.6em + 1.5vw);
	font-family: 'Playfair Display', serif;
	font-weight: 200;
	color:#1f313f;
	line-height:1.2;

}

.body_sm{
	font-size:calc(.6em + 1vw);
	font-family: 'Playfair Display', serif;
	font-weight: 200;
	color:#fff;
	line-height:1.2;

}

/* END PAGE SECTIONS */
/* END PAGE SECTIONS */
/* END PAGE SECTIONS */



/* RESPONSIVE MENU */
/* RESPONSIVE MENU */
/* RESPONSIVE MENU */




li a {
  color:#DC8627;
	text-decoration: none;
	font-weight:100;
  font-family:Montserrat;
  letter-spacing: .3vw;
  line-height:2em;
	transition: color .5s;


}

a:hover {
	color:#4f3b5c;
}

#contact a:hover{
	color:#fff;
}



header {

	width: 92%;
	height: 76px;
	position: absolute;
	top: 30px;
	left: 4.36%;
	z-index:100;
	/*background-color:#fff;*/

}


nav {

	float: right;
	padding: 0px;
  margin-top:-15px;
  vertical-align: top;

}

#menu-icon {

	display: hidden;
	width: 80px;
	height: 40px;
	background: #4C8FEC url(../img/menu-icon.png) center;

}

a:hover#menu-icon {

	background-color: #5F7A80;

}

ul {

	list-style: none;
  padding:0;



}

li {

	display: inline-block;
	float: left;
	padding-bottom: 10px;
  padding-right:1em;


}

/* END RESPONSIVE MENU */
/* END RESPONSIVE MENU */
/* END RESPONSIVE MENU */