@font-face {
    font-family: 'robotoregular';
    src: url('Roboto-Regular-webfont.eot');
    src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Regular-webfont.woff') format('woff'),
         url('Roboto-Regular-webfont.ttf') format('truetype'),
         url('Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotobold';
    src: url('Roboto-Bold-webfont.eot');
    src: url('Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Bold-webfont.woff') format('woff'),
         url('Roboto-Bold-webfont.ttf') format('truetype'),
         url('Roboto-Bold-webfont.svg#robotobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotolight';
    src: url('Roboto-Light-webfont.eot');
    src: url('Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Light-webfont.woff') format('woff'),
         url('Roboto-Light-webfont.ttf') format('truetype'),
         url('Roboto-Light-webfont.svg#robotolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'robotoitalic';
    src: url('Roboto-Italic-webfont.eot');
    src: url('Roboto-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Italic-webfont.woff') format('woff'),
         url('Roboto-Italic-webfont.ttf') format('truetype'),
         url('Roboto-Italic-webfont.svg#robotoitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
strong{font-family:'robotoregular', Arial, Helvetica, sans-serif;}
italic{font-family:'robotoitalic', Arial, Helvetica, sans-serif;}
/*-------------------------------*/
body {
    font-family:'robotoregular', Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-size: 18px;
    color: #3D3E43;
    background-image: url(header.jpg);
    background-repeat: no-repeat;
    background-position: top center;
}
.header,.main{
    width: 1200px;
    margin:0 auto;
}
.header {
    height:410px;
}
P {
    margin: 4px 0 22px 0;
    line-height: 1.45;
}
H1 {
    margin:20px 0 15px;
    font-weight: 700;
    font-size: 45px;
    color:#6EC1E4;
    font-family:'robotobold', Arial, Helvetica, sans-serif;
}

H2 {
    font-weight: 300;
    font-size: 38px;
    margin: 18px 0 10px 0;
    line-height: 1.1;
    font-family:'robotobold', Arial, Helvetica, sans-serif;
}
H3 {
    font-weight: 700;
    font-size: 28px;
    margin: 29px 0 24px 0;
    color: #FF7800;
    font-family:'robotobold', Arial, Helvetica, sans-serif;
}
H4 {
    font-weight: 700;
    font-size: 24px;
    margin: 28px 0 17px 0;
    color: #3458A5;
    font-family:'robotobold', Arial, Helvetica, sans-serif;
}
H5 {
    font-weight: 700;
    font-size:55px;
    margin:80px 0 0 0;
    color: #fff;
    font-family:'robotobold', Arial, Helvetica, sans-serif;
}
H6 {
    font-weight: 700;
    font-size: 21px;
    margin: 17px 0 10px 0;
    font-family:'robotobold', Arial, Helvetica, sans-serif;
}
.footer{
    background-color:#6EC1E4;
    padding: 25px 0;
    height:240px;
    text-align: center;
    color:#fff;
}
.tarifs, .video{
    display: flex;
    justify-content: space-between;
    margin-bottom:45px;
}
.tarifs DIV{
    width:30%;
}
.tarifs strong{
    color:#6EC1E4;
}



@media screen and (min-width:1px) and (max-width:1000px){
    .header,.main, .footer{width:96%;margin:0 0 0 2%;}
    body{ background-image: url(header-mini.jpg);background-position:top right;}
    .header{height:190px;}
    h5{font-size:34px;}
    iframe{max-width:100%;width:100% !important; height:340px !important;}
    .video, .tarifs{display:block !important;}
    .tarifs DIV{width:100%; margin-bottom:19px;}
    .main IMG{width:100% !important; height:auto !important;}
}
@media screen and (min-width:1001px) and (max-width:1250px){
    .header,.main, .footer{width:96%;margin:0 0 0 2%;}
    .main IMG{width:100% !important; height:auto !important;}
}