/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
    #map {}
}


/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
    html,
    body {
        /* overflow: visible !important; */
    }
    .wrap {
        height: 120% !important;
    }
    .only-mobile {
        display: inline-block !important;
    }
    .only-desktop {
        display: none !important;
    }
    .slider-container {
        margin-bottom: 30px;
    }
    .slider-container2 {
        margin-bottom: 30px;
    }
    .slider-container3 {
        margin-bottom: 30px;
    }
    .slider-container4 {
        margin-bottom: 30px;
    }
    #map {
        /* position: relative !important; */
        /* overflow: visible !important; */
        margin-top: -50% !important;
    }
    #b-main {
        margin-top: 35% !important;
        width: 100% !important;
        margin-left: 0 !important;
        /* position: relative !important; */
    }
    #main {
        background-image: none !important;
        padding-bottom: 350px !important;
    }
    .before-step .left {
        width: 100% !important;
    }
    .before-step .right {
        width: 100% !important;
    }
    .step .left {
        width: 100% !important;
    }
    .step .right {
        width: 100% !important;
        padding-right: 5% !important;
    }
    .step-r .left {
        width: 100% !important;
        padding-left: 5% !important;
    }
    .step-r .right {
        width: 100% !important;
        padding-right: 5% !important;
        margin-left: -5% !important;
        height: 200px;
    }
    .kms {
        display: none !important;
    }
    h1 {
        font-size: 1.2rem !important;
    }
    .separ-title {
        width: 225px !important;
        margin-left: 10px !important;
    }
    .prez {
        font-size: 0.8rem !important;
        padding-right: 10px !important;
    }
    .text {
        font-size: 0.8rem !important;
        padding-left: 15px !important;
    }
    .text-content {
        line-height: 1.4rem !important;
        text-align: left !important;
    }
    .slider-container {
        width: 92% !important;
        margin-left: 5% !important;
        margin-right: 5% !important;
        height: 200px !important;
    }
    .slider-carousel {
        height: 200px !important;
    }
    .slider-container2 {
        width: 92% !important;
        margin-left: 7% !important;
        margin-right: 5% !important;
        height: 200px !important;
    }
    .slider-carousel2 {
        height: 200px !important;
    }
    .slider-container3 {
        width: 92% !important;
        margin-left: 5% !important;
        margin-right: 5% !important;
        height: 200px !important;
    }
    .slider-carousel3 {
        height: 200px !important;
    }
    .slider-container4 {
        width: 92% !important;
        margin-left: 5% !important;
        margin-right: 5% !important;
        height: 200px !important;
    }
    .slider-carousel4 {
        height: 200px !important;
    }
    .step h2 {
        font-size: 1.5rem !important;
        width: 100% !important;
        text-align: center !important;
    }
    .step-r h2 {
        font-size: 1.5rem !important;
        width: 100% !important;
        text-align: center !important;
    }
    .step .only-img {
        width: 93% !important;
        height: 200px !important;
        margin-left: 4% !important;
        margin-bottom: 30px;
    }
    .step-r .only-img {
        width: 93% !important;
        height: 200px !important;
        margin-bottom: 30px;
    }
    .scrollTop {
        margin-left: 45% !important;
    }
    .back-button {
        margin-left: 10% !important;
        margin-top: 10px !important;
    }
    .mobile {
        display: block !important;
        width: 70% !important;
        margin-left: 15% !important;
        margin-right: 15% !important;
        min-height: 135px;
        margin-bottom: 20px;
        margin-top: -20px;
    }
    #icon1-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/1.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon2-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/2.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon3-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/3.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon4-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/4.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon5-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/5.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon6-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/6.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon7-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/7.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon8-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/8.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon9-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/9.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon10-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/10.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon11-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/11.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon12-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/12.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon13-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/13.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #step3 {
        display: grid;
        height: 650px !important;
    }
    #step3 .left {
        order: 2;
    }
    #step3 .right {
        order: 1;
    }
    #step3 .mobile {
        order: 3;
    }
    #step5 {
        display: grid;
        height: 650px !important;
    }
    #step5 .left {
        order: 2;
    }
    #step5 .right {
        order: 1;
    }
    #step5 .mobile {
        order: 3;
    }
    #step7 {
        display: grid;
        height: 615px !important;
    }
    #step7 .left {
        order: 2;
    }
    #step7 .right {
        order: 1;
    }
    #step7 .mobile {
        order: 3;
    }
    #step9 {
        display: grid;
        height: 600px !important;
    }
    #step9 .left {
        order: 2;
    }
    #step9 .right {
        order: 1;
    }
    #step9 .mobile {
        order: 3;
    }
    #step11 {
        display: grid;
        height: 550px !important;
    }
    #step11 .left {
        order: 2;
    }
    #step11 .right {
        order: 1;
    }
    #step11 .mobile {
        order: 3;
    }
    #step13 {
        display: grid;
        height: 625px !important;
    }
    #step13 .left {
        order: 2;
    }
    #step13 .right {
        order: 1;
    }
    #step13 .mobile {
        order: 3;
    }
}


