/* 
    Created on : 4 mars 2015, 10:41:02
    Author     : Houx
*/

/* MODULE HEADER COUCHE BACKGROUND */
/* Bannière - Elements dynamiques */

.zonegrissombre{ background-color: #1F1F1F; opacity: 1; }
.zonegrisclair{ background-color: #DDDDDD; opacity: 1; }

.coucheBack{
    position: absolute; margin:30px 0px 0px 0px; width:100%; min-height: 350px; opacity: 0;
    
    -webkit-animation-name: flashCouche; animation-name: flashCouche;
    
    -webkit-animation-timing-function: linear; -webkit-animation-delay: 0s;
    -webkit-animation-direction: alternate; -webkit-animation-play-state: running;
    
    animation-timing-function: linear; animation-delay: 0s;
    animation-direction: alternate; animation-play-state: running;
    
    -webkit-animation-iteration-count: 1; animation-iteration-count: 1;
    -webkit-animation-fill-mode: both; animation-fill-mode: both;
}

/* MODULE MAP */

.map{ margin: auto; margin-top: -1px; }
.map iframe{ margin: auto; }

/* MODULE GALERY */

#galeryBiE{ width: 95%; margin: auto; background: #FFFFFF; }

#galeryBiE table{
    margin: auto;
}

#galeryBiE img {
    border: 1px #FFFFFF outset;
    cursor: pointer;
}

#galeryBiE img:hover{
    opacity: 0.7;
}

@media (min-width: 665px) and (max-width: 1614px)
{
    #galeryBiE img {
        height: 280px;
        width: 450px;
    }
}

@media (min-width: 665px) and (max-width: 1459px)
{
    #galeryBiE img {
        height: 240px;
        width: 400px;
    }
}

@media (min-width: 665px) and (max-width: 1300px)
{
    #galeryBiE img {
        height: 240px;
        width: 350px;
    }
}

@media (min-width: 665px) and (max-width: 1144px)
{
    #galeryBiE img {
        height: 200px;
        width: 300px;
    }
}

@media (min-width: 665px) and (max-width: 990px)
{
    #galeryBiE img {
        height: 240px;
        width: 350px;
    }
}

@media (min-width: 665px) and (max-width: 768px)
{
    #galeryBiE img {
        height: 200px;
        width: 300px;
    }
}

@media (max-width: 570px)
{
    #galeryBiE img, #galeryBiE video{
        height: auto;
        width: 98%;
    }
}

#galeryBiE ol{
    padding: 0;
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
}

#galeryBiE li{
    display: inline-block;
    margin-left: 2px;
    margin-right: 2px;
}

#choixpage{
    margin: auto;
}

#choixpage a{
    margin-right: 5px;
}

#choixpage .is-selected{
    color: #7EA0BD;
}

/* MODULE BIGPIC */
#bigPic{
    position: fixed; width: 98%; max-height: 94%; overflow:auto; margin: auto;
    top : 2%; bottom : 2%; left : 1%; right : 1%; z-index : 999;
    
    margin: 0; padding: 0; padding-top: 2%; padding-bottom: 2%;
    text-align: center;   
    border: 1px solid #E2E2E2; border-collapse: separate; border-spacing: 0px;
    
    -moz-border-radius: 0.5em 0.5em 0.5em 0.5em; -webkit-border-radius: 0.5em 0.5em 0.5em 0.5em;
    
    background: #DDDDDD;    
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}

#bigPic img{
    display: block; margin: auto; width: auto; height: 100%; max-height: 98%;
    border: 1px solid #FFFFFF; border-collapse: separate; border-spacing: 0px;
}

@media (max-width: 799px)
{
    #bigPic{
        top : 0px; bottom : 0px;
    }
}

#bigPicClose, #bigPicPrev, #bigPicNext {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

#bigPicClose{
    position: absolute;
    top: 0px;
    right: 5px;
    display: block;
    background: url(pics/controls.png) no-repeat top center;
    width: 38px;
    height: 19px;
    text-indent: -9999px;
}
#bigPicClose:hover{background-position:bottom center;}

#bigPicPrev{
    position: fixed;
    top: 50%;
    left: 0px;
    margin-top: -32px;
    background: url(pics/controls.png) no-repeat top left;
    width: 28px;
    height: 65px;
    text-indent: -9999px;
}
#bigPicPrev:hover{background-position:bottom left;}

#bigPicNext{
    position: fixed;
    top: 50%;
    right: 0px;
    margin-top: -32px;
    background: url(pics/controls.png) no-repeat top right;
    width: 28px;
    height: 65px;
    text-indent: -9999px;
}
#bigPicNext:hover{background-position:bottom right;}

