html, body, div, span, header, footer, img, p, nav, ul, li, main, a, h1, h2, br
{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
color: unset;
font-family:Arial, Helvetica, sans-serif;
}

@font-face {
font-family: 'cac_champagneregular';
src: url('../font/cac_champagne-webfont.eot');
src: url('../font/cac_champagne-webfont.eot?#iefix') format('embedded-opentype'),
url('../font/cac_champagne-webfont.woff2') format('woff2'),
url('../font/cac_champagne-webfont.woff') format('woff'),
url('../font/cac_champagne-webfont.ttf') format('truetype'),
url('../font/cac_champagne-webfont.svg#cac_champagneregular') format('svg');
font-weight: normal;
font-style: normal;

}

/* Extra small devices (portrait phones, less than 576px) */

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

html {
height: 100%;
}

body {
height: 100%;
background: url(../img/peninsula.jpg) no-repeat;
background-size:cover;
background-position: center;
background-attachment: fixed; 
display: flex;
align-items: center;
justify-content: center;
}


main{
width:100%;
min-height: 200px;
margin:0 auto;
display: flex;
align-items: center;
justify-content: center;
}

.site{
background-color: rgba(255, 255, 255, 0.473); 
width: 100%;
min-height: 300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.cadre{
background: url(../img/cadre.png) no-repeat;
background-size: 75%;
background-position: center;
width: 300px;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
}

.intro{  
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.btn-lg {
background-color:rgb(39, 55, 77);
}

.btn-lg:hover{
background-color:#D98F3E;
}

.btn-lg p {
font-size: 0.5em;
}

h1{
text-align: center;
font-size: 1.8em;
font-family: 'cac_champagneregular', Arial, Helvetica, sans-serif;
margin: 10px;
}

h2{
font-size: 0.7em;    
}

p{
font-size: 0.7em;
margin: 10px;
}

}















/*  Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) { 

html {
height: 100%;
}

body{
height: 100%; 
background: url(../img/peninsula.jpg) no-repeat;
background-size:cover;
background-position: center;
background-attachment: fixed; 
display: flex;
align-items: center;
justify-content: center;
}

main{

width: 100%;
height: 80%;
margin:0 auto;
display: flex;
align-items: center;
justify-content: center;

}

.site{
background-color: rgba(255, 255, 255, 0.473); 
width: 100%;
height: 81%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

}


.cadre{
background: url(../img/cadre.png) no-repeat;
background-size: 75%;
background-position: center;
width: 81%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.intro{  
width: 61%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.btn-lg {
background-color:rgb(39, 55, 77);
margin-top: 10px;
margin-bottom: 10px;
}

.btn-lg p {
font-size: 1em;
}

.btn-lg:hover{
background-color:#D98F3E;
}

h1{
font-family: 'cac_champagneregular';
font-size: 3em;
margin: 10px;
}

h2{
font-size: 1.5em;    
}

p{
font-size: 1.5em;
margin: 10px;
}

}





















/* Pour ecran(desktops, 992px and up) */
@media screen and (min-width: 992px) { 

html {
height: 100%;
}

body{
height: 100%; 
background: url(../img/peninsula.jpg) no-repeat;
background-size:cover;
background-position: center;
background-attachment: fixed; 
display: flex;
align-items: center;
justify-content: center;
}

main{

width: 980px;
height: 80%;
margin:0 auto;
display: flex;
align-items: center;
justify-content: center;

}

.site{
background-color: rgba(255, 255, 255, 0.473); 
width: 980px;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

}


.cadre{
background: url(../img/cadre.png) no-repeat;
background-size: 75%;
background-position: center;
width: 800px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}

.intro{  
width: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.btn-lg {
background-color:rgb(39, 55, 77);
margin-top: 10px;
margin-bottom: 10px;
}

.btn-lg p {
font-size: 1em;
}

.btn-lg:hover{
background-color:#D98F3E;
}

h1{
font-family: 'cac_champagneregular';
font-size: 5em;
margin: 50px;
}

h2{
font-size: 2em;    
}

p{
font-size: 2em;
margin: 10px;
}


}