*{

	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

#header{
	height: 100vh;

	background-image: url(images/boat2a.jpg);
    background-position: center;
	background-size: cover;

}

/* The navigation bar */
.navbar {
  overflow: hidden;
 background-color: #fff; 
  position: fixed; /* Set the navbar to fixed position */
  z-index: 100;
  top: 0; /* Position the navbar at the top of the page */
  left: 0;
  width: 100%; /* Full width */
  column-span: 100%;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  width: 10%;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  padding-left: 0;
font-family: 'DM Sans', sans-serif;
text-decoration: none; 

}

.navbar a:hover {
 
  color: orangered;
}

.container{
position: relative;
z-index: 10;
}
.common-btn{
	margin-left: 800px;
	margin-top: 200px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	cursor: pointer;
	color: #FFFFFF;
	display: inline-block;
}

.common-btn1{
	margin-left: 800px;
	margin-top: 15px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	cursor: pointer;
	color: #FFFFFF;
	display: inline-block;
		position: relative;
}
.common-btn2{
	margin-left: 800px;
	margin-top: 15px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	cursor: pointer;
	color: #FFFFFF;
	display: inline-block;
		position: relative;
}
.common-btn3{
	margin-left: 800px;
	margin-top: 15px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	cursor: pointer;
	color: #FFFFFF;
	display: inline-block;
	position: relative;
}



/* Main content */

#sideNav{
	width:250px;
	height: 100vh;
	position: fixed;
	right: -250px;
	top: 0;
	background:#696969;
	z-index: 999;
	transition: 0.5s;
	
}
nav ul li{
	list-style: none;
	margin: 20px 20px;
}
nav ul li a{
	text-decoration: none;
 color: #FFFFFF;
}
#menuBtn{
	width: 50px;
	position: fixed;
	right: 65px;
	top: 35px;
	z-index: 1000;
	cursor: pointer;

}

/*----about-----*/

#about{
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;

}
.about-left-col{
	flex-basis: 100%;
}

.about-left-col img{
	width: 100%;
}
.about-right-col{
	flex-basis: 100%;
	position: absolute;
	z-index: 2;
	padding-left: 765px;
	
}
.about-text{

	max-width: 300px;
	padding-right: 50px;
    display: inline-block;
	font-weight: lighter;
	font-size: 1rem;
	color: #DEDEDE;
	font-kerning: 20px;
	position: relative;
}

/*----projects--*/
#projects{
	padding:  0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.projects-img{
	flex-basis: 100%;
}

.projects-img img{
	width: 100%;
}
.projects-btn{
	
	margin-left: -32px;
	margin-top: -260px;
	background: transparent;
	outline: none;
	
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;

}
/*--projects-page--*/
#projects-page{
	height: 100vh;
	background-image: url(images/bgslow.gif);
    background-position: center;
	background-size: cover;
}
/*--projects-buttons---*/
.common-btn4{
	margin-left: 710px;
	margin-top: -400px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.common-btn5{
	margin-left: 710px;
	margin-top: -400px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.common-btn6{
	margin-left: 710px;
	margin-top: -400px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.common-btn7{
	margin-left: 710px;
	margin-top: -400px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.common-btn8{
	margin-left: 710px;
	margin-top: -400px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}


/*----pandemic----*/
#pandemic-page{
	height: 100vh;
}

/*---processing---*/
#processing-page{
	height: 100vh;

	/*--background-image: url(images/processinglanding.png);
    background-position: center;
	background-size: cover;--*/
}

/*--page1--*/
#page1{
	padding: 5px 0 30px;

}
hr{
	width: 100%;
	border: 0;
	border-top: 3px solid;
}
.page1-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.page1-left-col{
	flex-basis: 50%
}
.page1-right-col{
	flex-basis: 35%
}
.page1-links{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
#inputspg1{
background-color: #000000	;
}


/*----.textforst{
	background-color: #000000;
	color: #FFFFFF;
	margin-top: 200px;
	padding-top: 30px;
	padding-bottom: 30px;
	
	text-align: left;
	max-width: 400px;
	min-width: 400px;
	justify-content: 50%;
}---*/

.textforst {
  display: block;
  	margin-top: 200px;

  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  padding-top: 37px;
  padding-right: 46px;
  padding-bottom: 37px;
  padding-left: 58px;
  background-color: hsla(0, 3.57%, 0.00%, 0.90);
  color: hsla(0, 0.00%, 64.67%, 1.00);
}

.textforst:tiny {
  transition-property: opacity;
  transition-duration: 275ms;
  transition-timing-function: ease;
}

.River-Project{
	color: white;
	display: flex;
	align-items: center;
		flex-wrap: wrap;
	padding-top: 150px;
	padding-bottom: 50px;
	background-color: #111111;
	padding-left: 50px;
}
.content{
	color: white;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 150px;
	padding-bottom: 50px;
	background-color: #111111;
	padding-left: 50px;

}

.vidinl-row{

	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
	margin-left: -25px;
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #111111;
	padding-left: 50px;
}
.vidinl-row2{

	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
background-color: #FFF1F6;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 50px;
	padding-bottom: 50px;
}

.vidinl-left3{

	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 50px;
	padding-bottom: 50px;
background-color: #111111;
padding-left: 50px;
padding-right: 50px;

}
.vidinl-left4{
	justify-content: space-between;

	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-top: 50px;
	padding-bottom: 50px;
background-color: #111111;
padding-left: 35px;
padding-right: 35px;
}
.vidinl-left5{
background-color: #111111;
	align-items: center;
padding-left: 450px;
	object-position: center;
	padding-top: 50px;
	padding-bottom: 50px;
}

.vidinl-left6{
background-color: #111111;
padding-left: 450px;
	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
padding-top: 50px;
	padding-bottom: 50px;
}
.vidinl-left7{
background-color: #111111;
padding-left: 200px;
padding-right:200px;
	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
	
	padding-top: 50px;
	padding-bottom: 50px;
}
.vidinl-left8{
background-color: #111111;
padding-left: 200px;
padding-right:200px;
	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 50px;
	padding-bottom: 50px;


}

.vidinl-left9{


padding: 70px 5px;
margin-top: 50;

object-position: center;
}

/*----.kshapetext{
	max-width: 800px;
	text-align: left;
	margin-left: 25px;
	margin-left: 0;
	padding-bottom: 30px;
	padding-top: 30px;
	color: #FFFFFF;
	}---*/




/*---motiongraphics---*/
#motiongraphics-page{
	height: 100vh;
	background-image: url(images/backgroundprojects.png);
    background-position: center;
	background-size: cover;

}

