@media (max-width: 768px) {
    #display-type::after { content:"smartphone"; }

    body {
        padding:70px 0 0 0;
    }

    #blackbar {
        height: 70px;
    }

    .nav-wrapper {
        padding: 0 10px 5px 0;
    }


    .nav-menu {
        top:69px; /* header - 1px : to prevent transparent line in mobile */
    }


    /* with 10px padding */
    #blackbar > div {
        margin: 0px;
        padding: 10px 0px 0px 0px;
    }

    #banner {
        height: 220px;
    }

    #banner_title {
        padding: 34px 5px 10px 5px;
        font-size: 33px;
    }

    #banner_subtitle {
        width: 75%;
        padding: 0px 0px 10px 0px;
        font-size: 18px;
    }

    #textpage {
        max-width: 95%;
        font-size: 18px;
        text-align: left;
    }
    .normaltextleft {
        font-size: 18px;
    }
    .smalltext {
	font-size: 16px;
    }


    h1 {
        font-size: 18px;
    }

    h2 {
        font-size: 18px;
    }

    .page-content-wrapper h3 {
        font-size: 1.5em;
    }

    .bigbox {
        flex-direction: column; /* align items vertically when the screen width is small */
        align-items: center; /* Optionally center the boxes */
    }

    .bigbox > div {
        width: 80%;
        height: auto;
        margin: 40px 0 0 0;
    }

    .bigbox .icon_set {
        padding:11px 0 0 0;
        gap:11px;
    }

    .bigbox .img { /* h=70+11=81 */
        height: 70px;
        padding: 11px 0 0 0;
    }

    .bigbox .icon { /* h=56+17+8=81 */
        height: 56px;
        padding: 17px 0 8px 0;
    }

    .bigbox .title {
        font-size: 22px;
    }

    .bigbox .text {
        font-size: 18px;
        /* border: 1px solid #ff0000; */
    }

    #footsection {
        /*background-color: #000000;*/
        flex-direction: row;
        font-size: 14px;
        height:auto;
    }

    #footcopyright {
        /* move copyright to the left */
        /*padding: 0 calc(100vw - 270px) 0 0;*/
        display: block;
        width:100%;

        padding:0.5em 0;
    }

    #followussection {
        gap: 10px;
        /* move logos the the right */
        /*padding: 0 0 0 calc(100vw - 250px);*/
        width:100%;
    }

    #vrlogofoot {
        /* flex-basis: 110px; *//* smaller base size on medium screens */
        display: none;
    }

    .footlogos {
        width: 35px;
    }

    .button2 {
        font-size: 14px;
    }

    .normaltextleft {
        font-size: 14px;
    }
    .smalltext {
	font-size: 16px;
    }

    /*.imgfapp2,*/
    /*.imgfapp2r,*/
    /*.btn-block {*/
    /*    float:none;*/
    /*    display: inline-block;*/
    /*}*/

    .imgfapp2 {
        /* width: 180px; */
        width: 40%;
    }

    .imgfapp2r {
        /* width: 180px; */
        width: 40%;

    }

    .contact {
        font-size: 12px;
    }

    .building {
        width: 150px;
    }

    .logo-usage {
        display: none;
    }


    .banner-top {
        font-size: 0.7rem;
        min-height: 220px;
    }

    .banner-top .banner-element {
        padding:1em 0;
    }

    .banner-element .banner-title {
        /*font-size: 2em;*/
        padding:0 5% 0 5%;
    }
    .banner-element .banner-subtitle {
        /*font-size: 1em;*/
        padding:0 10%;
    }

    .hp-vocapia-technology .description .text {
        padding:0 0 0 0;
    }

    .hp-services-box .list {
        flex-wrap: wrap;
        justify-content: center;
        justify-content: space-around;
        gap: 10px; /* Espacement entre les éléments */
    }

    .hp-services-box .list .service {
        /*flex: 0 1 40%; !* Occupe 50% moins l'espacement *!*/
        box-sizing: border-box; /* Inclut les bordures et paddings */
        text-align: center; /* Centrer le contenu */
        padding: 1em; /* Exemple de style */
        flex: 0 1 150px;
        width: auto;
    }

    .hp-vocapia-usecases .usescases-slider {
        /*flex-direction: column-reverse;*/
    }

    .hp-vocapia-usecases .usescases-slider {
        /*height:auto;*/
        height:400px;
    }
    .hp-vocapia-usecases .description-list .descriptions-wrapper {
        height:auto;
    }
    .hp-vocapia-usecases .description-list {
        width:100%;
    }

    /*.hp-vocapia-usecases .image-list {*/
    /*    height:auto;*/
    /*}*/
    /*.hp-vocapia-usecases .image-list .image-wrapper {*/
    /*    height:300px;*/
    /*}*/

    .hp-vocapia-usecases .description-list .descriptions-wrapper {
        position: relative;
    }

    .hp-vocapia-usecases .description-list .description .title {
        /*padding-right: 25%;*/
    }

    .hp-vocapia-usecases .description-list .descriptions-wrapper .description .text {
        /*padding-bottom:2.5em;*/
    }
    .hp-vocapia-usecases .description-list .descriptions-wrapper .description .text {
        text-align: center;
    }
    .hp-vocapia-usecases .description-list .descriptions-wrapper .description .text div {
        text-align: left;
    }

    .hp-vocapia-usecases .description-list .description .btn-block {
        /*transform:none;*/
        /*left:initial;*/
        /*right:1em;*/
        position: relative;
        right: initial;
        left: initial;
        display: inline-block;
        margin: 0.25em auto;
        width: auto;
        top:0;
    }

    .hp-vocapia-usecases .description-list .arrows-area {
        /*left: 0;*/
        /*bottom: 100%;*/
        /*top: initial;*/
        /*margin-bottom: 1em;*/
    }

    .twitter-tweet,
    .twitter-tweet iframe {
        max-width: 100% !important;
    }

    .hp-services-box .list .service .img-wrapper {
        padding-top:70%;
    }


    body .video-list .video-element-wrapper a {
        padding-bottom: 2.3em;
    }

    #telco_videos {
        flex-direction:column;
        gap:30px;
    }

    body .flex-direction-column-smartphone {
        flex-direction: column;
    }

    body .w-100pc-smartphone {
        width:100%;
    }


    body .pr-0-smartphone {
        padding-right:0;
    }
    body .pl-0-smartphone {
        padding-left:0;
    }

    .hp-randd-area .icon_set {
        justify-content: space-between;
        gap:initial;
    }
    #wsgraph {
	width: 265px;
    }
    #specs tr td {
       font-size: 80%;
    }
}

