/* General */

	/* Fonts */

		@font-face {
			font-family: 'Butler Medium';
			src: url('../fonts/butler-medium.otf') format('opentype'), url('../fonts/butler-medium.woff2') format('woff2'), url('../fonts/butler-medium.woff') format('woff');
		}

		@font-face {
			font-family: 'Proxima Nova Regular';
			src: url('../fonts/proxima-nova-regular.woff2') format('woff2'), url('../fonts/proxima-nova-regular.woff') format('woff'), url('../fonts/proxima-nova-regular.ttf') format('truetype');
		}

		@font-face {
			font-family: 'Proxima Nova Semibold';
			src: url('../fonts/proxima-nova-semibold.woff2') format('woff2'), url('../fonts/proxima-nova-semibold.woff') format('woff'), url('../fonts/proxima-nova-semibold.ttf') format('truetype');
		}

	/* Styles */

		* {
			-webkit-font-smoothing: antialiased;
			text-shadow: rgba(0,0,0,.01) 0 0 1px;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}

		body {
			font-family: 'Proxima Nova Regular', helvetica, sans-serif;
			line-height: 1;
			color:#0E0E13;
			height: 100vh;
			background: #FFF;
		}

		h1 {
			font-family: 'Butler Medium', georgia, serif;
			font-size: 45px;
			line-height: 1.1;
		}

		h2 {
			font-family: 'Proxima Nova Semibold', helvetica, sans-serif;
			font-size: 16px;
			text-transform: uppercase;
			letter-spacing: 0.1px;
		}

		h3 {
			font-family: 'Butler Medium', georgia, serif;
			font-size: 32px;
			line-height: 1;
		}

		a {
			font-family: 'Proxima Nova Regular', helvetica, sans-serif;
			font-size: 16px;
			color: #FFF;
			text-decoration: underline;
			letter-spacing: 0.1px;
		}

			a:hover, a:focus {
				text-decoration: none;
			}

		li {
			display: inline;
			padding-left: 35px;
		}

		img	{
			width: 100%;
		}

		.a-left, .a-center, .a-right {
			overflow: hidden;
			width: 92%;
		}

		.a-left {
			float: left;
		}

		.a-center {
			margin: 0 auto;
		}

		.a-right {
			float: right;
		}





/* Home */


	.top-bar {
		background: #0E0E13;
		/*border-bottom: 1px solid #FFF;*/
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 2;
	}

		.top-wrapper {
			overflow: hidden;
			clear: both;
			width: 1260px;
			margin: 0 auto;
			padding:25px 0;
			color: #FFF;
		}

			.top-wrapper .logo-wrapper {
				float:left;
			}

			.top-wrapper .navigation {
				float:right;
			}

	.wrapper {
		width: 1260px;
		margin: 76px auto 0 auto; /* fix for fixed header distance */
	}

		.wrapper .intro	{
			text-align: center;
			width: 70%;
			margin:0 auto;
			display: table;
			height: 500px;
			overflow: hidden;
		}

			.wrapper .intro h1 {
				display: table-cell;
				vertical-align: middle;
			}

				.wrapper .intro hr {
					width: 7%;
					margin: 30px auto;
					    /*border-top: 1px solid #ccc;*/

				}

				.wrapper .intro span {
					font-family: 'Proxima Nova Regular', helvetica, sans-serif;
					line-height: 1;
					font-size: 20px;
					display: block;
				}

			.wrapper .row .character {
				width: 33.33%;
    			display: inline-block;
    			text-align: center;
			}

				.wrapper .row .character:first-child {
					text-align: left;
				}

				.wrapper .row .character:last-child {
					text-align: right;
				}

	.row {
		margin-bottom: 50px;
	}

	.quote {
		border:2px solid #0E0E13;
		height: 382px;
		text-align: center;
		padding: 0 50px;
		display: table;
		overflow: hidden;
	}

		.quote h3 {
			display: table-cell;
	    	vertical-align: middle;
		}

			.quote span {
				font-family: 'Proxima Nova Regular', helvetica, sans-serif;
				line-height: 1;
				font-size: 15px;
				display: block;
				padding-top: 30px;
			}


