.project-img{margin: 0 auto;}

.top-closed{
	background-color: rgba(255,255,255,.3);
}

.content{position: absolute;
	padding-right: 20px;
	display: inline-block;}

.work-content{position: absolute;
	padding-right: 20px;
	display: inline-block;}	

img{width: 100%;}

#big-type a{
	font-family: 'Roboto', sans-serif;
	font-size: 20px;
	line-height: 22px;
	font-weight: 500;}

.animated{
	font-family: 'Roboto', sans-serif;
	opacity: .5;
	font-size: 18px;
	padding-top: 0px;}

.my-logo{
	display: inline-block;
	float: left;}

.row{
	margin: 0 auto;
	margin-bottom: 20px;}

a{
	color: RGB(0,0,0);
	opacity: 1;
}

.space-active:hover,.desktop:hover,.prev:hover,.next:hover{
	color: RGB(0,0,0);
	opacity: .5;
}

#basic{
	margin-top: 131.5px;}

.navigation{
	display: inline-block;
	z-index: 1000;
	float: right;}

.desktop-nav{
	float: left;
}

.up-button{
	display: inline-block;
	float: right;
	font-size: 40px;
	opacity: 1;
	}	

.next{
	display: inline-block;
	float: right;
	font-size: 18px;
  	font-family: 'Roboto', sans-serif;
  	opacity: 1;
  	font-weight: 400;
}
.prev{
	display: inline-block;
	float: left;
	font-size: 18px;
  	font-family: 'Roboto', sans-serif;
  	opacity: 1;
  	font-weight: 400;
}

.prev,.next{display: block;}

.row-img{
  width: 100%;
  max-width: 70.063em;
  margin: 0 auto;
  padding: 0 10px;
}

#img-right{
	padding-right: 10px;
	padding-left: 0px;
}

#img-left{
	padding-right: 0px;
	padding-left: 10px;
}

.desktop-nav,.desktop-nav-end{
	display: inline-block;
	font-size: 18px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}

.title{
	font-size: 22px;
	font-family: 'Roboto', sans-serif;
	line-height: 24px;
	font-weight: 500;}		

.text,.sub-text{
	font-size: 12px;
	line-height: 1.6;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;}

#category{	
	line-height: 24px;
	margin-bottom: 14px;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;}

/*.bio-text{font-size: 15px;}*/

a:hover{color:RGB(0,0,0);}

.thumb-img{
	opacity: 1;
}

.copyright{
	position: fixed;
	float: right;
	top: 400px;
    right: 0px;
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg);}

.img-space{
	margin-bottom: 20px;
}

.gone{opacity: 0;}

.gone:hover{opacity: 0;}


/* mobile */
@media only screen{

#bottom{
	padding-left: 15px;
    padding-right: 15px;
}

