/*! HTML5 Boilerplate v7.2.0 | MIT License | https://html5boilerplate.com/ */

/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
@font-face {
      font-family: 'fontello';
      src: url('fonts/fontello.eot');
      src: url('fonts/fontello.eot') format('embedded-opentype'),
           url('fonts/fontello.woff') format('woff'),
           url('fonts/fontello.ttf') format('truetype'),
           url('fonts/fontello.svg') format('svg');
      font-weight: normal;
      font-style: normal;
    }

@font-face {
      font-family: 'happy';
      src: url('fonts/happy-times-NG_regular_master_web.ttf');
      src: url('fonts/happy-times-NG_regular_master_web.woff') format('woff'),
           url('fonts/happy-times-NG_regular_master_web.ttf') format('truetype');
      font-weight: lighter;
      font-style: normal;
    }

 @font-face {
    font-family: 'akzidenz-grotesk_bqMdEx';
    src: url('fonts/akzidenzgrotesk-mediumextended-webfont.woff2') format('woff2'),
         url('fonts/akzidenzgrotesk-mediumextended-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
     
     
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   
   Main Styles
   
   ========================================================================== */




html, body {
	fon
	margin:0px;
	padding:0px;
	font-size: 29px; 
	line-height: 30px;
	font-family: "akzidenz-grotesk_bqMdEx", sans-serif;
	font-weight: 100;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	color:#000;
	width:100%;
	height:100%;
	background-color: black;
	}

.happy{
	font-family: "happy";
	font-weight: 100;
}

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


/* header styles */

header {
	position: absolute;
	top:0px;
	left:0px;
	z-index: 6;
	padding: 46px;
	padding-bottom:0px;
}


h1 {
	font-family: "fontello", sans-serif;
	font-size: 0.8em;
	font-weight: normal;
	text-transform: uppercase;
	margin:0px;
	padding:0px;
}

h2 {
	font-family: "akzidenz-grotesk_bqMdEx";
	font-size: 0.8em;
	font-weight: normal;
	text-transform: ;
	margin:0px;
	padding:0px;
}

.intrologo {
	font-family: "fontello", sans-serif;
	font-size: 2em;
	font-weight: bolder;
	text-transform: uppercase;
	margin:0px;
	padding:0px;
}



p {
	margin: 0px;
	padding:0px;
}

.page-dot {
	font-family: "fontello";
	font-size: 1em;
	display: block;
	width:0px;
	height: 0px;
	border-radius: 50%;
	position: absolute;
	top:44px;
	right:100px;
	z-index: 6;
	background-color: #000;
	
}




.wrapper .slideshow {
	height:100vh;
	width:100%;
	position: relative;
}

.slide {
	width: 100%;
	height: 100vh;
	display: flex!important;
	align-items: center;
	justify-content: center;
	background-color: #fff;
}

.slick-dots {
	display: none!important;
}
p.caption {
	position: absolute;
	bottom:46px;
	left:46px;
	z-index: 6;
	font-size: 20px;
	line-height: 21px;
}


/* Different Slide Types  */


.slide.cover, .full {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}




.inset-wrapper {
	height:80%;
	width:100%;
	display: flex;
	align-items: center; /* horizontal */
    justify-content: center; /* vertical */

}

.inset-wrapper img {
	align-self: center!important;
}




.slide img {
	max-height: 100%;
	max-width: 100%;

	text-align: center;
	margin:0 auto;
	align-self: center!important;

}


img {
	align-self: center!important;
}



.slide.pair .left {
	width:50%;
	height: 100%;
	position: absolute;
	left:0px;
	
}

.slide.pair .right {
	width:50%;
	height: 100%;
	position: absolute;
	right:0px;
	
}


.pair-inset-wrapper {
	height:50%;
	width: 100%;
}


.pair .inset {
	display: flex;
	align-items: center;
	justify-content: center;
	
}


/* Slide nav options  */

body.white-logo h1 {
	color: #fff;
	transition: 0.25s color ease-in;
}

body.white-dot .page-dot {
	background-color: #fff;
	transition: 0.25s background ease-in;
}

body.white-caption .caption {
	color: #fff;
	transition: 0.25s color ease-in;
}



/* next / previous button */

#prev {
	width:40%;
	height: 100%;
	position: absolute;
	left:0px;
	top:0px;
	z-index: 4;
	cursor: w-resize;
}

#next {
	width:60%;
	height: 100%;
	position: absolute;
	right:0px;
	top:0px;
	z-index: 4;
	cursor: e-resize;
}




/* Welcome Screen */


.welcome {
	width:100%;
	height: 100%;
	position: absolute;
	top:0px;
	left:0px;
	display: flex!important;
	align-items: center;
	justify-content: center;
	padding:44px;
	box-sizing: border-box;
	z-index: 7;
	cursor: pointer;
	background-color: rgba(0,0,0,0.25);
	}
	

.welcome img {
	width: 100%;
	height: auto;
}

