@charset "UTF-8";

/* CSS Document */


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

.pages{
	float: right;
	padding-top: 2px;
}

.work {
	width: 20%
}

.approach {
	width: 20%
}

.about {
	width: 20%
}

.contact {
	width: 20%
}

.nav { 
	padding-top: 25px;
	padding-left: 30px;
	padding-right: 30px;
	margin:0px;
	padding-bottom: 10px;
	top: 0;

	background-color: #1AC9B5;
	position: fixed;
	z-index: 2;
}

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

ul{
	list-style-type: none;
	overflow: hidden;
}

li{
	float:left;
	color:black;
	font-family: basic-sans, sans-serif;
	font-weight: 400;
	font-style: normal	
}

li a{
	display:block;
	text-decoration: none;
	color: black;
	font-weight: 400;
	padding-left: 15px;
	padding-right: 10px;
	font-size: 12pt;
}

li a:hover {
  font-weight: 700;
}
*/


.title{
	color:black;
	font-family: basic-sans, sans-serif;
	font-weight: 600;
	font-style: normal;
	padding-left: 0px;
	font-size: 13pt;
}

ul {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding-left: 1vw;
  padding-right: 3vw;
}

.nav { 
   background-color: white;
   padding-top: 15px;
   padding-bottom: 10px;
	top: 0;
	position: fixed;
	z-index: 2;
	width: 100%;
}


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

li {
  float: left;
}

.pages li a {
  display: block;
  color: black;
  padding-left: 19px;
  text-decoration: none;
  
}

li a {
   text-decoration: none;
}


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

.pages {
   float: right
   }

/* APPLIES 2 ALL PAGES*/

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

@media screen and (min-width:600px){
.footer_mobile {
    opacity: 0;
    height: 0px;
    padding-top:0px important!;
    padding-bottom:0px important!;
}
}

.footer2 {
margin-top: 2vw;
    padding-top: 3vw;
    padding-bottom: 3vw;
color:white;
max-width:100%;
font-size: 14px;
font-weight:100;
letter-spacing:1px;
text-align: center;
background-color: black;
vertical-align: bottom;
bottom:0%;

} 
/* INDEX.HTML CONTENT*/

.homepage-container{
	position: relative;
    background-color:white;
}

.intro {
	text-align: center;
	position: relative;
	margin: auto;
	margin-top: 90px;
}

h1 {
	text-align: left;
	color: black;
	font-weight: 400;
	font-size: 5vw;
	line-height: 1em;
	display: inline-block;
    padding-left: 1vw;
}

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

body#index {
	background-color: white;
    margin:0px;
       min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.homepage-wrapper {
    margin:8px;
}

/* WORK.HTML CONTENT*/




.grid-container {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-rows: auto auto;
	grid-gap: 1.5vw;

	margin-top: 50px;
	margin-right: 1vw;
	margin-left: 1vw;
	position: relative;
	z-index: 1;
	font-size: 2.5vw;
	line-height: 1.5em;
}

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


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

.text {
	position: relative;
 }

h2 {
   margin-left:10px;
}

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



.prjct_img2 {
    display: none;
    }

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

.item:hover h2 {
    display:block;
}


.prjct_colorA h2 {    
    text-align:left;
    position: absolute;
	top: 21%;
	left: 1%;
    width:100%;
    color: white;
    display: none;
	font-weight: 400;
}

.prjct_colorA {
    background-color: #ef4e23;
    float: left;
	overflow: hidden;	
}

.prjct_colorB h2 {    
    text-align:left;
    position: absolute;
	top: 21%;
	left: 1%;
    width:100%;
    color: black;
    display: none;
	font-weight: 400;
}

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

.prjct_colorC h2 {    
    text-align:left;
    position: absolute;
	top: 41.2%;
	left: 1%;
    width:100%;
    color: white;
    display: none;
	font-weight: 400;
}

.prjct_colorC {
    background-color: #4f1a95 ;
    float: left;
	overflow: hidden;	
}

.prjct_colorD h2 {    
    text-align:left;
    position: absolute;
	left: 1%;
    width:100%;
    color: white;
    display: none;
	font-weight: 400;
}

.prjct_colorD {
    background-color: #083e3e;
    float: left;
	overflow: hidden;	
}

.prjct_colorE h2 {    
    text-align:left;
    position: absolute;
	top: 1%;
	left: 1%;
    width:100%;
    color: white;
    display: none;
	font-weight: 400;
}

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



