/* html body */

	html, body {
		max-width: 1600px; 
		margin: 0 auto; border: 0; padding: 0;
		border-collapse: collapse; 
	
		font-size: 0; 
		font-family: "Helvetica", "Arial", "sans-serif";
		font-smooth: always; -webkit-font-smoothing: antialiased; 
	
		text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		}	
	
	img { border-style: none; }
	
	a { text-decoration: none; color: inherit; }
	
	b { letter-spacing: 0.25px; }
	
	u { border-bottom: 1px solid black; text-decoration: none;}
	
/* markers */

	#top { }
	
	#recent-l { }
	#recent-m { }
	#recent-s { }
	
	#index-l { }
	#index-m { }
	#index-s { }
	
/* show, hide */
	
	@media screen and (min-width: 900px){	
		.l { display: block; }
		.m { display: none; }
		.s { display: none; }
	}	
	@media screen and (max-width: 900px){
		.l { display: none; }
		.m { display: block; }
		.s { display: none; }
	}	
	@media screen and (max-width: 600px){
		.m { display: none; }
		.s { display: block; }
	}
	
	
	
	
	
/* text styles */
		
	::selection { 
		background: whitesmoke; 
		}
		
	.underline { 
		text-decoration: none; 
		}
		
	a.underline:hover { 
		text-decoration: none; 
		border-bottom: 1px solid black;
		cursor: pointer;
		}	

	
	
	
	
/* menu elements */
	
	.title {
		display: block;
		float: left;
		font-size: 12px; 
		}
	
	.menu-right { 
		display: block;
		float: right;
		width: 100%;
		font-size: 12px; 
		margin-left: 26px;
		}
	
	.menu-left { 
		display: block;
		float: left;
		font-size: 12px; 
		margin-right: 26px;
		}
	
	.hamburger {
		display: block;
		float: right;
		width: 100%;
		font-size: 12px; 
		margin-left: 26px;
		}
		
	.hamburger:hover {
		cursor: pointer; }
	
	.menu-item { 
		font-size: 12px; 
		}	
	@media screen and (min-width: 900px){
	.menu-item { 
		float: right;
		margin-right: 46px;
		margin-top: 20px;
		font-size: 12px; 
		}	
	}
	@media screen and (max-width: 900px){
	.menu-item { 
		position: fixed;
		float: left;
		left: 26px;
		bottom: 20px;
		font-size: 12px; 
		}	
	}
	@media screen and (max-width: 600px){
	.menu-item { 
		position: fixed;
		float: left;
		left: 16px;
		bottom: 14px;
		font-size: 12px; 
		}	
	}

/* menu */

	#menu {
		position: sticky;
		position: -webkit-sticky;
		top: 0px;
		z-index: 800;
		}
	@media screen and (min-width: 600px){
	#menu { 
		border: 26px solid transparent;
		border-bottom: 34px solid transparent;
		border-top: 20px solid transparent;
		}
	}
	@media screen and (max-width: 600px){
	#menu { 
		border: 16px solid transparent;
		border-bottom: 14px solid transparent;
		border-top: 14px solid transparent;
		}
	}
	
	.menu { 
		display: block;
		position: relative;
		float: right;
		text-align: right;
		z-index: 700; 
		}
	
	.menu-bg { 
		position: sticky;
		position: -webkit-sticky;
		width: 100%;
		height: 54px;
		top: 0px;
	
		float: right;
		background: white;
  		z-index: 600;
		}
	@media screen and (min-width: 600px){
	.menu-bg { 
		height: 54px; 
		}
	}
	@media screen and (max-width: 600px){
	.menu-bg { 
		height: 44px; 
		}
	}




/* dropdown */
	
	.dropdown { 
		position: fixed;
		margin: 0 auto; 
		height: calc(50% - 1px);
		min-height: 260px;
		max-height: 520px;
		
		top: 0;
		right: 0;
		left: 0;
		
		background: white;
		border-bottom: solid black 1px;
		z-index: 900; 
		}
	
	.about { 
		display: inline-block;
		max-width: 420px;
		float: left;
		left: 0;
	
		text-align: left;
		font-size: 12px; 
		line-height: 16px; 
		}
	@media screen and (min-width: 600px){
	.about { 
		width: calc(100% - 52px);
		margin: 26px;
		margin-top: 16px;
		}
	}
	@media screen and (max-width: 600px){
	.about { 
		width: calc(100% - 32px); 
		margin: 16px;
		margin-top: 12px;
		}
	}
	