@media (max-width: 480px) {

    body .page-content-wrapper {
        font-size:15px;
    }

    body .page-content-wrapper,
    body #textpage {
        padding:0 1em;
    }

    .page-content-wrapper .hp-vocapia-usecases {
        margin-left:-1em;
        margin-right: -1em;
    }

    #blackbar {
        height: 55px;
    }

    .nav-menu {
     top:54px;
    }
    body {
        padding:55px 0 0 0;
    }

    .menu-button {
        width: 32px;
        height: 32px;
    }
    .menu-button span {
        height: 5px;
    }
    .menu-button.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px) scaleX(1.1);
    }
    .menu-button.active span:nth-child(3) {
        /* transform: rotate(-45deg) translate(5px, -5px); */
        transform: rotate(-45deg) translate(7px, -7px) scaleX(1.1);
    }
    /* firefox goes down to 450px
     JLG iphone5 SE 320px */
    #display-type::after { content:"small smartphone"; }
    
    #banner_title {
        padding: 30px 0px 10px 0px;
        font-size: 33px;
    }

    #banner_subtitle {
        width: 95%;
        padding: 0px 0px 10px 0px;
        font-size: 15px;
    }
    #textpage {
        max-width: 95%;
        font-size: 16px;
    }
    .normaltextleft {
        font-size: 16px;
    }

    .bigbox > div {
        width: 95%;
        height: auto;
        margin: 35px 0 0 0;
    }

    .bigbox_img {
        height: 60px;
    }

    .bigbox_title {
        font-size: 20px;
    }

    .bigbox_text {
        font-size: 16px;
        /* border: 1px solid #ff0000; */
    }

    h1 {
        font-size: 17px;
    }

    h2 {
        font-size: 17px;
    }

    .hp-texts .text-content .text-wrapper h2 {
        margin-top: 0;
        padding-top: 0.2em;
    }

    #footsection {
        /*background-color: #000000;*/
        flex-direction: column;
    }

    #footcopyright {
        /* move copyright to the left */
        /*padding: 0 calc(100vw - 260px) 0 0;*/
        display: block;
        width:100%;
    }

    #followussection {
        /* move logos the the right */
        /*padding: 0 0 0 calc(100vw - 230px);*/
        display: flex;
        width:100%;
        justify-content: flex-end;
    }

    .banner-top {
        min-height: 200px;
        font-size: 0.65rem;
    }

    .banner-top .banner-element {
        padding:1em 0;
    }

    .banner-element .banner-title {
        /*font-size: 1.1em;*/
        padding:0 5% 0 5%;
    }
    .banner-element .banner-subtitle {
        /*font-size: 0.6em;*/
        padding:0 10%;
    }


    .hp-services-box .list {
        gap:0 1em;
    }

    .hp-services-box .list .service {
        flex: 0 1 auto;
        padding:0.2em;
        width:100px;
        margin-bottom:1em;
    }
    .hp-services-box .list .service[data-service="gui"] span {
        transform: none;
    }

    .hp-services-box .list .service .description {
        width:100%;
    }

    .hp-services-box .list .service .img-wrapper span svg {
        width:100%;
    }

    .hp-vocapia-technology .description {
        flex-direction: column-reverse;
    }

    .hp-vocapia-technology .img-wrapper {
        width:80%;
        margin-left:auto;
        margin-right:auto;
    }

    .hp-randd-area .icon_set {
        display: block;
    }

    .hp-randd-area .icon_set div {
        display: block;
        float:left;
        width:50%;
        margin:1em 0;
    }
    .hp-randd-area .title {
        clear:both;
    }

    
    .hp-randd-area .text {
        width: 100%;
    }

    body .video-list {
        gap:2em 0em;
    }
    body .video-list .video-element-wrapper {
        flex: 0 1 calc(100% - 0em);
    }
    body .video-list .video-element-wrapper a {
        padding-bottom: 1.6em;
    }

    .sample-row {
        flex-direction: column;
        margin-bottom: 1em;
        border-radius: 0.25em;
        overflow: hidden;
    }

    body .sample-row > div {
        width: 100% !important;
    }

    .sample-row > div:first-child {
        border: none;
    }

    .sample-row > div:first-child:before {
        /*content: 'Audio source ';*/
        /*display: block;*/
        /*border-radius: 0.25em 0.25em 0 0;*/
        /*border-right: 1px solid white;*/
        display: none !important;
    }

    .sample-row > div:last-child:before {
        display: none !important;
    }

    .sample-row > div:last-child .audio-wrapper:after {
        content: 'Automatic transcript (i.e. not 100% correct):';
        display: block;
        border-radius: 0 0 0 0;
        /*background: var(--color-vocapia-green);*/
        /*color: white;*/
        background: rgba(var(--color-vocapia-green-rgb), 0.2);
        color: #000;
        padding: 0.25em 0.5em;
        margin-left: -0.5em;
        margin-right: -0.5em;
        margin-bottom: 0.5em;
    }

    .sample-row > div:first-child > div:first-child b {
        display: inline-block;
        border-radius: 0 0 0 0;
        background: var(--color-vocapia-green);
        color: white;
        padding: 0.25em 0.5em;
        margin-left: -0.5em;
        margin-right: -0.5em;
        margin-bottom: 0.5em;
        width: 100%;
        font-weight: normal;
    }

    .sample-row:not(.first-sample-row) > div {
        padding-top: 0;
    }


    .sample-row:nth-child(even) {
        background: rgba(var(--color-vocapia-green-rgb), 0.05) !important;
    }
}