#bottom-scroll{
	position: fixed;
    z-index: 999;
    bottom: 80px;
    right: 0px;
    margin-right: 35px;
}

	.animated-push {
    	margin-left: 43px;}

	.thumbnail{
		opacity: 1;
		color: white;
		background-color: rgba(0,0,0,.3);
		box-sizing: border-box;
		margin: 0px;
		padding: 0px;
		width: 100%;
		height: 100%;}

	.content{
		margin: 0px;
		padding: 20px;
		top: auto;
		bottom: 0px;
		width: 100%;
		max-height: 42%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 60%);}

	.work-content{
		margin: 0px;
		padding: 20px;
		top: auto;
		bottom: 0px;
		width: 100%;
		max-height: 32%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 60%);}	

	#resume-page{
		padding-top: 136px;
		height: 100%;
		width: 100%;}

	.up-button{ 
		display: block;}

	.work-description{
		margin-bottom: 25px;
		margin-top: 50px;
		position: relative;}

	.animated-push{
		margin-left: 43px;}

	.block{
		width:25px;
		height:4px;
		margin-bottom: 4px;
		background-color: RGBA(0,0,0,1);
	}

	.block-open{
		width:25px;
		height:4px;
		margin-bottom: 4px;
		background-color: RGBA(0,0,0,.5);
	}
	.small-navigation{
		display: block;
		right: 0px;
		position: fixed;
		z-index: 1000;
		top:34px;
		margin-right: 35px;}	

	#small-menu-list a{
		font-family: 'Roboto', sans-serif;
		font-weight: 400;
		color: black;
		font-size: 18px;}

	.small-top{
		height: 26px;
		margin-bottom: 25px;}

	.my-logo {
		padding-left: 21px;}

	.space{
		margin-bottom: -26px;
		width:100%;}

	.space-active{
		margin-top: 20px;
		width:100%;}

	.small-menu{
		position: fixed;
		top:32px;
		height:50px;
		opacity: 0;
		display: none;}

	.small-menu-open{
		position: fixed;
		top:50px;
		height:50px;
		z-index: 1000;
		opacity: 1;
		display: block;}

	#small-menu-list{
		list-style: none;}

	#target{
		line-height: 24px;}

	ul{
		margin-left: 0px;
		padding-left: 20px;}

	.top{
		padding-left: 0px;}

	.row{
		margin: 0 auto;
		margin-bottom: 20px;}

	.row-end{
		margin-bottom: 26px;
		margin-top: 10px;}

	.bottom{
	margin-bottom: 20px;}			
	
	body{
		margin: 0px;}

	.up-shift{
  		margin-top: 0px;}

  	.animated{
		opacity: .5;
		font-family: 'Roboto', sans-serif;
  		font-size: 18px;
		padding-top: 3px;
		padding-left: 19px; 
		line-height: 20px;
		display: block;}

	.animated-open {
		opacity: 0;
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		padding-top: 3px;
		padding-left: 20px; 
		line-height: 20px;
		display: none;}	

	.title{
		margin-bottom: 14px;}

	#category {
  		margin-bottom: 14px;}		

	.my-logo img{
  		width: 140px;}

  	.end-image{
  		position: absolute;
  		width: 98%;}
  	
  	.mobile-top{
  		margin-top: 45px;}

  	.mobile{
  		margin-top: 10px;
  	}	

  	#work{
  		padding-left: 15px;
  		padding-right: 15px;
  		padding-top: 7em;}

  	#top{
  		top: 0px;
		width: 100%;
  		padding-top: 30px;
  		position: fixed;
  		z-index: 999;
  		padding-right: 15px;
  		padding-left: 15px;}

  	.top-height,.top-port{height: 136px;}

	.shorten{
		height: 70px;
	}	

  	.copyright{
  		right:-50px;
  		top:300px;
  		z-index: 1000;
  		font-size: 12px;}

	.thumb-img, {
		width: 100%;}

	.tags{
		font-family: 'Roboto', sans-serif;
		margin-top: 8px;
		font-size: 12px;
		line-height: 14px;
		font-weight: 400;}

	.desktop-nav-end,.desktop-nav{
		display:none;}

	.top-open{
		background-color: RGBA(255,255,255, .9);
		padding-bottom: 250px;
		padding-left: 10px;}

	.cover-space{
		padding-left: 0px;
		padding-right: 0px;}

	.thumb-img{
		display: block;}

	.white-hover:hover{
		color: white;}

	.img-mobile{
  		margin-top: 50px;}

	.my-logo img{
		width: 140px;
		padding-left: 0px;}

	.cover-canvas{
		padding: 0px 20px;}

	#big-type a {
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		line-height: 20px;
		font-weight: 500;}

	.cover-space img, .white-pix img{
		border: .5px solid rgba(50,50,50,.1);
		box-shadow: 1px 1px 5px rgba(0,0,0,.1);}

	.column-mobile{
		margin-bottom: 0px;
		padding: 0px;}

	.blank-space{
		padding-bottom: 6px;}
		
	.mobile-cover-canvas{
		padding: 0px 20px;}

	.img-space{
	margin-bottom: 10px;}

	p{margin-bottom: 10px;}

	#top-category{ margin-top: 0px; }

	#category-space{
		line-height: 1.6;
		margin-bottom: 0px;
		font-size: 12px;
		font-family: 'Roboto', sans-serif;
		font-weight: 500;}

	#sub-text-space{
		line-height: 1.6;
		margin-bottom: 10px;
		font-size: 12px;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;}

	#img-middle-right{
		padding-right: 5px;}

	#img-middle-left{
		padding-left: 5px;}		
								
	#img-middle{
		padding: 0 5px;
	}

	.cover-canvas-mobile{padding: 0px 15px;}	
				
}


/* large mobile */
@media only screen and (min-width: 41.063em){

#bottom{
	padding-left: 2.875em;
    padding-right: 2.875em;
}

