@charset "utf-8";
/* CSS Document */
@font-face {
    font-family: Plantin;
    src: url('fonts/PlantinMTStd-Regular.woff') format('woff'),
		url('fonts/PlantinMTStd-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
    font-family: Plantin;
    src: url('fonts/PlantinMTStd-Bold.woff') format('woff'),
		url('fonts/PlantinMTStd-Bold.otf') format('opentype');
	font-weight: 900;
	font-style: normal;
}

@font-face {
    font-family: Plantin;
    src: url('fonts/PlantinMTStd-BoldItalic.woff') format('woff'),
		url('fonts/PlantinMTStd-BoldItalic.otf') format('opentype');
	font-weight: 900;
	font-style: italic;
}

@font-face {
    font-family: Plantin;
    src: url('fonts/PlantinMTStd-Italic.woff') format('woff'),
		url('fonts/PlantinMTStd-Italic.otf') format('opentype');
	font-weight: 400;
	font-style: italic;
}

@font-face {
    font-family: Plantin;
    src: url('fonts/PlantinMTStd-Light.woff') format('woff'),
		url('fonts/PlantinMTStd-Light.otf') format('opentype');
	font-weight: 100;
	font-style: normal;
}

@font-face {
    font-family: Plantin;
    src: url('fonts/PlantinMTStd-LightItalic.woff') format('woff'),
		url('fonts/PlantinMTStd-LightItalic.otf') format('opentype');
	font-weight: 100;
	font-style: italic;
}

@font-face {
    font-family: Plantin;
    src: url('fonts/PlantinMTStd-Sremibold.woff') format('woff'),
		url('fonts/PlantinMTStd-Sremibold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
    font-family: Plantin;
    src: url('fonts/PlantinMTStd-SremiboldIt.woff') format('woff'),
		url('fonts/PlantinMTStd-SremiboldIt.otf') format('opentype');
	font-weight: 700;
	font-style: italic;
}

body {
	font-family:Plantin;
	color:#444;
	font-size:1.4rem;
	line-height:1.8;
	letter-spacing:0.05rem;
}
/** {
	margin:0;
	padding:0;
	font-family:Plantin;
	line-height:1.8;
	letter-spacing:0.05rem;
	font-size:1rem;
	box-sizing:border-box;
	color:#666;
}*/
h1, h2, h3, h4, h5, h6 {
	font-weight:normal;
	line-height:1.5;
	margin:0;
}
/*.nowrap {
	white-space: nowrap;
}
.header hgroup h2 span.nowrap,
	.rsvp h1 span.nowrap {
	display: inline;
}*/
.container {
	padding:0;
	width:auto!important;
}

.header {
	z-index:99;
	height:100vh;
	
    background: #fff;
}

.header.launch {
	transition-duration: 0.5s;
    background: #000;
}
.header .bg {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image:url(img/milan-cover.jpg);
background-repeat:no-repeat;
background-position:center;
background-size:cover;	
opacity:0;
}
.header .color-filter {
	    background-color: rgba(111,103,90,0.4);
	position: absolute;
top:0;
left:0;
right:0;
bottom:0;
	opacity:0;
	transition-duration: 3s;
}
/*.header hgroup {
	position:absolute;
	top:50%;
	left:0;
	right:0;
	z-index:2;

	text-align:center;
	text-transform:uppercase;
	text-shadow: 0px 0px 10px #362B24;
	margin-top:-4.5rem;
}*/

/*.header .bg .inner {
position:absolute;
top:8rem;
left:2rem;
right:2rem;
bottom:8rem;
background-image:url(img/kv.jpg);
background-repeat:no-repeat;
background-position:center;
background-size:cover;	
max-width:70rem;
margin:auto;
display:none;
}*/

.header hgroup {
	position:absolute;
	top:50%;
left:2rem;
	right:2rem;
	z-index:2;
	text-align:center;
		text-transform:uppercase;
		color:#fff;
		vertical-align:middle;
		text-shadow: 0 0 5px #666;
		
		margin:auto;
	margin-top:-19rem;
	}
.header hgroup h1 {
	font-size:2rem;
	letter-spacing:0.4rem;
opacity:0;
}


.header hgroup h3 {
	font-size:5rem;
	letter-spacing:0.5rem;
opacity:0;
margin-top:3rem;
}

.header hgroup h4 {
	font-size:1.6rem;
	letter-spacing:0.3rem;
opacity:0;
margin-top:1rem;
}
.header hgroup h5 {
	font-size:1.6rem;
	letter-spacing:0.3rem;
opacity:0;
margin-top:0.5rem;
}

.header hgroup h2 {
	line-height:1.5;
	margin-top:1.5rem;
	text-transform:none;
	opacity:0;
}
.header hgroup h2 span {
	font-size:1.5rem;
		padding:0 0.2em;
		display:inline-block;
	
}


.header .line {
	width:0%;
	height:1px;
	box-shadow: 0 0 5px #666;
	background-color:#fff;
	margin:3rem auto 0 auto;
	max-width:540px;
}

.header .nav {
	background-color:rgba(0,0,0,0.5);
	z-index:999;
	opacity:0;
	position:fixed;
	top:0;
	left:0;
	right:0;
	padding:5px 0 0 5px;
}
.launch * {
	opacity:1!important;
	transition-duration:1s;
}

.header .nav a {
	color:#fff;
	cursor:pointer;
	text-transform:uppercase;
	opacity:0.7!important;
	text-decoration:none;
	transition-duration:0.5s;
	}
.header .nav a:hover {
	opacity:1!important;
}

.header.launch .nav {
		transition-delay:0s;

}
.header.launch .bg {
	transition-delay:0s;
	opacity:0.8!important;
}
.header.launch .color-filter {
		transition-delay:1s;
}
.header.launch h1 {
	transition-delay:1s;
}

.header.launch h2 {
	transition-delay:1.5s;
}


.header.launch .line {
	width:100%;
	transition-delay:2s;
}

.header.launch h3 {
	transition-delay:2.5s;
	
}
.header.launch h4 {
	transition-delay:3s;
}
.header.launch h5 {
	transition-delay:3.5s;
}







.header .arrow1, .header .arrow2 {
	display:block;
	text-align:center;
	color:#fff;
	position:absolute;
	z-index:3;
	font-size:4rem;
	left:0;
	right:0;
}
.header .arrow1{
	   bottom:1rem;
}
 .header .arrow2 {
	  bottom:0.5rem;
}



@keyframes arrowdown1 {
  from {
    bottom:1.5rem;
	 opacity:1;
  }

  to {
bottom:0.5rem;
	 opacity:0;
  }
}

@keyframes arrowdown2 {
  from {
    bottom:1rem;
	 opacity:1;
  }

  to {
bottom:0rem;
	 opacity:0;
  }
}

.header .arrow1 {
  animation-duration:2s;
  animation-name: arrowdown1;
  animation-iteration-count: infinite;
  animation-direction:alternative;
}
.header .arrow2 {
  animation-duration:2s;
  animation-name: arrowdown2;
  animation-iteration-count: infinite;
  animation-direction: alternative;
	  animation-delay:1.5s;
}

.header.bar .arrow1,.header.bar .arrow2 {
	display:none;
}




.gallery {
	margin:0;
	position:relative;
}


.gallery .video {
	padding:0;
}

.gallery .img {
	position:absolute;
	background-size:cover;
	background-position:center;
	transition-duration:0.5s;
	opacity:0;
}

.gallery .img:hover {
	transform:scale(1.03);
	z-index:99;
}



.gallery .img a {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}

.gallery .img img {
	display:none!important;
}

.intro {
	opacity:0;
}
.intro p {
	padding:4rem 1.5rem;
	font-size:1.5rem;
	
		text-align:center;
}
.concept {
	position:relative;
	opacity:1;
	overflow:hidden;
}
.concept .swiper-container .swiper-slide{
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}   

.concept .swiper-container .swiper-button-prev, .concept .swiper-container .swiper-button-next {
	background:none;
	width:auto;
	height:auto;
	margin-top:-2rem;
	color:#fff;
	font-size:4rem;
	opacity:0.8;
}
.concept .swiper-container .swiper-button-prev:hover, .concept .swiper-container .swiper-button-next:hover {
	oapcity:1;
}

.concept .swiper-container .swiper-pagination-bullet {
	width:6px;
	height:6px;
}

.concept .swiper-container .swiper-pagination-bullet-active {
	background-color:#fff;
}
.concept  .swiper-scrollbar {
	display:none;
}




.concept  hgroup {
	position:absolute;
	top:50%;
	left:30px;
	right:30px;
	text-align:center;
	margin-top:-1.8rem;
	z-index:9;
	text-shadow: 0 0 8px #9ca9af;
}

.concept  hgroup, .concept .img1 h1 {
}
.concept h1 span {
	font-size:1.5rem;
	color:#fff;
	line-height:1.8rem;
	display:block;
	padding:0 0.2rem;
	letter-spacing:0.1rem;
	
}

.video{
	width:100%;
	position:relative;
	opacity:0;
	overflow:hidden;		padding: 0 1rem 4rem 1rem;
		transition-duration:0.5s;
}

.video.launch {
	background-image:none!important;
}
.video .btn {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-40px;
	margin-top:-40px;
	z-index:2;
	width:80px;
	height:80px;
	background-image:url(img/play_btn.png);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	opacity:0.7;
}

.video:hover .btn {
	opacity:1;
	transition-duration:1s;
}
.video video{
/*width:auto;
position:absolute;
top:0;
left:50%;
transform: translateX(-50%);*/
margin:auto;
width:100%;
opacity:0;
transition-duration:0.5s;
}

.launch {
	opacity:1!important;
	transition-duration:2s;
}

.view-half {
	opacity:0.5!important;
	transition-duration:1s;
}

.view-full {
	opacity:1!important;
	transition-duration:1s;
}

.dismiss {
	opacity:0!important;
	transition-duration:1s;
}
.displaynone {
	display:none;
}
footer {
	padding:0 1rem;
}
footer p{
	font-size:1rem;
	color:#888;
	text-align:center;
	padding:1rem 1rem;
margin:auto;
}
footer p span {

	display:inline-block;
	padding:0 0.2rem;
}
@media only screen and (min-width: 640px) {
	.header hgroup {
	}
	.header hgroup h1 {
		font-size:2.5rem;
		letter-spacing:1rem;
	}
	.header hgroup h2 {
		max-width:640px;
		margin-left:auto;
		margin-right:auto;
	}
	.header .line {
	
		max-width:640px;
	}
	.header hgroup h3  {
			font-size:7rem;
		letter-spacing:1rem;
		
	}
	
	.header hgroup h4,.header hgroup h5  {
		font-size:2rem;
	}
	
	.intro p {
		padding:4rem 2rem;
	}
	.rsvp h1 span {
		font-size:1.5rem;
	}
	
	
.concept .img1 hgroup {
}
.concept .img1,
	.concept .img2,
	.concept .img3 {
	}
.concept h1,
.concept h2 {
	font-size:2rem;
	line-height:2.4rem;
	
}
	.people {
		margin:0 2rem;
	}


	.portfolio .sketch, .portfolio .craft {
		width:50%;
		float:left;
	}
	
	.video{padding: 0 2rem 4rem 2rem;
}
.video .cover {
	left:1.9rem;
	right:1.9rem;
	bottom:3.9rem;
}
	
	.rsvp  {
		padding:4rem 0;
	}
	
	.rsvp h1 span {
		font-size:1.5rem;
		}
	.rsvp .info {
			margin:3rem 2rem;
	}
	.rsvp .info p {
		font-size:2.5rem;
		
		letter-spacing:0.6rem;
	}
	
	.rsvp .info .label {
		font-size:1.5rem;
	}
	
		.rsvp .info .desc,
		.rsvp .info .hashtag {
			font-size:2rem;
		}
		footer p {
			font-size:1.2rem;
			letter-spacing:0.1rem;
		}
	}
@media only screen and (min-width: 480px) {
}

@media only screen and (min-width: 590px) {
}
@media only screen and (min-width: 768px) {
	.header hgroup h1 {
		font-size:3rem;
		letter-spacing:1rem;
	}
	.header hgroup h2 span{
		font-size:1.7rem;
}
	
	.header hgroup h3 {
		max-width:768px;
			margin-left:auto;
		margin-right:auto;
	}
	.header hgroup h3 span {
		font-size:1.8rem;
		letter-spacing:0.1rem;
	}
	
	.intro p {
		font-size:1.6rem;
		max-width:900px;
		margin:auto;
		padding:6rem 2rem;
		letter-spacing:0.1rem;
	}
	.video {
		margin:auto;
		padding: 0 2rem 4rem 2rem;
	}
	
	.video video{
		
		
	}
	.rsvp h1 {
		max-width:800px;
		margin:auto;
			letter-spacing:0.15rem;
	
	}
	.rsvp ul {
		margin-bottom:0;
	}
	.rsvp .info {
		max-width:720px;
		margin: 4rem auto 0rem auto ;
	}
	.rsvp .world {
			padding: 4rem 6rem 0 6rem;
	
	}
	.rsvp .desc, .rsvp .hashtag {
			letter-spacing:0.15rem;
			
	
	} .rsvp .hashtag {
	margin:2.5rem auto;
	}
	.rsvp .info .fa-map-marker {
		font-size:2rem;
	}
	footer p {
		padding:1.5rem;
	}
	/*
	.container {
		width:auto;
	}
	.header .bg .inner {
		top:8rem;
		bottom:8rem;
		left:4rem;
		right:4rem;
	}
	
	.header hgroup h2 {
		font-size:2rem;
		max-width:100%;
		margin:auto;
		
	}
	
	
		
	.header.bar h1 {
	}
	
	.concept hgroup {
		margin-top:-3rem;
	}
	.concept hgroup h2 {
			font-size:1.25rem;
		letter-spacing:0.5rem;
	}
	
	.concept hgroup h1 {
			font-size:2.5rem;
		letter-spacing:0.8rem;
	}
	.people .name {
		padding-top:0;
	}
	
	.people .portrait {
		width:20rem;
		height:30rem;
	}
	.people .adrian .portrait {
		margin-right:2rem;
	}
	.people .uchida .portrait {
		float:right;
		margin-left:2rem;
	}
	.people .adrian .desc {
	}
	.people  .name {
		text-align:left;
	}
	.people .uchida .desc {
	}
	.people .uchida .name {
	}
	
	.collection hgroup h2 {
	}
	
	.collection hgroup h1 {
	}
	.rsvp .info {
		padding:4rem 2rem;
	}
	.rsvp h1 {
		margin:auto;
	}
	
	.rsvp .info .label {
	font-size:1.5rem;
}
.rsvp h1 {
		line-height:1;
}
	.rsvp h1 span {
		
		line-height:1.5;
		font-size:1.7rem;
		letter-spacing:0.1rem;
	}
	.rsvp .info p, .rsvp .info .desc, .rsvp .hastag span, .rsvp .info .fa-map-marker {
		font-size:2rem;
	}*/
}

@media only screen and (min-width: 900px) {
	.people .name h1, .people .name h2 {
		font-size:2rem;
		
	}
	.people .name h3 {
		font-size:1.5rem;
		
	}
/*	.concept {
		max-width:1000px;
	}
	*/
	.portfolio section hgroup h1 {
		font-size:2.5rem;
	}
	
	.portfolio section.collection hgroup h1 {
	font-size:2rem;
}
.portfolio section.collection hgroup h2 {
	font-size:4rem;
}

.portfolio section.collection hgroup h3 {
	font-size:1.8rem;
}
}

@media only screen and (min-width: 1390px) {
	
}