.textformotiongraphics{
	color: #FFFFFF;
	max-width: 800px;
	text-align: left;
	margin-left: 50px;
	padding-bottom: 30px;
	padding-top: 30px;
}
.mgvidinl-left{
display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 250px;
padding-right: 250px;
	flex-wrap: wrap;

	padding-bottom: 80px;
margin-top: 130px;
background: #000000;

}
.textformotiongraphics1{
	color: #7A4988;
	max-width: 400px;
	text-align: left;
	background-color: #311432;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 0.75rem;
}
.mgvidinl-row1{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 250px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-top: 50px;
	padding-bottom: 50px;
background-color: #311432;
}
.textforstopmotion{
	color: #a0b0bb;
	max-width: 400px;
	text-align: left;
	background-color: #000000;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 0.75rem;

}
.mgvidin0stopmotion{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 480px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 0;
	margin-top: -30px;
background-color: #000000;
}
.textformotiongraphics2{
	color: #a0b0bb;
	max-width: 400px;
	text-align: left;
	background-color: #152238;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 0.75rem;
}
.mgvidinl-row2{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 480px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #152238;
}
.textformotiongraphics3{
	color: #7a7a7a;
	max-width: 400px;
	text-align: left;
	background-color: #151515;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 0.75rem;
}
.mgvidinl-row3{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 450px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #151515;
}
.textformotiongraphics4{
	color: #FF9999;
	max-width: 400px;
	text-align: left;
	background-color: #A84860;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 0.75rem;
}
.mgvidinl-row4{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 250px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #A84860;
}
.textformotiongraphics5{
	color: #D05382;
	max-width: 400px;
	text-align: left;
	background-color: #F6C0B7;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 0.75rem;
}
.mgvidinl-row5{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 320px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #F6C0B7;
}
.textformotiongraphics6{
	color: #4C7D7E;
	max-width: 400px;
	text-align: left;
	background-color: #89D5D2;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 0.75rem;
}
.mgvidinl-row6{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 450px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #89D5D2;
}
.textformotiongraphics7{
	color: #7a7a7a;
	max-width: 400px;
	text-align: left;
	background-color: #000;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 0.75rem;
}
.mgvidinl-row7{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 450px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #000;
}
.textformotiongraphics8{
	color: #7a7a7a;
	max-width: 400px;
	text-align: left;
	background-color: #111111;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 0.75rem;
}
.mgvidinl-row8{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 500px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #111111;
}
.textformotiongraphics9{
	color: #7a7a7a;
	max-width: 400px;
	text-align: left;
	background-color: #3F3F3F;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 0.75rem;
}
.mgvidinl-row9{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 50px;
padding-right: 50px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #3F3F3F;


}
.textformotiongraphics10{
	color: #7a7a7a;
	max-width: 400px;
	text-align: left;
	background-color: #000000;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 0.75rem;
}
.mgvidinl-row10{
	padding-top: 50px;
	display: flex;
	align-items: center;
justify-content: space-between;
grid-gap: 20px;
grid-row: 2;
padding-left: 150px;
padding-right: 150px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #000000;


}

.mgvidin-row11{
	padding-top: 50px;
	display: flex;
	align-items: center;
justify-content: space-between;

padding-left: 350px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #18191a	;


}





/*---type---*/
#type-page{
	height: 100vh;
	background-image: url(images/backgroundprojects.png);
    background-position: center;
	background-size: cover;
}
.type1{
	display: flex;
}
.type2{
background-color: #EE4036;
padding-left: 650px;
flex-wrap: wrap;
justify-content: space-around;
padding-top: 10px;
padding-bottom: 10px;

}
.descriptionalphabet{
	color: #FFFFFF;
	margin-top: 50px;
	z-index: 20;
	position: absolute;
	margin-left: 60px;
	font: roboto-mono;
	font-size: 0.75rem;

}
.texturetext{
color: #FFFFFF;
	padding-top: 50px;

padding-right: 703px;
	padding-left: 60px;
	max-width: 500px;
	min-width: 500px;
	font-size: 0.8rem;
	background: #2a2a2a;
}
.texturedlettersnodiss{
padding-left: 330px;
	padding-top: 100px;
	padding-bottom: 25px;
background: #2a2a2a;
}
.texturedletters{
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #2a2a2a;
padding-left: 80px;
padding-right: 80px;
}

