:root {
    --app-height: 100%;
}

html,
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

*{
    box-sizing: border-box;
}

main{
    height: 100%;
    background-color: #3a9bca;
    background-image: url('/media/img/v-new/mobile/bg-blue.png');
    background-repeat: no-repeat;
    background-size: cover;
    overflow: auto;
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

main.mobile{
    scroll-snap-type: mandatory; /* for older browsers */
    scroll-snap-points-y: repeat(100vh); /* for older browsers */
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

main.desktop{
    background-image: url('/media/img/v-new/desktop/bg-blue.png');
    height: 100%;
    overflow: auto;
}

.desktop .container-inside{
    height: 100%;
}

main > section{
    height: 100%!important;
    position: relative;
}

main.mobile > section, main.mobile > footer{
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.desktop section p, .desktop section li{
    font-size: 24px;
    line-height: 32px!important;
}

#landscape_blocker {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: #000;
    z-index: 999;
    display: none;
}

#landscape_blocker img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -45px;
    margin-left: -45px;
}

#dkCookieConsent09012023{
    height: 0px;
    max-height: 0px;
}

#slide-1 .second-part{
    font-weight: bold!important;
}

.page-cms h1{
    text-transform: inherit;
}





.bloc3{
    height: auto!important;
}

#header-mobile {
    position: fixed;
    }
#top-header {
    background: none;
    background-color: transparent;
}

.arr-bottom{
    cursor: pointer;
    margin-top: 12px;
    background-repeat: no-repeat;
    background-size: contain;
    width: 34px;
    height: 30px;
    background-position: center;
        animation: 2s ease-in-out infinite arrow_slide_down;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='55px' height='28px'%3E%3Cpath fill-rule='evenodd' fill='rgb(255, 255, 255)' d='M54.016,0.758 L27.500,27.274 L0.983,0.758 L54.016,0.758 Z'/%3E%3C/svg%3E");
}

.desktop .arr-bottom{
    height: 42px;
    width: 42px;
    margin-bottom: 8px;
}

@keyframes arrow_slide_down {
0%, 100% {
    -ms-transform: translateY(5px);
    -webkit-transform: translateY(5px);
    -moz-transform: translateY(5px);
    -o-transform: translateY(5px);
    transform: translateY(5px);
    opacity: 0.3;
}

50% {
    -ms-transform: translateY(0px);
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
}
}

.white{
    color: white;
}

.white p{
    color: white;
}

.slides.back{
    display: flex;
    justify-content: center;
    overflow: hidden;
    height: 100%;
}

section h1.title{
    font-size: 3.0em;
}

section .title{
    font-size: 3em;
    margin-bottom: 0;
    font-weight: 400;
}

section .subtitle{
    font-size: 1.2em;
}
section p, section li{
    font-size: 1.1em;
}
section .subtitle{
    margin-top: 0;
    padding-top: 0;
}

section ul {
    padding-left: 0;
    list-style: disc;
    margin-left: 18px;
}

section .container-txt{
    text-shadow: 1px 1px 4px #383838;
}



@media (min-width:750px)  {

section .title, 
section h1.title {
    font-size: 62px;
    line-height: 1.1em;
}
section .subtitle, #slide-1 .second-part {
    font-size: 32px;
    line-height: 1.1em;
}

section p, section li{
    font-size: 32px;
    line-height: 28px;
}

}


@media (max-width:420px)  {

section .title, 
section h1.title {
    font-size: 36px;
    line-height: 36px
}
section .subtitle, #slide-1 .second-part {
    font-size: 18px;
    line-height: 1.1em;
}

section p, section li{
    font-size: 16px;
    line-height: 18px;
}

#txt-manifeste{
    font-size: 15px!important;
    line-height: 17px!important;
}

.bloc3 .containerPicto .parag {
    font-size: 14px;
}
.bloc3 .parag.title {
    font-size: 16px;
}

section h2 span {
    font-size: 36px;
    line-height: 1.2em;
}

}


@media (max-width:400px)  {


section p, section li{
    font-size: 14px;
    line-height: 16px;
}

#slide-3 .container-txt{
    bottom: 120px;
}

section .title, 
section h1.title, section h2 span {
    font-size: 32px;
    line-height: 32px
}

}



.desktop .title{
    margin-bottom: 15px;
}

@media (max-width:1250px)  {


.desktop .foot-slide .btn-slides {
    font-size: 18px!important;
    min-height: 60px!important;
}


}