/* ============================================================================================== 
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html 
is available at http://www.script-tutorials.com/bootstrap-one-page-template-with-parallax-effect/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */

/* general styles */
@font-face
{
  font-family: 'Myfont';
  src: url('../fonts/NexaLight.otf');
}

@font-face
{
  font-family: 'MyCurs';
  src: url('../fonts/PlumBAE.ttf');
}

html, body {
  height: 100%;
  width: 100%;
  font-family: Myfont;
}

.blague { display: none; }

	.text-box2 {
	  background: rgba(255, 255, 255, 0.0);
	  padding: 20px;
	  margin: 0;
	  max-width: 450px;
	  hyphens: auto;
	}

table.calendrier
{
	text-align: center;
	vertical-align: middle;
	border-radius: 10px;
	-webkit-border-radius: 10px;
}

td.grille
{
	font: normal 9pt;
	color: #000000;
	background-color: #FFFFFF;
	border: 1px #dddddc solid;
	text-align: center;
	vertical-align: middle;
	width: 12.5%;
	height: 40px;
}

td.ferme
{
	font: normal 9pt;
	color: #000000;
	background: linear-gradient(-45deg, #0294A5 12.5%, #fff 12.5%, #fff 37.5%, #0294A5 37.5%, #0294A5 62.5%, #fff 62.5%, #fff 87.5%, #0294A5 87.5%);
  	background-size: 20px 20px;
  	background-position: 20px 20px;
	border: 1px #dddddc solid;
	text-align: center;
	vertical-align: middle;
	width: 12.5%;
	height: 40px;
}

td.reserve
{
	font: normal 9pt;
	color: #FFFFFF;
	background: linear-gradient(-45deg, #F092A5 12.5%, #fff 12.5%, #fff 37.5%, #F092A5 37.5%, #F092A5 62.5%, #fff 62.5%, #fff 87.5%, #F092A5 87.5%);
  	background-size: 20px 20px;
  	background-position: 20px 20px;
	border: 1px #dddddc solid;
	text-align: center;
	vertical-align: middle;
	width: 12.5%;
	height: 40px;
}

td.passe
{
	font: normal 9pt;
	color: #000000;
	background-color: #CCCCCC;
	border: 1px #dddddc solid;
	text-align: center;
	vertical-align: middle;
	width: 12.5%;
	height: 40px;
}

td.jouragenda
{
	font: normal 8pt;
	color: #FFFFFF;
	background-color: #0294A5;
	border: 1px #dddddc solid;
	text-align: center;
	vertical-align: middle;
	width: 12.5%;
	height: 40px;
}

/* padded section */
.pad-section {
  width: 100%;
  padding: 20px;
}
.pad-section img {
  width: 100%;
}
.pad-section2 {
  width: 100%;
  padding: 20px;
}

.pad-section3 {
  width: 100%;
}

/* vertical-centered text */
.text-vcenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.text-vcenter h1 {
  font-size: 4.5em;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

/* additional sections */
#home {
  background: url(../images/home.jpg) no-repeat center center fixed; 
  display: table;
  height: 100%;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
div.bords {
background-color: #306d9f;
text-align: center;
margin: auto;
font-size: 24px;
color: #FFFFFF;
padding: 5px;
border-radius: 15px 50px;
}

div.bords2 {
background-color: #FFFFFF;
text-align: center;
margin: auto;
font-size: 24px;
color: #306d9f;
padding: 5px;
border-radius: 15px 50px;
}

#actus {
  background: url(../images/labradorite_smart.jpg) center center fixed; 
  color: #000000;
  font-size: 18px;
  text-align: justify;
  position: relative;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

#actus2 {
  background: url(../images/labradorite.jpg) center center fixed; 
  color: #ffffff;
  font-size: 18px;
  text-align: justify;
  position: relative;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

#presentation {
  background-color: #ffffff;
  color: #000000;
  font-size: 18px;
  text-align: justify;
}

#problematique {
  background-color: #306d9f;
  color: #ffffff;
}

#pierres {
  background-color: #ffffff;
  color: #000000;
  font-size: 18px;
  text-align: justify;
}

#bijoux {
  background-color: #ffffff;
  color: #000000;
  font-size: 18px;
  text-align: justify;
}

#quisuisje {
  background-color: #000000;
  color: #ffffff;
  font-size: 18px;
  text-align: justify;
}

#pratique {
  background-color: #ffffff;
  color: #000000;
  font-size: 18px;
  text-align: justify;
}

#conclusion {
  background-color: #306d9f;
  color: #ffffff;
  font-size: 18px;
  text-align: justify;
}

#services .glyphicon {
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  display: inline-block;
  font-size: 60px;
  height: 140px;
  line-height: 140px;
  text-align: center;
  vertical-align: middle;
  width: 140px;
}

.image {
background-size: cover;
width: 200px;
height: 200px;
}

.image img {
display: none;
}

.imagetab {
background-size: cover;
width: 250px;
height: 250px;
}

.imagetab img {
display: none;
}

.image2 {
background-size: cover;
border: 1px solid #0294A5;
width: 100px;
height: 100px;
}

.image2 img {
display: none;
}

