.page {
    font-family: 'Convergence', cursive;
}

h1 { font-size: 150%; color: #0094DA; text-shadow: 0 0 25px #FFFFFF; }
h2 { font-size: 110%; margin-top: 2em; margin-bottom: 2em; color: #04326D; text-shadow: 0 0 5px #ffffff; }

div {
    -moz-border-radius: 0.1em 0.1em 0.1em 0.1em; -webkit-border-radius: 0.1em 0.1em 0.1em 0.1em; 
}
#section1 { display: flex; margin: auto; flex-flow: row wrap; width: 99%; margin-top: 5%; }
#section2 { min-height: 435px; }

#presentation, #sectionF, .defile {
    background: -webkit-linear-gradient(#EFFAFF, #B6BDEC); background: -moz-linear-gradient(#EFFAFF, #B6BDEC);
    background: -ms-linear-gradient(#EFFAFF, #B6BDEC); background: -o-linear-gradient(#EFFAFF, #B6BDEC);
    background: linear-gradient(#EFFAFF, #B6BDEC); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EFFAFF', endColorstr='#B6BDEC', GradientType=0);
}

.defile ol, #video{  
    border: 1px solid #4A4A4D;  border-collapse: separate;  border-spacing: 0px;
    
    background: -webkit-linear-gradient(#9B9B9B, #080809); background: -moz-linear-gradient(#9B9B9B, #080809);
    background: -ms-linear-gradient(#9B9B9B, #080809); background: -o-linear-gradient(#9B9B9B, #080809);
    background: linear-gradient(#9B9B9B, #080809); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9B9B9B', endColorstr='#080809', GradientType=0);
    
    box-shadow: 0px 0px 1px 1px #271C29; -moz-box-shadow: 0px 0px 1px 1px #271C29; -webkit-box-shadow: 0px 0px 1px 1px #271C29;
}

/* BULLES */
#section1 > div { flex: 0 1 auto; }

#bulles1 .youtube, #bulles1 .youtube iframe { width: 17em;  }
.bulle, #bulles1 .youtube iframe {
    margin-bottom: 3em;   
    border: 1px solid #FFFFFF; border-collapse: separate; border-spacing: 0px;    
    box-shadow: 0px 0px 2px 2px #531F68; -moz-box-shadow: 0px 0px 2px 2px #531F68; -webkit-box-shadow: 0px 0px 2px 2px #531F68;
}

.bulles{
    width : 17em; height: auto; margin-left: 2%; margin-right: 2%;
    text-align: center; color: #FFFFFF; 
}

.bulle { 
    position: relative; width : 12em; height: 12em;
    padding-top : 0.5em;      
}

#bulles1{ margin-top : 5vh; }
#bulles2{ margin-top : 10vh; }

#b11{
    background: -webkit-linear-gradient(#76B6DA, #3C69C7, #2395CA); background: -moz-linear-gradient(#76B6DA, #3C69C7, #2395CA);
    background: -ms-linear-gradient(#76B6DA, #3C69C7, #2395CA); background: -o-linear-gradient(#76B6DA, #3C69C7, #2395CA);
    background: linear-gradient(#76B6DA, #3C69C7, #2395CA); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76B6DA', endColorstr='#2395CA', GradientType=0);
}

#b12{
    background: -webkit-linear-gradient(#DA76AA, #E710A2, #973149); background: -moz-linear-gradient(#DA76AA, #E710A2, #973149);
    background: -ms-linear-gradient(#DA76AA, #E710A2, #973149); background: -o-linear-gradient(#DA76AA, #E710A2, #973149);
    background: linear-gradient(#DA76AA, #E710A2, #973149); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DA76AA', endColorstr='#973149', GradientType=0);
}

#b21{
    background: -webkit-linear-gradient(#D6DA76, #D8D12D, #F8EA44); background: -moz-linear-gradient(#D6DA76, #D8D12D, #F8EA44);
    background: -ms-linear-gradient(#D6DA76, #D8D12D, #F8EA44); background: -o-linear-gradient(#D6DA76, #D8D12D, #F8EA44);
    background: linear-gradient(#D6DA76, #D8D12D, #F8EA44); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D6DA76', endColorstr='#F8EA44', GradientType=0);
}

#b22 {
    background: -webkit-linear-gradient(#696969, #7E7E7E, #020202); background: -moz-linear-gradient(#696969, #7E7E7E, #020202);
    background: -ms-linear-gradient(#696969, #7E7E7E, #020202); background: -o-linear-gradient(#696969, #7E7E7E, #020202);
    background: linear-gradient(#696969, #7E7E7E, #020202); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#696969', endColorstr='#020202', GradientType=0);
}
#b11 h3 { display: block; height: 90%; margin-top: 10%; }
#b22 h3:first-child { margin-top: 6%; }

#b11 img { margin-top: 10%; }
#bulle2Img1{ margin-top: 15%; }
#bulle2Img2{ margin-top: 25%; }

.bulle img, .bulle h3{
    visibility: hidden;
}

.b12 h4, #bulle3 h4{
    margin: 0;
    margin-top: 10px;
}

/* PRESENTATION */

#video {
    width: 50%; display: inline-block;  margin-left: 5%; padding : 2em;
}
@media (max-width: 1400px)
{
    #video {
        margin-left: auto;
    }
}
#presentation {
    height: auto; padding : 2em; width: 800px; max-width: 90vw; margin: 0 4vw;
    border: 1px solid #FFFFFF; border-collapse: separate; border-spacing: 0px;
    /*box-shadow: 0px 0px 2px 3px #531F68; -moz-box-shadow: 0px 0px 2px 3px #531F68; -webkit-box-shadow: 0px 0px 2px 3px #531F68;*/
}
#presentation img{
    display: block; margin: auto; max-width: 98%;
}
#presentation img:nth-child(7){
    display: initial; margin-left: 2em;
}
#presentation img:nth-child(8){
    display: initial; margin-left: 40%;
}
#IDMYouTube{
    padding-top: 5%;
    height: 400px;
}

#IDMYouTube iframe{
    width: 100%;
    height: 90%;
}

/* GALERIE */

#sectionDefile{
    position: relative; width: 100%; overflow: hidden;
    margin-top : 10em; margin-bottom: 0;
    padding-top : 1em; padding-bottom: 1.5em;
}
.defile ol img, .defile ol video{
    border: 1px solid #FFFFFF; border-collapse: separate; border-spacing: 0px;
}

/* CONTACT */ 

#sectionF p, #sectionF h4, #sectionF h3{ margin : 0; text-align: center; }

#sectionF h3{ font-size: 20px; }
#sectionF h3:nth-child(2) { color: #DE362C; margin-top: 20px; margin-bottom: 20px; }
#sectionF h3:nth-child(4){ color: #DE362C; margin-top: 10px; margin-bottom: 10px; }
#sectionF p{ font-size: 90%; }

.map{ margin-top: 5px; margin-right: 5px; width: 100%; }
.map iframe{ width: 99%; }

/*Animation BULLE */

.bulle:hover{
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-duration: 12s; -webkit-animation-delay: 0s;
    -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate; -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-duration: 12s; animation-delay: 0s;
    animation-timing-function: linear; animation-iteration-count: infinite;
    animation-direction: alternate; animation-play-state: running;
}

.bulle:hover > img, .bulle:hover > h3{ visibility: visible; }

@media only screen and (max-device-width: 1024px){ /* Apple Mobile */
   .bulle img, .bulle h3{ visibility: visible; }
}

#b11:hover{ -webkit-animation-name: myBulleBleu; animation-name: myBulleBleu; }
#b12:hover{ -webkit-animation-name: myBulleRose; animation-name: myBulleRose; }
#b21:hover{ -webkit-animation-name: myBulleJaune; animation-name: myBulleJaune; }
#b22:hover{ -webkit-animation-name: myBulleNoire; animation-name: myBulleNoire; }

@media (min-width: 809px)
{
    /* Chrome, Safari, Opera */
    @-webkit-keyframes myBulleBleu {
        0%   {background:#2395CA; width:300%; }  10%  {background:#76B6DA; width:300%; }
        30%  {background:#3C69C7; width:300%; }  50%  {background:#3C69C7; width:300%; }
        60%  {background:#3C69C7; width:300%; }  90%  {background:#B6BDEC; width:300%; }
        100% {background:#7F87EE; width:300%; }
    }
    /* Standard syntax */
    @keyframes myBulleBleu {
        0%   {background:#2395CA; width:300%; }  10%  {background:#76B6DA; width:300%; }
        30%  {background:#3C69C7; width:300%; }  50%  {background:#3C69C7; width:300%; }
        60%  {background:#3C69C7; width:300%; }  90%  {background:#B6BDEC; width:300%; }
        100% {background:#7F87EE; width:300%; }
    }

    @-webkit-keyframes myBulleRose {
        0%   {background:#2395CA; width:300%; }  10%  {background:#E710A2; width:300%; }
        30%  {background:#DA76AA; width:300%; }  50%  {background:#DA76AA; width:300%; }
        60%  {background:#DA76AA; width:300%; }  90%  {background:#973149; width:300%; }
        100% {background:#DA76AA; width:300%; }
    }
    @keyframes myBulleRose {
        0%   {background:#2395CA; width:300%; }  10%  {background:#E710A2; width:300%; }
        30%  {background:#DA76AA; width:300%; }  50%  {background:#DA76AA; width:300%; }
        60%  {background:#DA76AA; width:300%; }  90%  {background:#973149; width:300%; }
        100% {background:#DA76AA; width:300%; }
    }

    @-webkit-keyframes myBulleJaune {
        0%   {background:#D6DA76; width:300%; }  10%  {background:#D8D12D; width:300%; }
        30%  {background:#F8EA44; width:300%; }  50%  {background:#F8EA44; width:300%; }
        60%  {background:#F8EA44; width:300%; }  90%  {background:#D8D12D; width:300%; }
        100% {background:#D6DA76; width:300%; }
    }
    @keyframes myBulleJaune {
        0%   {background:#D6DA76; width:300%; }  10%  {background:#D8D12D; width:300%; }
        30%  {background:#F8EA44; width:300%; }  50%  {background:#F8EA44; width:300%; }
        60%  {background:#F8EA44; width:300%; }  90%  {background:#D8D12D; width:300%; }
        100% {background:#D6DA76; width:300%; }
    }

    @-webkit-keyframes myBulleNoire {
        0%   {background:#696969; width:300%; }  10%  {background:#7E7E7E; width:300%; }
        30%  {background:#020202; width:300%; }  50%  {background:#020202; width:300%; }
        60%  {background:#020202; width:300%; }  90%  {background:#7E7E7E; width:300%; }
        100% {background:#696969; width:300%; }
    }
    @keyframes myBulleNoire {
        0%   {background:#696969; width:300%; }  10%  {background:#7E7E7E; width:300%; }
        30%  {background:#020202; width:300%; }  50%  {background:#020202; width:300%; }
        60%  {background:#020202; width:300%; }  90%  {background:#7E7E7E; width:300%; }
        100% {background:#696969; width:300%; }
    }
}

@media (max-width: 808px)
{
    /* Chrome, Safari, Opera */
    @-webkit-keyframes myBulleBleu {
        0%   {background:#2395CA; }        10%  {background:#76B6DA; }
        30%  {background:#3C69C7; }        50%  {background:#3C69C7; }
        60%  {background:#3C69C7; }        90%  {background:#B6BDEC; }
        100% {background:#7F87EE; }
    }
    /* Standard syntax */
    @keyframes myBulleBleu {
        0%   {background:#2395CA; }        10%  {background:#76B6DA; }
        30%  {background:#3C69C7; }        50%  {background:#3C69C7; }
        60%  {background:#3C69C7; }        90%  {background:#B6BDEC; }
        100% {background:#7F87EE; }
    }
    @-webkit-keyframes myBulleRose {
        0%   {background:#2395CA; }        10%  {background:#E710A2; }
        30%  {background:#DA76AA; }        50%  {background:#DA76AA; }
        60%  {background:#DA76AA; }        90%  {background:#973149; }
        100% {background:#DA76AA; }
    }
    @keyframes myBulleRose {
        0%   {background:#2395CA; }        10%  {background:#E710A2; }
        30%  {background:#DA76AA; }        50%  {background:#DA76AA; }
        60%  {background:#DA76AA; }        90%  {background:#973149; }
        100% {background:#DA76AA; }
    }
    @-webkit-keyframes myBulleJaune {
        0%   {background:#D6DA76; }        10%  {background:#D8D12D; }
        30%  {background:#F8EA44; }        50%  {background:#F8EA44; }
        60%  {background:#F8EA44; }        90%  {background:#D8D12D; }
        100% {background:#D6DA76; }
    }
    @keyframes myBulleJaune {
        0%   {background:#D6DA76; }        10%  {background:#D8D12D; }
        30%  {background:#F8EA44; }        50%  {background:#F8EA44; }
        60%  {background:#F8EA44; }        90%  {background:#D8D12D; }
        100% {background:#D6DA76; }
    }

    @-webkit-keyframes myBulleNoire {
        0%   {background:#696969; }        10%  {background:#7E7E7E; }
        30%  {background:#020202; }        50%  {background:#020202; }
        60%  {background:#020202; }        90%  {background:#7E7E7E; }
        100% {background:#696969; }
    }
    @keyframes myBulleNoire {
        0%   {background:#696969; }        10%  {background:#7E7E7E; }
        30%  {background:#020202; }        50%  {background:#020202; }
        60%  {background:#020202; }        90%  {background:#7E7E7E; }
        100% {background:#696969; }
    }
}

@media (min-width: 0px) and (max-width: 330px)
{
    #b11:hover > div{
        width: 100%; height: 30%;
        margin-bottom: 0;
    }

    #b12:hover > div{
        width: 100%; height: 30%;
        margin-bottom: 10px;
    }
    
    #b11:hover > div img{
        margin-top: 1px;
    }

    #b12:hover > div img{
        margin-top: 1px;
    }
    
    #b11:hover > div h{
        width: 30%; margin-top: 40px; margin-left: 0; margin-right: 0; float: left;
    }

    #b12:hover > div h4{
        width: 100%; margin-top: 6px; margin-bottom: 2px; margin-right: 0; float: left;
    }
}

/* ANIMATION PRESENTATION */ 
#presentation:hover > h1 {
    -webkit-animation-name: balancoire; animation-name: balancoire;
    /* Chrome, Safari, Opera */
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear; -webkit-animation-delay: 0s;
    -webkit-animation-direction: alternate; -webkit-animation-play-state: running;
    /* Standard syntax */
    animation-duration: 1s;
    animation-timing-function: linear;  animation-delay: 0s;
    animation-direction: alternate; animation-play-state: running;
}

@-webkit-keyframes balancoire {
    0%   { transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    5%  { transform: rotate(-5deg); -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); }
    60% { transform: rotate(2deg); -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); }
    100% { transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
}

@keyframes balancoire {
    0%   { transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
    5%  { transform: rotate(-5deg); -ms-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); }
    60% { transform: rotate(2deg); -ms-transform: rotate(2deg); -webkit-transform: rotate(2deg); }
    100% { transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
}

/* RESPONSIVE */
#sectionF{ z-index: 25; }
@media (min-width: 1079px)
{    
    #sectionF{
        position: fixed;
        right: 0px; bottom: 10px;
        width: 250px; padding-top: 2px;
    }
}

@media (max-width: 1078px)
{
    #video{
        width: 65%; 
    }
    #sectionDefile{
        margin-top: 5em;
    }
    #sectionF{
        position: relative; width: 80%;
        top: auto; right: auto;
        margin: auto; margin-left: 15%; margin-top: 5em;
    }
}

@media (max-width: 808px)
{
    .bulles{
        width: 95%; height: auto; margin-left: 2.5%; 
    }
    .bulle, .html5 { margin: auto;  }
    .bulle { margin-bottom: 2em; width: 80%; }
    .bulle img, .bulle h3{
        visibility: visible;
    }
    #video{
        width: 90%; margin-left: 1%;
    }
    #bulles1 .youtube iframe { height: 300px; width: 100%; } #bulles1 .youtube { width: 100%;  }
}
@media (max-width: 650px)
{
    #video { padding: 5px 5px 5px 5px; margin-left: 3%; }
}
@media (max-width: 334px)
{
    #sectionF{
        position: relative; width: 100%;
        top: auto; right: auto;
        margin: auto; margin-left: 0; margin-top: 1em;
    }
    
}

@media (min-width: 541px)
{
    #section1{ margin-bottom: 5%; }
}

@media (max-width: 540px)
{
    #section1{ margin-top: 1em; }
    #section2{ margin-top: 1em; }
}