/* dropdown effects */

	.dropdown-slide { 
		visibility: hidden;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		-webkit-transition: -webkit-transform 0.3s ease-in-out, visibility 0s 0.3s;
		transition: transform 0.3s ease-in-out, visibility 0s 0.3s; 
		}

	.dropdown-slide.open {
		visibility: visible; 
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		-webkit-transition: -webkit-transform 0.3s ease-in-out;
		transition: transform 0.3s ease-in-out; 
		}
	
	.dropdown-container { 
		display: block;
		max-width: 1600px;
		margin: auto;
		}
	
/* dropdown close */	

	.dropdown-close { 
		display: block; 
		position: relative; 
		width: 100%; 
		}
	@media screen and (min-width: 600px){
	.x img {
		display: block;
		margin-top: 20px;
		margin-right: 26px;
		float: right;
		right: 0;
		}
	}
	@media screen and (max-width: 600px){
	.x img {
		position: fixed;
		display: inline-block;
		margin-right: 16px; 
		float: right;
		right: 0;
		bottom: 16px;
		}
	}
	
	.x:hover { cursor: pointer; }
	
	


	  
/* main img */
	
	.main {
		display: inline-block;
		width: 100%;
		margin: 0;
		}
	@media screen and (min-width: 600px){
	.main {
		height: calc(100vh - 54px);
		}
	}
	@media screen and (max-width: 600px){
	.main {
		height: calc(100vh - 28px);
		}
	}
	
	.main:hover { cursor: pointer; }
	
/* img effects */
    
    .main-img { 
    	width: 100%; 
    	}
	
    .main-img .slide {
    	position: absolute;
    	background-position: center;
    	background-size: cover;
    	background-repeat: no-repeat;
    
   		width: 100%;
    	height: 100%;
    	right: 0;
    	opacity: 0;
    
    	transition: opacity 1s ease-in-out; 
    	}
    
	.main-img .slide.show { 
		opacity: 1; 
		}
    
	#main-img { 
		display: block; 
		position: absolute;
		width: 100%;
		height: 100vh;
		z-index: -100;
    	}
    
    



/* works */
	
	.works { 
		margin: 0 auto;
		font-size: 0;
		}
	@media screen and (min-width: 600px){
	.works { 
		border: 26px solid transparent; 
		}
	}
	@media screen and (max-width: 600px){
	.works {  
		border: 16px solid transparent; 
		}
	}
	
/* works containers */
	
	.works-wrapper { 
		display: inline-block;
		width: 100%;
		overflow: visible; 
		}
	
	.works-container { 
		display: inline-block;
		width: 100%; 
		margin-top: 38px; 
		}
	@media screen and (max-width: 600px){
	.works-container { 
		margin-top: 90px; 
		}
	}	
	
/* works img content */
	
	.works-img {
		display: inline-block;
		vertical-align: top;
		position: relative;
		}
	@media screen and (min-width: 900px){
	.works-img { 
		width: calc(33.33% - 17.33px);
		}
	.works-mrgn-3clm { 
		display: inline-block;
		width: 26px;
		}
	.works-mrgn-2clm { 
		display: none;
		}
	}
	@media screen and (max-width: 900px){
	.works-img { 
		width: calc(50% - 13px);
		}
	.works-mrgn-3clm { 
		display: none;
		}
	.works-mrgn-2clm {
		display: inline-block;
		width: 26px;
		}
	}
	@media screen and (max-width: 600px){
	.works-img { 
		width: 100%;
		}
	.works-mrgn-2clm {
		display: none;
		}
	}
	
/* works txt content */
	
	.works-txt { 
		font-size: 12px; 
		z-index: -100;
		padding: 8px 0;
		}
	@media screen and (min-width: 600px){
	.works-txt {
		position: absolute; 
		height: 10px;
		top: calc(100% - 26px);
		}
	}
	@media screen and (max-width: 600px){
	.works-txt {
		width: 100%;
		height: 123px;
		}
	}
	
