@charset "utf-8";
/* CSS Document */

* {	margin:0; padding:0; -webkit-text-size-adjust: none; box-sizing:border-box;-moz-box-sizing:border-box;}
body { background: url(images/bkg-main.jpg) no-repeat top right; background-size: cover; background-position: top left;} 

a { text-decoration:none; color:#000;}

.wrap { margin: 0 auto; width:990px;}

img { border:0; height:auto; max-width:100%; vertical-align: bottom;}

.vilmorin:hover, .vilmorin, .mikado:hover, .mikado {
-webkit-transition: all 0.5s ease-in-out ; -moz-transition: all 0.5s ease-in-out ; -ms-transition: all 0.5s ease-in-out ; -o-transition: all 0.5s ease-in-out ; transition: all 0.5s ease-in-out ;}

.flex
{ display: flex; display: -webkit-box;  display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap;}

@media all{
header { padding: 50px 0}  
    header .flex { justify-content: center; align-content: center; align-items: center}
    header .flex > * { width: 25%; text-align: center; background: #f4f4f4; margin: 0 5%;} 
    header .flex > * a { display: block; padding: 20px 50px}
    header .flex .vilmorin { box-shadow: -10px 2px 5px 0px #cdcdcd;
    -webkit-transform: perspective( 400px ) rotateY( 5deg );
    -moz-transform: perspective( 400px ) rotateY( 5deg );
    -o-transform: perspective( 400px ) rotateY( 5deg );
    transform: perspective( 400px ) rotateY( 5deg );}
    header .flex .vilmorin a { padding: 50px 50px}
    header .flex .vilmorin:hover, header .flex .mikado:hover { background: #f9f9f9; box-shadow: 0 0 5px 0px #cdcdcd;
    -webkit-transform: perspective( 400px ) rotateY( 0deg );
    -moz-transform: perspective( 400px ) rotateY( 0deg );
    -o-transform: perspective( 400px ) rotateY( 0deg );
    transform: perspective( 400px ) rotateY( 0deg );}
    
    .mikado {box-shadow: 10px 2px 5px 0px #cdcdcd;
    -webkit-transform: perspective( 400px ) rotateY( -5deg );
    -moz-transform: perspective( 400px ) rotateY( -5deg );
    -o-transform: perspective( 400px ) rotateY( -5deg );
    transform: perspective( 400px ) rotateY( -5deg );}
    
    .year { text-align: center; margin-bottom: 100px;}
	.year img { width: 120px;} 
    
	.main { align-items:center;height: 100vh;}
    .video { margin: 0 auto; width: 905px; position: relative;}
    .video::before { content: ""; background: #fff; position: absolute; top: -10%; left: -5%; width: 110%; height: 120%;  z-index: -1; box-shadow: 0 0 18px #cdcdcd;-ms-transform: rotate(1deg); -webkit-transform: rotate(1deg); transform: rotate(1deg);}
    .video iframe {margin-left: 3%;}
    .video p { text-align: center; margin-top:5px; font-size: 13px;}
    .limagrain {margin-bottom: 20px;}
    
    footer { position:fixed; right:0; bottom:0;}
}



@media all and (max-width: 1025px){
    .wrap { width: 96%;}  
header .flex > * { width: 40%;}
}


@media all and (max-width: 550px){
header { padding: 30px 0 55px;}
header .flex > * a { padding: 35px} 
header .flex .vilmorin a { padding: 55px 35px}
.year { margin-bottom: 60px;}
.video { padding: 20px 0;}
.limagrain {margin-bottom: 0px; width: 150px;}
footer { text-align: right; padding: 50px 10px 10px;}

.video::before {
background: none !important;
box-shadow: none ! important;
}

}

@media all and (max-width: 800px){
    .video::before {
    background: none !important;
    box-shadow: none ! important;
    }
}