@import url(normalize.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic|Roboto+Slab:400,300,100);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab|Leckerli+One|Lato:100,300);

/* General */
	body{
		font-family: "Roboto Slab", sans-serif;
		font-weight: 300;
		background-color: #2F2F2F;
	}

	ul{
		list-style: none;
		padding-left: 0;
	}

	h1, h2, h3{
		font-family: "Lato", serif;
		font-weight: 300;
	}

	.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}

	.container{
		width: 100%;
		max-width: 600px;
		height: 93vh;
		padding-top: 6vh;
		overflow: hidden;
		position: relative;
		margin: 0 auto;
		background: #485463; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
		background: -webkit-linear-gradient(top left, #485463 0%, #2c353f 100%);
		background: -o-linear-gradient(top left, #485463 0%, #2c353f 100%);
		background: linear-gradient(to bottom right, #485463 0%, #2c353f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}

	button{
		width: 70px;
		height: 70px;
		border-radius: 50%;
		background-color: white;
		color: #FE5050;
		outline: none;
		border: none;
		font-size: 2.5em;
		font-weight: 700;
		text-align: center;
		line-height: 0px;
	}

/* Time selection */

	.time{
	  position: absolute;
	  z-index: 50;
	  width: 100%;
	  height: 568px;
	  background: #37424e;
	  color: #ffffff;
	  text-align: center;
	  margin-top: -12vh;
	  background: #485463; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */
	  background: -webkit-linear-gradient(top left, #485463 0%, #2c353f 100%);
	  background: -o-linear-gradient(top left, #485463 0%, #2c353f 100%);
	  background: linear-gradient(to bottom right, #485463 0%, #2c353f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	  transition: all 300ms cubic-bezier(1.000, 0.010, 0.970, 0.655);
	}

	.time-logo__container{
	  width: 100%;
	  height: 155px;
	  top: 0;
	  left: 0;
	  background: #ffffff;
 	  box-shadow: 0px 2px 25px 1px rgba(10, 10, 10, .8);
	}

	.container--logo{
	  padding-top: 45px;
	  font-family: 'Leckerli One';
	  font-size: 3em;
	  text-align: center;
	  color:#ff5050;
	}

	.ask{
	  margin-top: 40px;
	  font-family:'Lato'; 
	  font-weight: 100;
	  font-size: 2em;
	}

	.clock{
	  margin-top: 25px;
	  font-family:'Lato';
	  font-size: 3em;
	  font-weight: 300;
	}

	.start{
	  width: auto;
	  height: 50px;
	  margin-top: 30px;
	  background-color: #ff5050;
	  border: none;
	  color: white;
	  text-align: center;
	  display: inline-block;
	  font-size: 1.2em;
	  padding: 10px 20px;
	  border-radius: 25px;
  	  box-shadow: 0px 2px 10px 1px rgba(10, 10, 10, .5);
	}

	input{
	  display: block;
	  margin: auto;
	}

	input[type=range] {
	  margin-top: 30px;
	  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
	  width: 260px; /* Specific width is required for Firefox. */
	  background-color: transparent;
	  overflow: hidden;/*la balise*/
	  /**/
	  cursor: pointer;
	  height: 50px;
	}

	.kedis {
	  position: relative;
	  z-index: 20;
	}

	input[type=range]::-webkit-slider-thumb {
	  -webkit-appearance: none;
	}

	input[type=range]:focus {
	  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
	}

	/* la boule  */
	input[type=range]::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  height: 40px;
	  width: 40px;
	  border-radius: 50%;
	  background: #7c94ac;
	  cursor: pointer;
	  margin-top: -15px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
	  color: red;	  
	  position: relative;
	}


	/*le remplissage*/
	input[type=range]::-webkit-slider-thumb:after {
	  content: '';
	  position: absolute;
	  right: 30px;
	  top: 15px;
	  width: 270px; /*largeur du range */
	  height: 10px;
	  box-shadow: inset 0 20px #ff5050;
	  z-index: -1;
	           
	}

	/*barre de fond*/
	input[type=range]::-webkit-slider-runnable-track {
	  height: 10px;
	  cursor: pointer;
	  background: #fff;
	  z-index: -1;
	  
	}

/* Next - Prev - TimeChange */

	.change_time{
		width: auto;
		visibility: hidden;
		opacity: 0;
		background-color: transparent;
		border-radius: 0%;
		position: absolute;
		top: -5px;
		right: 4.5%;
		font-size: 1em;
		color: white;
		font-weight: 300;
		transition: opacity 500ms ease-out;
		z-index: 10;
	}

	.change{
		background: transparent;
		position: absolute;
		top: 45%;
		z-index: 20;
		color: white;
		font-size: 1em;
		font-weight: 300;
		text-indent: -9999px;
		opacity: 0;
		visibility: hidden;
	}

	#next{
		background-image: url("../images/next.svg");
		right: -4%;
	}

	#prev{
		background-image: url("../images/prev.svg");
		left: -4%;
	}

/* List & Elements */

	.propositions__list{
		position: relative;
		transition: all 300ms ease-out;
	}

	.propositions__element{
		position: absolute;
		transition: all 500ms ease-out;
		visibility: hidden;
		opacity: 0;
	}

	.propositions__element--after{	
		opacity: 1;
		visibility: visible;
		transition: opacity 500ms 500ms ease-out;
		transform: translateX(120%);
	}

	.propositions__element--before{	
		transform: translateX(-120%);
	}

	.propositions__element--active{	
		opacity: 1;
		visibility: visible;
		transform: translateX(0);
		transition: all 300ms ease-out;
	}

/* Article */

	.phone__article{
		width: 97%;
		height: 465px;
		margin: 0 auto;
		background-color: #FE5050;
		color: white;
		position: relative;
	}

	.article__img{
		width: 100%;	
		max-height: 233px;
		transition: transform 500ms cubic-bezier(0,1.14,1,.99);
	}

	.article__title, .article__descr, .article__info{	
		margin: 0 11%;
		transition: all 500ms 300ms ease-out;
		visibility: visible;
	}

	.article__descr{		
		line-height: 160%;
		opacity: 1;
	}

	.article__title{
		margin-top: 20px;
		margin-bottom: 20px;
		opacity: 1;
		font-weight: 400;
	}

	.article__info{
		position: absolute;
		font-style: italic;
		opacity: 1;
		bottom: 10px;
		right: 10px;
	}

	.article__more{
		position: absolute;
		visibility: visible;
		background-image: url("../images/more.svg");	
		color: red;
		text-indent: -9999px;
		bottom: -25px;
		left: 50%;
		transform: translateX(-50%);
		transition: all 500ms 300ms ease-out;
		box-shadow: 0px 2px 15px 1px rgba(70, 70, 70, .5);
	}

/* Fiche */

	.more{
		position: absolute;
		top: 20px;
		width: 78%;
		display: block;
		margin: 0 11%;
		transform: scale(1.5, 2.5);
		visibility: hidden;
		opacity: 0;
		transition: all 500ms ease-out;
	}

	.more__descr, .more__title, .more__map,
	.more__go, .more__hours{
		opacity: 0;
		transition: all 50ms ease-out;
	}

	.more__back{
		width: auto;
		visibility: hidden;
		opacity: 0;
		background-color: transparent;
		border-radius: 0%;
		position: absolute;
		top: -5px;
		left: 4.5%;
		font-size: 1em;
		color: white;
		font-weight: 300;
		transition: opacity 500ms ease-out;
		z-index: 10;
	}

	.more__title{
		text-align: center;
		margin-bottom: 0;
	}

	.more__container{
		background-color: white;
		height: 357px;
		color: #111;
		position: relative;
		box-shadow: 0px 2px 15px 1px rgba(70, 70, 70, .5);
	}

	.more__descr{
		padding: 15px 5%;
		padding-bottom: 0;
		line-height: 160%;
		margin-top: 10px;
		max-height: 200px;
		overflow-y: scroll;
	}

	.more__hours{
		font-style: italic;
		display: block;
		float: right;
		margin-top: 20px;
	}

	.more__map{
		width: 100%;
		height: 120px;
		position: absolute;
		bottom: 0;
		background-image: url("../images/maps/cupinn_map.jpg");
		background-size: 150%;
	}

	.more__go{
		box-shadow: 0px 2px 15px 1px rgba(70, 70, 70, .5);
		font-size: 1.3em;
		position: absolute;
		bottom: -25px;
		left: 50%;
		transform: translateX(-50%);
	}

	.full_map{
		border-radius: 100%;
		width: 70px;
		height: 70px;
		transform: scale(1) translateX(-50%);
		visibility: hidden;
		position: absolute;
		bottom: -25px;
		left: 50%;
		transition: all 500ms cubic-bezier(1.000, 0.010, 0.970, 0.655);
	}

	.close_map{
		background-image: url("../images/close.svg");
		text-indent: -9999px;
		position: absolute;
		top: 0;
		left: 10px	;
		visibility: hidden;
		opacity: 0;
		transform-origin: 50% 50%;
	}

/* Classes d'anim */
	
	/* Description's revealing */
	.revealed{
		visibility: visible;
		opacity: 1;
		transform: scale(1);
		transition: transform 500ms cubic-bezier(0,1.14,1,.99);
	}

	/* Darken the picture */
	.darken{
		filter: brightness(.5);
		-webkit-filter: brightness(.5);
		-moz-filter: brightness(.5);
		-o-filter: brightness(.5);
		-ms-filter: brightness(.5);
		transition: all 500ms cubic-bezier(0,1.14,1,.99);
	}
	
	/* Fade out of the infos */
	.fadeOut{
		opacity: 0;
		visibility: hidden;
		transition: opacity 500ms ease-out;
	}

	/* Fade in on the "back" button */
	.fadeIn{
		display: block;
		opacity: 1;
		visibility: visible;
		transition: opacity 500ms 500ms ease-out;
	}

	/* Opening of the map */
	.opened{
		visibility: visible;
		transform: scale(2.2) translateX(-25%) translateY(-40px);
		width: 200px;
		height: 300px;
		border-radius: 100%;
		border-radius: 0;
		transition: all 500ms cubic-bezier(1.000, 0.010, 0.970, 0.655);
	}

	/* Shake card when it's the last one */
	.shake{
		-webkit-animation: shake 400ms ease-in-out;
	}

	@-webkit-keyframes shake{
		0% {
			-webkit-transform: translateX(0); /* très subtil */
		}
		12.5% {
			-webkit-transform: translateX(-6px) rotateY(-5deg);
		}
		37.5% {
			-webkit-transform: translateX(4px) rotateY(4deg);
		}
		62.5% {
			-webkit-transform: translateX(-3px) rotateY(-5deg);
		}
		87.5% {
			-webkit-transform: translateX(2px) rotateY(4deg);
		}
		100% {
			-webkit-transform: translateX(0);
		}
	}

	/* Time screen */

	.slideLeft{
		transform: translateX(-120%);
		transition: all 500ms cubic-bezier(1.000, 0.010, 0.970, 0.655);
	}