/*Réaliser un afficahe de deux blocs*/
*{
    box-sizing:border-box;
}
.container{
    width: 800px;
    margin: 0 auto;
    vertical-align: top;
    border: 4mm ridge rgba(170, 50, 220, .6);
}
.container p{
    margin: 0 auto;
}
.lien {
	background: darkgrey;
	text-align: center;
	padding: 20px;

}
.cl-lien a{
    color: black;
	text-decoration: none;
	font-size: 1.6em;
}
.cl-lien a::before,
.cl-lien a::after {
	display: inline-block;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
	-moz-transition: -moz-transform 0.3s, opacity 0.2s;
	transition: transform 0.3s, opacity 0.2s;
}

.cl-lien a::before {
	margin-right: 10px;
	content: '[';
	-webkit-transform: translateX(20px);
	-moz-transform: translateX(20px);
	transform: translateX(20px);
}

.cl-lien a::after {
	margin-left: 10px;
	content: ']';
	-webkit-transform: translateX(-20px);
	-moz-transform: translateX(-20px);
	transform: translateX(-20px);
}

.cl-lien a:hover::before,
.cl-lien a:hover::after,
.cl-lien a:focus::before,
.cl-lien a:focus::after {
	opacity: 1;
	-webkit-transform: translateX(0px);
	-moz-transform: translateX(0px);
	transform: translateX(0px);
}
.blue{
    width: 80%;
    height: 100%;
    background-color: blue;
    display: inline-block;
    vertical-align: top;
    padding:15px;
}
.green{
    background-color: pink;
}
.green2{
    background-color: green;
}
.img{
	transition-property: transform, width, height, top;
	-webkit-transition-property: transform, width, height, top;
    transition-duration: .5s;
	transition-timing-function: ease-out;
	position: relative;
}
img:hover {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	width:130px;
	height:130px;
	top: 20px;
}
.red{
    width: 18%;
    height: 150px;
    background-color: red;
    display: inline-block;
    vertical-align: top;
}

/* Version mobile et tablette*/

@media screen and (max-width: 800px){

.container{
    width: 100%;
    margin: 0 auto;
    vertical-align: top;
    border: 4mm ridge rgba(170, 50, 220, .6);
}
.container p{
    margin: 0 auto;
}

.blue{
    width: 100%;
    height: 100%;
    background-color: blue;
    display: inline-block;
    vertical-align: top;
    padding:15px;
}
.green{
    background-color: pink;
}
.green2{
    background-color: green;

}
.red{
    width: 100%;
    background-color: red;
    display: block;
}
}