@charset "UTF-8";
/* Simon Schmidt CSS Document */


html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	font-family: acumin-pro-wide, sans-serif;
	font-weight: 500;
	-webkit-font-smoothing: antialiased;
	cursor: default;
	font-size: 15px;
	letter-spacing: 0.04em;
	background: #fff;
	color: #000;
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
	overflow-x: hidden;
}

body.white{
	background: #fff;
	color: #000;
}

#images{
	top: 0;
	width: 100%;
	text-align: center;
	position: absolute;
	z-index: -1;
}

#images div{
	width: 100%;
	height: 100vh;
	margin-bottom: 12vh;
	line-height: 0;
}

#images div:nth-of-type(3){
	margin-bottom: 0;
}

#images img{
	margin-top: 0vh;
	height: 100vh;
	position: relative;
}

#images .large{
	height: auto;
}


#images .large img{
	margin-top: 0;
	height: auto;
	width: 48%;
}

#left{
	position: fixed;
	top: 30px;
	left: 30px;
	width: calc(26% - 53px);
	height: calc(100vh - 60px);
	text-align: left;
	z-index: 0 !important;
}

.logo{
	position: fixed;
	top: 30px;
	left: 30px;
	cursor: pointer;
	background: url(../img/owoi-logo.png) -4px -4px;
	width: 92px;
	height: 92px;
	border: 3px solid #000;
	z-index: 2 !important;
}

.logo img{
	width: 100px;
	display: none;
}

#left .select{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 74px;
}

.select img{
	display: block;
	margin-top: 8px;
	width: 65px;
	height: 100px;
	border: 2px solid #fff;
	cursor: pointer;
}

.select img.active, .select img:hover{
	border: 2px solid #000;
}

#right{
	position: fixed;
	top: 30px;
	right: 30px;
	width: calc(26% - 57px);
	height: calc(100vh - 60px);
	text-align: left;
	z-index: 0 !important;
}

#right .select{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 74px;
}

.text{
	margin-top: 90px;
	width: 120%;
	text-align: justify;
	bottom: 275px;
	position: absolute;
}

#right .text{
	margin-top: 90px;
	width: 120%;
	margin-left: -20%;
	text-align: justify;
	bottom: 275px;
	position: absolute;
	-webkit-hyphens: auto;
 	-moz-hyphens: auto;
 	-ms-hyphens: auto;
  	hyphens: auto;
}

.links-top{
	position: fixed;
	top: 30px;
	right: 30px;
	width: 100%;
	text-align: right;
	font-size: 13px;
	line-height: 14px;
	z-index: 9999;
}

.links-top a{
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid #000;
	margin-left: 20px;
	cursor: pointer;
}

.menu{
	position: fixed;
	top: 130px;
	left: 30px;
	margin-top: 50px;
	font-size: 13px;
	z-index: 2 !important;
}

.menu p{
	font-size: 13px;
	line-height: 14px;
	margin: 0px;
	margin-left: 10px;
	margin-top: 3;
	padding-top: 7px;
	padding-bottom: 3px;
	display: inline-block;
	cursor: pointer;
}

.menu p:hover{
	border-bottom: 2px solid #000;
	padding-bottom: 2px;
	margin-bottom: -1px;
}

.menu p.active{
	border-bottom: 2px solid #000;
	padding-bottom: 2px;
	margin-bottom: -1px;
}

.size-guide, .customer-care{
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid;
	line-height: 16px;
	margin-top: 15px;
	margin-right: 20px;
	font-size: 13px;
	display: inline-block;
	cursor: pointer;
}

.size-guide:hover,  .customer-care:hover{
	border-bottom: none;
}


.selection-01{
	height: 42px;
	line-height: 47px;
	border-top: 2px solid #000;
	width: calc(80% - 23px);
	text-align: center;
	bottom: 133px;
	position: absolute;
	cursor: pointer;
	-webkit-transition:  all 0.3s; /* Safari */
    transition: all 0.3s;
	text-transform: uppercase;
}	

.selection-01 span{
	position: absolute;
	left: 0;
	width: calc(100% - 0px);
	text-align: center;
}

.selection-01 span:nth-of-type(2), .selection-01 span:nth-of-type(3), .selection-01 span:nth-of-type(4){
	display: none;
}