.ninedot9text{
color: #B9DEDC;
	padding-top: 50px;

padding-right: 703px;
	padding-left: 60px;
	max-width: 500px;
	min-width: 500px;
	font-size: 0.8rem;
	background: #1D3235;
}

.ninedot9{
	padding left:980px;
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #1D3235;
}

.Calligraphy{
display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #1a1a1a;
padding-left: 80px;
padding-right: 80px;

}
.tripposters{
display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #1d1d1d;
padding-left: 80px;
padding-right: 80px;

}
/*---illustration---*/
#illustration-page{
	height: 100vh;
	/*---background-image: url(images/backgroundprojects.png);
    background-position: center;
	background-size: cover;---*/
}


.frida{
	background: #1d1d1d;
	color: white;
	padding-top: 100px;
	padding-left: 120px;
}
.kahlo{
width: 50%;
}

.poster1{
	background: #1a1a1a;
	color: white;
	padding-top: 100px;
	padding-left: 120px;
}
.pos{
width: 50%;
}


.illustrationsred{
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #000000;
padding-left: 150px;
padding-right: 150px;
}
.illustrationsangel{
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #EFDDD2;
padding-left: 150px;
padding-right: 150px;
}
.illustrationsbrushpen1{
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #DDCBAF;
padding-left: 50px;
padding-right: 25px;
}

.illustrationsforest{
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #141B15;
padding-left: 50px;
padding-right: 25px;
}
.illustrationsbrushpen2{
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #111111;
padding-left: 35px;
padding-right: 35px;
}
.illustrationsbrushpen3{
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #111111;
padding-left: 35px;
padding-right: 35px;
}
.mask{
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #032062;
padding-left: 35px;
padding-right: 35px;
}
.mononoaware{
	display: inline-block;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
background: #201713;
padding-left: 400px;
padding-right: 500px;
color: #616257;
font-size: 0.75rem;
font-weight: lighter;
}
.waterlilly{
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 60px;
justify-content: space-around;
background: #1E4C57;
padding-left: 35px;
padding-right: 35px;
}
.rings{
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #F1DBCE;
padding-left: 35px;
padding-right: 35px;
}
.lizardsinlotuses{
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #30404E;
padding-left: 450px;
padding-right: 350px;
}
.p{background: #30404E;
	padding-left: 350px;
	font-weight: lighter;
	font-size: 0.75rem;
	color: #73848C;
	max-width: 600px;
	min-width: 600px;
	padding-right: 450px;
	padding-bottom: 80px;
}

.p9dot9{
color: #E0E5C7;
	padding-top: 50px;

padding-right: 703px;
	padding-left: 60px;
	max-width: 500px;
	min-width: 500px;
	font-size: 0.8rem;
	background: #1D3235;
}

.illustninedot9{
	padding left:980px;
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #1D3235;
}


.illustninedot91{
	padding-right: :150px;
	padding-left: 20px;
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	grid-gap: 40px;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #9fa0a4;
}
.bathroom{

		background: #2b2b2b;

}
.dream{
	padding-top: 60px;
	padding-left: 300px;
	padding-bottom: 25px;
	 width: 640px;
  height: auto;
  align-items: center;
	background: #2b2b2b;
}

/*---misc---*/
#misc-page{
	height: 100vh;
	
	background: #FFFFFF;
}
.indigomacrame{
	margin-left: 650px;
	 margin-top: -300px;
}
.macrametext{
	margin-left: 750px;
	margin-top: -500px;
	max-width: 250px;
	min-width: 250px;
	font-size: 0.75rem;
}
.indigotext{
	
	font-size: 1rem;
	margin-left: 80px;
	margin-top: 200px;
	max-width: 400px;
	min-width: 400px;
	z-index: 2;
}
.shiboritext1{
	font-size: 0.75rem;
	margin-left: 400px;
	margin-top: -190px;
	max-width: 200px;
	min-width: 200px;
	
}
.shiboritext2{
	font-size: 0.75rem;
	margin-left: 750px;
	
	max-width: 300px;
	min-width: 300px;
	
}
.indigoboxes{
	margin-top: 100px;
	margin-left: 100px;
	padding-bottom: 80px;
}
.indigoboxestext{
	font-size: 0.75rem;
	max-width: 400px;
	min-width: 400px;
	margin-left: 750px;
	margin-top: -150px;
	padding-bottom: 80px;
}
.indigowallets{
	display: flex;
	flex-wrap: wrap;
	align-items: left;
	object-position: center;
	justify-content: space-around;
	margin-left: 100px;
	padding-top: 50px;
	padding-bottom: 50px;
	padding-right: 500px;
}
.indigowalletstext{
	font-size: 0.75rem;
	max-width: 200px;
	min-width: 200px;
	margin-left: 880px;
	margin-top: -100px;
	padding-bottom: 50px;
}
.beetrootdyeing{
margin-top: 80px;
	margin-left: 80px;
	padding-bottom: 50px;
}
.beetrootdyeingtext{
	font-size: 0.75rem;
	max-width: 350px;
	min-width: 350px;
	margin-left: 830px;
	margin-top: -190px;
	padding-bottom: 50px;
}
.beetrootsketch{
	margin-left: 370px;
	margin-top: 50px;
	padding-bottom: 50px;
}
.printsel{
	padding-top: 50px;
	margin-left: 170px; 
	padding-bottom: 50px;
   
}
.tabletext{
	font-size: 0.75rem;
	max-width: 600px;
    min-width: 600px;
	margin-left: 50px;
	padding-top: 30px;
}
.table{
	padding-top: 50px;
	margin-left: 50px;
}
.table1{
	margin-left: 120px;
	padding-bottom: 50px;
}
.crochettext{
	padding-top: 80px;
	font-size: 0.75rem;
	margin-left: 250px;
	max-width: 500px;
	min-width: 500px;
}
.crochet0{
	padding-top: 50px;
	margin-left: 505px;
	padding-bottom: 80px
}
.crochet{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	margin-left: 250px;
	padding-right: 250px;
	padding-bottom: 50px;
}
/*----musings--*/
#musings{
	padding:  0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.musings-img{
	flex-basis: 100%;
}

