@font-face {
    font-family: 'baskervilleitalic';
    src: url('../fonts/baskerville-italic-03-webfont.woff2') format('woff2'),
         url('../fonts/baskerville-italic-03-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'baskervillesemibold_italic';
    src: url('../fonts/baskerville-semibolditalic.woff2') format('woff2'),
         url('../fonts/baskerville-semibolditalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'didotbold';
    src: url('../fonts/didot-bold.woff2') format('woff2'),
         url('../fonts/didot-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
*{margin: 0; padding: 0; box-sizing: border-box;}
body{ background-color: #e9e4d8;color:#231f20; margin: 0; padding: 0; box-sizing: border-box;font-family: 'baskervilleitalic'; font-size: 16px; line-height: 1.4;}
.mainBanner{ background: #000 url(../image/modavivendi_pic1.jpg) no-repeat center center; background-size: cover; width: 100%; padding:0 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; position: relative;}
/*.mainBanner:before{ height: 300px; content: ""; position: absolute; left: 0; bottom:0; width: 100%;background: rgb(0,0,0);
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 45%, rgba(255,255,255,0) 100%);}*/
.mainBanner:before{ height: 100%; content: ""; position: absolute; left: 0; bottom:0; width: 100%;background: rgba(0,0,0,.25);}
h1{color:#fff;font-family: 'didotbold';font-weight: normal; font-size:64px;text-align: center; position: relative;}
h1 span{font-family: 'baskervilleitalic';position: relative;right: -6px;}
.banner-bottom{color: #fff; margin-top: auto; font-size: 24px; position: absolute; bottom: 50px; left: 0; right: 0; margin: 0 auto; text-align: center; padding: 0 20px;}
.bannerBOttomIcon img { max-width: 30px;}
.contentSection{ padding: 50px 20px; text-align: center;}
.container{ max-width: 800px; margin: 0 auto;}
h2{font-family: 'didotbold';font-weight: normal; font-size:48px; padding-bottom: 38px; background: url(../image/modavivendi_flower.png) no-repeat bottom center; background-size: 30px; margin-bottom: 100px;}
h2 span{font-family: 'baskervilleitalic'; font-style: italic;}
.bannerBOttomIcon{ margin-bottom: 20px;}
.contentSection p{ font-family: 'baskervilleitalic'; font-size: 22px; margin-bottom: 100px;}
.contentSection p strong{font-family: 'baskervillesemibold_italic';}

h3{font-family: 'didotbold';font-weight: normal; font-size:32px; text-align: center; margin-bottom: 100px; font-style: italic;}
h3~p{ margin-bottom: 50px;}
.dFlex{ display: flex;} 
.flexColumn{ flex-direction: column;}
.alignsCenter{ align-items: center;}
.justifyCenter{ justify-content: center;}
#contactUS{ min-height: 100vh;}
#contactUS h3{ margin-bottom: 40px;}
#contactUS p{ margin-bottom: 40px;}
.footerFlower{ text-align: center;}
.footerFlower img{ max-width: 40px;}

@media screen and (max-width:767px){
    h1{ font-size: 54px;}
    .banner-bottom{ font-size: 22px;}
    .mainBanner{background-position: center top -100px;}
    .mainBanner:before{ height: 150px;}
    h2,.contentSection p{ margin-bottom: 50px;}
}