.center {
text-align: center;
vertical-align: middle;
}

#information {
  background: url(../images/estate.jpg) no-repeat center center fixed; 
  display: table;
  height: auto;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#information .panel {
  opacity: 0.85;
}

#pretransition {
  background: url(../images/mag2.jpg) no-repeat center center fixed; 
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#transition {
  background: url(../images/bijou-geant-de-bali_03_bis.jpg) no-repeat center center fixed; 
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#transition1 {
  background: url(../images/bijou-geant-de-bali_05.jpg) no-repeat center center fixed; 
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#transition2 {
  background: url(../images/test_01.jpg) no-repeat center center fixed; 
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#transition3 {
  background: url(../images/test_03.jpg) no-repeat center center fixed; 
  display: table;
  height: 100%;
  position: relative;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

p.sep {
	margin-top: 10px;
	padding-top: 10px;
	border-top:1px dashed #000000 ;
}

.exp {
	position: relative;
	bottom: 1px;
	font-size: .8em;
	line-height: .8em;
	vertical-align:super;
	text-decoration:none;
}

#google_map {
  height: 500px;
}

footer {
  padding: 20px 0;
}
footer .glyphicon {
  color: #333333;
  font-size: 60px;
}
footer .glyphicon:hover {
  color: #306d9f;
}

.bloc {
  display: flex;
  align-items : center;
  justify-content: right;
  margin-top: -40px;
  font-family: Myfont;
}

.viewbloc{
	position:relative;
    width:100%;
    margin: 0 auto;
}
.view {
   width: 300px;
   height: 400px;
   margin: 10px;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 300px;
   height: 400px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}
.view h2 {
   text-transform: uppercase;
   color: #fff;
   text-align: center;
   position: relative;
   font-size: 16px;
   padding-top: 10px;
   font-weight: bold;
   background: rgba(0, 0, 0, 0.8);
   margin: 20px 0 0 0;
}
.view p {
   font-family: Myfont;
   font-size: 14px;
   position: relative;
   color: #fff;
   padding: 10px 20px 20px;
   text-align: center;
}
.view a.info {
   display: inline-block;
   text-decoration: none;
   padding: 7px 12px;
   background: #000;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}
.view a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.view-sixth img {
   -webkit-transition: all 0.4s ease-in-out 0.5s;
   -moz-transition: all 0.4s ease-in-out 0.5s;
   -o-transition: all 0.4s ease-in-out 0.5s;
   -ms-transition: all 0.4s ease-in-out 0.5s;
   transition: all 0.4s ease-in-out 0.5s;
}
.view-sixth .mask {
   background-color: rgba(0,0,0,0.5);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.3s ease-in 0.4s;
   -moz-transition: all 0.3s ease-in 0.4s;
   -o-transition: all 0.3s ease-in 0.4s;
   -ms-transition: all 0.3s ease-in 0.4s;
   transition: all 0.3s ease-in 0.4s;
}
.view-sixth h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.7);
   background: transparent;
   margin: 20px 40px 0px 40px;
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -webkit-transition: all 0.3s ease-in-out 0.2s;
   -moz-transition: all 0.3s ease-in-out 0.2s;
   -o-transition: all 0.3s ease-in-out 0.2s;
   -ms-transition: all 0.3s ease-in-out 0.2s;
   transition: all 0.3s ease-in-out 0.2s;
}
.view-sixth a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}
.view-sixth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-sixth:hover img {
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-sixth:hover h2 {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
}
.view-sixth:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.view-sixth:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
}

table.date
{
	border: 1px #a79674 solid;
	background-color: #FFFFFF;
	text-align: right;
	vertical-align: middle;
	border-radius: 10px 10px 0px 0px;
	-moz-border-radius: 10px 10px 0px 0px;
	-webkit-border-radius: 10px 10px 0px 0px;
}

td.jourart
{
	text-align: right;
	background-color: #a79674;
	color: #FFFFFF;
	
}

td.moisart
{
	text-align: right;
	color: #000000;
}

td.anneeart
{
	font: normal 14pt;
	text-align: center;
	color: #0aaff1;
}

	.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 450px;
  margin: auto;
  height: 50px;
  list-style: none;
  font-family: Mymenu;
  padding: 2px;
}

	.menu li {
  width: 75px;
  height: 100px;
  transition: background-position-x 0.9s linear;
  text-align: center;
  margin: auto;
  font-size: 10px;
  text-transform: uppercase;
}
 	.menu li a {
  color: #0444bf;
  text-decoration: none;
  transition: all 0.45s;
}

  .menu li a:hover  {
    color: #0AAFF1;
    text-decoration: none;
  }

  .menu li a:not(:last-child) {
    margin-right: 10px;
  }

	

.bbcode_block
{
	position:absolute;
	font: normal 12pt Myfont;
	text-align:center;
	bottom:28px; 
}

.bbcode_hover
{
	cursor:pointer;
}

.blink {
  animation: blink 2s infinite;
  font-weight: bold;
  font-size: 18px;
  color: #0294A5;
}
@keyframes blink { 
  0% { opacity:0; }
  50% { opacity:1; } 
  100% { opacity:0; }
}