/*!
 * fullPage 2.8.2
 * https://github.com/alvarotrigo/fullPage.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 */.fp-enabled body,html.fp-enabled{margin:0;padding:0;overflow:hidden;-webkit-tap-highlight-color:transparent}#superContainer{height:100%;position:relative;-ms-touch-action:none;touch-action:none}.fp-section{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.fp-slide{float:left}.fp-slide,.fp-slidesContainer{height:100%;display:block}.fp-slides{z-index:1;height:100%;overflow:hidden;position:relative;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.fp-section.fp-table,.fp-slide.fp-table{display:table;table-layout:fixed;width:100%}.fp-tableCell{display:table-cell;vertical-align:middle;width:100%;height:100%}.fp-slidesContainer{float:left;position:relative}.fp-controlArrow{-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-ms-user-select:none;position:absolute;z-index:4;top:50%;cursor:pointer;width:0;height:0;border-style:solid;margin-top:-38px;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.fp-controlArrow.fp-prev{left:15px;width:0;border-width:38.5px 34px 38.5px 0;border-color:transparent #fff transparent transparent}.fp-controlArrow.fp-next{right:15px;border-width:38.5px 0 38.5px 34px;border-color:transparent transparent transparent #fff}.fp-scrollable{overflow:hidden;position:relative}.fp-scroller{overflow:hidden}.iScrollIndicator{border:0!important}.fp-notransition{-webkit-transition:none!important;transition:none!important}#fp-nav{position:fixed;z-index:100;margin-top:-32px;top:50%;opacity:1;-webkit-transform:translate3d(0,0,0)}#fp-nav.right{right:17px}#fp-nav.left{left:17px}.fp-slidesNav{position:absolute;z-index:4;left:50%;opacity:1}.fp-slidesNav.bottom{bottom:17px}.fp-slidesNav.top{top:17px}#fp-nav ul,.fp-slidesNav ul{margin:0;padding:0}#fp-nav ul li,.fp-slidesNav ul li{display:block;width:14px;height:13px;margin:7px;position:relative}.fp-slidesNav ul li{display:inline-block}#fp-nav ul li a,.fp-slidesNav ul li a{display:block;position:relative;z-index:1;width:100%;height:100%;cursor:pointer;text-decoration:none}#fp-nav ul li a.active span,#fp-nav ul li:hover a.active span,.fp-slidesNav ul li a.active span,.fp-slidesNav ul li:hover a.active span{height:12px;width:12px;margin:-6px 0 0 -6px;border-radius:100%}#fp-nav ul li a span,.fp-slidesNav ul li a span{border-radius:50%;position:absolute;z-index:1;height:4px;width:4px;border:0;background:#333;left:50%;top:50%;margin:-2px 0 0 -2px;-webkit-transition:all .1s ease-in-out;-moz-transition:all .1s ease-in-out;-o-transition:all .1s ease-in-out;transition:all .1s ease-in-out}#fp-nav ul li:hover a span,.fp-slidesNav ul li:hover a span{width:10px;height:10px;margin:-5px 0 0 -5px}#fp-nav ul li .fp-tooltip{position:absolute;top:-2px;color:#fff;font-size:14px;font-family:arial,helvetica,sans-serif;white-space:nowrap;max-width:220px;overflow:hidden;display:block;opacity:0;width:0;cursor:pointer}#fp-nav ul li:hover .fp-tooltip,#fp-nav.fp-show-active a.active+.fp-tooltip{-webkit-transition:opacity .2s ease-in;transition:opacity .2s ease-in;width:auto;opacity:1}#fp-nav ul li .fp-tooltip.right{right:20px}#fp-nav ul li .fp-tooltip.left{left:20px}.fp-auto-height .fp-slide,.fp-auto-height .fp-tableCell,.fp-auto-height.fp-section,.fp-responsive .fp-auto-height-responsive .fp-slide,.fp-responsive .fp-auto-height-responsive .fp-tableCell,.fp-responsive .fp-auto-height-responsive.fp-section{height:auto!important}

/****************************************************************
-----------------------------------------------------------------
	Company: Unity Technologies
	Project name: The Blacksmith / Vollund
	Version: 1.0

	URL: unity3d.com/pages/the-blacksmith

	Author:  Kristjan B. Hálfdánarson, 
					 kristjan@unity3d.com, 
					 @kristjanbh
-----------------------------------------------------------------
****************************************************************/

