* {margin:0;padding:0;font-family:"HelveticaNeue-Thin";text-align:center;text-decoration:none;font-weight:normal;overflow-x:hidden;}
html {background:#b1b1b1;}

	header {
	background: #b1b1b1 url(/images/mark.jpg) center/cover;
	background-blend-mode:multiply;
	width:100%;
	height:100%;
	color:white;
}

nav {position:absolute;width:90%;left:5%;right:5%;top:3em;font-size:13pt;letter-spacing:1.2pt;animation: appear}
nav a {color:white;text-decoration:none;font-weight:bold;padding:0 .3em;}
nav a:hover, .current {text-decoration:underline;}
			
header div {
	text-align: center;
	position:absolute;
	height:54%;
	width:80%;
	bottom:0;
	left:10%;
	right:10%;
	min-height:150px;
}

h1,h2,h3,.share,.peppermint,.table,.lookbook_link {
	margin-left: auto;
	margin-right: auto;
}

h2,h3,nav,q,.table, .submit_button, .lookbook_link {
	text-transform: uppercase
}

h1 {
	background:url(/images/xhm_logo.png) no-repeat right 85%/16%;
	text-align:left;
	animation: appear 1s;
	max-width: 760px;
}						

h2 { 
	margin-top:5pt;
	font-family:"HelveticaNeue-Light";	
	letter-spacing: 1.2pt;
	animation: appear 2s;
	max-width: 750px;
}


header a {
	display: block;
	cursor: hand;
	position:absolute;
	bottom:30px;
	left:50%;
	width:30px;
	height:17px;
	background: url(../images/arrow.svg) no-repeat center;
	margin-left:-15px;
	animation: blink 2s;
	animation-iteration-count: infinite;
}

.lookbook_link {
	font-size: 20pt;
	display:block;
	border:4px solid black;
	width:200px;
	margin-top:30%;
	padding:10pt 10pt;
	font-weight:bold;
	color:black;
	letter-spacing: 1.4pt;
}

.lookbook_link:hover {
	background: #ca0e0e;
	border:4px solid #ca0e0e;
	color:white;
}


h3 {
font-weight: bold;
letter-spacing: 1.4pt;
max-width: 600px
}
			
hr {width:40%;min-width: 100px;max-width: 200px;margin:20pt auto;}

.table {width:260px;height:75px;margin-top: 20px;padding:0;}
	.row {width:260px;height:35px;font-size: 8pt;}
	.row div {float:left}
	
		.t1 {height: 30px;width: 140px;background: url(/images/t.svg) left 30%/20px repeat-x;}
		.plus {height: 30px;width: 50px;background: url(/images/plus.svg) center 40%/16px no-repeat;}
		.j1 {height: 30px;width: 25px;background: url(/images/j.svg) center top/15px no-repeat;}
		
		
		.t2 {height: 34px;width: 150px;}
		.j2 {height: 34px;width: 110px;}


form h3 {margin-bottom:20px;}

.email, .submit_button {font-size:14pt;border: none;height:50px}

.email {width:230px;text-align: left;background: #ccc;padding:10px 8px;}

.submit_button {background: #ca0e0e;color:white;font-weight: bold;letter-spacing: 1.3pt;cursor: hand;padding:10px 20px;}
.submit_button:hover {background: #950f0f;}
.submit_button:active {background: black}

.share {color:white;background: #454545;width: 100%;min-height: 300px}
.share a {background: #3b5998;color:white;font-weight: bold;letter-spacing: 1.3pt;border:none;padding:10pt 20pt;font-size: 14pt;margin: 5pt auto}
.share a:hover {background:#263e6d}
.share a:active {background:black}
.share h3 {margin-top:20px}

.press {color:white;background: #454545;width: 100%;display: block;padding:50px 0;}
.press a {display: inline-block;width:122px;vertical-align: top;color:white;text-decoration: none;cursor:pointer;cursor:hand;text-transform: uppercase;font-size: 10px;margin:25px 5px 25px 5px;padding:50px 0 0 0;letter-spacing: 1.2pt;}

.press a:hover {opacity:0.95}

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { 

.email {width: 150px;}}


q {
	display: block;	
	quotes: "\201C" "\201D" "\2018" "\2019";
	width:70%;
	margin:30pt auto;
	letter-spacing: 1.4pt;
	max-width:840px;
	min-width: 300px;
}

.author {
width:90%;
	margin-left:auto;
	margin-right:auto;
}


footer {min-height:300px;width:100%;background: black;color: #c8c8c8;font-size: 9pt;}
footer a {color:white;text-decoration: underline}


.peppermint {
	max-width:1100px;
	overflow:hidden;
}

figure {
	width:100%;	
	overflow:hidden;
}


/* Slider */

.peppermint.peppermint-active {
    position: relative;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
}

.peppermint.peppermint-active .peppermint-slides {
    position: relative;
    overflow: hidden; /* clearfix */
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

.peppermint.peppermint-active .peppermint-slides > * {
    float: left;
    margin: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

.peppermint.peppermint-active .peppermint-slides a:active,
.peppermint.peppermint-active .peppermint-slides a:active img {
    outline: none;
}

.peppermint.peppermint-active,
.peppermint.peppermint-active .peppermint-dots,
.peppermint.peppermint-active .peppermint-slides,
.peppermint.peppermint-active .peppermint-slides > * {
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}

.peppermint.peppermint-mouse .peppermint-slides {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}

.peppermint.peppermint-mouse.peppermint-drag .peppermint-slides * {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}

/* Slider Appearance */

.peppermint {
    text-align: center;
}

.peppermint figure {
    margin: 0 0 1.5em 0;
}

.peppermint figure img {
    vertical-align: top;
    max-width: 100%;
}

.peppermint figure figcaption {
    font-style: italic;
    color: #787575;
    font-size: 0.8em;
    margin-top: 0.5em;
}

.peppermint.peppermint-active {
    margin-bottom: 1.5em;
}

.peppermint-slides {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

/* dots */
ul.peppermint-dots {
    margin: 0em 0;
    padding: 0;
    height:40px;
    border: none;
    text-align: center;
    list-style-type: none;
}

.peppermint.peppermint-active ul.peppermint-dots {
    margin: 0 0 0.6em 0;
}

.peppermint.peppermint-active .peppermint-slides + ul.peppermint-dots {
    margin: 0.6em 0 0 0;
}

ul.peppermint-dots > li {
    display: inline-block;
    position: relative;
    padding: 0.4em 0.4em;
    width: 10px;
    height: 10px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* ie7 fallback */
    *display: inline;
    *zoom: 1;
}

ul.peppermint-dots > li.peppermint-mouse-clicked,
ul.peppermint-dots > li:active {
    outline: 0;
}

ul.peppermint-dots > li > span {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -4px 0 0 -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
}

ul.peppermint-dots > li.peppermint-active-dot > span {
    background: #ca0e0e;
}
			
/* Lookbook */

.crossfade > figure {
	animation: imageAnimation 30s linear infinite 0s;
	backface-visibility: hidden;
	color: white;
	height: 100%;
	left: 0px;
	opacity: 0;
	position: absolute;
	top: 0px;
	width: 100%;
	z-index: -5;
}

.crossfade > figure:nth-child(1) {
background: url('/images/photos/001.jpg') center/cover;
}
.crossfade > figure:nth-child(2) {
	animation-delay: 3s;
	background: url('/images/photos/002.jpg') center/cover;
}
.crossfade > figure:nth-child(3) {
	animation-delay: 6s;
	background: url('/images/photos/003.jpg') left/cover;
}
.crossfade > figure:nth-child(4) {
	animation-delay: 9s;
	background: url('/images/photos/004.jpg') center/cover;
}
.crossfade > figure:nth-child(5) {
	animation-delay: 12s;
	background: url('/images/photos/005.jpg') 65% top/cover;
}
.crossfade > figure:nth-child(6) {
	animation-delay: 15s;
	background: url('/images/photos/006.jpg') center/cover;
}
.crossfade > figure:nth-child(7) {
	animation-delay: 18s;
	background: url('/images/photos/007.jpg') center/cover;
}
.crossfade > figure:nth-child(8) {
	animation-delay: 21s;
	background: url('/images/photos/008.jpg') center/cover;
}
.crossfade > figure:nth-child(9) {
	animation-delay: 24s;
	background: url('/images/photos/009.jpg') 75% center/cover;
}
.crossfade > figure:nth-child(10) {
	animation-delay: 27s;
	background: url('/images/photos/010.jpg') center/cover;
}


/* Animations */

@keyframes imageAnimation {
	0% { animation-timing-function: ease-in; opacity: 0; }
	2% { animation-timing-function: ease-out; opacity: 1; }
	17% { opacity: 1  }
	19% { opacity: 0  }
	100% { opacity: 0  }}

@keyframes appear {
    0% { opacity: 0; }
    50% { opacity: 0; }
    100% { opacity: 1; }}

@keyframes blink {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }}