/******************************
** Sourbier YIKING
**
**@date: Décembre 2014
**@author: Virginie Prince
**@company: Bernezac-comminication
******************************/
/*---------------------------*\
    $base
\*---------------------------*/
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/bebasneue-webfont.eot');
    src: url('../fonts/bebasneue-webfont.eot?#iefix') format('eot'),
         url('../fonts/bebasneue-webfont.woff') format('woff'),
         url('../fonts/bebasneue-webfont.ttf') format('truetype'),
         url('../fonts/bebasneue-webfont.svg#webfontX0YNjQNl') format('svg');
    font-weight: normal;
    font-style: normal;
}
html, body {height:100%;}
body {font-family: 'Lato', sans-serif;}
h1, h2 { font-family: 'BebasNeueRegular';}

a:focus { outline: none;}
a {color: #194f71;}
a:hover, a:focus {color: #880a0c;text-decoration: underline;}

.mrg-center{margin-left: auto; margin-right: auto;}

.afficher { display: block !important; visibility: visible !important;}
/*---------------------------*\
    $layout
\*---------------------------*/



.bg-img { position: absolute; z-index: -1; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
  .bg-img img { position: absolute; bottom: 0; left: 0; display: block; min-width: 100%; min-height: 100%;}

#header { position: relative; margin: -25px auto 0 auto; height: 80%; width: 100%;}
  #landing {padding: 60px 0 0 0;}
  #page #header  { height:300px; margin-bottom: 20px;}
  #page.test #header  { height:300px; margin-bottom: 0;}
  #header.home { min-height:600px;}
  #index #home{ padding: 20px 0 50px 0;}
/*---------------------------*\
    $modules
\*---------------------------*/
.red{background:#99ccff; color: #fff; }
.red h1 {color:#194F71;}
.red .modal {color:#194F71;}
.grey{background:#d4d4d4;  }

.btn-default {
    color: #FFF;
    background-color: #609abe;
    border-color: #194f71;
}
.btn-red {
    background-color: #FFF;
    color: #609abe;
    border-color: #194f71;
}
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    color: #FFF;
    background-color: #194f71;
    border-color: #0d2839;
}
.btn-red:hover, .btn-red:focus, .btn-red:active, .btn-red.active, .open .dropdown-toggle.btn-red {
    color: #FFF;
    background-color: #194f71;
    border-color: #0d2839;
}
.btn-home {
    background: #fff;
    font-weight: bold;
    font-size: 2.5em;
}
/********NAVIGATION************/
.nav-yiking{ 
  font-family: 'BebasNeueRegular'; 
  font-size: 1.563em; 
  background: #fff;
  -webkit-box-shadow: 0px 10px 5px 0px rgba(50, 50, 50, 0.18);
  -moz-box-shadow:    0px 10px 5px 0px rgba(50, 50, 50, 0.18);
  box-shadow:         0px 10px 5px 0px rgba(50, 50, 50, 0.18);
}
.navbar-brand {
    float: left;
    padding: 0px 15px;
    line-height: 22px;
    height: auto;
}
.main-nav { float: right; margin: 30px 0 0 0; }
.main-nav li { padding: 0; vertical-align: middle;}
.main-nav li a {padding:3px 5px 15px 5px;} 
.main-nav li a:hover, 
.main-nav li a.active { background: #194F71; color:#fff; padding:3px 5px 15px 5px;}
/*.main-nav .leaf-sous-nav { position: relative;  }
.main-nav .leaf-sous-nav .sous-nav { visibility: hidden ; opacity:0; }
.main-nav .leaf-sous-nav:hover .sous-nav { visibility: visible; opacity:1; transition: opacity 0.5s linear;  }
.main-nav li .sous-nav { position: absolute; top:89%; left: 0px; z-index: 1000; width: 300px; padding-top:15px; background: url(../img/points.png) right 10px  no-repeat #fff; border-top: 1px solid #d02027; }
.main-nav li .sous-nav a { display: block; padding:5px ;margin: 0 30px 0 0;  font-size: 0.8em; }
.main-nav li .sous-nav a:hover { background: #d4d4d4; }*/

.icon-bar {background: #D02027;}

/*******INDEX*******/
#index #landing h1, #page #landing h1 {position: relative; font-size: 3.750em; color:  #194f71;background: url(../img/points.png) bottom right no-repeat; padding-bottom: 10px; margin-top: 0px;}
#index #landing h1 small {
	color:#F00;
	font-size: 0.5em;
}
#index #landing h1:after {content:""; position: absolute; bottom:5px; margin-left:15px; left:0; width: 90%; height: 3px; background:#fff;}
#index #landing blockquote { color:#fff;padding: 11px 22px; font-size: 1.563em; border-left: none; }
#index #landing blockquote footer { display: block; font-size: 80%; line-height: 1.42857; color: #fff; text-align: right; }
#index #landing blockquote footer cite { font-style: italic; }

.home-btn{display: block; width: 200px; padding-top:115px; height:150px; background: url(../img/btn-home.png)top no-repeat ; text-align: center; font-weight:bold; vertical-align:bottom; color:#fff; font-size:14px; }
.lol-btn{display: block; width: 329px; padding-top:115px; height:150px; background: url(../img/btn-lol.png)top no-repeat ; text-align: center; font-weight:bold; vertical-align:bottom; color:#fff; font-size:16px; }


.lol-btn:hover,.lol-btn:focus ,
.home-btn:hover,.home-btn:focus {text-decoration: none;}

.lol-btn:hover,
.home-btn:hover{ color:#fff;}

#index h2 { background: url(../img/points.png) bottom right no-repeat; padding-bottom: 10px;}

#index #proverbe, #page #proverbe {position: relative; padding:50px 0 0 0; background: url(../img/bg-prov.jpg) no-repeat ;background-size: 100% auto;} /****regler en fonction de taille écran****/
#index #proverbe p, #page #proverbe p {color:#fff; font-size: 2.500em; text-align: center;}
#index #proverbe p:last-child , #page #proverbe p:last-child {color:#fff; font-size: 2.500em; text-align: center; font-style: italic;}

.boutonLol{
  padding: 5px 0;
}
.boutonLol a{ 
  display: block;
  text-align: center;
  font-size: 25px;
}
.boutonLol input, .boutonLol a{
  padding: 5px;
  border: 2px solid #D82020;
  background: #009900;
  color: #fff
}
.boutonLol input:hover , .boutonLol a:hover {
  background: #fff;
  color: #FF0000;
}
.texteLol{
  clear: both;
  padding-top: 0px;
  font-size: 1.8em;
  text-transform: uppercase;
  color: #000;
}

/****arrow-b-left*****/

.arrow-b-left{ 
  display: block;
  padding: 50px 0 20px 0;
  background: url(../img/fleche-b-left.png) center top no-repeat;
}
.arrow-b-right{ 
  display: block;
  padding: 50px 0 20px 0;
  background: url(../img/fleche-b-right.png) center top no-repeat;
}
/*home-projet*/

.home-projet{
  padding: 10px 0;
  border: 1px solid #d4d4d4;
}
/*actu*/
.actu{
  padding: 10px 0 0 0;
  border-bottom: 1px dotted #fff;
}  
.actu .date{
  display: block; 
  padding: 0 0 0 45px;
  line-height: 35px;
  background: url(../img/points.png) top left no-repeat;

}

#content img {background: url(../img/points.png) bottom right no-repeat; padding-bottom: 20px;}
#content hr { position: relative; height: 2px; width:300px; margin-left: auto; margin-right: auto;background:#BBB8C8;}
#content hr:after {content:""; position: absolute; top:-7px; right:-45px; height: 15px; width:40px;background: url(../img/points.png) bottom right no-repeat;}



#landing h1 {position: relative; font-size: 3.750em; color:#fff;background: url(../img/points.png) bottom right no-repeat; padding-bottom: 10px; margin-top: 30px;}
#landing h1:after {content:""; position: absolute; bottom:5px; margin-left:15px; left:0; width: 90%; height: 3px; background:#fff;}

#content{ padding: 50px 0;}

#tarifs .table {font-size: 1.250em; text-align:center;}
#tarifs .table th {font-family: 'BebasNeueRegular'; background: #D02027; color:#fff;}
#tarifs .table td:first-child { background: #95AA41; color:#fff; text-align: left;}



#map{position: absolute; top:0;width:100%; height:300px;}
.overlay-map { width: 250px; height: 60px; background:rgba(56,132,159,0.5); color:#fff; padding:5px; font-size: 1em; }
#contact #landing{background:none; height:300px;}
#contact h1{font-size: 2.500em;}

.fleche { padding-left: 57px; min-height: 110px; background: url(../img/fleche.png) left top no-repeat;}
.flechebas { padding-bottom: 57px; background: url(../img/flechebas.png) center bottom no-repeat;}

#tabs-yiking .nav-tabs,
#tabs-yiking #demo { padding: 10px; border: 1px dotted #609ABE; background: #F5F5F5}
.nav-tabs {
    border-bottom: none;
}
#tabs-yiking .nav-tabs li { padding: 0;}
#tabs-yiking td { height: 40px; padding: 2px;}
#tabs-yiking td a { display: block; width:100%; height:100%; text-align: center; line-height: 40px}
#tabs-yiking td a:hover { background: red;}
#tabs-yiking td a.choix { background: #151515;}
#tabs-yiking .nav-tabs a { text-transform: lowercase;}
#tabs-yiking .nav-tabs a .item:hover, #tabs-yiking .nav-tabs .active a { background: #194F71; color: #fff; }
#tabs-yiking .nav > li > a {

    padding: 10px 5px;
}
#tabs-yiking .nav-tabs a span { display: block; text-align: center; font-weight: bold; text-transform: capitalize; color:#fff;}
#tabs-yiking .nav-tabs a span.feu {background:#e13e19 }
#tabs-yiking .nav-tabs a span.bois {background:#40d34a }
#tabs-yiking .nav-tabs a span.eau {background:#2bc2e7 }
#tabs-yiking .nav-tabs a span.metal {background:#a7a9aa }
#tabs-yiking .nav-tabs a span.terre {background:#804b0d }
#tabs-yiking .nav-tabs a span.item {padding: 5px 0; color: #194F71 ; cursor: pointer; }
#tabs-yiking .nav-tabs .active a span.item {color: #194F71 ; background: #F5F5F5; }
#tabs-yiking .nav-tabs .active a span.item:hover { color: #F5F5F5 ; background: #194F71; }
#demo table {width: auto;}
#demo td { width: 50px; height: 50px;}
#demo td a { display: block; width: 50px; line-height: 50px; text-align: center;}

.instruction>div { padding-left: 40px; background: url(../img/1.png) left center no-repeat;}
.instruction>div+div {  background: url(../img/2.png) left center no-repeat;}
.instruction>div+div+div {  background: url(../img/3.png) left center no-repeat;}

.resultat { border: 2px solid #194F71 ; padding: 10px;}
.resultat h2 { margin-top: 0;}

/*****************/
footer { margin: 45px 0;}


/******MEDIA QUERY*******/
/* Extra-Small devices (tablets, 768px and down) */
@media (max-width:768px ) {
  .block-home { padding-top: 15px; padding-bottom: 15px; }
  #index #landing h1 { font-size: 2em; background-color: rgba(255,255,255,0.8);}
  #index #landing h1 small {font-size: 0.5em;}
  .navbar-brand img {height:30px;}
  #index #home{ padding: 20px 0 20px 0;}

  /*******NAV********/
  .nav-bzc{ font-size: 1.1em;}
  .main-nav { float: none; margin: 10px 0 ; }
  .main-nav li { display: block;}
  .main-nav li a.active { background: url(../img/points.png) bottom right no-repeat; padding-bottom:15px;}
  .main-nav .leaf-sous-nav { position: relative;  }
  .main-nav .leaf-sous-nav .sous-nav { visibility: visible; ; opacity:1; }
  .main-nav .leaf-sous-nav:hover .sous-nav { visibility: visible; opacity:1; transition: none;  }
  .main-nav li .sous-nav { position: static; width: 100%; padding-top:5px; background: url(../img/points.png) right 10px  no-repeat #fff; border-top: 1px solid #d02027; }
  .main-nav li .sous-nav a { display: block; padding:5px ; margin: 0 30px 0 10px;  font-size: 1em; }
  .main-nav li .sous-nav a:hover { background: #d4d4d4; }
  .bubble-bottom:before {display: none;}
}
@media (max-width:768px ) and (min-height: 1024px) {
  #index #landing h1 { font-size: 4em; background-color: transparent;}
}

/* Small devices (tablets, 768px and up) */
@media (min-width:768px) and (max-width: 992px) {
  .nav-bzc{ font-size: 1.3em;}
  .main-nav li .sous-nav a {  font-size: 0.8em; }
}
@media (min-width:768px ) {
  

}

/* Medium devices (desktops, 992px and up) */
@media (min-width:992px ) {
#index #landing { min-height:600px;}
#index #proverbe { min-height:400px;}

}
@media (max-width:1200px) {
	.nav-sole{ font-family: 'BebasNeueRegular'; font-size: 1.250em;}

}
/* Large devices (large desktops, 1200px and up) */
@media (min-width:1300px) {
#index #landing { /*min-height:800px;*/}
#index #proverbe { /*min-height:600px;*/}


}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* 
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ 
*/

/* 
This element holds injected scripts inside iframes that in 
some cases may stretch layouts. So, we're just hiding it. 
*/

#fb-root {
    display: none;
}

/* To fill the container and nothing else */

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

/* Wobble Vertical */
@-webkit-keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.wobble-vertical {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-vertical:hover, .wobble-vertical:focus, .wobble-vertical:active {
  -webkit-animation-name: wobble-vertical;
  animation-name: wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}
/* Bubble Bottom */
.bubble-bottom {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-bottom:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: bottom;
  transition-property: bottom;
  left: calc(50% - 10px);
  bottom: -5px;
  border-width: 10px 10px 0 10px;
  border-color: #D02027 transparent transparent transparent;
}
.bubble-bottom:hover:before, .bubble-bottom:focus:before, .bubble-bottom:active:before {
  bottom: -10px;
}


.btn {
    
}