body {
    
    
}
#logo {
    height: 150px;
}
.contain {
    padding: 30px;
}
.blue {
    background-color: #30415D;
    height: 100px;
    margin-bottom: 50px;
    box-shadow: 5px 5px 5px black;
}
.transparent {
    height: 60px;
    
}
.menu_img {
    height: 150px;
    width: 100%; 
    object-fit: cover; 
    object-position: 60%;
}
.menu_img:hover {
    height: 150px;
    width: 120%; 
    object-fit: cover; 
    object-position: 50%;
}


.logo{
    height: 150px;
    width: 165%; 
    object-fit: cover; 
    object-position: 60%;
}
.parallelogramme1{
    display:block;
    position:relative;
	width:100%;
	height:100px;
    margin-top: 25px;
	padding-bottom:25%;
  transform-origin:0 100%;
  -webkit-transform:skew(-30deg);
  -moz-transform:skew(-30deg);
  -o-transform:skew(-30deg);
  tranform:skew(-30deg);
  overflow:hidden;
  box-shadow: 5px 5px 5px black;
}
.parallelogramme1:before{
    content:'';
    position:absolute;
    width:124%; height:100%;
    left: -35px;;
    -webkit-transform:skew(30deg);
	-moz-transform:skew(30deg);
	-o-transform:skew(30deg);
	tranform:skew(30deg);
    background-image: url('../img/overwatch_pola.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    border:2px #30415D;
  }
  
  .parallelogramme2{
    display:block;
    position:relative;
	width:100%;
	height:100px;
    margin-top: 25px;
	padding-bottom:25%;
  transform-origin:0 100%;
  -webkit-transform:skew(-30deg);
  -moz-transform:skew(-30deg);
  -o-transform:skew(-30deg);
  tranform:skew(-30deg);
  overflow:hidden;
  box-shadow: 5px 5px 5px black;
}
.parallelogramme2:before{
    content:'';
    position:absolute;
    width:132%; height:100%;
    left: -35px;;
    -webkit-transform:skew(30deg);
	-moz-transform:skew(30deg);
	-o-transform:skew(30deg);
	tranform:skew(30deg);
    background-image: url('../img/fall-guys-skins-saison-3.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    border:2px #30415D;
    
  }

  .parallelogramme3{
    display:block;
    position:relative;
	width:100%;
	height:100px;
    margin-top: 25px;
	padding-bottom:25%;
  transform-origin:0 100%;
  -webkit-transform:skew(-30deg);
  -moz-transform:skew(-30deg);
  -o-transform:skew(-30deg);
  tranform:skew(-30deg);
  overflow:hidden;
  box-shadow: 5px 5px 5px black;
}
.parallelogramme3:before{
    content:'';
    position:absolute;
    width:122%; height:100%;
    left: -35px;;
    -webkit-transform:skew(30deg);
	-moz-transform:skew(30deg);
	-o-transform:skew(30deg);
	tranform:skew(30deg);
    background-image: url('../img/don-t-starve-img-4.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    border:2px #30415D;
    
  }

  .parallelogramme4{
    display:block;
    position:relative;
	width:100%;
	height:100px;
    margin-top: 25px;
	padding-bottom:25%;
  transform-origin:0 100%;
  -webkit-transform:skew(-30deg);
  -moz-transform:skew(-30deg);
  -o-transform:skew(-30deg);
  tranform:skew(-30deg);
  overflow:hidden;
  box-shadow: 5px 5px 5px black;
}
.parallelogramme4:before{
    content:'';
    position:absolute;
    width:122%; height:100%;
    left: -35px;;
    -webkit-transform:skew(30deg);
	-moz-transform:skew(30deg);
	-o-transform:skew(30deg);
	tranform:skew(30deg);
    background-image: url('../img/apropos.jpg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    border:2px #30415D;
    
  }
.red{
    background-color: red;
}