#bottom-scroll{
	position: fixed;
    z-index: 999;
    bottom: 90px;
    margin-right: 3.2em;
}

	.animated-push {
    	margin-left: 43px;}

	ul{
		margin-left: 0px;
		padding-left: 0px;}		

	.thumbnail{
		opacity: 1;
		color: white;
		background-color: rgba(0,0,0,.3);
		box-sizing: border-box;
		margin: 0px;
		padding: 0px;
		width: 100%;
		height: 100%;}

	.content{
		margin: 0px;
		padding: 10px;
		top: auto;
		bottom: 0px;
		width: 100%;
		max-height: 42%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 60%);}


	.work-content{
		margin: 0px;
		padding: 10px;
		top: auto;
		bottom: 0px;
		width: 100%;
		max-height: 60%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 60%);}	

	.row{
		margin: 0 auto;
		margin-bottom: 20px;
		padding-bottom: 0px;}	

	#resume-page{
		padding-top: 100px;
		height: 100%;
		width: 100%;}

	.up-button{ 
		display: block;}

	.img-mobile{
  		margin-top: 0px;}

	.work-description{
		margin-top: 0px;
		margin-bottom: 0px;
		position: relative;}

	.animated-push{
		margin-left: 36px;}	

	.white-hover:hover{
		color: white;}
	
	.thumb-img{
		display: block;}

  	.copyright{
  		right:-30px;
  		top:350px;
  		z-index: 1000;
  		font-size: 11px;}

	.small-navigation{
		display: block;
		margin-right: 3.2em;}	

	.desktop-nav-end,.desktop-nav{
		display:none;}

	.my-logo img{
		width:140px;
		padding-left: 0px;}

	.my-logo{
		padding-left: 0px;}
		
	.top{
		width: 100%;
		height: 100px;
		padding-left: 0px;
		padding-right: 0px;}

	#big-type a {
		font-family: 'Roboto', sans-serif;
		font-size: 15px;
		line-height: 17px;
		font-weight: 500;}

	.cover-space{
		padding-left: 0px;
		padding-right: 0px;}

	.animated{ opacity: .5;
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		padding-right: 0px;
		padding-left: 4px;
		line-height: 20px;
		margin-left: 0px;
		padding-top: 3px;
		display: block;}

	.animated-open {
		opacity: 0;
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		margin-top: 0px;
		padding-right: 0px;
		padding-left: 4px;
		line-height: 20px;
		padding-top: 3px;
		display: none;}

  	.mobile{
  		margin-top: 0px;}

  	.mobile-top{
  		margin-top: 0px;}	

  	#work{
  		padding-left: 2.875em;
  		padding-right: 2.875em;
  		margin-top: 0em;
  		padding-top: 7em;}

  	#top{
  		width: 100%;
  		position: fixed;
  		padding-left: 51px;
  		padding-right: 51px;
  		z-index: 999;}

  	.top-height,.top-port{height: 100px;}

	.shorten{
		height: 60px;
	}		

  	.jazz{
  	  	z-index: 999;}

  	.copyright{
  		right: -45px;
  		font-size: 10.75px;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;}

	.thumb-img{
		width: 100%;}

	.tags{
		font-family: 'Roboto', sans-serif;
		margin-top: 6px;
		font-size: 11px;
		line-height: 13px;
		font-weight: 400;}

	.desktop-nav{
		margin-right: 0em;}

	.title{
		margin-bottom: 14px;}

	#category {
    margin-bottom: 14px;}			
	

	#target {
		line-height: 20px;}

	.cover-canvas{
		padding: 0px;}

	.cover-space img, .white-pix img{
		border: 0px;
		box-shadow: 1px 1px 5px rgba(0,0,0,.1);}

	.blank-space{
		padding-bottom: 6px;}

	#img-middle{
		padding: 0px 5px;}	

	#img-middle-right{
		padding-right: 5px;}

	#img-middle-left{
		padding-left: 5px;}		

	.cover-canvas{
		padding: 0 5px;}	

	.row-end{
		margin-bottom: 30px;
		margin-top: 0px;}

	.bottom{
		margin-bottom: 20px;}			

	.mobile-cover-canvas{
		padding: 0px;}

	.img-space{
	margin-bottom: 10px;}

	p{margin-bottom: 10px;}

	.block{
		width:25px;
		height:3px;
		margin-bottom: 4px;
		background-color: RGBA(0,0,0,1);}

	.block-open{
		width:25px;
		height:3px;
		margin-bottom: 4px;
		background-color: RGBA(0,0,0,.5);}

	#top-category{margin-top: 21px;}

	#sub-text-space{
		margin-bottom: 17.6px;}

	.cover-canvas-mobile{padding: 0px;}										
									
}


