@charset "UTF-8";

/* MEDIA QUERY CSS Document */


/* NAVIGATION BAR*/
.title{
	color:black;
	font-family: basic-sans, sans-serif;
	font-weight: 600;
	font-style: normal;
	padding-left: 0px;
	font-size: 13pt;
	float:left;
	text-align:left;
	
}

.pages{
    padding-top:2px;
	display:flex;
}

.footer_mobile {
padding-top: 15px;
padding-bottom:15px;
padding-right:7px;
padding-left:7px;
color:white;
max-width:100%;
font-size: 10px;
text-align: center;
font-family: 'Courier New', Courier, monospace;
background-color: black;
vertical-align: bottom;
}

.footer2 {
    font-size:10px;
}


.nav { 
	/*padding-top: 25px;
	padding-left: 30px;
	padding-right: 30px;
	margin:0px;
	
	WIDTH: REMOVED*/
	
	padding-top: 25px;
	background-color: #FFFFFF;
	position: fixed;
	z-index: 2;
	top:0;		
	padding-bottom: 12px;
	margin:0px;
	width: 100%;
	padding-left: 0px;
	padding-right: 0px;

	
}

.nav#work {
	background-color: white;
}

ul{
	padding-left: 20px;
	padding-right: 20px;
	margin:auto;
	overflow: hidden;
}

.pages li a {
    padding-left: 11px;
}


li{
	/*float:left;*/
	color:black;
	font-family: basic-sans, sans-serif;
	font-weight: 400;
	font-style: normal;	
	
	padding-left:0px;
	padding-right:0px;
	
}

.pages li{
    width:100%; 
    float:right;
    display:inline-block;
    padding-left:0px;
}

li a{
	
	text-decoration: none;
	color: black;
	font-weight: 400;
	display:block;
	font-size:15px;
	padding-left: 0px;  /*INSTEAD OF 15PX*/
	padding-right: 0px;/*INSTEAD OF 10PX*/

}

li a:hover {
  font-weight: 600;
}


/* INDEX.HTML CONTENT*/

.homepage-wrapper {
    margin:0px; 
   	height: 100vh;
}

.homepage-container{
	width: 100vw;
	height: 100vh;
	position: relative;
	
}

.intro {
	position: relative;
	margin-top: 80px; /* INSTEAD OF 170PX*/
	margin-left: 3vw;
	margin-right: 3vw;
}

h1 {
	text-align: center;
	color:#000000;
	font-weight: 400;
	font-size: 6vw;/* INSTEAD OF 5VW*/
	line-height: 1em;
	margin-right: auto;
	margin-left: auto;
	display: inline-block;
}


