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

.menu {margin-top:10px !important;}


@font-face {
  font-family: 'Karla Bold';
  src:url(Karla-Bold.ttf);
}

@font-face {
  font-family: 'NB Intl';
  src:url(NB-Intl.ttf);
}



@font-face {
  font-family: 'NB Intl Bold';
  src:url(NB-Intl-Bold.ttf) ;
}

@font-face {
  font-family: 'Gotham extralight';
  src:url(GOTHAM-XLIGHT.TTF) ;
}

@font-face {
  font-family:'karla';
  src:url(Karla-Regular.ttf) ;
}

@font-face {
  font-family:'Goth';
  src:url(Gotham-XLight(1).ttf);
}
@font-face {
  font-family:'Gotham Light';
  src:url(Gotham-Light(1).ttf);
}


.container .red a:hover {font-family:"NB Intl" !important;font-size:18px !important;font-style: italic ; border-bottom: solid white 0px !important;letter-spacing:.5px;font-weight:200 !important;}





#k {width:130px !important;margin-top:25px !important;display:fixed !important;}



#kb img {display:fixed;}



.header .ul {
	padding-left:30px;}




#hid {
	visibility:hidden;}



a {
  color: #000;
}

/* header */

.header {
  font-family: "NB Intl"!important;letter-spacing:1px;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
 margin-top:-110px;
  width: 100%;
font-weight:400;
  position:absolute;
  font-size:16px;
  z-index:1500;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.header li a {
  display: block;
  padding: 15px 18px !important;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
   border-top: 1px solid #f4f4f4;
  
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 440px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 900px) {


	.header {
  font-family: karla;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
top:90px !important;
 
}
	
	.menu li a:hover {background:none !important;}
	
	.header li a {
 border-right:none;
   border-top: none;
  
}


.header .ul {
	padding-left:0px;}
	
	
	ul li:hover .ul {
	visibility:visible !important;
	position:absolute;}
	
	
  
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
  
  .header {
 
  box-shadow: none !important;margin-right:50px !important;
 margin-top:-40px !important;
  width: 100%;
  z-index: 12 !important;
  position:absolute;
}

.header  {
right:50px;
}


	
	
	.menu  ul {
		background:rgba(255,255,255,0.58);
		
		visibility: hidden;
	list-style: none;

		z-index: 10;
		
	position:absolute;
	
		
		
	}
	
.menu li ul li {
		margin-left:0px;
		}
	
		ul.menu li ul li a {
			color:black !important;padding:none !important;text-align:left;
		}
	

		ul.ul:hover >  ul
		 {
			visibility: visible !important;
			
		}
		
	
	

}



	
	
		h3, span {
	
	font-family: karla !important;}

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

	ul#nav > #navmf {
		zoom: 1;
		width: 20%;
		display: inline;
		float: left;
	}

div#container {height:300px;width:70%;
postion:absolute;
margin-top:-950px;}



div#container img {width:20%;}



#containerp {
width:100%;
max-width:100%;
}

body{width:100%;

}



#kb {


padding:50px;
font-size:3em ;
font-family:"Gotham extralight", "Gotham Light";
}


#hid {z-index:10 !important;}

#hid h1 {text-align:center;
margin:auto; display:block; margin-top:20px;}
	
#kb {
font-family:"Gotham Light", "Gotham extralight";

font-size:2em !important;

}

#b {
position:absolute;top:20px !important;
left:180px !important;
z-index:4;
}

#k {
top:20px !important;
position:absolute;z-index:4;
left:120px;
}	



#i {
position:absolute;
font-family:"Gotham Light", "Gotham extralight";
padding:50px;
font-size:2em;
top: -30px
!important;
left:192px !important;}

	
#nav {font-weight:bold!important;
position: absolute;
top:60px;
left: 48%;
font-family:"Gotham Light" ;
width:40%;
z-index:200 !important;

}

#shortbio	{max-width:3000px;
height:850px;
width:650px;
position:relative;

}
	
#biopic {
width:300px;
height:100%;
object-fit:cover;
background-position:top right;
background-image:url(IMAGES/Portfolio%20site/misc/tre%20copy.jpg);
display:block;
  background-size: 600px;
  top:-600px;
  position:absolute;
  z-index:1;
  background-repeat:no-repeat;
}	

#desc {position:absolute;
top:-520px;
z-index:3;
left:730px;
}