/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 767px) {
    html,
    body {
        /* overflow: visible !important; */
    }
    .wrap {
        height: 120% !important;
    }
    .only-mobile {
        display: inline-block !important;
    }
    .only-desktop {
        display: none !important;
    }
    #map {
        /* position: relative !important; */
        /* overflow: visible !important; */
        margin-top: -50% !important;
    }
    #b-main {
        margin-top: 50% !important;
        width: 100% !important;
        margin-left: 0 !important;
        /* position: relative !important; */
    }
    #main {
        background-image: none !important;
        padding-bottom: 350px !important;
    }
    .before-step .left {
        width: 100% !important;
    }
    .before-step .right {
        width: 100% !important;
    }
    .step .left {
        width: 100% !important;
    }
    .step .right {
        width: 100% !important;
        padding-right: 5% !important;
    }
    .step-r .left {
        width: 100% !important;
        padding-left: 5% !important;
    }
    .step-r .right {
        width: 100% !important;
        padding-right: 5% !important;
        margin-left: -5% !important;
    }
    .kms {
        display: none !important;
    }
    h1 {
        font-size: 1.2rem !important;
    }
    .separ-title {
        width: 225px !important;
        margin-left: 10px !important;
    }
    .prez {
        font-size: 0.8rem !important;
        padding-right: 10px !important;
    }
    .text {
        font-size: 0.8rem !important;
        padding-left: 15px !important;
    }
    .text-content {
        line-height: 1.4rem !important;
        text-align: left !important;
    }
    .slider-container {
        width: 92% !important;
        margin-left: 5% !important;
        margin-right: 5% !important;
        height: 200px !important;
    }
    .slider-carousel {
        height: 200px !important;
    }
    .slider-container2 {
        width: 92% !important;
        margin-left: 7% !important;
        margin-right: 5% !important;
        height: 200px !important;
    }
    .slider-carousel2 {
        height: 200px !important;
    }
    .slider-container3 {
        width: 92% !important;
        margin-left: 5% !important;
        margin-right: 5% !important;
        height: 200px !important;
    }
    .slider-carousel3 {
        height: 200px !important;
    }
    .slider-container4 {
        width: 92% !important;
        margin-left: 5% !important;
        margin-right: 5% !important;
        height: 200px !important;
    }
    .slider-carousel4 {
        height: 200px !important;
    }
    .step h2 {
        font-size: 1.5rem !important;
        width: 100% !important;
        text-align: center !important;
    }
    .step-r h2 {
        font-size: 1.5rem !important;
        width: 100% !important;
        text-align: center !important;
    }
    .step .only-img {
        width: 93% !important;
        height: 200px !important;
        margin-left: 4% !important;
    }
    .step-r .only-img {
        width: 93% !important;
        height: 200px !important;
    }
    .scrollTop {
        margin-left: 45% !important;
    }
    .back-button {
        margin-left: 10% !important;
        margin-top: 10px !important;
    }
    .mobile {
        display: block !important;
        width: 100% !important;
        min-height: 100px;
        margin-bottom: 20px;
        margin-top: -20px;
    }
    #icon1-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/1.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon2-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/2.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon3-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/3.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon4-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/4.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon5-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/5.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon6-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/6.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon7-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/7.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon8-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/8.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon9-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/9.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon10-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/10.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon11-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/11.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon12-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/12.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #icon13-m {
        background-size: cover;
        background-image: url('https://media.routard.com/image/pages_spe/roadtrip/imgs/mobile/afriquedusud/13.png');
        background-repeat: no-repeat;
        background-position: top center;
    }
    #step3 {
        display: grid;
        height: 800px !important;
    }
    #step3 .left {
        order: 2;
    }
    #step3 .right {
        order: 1;
    }
    #step3 .mobile {
        order: 3;
    }
    #step5 {
        display: grid;
        height: 800px !important;
    }
    #step5 .left {
        order: 2;
    }
    #step5 .right {
        order: 1;
    }
    #step5 .mobile {
        order: 3;
    }
    #step7 {
        display: grid;
        height: 675px !important;
    }
    #step7 .left {
        order: 2;
    }
    #step7 .right {
        order: 1;
    }
    #step7 .mobile {
        order: 3;
    }
    #step9 {
        display: grid;
        height: 650px !important;
    }
    #step9 .left {
        order: 2;
    }
    #step9 .right {
        order: 1;
    }
    #step9 .mobile {
        order: 3;
    }
    #step11 {
        display: grid;
        height: 575px !important;
    }
    #step11 .left {
        order: 2;
    }
    #step11 .right {
        order: 1;
    }
    #step11 .mobile {
        order: 3;
    }
    #step13 {
        display: grid;
        height: 675px !important;
    }
    #step13 .left {
        order: 2;
    }
    #step13 .right {
        order: 1;
    }
    #step13 .mobile {
        order: 3;
    }
}