.musings-img img{
	width: 100%;
}
.musings-btn{
	
	margin-left: -36px;
	margin-top: -235px;
	
	background: transparent;
	outline: none;
	
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;

}
/*--musings-page--*/
#musings-page{
	height: 100vh;
    background-position: center;
	background-size: cover;
}
.traditionanddesign{
	color: #444444;
	font-size: 1rem;
max-width: 800px;
margin-left:100px;
margin-top: 50px;
}
.sound{
	color: #444444;
	font-size: 1rem;
max-width: 800px;
margin-left:100px;
margin-top: 100px;
}
.postmodern{
	color: #444444;
	font-size: 1rem;
max-width: 800px;
margin-left:100px;
margin-top: 100px;
}
.ondesign{
	color: #444444;
	font-size: 1rem;
max-width: 800px;
margin-left:100px;
margin-top: 100px;
}
.temporalparts{
	color: #444444;

		font-size: 1rem;
max-width: 800px;
margin-left:100px;
margin-top: 100px;
}

/*----food--*/
#food{
	padding:  0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.food-img{
	flex-basis: 100%;
}

.food-img img{
	width: 100%;
}
.food-btn{
	
	margin-left: -37px;
	margin-top: -235px;
	
	background: transparent;
	outline: none;
	
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;

}
/*--food-page--*/
#food-page{
	height: 100vh;
	background-image: url(images/backgroundprojects.png);
    background-position: center;
	background-size: cover;
}


/*----contact-----*/

#contact{
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.contact-left-col{
	flex-basis: 100%;
}

.contact-left-col img{
	width: 100%;
}
.contact-right-col{
	flex-basis: 100%;
	position: absolute;
	z-index: 2;
	margin-left: 765px;
	
}
.contact-text{
	
	max-width: 300px;
	margin-right: 50px;
	margin-top: -500px;
    display: inline-block;
	font-family: roboto;
	font-size: 10px;
	color: #FFFFFF;
	font-kerning: 20px;
}


/*--footer--*/
#footer{
	padding: 5px 0 30px;

}
hr{
	width: 100%;
	border: 0;
	border-top: 3px solid;
}
.footer-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}
.footer-left-col{
	flex-basis: 50%
}
.footer-right-col{
	flex-basis: 35%
}
.footer-links{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}


}


@media only screen and (max-width: 400px){
	#header{
background-image: url(images/boat.png);
overflow: hidden;
	
	}

.navbar {
  overflow: hidden;
 background-color: #fff; 
  position: fixed; /* Set the navbar to fixed position */
  z-index: 100;
  top: 0; /* Position the navbar at the top of the page */
  left: 0;
  width: 100%; /* Full width */
  column-span: 100%;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  width: 10%;
  text-align: center;
  padding: 14px 40px;
  padding-left: 30px;
font-family: 'DM Sans', sans-serif;
text-decoration: none; 

}

	.container{
position: relative;
z-index: 10;
}
.common-btn{
	margin-left: -50px;
	margin-top: 150px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	cursor: pointer;
	color: #FFFFFF;
	display: inline-block;
}

