/*Fonts*/
@font-face {
  font-family: 'Avenir_Heavy';
  src: url('../fonts/Avenir-Heavy.ttf')  format('truetype')
}

@font-face {
  font-family: 'Avenir_Black';
  src: url('../fonts/Avenir-Black.ttf')  format('truetype')
}

@font-face {
  font-family: 'Avenir_Book';
  src: url('../fonts/Avenir-Book.ttf')  format('truetype')
}

@font-face {
  font-family: 'Avenir_Light';
  src: url('../fonts/Avenir-Light.ttf')  format('truetype')
}

@font-face {
  font-family: 'Avenir_LightOblique';
  src: url('../fonts/Avenir-LightOblique.ttf')  format('truetype')
}
body{
	cursor:pointer;
	overflow-x:hidden;
}
/*Menu*/
#full_menu{
	display:none;
}
.menu_bar{
	height:64px;
	/*background-color:rgba(255,255,255,.2);*/
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:90000000;
}

.menu_bar h1{
	color:#33c0cd;
	margin:0;
	padding-left:20px;
	padding-top:15px;
	line-height:35px;
	font-size:35px;
	letter-spacing:1px;
	text-transform:uppercase;
	font-family:'Avenir_Black', Helvetica, sans-serif;
	display:inline-block;
}


/*Hamburger menu*/
.hamburger{
	background:none;
	position:absolute;
	top:0;
	right:0;
	line-height:64px;
	padding:0px 20px 0px 20px;
	color:#fff;
	border:0;
	font-size:1.4em;
	font-weight:bold;
	cursor:pointer;
	outline:none;
	z-index:10000000000000;	
}

.cross{
	background:none;
	position:absolute;
	top:0px;
	right:0;
	padding:0px 15px 0px 15px;
	color:#fff;
	border:0;
	font-size:3em;
	line-height:100px;
	font-weight:bold;
	cursor:pointer;
	outline:none;
	z-index:10000000000000;
}
/*menu for blue background*/
.menu{
	z-index:200000000000; 
	font-weight:bold; 
	font-size:0.8em; 
	width:30%; 
	max-width:300px;
	background:white;  
	position:fixed; 
	top:64px;
	right:0px;
	text-align:center;
	text-transform:uppercase;
	font-family:'Avenir_Light', Helvetica, sans-serif;

}

.menu ul {
	margin: 0; 
	padding: 0; 
	list-style-type: none; 
	list-style-image: none;
}

.menu li {
	display: block;   
	padding:15px 0 15px 0; 
}

.menu li:hover{
	display: block;    
	background:#fac440; 
	padding:15px 0 15px 0; 
}

.menu ul li a { 
	text-decoration:none;  
	margin: 0px; 
	color:#fff;
}

.menu ul li a:hover {  
	color: #fff; 
	text-decoration:none;
}

.menu a{
	text-decoration:none; 
	color:#33c0cd;
}

.menu a:hover{
	text-decoration:none; 
	color:white;
}

/*.glyphicon-home{
  color:white; 
  font-size:1.5em; 
  margin-top:5px; 
  margin:0 auto;
}
*/
/*menu for white background*/

.menu_white_background{
	background:#33c0cd;  
}


.menu_white_background li:hover{
	background:#fac440; 
}

.menu_white_background ul li a { 
	color:#fff;
}

.menu_white_background ul li a:hover {  
	color: #fff; 
}

.menu_white_background a{
	color:#ffffff;
}

.menu_white_background a:hover{
	color:white;
}

.menu_white_background li:hover{
	background:#fac440; 
}

.hamburger-white_background{
  color:#fac440; 
}
.cross-white_background{
  color:#fac440; 
}


/*menu for white background*/

.menu_yellow_background{
	background:#ffffff;  
}


.menu_yellow_background li:hover{
	background:#fac440; 
}

.menu_yellow_background ul li a { 
	color:#33c0cd;
}

.menu_yellow_background ul li a:hover {  
	color: #fff; 
}

.menu_yellow_background a{
	color:#33c0cd;
}

.menu_yellow_background a:hover{
	color:#ffffff;
}

.menu_yellow_background li:hover{
	background:#33c0cd; 
}
/*For content boxes like contact and about*/
.short_content{
	height:100vh;
	width:100vw;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;  
	justify-content:center;
	align-items:center;
}


/*Intro section*/