/* small ipad */
@media only screen and (min-width: 48em){

	#bottom{
		padding-left: 2.875em;
    	padding-right: 2.875em;
	}

	#bottom-scroll{
		position: fixed;
    	z-index: 999;
    	bottom: 80px;
    	margin-right: 3.5em;
	}

	ul{
		margin-left: 0px;
		padding-left: 0px;}		

	.thumbnail{
		opacity: 1;
		color: white;
		background-color: rgba(0,0,0,.3);
		box-sizing: border-box;
		margin: 0px;
		padding: 0px;
		width: 100%;
		height: 100%;}

	.content{
		margin: 0px;
		padding: 16px;
		top: auto;
		bottom: 0px;
		width: 100%;
		max-height: 32%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 60%);}

	.work-content{
		margin: 0px;
		padding: 20px 16px 16px 16px;
		top: auto;
		bottom: 0px;
		width: 100%;
		max-height: 48%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 60%);}	

	.row{
		margin: 0 auto;
		margin-bottom: 20px;
		padding-bottom: 0px;}	

	#resume-page{
		padding-top: 105px;
		height: 100%;
		width: 100%;}

	.up-button{ 
		display: block;}		

	.img-mobile{
  		margin-top: 0px;}

	.work-description{
		margin-top: 0px;
		margin-bottom: 0px;
		position: relative;}

	.animated-push{
		margin-left: 36px;}	

	.white-hover:hover{
		color: white;}
	
	.thumb-img{
		display: block;}

  	.copyright{
  		right:-30px;
  		top:350px;
  		z-index: 1000;
  		font-size: 11px;}

	.small-navigation{
		display: block;
		margin-right: 3.5em;}	

	.desktop-nav-end,.desktop-nav{
		display:none;}

	.my-logo img{
  		width: 140px;}

	.top{
		width: 100%;
		height: 100px;
		padding-left: 0px;
		padding-right: 0px;}

	#big-type a {
		font-family: 'Roboto', sans-serif;
		font-size: 16px;
		line-height: 18px;
		font-weight: 500;}

	.cover-space{
		padding-left: 0px;
		padding-right: 0px;}

  	.mobile{
  		margin-top: 0px;}

  	.mobile-top{
  		margin-top: 0px;}	

  	#work{
  		padding-left: 2.875em;
  		padding-right: 2.875em;
  		margin-top: 0em;
  		padding-top: 7.4em;}

  	#top{
  		width: 100%;
  		position: fixed;
  		padding-left: 3.5em;
  		padding-right: 3.5em;
  		z-index: 999;}

	.top-height,.top-port{height: 105px;}

	.shorten{
		height: 60px;
	}		

  	.jazz{
  	  	z-index: 999;}

  	.copyright{
  		right: -45px;
  		font-size: 11px;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;}

	.thumb-img{
		width: 100%;}

	.tags{
		font-family: 'Roboto', sans-serif;
		margin-top: 6px;
		font-size: 12px;
		line-height: 14px;
		font-weight: 400;}

	.desktop-nav{
		margin-right: 0em;}

	.title{
		margin-bottom: 14px;}

	#category {
    margin-bottom: 14px;}			

	#target {
		line-height: 20px;}

	.cover-canvas{
		padding: 0px;}

	.animated{ opacity: .5;
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		line-height: 20px;
		margin-left: 0px;
		padding-left: 8px;
		padding-right: 0px;
		padding-top: 3px;
		display: block;}

	.animated-open{ opacity: 0;
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		line-height: 20px;
		margin-left: 0px;
		padding-left: 8px;
		padding-right: 0px;
		padding-top: 3px;
		display: none;}

	.cover-space img, .white-pix img{
		border: 0px;
		box-shadow: 1px 1px 5px rgba(0,0,0,.1);}

	.blank-space{
		padding-bottom: 12px;}

	#img-middle{
		padding: 0px 10px;}	

	#img-middle-right{
		padding-right: 10px;}

	#img-middle-left{
		padding-left: 10px;}		

	.cover-canvas{
		padding: 0 10px;}	

	.blank-space{
		padding-bottom: 12px;}

	.row-end{
		margin-bottom: 26px;}

	.bottom{
		margin-bottom: 40px;}			

	.mobile-cover-canvas{
		padding: 0px;}

	.img-space{
	margin-bottom: 20px;}

	p{margin-bottom: 20px;}	

	.block{
		width:25px;
		height:3px;
		margin-bottom: 4px;
		background-color: RGBA(0,0,0,1);}

	.block-open{
		width:25px;
		height:3px;
		margin-bottom: 4px;
		background-color: RGBA(0,0,0,.5);}

	#top-category{margin-top: 22px;}

	#sub-text-space{
		margin-bottom: 19px;}

	.cover-canvas-mobile{padding: 0px;}										
	
}