.selection-01-sub{
	height: 179px;
	line-height: 46px;
	border: 2px solid #000;
	width: calc(80% - 27px);
	text-align: center;
	bottom: 175px;
	position: absolute;
	background: #fff;
	cursor: pointer;
	display: none;
	text-transform: uppercase;
}

.selection-01-sub p{
	height: 45px;
	margin: 0;
	-webkit-transition:  all 0.2s; /* Safari */
    transition: all 0.2s;
	size: 15px;
	letter-spacing: 0.00em;
}

.selection-01-sub p:hover{
	color: #fff;
	background: #000;
}

.selection-02{
	height: 42px;
	line-height: 47px;
	border-top: 2px solid #000;
	width: calc(20% + 4px);
	margin-left: calc(80% - 10px);
	text-align: left;
	bottom: 133px;
	position: absolute;
	cursor: pointer;
}

.selection-02 span{
	position: absolute;
	width: calc(100% - 0px);
	text-align: center;
}

.selection-02 span:nth-of-type(1), .selection-02 span:nth-of-type(3){
	display: none;
}

.selection-02-sub{
	height: 134px;
	line-height: 46px;
	border: 2px solid #000;
	width: 20%;
	margin-left: calc(80% - 10px);
	text-align: center;
	bottom: 175px;
	position: absolute;
	background: #fff;
	cursor: pointer;
	display: none;
}

.selection-02-sub p{
	height: 45px;
	margin: 0;
	-webkit-transition:  all 0.2s; /* Safari */
    transition: all 0.2s;
}

.selection-02-sub p:hover{
	color: #fff;
	background: #000;
}

.hire{
	height: 45px;
	line-height: 46px;
	border: 2px solid #000;
	background: #000;
	color: #fff;
	width: calc(100% - 10px);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin-top: 12px;
	bottom: 70px;
	position: absolute;
	-webkit-transition:  all 0.3s; /* Safari */
    transition: all 0.3s;
	cursor: pointer;
}

.hire:hover{
	border: 2px solid #000;
	background: transparent;
	color: #000;
}


#size-guide{
	margin: auto;
	background: #131B59 url(img/close.png) no-repeat;
	background-position: right 20px top 20px;
	background-size: 25px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	 -webkit-transform: translate(-50%, -50%);
	 color: #fff;
	 display: none;
	 cursor: pointer;
	 text-align: center;
}

#customer-care{
	margin: auto;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 350px;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	text-align: center;
	color: #fff;
	display: none;
	cursor: pointer;
}

#customer-care .close{
	left: calc(50% - 20px);
	margin-top: 35px;
}

.close{
	position: absolute;
  	width: 32px;
  	height: 32px;
  	opacity: 1;
	left: calc(50% - 16px);
	margin-top: 25px;
	border-bottom: none !important;
}

.close:before, .close:after {
 	position: absolute;
 	left: 10px;
	content: ' ';
	height: 33px;
	width: 2px;
	background-color: #fff;
}

.close:before {
	transform: rotate(45deg);
}

.close:after {
	transform: rotate(-45deg);
}

.table{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	 -webkit-transform:translate(-50%, -50%);
	 position: fixed;
	 text-align: center;
}

.table h1, #customer-care h1{
	text-align: center;
	font-size: 17px;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 0px;
	margin-top: -10px;
}

#customer-care a{
	display: inline-block;
	margin: 10px;
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid #fff;
}

table {
	width: 500px;
    border-collapse: collapse;
	border: none;

}

th, td {
    padding: 10px;
	padding-bottom: 11px;
    text-align: left;
    border-bottom: 2px solid #fff;
	text-align: center;
	font-size: 15px;
}

th{
	width: 50%;
    font-weight: 500;
	text-transform: uppercase;
	text-align: left;
	letter-spacing: 0.01em;
}

td{
	width: 50%;
	text-align: left;
	
}

#styling, #photography, #creative-direction{
	top: 0;
	width: 100%;
	display: none;
	z-index: -1;
}

#styling .img-01{
	position: absolute;
	left: 20%;
	top: 7vh;
	width: 28%;
	z-index: -1;
}

#styling .img-02{
	position: absolute;
	left: 55%;
	top: 40%;
	width: 35%;
	z-index: -1;
}

#styling .img-03{
	position: absolute;
	top: 110%;
	left: 10%;
	width: 35%;
	z-index: -1;
}

#styling .img-04{
	position: absolute;
	top: 180%;
	left: 56%;
	width: 30%;
	z-index: -1;
}

