@import url(https://weloveiconfonts.com/api/?family=entypo);

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
	position: relative;
    height: 100%;
	overflow: hidden;		
	background-color: #fff;
	color: #000;
}

.wrapper {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  -webkit-transition: -webkit-transform 1.5s;
	  transition: transform 1.5s;
	  -webkit-perspective: 3000px;
	  perspective: 3000px;
	  -webkit-transform-style: preserve-3d;
	  transform-style: preserve-3d;
}

.page {
	  position: relative;
	  width: 100%;
	  -webkit-transform: rotateX(180deg) scale(0.3);
	  transform: rotateX(180deg) scale(0.3);
	  -webkit-backface-visibility: hidden;
	  backface-visibility: hidden;
	  -webkit-transition: -webkit-transform 1s ease-in-out;
	  transition: transform 1s ease-in-out;
	  will-change: transform;
	  
	  /* Overflow Y auto pour toutes les pages */
	  height:100%;
	  overflow:auto;
}

.page1 {
	/*background-color: #fff;*/
	/*background-color: rgba(52, 73, 94, 0.5);*/
}

.active-page1 {
	  -webkit-transform: translateY(0%);
	  -ms-transform: translateY(0%);
	  transform: translateY(0%);
}

.active-page1 .page.page1 {
	  -webkit-transform: scale(1);
	  -ms-transform: scale(1);
	  transform: scale(1);
}

.active-page2 {
	  -webkit-transform: translateY(-100%);
	  -ms-transform: translateY(-100%);
	  transform: translateY(-100%);
}

.active-page2 .page.page2 {
	  -webkit-transform: scale(1);
	  -ms-transform: scale(1);
	  transform: scale(1);
}

.visu {
	/*
	background: #F5F5F5 url(../../images/expo.png) no-repeat 10px 15px;
    border: 1px solid #C0C0C0;
    padding: 0 25px 25px 100px;
    margin: 50px 0;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
	 */
	
	/*
    -moz-box-shadow: 3px 3px 6px 0 #A9A9A9;
    -webkit-box-shadow: 3px 3px 6px #A9A9A9;
    box-shadow: 3px 3px 6px 0 #A9A9A9;
	*/


	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 35px;
	margin: 50px 0;
	/*border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.45);
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
	-webkit-box-shadow: 9px 9px 11px 1px #000000;
	box-shadow: 9px 9px 11px 1px #000000;*/
	backdrop-filter: blur(15px);

	-moz-border-radius: 30px;
	border-radius: 30px;
	background-color: rgba(60, 60, 60, 0.7);
	-webkit-box-shadow: 15px 15px 30px rgb(25, 25, 25), -7px -9px 30px #777;
	box-shadow: 15px 15px 30px rgb(25, 25, 25), -7px -9px 30px #777;
	color: #e7e7e7;
}

.visu_photos_page2 {
	padding: 35px;
	backdrop-filter: blur(15px);
	-moz-border-radius: 30px;
	border-radius: 30px;
	background-color: rgba(60, 60, 60, 0.7);
	-webkit-box-shadow: 15px 15px 30px rgb(25, 25, 25), -7px -9px 30px #777;
	box-shadow: 15px 15px 30px rgb(25, 25, 25), -7px -9px 30px #777;
}

.btn_style{
	  /* background: #3498db; */
	  background: #34495e;
	  
	  border-radius: 28px;

	  box-shadow: 6px 6px 12px #111;
	  font-family: Arial, serif;
	  color: #ffffff;
	  font-size: 20px;
	  padding: 10px 20px 10px 20px;
	  text-decoration: none;

	  transition: all 0.15s ease;
}

.btn_style:hover {
	/*
	  background: #0c4e80;
	  background-image: -webkit-linear-gradient(top, #0c4e80, #3498db);
	  background-image: -moz-linear-gradient(top, #0c4e80, #3498db);
	  background-image: -ms-linear-gradient(top, #0c4e80, #3498db);
	  background-image: -o-linear-gradient(top, #0c4e80, #3498db);
	  background-image: linear-gradient(to bottom, #0c4e80, #3498db);
	  text-decoration: none;*/

	background: #313131;
	box-shadow: 0 0 30px grey;
	transform: scale(1.05);
}

.navbar {
	margin: 0;
}

.navbar-default {
    /*background-color: #34495e;
	border-color: #34495e */
}

article {
	margin-bottom: 80px;
}


* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

/* entypo */
[class*="entypo-"]:before {
  font-family: "entypo", sans-serif;
}

/* Sidebar
-----------------------------------------------------------------------------------------*/
.menusign {
  display: block;
  width: 10px;
  line-height: .3;
  font-size: 2em;
  margin: .5em;
}
.menusign br {
  height: 0;
}

.sidebar {
  position: fixed;
   z-index: 9999999;
  top: 0;
  width: 200px;
  height: 100%;
  background: rgba(0,0,0,.5); 
  -webkit-transition: -webkit-box-shadow 1s ease 0.1s;
  transition: box-shadow 1s ease 0.1s;
}
.sidebar a {
  display: block;
  background: linear-gradient(#3e3e3e, #383838);
  border-top: 1px solid #484848;
  border-bottom: 1px solid #2E2E2E;
  color: white;
  padding: 15px;
}
.sidebar a:hover, .sidebar a:focus {
  background: linear-gradient(#484848, #383838);
}
.sidebar:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 34px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

.sidebar h2 {
  padding: .5em;
  color: #ccc;
  text-align: center;
}
.sidebar ul {
  padding: 0;
  margin: 0;
}

.sidebar ul li a {
  color: #ccc;
  text-decoration: none;
}
.sidebar ul li:hover {
  background: #000;
  border-color: #000;
}

.bordure_sidebar{			
  -webkit-box-shadow: 0.7em 0 0 0 #383838;
  box-shadow: 0.7em 0 0 0 #383838; 
}
		
.fermer {
  left: -200px;			  
}

/* class Floutage 
 Cette classe est ajouté au contenu
(#opacite) quand la  sidebar est ouverte.
----------------------------------- */

.css_opacite{
	opacity: 0.5;
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5; 
	alpha(opacity=50);
}

			
/* Modif CSS pour les mobiles concernant la Sidebar */
@media screen and (max-width: 600px) {	
	
	.sidebar a {
		padding: 10px;
	}			
}


/* NAVBAR ANNEES
----------------------------------- */

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

.navbar-default .navbar-nav>li>a {
    color: #ecf0f1;
}


/* POUR LE CHANGEMENT DE COULEUR
AU CLICK SUR UN LIEN DE LA NAVBAR ANNEES */

.navbar-nav li > a {
	text-transform: capitalize;
	color: #333;
	transition: background-color .2s, color .2s;
}

.navbar-nav li.active > a {
	background-color: #333;
	color: #fff;
}

body{
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}