/* medium ipad */
@media only screen and (min-width: 54.375em){

	#bottom{
		padding-left: 2.875em;
   		padding-right: 2.875em;
	}

	#bottom-scroll{
		position: fixed;
    	z-index: 999;
    	bottom: 90px;
	}	

	.space-active, .space{
		margin-left: 10px;}

	.thumbnail{
		opacity: 1;
		color: white;
		background-color: rgba(0,0,0,.3);
		box-sizing: border-box;
		margin: 0px;
		padding: 0px;
		width: 100%;
		height: 100%;}

	.content{
		margin: 0px;
		padding: 16px;
		top: auto;
		bottom: 0px;
		width: 100%;
		max-height: 30%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.5) 60%);}

	.work-content{
		margin: 0px;
		padding: 16px;
		top: auto;
		bottom: 0px;
		width: 100%;
		height: 36%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.7) 60%);}	

	.row{
		margin: 0 auto;
		margin-bottom: 10px;
		padding-bottom: 10px;}	

	#resume-page{
		padding-top: 110px;
		height: 100%;
		width: 100%;}

	.up-button{ 
		display: block;}

	.img-mobile{
  		margin-top: 0px;}

	.work-description{
		margin-top: 0px;
		margin-bottom: 0px;
		position: relative;}

	.animated-push{
		margin-left: 36px;}	

	.white-hover:hover{
		color: white;}
	
	.thumb-img{
		display: block;}

  	.copyright{
  		top:350px;
  		z-index: 1000;
  		right: -40px;
  		font-size: 11px;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;}

	.small-navigation{
		display: block;}

	.desktop-nav-end,.desktop-nav{
		display:none;}

	.my-logo img{
  		width: 140px;}

	.top{
		width: 100%;
		height: 100px;
		padding-left: 11px;
		padding-right: 10px;}

	#big-type a {
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		line-height: 20px;
		font-weight: 500;}

	.cover-space{
		padding-left: 0px;
		padding-right: 0px;}

	.animated{ opacity: .5;
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		line-height: 20px;
		margin-left: 0px;
		padding-right: 0px;
		padding-left: 8px;
		padding-top: 3px;
		display: block;}

	.animated-open{ opacity: 0;
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		line-height: 20px;
		margin-left: 0px;
		padding-left: 8px;
		padding-right: 0px;
		padding-top: 3px;
		display: none;}	

  	.mobile{
  		margin-top: 0px;}

  	.mobile-top{
  		margin-top: 0px;}	

  	#work{
  		padding-left: 2.875em;
  		padding-right: 2.875em;
  		margin-top: 0em;
  		padding-top: 7.875em;}

  	#top{
  		width: 100%;
  		position: fixed;
  		padding-left: 2.875em;
  		padding-right: 2.875em;
  		z-index: 999;}

  	.top-height,.top-port{height: 110px;}

	.shorten{
		height: 64px;
	}		

  	.jazz{
  	  	z-index: 999;}

	.thumb-img{
		width: 100%;}

	.tags{
		font-family: 'Roboto', sans-serif;
		margin-top: 8px;
		font-size: 12px;
		line-height: 14px;
		font-weight: 400;}

	.desktop-nav{
		margin-right: 0em;}

	.title{
		margin-bottom: 14px;}	

	#category{
		margin-bottom: 14px;}

	#sub-text-space{
		margin-bottom: 19.2px;}							

	#target {
		line-height: 20px;}

	.cover-canvas{
		padding: 0 10px;}

	.cover-space img, .white-pix img{
		border: .5px solid rgba(50,50,50,.1);
		box-shadow: 1px 1px 10px rgba(0,0,0, .1);}

	.blank-space{
		padding-bottom: 12px;}

	#img-middle{
		padding: 0px 10px;}	

	#img-middle-right{
		padding-right: 10px;}

	#img-middle-left{
		padding-left: 10px;}		

	.cover-canvas{
		padding: 0 10px;}	

	.blank-space{
		padding-bottom: 12px;}

	.row-end{
		margin-bottom: 26px;}

	.bottom{
		margin-bottom: 30px;}	

	p{margin-bottom: 20px;}

	.block{
		width:25px;
		height:3px;
		margin-bottom: 4px;
		background-color: RGBA(0,0,0,1);}

	.block-open{
		width:25px;
		height:3px;
		margin-bottom: 4px;
		background-color: RGBA(0,0,0,.5);}

	#top-category{margin-top: 28px;}

	.cover-canvas-mobile{padding: 0px;}										

}