/* Character specific */

	.character-wrapper {
	    position:relative;
	    width: 92%;
	}

		.character-wrapper img {
		    width:100%;
		    vertical-align:top;
		}

		.character-wrapper:after, .character-wrapper:before {
		    position:absolute;
		    opacity:0;
		    transition: all 0.5s;
		    -webkit-transition: all 0.5s;
		}

		.character-wrapper:after {
		    content:'\A';
		    width:100%; height:100%;
		    top:0; left:0;
		    background:rgba(0,0,0,0.8);
		}

		.character-wrapper:before {
		    content: url(../img/zoom.svg);
		    height: 25px;
		    width:100%;
		    color:#fff;
		    z-index:1;
		    position: absolute;
			margin:0;
			top: 50%;
			left: 50%;
			bottom:0;
	  		transform: translate(-50%, -50%);
		    padding:4px 10px;
		    text-align:center;
		    box-sizing:border-box;
		    -moz-box-sizing:border-box;
		}

			.character-wrapper:hover:after, .character-wrapper:hover:before {
		    	opacity:1;
			}


/* Lightbox */

	#lightbox {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 3;
    }

        #lightbox p {
            color: #fff;
            font-size: 18px;
        }

    	#lightbox #wrapper {
    		margin:0 auto;
    		width: 600px;
    	}

    /* Lightbox Title */

    #title {
    	display: none;
    }

    .lb-title {
    	display: none;
    }

    /* Lightbox Navigation */

    #nav {
        float: right;
        padding:22px 0;
    }

        #nav .slide-nav {
            padding:5px;
        }

            #nav .slide-nav img {
                width:12px;
            }

    /* Lightbox Slideshow */

    #slideshow {
    	clear: both;
    }

    	#slideshow img {
    		width: 600px;
    	}

	    #slideshow ul {
	        margin:0;
	        padding:0;
	        height: 100%;
	        text-align: center;
	    }

	    	#slideshow ul li {
	    		list-style-type:none;
	    		text-align: center;
	    		display: block;
	    		padding: 0;
	    	}



/* Responsive */

	/* Tablet - portrait */

		@media (max-width:1279px) {

			h1 {
				font-size: 38px;
			}

			.top-wrapper, .wrapper {
				width: 668px;
			}

			.wrapper .intro {
				width: 100%;
				height: 350px;
			}

		}

		@media only screen
		and (min-device-width: 768px)
		and (max-device-width: 1279px)
		and (-webkit-min-device-pixel-ratio: 2) {

			h1 {
				font-size: 38px;
			}

			.top-wrapper, .wrapper {
				width: 668px;
			}

			.wrapper .intro {
				width: 100%;
				height: 350px;
			}
		}


	/* Mobile - portrait */

		@media (max-width:768px) {

			h1 {
				font-size:25px;
			}

			h2 {
				font-size: 15px;
			}

			a {
				font-size: 12px;
			}

			ul {
				padding-top: 15px;
			}

			li {
				padding:0 10px;
			}

			.top-wrapper, .wrapper {
				width: 100%;
			}

			.top-wrapper {
				padding:20px 0;
			}

			.top-wrapper .logo-wrapper, .top-wrapper .navigation {
				float: none;
				text-align: center;
			}


			.wrapper {
				margin: 86px auto 0 auto; /* fix for fixed header distance */
			}

				.wrapper .intro {
					height: 275px;
				}

					.wrapper .intro h1 {
						padding: 0 30px;
					}

					.wrapper .intro hr {
						margin: 20px auto;
					}

					.wrapper .intro span {
						font-size: 15px;
					}

				.wrapper .row .character {
					width: 100%;
					margin-bottom: 7px;
					text-align: center !important; /* overrule first-child and last-child only for mobile */
				}

					.wrapper .row .character.m-hidden {
						display: none;
					}

			.character-wrapper {
				overflow: hidden;
				width: 100%;
			}

				.character-wrapper img {
					transform: scale(1.15);
				}

			.quote {
				display: none;
			}

			.row {
				margin: 0;
			}

		}

		@media only screen
		and (min-device-width: 320px)
		and (max-device-width: 768px)
		and (-webkit-min-device-pixel-ratio: 2) {



		}



/* Animation */

	.fade-in {
		animation: fadeIn ease 1s;
		-webkit-animation: fadeIn ease 1s;
		-moz-animation: fadeIn ease 1s;
		-o-animation: fadeIn ease 1s;
		-ms-animation: fadeIn ease 1s;
	}

	@keyframes fadeIn{
	  0% {
	    opacity:0;
	  }
	  100% {
	    opacity:1;
	  }
	}

	@-moz-keyframes fadeIn {
	  0% {
	    opacity:0;
	  }
	  100% {
	    opacity:1;
	  }
	}

	@-webkit-keyframes fadeIn {
	  0% {
	    opacity:0;
	  }
	  100% {
	    opacity:1;
	  }
	}

	@-o-keyframes fadeIn {
	  0% {
	    opacity:0;
	  }
	  100% {
	    opacity:1;
	  }
	}

	@-ms-keyframes fadeIn {
	  0% {
	    opacity:0;
	  }
	  100% {
	    opacity:1;
	  }
	}