#desc img {width:26%;
-webkit-transform: rotate(-13deg);}
	
	
		/*---------------------------------------------------
			3.1 Navigation
	---------------------------------------------------*/

	ul#nav {
		font-size: 13px;
		line-height: 21px;
	
		overflow: visible;
		
		z-index:100;
	}
	
	



	@media screen and (min-width: 1200px)
{
	
	
	ul#nav li ul li {
		margin-left:0px !important;
		}

		.img-responsive {
	margin-left:100px;}

		
}

	@media screen and (min-width: 768px) and (max-width: 959px) { 
		ul#nav {
			font-size: 11px;
			
		}
		
		
	
	}

	@media screen and (max-width: 767px) { 
		
	}

	ul#nav li { position: relative; padding:8px;
}

		ul#nav li ul a {
			color: #555;
			
		}

	ul#nav > li {
		zoom: 1;
		width:20%;
		display: inline;
		float: left;
	}

		ul#nav > li a {text-decoration:none !important;
			color: black;
			display: block;
			padding: 18px 0 15px 0;
			margin: 0 20px;
			
		}

			ul#nav > li a span.count {
				color: #ddd;
				display: block;
				font-size: 11px;
			}

		ul#nav > li a:hover {
			color: white;
			border-bottom: none;
		}

			ul#nav > li a:hover span.count { color: white; }

	ul#nav > li:hover,
	ul#nav > li.hover {
	
		margin: 0;
	}

		ul#nav > li:hover a,
		ul#nav > li.hover a {
			color:#aaa;
			
			border-bottom: none;
		}

			ul#nav > li:hover a span.count,
			ul#nav > li.hover a span.count { color: white; }

		ul#nav > li:hover ul li:last-child > a,
		ul#nav > li.hover ul li:last-child > a,
		ul#nav > li:hover ul li.last-child > a,
		ul#nav > li.hover ul li.last-child > a { border-bottom: none; }

	ul#nav > li.hasChild:hover a,
	ul#nav > li.hasChild.hover a { border-bottom: 1px solid #222; }

	
	
	
	
	ul#nav li ul {
		background:rgba(255,255,255,0.58);
		
		visibility: hidden;
	list-style: none;

		z-index: 10;
		top: 100%;line-height:0px !important;	
	position:absolute;
	
	left:0;
	
	padding:0
		
		
	}
	
	ul#nav li ul li {
		margin-left:40px;
		}
	
		ul#nav li ul li a {
			color:black !important;padding:none !important;text-align:left;
		}
	
		
		ul#nav li ul  li a:hover {
			color:#C2C2C2 !important;
			}
	

		ul#nav li:hover > ul,
		ul#nav li.hover > ul {
			visibility: visible;
		}
		
		ul#nav li ul a:hover,
		ul#nav li ul a:focus {
			
			
			
		
		}

		ul#nav li ul li:last-child > a,
		ul#nav li ul li.last-child > a { border-bottom: none; }

	ul#nav > li ul ul {
		position: absolute;
		top: 0;
		left: 100%;
	}



	/* Mobile Menu */
	#menu-mobile-wrapper { display: none; }
	
	




@media screen and (max-width: 1200px)  { 

	ul#nav li { position: relative; left:-40px;}

		ul#nav li ul a {
			color: #555;
		
		}
		
	ul#nav li ul li {
		margin-left:0px !important;
		}
	

	#i {

left:87%;}



#desc {display:none !important;}


	
	#shortbio	{max-width:100%;
height:850px;
width:1200px;
position:relative;

}
	
#biopic {
width:100%;
height:100%;
   
display:block;
  background-size: cover;
  top:-600px;
  position:absolute;
  z-index:1;
}	

	
}


/*---------------------------------------------------
			3.1 SLIDER 
		
SLIDER
	---------------------------------------------------*/





#slider {width:36% !important;
  max-width: 500px;
 height:550px;
 left: 10% ;

  position: relative;  z-index:4;

}

#slider img {
	width:350px;
	object-fit:contain !important; 
	}


#slider > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

.img1 {
background-image:url(IMAGES/massflow/tape/2.jpg);
	    background-size: cover;
	 width: 100%;
  height: 100%;
}

.img2 {background-image:url(IMAGES/PROJECTS%20-%20school,%20stuff/MASSFLOW/third/DSC_0271.jpg);
	background-position:center;
	    background-size: cover;
	 width: 100%;
  height: 100%;
}

.img3 {
	background-image:url(IMAGES/PROJECTS%20-%20school,%20stuff/MASSFLOW/91600035-2.JPG);
	
	
	
	background-position:center;
	    background-size: cover;
	 width: 100%;
  height: 100%;
}

.img4 {background-image:url(IMAGES/massflow/dsds.jpg);
	    background-size: cover;
	 width: 100%;background-position:center;
  height: 100%;
}



.img5 {
	background-image:url(IMAGES/massflow/muka2/67790010.JPG);
	
	    background-size: cover;
	 width: 100%;background-position:center;
  height: 100%;
}

.img6 {
		background-image:url(IMAGES/PROJECTS%20-%20school,%20stuff/MASSFLOW/third/DSC00138-copy.jpg);
	    background-size: cover;
	 width: 100%;background-position:center;
  height: 100%;
}

.img7 {

	background-image:url(IMAGES/massflow/miscmf/smily2.jpg);
	    background-size: cover;
	 width: 100%;background-position:center;
  height: 100%;
}

.img8 {
background-image:url(IMAGES/PROJECTS%20-%20school,%20stuff/MASSFLOW/freshmeat.jpg);
	    background-size: cover;
	 width: 100%;background-position:center;
  height: 100%;
}


.img9 {
background-image:url(IMAGES/massflow/madmae2.jpg);
	    background-size: cover;
	 width: 100%;background-position:center;
  height: 100%;
}




/*


.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
  background-image:url(IMAGES/massflow/2.jpg);
  background-size: cover;
    animation:fade 20s infinite;
-webkit-animation:fade 20s infinite;



} 
.slide2 {
  background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371565525_p17tbqpu0d69c21hetd77dh483.jpeg)no-repeat center;
      background-size: cover;
    animation:fade2 20s infinite;
-webkit-animation:fade2 20s infinite;
}
.slide3 {
    background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371564896_p17tbq6n86jdo3ishhta3fv1i3.jpg)no-repeat center;
      background-size: cover;
    animation:fade3 20s infinite;
-webkit-animation:fade3 20s infinite;
}
@keyframes fade
{
  0%   {opacity:0}
  33.333% { opacity: 1}
  66.666% { opacity: 1}
  100% { opacity: 0}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 1 }
  100% { opacity: 1}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 1}
}



*/

/*---------------------------------------------------
	END OF

SLIDER 
	---------------------------------------------------*/