.intro{
	background-color:#33c0cd;
}
#name{
	color:white;
	text-transform:uppercase;
	font-family:'Avenir_Black', Helvetica, sans-serif;
	font-size:48px;
	line-height:35px;
	letter-spacing:1px;
	text-align:center;
	display:block;
}
#title{
	color:black;
	text-transform:lowercase;
	font-family:'Avenir_Light', Helvetica, sans-serif;
	font-size:24px;
	line-height:25px;
	/*letter-spacing:2px;*/
	text-align:center;
	display:block;
}
/*About section 
*/
.about{
	background-color:#fac440;
}
.about p{
	color:white;
	font-family:'Avenir_Book', Helvetica, sans-serif;
	font-size: 24px;
    line-height: 32px;
    letter-spacing: 1px;
    text-align: center;
    width: 50%;
    min-width: 250px;
}
.detail_img{
	width:60%;
	min-width:450px;
	margin:50px;
	height:auto;

}
.clients{
	padding-top:25px;
	z-index:0;
	/*remove later*/
}

/*work section*/

.work{
	padding-top:25px;
	padding-bottom:200px;
/*	background-color:#33c0cd;	
*/
}

.work span{
	margin-bottom:20px;
}

/*contact*/

.contact{
	color:white;
	background-color:#33c0cd;
/*	text-transform:uppercase;
*/	font-family:'Avenir_Black', Helvetica, sans-serif;
	font-size:50px;
}
#contact > p:hover{
	color:#fac440;
}
/*subtitle sections*/

.subtitle{
	display:block;
	width:100%;
	text-align:center;
/*	text-transform:uppercase;
*/	font-family:'Avenir_Light', Helvetica, sans-serif;
	font-size:30px;
	margin-top:100px;
}

/*Columns in grid*/
.work_grid_container{
/*	width:80%;
*/	
	margin-top:50px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:0px;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */	
	justify-content:center;
	flex-wrap:wrap;
	
	

}
#dot{
	display:block;
	margin-bottom:20px;
	width:100%;
	font-family:'Avenir_Black', Helvetica, sans-serif;
	font-size:50px;
	text-align:center;
	color:#33c0cd;
}
.column{
	position:relative;
	display:inline-block;
	vertical-align: top;
	width:400px;
	height:620px;
	margin:7.5px;
}


.column_1_top{
	position:relative;
	display:block;
	width:100%;
	height:400px;
	margin-bottom:15px;
	overflow:hidden;
	background-color:#33c0cd;

}

.column_1_bottom{
	position:relative;
	display:block;
	width:100%;
	height:200px;
	overflow:hidden;
	background-color:#fac440;


}
.column_2_bottom{
	position:relative;
	display:block;
	width:30%;
	width:400px;
	height:400px;
	margin:10px;
	margin-bottom:30px;
	overflow:hidden;
	/*background-color:#33c0cd;*/


}

.column_2_top{
	position:relative;
	display:block;
	width:100%;
	height:200px;
	margin-bottom:15px;
	overflow:hidden;
	background-color:#fac440;


}
#col5_ex{
	display:none;
}
#col2_ex{
	display:none;
}

.main_description_content{
	border:10px solid white;
}

/*Styling descriptions*/

.background-image{
	top:0%;
	left:0%;
	position:absolute;
	width:100%;
	height:100%;
	z-index:10;
}
/*backgrounds*/
#narrative_med_background{
	background-image:url(../img/ggj_landing.png);
	background-size:100%;
	background-repeat:no-repeat;

}
#berry_martians_background{
	background-image:url(../portfolio_images/berry_martians.png);
	background-size:100%;
	background-repeat:no-repeat;

}
#protocol_background{
	background-image:url(../portfolio_images/wetried.png);
	background-size:100%;
	background-repeat:no-repeat;

}

#boundary_background{
	background-image:url(../img/sesame_landing.png);
	background-size:100%;
		background-repeat:no-repeat;

}
#system_background{
	background-image:url(../img/hand_photos/school_the_system.png);
	background-size:100%;
		background-repeat:no-repeat;

}
#system2_background{
	background-image:url(../img/hand_photos/zone-in.png);
	background-size:100%;
		background-repeat:no-repeat;

}
#lose_her_background{
	background-image:url(../img/color/lose_her.jpg);
	background-size:100%;
		background-repeat:no-repeat;

}
#lose_her2_background{
	background-image:url(../img/color/lose_her.jpg);
	background-size:100%;
		background-repeat:no-repeat;

}
#spicy_space_background{
	background-image:url(../portfolio_images/spicy_space.png);
	background-size:100%;
		background-repeat:no-repeat;

}
#protocol2_background{
	background-image:url(../portfolio_images/wetried.png);
	background-size:100%;
	background-repeat:no-repeat;

}

#boundary2_background{
	background-image:url(../img/hand_photos/boundary_no_hand.png);
	background-size:100%;
	background-repeat:no-repeat;

}

