body,html{
  position:relative;
  margin:0;
  padding:0px;
  background:#f2f2f2 !important;
  width:100%;
  height:100%;
  overflow:hidden !important;
  min-height:0px !important;
}

audio{
	display:none;
}

* {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  text-rendering: optimizeLegibility;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.rotateScreen{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:#f2f2f2;
	z-index:99999999999;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/img-rotate-device.png);
	background-size: 174px 250px;
	background-position: center center;
	background-repeat: no-repeat;
	display:none;
}




#timeline{
  	//background:#f2f2f2 !important;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#timeline .mainPreloader{
	position:absolute;
	top:50%;
	left:50%;
	width:230px;
	height:55px;
	margin-left:-115px;
	margin-top:-70px;
	font-family:'edoregular',Arial,sans-serif;
	font-size:55px;
	color:#aa3030;
	text-align:center;
    z-index:100;
}

#noise{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/noise.jpg);
	background-size: 300px 300px;
	background-repeat: repeat;
	z-index:25;
	pointer-events: none;
	mix-blend-mode: screen;
}

@media (max-width: 1000px) {
	#noise{
		display:none;
		background-image: "";
	}
}

#timeline .trees{
	position:absolute;
	top:0px;
	left:0px;
	width:calc(100% + 2px);
	height:100%;
	overflow:hidden;
	//background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

#timeline .clue{
	position:absolute;
	bottom:120px;
	right:50px;
	font-size:25px;
	font-family:'Teko',Arial,sans-serif;
	color:#444444;
	text-align:right;
	pointer-events:none;
	text-transform: uppercase;
}

#timeline .events{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	//background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/bg2.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	display:none;
}

#timeline .switcher{
	position:absolute;
	right:35px;
	top:40px;
	width:207px;
	height:60px;
	z-index:19;
	cursor:pointer;
	opacity:0;
}

#timeline .switcher-timeline{
	position:absolute;
	left:0px;
	top:0px;
	width:207px;
	height:60px;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/common/switcher_timeline.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
}

#timeline .switcher-timeline .switcher-timeline-over{
	position:absolute;
	left:0px;
	top:0px;
	width:207px;
	height:60px;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/common/switcher_timeline_over.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	opacity:0;
	transition: all 0.5s;
}

#timeline .switcher:hover .switcher-timeline .switcher-timeline-over{
	opacity:1;
}

#timeline .switcher-map{
	position:absolute;
	left:0px;
	top:0px;
	width:207px;
	height:60px;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/common/switcher_map.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	opacity:0;
}

#timeline .switcher-map .switcher-map-over{
	position:absolute;
	left:0px;
	top:0px;
	width:207px;
	height:60px;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/common/switcher_map_over.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	opacity:0;
	transition: all 0.5s;
}

#timeline .switcher:hover .switcher-map .switcher-map-over{
	opacity:1;
}

#fullscreen{
	position:absolute;
	bottom:20px;
	right:20px;
	width:20px;
	height:15px;
	border:3px solid #000000;
	cursor:pointer;
}

#timeline .tree{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display:none;
	user-select: none;
	transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	will-change:transform,opacity;
	transition: opacity 0.75s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform 1.5s cubic-bezier(0.250, 1.8, 0.190, 1.0);
	-webkit-transition: opacity 0.75s cubic-bezier(0.230, 1.000, 0.320, 1.000), -webkit-transform 1.5s cubic-bezier(0.250, 1.8, 0.190, 1.0);
	-moz-transition: opacity 0.75s cubic-bezier(0.230, 1.000, 0.320, 1.000), -moz-transform 1.5s cubic-bezier(0.250, 1.8, 0.190, 1.0);
}

#timeline .treeContainer{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	user-select: none;
}

#timeline .no-transition{
	transition: opacity 0s cubic-bezier(0.230, 1.000, 0.320, 1.000), transform 0s cubic-bezier(0.250, 1.645, 0.190, 0.890);
	-webkit-transition: opacity 0s cubic-bezier(0.230, 1.000, 0.320, 1.000), -webkit-transform 0s cubic-bezier(0.250, 1.645, 0.190, 0.890);
	-moz-transition: opacity 0s cubic-bezier(0.230, 1.000, 0.320, 1.000), -moz-transform 0s cubic-bezier(0.250, 1.645, 0.190, 0.890);
}