.common-btn1{
	margin-left: 0;
	margin-top: 15px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	cursor: pointer;
	color: #FFFFFF;
	display: inline-block;
}
.common-btn2{
	margin-left: 0;
	margin-top: 15px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	cursor: pointer;
	color: #FFFFFF;
	display: inline-block;
}
.common-btn3{
	margin-left: -50px;
	margin-top: 15px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	cursor: pointer;
	color: #FFFFFF;
	display: inline-block;
}
#menuBtn{
	width: 40px;
	right: 65px;
}
#sideNav{
	width:250px;
	height: 100vh;
	position: fixed;
	right: -750px;
	top: 0;
	background:#696969;
	z-index: 999;
	transition: 0.5s;
	
}
.projects-btn{
	
	margin-left: -500px;
	margin-top: -138px;
	
	background: transparent;
	outline: none;
	
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 10;
	cursor: pointer;

}
.musings-btn{
	
	margin-left: 195px;
	margin-top: -135px;
	
	background: transparent;
	outline: none;
	
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;

}
.food-btn{
	
	margin-left: 195px;
	margin-top: -135px;
	
	background: transparent;
	outline: none;
	
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;

}
.contact-right-col{
	flex-basis: 20%;
	
margin-top: 20px;
	margin-left: 240px;
	
}
.contact-text{
	
	max-width: 50px;
	margin-right: 50px;
    display: inline-block;
	font-family: roboto;
	font-size: 5px;
	color: #FFFFFF;
	font-kerning: 20px;
}
/*---projects---*/
#projects-page{
	height: 100vh;
	background-image: url(images/bgslow.gif);
    background-position: center;
	background-size: cover;
	overflow: hidden;
}
.common-btn4{
	margin-left: 70px;
	margin-top: -600px;
	padding: 12px 20px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.common-btn5{
	margin-left: 70px;
	margin-top: -600px;
	padding: 12px 20px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.common-btn6{
	margin-left: 70px;
	margin-top: -600px;
	padding: 12px 20px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.common-btn7{
	margin-left: 70px;
	margin-top: -600px;
	padding: 12px 20px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.common-btn8{
	margin-left: 70px;
	margin-top: -600px;
	padding: 12px 20px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.textforst{
	background-color: #000000;
	color: #FFFFFF;
	margin-top: 170px;
	padding-top: 80px;
	padding-bottom: 30px;
	padding-right: 900px;
	padding-left: 20px;
	text-align: left;
	max-width: 300px;
	min-width: 300px;
	justify-content: flex-start;
}

.vidinl-row{

	display: flex;
	align-items: center;
justify-content: flex-start;
	flex-wrap: wrap;
	margin-left: -55px;
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #111111;
	padding-left: 50px;
}
.vidinl-row2{

	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
background-color: #FFF1F6;
	padding-left: 46px;
	margin-left: -18px;
	padding-top: 50px;
	padding-bottom: 50px;
}

.vidinl-row3{

	display: flex;
	align-items: center;
	justify-content: flex-start;
margin-left: -50px;
flex-wrap: wrap;
	padding-top: 5px;
	padding-bottom: 5px;
background-color: #111111;
padding-left: 0;



}
.vidinl-left4{

	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
margin-top: -100px;
	flex-wrap: wrap;
	padding-top: 5px;
	padding-bottom: 5px;
background-color: #111111;
margin-left: 0;
padding-left: 15px;

}
.vidinl-row5{
flex: 70%;
	object-position: center;
	margin-left: 300px;
	padding-top: 50px;
	padding-bottom: 5px;
	margin-left: 20px;
}

.vidinl-row6{

	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
	margin-left: -20px;
padding-top: 5px;
	padding-left: 20px;
	margin-top: -30px;

}
.vidinl-row7{

	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
	margin-left: 0;
	padding-top: 50px;
	padding-bottom: 5px;
margin-top: 5px;
}
.vidinl-row8{

	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 50px;
	padding-bottom: 50px;
margin-top: 200px;}
.vidoes{
	margin-left: 0;
}
.kshapetext{
color: #FFFFFF;
	max-width: 300px;
	min-width: 300px;
	text-align: left;
	margin-left: 20px;
	padding-bottom: -30px;
	padding-top: 30px;}
/*---motion graphics---*/
#motiongraphics-page{
	overflow: hidden;
}
.textformotiongraphics{
	flex;
	color: #FFFFFF;
	max-width: 300px;
	min-width: 300px;
	text-align: left;
	margin-left: 20px;
	
	padding-bottom: -30px;
	padding-top: 30px;
}
.mgvidinl-left{
display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 30px;
padding-right: 250px;


	flex-wrap: wrap;
	padding-top: 5px;
	


}
.textformotiongraphics1{
	flex;
	color: #7A4988;
max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #311432;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row1{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 28px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-top: 50px;
	padding-bottom: 50px;
background-color: #311432;
}
.textformotiongraphics2{
	color: #a0b0bb;
max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #152238;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row2{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 53px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 30px;
	padding-top: 20px;
background-color: #152238;
}
.textformotiongraphics3{
	color: #7a7a7a;
	max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #151515;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row3{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 28px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #151515;
}
.textformotiongraphics4{
	color: #FF9999;
	max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #A84860;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row4{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 28px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 30px;
	padding-top: 30px;
background-color: #A84860;
}
.textformotiongraphics5{
	color: #D05382;
	max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #F6C0B7;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row5{
	display: flex;
	align-items: center;
justify-content: space-between;
margin-left: -60px;
padding-left: 0;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #F6C0B7;
}
.textformotiongraphics6{
	color: #4C7D7E;
max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #89D5D2;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row6{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 28px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #89D5D2;
}
.textformotiongraphics7{
	color: #7a7a7a;
max-width: 250px;
	min-width: 250px;
		text-align: left;
	background-color: #000;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row7{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 30px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #000;
}
.textformotiongraphics8{
	color: #7a7a7a;
max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #111111;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row8{
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 28px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #111111;
}
.textformotiongraphics9{
	color: #7a7a7a;
	max-width: 60px;
	text-align: left;
	background-color: #3F3F3F;
padding-right: 900px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 0.75rem;
}
.mgvidinl-row9{
		flex-basis: 30%;
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 50px;
padding-right: 50px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #3F3F3F;


}




.textformotiongraphics10{
	color: #7a7a7a;
max-width: 60px;
	min-width: 60px;
	text-align: left;
	background-color: #111111;
padding-right: 90px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row10{
	flex-basis: 30%;
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 28px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #111111;
}

/*--type--*/
#type-page{
	display: flex 20%;
	height: 100vh;
	background-image: url(images/backgroundprojects.png);
    background-position: center;
	background-size: cover;
	background: #000000;
	padding-right: 1200px;
	overflow: hidden;
}
.type2{
	display: flex 2%;
background-color: #EE4036;
padding-left: 0;
align-items: left;
flex-wrap: wrap;
justify-content: space-around;
padding-top: 10px;
padding-bottom: 10px;

}
.descriptionalphabet{
	color: #FFFFFF;
	margin-top: 0;
	z-index: 20;
	max-width: 30px;
	min-width: 30px;
	margin-left: 0px;
	font: roboto-mono;
	font-size: 3rem;

}
.texturedlettersnodiss{
padding-left: 10px;
	padding-top: 70px;
	padding-bottom: 25px;
background: #2a2a2a;
}
.texturedletters{
	display: flex 50%;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #2a2a2a;
padding-left: 80px;
padding-right: 80px;
}
.Calligraphy{
display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #1a1a1a;
padding-left: 80px;
padding-right: 80px;

}




/*--MUSINGS--*/
.ondesign{
	font-size: 1rem;
max-width: 800px;
margin-left:20px;
margin-right: 20PX
margin-top: 50px;
}
.temporalparts{
		font-size: 1rem;
max-width: 800px;
margin-left:20px;
margin-right:30px;
margin-top: 50px;
}


	
}
@media only screen and (max-width: 800px){
	#landing-page{
		overflow-x: hidden;
	}
	#header{
		overflow: hidden;
		height: 100vh;
background-image: url(images/boat.png);
overflow: hidden;
	
	}
	.container{
	

position: relative;
z-index: 10;
}
#contact{
	overflow: hidden;
}
#projects{
	overflow: hidden;
}
#musings{
	overflow: hidden;
}
#about{
	overflow: hidden;
}

