@font-face {
    font-family: "lycee";
    src: url('cartoon.ttf');
}
body
    {
        margin: 0px 0px 0px 0px!important;
    }

header2
    {display: inline-block;}
header
    {
        background-color: #343e46;
        color: #00bad9;
        padding-bottom: 1em;
        z-index: 20;
        position: fixed;
        top: 0em;
        width: 100%;
    }
footer
    {
        background-color: #343e46;
        color: #00bad9;
        z-index: 20;
        position: fixed;
        bottom: 0em;
        width: 100%;
        padding: 0.5em;
    }
.logo
    {
        font-family: lycee;
        font-size: 8em;
        text-align: center;
    }
.but
    {
        font-size: 0.8em;
        text-align: center;
        font-style: italic;
    }
 .contentB
    {
        color: #ffffff;
        background-color: #00bad9;
        margin-top: -2em !important;
        padding: 1em 5em;
    }
 .contentW
    {
        color: #00bad9;  
        background-color: #eeeeee;
        padding: 1em 5em;

    }
.message.bleu
    {
        background-color: #343e46;
        color: #00bad9;
    }
.bulle:before, .bulle:after
    {
    font-size: 40px;

    }
.big:before, .big:after
    {
    font-size: 250px;

    }
.icone
    {
        width: 10%;
        display: inline-block;
        text-align: center;
        animation: float 1s ease-out infinite;

    }
#icon-area
    {
        text-align: center;
        margin: -4em 1em 1em 0em;
        opacity: 0.5;
    }

.ascending7{animation-delay: 0.1s;}
.atom18{animation-delay: 0.2s;}
.basketball32{animation-delay: 0.3s;}
.brush19{animation-delay: 0.4s;}
.boy31{animation-delay: 0.5s;}
.chemistry11{animation-delay: 0.6s;}
.computer146{animation-delay: 0.7s;}
.draft1{animation-delay: 0.8s;}
.earth180{animation-delay: 0.9s;}

.colonne.C40  {width: 50% !important; text-align: center;}
.colonne.C60  {width: 50% !important;}

.colonne
    {
        width: 50%;
        display: table-cell;
        vertical-align: middle;
        padding: 1em;
        font-size: 1.5em;
    }

.titre
    {
        text-align: center;
        padding-top: 1em !important;
    }
#edt
    {
        width: 100%;
    }
.basic.button
    {
        color: #00bad9 !important;
        
    }
#site
    {
        float: right;
        margin: 0.5em 1.5em;
    }
#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}
@keyframes float {
  50% {
     transform: translate(0, 20px);
  }
}
    
/* Inverted */
.ui.basic.inverted22.buttons .button,
.ui.basic.inverted2.button {
  color: #00bad9 !important;
  -webkit-box-shadow: 0px 0px 0px 1px #00bad9 inset;
  box-shadow: 0px 0px 0px 1px #00bad9 inset;
}
.ui.basic.inverted2.buttons .button:hover,
.ui.basic.inverted2.button:hover {
    background-color: #00bad9  !important;
    color: #ffffff !important;
  -webkit-box-shadow: 0px 0px 0px 1px #00bad9 inset;
  box-shadow: 0px 0px 0px 1px #00bad9 inset;
}
.ui.basic.inverted2.buttons .button:active,
.ui.basic.inverted2.button:active {
 background-color: #00bad9  !important;
    color: #ffffff !important;
  -webkit-box-shadow: 0px 0px 0px 1px #00bad9 inset;
  box-shadow: 0px 0px 0px 1px #00bad9 inset;
}
.ui.basic.inverted2.buttons .button.active,
.ui.basic.inverted2.button.active {
  background-color: #00bad9  !important;
    color: #ffffff !important;
  -webkit-box-shadow: 0px 0px 0px 1px #00bad9 inset;
  box-shadow: 0px 0px 0px 1px #00bad9 inset;
}
.ui.basic.inverted2.buttons .button.active:hover,
.ui.basic.inverted2.button.active:hover {
background-color: #00bad9  !important;
    color: #ffffff !important;
  -webkit-box-shadow: 0px 0px 0px 1px #00bad9 inset;
  box-shadow: 0px 0px 0px 1px #00bad9 inset;}
/* Basic Group */
.ui.basic.buttons .button {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.ui.basic.buttons .button:hover,
.ui.basic.buttons .button:active {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.ui.basic.buttons .button.active,
.ui.basic.buttons .button.active:hover {
  -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset;
}
.video-js 
{
    margin: auto;
}