/* large ipad - mobile nav */
@media only screen and (min-width: 62.5em){

	#bottom{
		padding-left: 2.875em;
    	padding-right: 2.875em;
	}

	#bottom-scroll{
		position: fixed;
    	z-index: 999;
    	bottom: 90px;
	}	

	.thumbnail{
		opacity: 1;
		color: white;
		background-color: rgba(0,0,0,.3);
		box-sizing: border-box;
		margin: 0px;
		padding: 0px;
		width: 100%;
		height: 100%;}

	.content{
		margin: 0px;
		padding: 16px;
		bottom: 0px;
		top: auto;
		width: 100%;
		max-height: 30%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 90%);}

	.work-content{
		margin: 0px;
		padding: 16px 25px;
		bottom: 0px;
		top: auto;
		width: 100%;
		max-height: 38%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.8) 90%);}	

	.row{
		margin: 0 auto;
		margin-bottom: 10px;
		padding-bottom: 10px;}	

	#resume-page{
		padding-top: 122px;
		height: 100%;
		width: 100%;}

	.up-button{ 
		display: block;}

	.img-mobile{
  		margin-top: 0px;}

	.work-description{
		margin-top: 0px;
		margin-bottom: 0px;
		position: relative;}

	.animated-push{
		margin-left: 36px;}	

	.white-hover:hover{
		color: white;}
	
	.thumb-img{
		display: block;}

  	.copyright{
  		right:-30px;
  		top:350px;
  		z-index: 1000;
  		font-size: 11px;}

	.small-navigation{
		display: block;}

	.desktop-nav-end,.desktop-nav{
		display:none;}

	.my-logo img{
  		width: 140px;}

	.top{
		width: 100%;
		height: 100px;
		padding-left: 11px;
		padding-right: 10px;}

	#big-type a {
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		line-height: 20px;
		font-weight: 500;}

	.cover-space{
		padding-left: 0px;
		padding-right: 0px;}

	.animated{
		opacity: .5;
    	font-family: 'Roboto', sans-serif;
    	font-size: 18px;
    	line-height: 20px;
    	padding-left: 8px;
    	padding-top: 3px;
    	margin-top: 0px;
    	display: block;}	

	.animated-open{ opacity: 0;
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		line-height: 20px;
		margin-left: 0px;
		padding-left: 8px;
		padding-right: 0px;
		padding-top: 3px;
		display: none;}	

  	.mobile{
  		margin-top: 0px;}

  	.mobile-top{
  		margin-top: 0px;}	

  	#work{
  		padding-left: 2.875em;
  		padding-right: 2.875em;
  		margin-top: 0em;
  		padding-top: 8.875em;}

  	#top{
  		width: 100%;
  		position: fixed;
  		padding-left: 2.875em;
  		padding-right: 2.875em;
  		z-index: 999;}

   	.top-height,.top-port{height: 122px;}

	.shorten{
		height: 68px;
	}	 		

  	.jazz{
  	  	z-index: 999;}

  	.copyright{
  		right: -45px;
  		font-size: 12px;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;}

	.thumb-img{
		width: 100%;}

	.tags{
		font-family: 'Roboto', sans-serif;
		margin-top: 6px;
		font-size: 14px;
		line-height: 16px;
		font-weight: 400;}

	.desktop-nav{
		margin-right: 0em;}

	.title{
		margin-bottom: 14px;}	

	#category{
		margin-bottom: 14px;}		

	#target {
		line-height: 20px;}

	.cover-canvas{
		padding: 0 10px;}

	.cover-space img, .white-pix img{
		border: .5px solid rgba(50,50,50,.1);
		box-shadow: 1px 1px 10px rgba(0,0,0, .1);}	

	.blank-space{
		padding-bottom: 12px;}

	#img-middle{
		padding: 0px 10px;}	

	#img-middle-right{
		padding-right: 10px;}

	#img-middle-left{
		padding-left: 10px;}		

	.cover-canvas{
		padding: 0 10px;}	

	.blank-space{
		padding-bottom: 12px;}

	.row-end{
		margin-bottom: 26px;}

	.bottom{
		margin-bottom: 30px;}	

	p{margin-bottom: 20px;}

	.block{
		width:25px;
		height:4px;
		margin-bottom: 4px;
		background-color: RGBA(0,0,0,1);}

	.block-open{
		width:25px;
		height:4px;
		margin-bottom: 4px;
		background-color: RGBA(0,0,0,.5);}

	#top-category{margin-top: 28px;}

	#sub-text-space{
		margin-bottom: 19px;}

	.cover-canvas-mobile{padding: 0px;}										
						
}