#timeline .trees .tattoo{
	position:absolute;
	top:0px;
	left:15%;
	width:100%;
	height:100%;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center center;
	animation: tattooanim 4s infinite;
	-moz-animation: tattooanim 4s infinite;
	-webkit-animation: tattooanim 4s infinite;
	animation-timing-function: ease-in-out;
	-moz-animation-timing-function: ease-in-out;
	-webkit-animation-timing-function: ease-in-out;
}

#timeline .trees .tattooContainer{
	transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	will-change:transform,opacity;
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	transition:opacity 0.5s;
}

@keyframes tattooanim{
  0%   { transform: translate3d(0,0,0) scale(1.03); }
  50% { transform: translate3d(0,0,0) scale(1.06); }
  100% { transform: translate3d(0,0,0) scale(1.03); }
}

#timeline .logo{
	position:absolute;
	top:30px;
	left:30px;
	width:250px;
	height:125px;
	background-size:100%;
	background-repeat: no-repeat;
	z-index:10;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/common/logo.png);
	opacity:0;
}

#timeline .logoMap{
	position:absolute;
	top:5px;
	left:0px;
	width:250px;
	height:125px;
	background-size:250px 125px;
	background-position: top left;
	background-repeat: no-repeat;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/common/logo_map.png);
}

#timeline .logoTimeline{
	position:absolute;
	top:0px;
	left:0px;
	width:250px;
	height:125px;
	background-size:250px 125px;
	background-position: top right;
	background-repeat: no-repeat;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/common/logo_timeline.png);
	opacity:0;
}

/* ----- SYMBOL ----- */
#timeline .tree .symbol{
	position: absolute;
	top:0px;
	left:0px;
	width:285px;
	height:285px;
	border-radius:50%;
	border:2px solid #444444;
	box-sizing: border-box;
	background-size:100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size:245px 245px;
	z-index:10;
	font-family:'edoregular',Arial,sans-serif;
	will-change:transform;
	transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	cursor:pointer;
	pointer-events: auto;
}

#timeline .tree .symbol .image{
	position: absolute;
	top:18px;
	left:18px;
	width:245px;
	height:245px;
	-webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition:all 1s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -webkit-transition:all 1s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -moz-transition:all 1s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    pointer-events: none;
	user-select: none;
}


#timeline .tree .small-symbol{
	width:208px;
	height:208px;
	border-radius:50%;
	border:2px solid #444444;
	box-sizing: border-box;
	background-size:180px 180px;
	pointer-events: auto;
}

#timeline .tree .small-symbol .image{
	top:12px;
	left:12px;
	width:180px;
	height:180px;
}

#timeline .tree .symbol .name{
	color:#aa3030;
	font-size:37px;
	text-align: center;
	width:110%;
	position:absolute;
	top:300px;
	left:-5%;
    pointer-events: none;
	user-select: none;
}

#timeline .tree .small-symbol .name{
	top:220px;
	font-size: 25px;
}

/* ------ FAMILY ------ */

#timeline .tree .family{
	position: absolute;
	top:0px;
	left:0px;
	width:115px;
	height:115px;
	z-index:5;
	will-change:transform;
	transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
}

#timeline .tree .family .bg{
	position:relative;
	display:block;
	width:100%;
	height:auto;
    pointer-events: none;
	user-select: none;
	animation-name: spin;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	transform:translate3d(0,0,0);
	-webkit-animation-name: spin;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	-webkit-transform:translate3d(0,0,0);
	-moz-animation-name: spin;
    -moz-animation-duration: 60s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
	-moz-transform:translate3d(0,0,0);
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

#timeline .tree .family .name{
	position:absolute;
	top:32px;
	left:0px;
	width:100%;
	color:#fff;
	font-size:20px;
	text-align:center;
    pointer-events: none;
	user-select: none; 
	font-family:'edoregular',Arial,sans-serif;
	transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
}

/* ----- MEMBER ----- */

#timeline .tree .member{
	position: absolute;
	top:0px;
	left:0px;
	width:144px;
	height:175px;
	background-size:100%;
	background-repeat: no-repeat;
	will-change:transform;
	cursor:pointer;
	transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
}

#timeline .tree .member .profile{
	-webkit-filter: grayscale(80%);
    filter: grayscale(80%);
    transition:all 1s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -webkit-transition:all 1s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -moz-transition:all 1s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

#timeline .tree .member:hover .profile{
	-webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