.about-left-col{
	overflow: hidden;
}
.projects-img{
	overflow: hidden;


}
.musings-img{
	overflow: hidden;

}
.contact-left-col{
	overflow: hidden;
}
.contact-right-col{
overflow: hidden;
}
.container footer-row{
		overflow: hidden;
		background: white;


}

.common-btn{
	margin-left: 80px;
	margin-top: 100px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	cursor: pointer;
	color: #FFFFFF;
	display: inline-block;
}

.common-btn1{
	margin-left: 80px;
	margin-top: 15px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	cursor: pointer;
	color: #FFFFFF;
	display: inline-block;
}
.common-btn2{
	margin-left: 80px;
	margin-top: 15px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	cursor: pointer;
	color: #FFFFFF;
	display: inline-block;
}
.common-btn3{
	margin-left: 80px;
	margin-top: 15px;
	padding: 12px 40px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	cursor: pointer;
	color: #FFFFFF;
	display: inline-block;
}
#menuBtn{
	position: fixed;
	width: 40px;
	margin-top: 60px;
	margin-left: 700px;
}
#sideNav{
	width:250px;
	height: 100vh;
	position: fixed;
	right: -750px;
	top: 0;
	background:#696969;
	z-index: 999;
	transition: 0.5s;
	
}
.projects-btn{
	
	margin-left: 0px;
	margin-top: -0;
	
	background: transparent;
	outline: none;
	
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;

}
.musings-btn{
	
	margin-left: 0;
	margin-top: -0;
	
	background: transparent;
	outline: none;
	
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;

}
.food-btn{
	
	margin-left: 0;
	margin-top: 0;
	
	background: transparent;
	outline: none;
	
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;

}
.about-left-col{
	flex-basis: 100%;
}
.about-right-col{
	flex-basis: 20%;
	
margin-top: 10px;
	margin-left: 155px;
	font-weight: lighter;
}
.about-text{
	
		margin-left: 70px;
	max-width: 80px;
	margin-right: 80px;
    display: inline-block;
		font-size: 0.0105rem;
	color: #FFFFFF;
	font-kerning: 20px;
}
.contact-right-col{
	flex-basis: 20%;
	
margin-top: 80px;
	margin-left: 65px;
	
}
.contact-text{
	margin-left: 160px;
	max-width: 50px;
	margin-right: 50px;
    display: inline-block;
	font-family: roboto;
	font-size: 0.5rem;
	color: #FFFFFF;
	font-kerning: 20px;
}
/*---projects---*/
#projects-page{
	height: 100vh;
	background-image: url(images/bgslow.gif);
    background-position: -140px bottom ;