/* small laptop */
@media only screen and (min-width: 67em){

	#bottom{
		padding-left: 7.875em;
    	padding-right: 7.875em;
	}

	#bottom-scroll{
		position: fixed;
    	z-index: 999;
    	bottom: 90px;
    	padding-right: 10px;
    	margin-right: 7.875em;
	}

	.content{
		margin: 0px;
		padding: 16px;
		bottom: 0px;
		top: auto;
		width: 100%;
		max-height: 34%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 90%);}

	.work-content{
		margin: 0px;
		padding: 16px;
		bottom: 0px;
		top: auto;
		width: 100%;
		max-height: 38%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 90%);}	

	.row{
		margin: 0 auto;
		margin-bottom: 10px;
		padding-bottom: 10px;}

	#resume-page{
		padding-top: 116px;
		height: 100%;
		width: 100%;}

	.up-button{ 
		display: block;}

	.work-description{
		margin-top: 0px;
		position: relative;}
	
	.animated-push{
		margin-left: 42px;}

	.top {
		width: 100%;
		height: 100px;
		padding-left: 11px;
		padding-right: 10px;}

	.white-hover:hover{
		color: white;}

	.thumb-img{
		display: block;}

	.cover-space{
		padding-left: 0px;
		padding-right: 0px;}

	.cover-space img, .white-pix img{
		border: .5px solid rgba(50,50,50,.1);
		box-shadow: 1px 1px 10px rgba(0,0,0, .1);}

	.my-logo img{
		width: 140px;}

	#big-type a {
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		line-height: 20px;
		font-weight: 500;}

	.tags{
		font-family: 'Roboto', sans-serif;
		margin-top: 8px;
		font-size: 13px;
		line-height: 15px;
		font-weight: 400;}

	#target {
		line-height: 20px;}

	.desktop-nav {
		margin-right: 3em;}

	#work {
		padding-left: 7.875em;
		padding-right: 7.875em;
		margin-top: 0em;
		padding-top: 8.5em;}

	#top{
		width: 100%;
  		position: fixed;
  		padding-left: 7.875em;
  		padding-right: 7.875em;
  		z-index: 999;}

  	.top-height,.top-port{height: 116px;}

	.shorten{
		height: 70px;
	}		

	.small-navigation{
		display: none;}

  	.desktop-nav, .desktop-nav-end{
  		display: inline-block;}

	#category{
		margin-bottom: 14px;}	

	.title {
    	margin-bottom: 14px;}							

	.copyright {
		right: -35px;
		font-size: 11px;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;}

	.thumbnail{
		opacity: 1;
		color: white;
		background-color: rgba(0,0,0,.3);
		box-sizing: border-box;
		width: 100%;
		height: 100%;}

	.thumbnail:hover{
		opacity: 1;
		box-sizing: border-box;}

	.column, .columns{
		margin-bottom: 0px;
		padding: 0px;}

	.animated{ opacity: .5;
		font-family: 'Roboto', sans-serif;
		font-size: 18px;
		line-height: 20px;
		padding-left: 8px;
		padding-top: 3px;
		margin-top: 0px;
		display: block;}

	.animated-open{
		opacity: 0;
		line-height: 20px;
		padding-left: 8px;
		padding-top: 3px;
		font-size: 18px;
		margin-top: 0px;
		display: none;}	

	.cover-canvas{
		padding: 0 10px;}

	.blank-space{
		padding-bottom: 12px;}

	#img-middle{
		padding: 0px 10px;}	

	#img-middle-right{
		padding-right: 10px;}

	#img-middle-left{
		padding-left: 10px;}		

	.cover-canvas{
		padding: 0 10px;}	

	.blank-space{
		padding-bottom: 12px;}

	.row-end{
		margin-bottom: 26px;}

	.bottom{
		margin-bottom: 30px;}	

	p{margin-bottom: 20px;}

	#top-category{margin-top: 28px;}

	.cover-canvas-mobile{padding: 0px;}											

}


/* laptop */
@media only screen and (min-width: 71.25em){

	#bottom{
		padding-left: 7.875em;
    	padding-right: 7.875em;
	}

	#bottom-scroll{
		position: fixed;
    	z-index: 999;
    	display: none;
	}	

	.content{
		margin: 0px;
		padding: 20px;
		bottom: 0px;
		top: auto;
		width: 100%;
		max-height: 34%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 90%);}

	.work-content{
		margin: 0px;
		padding: 20px;
		bottom: 0px;
		top: auto;
		width: 100%;
		max-height: 38%;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 90%);}
	

	.row{
		margin: 0 auto;
		margin-bottom: 10px;
		padding-bottom: 10px;}

	#resume-page{
		padding-top: 128px;
		height: 100%;
		width: 100%;}

	.up-button{ 
		display: block;}

	.work-description{
		margin-top: 0px;
		position: relative;}
	
	.animated-push{
		margin-left: 42px;}

	.top {
		width: 100%;
		height: 100px;
		padding-left: 11px;
		padding-right: 10px;}

	.white-hover:hover{
		color: white;}

	.thumb-img{
		display: block;}

	.cover-space{
		padding-left: 0px;
		padding-right: 0px;}

	.cover-space img, .white-pix img{
		border: .5px solid rgba(50,50,50,.1);
		box-shadow: 1px 1px 10px rgba(0,0,0, .1);}

	.my-logo img{
		width: 160px;}

	#big-type a{
		font-family: 'Roboto', sans-serif;
		font-size: 20px;
		line-height: 22px;
		font-weight: 500;}

	.tags{
		font-family: 'Roboto', sans-serif;
		margin-top: 6px;
		font-size: 13px;
		line-height: 15px;
		font-weight: 400;}

	#target {
		line-height: 22px;}

	.desktop-nav {
		margin-right: 3em;}

	#work {
		padding-left: 7.875em;
		padding-right: 7.875em;
		margin-top: 0em;
		padding-top: 9.2em;}

	#top{
		width: 100%;
  		position: fixed;
  		padding-left: 7.875em;
  		padding-right: 7.875em;
  		z-index: 999;}

  	.top-height,.top-port{height: 128px;}

	.shorten{
		height: 70px;
	}	

	.small-navigation{
		display: none;}

  	.desktop-nav, .desktop-nav-end{
  		display: inline-block;}

	.title{
		margin-bottom: 14px;}

	#category{
		margin-bottom: 14px;}				

	.copyright {
		right: -35px;
		font-size: 12px;
		font-family: 'Roboto', sans-serif;
		font-weight: 400;}

	.thumbnail{
		opacity: 1;
		color: white;
		background-color: rgba(0,0,0,.3);
		box-sizing: border-box;
		width: 100%;
		height: 100%;}

	.thumbnail:hover{
		opacity: 1;
		box-sizing: border-box;}

	.column, .columns{
		margin-bottom: 0px;
		padding: 0px;}

	.animated{ opacity: .5;
		font-family: 'Roboto', sans-serif;
		font-size: 20px;
		line-height: 22px;
		padding-left: 8px;
		padding-top: 2px;}

	#img-middle{
		padding: 0px 10px;}	

	#img-middle-right{
		padding-right: 10px;}

	#img-middle-left{
		padding-left: 10px;}		

	.cover-canvas{
		padding: 0 10px;}	

	.blank-space{
		padding-bottom: 12px;}

	.row-end{
		margin-bottom: 26px;}

	.bottom{
		margin-bottom: 30px;}

	p{margin-bottom: 20px;}

	#top-category{margin-top: 28px;}

	#sub-text-space{
		margin-bottom: 19px;}

	.cover-canvas-mobile{padding: 0px;}										
								
}