/* imgs up and down */    

	@media screen and (min-width: 600px){
	.works-up {
    	margin-top: 26px;
    	}
    
    .works-up:hover {
    	margin-top: 0px;
    	padding-bottom: 26px;
    
    	-webkit-transition: 0.1s;
		-moz-transition: 0.1s;
		transition: 0.1s;
    	}
    }
    
    
    
    
    
/* index */  

    .index { 
    	padding: 26px;
    	font-size: 0;
    	}
    @media screen and (max-width: 600px){
    .index { 
    	padding: 16px;
    	font-size: 0;
    	}
    }
    
 /* index containers */ 
 	
 	.index-wrapper { 
		width: 100%;
		border-bottom: 1px solid black;
 		}
 	
 	@media screen and (min-width: 690px){
 	.index-half-container-1 {
    	display: inline-block;
    	width: calc(50% - 13px);
    	}
    .index-half-container-2 {
    	display: inline-block;
    	width: calc(50% - 13px);
    	}
    .index-fourth-container-1 { 
  		display: inline-block;	
    	width: calc(50% - 13px); 
    	}
    .index-fourth-container-2 { 
  		display: inline-block;	
    	width: calc(50% - 13px); 
    	}
    }
    @media screen and (max-width: 690px){
 	.index-half-container-1 { 
    	display: inline-block;
    	width: 100%;
    	}
    .index-half-container-2 { 
    	display: none;
    	}
    .index-fourth-container-1 { 
  		display: inline-block;	
    	width: calc(50% - 13px);
    	}
    .index-fourth-container-2 { 
  		display: inline-block;	
    	width: calc(50% - 13px);
    	}
    }
    @media screen and (max-width: 600px){
    .index-fourth-container-1 { 
  		display: inline-block;	
    	width: 75%;
    	}
    .index-fourth-container-2 { 
  		display: inline-block;	
    	width: 25%;
    	}
    }
    
 /* index header */   
 	
 	@media screen and (min-width: 690px){
 	.index-mrgn-1 {
 		display: inline-block;
 		width: 26px;
 		}
 	.index-mrgn-2 { 
 		display: inline-block;
 		width: 26px;
 		}
 	}
 	@media screen and (max-width: 690px){
 	.index-mrgn-1 { 
 		display: none; 
 		}
 	.index-mrgn-2 { 
 		display: inline-block;
 		width: 26px;
 		}
 	}
 	@media screen and (max-width: 600px){
 	.index-mrgn-2 { 
 		display: none; 
 		}
 	}
 	
 	.index-header { 
    	padding-bottom: 6px;
    	text-align: left;
		font-size: 12px;
 		}
 	
/* header content */ 
 
 	button { outline: none; }
 	
 	.index-container { 
 		width: 100%;
 		height: 30px;
 		text-align: left;
		font-size: 0;
		background: white;
 	 	
		margin: 0;
		padding: 0;
		border: 0;
		}
		
	.expand, .index-container:hover { 
		cursor: pointer;
		}
	
 	.header-content {
 		display: inline-block;	
    	width: 100%; 
    	text-align: left;
		float: left;
		font-size: 12px;
 		}
 	
/* index content */  
	
	.index-content {
		max-height: 0;
		transition: max-height 0.2s ease-out;
		border-bottom: 1px solid black;
		overflow: hidden;
		}
	
	.img-content {
		display: inline-block;	
		}
	
	.txt-content { 
		vertical-align: top;
		display: inline-block;	
		}
	@media screen and (min-width: 900px){
	.img-content {
		width: calc(50% - 13px);
		margin: 12px 0 40px 0;
		}
	.txt-content {  
		width: calc(25% - 20.5px); 
		margin: 10px 0 0 0;
		font-size: 11px;
		line-height: 16px;
		}
	}
	@media screen and (max-width: 900px){
	.img-content {
		width: calc(50% - 13px);
		margin: 12px 0 40px 0;
		}
	.txt-content {  
		width: calc(50% - 13px);
		margin: 8px 0 0 0;
		font-size: 12px;
		line-height: 18px;
		}
	}
	@media screen and (max-width: 600px){
	.img-content {
		width: 100%;
		margin: 4px 0 12px 0;
		}
	.txt-content { 
    	width: 100%;
    	margin: 0 0 36px 0;
		font-size: 12px;
		line-height: 18px;
		}
	}
	
	
	
	
	