.welcome svg {
	width: 100%;
	height: auto;
}


body.hide-stuff header {
	opacity: 0;
}

body.hide-stuff .page-dot {
	opacity: 0;
}

body.hide-stuff .caption {
	opacity: 0;
}

.welcome.go-away {
	opacity: 0;
	z-index: 0;
	transition: all 0.4s ease-out;
}

.welcome.go-away svg {
	opacity: 0;
	transition: all 0.3s ease;
}


.slideshow {
	opacity: 0;
	transition: opacity 1s ease-in;
}

.slideshow.fadein {
	opacity: 1.0;
}


.slide {
	opacity: 0;
	transition: opacity 1s ease-in;
}

.slide.fadein {
	opacity: 1.0;
}




/* Info page */

.info-page {
	width: 100%;
	height:100%;
	position: absolute;
	top:0px;
	left:0px;
	background-color: #000;
	z-index: 5;
}

section {
	width: 35%;
	margin:46px;
	max-width:500px;
	margin-top:105px;
	opacity: 0;
	transition: all 0.35s ease-in;
	
	
}

section h2 {
	margin-bottom: 1em;
	color:#fff;
}

.info-page {
	opacity: 0;
	z-index: 0;
	transition: all 0.25s ease-in;
}

body.info-page-open .info-page {
	opacity: 1.0;
	z-index: 5;
}

.page-dot.make-dot-white {
	background-color: #fff!important;
}

h1.make-logo-white {
	color: #fff!important;

}



body.info-page-open section {
	opacity: 1.0;
	transition-delay: 0.3s;
	
}


a {
	transition: 0.25s opacity ease-in-out;
}

h2 a:hover {
	opacity: 0.55;
}


/* Click animation */

.page-dot:not(:active) {
    /* now keep red background for 1s */
    transition: scale 1000ms step-end;
}

.page-dot:active {
    transform: scale(1);
}




/* Site Credits Styling */

#site-credits {
	z-index: 6;
	position: absolute;
	padding: 46px;
	bottom:0px;
	right:0px;
	
}

#site-credits a {
	color: #fff;
	text-transform: uppercase;
	font-size: 20px;
	line-height: 21px;
	display: inline-block;
}


#site-credits a:hover {
	opacity: 0.55;
}

.slick-dotted.slick-slider {	
    margin-bottom: 0px!important;
}


.bg-top {
	background-position: top!important;
}

.bg-bottom {
	background-position: bottom!important;
}








/* Sort info page width */

@media only screen and (max-width: 1260px) {
	
		section {
			width:50%;
		}
	
	
	}






/* Mobile MEdia Queries */

@media only screen and (max-width: 767px) {
   
   header {
   		padding: 22px;
   		padding-bottom:0px;
	}

	.page-dot {
		top:22px;
		right:50px;
		width:0px;
		height: 0px;
	}
	
	.page-dot:after {
    content:'';
    position:absolute;
    top:-20px; bottom:-20px; 
    left:-20px; right:-20px;
    z-index: -2; 
}
	
	
	p.caption {
	bottom:22px;
	left:22px;
	font-size: 12px;
	line-height: 14px;
	}

	

	.inset-wrapper {
		height:60%;
		width:100%;
	}

	
	.slide.cover {
		background-size: 340%;
	}

	.inset.mobile-hide {
		display: none!important;
	}
	
	.full.mobile-hide {
		display: none!important;
	}


	html, body {
		font-size: 24px;
		line-height: 24px;
/* 		overflow: hidden; */
	}
	
	.slide.pair .left {
	width:100%;
	height: 100%;
	}

	.slide.pair .right {
	width:100%;
	height: 100%;
	}
	
	body.black-logo h1, body.black-logo .caption {
		color: #000;
	}

	body.black-logo .page-dot {
		background-color: #000;
	}
	
	section {
	width: 90%;
	margin:22px;
	margin-top:65px;
	}
	
	.welcome {
		padding:22px;
		}

	.slideshow {
	width:100%;
	height: 100%!important;
	position: absolute;
	top:0px;
	left:0px;
	}
	

	.pair-inset-wrapper {
	height:65%;
	width: 100%;
	}
	
	#site-credits {
   		position: static;
   		padding:0px;
   		padding-top:30px;
   		padding-bottom:30px;
   		
	}
	
	.info-page {
	width: 100%;
	min-height:100%;
	height:auto;
	}
	
	.bg-top, .bg-bottom {
		background-position:center center!important;
	}
	


/* 	Fix the Flexbox bug */


.slide.inset {
	display: block!important;
	position: relative;

}

.inset-wrapper {
	display: block!important;
	position: absolute;
	top:50%;
	transform: translateY(-50%);
}


.inset-wrapper img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}




	
	
	
/* 	Dealing with the extra white clas on mobile */
	body.white-logo-mobile h1, body.white-logo-mobile .caption {
		color: #fff;
	}
	
	body.white-logo-mobile .page-dot {
		background-color: #fff;
	}

	
   
}