@font-face {
  font-family: "OpenSans";
  src: url("../css/fonts/opensans-regular.woff2"),
        url("../css/fonts/OpenSans-Regular.ttf") ;
}
@font-face {
  font-family: "HelveticaNeue";
  src: url("../css/fonts/HelveticaNeue-Medium.ttf") ;
}
@font-face {
  font-family: "Raleway";
  src: url("../css/fonts/Raleway-Medium.ttf") ;
}

*{
    font-family: "HelveticaNeue", monospace;
    -webkit-transform: translateZ(0);
}
*:active,
*:focus{
  /*background-image: none;*/
  outline: 0;
  -webkit-box-shadow: none;
          box-shadow: none;
}
html, body {
    height: 100%;
}
body {
    font-family: "HelveticaNeue", monospace;
    -webkit-transform: translateZ(0);
    text-align: center;
    margin: 0px;
    color:#3F4969;
}

button {
    font-family: "HelveticaNeue", monospace;
    width: 35px;
    height: 35px;
    vertical-align: middle;
    text-align: center;
    
    border: 1px solid #000;
    position: relative;
}
footer{
    border-top: 1px solid #E5E5E5;
}

button.picto{
    width:34px;
    height:34px;
    border-width: 0;
    font-size: 0;
    background-color: transparent;
}

button.picto.down{
    background-color: #fff;
}
button.picto:after{
    content: " ";
    position: absolute;
    /*
    height:36px;
    width:36px;
    top:-2px;
    left:-2px;
    */
    height:100%;
    width:100%;
    top:0;
    left:0;
    background-color: #fff;
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
button.picto.down:after{
    background-color: #3F4969;
}
button.picto.small{
    width:30px;
    height:30px;
}
button.picto.small:after{
    width:22px;
    height:22px;
}

a{
    color: inherit;
    text-decoration: none;
}

.disabled {
    opacity: 0.4;
}


button.disabled {
    pointer-events:none;
}



i.pictoarrow{
    background-image:url('../img/picto/createarrowupwhite.svg');
    background-position: 50%;
    background-size: 0;
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}
.echauffement i.pictoarrow{
    width: 40px;
    height: 40px;
}
i.pictoarrowup{
    transform: rotate(45deg);
    background-size: contain;
}
i.pictoarrowdown{
    transform: rotate(135deg);
    background-size: contain;
}


.credits a{
    text-decoration: underline;
    color:#333;
}