overflow: hidden;
	background-size: cover;
}
.common-btn4{
	margin-left: 70px;
	margin-top: -700px;
	padding: 12px 20px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.common-btn5{
	margin-left: 70px;
	margin-top: -700px;
	padding: 12px 20px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.common-btn6{
	margin-left: 70px;
	margin-top: -700px;
	padding: 12px 20px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.common-btn7{
	margin-left: 70px;
	margin-top: -700px;
	padding: 12px 20px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
.common-btn8{
	margin-left: 70px;
	margin-top: -700px;
	padding: 12px 20px;
	background: transparent;
	outline: none;
	border: 1px solid #FFFFFF;
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	z-index: 2;
	cursor: pointer;
}
#processing-page{
	overflow: hidden;
}
.processinge{
	overflow: hidden;
}
.textforst{
	overflow: hidden;
	background-color: #000000;
	color: #FFFFFF;
	margin-top: 170px;
	padding-top: 80px;
	padding-bottom: 30px;
	padding-right: ;
	padding-left: 20px;
	text-align: left;
	max-width: 300px;
	min-width: 300px;
	justify-content: flex-start;
}

.vidinl-row{
	overflow: hidden;

	display: flex;
	align-items: center;
justify-content: flex-start;
	flex-wrap: wrap;
	margin-left: -55px;
	padding-top: 50px;
	padding-bottom: 50px;
	background-color: #111111;
	padding-left: 70px;
	padding-right:70px;
}

.vidinl-row2{
	overflow: hidden;

	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
background-color: #FFF1F6;
	padding-left: 70px;
	margin-left: -18px;
	padding-top: 50px;
	padding-bottom: 50px;
}

.vidinl-row3{
overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-start;
margin-left: -50px;
flex-wrap: wrap;
	padding-top: 5px;
	padding-bottom: 5px;
background-color: #111111;
padding-left: 0;



}
.vidinl-left4{
	overflow: hidden;

	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
	flex-wrap: wrap;
	padding-top: 5px;
	padding-bottom: 5px;
background-color: #111111;
margin-left: -50px;
padding-left: 15px;

}
.vidinl-row5{
overflow: hidden;
margin-left: -460px;
margin-top: -100px;
	padding-top: 50px;
	padding-bottom: 5px;
}

.vidinl-row6{
overflow: hidden;
	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
	margin-left: -20px;
padding-top: 5px;

}
.vidinl-row7{
overflow: hidden;
	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
	margin-left: 260px;
	padding-top: 50px;
	padding-bottom: 5px;
margin-top: 5px;
}
.vidinl-row8{
overflow: hidden;
	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 5px;
	padding-bottom: 50px;
margin-top: 0px;}

.vidinl-row9{
overflow: hidden;
margin-left: 450px;
	display: flex;
	align-items: center;
justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 0px;
	padding-bottom: 50px;
margin-top: 0px;}

.vidoes{
	margin-left: 0;
}
.kshapetext{
color: #FFFFFF;
	max-width: 300px;
	min-width: 300px;
	text-align: left;
	margin-left: 20px;
	padding-bottom: -30px;
	padding-top: 30px;}
/*---motion graphics---*/
#motiongraphics-page{
	overflow-x: hidden;
}
.textformotiongraphics{
	overflow: hidden;
	flex;
	color: #FFFFFF;
	max-width: 300px;
	min-width: 300px;
	text-align: left;
	margin-left: 20px;
	
	padding-bottom: -30px;
	padding-top: 30px;
}
.mgvidinl-left{
	overflow: hidden;
display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 30px;
padding-right: 250px;


	flex-wrap: wrap;
	padding-top: 5px;
	


}
.textformotiongraphics1{
		overflow: hidden;

	flex;
	color: #7A4988;
max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #311432;
padding-right: 90px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row1{
		overflow: hidden;

	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 28px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-top: 50px;
	padding-bottom: 50px;
background-color: #311432;
}

.textforstopmotion{
		overflow: hidden;

		color: #a0b0bb;
max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #000000;
padding-right: 90px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidin0stopmotion{
		overflow: hidden;

		display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 8px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-top: 0;
	padding-bottom: 0;
background-color: #000000;
}
.textformotiongraphics2{
		overflow: hidden;

	color: #a0b0bb;
max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #152238;
padding-right: 90px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row2{
		overflow: hidden;

	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 53px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 30px;
	padding-top: 20px;
background-color: #152238;
}
.textformotiongraphics3{
		overflow: hidden;

	color: #7a7a7a;
	max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #151515;
padding-right: 90px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row3{
		overflow: hidden;

	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 28px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #151515;
}
.textformotiongraphics4{
		overflow: hidden;

	color: #FF9999;
	max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #A84860;
padding-right: 90px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row4{
		overflow: hidden;

	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 28px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 30px;
	padding-top: 30px;
background-color: #A84860;
}
.textformotiongraphics5{
		overflow: hidden;

	color: #D05382;
	max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #F6C0B7;
padding-right: 90px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row5{
		overflow: hidden;

	display: flex;
	align-items: center;
justify-content: space-between;
margin-left: -60px;
padding-left: 0;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #F6C0B7;
}
.textformotiongraphics6{
		overflow: hidden;

	color: #4C7D7E;
max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #89D5D2;
padding-right: 90px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row6{
		overflow: hidden;

	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 28px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #89D5D2;
}
.textformotiongraphics7{
		overflow: hidden;

	color: #7a7a7a;
max-width: 250px;
	min-width: 250px;
		text-align: left;
	background-color: #000;
padding-right: 90px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row7{
		overflow: hidden;

	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 30px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #000;
}
.textformotiongraphics8{
		overflow: hidden;

	color: #7a7a7a;
max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #111111;
padding-right: 90px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row8{
		overflow: hidden;

	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 28px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #111111;
}
.textformotiongraphics9{
		overflow: hidden;

		color: #7a7a7a;
max-width: 250px;
	min-width: 250px;
	text-align: left;
	background-color: #3F3F3F;
padding-right: 90px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row9{
		overflow: hidden;

	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 3px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #3f3f3f;
}
.textformotiongraphics10{
	overflow: hidden;
	color: #7a7a7a;
max-width: 60px;
	min-width: 180px;
	text-align: left;
	background-color: #111111;
padding-right: 90px;
padding-left: 50PX;
padding-bottom: 30px;
	padding-top: 30px;
	font-size: 12PX;
}
.mgvidinl-row10{
	overflow: hidden;
	flex-basis: 30%;
	display: flex;
	align-items: center;
justify-content: space-between;
padding-left: 0px;
padding-right: 250px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #111111;
}

.mgvidin-row11{
	overflow: hidden;	
	overflow: hidden;
	padding-top: 50px;
	display: flex;
	align-items: center;
justify-content: space-between;

padding-left: 30px;
padding-right: 40px;
	flex-wrap: wrap;
	padding-bottom: 50px;
background-color: #18191a	;


}

/*--type--*/
#type-page{
	overflow-x:  hidden;
}
.type1{
	overflow: hidden;
}
.type2{
	overflow: hidden;
background-color: #EE4036;
padding-left: 50px;
flex-wrap: wrap;
justify-content: space-around;
padding-top: 30px;
padding-bottom: 10px;

}
.descriptionalphabet{
		overflow: hidden;

	color: #FFFFFF;
	margin-top:-60px;
	z-index: 20;
	position: relative;
	margin-left: 60px;
	font: roboto-mono;
	font-size: 0.75rem;
	min-width: 220px;
	max-width: 220px;

}
.texturetext{
		overflow: hidden;

color: #FFFFFF;
	padding-top: 50px;

padding-right: 70px;
	padding-left: 60px;
	max-width: 220px;
	min-width: 220px;
	font-size: 0.8rem;
	background: #2a2a2a;
}
.texturedlettersnodiss{
		overflow: hidden;

padding-left: 15px;
	padding-top: 100px;
	padding-bottom: 25px;
background: #2a2a2a;
}
.texturedletters{
		overflow: hidden;

	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #2a2a2a;
padding-left: 70px;
padding-right: 80px;
margin-left: -8px;
}

.ninedot9text{
	overflow: hidden;
color: #B9DEDC;
	padding-top: 50px;

padding-right: 70px;
	padding-left: 60px;
	max-width: 150px;
	min-width:150px;
	font-size: 0.8rem;
	background: #1D3235;
}
.ninedot9{
		overflow: hidden;

	flex: 20%;
	padding-left: 2px;
	
	padding-top: 60px;
	padding-bottom: 25px;
background: #1D3235;
}
/*---illustration--*/
#illustration-page{
	overflow-x: hidden;
}
.illustpro{

	overflow: hidden;
	display: flex;
	
}


.illustrationsred{
		overflow: hidden;

	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #000000;
padding-left: 150px;
padding-right: 150px;
}
.illustrationsangel{
		overflow: hidden;

	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #EFDDD2;
padding-left: 150px;
padding-right: 150px;
}
.illustrationsbrushpen1{
		overflow: hidden;

	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #DDCBAF;
padding-left: 50px;
padding-right: 25px;
}

.illustrationsforest{
		overflow: hidden;

	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #141B15;
padding-left: 50px;
padding-right: 25px;
}
.illustrationsbrushpen2{
		overflow: hidden;

	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #111111;
padding-left: 35px;
padding-right: 35px;
}
.illustrationsbrushpen3{
		overflow: hidden;

	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #111111;
padding-left: 35px;
padding-right: 35px;
}
.mask{
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #032062;
padding-left: 35px;
padding-right: 35px;
}
.mononoaware{
		overflow: hidden;

	flex-basis: 20%;
	display: inline-block;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
background: #201713;
padding-left: 0px;
padding-right: 0px;
color: #616257;
font-size: 0.75rem;
font-weight: lighter;
}
.waterlilly{
		overflow: hidden;

	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 60px;
justify-content: space-around;
background: #1E4C57;
padding-left: 35px;
padding-right: 35px;
}
.rings{
		overflow: hidden;

	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #F1DBCE;
padding-left: 35px;
padding-right: 35px;
}
.lizardsinlotuses{
		overflow: hidden;

	display: flex;
	flex-wrap: wrap;
	object-position: center;
	padding-top: 60px;
	padding-bottom: 25px;
justify-content: space-around;
background: #30404E;
padding-left: 0px;
padding-right: 0px;
}
.p{
	overflow: hidden;

	background: #30404E;
	padding-left: 25px;
	font-weight: lighter;
	font-size: 0.75rem;
	color: #73848C;
	max-width: 350px;
	min-width: 350px;
	padding-right: 23px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.p9dot9{
		overflow: hidden;
color: #E0E5C7;
	padding-top: 50px;
padding-right: 70px;
padding-bottom: 20px;
	padding-left: 25px;
	max-width: 300px;
	min-width: 300px;
	font-size: 0.8rem;
	background: #1D3235;
}

.ninedot9{
	overflow: hidden;
	padding left:98px;
	display: flex;
	flex-wrap: wrap;
	object-position: center;
	
	padding-top: 30px;
	padding-bottom: 25px;
justify-content: space-around;
background: #1D3235;
}
.bathroom{
	overflow-x:  hidden;
	background: #2b2b2b;
	padding-left: 0;
	padding-right: 0;

}
.dream{
	width: 100%;
	padding-top: 60px;
	padding-bottom: 25px;
	padding-left: 0;
padding-right: 0;
	background: #2b2b2b;
}

/*---misc--*/
.indigopg{
	flex-basis: 10%;
}
/*--MUSINGS--*/
.ondesign{
	font-size: 1rem;
max-width: 800px;
margin-left:30px;
margin-right: 40px;
margin-top: 50px;
}
.temporalparts{
		font-size: 1rem;
max-width: 800px;
margin-left:30px;
margin-right:40px;
margin-top: 50px;
}
.traditionanddesign{
	color: #444444;
	font-size: 1rem;
max-width: 800px;
margin-left:30px;
margin-right: 40px;
margin-top: 50px;
}
.sound{
	color: #444444;
	font-size: 1rem;
max-width: 800px;
margin-left:30px;
margin-right: 40px;
margin-top: 100px;
}
.postmodern{
	color: #444444;
	font-size: 1rem;
max-width: 800px;
margin-left:30px;
margin-right: 40px;
margin-top: 100px;
}


	
}