.homepage_img {
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.footwrap {
      min-height: 100vh;
  display: flex;
  flex-direction: column;
   height:100vh;
    position: relative;
    justify-content: space-between;
}


/* APPLIES 2 ALL PAGES*/

body {
	font-family: basic-sans, sans-serif;
	margin:0;
}


/* WORK.HTML CONTENT*/


.grid-container {
	display: grid;
	margin-top: 40px;
	grid-template-columns: auto;
	grid-template-rows: auto auto;
	grid-gap: 1.5vw;
	justify-content: space-evenly;
	align-content: center;
	margin-right: 0px;
	margin-left: 0px;
	position: relative;
	z-index: 1;
	font-size: 3vw;
	line-height: 1.5em;
	background-color:white;
}

.grid-container > div {
	text-align: center;
	min-width: 70%;
	display: block;
}
   


/* everything is relative to the .grid-container and not .item.  */

/*.prjct_img {
	display:none;
}

.prjct_img2 {
	max-width: 100%;
    float: left;
    display:block;
}

.item:hover img {
	opacity: 0;
    float: left;
}

.item:hover h2 {
    display:block;
}
*/

.prjct_img {
	max-width: 100%;
    float: left;
    display:block;
}

.prjct_img2 {
    display: none;
    }
    
.desktop-br {
  display: none
  }

.text {
	left: -2%;
 }
 
h2 {
   margin-left:0px;
   padding-left: 10px;
   margin-block-start: 61%;
   padding-top: 3%;
   padding-bottom:3%;
   display:block;
}


.item:hover img {
	opacity: 100%;
    float: left;
}



.item h2 {
    display:block;
    }
    
.prjct_colorA h2 {    
    text-align:left;
    position: absolute;
	top: 20.7%; /* INSTEAD TOP: 21% */
	left: 2%;
    width:100%;
    color: white;
    display: block;
	font-weight: 400;
}

.prjct_colorA {
  /*  background-color: #D9D631; too lazy to fix the color, Cmd+C wont work*/
    float: left;
	overflow: hidden;	
}


.prjct_colorB h2 {    
    text-align:left;
    position: absolute;
	top: 30.7%; /* INSTEAD TOP: 21% */
	left: 2%;/* INSTEAD OF LEFT: 52% */
    width:100%;
    color: black;
    display: block;
	font-weight: 400;
}

.prjct_colorB {
   background-color: white;
    float: left;
	overflow: hidden;	
}

.prjct_colorC h2 {    
    text-align:left;
    position: absolute;
	top: 40.8%; /* INSTEAD TOP: 41.2% */
	left: 2%; 
    width:100%;
    color: white;
    display: block;
	font-weight: 400;
}

.prjct_colorC {
  /*  background-color: #131820;*/
    float: left;
	overflow: hidden;
	
}

.prjct_colorD h2 {    
    text-align:left;
    position: absolute;
	top: 0.2%; /* INSTEAD OF PADDING-TOP: 1%*/ 
	left: 2%;
    width:100%;
    color: white;
    display: block;
	font-weight: 400;
	background-color: rgba(8, 62, 62);
} 


.prjct_colorD {
    background-color: white;
    float: left;
	overflow: hidden;	
}

.prjct_colorE h2 {    
    text-align:left;
    position: absolute;
	top: 10.4%; /* INSTEAD OF PADDING-TOP: 1% */
	left: 2%; /* INSTEAD OF LEFT: 52% */
    width:100%;
    color: white;
    display: block;
	font-weight: 400;
    
}

.prjct_colorE {
    background-color: #B13563;
    float: left;
	overflow: hidden;	
}

.prjct_colorF h2 {    
    text-align:left;
    position: absolute;
	top: 60.9%; /* INSTEAD TOP: 61.4% */
	left: 2%;
    width:100%;
    color: white;
    display: block;
	font-weight: 400;
	background-color: #4bb7ad;
}

.prjct_colorF {
   /* background-color: #63bec3;*/
    float: left;
	overflow: hidden;	
}

.prjct_colorG h2 {    
    text-align:left;
    position: absolute;
	top: 51%; /* INSTEAD TOP: 41.2% */
	left: 2%;/* INSTEAD OF LEFT: 52% */
    width:100%;
    color: white;
    display: block;
	font-weight: 400;
}

.prjct_colorG {
   /* background-color: #4643c9;*/
    float: left;
	overflow: hidden;	
}


.prjct_colorH h2 {    
    text-align:left;
    position: absolute;
	top: 80.9%;
	left: 2%;
    width:100%;
    color: white;
    display: block;
	font-weight: 400;
}

.prjct_colorH {
    background-color: #191a59;
    float: left;
	overflow: hidden;	
}

.prjct_color8 h2 {    
    text-align:left;
    position: absolute;
	top: 71%; /* INSTEAD TOP: 61.4% */
	left: 2%;
    width:100%;
    color: white;
    display: block;
	font-weight: 400;
	background-color: rgba(108, 24, 11);
	 /* background-color: #6C180B; */ 
}

.prjct_color8 {
    background-color: white;
    float: left;
	overflow: hidden;	
}


/* NASKH.HTML */

.nav#naskh {
   padding-left:0px;
   padding-right:0px;
}

.prjct_header {
	position: relative;
    margin-bottom: 0vh;
   }

.prjct_header_text {

}

h4 {
	text-align: left;
	font-weight: 700;
	font-size: 40px;
    margin-top:20px;
}

.header_img1 {
    width: 100%;
    margin-top: 45px;
    vertical-align:top;
    }

p.prjct_intro { 
   font-size: 18px;
    margin-right: 5%;
    }
.prjct_details_below {
    grid-template-columns: auto;
}

p.textalone {
   margin-right:5%;
   font-size:18px;
   }

.left_prjct_img {
  width:100%;
  padding-bottom: 20%;
  display: block
  }
p.caption {
    margin-bottom: 20%;
}

p.textright{
   margin-right: 5%
   }

img.full_prjct_img {
    margin-right: auto;
    margin-left: auto;
    max-width: 100%;
    display: block;
}

iframe{
    height:250px;
}

/*OLD SHIT



.overlay {
  position: absolute;
  height: 30%;
  width:30%;
  opacity: 0;
  text-align: center;
  transition: .5s ease;
  background-color: #008CBA;
}

.item1:hover .overlay {
  opacity: 1;
}


.item1:hover .text {
  visibility: visible;
  opacity: 1;
}


.text {
  position: absolute;
  top: 100px;
  bottom: 0;
  left: 100px;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
}

.item1:hover {
	background-color: #083e3e;
    content: url(naskh_hover.png);
	max-width: 100%;
}


@media screen and (max-width:600px) {
  .pages {
    width:100%; 
	float:left;
	}
}

@media screen and (max-width:600px) {
   li {
    width:100%; 
	float: left;
	}
}*/