/* footer */
		
	.arrow-top { 
		display: block;
		position: fixed;
		right: 0px;
		z-index: 900;
		}
	@media screen and (min-width: 600px){
	.arrow-top { 
		bottom: 24px;
		padding-right: 26px;
		}
	}
	@media screen and (max-width: 600px){
	.arrow-top { 
		bottom: 16px;
		padding-right: 16px;
		}
	}
	
	.rights {
		float: left;
		border: 26px solid transparent;
		border-bottom: 20px solid transparent;
		border-top: 0px solid transparent;
		color: black;
		font-size: 12px;
		}
	@media screen and (max-width: 600px){
	.rights {
		width: calc(100% - 52px);
		border: 26px solid transparent;
		border-bottom: 20px solid transparent;
		border-top: 0px solid transparent;
		}
	}
	@media screen and (max-width: 600px){
	.rights {
		width: calc(100% - 32px);
		border: 16px solid transparent;
		border-bottom: 12px solid transparent;
		border-top: 0px solid transparent;
		}
	}
	
	
	
	
/* space */

	.break-3clm { 
		display: inline-block;
		width: 100%;
		}
	@media screen and (min-width: 900px){
	.break-3clm { 
		height: 26px; 
		}
	}
	@media screen and (max-width: 900px){
	.break-3clm { 
		display: none;
		}
	}
	
	.break-2clm {
		display: inline-block;
		width: 100%;
		}
	@media screen and (min-width: 900px){
	.break-2clm { 
		display: none;
		}
	}
	@media screen and (max-width: 900px){
	.break-2clm { 
		height: 26px; 
		}
	}
	@media screen and (max-width: 600px){
	.break-2clm { 
		display: none;
		}
	}
	
	.space {
		display: inline-block;
		width: 100%;
		height: 90px; 
		}




/* audio */
	
	audio {
		display: block;
		position: relative; 
		width: 100%;
		}
	
	.audio {
		display: inline-block;
		position: relative; 
		border-top: 20px solid transparent;
		border-right: 20px solid transparent;
		font-size: 10px;
		}
	
    .audio-btn { 
    	display: inline-block;
		position: relative;
	
		border: 3px solid transparent;
		border-top: 10px solid transparent;
	
		width: 15px;
		float: left;
		}	
	
/* audio */

	video {
		width: 100%;
		height: 100%;

		border: 0;
		padding: 0;
		margin: 0;

		outline: none;
		border: 1px solid #e3e4e5;
		text-decoration: none;
		}
		
	video:hover { cursor: pointer }
	
/* index carousel */

	.index-carousel {
  		margin: auto; 
  		width: 100%;
  		}
  	
/* carousel btns */

	.slidesjs-previous img { 
		position: absolute; 
		height: 12px;
		float: left; 
  		margin-left: 13px; 
		top: 50%;
  		transform: translateY(-50%);
		z-index: 500;
		}
	
	.slidesjs-next img {
		position: absolute; 
		height: 12px;
		right: 0px; 
		margin-right: 13px; 
		top: 50%;
 		transform: translateY(-50%); 
		z-index: 500;
		}
		
/* carousels */	

  	#carousel-001 {
  		display: none; 
  		position: relative; 
  		}
  	
  	#carousel-002 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-003 {
  		display: none; 
  		position: relative; 
  		}
  			
  	#carousel-004 {
  		display: none; 
  		position: relative; 
  		}
  			
  	#carousel-005 {
  		display: none; 
  		position: relative; 
  		}
  			
  	#carousel-006 {
  		display: none; 
  		position: relative; 
  		}
  			
  	#carousel-007 {
  		display: none; 
  		position: relative; 
  		}
  	
  	#carousel-008 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-009 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-010 {
  		display: none; 
  		position: relative; 
  		}
  			
  	#carousel-011 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-012 {
  		display: none; 
  		position: relative; 
  		}
  			
  	#carousel-013 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-014 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-015 {
  		display: none; 
  		position: relative; 
  		}
  			
  	#carousel-016 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-017 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-018 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-019 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-020 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-021 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-022 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-023 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-024 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-025 {
  		display: none; 
  		position: relative; 
  		}
  			
  	#carousel-026 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-027 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-028 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-029 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-030 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-031 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-032 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-033 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-034 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-035 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-036 {
  		display: none; 
  		position: relative; 
  		}
  		
  	#carousel-037 {
  		display: none; 
  		position: relative; 
  		}