#timeline .tree .member .profile,#timeline .tree .member .bottom{
	position:relative;
	display:block;
	width:100%;
	height:auto;
    pointer-events: none;
	user-select: none; 
}

#timeline .tree .member .nameBg{
	position:relative;
	display:block;
	width:110%;
	margin-left:-5%;
	height:26px;
	background-color:#000;
    pointer-events: none;
	user-select: none;
	box-sizing: border-box;
    transition:all 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -webkit-transition:all 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -moz-transition:all 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    z-index:10;
}

#timeline .tree .member .name{
	position:relative;
	display:block;
	width:100%;
	height:26px;
	font-family: 'Teko', sans-serif;
	font-size: 22px;
	top:-1px;
	color:#fff;
	text-align:center;
	text-transform:uppercase;
    pointer-events: none;
	user-select: none;
	box-sizing: border-box;
    transition:all 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -webkit-transition:all 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    -moz-transition:all 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

#timeline .tree .highlighted .nameBg{
	background-color:#fff;
}

#timeline .tree .highlighted .name{
	color:#aa3030;
}

.firefox #timeline .tree .member .name{
	top:-2px;
}

.windows #timeline .tree .member .name{
	padding-top:3px;
}

#timeline .tree .member:hover .name{
	color:#aa3030;
}

#timeline .tree .member:hover .nameBg{
	background-color:#fff;
}

#timeline .tree .member .playable{
	position:absolute;
	left:110px;
	top:40px;
	width:30px;
	height:30px;
	background-image: url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/character/playable.png);
	background-size: 100%;
	display:none;
}


/* ---- COLLAPSE BUTTON ----- */

#timeline .collapse-button{
	position:absolute;
	width:35px;
	height:35px;
	margin-left:-17px;
	margin-top: -17px;
	cursor:pointer;
	border-radius: 50%;
	border:2px solid #444444;
	box-sizing: border-box;
	font-family: Arial,sans-serif;
	font-weight: 700;
	font-size:33px;
	text-align:center;
	background-color:#fff;
	color:#aa3030;
}

#timeline .collapse-button .minus{
	position:absolute;
	top:-5px;
	left:0px;
	width:30px;
	height:30px;
}

#timeline .collapse-button .plus{
	position:absolute;
	top:-2px;
	left:0px;
	width:32px;
	height:30px;
	opacity:0;
}

/* ---- EVENTS ----- */
#timeline .event{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display:none;
	user-select: none;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
}

#timeline .event .content{
	position:absolute;
	top:50%;
	left:50%;
	width:1000px;
	height:auto;
	margin-left:-500px;
	margin-top:-258px;
}

#timeline .event .title{
	position:relative;
	text-align:center;
	font-family:'edoregular',Arial,sans-serif;
	font-size:100px;
	line-height:88px;
	width:700px;
	margin-left:150px;
	color:#444444;
	text-transform: uppercase;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
}

#timeline .event .bullets{
	position:relative;
	width:100%;
	text-align:center;
	margin-bottom:15px;
	margin-top:15px;
}

#timeline .event .bullet{
	position:relative;
	display:inline-block;
	width:32px;
	height:32px;
	border-radius:50%;
	background-color: #aa3030;
	font-family:'edoregular',Arial,sans-serif;
	color:#fff;
	font-size:29px;
	text-align:center;
	margin-left:6px;
	margin-right:6px;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	cursor:pointer;
}

#timeline .event .bullet:hover{
	background-color: #ffffff;
	color:#aa3030;
}

#timeline .event .bullet-active{
	background-color: #ffffff;
	color:#aa3030;
	cursor:default;
}

#timeline .event .lowerContent{
	position:relative;
	width:100%;
	height:340px;
}

#timeline .event .thumb{
	position:relative;
	float:left;
	width:50%;
	height:100%;
	cursor:pointer;
}

#timeline .event .thumb img{
	position:relative;
	width:540px;
	height:auto;
    margin-left: -90px;
    margin-top: 40px;
}

#timeline .event .playButton{
	position:absolute;
    bottom: 10px;
    left: -70px;
	width:85px;
	height:85px;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/events/play.png);
	background-size: 100%;
}

#timeline .event .playButtonHover{
	position:absolute;
    bottom: 10px;
    left: -70px;
	width:85px;
	height:85px;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/events/play_hover.png);
	background-size: 100%;
	opacity:0;
	transition:opacity 0.5s;
	-webkit-transition:opacity 0.5s;
	-moz-transition:opacity 0.5s;
	will-change:opacity;
}

