body,
html {
    overflow-x: hidden;
    width: 100%
}

.breadcrumb {
    display: none
}

#main {
    margin-top: 0
}

.MyContent {
    width: 100%;
    display: block;
    position: relative;
    max-width: 1250px;
    min-width: 320px;
    margin-left: auto;
    margin-right: auto;
    font-family: gotham ssm book a, gotham ssm book b, Gotham, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4em;
    color: #000;
    text-align: center
}

.MyContent .MyBlock {
    display: block;
    width: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.MyContent * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.MyContent #BLOCK-HEADER {
    width: 1600px;
    margin-left: -175px;
    text-align: center;
    position: relative;
    background-color: #fdf9fa;
    /* background-image: url(img/header.jpg); */
    background-image: url(img/header_v2.jpg);
    background-size: auto 100%;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 500px
}

@media only screen and (max-width:761px) {
    .MyContent #BLOCK-HEADER {
        width: 1600px;
        margin-left: -175px;
        text-align: center;
        position: relative;
        background-size: auto 100%;
        background-position: top center;
        background-repeat: no-repeat;
        min-height: 500px
    }
}

@media only screen and (max-width:1249px) {
    .MyContent #BLOCK-HEADER {
        margin-left: 0;
        width: 100%
    }
}

@media only screen and (max-width:1023px) {
    .MyContent #BLOCK-HEADER {
        margin-left: 0;
        width: 100%;
        padding-top: 300px;
        background-size: auto 300px;
        min-height: 0
    }
}

@media only screen and (max-width:761px) {
    .MyContent #BLOCK-HEADER {
        padding-top: 0;
        background-size: auto 35vw
    }
}

.MyContent #BLOCK-HEADER h1 {
    display: block;
    font-family: gotham ssm book a, gotham ssm book b, Gotham, Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1em;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    z-index: 1;
    color: #ff3d60;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto
}

.MyContent #BLOCK-HEADER p.Picto {
    padding: 0;
    margin: 0;
    width: 200%;
    background-image: url(img/dandelion-flower.png);
    min-height: 132px
}

@media only screen and (max-width:1023px) {
    .MyContent #BLOCK-HEADER p.Picto {
        background-image: none;
        width: 100%
    }
}

.MyContent #BLOCK-HEADER p.Picto img {
    display: none
}

@media only screen and (max-width:1023px) {
    .MyContent #BLOCK-HEADER p.Picto img {
        display: block;
        margin-left: auto;
        margin-right: auto
    }
}

.MyContent #BLOCK-HEADER h1 span {
    display: block;
    width: 100%;
    background-image: url(img/title-serenity.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: top center;
    height: 2.5em;
    color: transparent
}

.MyContent #BLOCK-HEADER .FloatingBox {
    display: inline-block;
    position: absolute;
    left: 26%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    z-index: 2;
    top: 50%;
    max-width: 350px;
    background-color: #fff;
    padding: 30px
}

@media only screen and (max-width:1023px) {
    .MyContent #BLOCK-HEADER .FloatingBox {
        left: auto;
        top: auto;
        -webkit-transform: none;
        transform: none;
        position: relative;
        display: block;
        max-width: 1023px;
        padding-bottom: 0
    }
}

.MyContent #BLOCK-HEADER p.Text {
    margin: 0;
    text-align: center;
    color: #000;
    font-size: 16px;
    line-height: 1.4em;
    padding-top: 15px
}

@media only screen and (max-width:761px) {
    .MyContent #BLOCK-HEADER p.Text {
        font-size: 14px
    }
}

.MyContent #BLOCK-ARGUMENTS {
    padding-top: 40px;
    padding-bottom: 100px
}

@media only screen and (max-width:761px) {
    .MyContent #BLOCK-ARGUMENTS {
        padding: 20px;
        box-sizing: border-box
    }
}

.MyContent #BLOCK-ARGUMENTS h2 {
    display: inline-block;
    font-family: ClarinsRegular, Clarins;
    font-size: 35px;
    font-weight: 400;
    line-height: 1em;
    margin: 0;
    padding: 10px;
    position: relative;
    text-align: center
}

.MyContent #BLOCK-ARGUMENTS p.Text {
    display: inline-block;
    font-family: gotham ssm book a, gotham ssm book b, Gotham, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4em;
    margin: 0;
    padding: 10px;
    position: relative;
    text-align: center;
    max-width: 940px
}

@media only screen and (max-width:1023px) {
    .MyContent #BLOCK-ARGUMENTS p.Text {
        padding: 20px;
        padding-top: 10px;
        padding-bottom: 10px
    }
}

@media only screen and (max-width:761px) {
    .MyContent #BLOCK-ARGUMENTS p.Text {
        font-size: 14px
    }
    .MyContent #BLOCK-ARGUMENTS p.Text br {
        display: none
    }
}

.MyContent #BLOCK-ARGUMENTS ul {
    display: inline-block;
    font-size: 0;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    max-width: 1170px;
    display: flex;
    justify-content: center;
    align-items: top;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (max-width:1023px) {
    .MyContent #BLOCK-ARGUMENTS ul {
        flex-wrap: wrap;
        max-width: 640px
    }
}

.MyContent #BLOCK-ARGUMENTS ul li {
    display: inline-block;
    font-size: 14px;
    margin: 0;
    position: relative;
    text-align: center;
    padding: 10px
}

@media only screen and (max-width:1023px) {
    .MyContent #BLOCK-ARGUMENTS ul li {
        padding: 0;
        width: 50%
    }
}

@media only screen and (max-width:360px) {
    .MyContent #BLOCK-ARGUMENTS ul li {
        padding: 0;
        width: 100%
    }
}

.MyContent #BLOCK-ARGUMENTS ul li img {
    max-width: 100%
}

.MyContent #BLOCK-ARGUMENTS ul li p.Text {
    font-size: 14px
}

.MyContent #BLOCK-ARGUMENTS ul li h3 {
    display: block;
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: #be0f34;
    position: relative;
    text-align: center;
    font-family: gotham ssm medium a, gotham ssm medium b, Gotham, Helvetica, Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase
}

.mentions {
    font-size: 11px;
    line-height: 14px;
    padding: 20px;
    text-align: center;
    opacity: .5
}

.MyContent #BLOCK-HEADER p.Text {
    font-size: 13px
}

p.mobile-display {
    display: none
}

.MyContent #BLOCK-HEADER .FloatingBox {
    left: 19%;
}


@media only screen
and (min-device-width : 834px)
and (max-device-width : 1112px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) {
    .MyContent #BLOCK-HEADER .FloatingBox {
        left: 0;
    }
}

/*iPhone 6/7/8/plus, XR, 11, X, 12 and 11.*/
@media (max-width: 480px) {
    .MyContent #BLOCK-HEADER .FloatingBox {
        left: 0;
    }
}