.prjct_colorF h2 {    
    text-align:left;
    position: absolute;
	top: 61.4%;
	left: 1%;
    width:100%;
    color: white;
    display: none;
	font-weight: 400;
}

.prjct_colorF {
    background-color: #4bb7ad;
    float: left;
	overflow: hidden;	
}

.prjct_colorG h2 {    
    text-align:left;
    position: absolute;
	top: 41.2%;
	left: 1%;
    width:100%;
    color: white;
    display: none;
	font-weight: 400;
}

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


.prjct_colorH h2 {    
    text-align:left;
    position: absolute;
	top: 81.6%;
	left: 1%;
    width:100%;
    color: white;
    display: none;
	font-weight: 400;
}

.prjct_colorH {
    background-color: #2E3748;
    float: left;
	overflow: hidden;	
}


.prjct_color8 h2 {    
    text-align:left;
    position: absolute;
	top: 61.4%;
	left: 1%;
    width:100%;
    color: white;
    display: none;
	font-weight: 400;
}

.prjct_color8 {
    background-color: #6C180B;
    float: left;
	overflow: hidden;	
}

.prjct_color10 h2 {    
    text-align:left;
    position: absolute;
	top: 81.6%;
	left: 1%;
    width:100%;
    color: white;
    display: none;
	font-weight: 400;
}

.prjct_color10 {
    background-color: #148357;
    float: left;
	overflow: hidden;	
}




/* NASKH.HTML */
.prjct_margins{
    margin-left:10%;
    margin-right:10%;}


.prjct_header {
    margin-top: 30px;
    margin-bottom:5vh;
}

.prjct_details_below {
    margin-top: 0px;
    display:grid;
    grid-template-columns: 50% 50%;
    align-items: center;
}


.prjct_h_p {
	position: relative;
	font-size: 18px;
}
.header_img1 {
    width: 100%;
    }
    
h4 {
	text-align: left;
	font-weight: 700;
	font-size: 60px;
	line-height: 1em;
	margin-right: 10%;
    margin-left: 10%;
}

h4#who {
    color:#204669;
}

h4#naskh {
    color:#083e3e;
}

h4#nyu {
    color:#4f1a95;
}

h4#scg {
    color:#232eaa;
}


h4#cc{
    color:#3d9991;
}
h4#chipw{
    color: #53489d;
}
p.prjct_intro {
    font-size: 25px;
margin-right: 10%;
  margin-left: 10%;
      }

.centered_prjct_img {
  margin-right: 10%;
  margin-left: 10%;
  width:80%;
  } 

h5 {
    text-align: left;
	font-weight: 700;
	font-size: 28px;
	margin-right: 10%;
  margin-left: 10%;
}

p.caption {
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 10%;
    color: gray;
    text-align: center;
}
p.textalone {
  margin-left: 10%;
  margin-right: 10%;
   margin-bottom: 20%;
}
    
@media screen and (min-width:990px){
p.textalone {
    margin-bottom: 0%;
    width: 70%;
    }
    

}

.full_prjct_img {
  margin-right: auto;
  margin-left: auto;
  width:100%;
   text-align:center;
}

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


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

@media screen and (min-width:990px){
img.full_prjct_img_change {
  margin-right: auto;
  margin-left: auto;
  margin-top: 10%;
  margin-bottom:-5%;
  width:100%;
  display: block !important;
}



img.full_prjct_img_mobile {
  margin-right: auto;
  margin-left: auto;
  margin-top: 10%;
  max-width:100%;
  display: none !important;
}}

p.textright {
   margin-right:40%;
   min-width:50%;
  }

@media screen and (min-width:990px){
p.textright {
   margin-right: 9vw;
  }
}


  
  @media screen and (min-width:990px){
  .center_prjct_img {
  width:50%;
  text-align: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-top: 0%;}
  }

img#prjct_img_bookcover {
    width:50%;
}

body#index {

 }
 
body.projectpage{
  margin: 0px;
  }
  /* Props.HTML*/

h4#props {
  color:  #ef4e23;
}

/* MTS.HTML*/

h4#mts {
  color:  #B13563;
}

p a {
  text-decoration: none;
  color: black;
 }
 
p a:hover {
  color: #B13563;
}

/* WHO.HTML*/

iframe { 
  width: 90%;
  aspect-ratio: 16 / 9;
}

player = new YT.Player( 'player', {
    height: '390',
    width: '100%',
    videoId: 'wf3Tk-iWDg0',
    playerVars: { 'rel':0}
    }
);