/* SLIMBOX */

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {
	background: #fff url(loading.gif) no-repeat center;
}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {
	left: 0;
}

#lbPrevLink:hover {
	background: transparent url(prevlabel.gif) no-repeat 0 15%;
}

#lbNextLink {
	right: 0;
}

#lbNextLink:hover {
	background: transparent url(nextlabel.gif) no-repeat 100% 15%;
}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {
	margin-right: 71px;
}

#lbCaption {
	font-weight: bold;
}
@font-face {

	font-family: myFontSemiBold;
	src: 
	url('../fonts/opensanssemibold.eot?#iefix') format('embedded-opentype'),
	url(../fonts/opensanssemibold.ttf) format('truetype');

}

@font-face{

	font-family: MyFontLight;
	src: 
	url('../fonts/opensanslight.eot?#iefix') format('embedded-opentype'),
	url(../fonts/opensanslight.ttf) format('truetype');
}

@font-face{

	font-family: MyFontRegular;
	src:
	url('../fonts/opensansregular.eot?#iefix') format('embedded-opentype'),
	url(../fonts/opensansregular.ttf) format('truetype');
}

@font-face{

	font-family: MyFontBold;
	src: 
	url('../fonts/opensansbold.eot?#iefix') format('embedded-opentype'),
	url(../fonts/opensansbold.ttf) format('truetype');
}


/*Style les paragraphe, et aussi les <ul> pour qu'ils soit comme les paragraphes*/

p, .commeP{	color:black;
	font-size: 15pt;
/*	text-shadow: 2px 2px 4px #000000;*/
	font-family:myFontLight;
	margin:20px 50px 0px 50px;

}





/* La hauteur de #pano est le 100% de la hauteur de body qui est le 100% de la hauteur de html qui est la heuteur du viewport. Du coup #pano fait 100% en hauteur de la fenêtre du navigateur  */

html{

	height:100%;
}

body{

	background-color:white;
/*	background-color:#f1f4fd;*/
	height: 100%;

}


#pano{

	height:100%;
	width:100%;
	margin:0;
	padding:0;


}









.bold{

		font-family: MyFontSemiBold;
}


h1{

	color:#202020;
	font-size: 48px;
/*	text-shadow: 0px 1px 0px #ffffff;*/
	font-family: myFontBold;
	letter-spacing: 0.00em;
	text-transform: uppercase;
	




}

h2{

	color:#202020;
	font-size: 35px;
/*	text-shadow: 2px 2px 4px #000000;*/
	font-family: myFontRegular;
	letter-spacing: 0.00em;



}

.textCover{

	color:rgba(255,255,255,1);
	font-size: 15pt;
/*	text-shadow: 2px 2px 4px #000000;*/
	font-family:myFontLight;


}






#cover{

  margin-top: 300px;
/*  background:rgba(0,0,0,0.5);*/
  text-align:center;

}




.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 60px; overflow: hidden;

}


/*.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

}*/



.footer{

font-family:myFontLight;
color:#888888;

}




.navbar{

	background-color:rgba(0,0,0,0);
	border-style: none;
	font-family:myFontSemiBold;
	height:100px;

}

.navbar-fixed-top:focus{

outline:0;

}

.navbarWhite{

	background-color:rgba(255,255,255,0.98);
	border-style: none;
	font-family:myFontSemiBold;
	height:100px;


}




.navbar-brand-scroll{

	color:#101010 !important;

}

.navbar-brand-scroll:hover{

	color:#b21212 !important;

}




.insideNavBar{

padding-top:20px;
/*text-transform:uppercase;*/
letter-spacing:1px;
font-family:myFontBold;
font-size:18px;


}




.text-cover{

	max-width:900px;
	margin: 0 auto;
}

#divButton{

	margin:15px;
	text-align:center;
}

.btn-default{

	background-color:rgba(0,0,0,0);
	transition: background 0.5s;
	border-color:black;
	border-width:1px;
	font-family:myFontLight;
	font-size: 15pt;
	color:black;

}

.btn-default:focus{

	background-color:white;

	border-color:black;
	color:black;

}



.btn-default a{

	color:white;
}



.btn-default:hover{

background-color:rgba(1,1,1,0.1);
border-color:black;
transition: background 0.5s;
color:black;


}

/*

 ========================= HISTORIQUE DU PETIT BUG AVEC CHROME 

Chrome juge ceci 

.nav.navbar-nav.navbar-right li a:link{

	color:rgba(255,255,255,0.5);

	}


...plus spécifique que 

	.navbar-default .navbar-nav > li > a {
    color:rgba(255,255,255,0.5);
}



Avant le problème avec Chrome, c'était comme ça: 

.navbar-right li a:link{

	color:rgba(255,255,255,0.5);

	}

*/











/*Couleurs du OLIVIER FATZER en haut à gauche. J'ai repris le même code css que dans bootstrap.css et l'ai collé ici. La deuxième feuille CSS n'override la première que si le selecteur est de force égale ou supérieur à la première feuille. Genre 1) class="vert" et 2) class="vert", la deuxième feuille override. */

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:focus {
  color: white;
    outline:0;
    font-size:20px;

}
.navbar-default .navbar-brand:hover
 {
  color: #b21212;
  background-color: transparent;
  font-size:20px;

}