#timeline .event .thumb:hover .playButtonHover{
	opacity:1;
}

#timeline .event .copy{
	position:relative;
	float:right;
	width:50%;
	height:auto;
    margin-top: 15px;
}

#timeline .event .copy .copyTitle{
	position:relative;
	color:#aa3030;
	font-family: 'Teko', sans-serif;
	font-size:32px;
	text-transform: uppercase;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
}

#timeline .event .copy .copyBody{
	position:relative;
	color:#444444;
	font-family: 'Teko', sans-serif;
	font-size:25px;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
}

#timeline .event .copy .button{
	position: relative;
    width: 257px;
    height: 43px;
    background-color: #aa3030;
    font-family: 'edoregular',Arial,sans-serif;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 22px;
    text-align: center;
    margin-top: 25px;
    box-sizing: border-box;
    padding-top: 8px;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	cursor:pointer;
}

#timeline .event .copy .button:hover{
	text-shadow:0px 0px 15px rgba(255,255,255,0.5);
}

/* ----- NAV ----- */

#nav{
	position:absolute;
	top:150px;
	left:-115px;
	width:372px;
	height:calc(100% - 200px);
	z-index:30;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), color-stop(0, rgba(0,0,0,0)),color-stop(0.1, rgba(0,0,0,1)),color-stop(0.8, rgba(0,0,0,1)), to(rgba(0,0,0,0)));
	overflow:hidden;
	pointer-events: none;
	transform:translate3d(-372px,0px,0px);
	-webkit-transform:translate3d(-372px,0px,0px);
	-moz-transform:translate3d(-372px,0px,0px);
	will-change:transform;
}

#nav .nav-scroller{
	position:absolute;
	top:110px;
	left:115px;
	will-change:transform;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
}

#nav .arrows{
	position:absolute;
	top: 55px;
    left: 245px;
    pointer-events: auto;
}

#nav .arrowTop{
	position:absolute;
	top:0px;
	left:0px;
	font-size:32px;
	color:#aa3030;
	cursor:pointer;
}



#nav .arrowBottom{
	position:absolute;
	top:110px;
	left:0px;
	font-size:32px;
	color:#aa3030;
	cursor:pointer;
}

#nav .button{
	position:relative;
	display:block;
	height:30px;
	width:142px;
	cursor:pointer;
	pointer-events: auto;
	transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	will-change:transform,opacity;
	transition:opacity 0.5s;
}

#nav .button-inactive{
	opacity:0.2;
	cursor:auto;
	pointer-events:none;
}

#nav .button-disabled{
	opacity:0.2 !important;
	cursor:auto !important;
	pointer-events:none !important;
}

#nav .buttonOut{
	position:relative;
	color:#676767;
	font-family: 'Teko', sans-serif;
	font-size:18px;
	text-align:center;
	top:6px;
	cursor:pointer;
	transition:all 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-webkit-transition:all 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
	-moz-transition:all 0.5s cubic-bezier(0.230, 1.000, 0.320, 1.000);
}

#nav .button-inactive .buttonOut{
	cursor:auto;
	transition:none;
	pointer-events: none;
}


#nav .button-disabled .buttonOut{
	cursor:auto !important;
	transition:none !important;
	pointer-events: none !important;
}

#nav .button:hover .buttonOut{
	color:#aa3030;
	transform: scale(1.68) translate3d(0,0,0);
	-webkit-transform: scale(1.68) translate3d(0,0,0);
	-moz-transform: scale(1.68) translate3d(0,0,0);
	will-change:transform;
}

#nav .button-inactive:hover .buttonOut{
	color:#676767;
	transform:translate3d(0,0,0);
}

#nav .button-disabled:hover .buttonOut{
	color:#676767 !important;
	transform:translate3d(0,0,0) !important;
}

#nav .buttonOver{
	position:absolute;
	top:-25px;
	left:-115px;
	height:75px;
	width:372px;
	overflow:hidden;
	pointer-events:none;
	transition: top 0.5s;
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
}

#nav .buttonOverInner{
	position:absolute;
	top:0px;
	left:0px;
	height:75px;
	width:372px;
	overflow:hidden;
	pointer-events:none;
	will-change:transform;
	transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
}