/***************************
	Global elements
***************************/
.fp-tooltip {
	background-color: #222c37;
	padding: 2px 5px;
	border-radius: 2px;
}

body {
	background: #222c37;
	color: rgb(255, 255, 255);
}

a {
	color: rgb(255, 255, 255);
}

ul li:before {
 content: none;
}

/***************************
 Layout
***************************/

.info {
	position: relative;
	left: 0;
	top: 0;
	bottom: 0;
	width: 25%;
	height: 100%;
	box-sizing: border-box;
}
.wrap {
	height: 100%;
}
.content-images {
	position: absolute;
	width: 75%;
	left: 25%;
	top: 0;
	bottom: 0;
	box-sizing: border-box;
}
.content-images .plus {
	bottom: 50px;
	top: auto;
	z-index: 2;
	background-color: #222c37;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.content-images .plus:hover,
.content-images .plus:active,
.content-images .plus:focus {
	background-color: #b83c82;	
}
.content-images .wrap {
	position: relative;
	height: 100%;
}

#trailer .wrap,
#makingof .wrap,
.info .info-wrap,
.float-btn,
.content-images h2,
.content-images h3 {
	position: absolute;
	width: 90%;
	left: 50%;
	top: 50%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);	
}

#makingof #scroll-wrap {
	padding: 200px 0 50px 0;
	box-sizing: border-box;
	max-height: 100vh;
	overflow-y: auto;
}
#makingof #scroll-wrap .g6 {
	display: inline-block;
    vertical-align: top;
    float: none;
}
#makingof .post .image img {
	margin: 0 auto;
}

#makingof .wrap,
#trailer .wrap {
	width: 60%;
	height: auto;
}
#trailer .wrap p {
	font-size: 1.2em;
}

#makingof .wrap {
	width: 75%;
}

#shading .content-img {
	height: 100%;
	width: 33.33334%;
	float: left;
	border-left: 1px solid #e6e6e6;
	box-sizing: border-box;
}

#lighting .content-img {
	height: 50%;
	width: 50%;
	float: left;
	border-left: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	box-sizing: border-box;
}


#go-home {
	margin-top: 100px;
}
.making-of {
	margin-bottom: 30px;
}
.credits {
	position: relative;
	bottom: 0;
}
.credits h3,
.credits ul,
.credits ul li {
	display: block;
}
.credits h3 {
	display: inline-block;
	margin-top: 10px;
}

.credits h3.avalon {
	display: inline-block;
}

.credits li span {
	display: block;
	color: rgba(255, 255, 255, .5);
	font-size: 0.8em;
}
.credits ul li {
	color: rgba(255, 255, 255, .95);
	font-size: 1.2em;
	margin-bottom: 10px;
}

/***************************
	Background Images		
***************************/
#trailer {
	background: #222c37 url('../../images/pages/the-blacksmith/background/trailer-retina-phone.jpg') no-repeat 50% 50%;
	background-size: cover;
}
#shader1 {
	background: url('../../images/pages/the-blacksmith/background/hair_shadows_shader02.jpg') no-repeat 50% 50%;
	background-size: cover;
}
#shader2 {
	background: url('../../images/pages/the-blacksmith/background/unique_shadows.jpg') no-repeat 50% 50%;
	background-size: cover;
}
#shader3 {
	background: url('../../images/pages/the-blacksmith/background/hair_shadows_shader.jpg') no-repeat 50% 50%;
	background-size: cover;
}

#light1 {
	background: url('../../images/pages/the-blacksmith/background/indirecton.jpg') no-repeat 50% 50%;
	background-size: cover;
}
#light2 {
	background: url('../../images/pages/the-blacksmith/background/scattering.jpg') no-repeat 50% 50%;
	background-size: cover;
}
#light3 {
	background: url('../../images/pages/the-blacksmith/background/moblur_grading.jpg') no-repeat 50% 50%;
	background-size: cover;
}
#light4 {
	background: url('../../images/pages/the-blacksmith/background/motion_blur.jpg') no-repeat 50% 50%;
	background-size: cover;
}


/***************************
	Full img view		
***************************/
.full-box {
	position: absolute;
	left: 200%;
	z-index: 999;
	background-color: #222c37;
}

