body {
    font-family: 'Open Sans', sans-serif;
	color: #333;
	margin : 0 ;
	background-color:rgba(0, 0, 255, 0.1);
	padding-bottom: 1em;
}



.contact{
	text-decoration: none;
	
}
a
{
	color: #333;
text-decoration:none;
transition:all 0.2s;
}
a:hover{
	text-decoration: underline;
}

#image{
	text-align:center;
	padding-top : 100px;
}
#ouverture{
	font-size: 3rem;
	text-transform: uppercase;
	font-weight: 700;
}

#description{
	font-size: 1.5rem; 
}

#content{
	text-align:center;
	padding-top: 40px;
}
#copyright{
	padding-top: 60px;
	font-size: .7em;
}


/**** animation**/
#image img {
	animation: fadein 2s ;
}
 @-webkit-keyframes fadein {
	0%   { opacity: 0;
			top:100px  }
	100% { opacity: 1;
			top:0px   }
  }
  @-moz-keyframes fadein {
	0%   { opacity: 0;
			top:100px }
	100% { opacity: 1;
			top:0px  }
  }
  @-o-keyframes fadein {
	0%   { opacity: 0;
			top:100px   }
	100% { opacity: 1; 
			top:0px  }
  }
  @keyframes fadein {
	0%   { opacity: 0; 
			top:100px  }
	100% {opacity : 1;
			top:0px  }
	}
/***********************************************/


@media screen and (max-width : 1350px) {
	.copyright{
		font-size:0.8rem
	}
	.background{

		width:30%
	}
	#copyright{
		padding-top: 130px
	}
}
@media screen and (max-width : 980px) {
	#ouverture{
		font-size : 2rem
	}
	#description{
	font-size:1.5rem;
	}
	#copyright{
		font-size:0.9rem
	}
	#image img{
		width:360px
	}
	.background{
		width:40%
	}
	#copyright{
		padding-top: 100px
	}
	
}
@media screen and (max-width : 690px) {

	#image img{
		width:200px;
	}
	.contact{
		font-size:0.9rem;	
	}
	#copyright{
			padding-top: 80px;
			font-size:0.7rem;
		}
	}