/* MODULE MENTION */
#lien_mention{
    display: inline-block; width: 100%; margin-top: 15px; margin-bottom: 15px;
    font-size: 80%; text-decoration: underline; text-align: center;
}
#mention{
    display: block; width: 100%; 
     margin-bottom: 15px;
    font-size: 80%; text-decoration: underline; cursor: pointer; text-align: center;
}

#popupMention{
    display: block;     bottom: 0;    left: 0;
    background: #767676; width: 80%; height: 0;   
    padding-top: 25px; padding-bottom: 25px;    
    visibility: hidden; z-index: 99; font-size: 80%; text-align: left;       
    overflow-y: auto;    margin: auto;    margin-bottom: 10px;
}
#popupMention h2{ margin-left: 2%; }
#popupMention span{ display: block; width: 96%; margin: auto; }

/* PARTAGE */

.navV {
    position: fixed;
    top: 0;
    left:0;
    height: auto;
    width: 100%;
}

#tab_ptg{
    position: fixed;
    top:60px;
    right:-1px;
    cursor: pointer;
    display: inline-block;
    margin:0;
    padding:0;
    padding-top: 0;
}

#container_ptg {
    position: fixed;
    display: block;
    margin:0;
    padding:0;
    top:50px;
    right:-1000px;
    margin:0;
    padding:0;
    width: 300px;
}

/* FORMES */

.losange{
    position: relative;    float: left;    display: block;    transform: rotate(45deg);
}

.losange h, .losange p, .losange img{
    display: block;    position: absolute;
    transform: rotate(-45deg);  text-align: center;
}

/* FLOCONS DE NEIGE */

#flake, #flocon{
    position:absolute; color:white; z-index:99;
    -webkit-animation: aflocon 40s ease 1;
            animation: aflocon 40s ease 1;
}

@keyframes aflocon {
     from { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; }
     50%   { -webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 0.5; }
     to   { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; }
}
@-webkit-keyframes aflocon {
     from { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; }
     50%   { -webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 0.5; }
     to   { -webkit-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; }
}

/* METABALL */

.metaball{ min-height: 20vh; }
.metaball:before, .metaball:after {
    content: "";    position: absolute;    border-radius:50%;    -webkit-filter: blur(25px);
}
.metaballconstrat{ -webkit-filter: contrast(8); }

.metaballm1:before, .metaballm1:after{ animation: move1 12s infinite alternate ease-in-out; }
.metaballm2:before, .metaballm2:after{ animation: move2 12s infinite alternate ease-in-out; }

.metaballbleu1:before, .metaballbleu1:after { background: rgba(160,230,245,.9); }
.metaballvert1:before, .metaballvert1:after { background: rgba(170,210,145,.9); }
.metaballvert2:before, .metaballvert2:after { background: rgba(100,200,105,.9); }
.metaballviolet1:before, .metaballviolet1:after { background: rgba(201, 160, 245, 0.9); }

.metaball1:before, .metaball1:after {
    width:100px;    height:100px;    left:50%;    top:50%;
}

.metaball2:before, .metaball2:after {
    width:80px;    height:80px;    left:30%;    top:100%;
}

.metaball3:before, .metaball3:after {
    width:50px;    height:50px;    left:30%;    top:50%;    
}

.metaball4:before, .metaball4:after {
    width:30px;    height:30px;    left:50%;    top:50%;    
}

.metaball:before {
  animation-duration: 19.3s;  animation-delay: -3.3s;
}
.metaball:nth-child(2):before {
  animation-duration: 14.7s;  animation-delay: -2.7s;
}
.metaball:nth-child(2):after {
  animation-duration: 8.7s;  animation-delay: -5.32s;
}
@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}
@keyframes move1 {
  0% {     transform: translate(0%, 100%);  }
  15% {    transform: translate(-120%, 160%);  }
  30% {    transform: translate(100%, -80%);  }
  40% {    transform: translate(-140%, 0%);  }
  60% {    transform: translate(40%, -80%);  }
  80% {    transform: translate(-160%, -20%);  }
  100% {   transform: translate(40%, 60%);  }
}
@keyframes move2 {
  0% {     transform: translate(0%, 50%);  }
  15% {    transform: translate(-80%, 80%);  }
  30% {    transform: translate(140%, -180%);  }
  40% {    transform: translate(-120%, 20%);  }
  60% {    transform: translate(140%, -80%);  }
  80% {    transform: translate(-110%, -20%);  }
  100% {   transform: translate(80%, 40%);  }
}