#fivepointz_background{
	background-image:url(../portfolio_images/fivepointz.png);
	background-size:100%;
	background-repeat:no-repeat;

}


#history_headline_background{
	background-image:url(../img/comps/nytimes.png);
	background-size:100%;
	background-repeat:no-repeat;

}

#jukebox_background{
	background-image:url(../img/hand_photos/jukebox.png);
	background-size:100%;
	background-repeat:no-repeat;
}

#fjord_background{
	background-image:url(../img/color/fjord.jpg);
	background-size:100%;
	background-repeat:no-repeat;

}
#history_chat_background{
	background-image:url(../img/hand_photos/chatbot_no_hand.png);
	background-size:100%;
	background-repeat:no-repeat;

}

#st_ne_background{
	background-image:url(../img/hand_photos/storytelling_no_hands.png);
	background-size:90%;
	background-repeat:no-repeat;

}

.long_col_name{
	font-family:'Avenir_Book', Helvetica, sans-serif;
	font-size:20px;
	line-height:32px;
	color:rgba(0,0,0,1);

	position:absolute;
	bottom:-12%;
	left:0%;
	padding:15px;
	z-index:20;
/*	width:500px;
*/	background-color:rgba(255,255,255,1);
/*	opacity:0;
*/}

.long_col_description{
	font-family: 'Avenir_Book', Helvetica, sans-serif;
    font-size: 13px;
    line-height: 16px;
	color:rgba(0,0,0,1);

}
.other_work_holder{
	position:relative;
	z-index: 10000000;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
/*	margin-bottom:200px;
*/	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */	
	justify-content:center;
	flex-wrap:wrap;
	align-items:center;
}

.other_work > p{
	font-family: 'Avenir_Book', Helvetica, sans-serif;
    font-size: 13px;
    line-height: 16px;
}
.short_description_heading{
	font-family: 'Avenir_Book', Helvetica, sans-serif;
    font-size: 20px;
    line-height: 32px;
}
.short_description_heading_more_info{
	font-family: 'Avenir_Black', Helvetica, sans-serif;
    font-size: 20px;
    line-height: 32px;
}
.logo_holder{
	position:relative;
	z-index:1000;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	margin-bottom:200px;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */	
	justify-content:center;
	flex-wrap:wrap;
	align-items:center;
}

.detail_holder{
	position:relative;
	z-index:20000000000;
	width:80%;
	margin-left:auto;
	margin-right:auto;
	margin-top:50px;
	margin-bottom:200px;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */	
	justify-content:center;
	flex-wrap:wrap;
	align-items:center;
}
.other_work{
	width:300px;
	height:350px;
	margin:25px;
}
.other_work > img{
	width:100%;
	height:auto;
}


.logo{
	width:200px;
	height:200px;
	margin:15px;
}
.logo > img{
	width:100%;
	height:100%;
}

footer{
	font-family:'Avenir_Book', Helvetica, sans-serif;
	font-size:15px;
	line-height:30px;
	height:30px;
	text-align:center;
}

.detail_p{
	width:60%;
	letter-spacing:1px;
	font-family:'Avenir_Book', Helvetica, sans-serif;
	font-size:14px;
	line-height:16px;
	text-align:justify;
	display:block;
	max-width:600px;
	min-width:300px;
}

.more_info{
	/*position:absolute;*/
/*	width:50px;
*/	font-family:'Avenir_Black', Helvetica, sans-serif;
	font-size:30px;
	text-align:right;
	/*right:0px;
	bottom:0px;*/
}


.modal{
	position:fixed;
	top:0;
	left:0;
	width:105%;
	min-height:100%;
	background-color:rgba(255,255,255,1);
	z-index:1000000000000;
	overflow-x: hidden;
	overflow-y:scroll;
}
.modal_content{
	position:absolute;
	width:110%;
	height:100%;
	left:-5%;
	top:0;
	overflow-x: hidden;
	overflow-y:scroll;
}
.image_container{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */	
	justify-content:center;
	flex-wrap:wrap;
	align-items:center;
	width:50%;
	height:100%;
	margin:0;
	background-color:white;
/*	background-color:#33c0cd;
*/	float:left;
}
.description_container{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */	
	justify-content:center;
	flex-wrap:wrap;
	align-items:center;
	width:50%;
	height:100%;
	margin:0;
	float:right;
	vertical-align: top;
	color:white;
	background-color:#fac440;

}
.process_photos{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */	
	justify-content:center;
	flex-wrap:wrap;
		vertical-align: top;

	align-items:center;
	float:right;
	width:50%;
	height:100%;
	overflow:hidden;
	background-color:white;
	overflow:hidden;

}
.modal{
	display:none;
}