#nav .buttonOverBrush{
	position:absolute;
	top:0px;
	left:0px;
	height:75px;
	width:372px;
	box-sizing: border-box;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/nav/brush.png);
	background-repeat: no-repeat;
	background-size: auto 75px;
	pointer-events:none;
	will-change:transform;
	transform:translate3d(0,0,0);
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
}



#nav .buttonOverYear{
	position:absolute;
	top:16px;
	left:150px;
	color:#444444;
	font-size:45px;
	font-family:'edoregular',Arial,sans-serif;
	box-sizing: border-box;
	pointer-events:none;
	transition: top 0.5s;
	-webkit-transition: top 0.5s;
	-moz-transition: top 0.5s;
}

#nav .buttonOverLocation{
	position:absolute;
	top:30px;
	left:245px;
	color:#aa3030;
	font-size:24px;
	font-family:'Teko',Arial,sans-serif;
	box-sizing: border-box;
	pointer-events:none;
	text-transform:uppercase;
}

#nav .buttonOverBullets{
	position:absolute;
	top:45px;
	left:245px;
	width:400px;
}

#nav .buttonOverBullet{
	position:relative;
	display:inline-block;
	width:20px;
	height:20px;
	border-radius: 50%;
	background-color:#aa3030;
	font-family:'edoregular',Arial,sans-serif;
	color:#fff;
	font-size:17px;
	text-align:center;
	margin-right:5px;
	pointer-events: auto;
}

#nav .buttonOverBulletActive{
	background-color: #fff;
	color:#aa3030;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
}

@media (max-width: 1000px) {
	.timeline #nav .buttonOverYear{
		top:26px;
	}

	#nav .buttonOverBrush{
		background-size: 271px 93px;
		height:120px;
	}

	#nav .buttonOverLocation{
		top: 60px !important;
    	left: 150px;
	}

	#nav .buttonOver {
		top:-52px;
		height:120px;
	}

	.timeline #nav .buttonOver {
		top:-39px;
	}

	#nav .buttonOverInner {
		height:120px;
	}

	#nav .buttonOverBullets {
		top:91px;
		left:150px;
	}

	#nav .arrows{
		top: 30px;
    	left: 220px;
	}

	#nav .arrowTop{
		font-size:50px;
	}

	#nav .arrowBottom{
		font-size:50px;
		top:125px;
	}
}

/* ---- MODAL ----- */

#timeline .modal{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	background-color: rgba(255,255,255,0.9);
	z-index:20;
	display:none;
	opacity:0;
}

#timeline .modal .content{
	position:absolute;
	top:50%;
	left:50%;
	width:812px;
	height:502px;
	margin-left:-406px;
	margin-top:-251px;
	background-color:#000;
}

#timeline .modal .content .characterImage{
	position:absolute;
	top:-150px;
	left:0px;
	width:325px;
	height:auto;
}

#timeline .modal .content .closeButton{
	position:absolute;
	top:-30px;
	right:0px;
	font-size:20px;
	font-family:'edoregular',Arial,sans-serif;
	color:#000;
	cursor:pointer;
	transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
}

#timeline .modal .content .closeButton:hover{
	color:#aa3030;
}

#timeline .modal .content .copy{
	position:absolute;
	top:60px;
	left:385px;
	width:365px;
	height:320px;
}

#timeline .modal .preloader{
	position:absolute;
	top:50%;
	left:50%;
	width:50px;
	height:50px;
	margin-left:-25px;
	margin-top:-25px;
	background-image:url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/detail/preloader-modal.png);
	background-size: 100%;
	animation-name: spin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
	-webkit-animation-name: spin;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
	-moz-animation-name: spin;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
}

#timeline .modal .content .copy .charName{
	position:relative;
	font-family: 'Teko', sans-serif;
	font-weight:500;
	color:#fff;
	font-size:40px;
}

#timeline .modal .content .copy .charName .playable{
	position:relative;
	display:inline-block;
	width:30px;
	height:30px;
	background-image: url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/character/playable.png);
	background-size: 100%;
	margin-left:10px;
}

#timeline .modal .content .copy .charTagline{
	position:relative;
	font-family: 'Teko', sans-serif;
	font-weight:400;
	color:#fff;
	font-size:25px;
	text-transform: uppercase;
	margin-top:-10px;
    line-height: 23px;
}

.windows #timeline .modal .content .copy .charTagline{
	margin-top:0px;
}

