* { -o-box-sizing: border-box; box-sizing: border-box; }
a{ color:inherit; text-decoration:inherit; /*-webkit-transition:all 0.1s; transition:all 0.1s;*/ }
html{ padding:0; margin:0; width:100%; height:100%; }
body{ height:100%;  font-family: 'Open Sans', sans-serif; position:relative; background:#dddddd url(../imgs/back.png); color: #454545; font-size:14px; position: relative; margin: 0; padding:0; }
#page{ max-width: 1200px; padding:0 20px 70px 20px; background: #ffffff; min-height:100vh; margin: auto; box-shadow:0 0 6px rgba(0,0,0,0.2);   }


header{ background:#e6e6e6; padding:25px 0 0 0; text-align: center;}
header>img{ display: block; width: 100%; height: auto; margin:25px 0 0 0; }
#logo{ display: block; position: relative;width:250px; height: 70px; background: url(../imgs/logo-meca2a.svg); margin:20px auto; }
header hr{ display: block; width:38px; height:5px; background:#454545; border: none; margin:20px auto; }

section a{ box-shadow:0 0 10px rgba(0,0,0,0.2);  font-size: 13px; display: table; position: relative; table-layout: fixed; width: 100%; height:340px;  border: 10px solid #d01317; max-width: 1000px; margin:30px auto; }


section a:hover{ border: 10px solid #454545;}


section a>span{ display:table-cell; height: 100%; vertical-align: top;position: relative;}

section a>span:first-child>span{ display: block; position: relative; display: flex; height:50%; }

section a>span:first-child>span:first-child{background:#ffffff;}
section a>span:first-child>span:last-child{background:#f0f0f0; padding:20px 20px 20px 70px;}

section a>span:first-child>span>span{ position: relative; z-index: 20; margin: auto; }

section a>span:first-child>span:first-child>span{ margin:auto auto auto 0px; }






section a>span:first-child>span:before{ content: ""; display: block; position: absolute; top: 0; left:0; z-index:10;height:100%; width:100%;}
section a>span:first-child>span:first-child:before{ transform-origin:bottom left; transform: skewX(-35deg); background:#ffffff; }
section a>span:first-child>span:last-child:before{ transform-origin:top left; transform: skewX(35deg); background:#f0f0f0; }



section a>span>span:first-child>span{ position: absolute; top: 0; left: 0; height: 100%; width:100%; text-indent: 200%; white-space: nowrap; overflow: hidden; }



section a.mdf>span:first-child>span:first-child>span{ background: url(../imgs/logo-mdf.svg) left center no-repeat; background-size:250px 200px;  }

section a>span:last-child{ background-size: cover; background-position: center center; }

section a.mdf>span:last-child{ background-image: url(../imgs/visuel-mdf.jpg); }

/*
section a:last-child>span:first-child>span:first-child>span{ background: url(../imgs/logo-rectif.svg) left center no-repeat; background-size:250px 200px;  }
section a:last-child>span:last-child{ background-image: url(../imgs/visuel-rectif.jpg); }
*/