.photo_hold > img{
	height:100%;
	width:auto;
}
.process_photos > .photo_hold{
	width:50%;
	height:50vh;
	overflow:hidden;
	/*background-color:blue;*/
}
.process_info{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */	
	justify-content:center;
	flex-wrap:wrap;
	align-items:center;
	width:50%;
	height:100%;
	margin:0;
	/*float:left;*/
	vertical-align: top;
	color:white;
	background-color:#33c0cd;
}

.modal_image{
	width: 80%;
    padding-left: 10%;
	height:auto;
	margin-top:30%;
	margin-left:auto;
	margin-right:auto;
}

.modal_x{
	font-size:50px;
	color:#33c0cd;
	position:absolute;
	top:0px;
	right:5%;
	text-align:center;
	height:50px;
	width:50px;
	z-index:2000000000;
	font-family:'Avenir_Black', Helvetica, sans-serif;


}

.description_container{
	letter-spacing:1px;
	font-family:'Avenir_Book', Helvetica, sans-serif;
	font-size:16px;
	line-height:22.5px;
}
.description_container > p{
	width:65%;
}

.process_info{
	float:left;
	letter-spacing:1px;
	font-family:'Avenir_Book', Helvetica, sans-serif;
	font-size:16px;
	line-height:22.5px;
}
.process_info > p{
	width:65%;
}


.white_header{
	background-color:white;
	box-shadow: 0px 0.02px 5px #ACB6BF;
}

#project_link{
	text-decoration:none;
	color:white;
}

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

a.project_link :link{
	text-decoration:none;
	color:white;
}
a.project_link :active{
	text-decoration:none;
	color:white;
}
a.project_link:hover{
	text-decoration:none;
	color:#33c0cd;
}
a.project_link :visited{
	text-decoration:none;
	color:white;
}


a.link {
	text-decoration:none;
	color:#33c0cd;
}

a.link :link{
	text-decoration:none;
	color:#33c0cd;
}

a.link :active{
	text-decoration:none;
	color:black;
}

a.link:hover{
	text-decoration:none;
	color:#ACB6BF;
}

a.link :visited{
	text-decoration:none;
	color:#33c0cd;
}

#st_ne_modal_image{
	width:100%;
	margin-top:0%;
}
#med_modal_image{
	margin-top:0%;
}
#school_modal_image{
	margin-top:0%;
}
#jukebox_modal_image{
	margin-top:0%;
}

@media (max-width: 900px) {
	.column{
		width:200px;
		min-width:40%;
	}
	.work_grid_container{
		width:90%;
		flex-wrap:wrap;
		justify-content:center;
	}

	#col5_ex{
		display:initial;
	}
	#col3{
		display:none;
	}

	.column_2_bottom{
	
	/*width:84%;*/
	height:400px;

	}
.process_photos{
	width:100%;
	height:100vh;
	
}
.process_info{
	width:100%;
	height:100%;
	
}
	.image_container{
	
	width:100%;
	height:100%;
	
}
.description_container{
	width:100%;
	height:100%;
	
}
.photo_hold > img {
     height: auto; 
    width: 100%;
}
.modal_image{
	margin-top:0;
	/*padding-top:45%;*/
}
}

@media (max-width:550px) and (orientation:portrait){

	.photo_hold > img {
	    height: 100%;
	    width: auto;
	}
	.photo_hold{
	    height: 50vh;
	    width: 50%;
	}

}

@media (max-width: 650px) {
	.column{
		width:200px;
		min-width:100%;
	}
	.work_grid_container{
		width:90%;
	}
	
	#col5_ex{
		display:none;
	}
	#col3{
		display:initial;
	}
	
	#col2{
	display:none;
	}
	#col2_ex{
		display:initial;
	}

	#col1{
		order:1;
	}
	#col3{
		order:2;
	}
	#col2_ex{
		order:1;
	}
	#col4{
		order:2;
	}
	#col5{
		order:4;
	}
	#col6{
		order:3;
	}

	.contact{
		font-size:30px;
	}
	/*.column_2_bottom{
	
	width:100%;
	height:400px;

	}
*/
	.image_container{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */	
	justify-content:center;
	flex-wrap:wrap;
	align-items:center;
	width:100%;
	height:100%;
	margin:0;
/*	background-color:#33c0cd;
*/	float:left;
}
.description_container{
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */	
	justify-content:center;
	flex-wrap:wrap;
	align-items:center;
	width:100%;
	height:100%;
	margin:0;
	top:0;
	float:right;
	vertical-align: top;
}
.modal_x{
	color:white;
	}

	.modal_image{
	
	/*margin-top:50%;*/

}

}