#timeline .modal .content .copy .charBioContainer{
	position:relative;
	font-family: 'Teko', sans-serif;
	font-weight:400;
	color:#fff;
	font-size:20px;
	line-height:22px;
	margin-top:30px;
	padding-right:20px;
	height:170px;
	overflow:hidden;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#timeline .modal .content .copy .charBio{
	position:relative;
	font-family: 'Teko', sans-serif;
	font-weight:400;
	color:#fff;
	font-size:20px;
	line-height:22px;
}

#timeline .modal .content .watchButton{
    position: absolute;
    bottom: 50px;
    left: 385px;
	width:232px;
	height:43px;
	background-color:#aa3030;
	font-size:22px;
	font-family:'edoregular',Arial,sans-serif;
	color:#fff;
	text-align:center;
	margin-top:50px;
	cursor:pointer;
	transition:text-shadow 0.3s;
	padding-top:8px;
	box-sizing: border-box;
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#timeline .modal .content .watchButton:hover{
	text-shadow:0px 0px 15px rgba(255,255,255,0.5);
}


#timeline .youtubeModal{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	background-color: rgba(255,255,255,0.9);
	z-index:999999;
	display:none;
	opacity:0;
}

#timeline .youtubeModal .closeButton{
	position:absolute;
	top:calc(10% - 30px);
	right:10%;
	font-size:20px;
	font-family:'edoregular',Arial,sans-serif;
	color:#000;
	cursor:pointer;
	transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
}

#timeline .youtubeModal .closeButton:hover{
	color:#aa3030;
}

#timeline .youtubeModal .content{
	position:absolute;
	top:50%;
	left:50%;
	width:1280px;
	height:720px;
	background-color:#000;
}

#timeline .screenshotModal{
	position: absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	background-color: rgba(255,255,255,0.9);
	z-index:999999;
	display:none;
	opacity:0;
}

#timeline .screenshotModal .closeButton{
	position:absolute;
	top:calc(10% + 10px);
	right:calc(10% + 10px);
	background-image: url(/dcpcr4l1vpi6d.cloudfront.net/assets/images/x.png);
	width:29px;
	height:25px;
	background-size: 100%;
	background-repeat: no-repeat;
	cursor:pointer;
	transition:all 0.3s;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	opacity:0.5;
	z-index:25;
}

#timeline .screenshotModal .closeButton:hover{
	opacity:1;
}

#timeline .screenshotModal .content{
	position:absolute;
	top:10%;
	left:10%;
	width:80%;
	height:80%;
}

.borderDebug{
	position:absolute;
	top:0px;
	left:0px;
	width:200px;
	height:200px;
	background-color: rgba(255,0,0,0.5);
	border-radius: 50%;
}

#timeline .scrollToNav{
	position:absolute;
	bottom:20px;
	left:50%;
	width:300px;
	height:130px;
	margin-left:-150px;
	z-index:10;
	opacity:0;
}

@media (max-width: 1000px) {
	#timeline .scrollToNav{
		display:none;
	}
}

#timeline .scrollToNav .svgContainer{
	position:relative;
	width:37px;
	height:101px;
	left:50%;
	margin-left:-18px;
}

#timeline .scrollToNav .svgContainer svg{
	position:absolute;
	top:0px;
	left:0px;
}

#timeline .scrollToNav .copy{
	position:relative;
	width:300px;
	font-size:20px;
	color:#444444;
	text-align:center;
	text-transform: uppercase;
	font-family: 'Teko', sans-serif;
}

::-webkit-scrollbar {
    width: 8px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color:rgba(255,255,255,0.2);
}

.iScrollVerticalScrollbar {
	position: absolute;
	z-index: 9999;
	width: 8px;
	bottom: 2px;
	top: 2px;
	right: 2px;
	overflow: hidden;
}

.iScrollVerticalScrollbar.iScrollBothScrollbars {
	bottom: 18px;
}

.iScrollIndicator {
	position: absolute;
	background: rgba(255,255,255,0.2);
	border-radius: 4px;
	cursor:pointer;
}

.iScrollVerticalScrollbar .iScrollIndicator {
	width: 100%;
}


@supports (-ms-ime-align:auto) {
  #noise { display: none; } 
  .symbol { filter: none!important; }
  #timeline .tree .member .profile{filter: none!important;}
  #timeline div,#timeline img{ filter:none !important; }
  timeline .tree .symbol .image{ filter:none; }
}