.full-box.open {
	display: block;
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 990;
}
.full-box.open .close {
	width: 42px;
	height: 42px;
	position: absolute;
	right: 70px;
	top: 50px;
	z-index: 101;
	cursor: pointer;
	background: #222c37 url(../../images/assets/layout/core-sprites.png) -323px 12px no-repeat;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.full-box.open .close:hover,
.full-box.open .close:active,
.full-box.open .close:focus {
	background-color:	#b83c82;
}

/***************************
	Image comparison tool	
***************************/

.cd-image-container {
  position: relative;
  height: 100%;
}

.cd-image-container img {
	max-width: none;
	min-height: 100%;
}

.cd-image-label {
  position: absolute;
  bottom: 0;
  right: 0;
  color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}
.cd-image-label.is-hidden {
  visibility: hidden;
}
.is-visible .cd-image-label {
	bottom: 50px;
	right: 50px;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.cd-resize-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-resize-img img {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 100%;
  width: auto;
  max-width: none;
}
.cd-resize-img .cd-image-label {
  right: auto;
  left: 50px;
  bottom: 50px;
}
.is-visible .cd-resize-img {
  width: 50%;
  /* bounce in animation of the modified image */
  -webkit-animation: cd-bounce-in 0.7s;
  -moz-animation: cd-bounce-in 0.7s;
  animation: cd-bounce-in 0.7s;
}

@-webkit-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@-moz-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
.cd-handle {
  position: absolute;
  height: 44px;
  width: 44px;
  /* center the element */
  left: 50%;
  top: 50%;
  margin-left: -22px;
  margin-top: -22px;
  border-radius: 50%;
  background: #b83c82 url(../../images/pages/republique/sprites.png) -170px 17px no-repeat;
  cursor: move;
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(0);
  -moz-transform: translate3d(0, 0, 0) scale(0);
  -ms-transform: translate3d(0, 0, 0) scale(0);
  -o-transform: translate3d(0, 0, 0) scale(0);
  transform: translate3d(0, 0, 0) scale(0);
}
.cd-handle.draggable {
  /* change background color when element is active */
  background-color: #222c37;
}
.is-visible .cd-handle {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  -moz-transform: translate3d(0, 0, 0) scale(1);
  -ms-transform: translate3d(0, 0, 0) scale(1);
  -o-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0s 0.7s;
}


/* MEDIA QUERY */


@media only screen and (min-width: 320px) and (min-height: 480px) {
	#trailer {
		background: url('../../images/pages/the-blacksmith/background/trailer-retina-phone-full.jpg') no-repeat 50% 50%;
	}
}
 
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px) and (min-height: 480px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px) and (min-height: 480px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px) and (min-height: 480px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px) and (min-height: 480px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px) and (min-height: 480px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) and (min-height: 480px) { 
	#trailer {
		background: url('../../images/pages/the-blacksmith/background/trailer-retina-phone-full.jpg') no-repeat 50% 50%;
	}
}
 
@media only screen and (min-width: 640px) and (min-height: 960px) {
	#trailer {
		background: url('../../images/pages/the-blacksmith/background/trailer-retina-phone-full.jpg') no-repeat 50% 50%;
	}
}
 
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 640px) and (min-height: 960px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 640px) and (min-height: 960px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 640px) and (min-height: 960px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 640px) and (min-height: 960px),
only screen and (                min-resolution: 192dpi) and (min-width: 640px) and (min-height: 960px),
only screen and (                min-resolution: 2dppx)  and (min-width: 640px) and (min-height: 960px) { 
	#trailer {
		background: url('../../images/pages/the-blacksmith/background/trailer-retina-tablet.jpg') no-repeat 50% 50%;
	}
}


@media only screen and (min-width: 1300px) {
 	#trailer {
		background: url('../../images/pages/the-blacksmith/background/trailer-hd.jpg') no-repeat 50% 50%;
 }
}
 
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 
	#trailer {
		background: url('../../images/pages/the-blacksmith/background/trailer-retina-full.jpg') no-repeat 50% 50%;
	} 
}

@media only screen and (min-width: 2100px) {
	#trailer {
		background: url('../../images/pages/the-blacksmith/background/trailer-ultra-hd.jpg') no-repeat 50% 50%;
	} 
}