.timeline::-webkit-scrollbar {
    width: 10px;
    height: 10px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
.timeline::-webkit-scrollbar-track-piece  {
    background-color: rgba(255, 255, 255, 0.2);
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
.timeline::-webkit-scrollbar-thumb {
    border-radius: 10px;
    width: 15px;
    background-color: rgba(255, 255, 255, 0.5);
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
.timeline::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 1);
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}

@font-face {
	font-family: ManofSteel;
	src: url('/fonts/ManofSteel.ttf');
}
.ManOfSteel, 
.ManofSteel, 
.manofsteel,
.mos,
.Ebrima, 
.ebrima{
	font-family: ManofSteel;
}
@font-face {
	font-family: SaiyanSans;
	src: url('/fonts/SaiyanSans.ttf');
}
.SaiyanSans, 
.saiyansans{
	font-family: SaiyanSans;
}

body {
    padding: 0;
    margin: 0;
    background-color: #000;
    color: #fff;
    font-family: ManofSteel;
}
titre{
    line-height: 1em;
    margin: 0 auto;
    clear: both;
    text-align: center;
    display: block;
    color: #FFF;
    font-size: 50px;
}
.timeline {
    white-space: nowrap;
    overflow-x: scroll;
    padding: 240px 50px 10px 50px;
    position: relative;
    background-color: #000;
    background-image: url("/images/dbz-battleofgods-bg_balls");
	background-clip: border-box;
}
.timeline.schedule {
	padding-top: 260px;
}

.film {
    display: inline-block;
    text-decoration: none;
    vertical-align: top;
    /* background: #13519C; */
    /*box-shadow: 0px 0px 0px 1px #42A5F5;*/
    color: #fff;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    position: relative;
    /* border-top: 4px solid #06182E; */
    border-radius: 3px;
    min-width: 200px;
    max-width: 250px;
    margin-top: 5px;
    /* margin-left: -5px; */
    z-index: 2;
}
.film img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.film:after {
    content: '';
    display: block;
    background: #BBDEFB;
    width: 7px;
    height: 7px;
    border-radius: 6px;
    border: 3px solid #42A5F5;
    position: absolute;
    left: 50%;
    top: -30px;
    margin-left: -6px;
}
.film.actif:before {
    content: '';
    display: block;
    background: #42A5F5;
    width: 1px;
    height: 20px;
    position: absolute;
    left: 50%;
    margin-left: 0px;
}
.film.actif:not(:first-child) {
	margin-left: -105px;
}
.film.actif.up {
    margin-top: -245px;
}
.film.actif.down {
    margin-top: 5px;
}
.film.inactif.up {
    margin-top: -230px;
}
.film.inactif.down {
    margin-top: 5px;
}

.film.up:before {
    top: 200px;
    box-shadow: 0px 2px 5px 2px #42A5F5;
}
.film.actif.up:hover:before {
    box-shadow: 0px 2px 5px 2px #FFC107;
}
.film.actif.up:after {
    top: 220px;
}
.film.inactif.up:after {
    top: 205px;
}
.film.down:before {
    top: -20px;
    box-shadow: 0px -2px 5px 2px #42A5F5;
}
.film.actif.down:hover:before {
    box-shadow: 0px -2px 5px 2px #FFC107;
}
.film.down:after {
    top: -30px;
}

.film.actif:hover{
    box-shadow: 0px 0px 0px 2px #FFC107;
}
.film.actif:hover:before{
    background-color: #FFC107;
}
.film.actif:hover:after{
    border-color: #FFC107;
    background-color: #FFE082;
}

.film h1 {
    color: #fff;
    font-size: 18px;
    /* font-family: Georgia, serif; */
    font-weight: bolder;
    margin-bottom: 10px;
}
.film h1 small{
	font-size: 13px;
}
.film.down h1{
    margin-top: -10px;
    margin-bottom: 0px;
}
.film.up h1{
    margin-top: 5px;
    margin-bottom: 0px;
}

.film.actif.up h2 {
	margin-bottom: 0px;
}
.film h2 {
    /* letter-spacing: .2em; */
    font-weight: normal;
    margin: 0;
    margin-bottom: 5px;
    font-size: 14px;
}

.bar {
    height: 4px;
    background-color: #BBDEFB;
    width: 100%;
    position: relative;
    top: 224px;
    left: 0;
    z-index: 1;
}
.bar.first{
	top: 243px;
}
.desactive{
	opacity: 0.5;
}
.bouton{
	background-color: #FFCA28;
	border-radius: 100%;
	padding: 8px;
	border: 2px solid #FFF467;
	position: relative;
	display: inline-block;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	overflow: hidden;
	vertical-align: middle;
	width: 25px;
	height: 25px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
.bouton:hover{
    border-color: #FFF9C4;
	background-color: #FFF59D;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	box-shadow: 0 0 10px 3px #FBC02D;
}
.bouton:before,
.bouton:after {
    content: '';
    position: absolute;
    border-radius: 100%;
    background: transparent;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;

}
.bouton:before {
  top: -1.1px;
  right: 0;
  height: 35px;
  width: 34px;
  box-shadow: -3em 0em 1em 1em #FFAB00;
  z-index: 2;
}
.bouton:after {
  top: -2.5px;
  right: -4px;
  height: 23px;
  width: 22px;
  box-shadow: -3em 0em 4em 4em #FBC02D;
  z-index: 1;
}
.bouton.facebook,
.bouton.twitter,
.bouton.googleplus {
	display: inline-block;
	padding: 8px;
}
.bouton.facebook:hover,
.bouton.twitter:hover,
.bouton.googleplus:hover {
	color: #fff !important;
	background: none;
}
.bouton.facebook:hover {
    border-color: #E8EAF6;
    background-color: #7986CB;
	box-shadow: 0 0 10px 3px #2962FF;
}
.bouton.twitter:hover {
    border-color: #E3F2FD;
    background-color: #BBDEFB;
	box-shadow: 0 0 10px 3px #0091EA;
}
.bouton.googleplus:hover {
    border-color: #FFCDD2;
    background-color: #EF9A9A;
	box-shadow: 0 0 10px 3px #D50000;
}
.bouton .svg{
	width: 25px;
	height: 25px;
	display: inline-block;
	padding: 0;
	fill: #db4437;
	z-index: 2;
	left: 0;
	right: 0;
	margin: 0 auto;
	position: absolute;
}
.bouton:hover .svg{
	fill: #D50000;
}
.bouton .glow{
	position: absolute;
	top: 4px;
	right: 3px;
	height: 16px;
	width: 8px;
	border-radius: 100%;
	background: #fff467;
	-webkit-transform: rotate(-25deg);
	transform: rotate(-25deg);
	z-index: 2;
}
.bouton .shadow{
	position: absolute;
	height: 37px;
	width: 46px;
	top: 0;
	right: 0;
	border-radius: 100%;
	background: transparent;
	box-shadow: 0em 3em 1em 2em #FFA000;
	z-index: 2;
}
.bouton:hover .glow {
    background-color: #FFFDE7;
}
.bouton:hover .shadow {
	box-shadow: 0em 3em 1em 2em #FDD835;
}
.bouton:hover:before {
    box-shadow: 0em 3em 1em 2em #FFEB3B;
}
.bouton:hover:after {
    box-shadow: 0em 3em 1em 2em #FFF176;
}
.bouton.facebook:hover .svg,
.bouton.twitter:hover .svg,
.bouton.googleplus:hover .svg{
	fill: #fff;
}
.bouton.facebook:hover .glow {
    background-color: #E8EAF6;
}
.bouton.facebook:hover .shadow {
	box-shadow: 0em 3em 1em 2em #303F9F;
}
.bouton.facebook:hover:before {
    box-shadow: 0em 3em 1em 2em #3F51B5;
}
.bouton.facebook:hover:after {
    box-shadow: 0em 3em 1em 2em #5C6BC0;
}
.bouton.twitter:hover .glow {
    background-color: #E3F2FD;
}
.bouton.twitter:hover .shadow {
	box-shadow: 0em 3em 1em 2em #1565C0;
}
.bouton.twitter:hover:before {
    box-shadow: 0em 3em 1em 2em #42A5F5;
}
.bouton.twitter:hover:after {
    box-shadow: 0em 3em 1em 2em #90CAF9;
}
.bouton.googleplus:hover .glow {
    background-color: #FFCDD2;
}
.bouton.googleplus:hover .shadow {
	box-shadow: 0em 3em 1em 2em #B71C1C;
}
.bouton.googleplus:hover:before {
    box-shadow: 0em 3em 1em 2em #D32F2F;
}
.bouton.googleplus:hover:after {
    box-shadow: 0em 3em 1em 2em #F44336;
}
.bottom {
	padding: 5px;
	text-align: center;
	/* vertical-align: middle; */
}
footer{
	text-align: center;
	font-family: ManofSteel;
	text-align: center;
	margin-bottom: 10px
}
canvas{
	transform: scale(0.75);
	outline: 5px solid #fff;
	border: 5px dotted #fff;
}
@media screen{
	titre{
		font-family: SaiyanSans;
		/* text-shadow: 0px 0px 20px #C9E9FF; */
		text-transform: uppercase;
		/* font-weight: 900 !important; */
		/* letter-spacing: 5px; */
		height: 38px;
		margin-top: 10px;
		margin-bottom: 5px;
		padding-top: 1px;
		padding-bottom: 5px;
	}
	titre .jaune{
		background: -webkit-linear-gradient(top, #FFD600, #FFEA00, #FFFF00);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	titre .orange{
		background: -webkit-linear-gradient(top, #FF6D00, #FF9100, #FFAB40);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	titre .rouge{
		background: -webkit-linear-gradient(top, #B71C1C, #D32F2F, #F44336);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.fit titre{
	background: none;
}
.fit .timeline{
	background-image: none;
	height: 100px;
	text-align: center;
}
.fit .timeline *{
	transform: scale(.8);
	transform-origin: top;
}
.fit .timeline.schedule .film:first-child {
	margin-left: -50px;
}
.fit .timeline.schedule .film:not(:first-child) {
	margin-left: -190px;
}
.fit .timeline.upcoming .film:first-child {
	margin-left: -50px;
}
.fit .timeline.upcoming .film:not(:first-child) {
	margin-left: -100px;
}
.fit .timeline .up {
	top: 0px;
}
.fit .timeline .down {
	top: -50px;
}
.fit .bar {
	top: 180px;
}
.fit .bottom {
	display: none;
}

.lien {
	background: linear-gradient(to top, #ffc107 50%, rgba(255,255,255,0) 50%);
	background-size: 100% 200%;
	background-position: 0 10%;
	background-repeat: no-repeat;
	text-decoration: none;
	color: #fff;
	transition: background-position .3s cubic-bezier(.64,.09,.08,1);
	will-change: background-position;
	font-weight: normal;
	padding: 0px 2px;
	margin: 0px -2px;
}
.lien:hover,
.lien:focus{
	color: #fff;
	background-position: 0 100%;
	transition: color .2s background-position .3s cubic-bezier(.64,.09,.08,1);
}

.inline_block {
	display: inline-block;
}
.position_relative,
.relative {
	position: relative;
}
.overflow_hidden{
	overflow: hidden;
}
.line{
	display: block;
	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: visible;
	position: relative;
	width: 100%;
	background-color: #fff;
	height: 170px;
}
.line.line-1{
	border-bottom: 1px solid #212121;
}
.line .box{
	display: inline-block;
	/* width: 100%; */
	height: 100%;
	text-align: center;
	vertical-align: middle;
	position: relative;
	overflow: hidden;
	box-shadow: 0px 0px 1px 0px #212121;
	/* white-space: normal; */
}
.line .box.jaune,
.line .box.dragonball{
	background-color: #FFC107;
}
.line .box.rouge,
.line .box.dragonballz{
	background-color: #F44336;
}
.line .box.orange,
.line .box.dragonballsuper{
	background-color: #FF9800;
}
.box .box-titre{
	padding: 6px 0px;
	display: inline-block;
}
.box .box-group{
	position: relative;
	overflow: hidden;
	height: 60px;
}
.box .box-group.box-group-1{
	/*background-color: #c4c4c4;*/
}
.box.dragonball .box-group .box-mini{
	background-color: #FFD54F;
	color: #212121;
}
.box.dragonball .box-group.box-group-1 .box-mini{
	background-color: #FFCA28;
}
.box.dragonball .box-group .box-mini:hover{
	background-color: #2196F3;
	color: #fff;
}
.box.dragonballz .box-group .box-mini{
	background-color: #E57373;
}
.box.dragonballz .box-group.box-group-1 .box-mini{
	background-color: #EF5350;
}
.box.dragonballz .box-group .box-mini:hover{
	background-color: #D50000;
	color: #fff;
}
.box.dragonballsuper .box-group .box-mini{
	background-color: #FFB74D;
}
.box.dragonballsuper .box-group.box-group-1 .box-mini{
	background-color: #FFA726;
}
.box.dragonballsuper .box-group .box-mini:hover{
	background-color: #FF6D00;
	color: #fff;
}
.box .box-mini{
	display: inline-block;
	height: 100%;
	width: 180px;
	box-shadow: 0px 0px 1px 0px #212121;
	text-align: center;
	font-size: 13px;
	vertical-align: middle;
	padding: 10px 0px;
}
.line .box .box-mini.box-mini-4{
	/* width: calc(100%/4); */
}
.line .box .box-mini.box-mini-5{
	/*width: calc(100%/5);*/
}
.line .box .box-mini.box-mini-6{
	/* width: calc(100%/6); */
}
.line .box .box-mini.box-mini-7{
	/*width: calc(100%/7);*/
}
.radar {
	width: 100%;
	max-width: 100%;
}
.radar-content {
    text-align: center;
    width: 600px;
    min-height: 600px;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
    margin: 20px auto;
    background-image: url("/images/bg-radar");
    border-radius: 100%;
    border: 5px solid #c7c7c7;
    box-shadow: 0px 0px 0px 3px #ffffff;
}
.radar-content:after {
    /* content: ""; */
    display: block;
    padding-bottom: 100%;
}
.series{
	/* position: relative; */
	/* display: block; */
	width: 400px;
	height: 400px;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	text-align: center;
	margin: auto;
}
.series .serie,
.radar-big .box-titre{
	display: block;
	opacity: 0.5;
	margin: 0 auto;
	width: 275px;
	max-width: 100%;
	height: 125px;
	background-repeat: no-repeat;
	background-position: center;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	-webkit-animation: clignoter 2s infinite;
	cursor: pointer;
}
.series .serie:hover{
	opacity: 1;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
	-webkit-animation: none;
}
.series.serie.dragonball{
	background-image: url("/images/logo-dragonball-contour");
}
.series .serie.dragonballz{
	background-image: url("/images/logo-dragonballz-contour");
}
.series .serie.dragonballsuper {
	background-image: url("/images/logo-dragonballsuper-contour");
}

.series .serie.dragonball.v2 {
	background-image: url("/images/logo-dragonball-jaune");
}
.series .serie.dragonballz.v2 {
	background-image: url("/images/logo-dragonballz-jaune");
}
.series .serie.dragonballsuper.v2 {
	background-image: url("/images/logo-dragonballsuper-jaune");
}

.series .serie.dragonball:hover,
.box-titre.dragonball{
	background-image: url("/images/logo-dragonball");
}
.series .serie.dragonballz:hover,
.box-titre.dragonballz{
	background-image: url("/images/logo-dragonballz");
}
.series .serie.dragonballsuper:hover,
.box-titre.dragonballsuper{
	background-image: url("/images/logo-dragonballsuper");
}

.radar-big {
    background-image: url("/images/bg-radar");
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: 50%;
    /* -webkit-transform: scale(0); */
    /* -moz-transform: scale(0); */
    /* -o-transform: scale(0); */
    /* -ms-transform: scale(0); */
    /* transform: scale(0); */
    -webkit-clip-path: circle(0px at center);
    -webkit-transition: all 1s ease-in-out 0.2s;
    -moz-transition: all 1s ease-in-out 0.2s;
    -o-transition: all 1s ease-in-out 0.2s;
    -ms-transition: all 1s ease-in-out 0.2s;
    transition: all 1s ease-in-out 0.2s;
}
.radar-big.ouvert {
    z-index: 5;
    /*opacity: 1;*/
    border-radius: 0%;
    /* -webkit-transform: scale(1); */
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    /* transform: scale(1); */
    -webkit-clip-path: circle(100% at center);
}
.radar-big.ferme {
}
.radar-big .box {
    /* z-index: -1; */
	/* display: none; */
}
.radar-big .box {
    z-index: 5;
	display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.radar-big.ouvert .box .radar-fermer {
	opacity: 1;
    -webkit-animation: clignoter 2s infinite;
}
.radar-big .box .radar-fermer {
    position: absolute;
    top: 5px;
    right: 5px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    background-color: #fff609;
    border-radius: 100%;
	opacity: 0;
}
.radar-big .box .radar-fermer:hover {
    -webkit-animation: none;
}
.radar-big .box-titre {
	margin-top: 50px;
	-webkit-animation: none;
	cursor: default;
	opacity: 1;
}
.radar-big .box-group {
    text-align: center;
}
.radar-big .saisons {
    display: block;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: visible;
    position: relative;
    width: 100%;
}
.radar-big .saisons .box-group{
    position: initial;
    overflow: initial;
}

.mask {
  -webkit-mask: url("/images/mask");
  mask: url("/images/mask");
  -webkit-mask-size: 3000% 100%;
  mask-size: 3000% 100%;
  -webkit-animation: mask-play 1.4s steps(29) forwards;
  animation: mask-play 1.4s steps(29) forwards;
  z-index: 5;
}

.mask-rond {
  -webkit-mask: url("/images/mask");
  mask: url("/images/mask");
  -webkit-mask-size: 3000% 100%;
  mask-size: 3000% 100%;
  -webkit-animation: mask-play 1.4s steps(29) backwards;
  animation: mask-play 1.4s steps(29) backwards;
  z-index: 5;
}

@-webkit-keyframes clignoter {
	0% { opacity: 0; }
	50% { opacity: 0.5; }
	75% { opacity: 0.5; }
	100% { opacity: 0; }
}
@-moz-keyframes clignoter {
	0% { opacity: 0; }
	50% { opacity: 0.5; }
	75% { opacity: 0.5; }
	100% { opacity: 0; }
}
@-ms-keyframes clignoter {
	0% { opacity: 0; }
	50% { opacity: 0.5; }
	75% { opacity: 0.5; }
	100% { opacity: 0; }
}
@-o-keyframes clignoter {
	0% { opacity: 0; }
	50% { opacity: 0.5; }
	75% { opacity: 0.5; }
	100% { opacity: 0; }
}
@keyframes clignoter {
	0% { opacity: 0; }
	35% { opacity: 0.5; }
	60% { opacity: 0.4; }
	75% { opacity: 0.3; }
	100% { opacity: 0; }
}

@-webkit-keyframes mask-play {
  from {
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
  }
  to {
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
  }
}

@keyframes mask-play {
  from {
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
  }
  to {
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
  }
}

@-webkit-keyframes mask-play-reverse {
  from {
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
  }
}

@keyframes mask-play-reverse {
  from {
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
  }
}

@media print{
	@page {
		size: landscape;
	}
	body{
		margin: 0;
		padding: 0;
		background-color: #000;
	}
	titre{
		color: #212121;
	}
	.bar{
		height: 2px;
		border: 2px solid #BBDEFB;
		top: 170px;
	}
	.timeline{
		transform: scale(0.75);
		transform-origin: left top;
	}
	.film.actif:not(:first-child) {
		margin-left: -135px;
	}
}

@media screen and (max-width:600px){
	titre{
		font-size: 30px;
	}
	.series{
		width: 100%
	}
	.radar-content{
		width: 100%;
		min-height: 400px;
		margin: 0;
		border-radius: 0;
		border: 0;
	}
	.radar-content:after{
		display: none;
	}
	.radar-big .box-mini{
		font-size: 11px;
	}
	.bottom{
		margin-top: 15px;
	}
}