*{box-sizing:border-box}button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dashed}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=submit],[type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dashed 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

body{
    overflow-x:hidden;
    transition:background-color ease 500ms;
}

pre{
  -webkit-transition:all ease 500ms;
  -o-transition:all ease 500ms;
  transition:all ease 500ms;
  overflow-x: hidden;
  overflow-y: auto;
}
.material-icons{
  vertical-align: text-bottom;
}
#contact a{text-decoration: none;}

span:empty{padding: 0;}ul,li{margin:0; padding: 0; list-style: none;}.material-icons{vertical-align: sub; margin-right: .5rem;}

h1{margin:0; padding:0;}
#title, #contact{
  padding: 0;
  float:left;
}
article{
    width:0;
    height: 0;
    padding: 1rem;
    color:transparent;
}
.content li {
    padding: .5rem;
}

#mail a{
  text-decoration: none;

}
#mail, #tel, #name, #place{
  display:none;
  background: #f2f2f2;
  height:50px;
  padding:1rem;

}
#contact:after{
  content:'';
  clear:both;
  display: block;
  height: :0;
  visibility: hidden;;
}
#formation li li{
  padding-left: 1rem;
}


/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
    display: block;
    position: absolute;
    background: rgba(153,153,153, .2);;
    border-radius: 100%;
    -webkit-transform: scale(0);
    transform: scale(0);
}

/*animation effect*/
.ink.animate {
    -webkit-animation: ripple 0.65s linear;
    animation: ripple 0.65s linear;
}

@-webkit-keyframes ripple {
    /*scale the element to 850% to safely cover the entire link and fade it out*/
    100% {
        opacity: 0;
        -webkit-transform: scale(3);
        transform: scale(3);
    }
}

@keyframes ripple {
    /*scale the element to 850% to safely cover the entire link and fade it out*/
    100% {
        opacity: 0;
        -webkit-transform: scale(3);
        transform: scale(3);
    }
}


/*sortable grid*/
.ui-state-highlight {
    height: 475px;
    width:33.3333333333%;
    background:#f2f2f2;
    float:left;
}
.ui-sortable-helper{
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}


@media screen and (max-width:900px){
  body{
    background: #f2f2f2;
  }
  article{
    width: 100% !important;
    margin:0 !important;
    height:auto !important;
  }
  pre{
    width:100% !important;
    height:200px !important;
  }
}