/* desktop */
@media only screen and (min-width: 90.063em){

	#bottom{
		padding-left: 15.875em;
   		padding-right: 15.875em;
	}

	#bottom-scroll{
		position: fixed;
    	z-index: 999;
    	display: none;
	}	

	.content{
		margin: 0px;
		padding: 20px;
		bottom: 0px;
		top: auto;
		width: 100%;
		max-height: 54%;
		overflow:hidden;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.4) 90%);}

	.work-content{
		margin: 0px;
		padding: 20px;
		bottom: 0px;
		top: auto;
		width: 100%;
		max-height: 54%;
		overflow:hidden;
		background: linear-gradient(180deg,transparent 0,rgba(0,0,0,.6) 90%);}	

	.thumbnail{
		opacity: 1;
		color: white;
		background-color: rgba(0,0,0,.3);
		box-sizing: border-box;
		width: 100%;
		height: 100%;}

	.thumbnail:hover{
		opacity: 1;
		box-sizing: border-box;}

	#resume-page{
		padding-top: 130px;
		height: 100%;
		width: 100%;}
	
	.up-button{
		display: block;}

	.work-description{
		margin-top: 0px;
		position: relative;}

	.animated-push{
		margin-left: 48px;}

	.animated{
		opacity: .5;
		font-family: 'Roboto', sans-serif;
		font-size: 22px;
		line-height: 24px;
		padding-top: 0px;
		margin-left: 10px;}

	#top {
  		width: 100%;
  		position: fixed;
  		padding-left: 15.875em;
  		padding-right: 15.875em;
  		z-index: 999;}

  	.top-height,.top-port{height: 130px;}

	.shorten{
		height: 70px;
	}		

	#work {
  		padding-left: 15.875em;
  		padding-right: 15.875em;
  		margin-top: 0em;
 		padding-top: 9.875em;}

	.row{
		margin: 0 auto;
		margin-bottom: 10px;
		padding-bottom: 10px;}

	.row-img{
		margin: 0 auto;
    	margin-bottom: 10px;
    	padding-bottom: 10px;}	

	#big-type a{
		font-size: 22px;
		line-height: 24px;}

	.tags{
		font-family: 'Roboto', sans-serif;
		margin-top: 8px;
		font-size: 14px;
  		line-height: 16px;
		font-weight: 400;}

	.title{
		margin-bottom: 14px;}

	#category{
		margin-bottom: 14px;}		

	.desktop-nav{
		margin-right: 3em;}

	.animated{ opacity: .5;
		font-family: 'Roboto', sans-serif;
		font-size: 22px;
		line-height: 24px;
		margin-top: 1px;
		padding-top: 0px;
		margin-left: 10px;}

	#target{
		line-height: 24px;}

	.cover-space{
		padding: 0px;}

	.cover-space img, .white-pix img{
		border: .5px solid rgba(50,50,50,.1);
		box-shadow: 1px 1px 10px rgba(0,0,0, .1);}

	.copyright{
		font-family: 'Roboto', sans-serif;
		font-size: 12px;
		top:400px;}

	.my-logo img{
		width: 186px;}

	.column, .columns{
		margin-bottom: 0px;
		padding: 0px;}

	.cover-canvas{
		padding: 0 10px;}	

	#title-cover{
		margin: 0px;}

	#img-middle{
		padding: 0px 10px;}	

	#img-middle-right{
		padding-right: 10px;}

	#img-middle-left{
		padding-left: 10px;}

	.blank-space{
		padding-bottom: 12px;}

	.row-end{
		margin-bottom: 20px;}

	.bottom{
	margin-bottom: 30px;}	

	p{margin-bottom: 20px;}

	#top-category{margin-top: 28px;}

	#sub-text-space{
		margin-bottom: 19px;}

	.cover-canvas-mobile{padding: 0px;}												

}

.gone{opacity: 0;}

.gone:hover{opacity: 0;}