/*Couleurs du menu. Suite à bug avec Chrome, j'ai repris le code de bootstrap et l'ai collé ici en le modifiant. Etant donné que ce fichier vient en deuxième, et que les codes (identique) ont une spécificité égale,  ce code écrase celui du premier fichier*/

.navbar-default .navbar-nav > li > a {
    color:rgba(255,255,255,0.7);
}

.navbar-default .navbar-nav > li > a:hover {
    color:white;
}

.navbar-default .navbar-nav > li > a:focus {
    color:rgba(255,255,255,0.7);
    outline:0;
}


/*Ceci génére la petite ligne rouge en dessous des éléments du menu, au survol */

.nav.navbar-nav.navbar-right li:hover{

	border-bottom-style:solid;
	border-color:#b21212;
}


/* Class qui rend les éléments du menu noir, lorsque l'on scroll down */


.navbar-right-Noir{

color:#505050 !important;

}



.navbar-right-Noir:hover{

color:#b21212 !important;

}

/* ------------- */


.width100p100{

	width:100%;

}

.marginTop50{

	margin-top:50px;
}

.marginTop100{

	margin-top:100px;
}

.marginTop200{

	margin-top:200px;
}



.marginTopBottom{

	margin-top:200px;
	margin-bottom:200px;
}

.red{

color:#b21212;

}


/*sert à afficher la petite flèche en bas du pano*/

#marginTopNegative{

	margin-top:-40px;
	text-align:center;

}

/*z-index, pour que s'affiche par dessus pano dans chrome. Alsacreation: seul les elements "positionés" peuvent avoir un z-index. element positioné => position = relative, absolute, ou fixed
Finalement pas utilisé, mais je le garde car utile à savoir. id de l'ancien titre sur pano. 
*/

#titreSurPano{

	position: relative;
	z-index:1;
	font-size:150px;
	font-weight:900;
	color:white;
	text-transform:uppercase;
	font-family:MyFontBold;
	word-spacing: 25pt;
	text-shadow:2px 2px 14px #000000;
	opacity:0.8;

}

/* id de la petite flèche du pano */

#petiteFlecheSurPano{

	position: relative;
	z-index:1;
	text-align:center;
	width:50px;

}

.text-justify{

	text-align:justify;
	text-justify: inter-word;
}

/*@media screen and (max-width: 640px) {#titreSurPano{font-size:40px;}}*/


/*Copier-coller de Bootstrap puis modifié. Pour que le contenu s'affiche en plus large sur les grand écrans genre full HD*/
@media (min-width: 1500px) {
  .container {
    width: 1470px;
  }
}

/*@media (min-width: 768px){

#arrowDown{display:none;

}
}*/




/*Media querry ci-dessous permet de ne pas afficher le menu sur mobile*/

/*@media (max-width: 768px){

	nav{display:none;
}
}*/





.adresseEmail{

	color:black;
	font-size:20px;
		font-family:MyFontLight;

}

.adresseEmail:hover{

	color:black;
}

.adresseEmail:focus{

	color:black;
}

.h200{

height:150px;

}

.check{

    list-style-image: url("img/puce.png");
    line-height:2.42857;
}

.link_red{

	color:#b21212;

}

.link_red:hover{

	color:#b21212;
	
}

.link_red:focus{

	color:#b21212;
	outline:none;
	text-decoration:none;
	
}

/*Permet de rendre le menu mobile blanc. Class appliquée par Javascrpit avec 3 autres. Voir Javascript*/

.navbar-collapse-Blanc{

	background-color:white;
}



/*Montrez votre espace à 360° sur Internet*/

.slogan{

	color:#202020; font-size:10px; font-family: MyFontLight; margin-left:0px; letter-spacing: 2px;
}

/*Pour que le slogan ne disparaisse pas à gauche sur mobile*/


@media (max-width: 768px){

	.slogan{
		margin-left:0px;

	}}


	/*Bouton "envoyez-nous un email */

	.btn-default {
  color: white;
  background-color: #b21212;
  border-color: #ccc;
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #aaaaaa;
}







/*La div dans laquelle se trouve les exemples de vv*/

.containerOverlay{

	overflow:hidden;
}


/*L'image de vv qui se trouve dans la div*/

.imageOverlayed{


  transition: .5s ease; /* Quand une transition est appliqué à cette class, un "smooth ease" de 0.5 seconde est appliqué */
  width:100%;

}


/*Le logo de l'entreprise*/


.logoEntreprise {
  transition: .5s ease;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
    transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

  text-align: center;
  scale:1;

  }

  /*L'overlay rouge*/

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #b21212;
}

/*Le text du milieu*/

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;


  }

  .textOverlay1{

  	  color: white;
  font-size: 16px;
  padding: 4px 32px;
  font-family:MyFontBold;

  }

    .textOverlay2{

  	  color: white;
  font-size: 16px;
  padding: 4px 32px;
  font-family:MyFontRegular;

  }

/*Ce qui se passe quand la souris passe en dessus de la div "containerOverlay"*/

.containerOverlay:hover .overlay {
  opacity: 0.9;
}

.containerOverlay:hover .middle {
  opacity: 1;
}

.containerOverlay:hover .imageOverlayed {
  scale:1.1;
}