#styling .img-05{
	position: absolute;
	top: 220%;
	left: 13%;
	width: 30%;
	z-index: -1;
}

#styling .img-06{
	position: absolute;
	left: 51%;
	top: 290%;
	width: 35%;
	z-index: -1;
	margin-bottom: 9%;
}

#photography .img-01{
	position: absolute;
	left: 55%;
	top: 7vh;
	width: 28%;
	z-index: -1;
}

#photography .img-02{
	position: absolute;
	left: 8%;
	top: 40%;
	width: 35%;
	z-index: -1;
}

#photography .img-03{
	position: absolute;
	top: 110%;
	left: 52%;
	width: 35%;
	z-index: -1;
}

#photography .img-04{
	position: absolute;
	top: 180%;
	left: 12%;
	width: 30%;
	z-index: -1;
}

#photography .img-05{
	position: absolute;
	top: 220%;
	left: 55%;
	width: 28%;
	z-index: -1;
}

#photography .img-06{
	position: absolute;
	left: 25%;
	top: 300%;
	width: 35%;
	z-index: -1;
	margin-bottom: 9%;
}

#creative-direction .img-01{
	position: absolute;
	left: 50%;
	top: 5%;
	width: 40%;
	z-index: -1;
}

#creative-direction .img-02{
	position: absolute;
	left: 6%;
	top: 40%;
	width: 45%;
	z-index: -1;
}

#creative-direction .img-03{
	position: absolute;
	top: 110%;
	left: 52%;
	width: 45%;
	z-index: -1;
}

#contact{
	margin: auto;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 200%;
	height: 120vh;
	line-height: 120vh;
	font-size: 50px;
	transform: translate(-50%, -50%) rotate(-8deg);
	-webkit-transform: translate(-50%, -50%) rotate(-8deg);
	text-align: center;
	color: #000;
	background: #fff;
	cursor: pointer;
	z-index: 0 !important;
	display: none;
}

#contact a{
	color: inherit;
	text-decoration: none;
}

#social{
	margin: auto;
	position: fixed;
	top: 00%;
	left: 00%;
	width: 100%;
	height: 100vh;
	text-align: center;
	color: #000;
	background: #fff;
	cursor: pointer;
	z-index: 0 !important;
	display: none;
}

.links{
	margin: auto;
	position: fixed;
	top: 50%;
	left: 50%;
	font-size: 30px;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	color: #000;
	cursor: pointer;
}

.links a{
	display: inline-block;
	margin-bottom: 7px;
	line-height: 40x;
	color: inherit;
	text-decoration: none;
}

.links a:hover{
	border-bottom: 2px solid #000;
	margin-bottom: 5px;
}

#mobile, #mobile-text, #mobile-landscape{
	display: none;
}

/* iPhone 6 Portrait */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) {

	body{
		width: 750px;
		overflow: none;
		width: auto !important;
		height: auto !important;
	}
	
	.menu, #left, #right, .links-top, #images, .logo{
		display: none;
	}
	
	#mobile{
		display: block;
		width: 100%;
	}
	
	#mobile-text{
		display: block;
		margin-top: 70px;
		width: calc(100% - 100px);
		margin-left: 50px;
		font-size: 50px;
		-webkit-hyphens: auto;
 		-moz-hyphens: auto;
 		-ms-hyphens: auto;
  		hyphens: auto;
		margin-bottom: 50px;
	}
	
	#mobile-text a{
		text-decoration: none;
		color: inherit;
	}
	
	#mobile-text img{
		width: calc(100% - 0px);
		margin-top: 50px;
		margin-bottom: 20px;
	}
	
	.logo{
		position: fixed;
		top: 50px;
		left: 0px;
		right: 0px;
		margin: auto;
		cursor: pointer;
		background: url(../img/owoi-logo-iphone.png) 0px 0px;
		background-size: 250px;
		width: 250px;
		height: 250px;
		border: 0px solid #000;
		z-index: 2 !important;
	}

}

/* iPhone 6 Landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {

	body{
		font-size: 60px !important;
	}

	.menu, #left, #right, .links-top, #images, .logo{
		display: none;
	}
	
	#mobile-landscape{
		display: block;
		margin-top: 50px;
		width: calc(100% - 100px);
		margin-left: 50px;
		font-size: 30px;
		-webkit-hyphens: auto;
 		-moz-hyphens: auto;
 		-ms-hyphens: auto;
  		hyphens: auto;
		text-align: center;
}