/*
  ##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: 7% !important;
	  margin-right: 5% !important;
	  height: 200px !important;
  }
  .slider-carousel {
	  height: 200px !important;
  }
  .slider-container2 {
	  width: 92% !important;
	  margin-left:5% !important;
	  margin-right: 5% !important;
	  height: 200px !important;
  }
  .slider-carousel2 {
	  height: 200px !important;
  }
  .slider-container3 {
	  width: 92% !important;
	  margin-left: 7% !important;
	  margin-right: 5% !important;
	  height: 200px !important;
  }
  .slider-carousel3 {
	  height: 200px !important;
  }
  .slider-container4 {
	  width: 92% !important;
	  margin-left: 7% !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: 70% !important;
	  margin-left: 15% !important;
	  margin-right: 15% !important;
	  min-height:140px;
	  margin-bottom:20px;
  }
  #icon1-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/1.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon2-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/2.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon3-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/3.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon4-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/4.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon5-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/5.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon6-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/6.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon7-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/7.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon8-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/8.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon9-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/9.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon10-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/10.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon11-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/11.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #step3 {
	  display: grid;
	  height: 740px !important;
  }
  #step3 .left {
	  order: 2;
  }
  #step3 .right {
	  order: 1;
  }
  #step3 .mobile {
	  order: 3;
  }
  #step5 {
	  display: grid;
	  height: 730px !important;
  }
  #step5 .left {
	  order: 2;
  }
  #step5 .right {
	  order: 1;
  }
  #step5 .mobile {
	  order: 3;
  }
  #step7 {
	  display: grid;
	  height: 640px !important;
  }
  #step7 .left {
	  order: 2;
  }
  #step7 .right {
	  order: 1;
  }
  #step7 .mobile {
	  order: 3;
  }
  #step9 {
	  display: grid;
	  height: 800px !important;
  }
  #step9 .left {
	  order: 2;
  }
  #step9 .right {
	  order: 1;
  }
  #step9 .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:0px !important;
	  width: 100% !important;
	  margin-left: 0  !important;
	  overflow-x: hidden !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;
  }
  .before-step .text {
	line-height:1.25rem !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;
	  letter-spacing: 0.8rem !important;
  }
  ul {
	font-size:1.0rem !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: 0 !important;
  }
  .step-r .only-img {
	  width: 93% !important;
	  height: 200px !important;
    margin-bottom: 0 !important;
  }
  .adapt-mobile-img-grp {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 0 !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:110px;
	  margin-bottom:20px;
	  margin-top:0px;
  }
  .scrollbar-external {
	margin-top: 60% !important;
  }
  #icon1-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/1.png');
	  background-repeat: no-repeat;
	  background-position: top center;
	  display: none !important;
  }
  #icon2-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/2.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon3-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/3.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon4-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/4.png');
	  background-repeat: no-repeat;
	  background-position: top center;
	  margin-top:20px;
  }
  #icon5-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/5.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon6-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/6.png');
	  background-repeat: no-repeat;
	  background-position: top center;
	  margin-top:20px;
  }
  #icon7-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/7.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon8-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/8.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon9-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/9.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon10-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/10.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #icon11-m {
	  background-size: cover;
	  background-image: url('../imgs/mobile/montreal-explorateurs/11.png');
	  background-repeat: no-repeat;
	  background-position: top center;
  }
  #step2 {
	height: 1630px !important;
	}
  #step3 {
	  display: grid;
	  height: 1575px !important;
  }
  #step3 .left {
	  order: 2;
  }
  #step3 .right {
	  order: 1;
  }
  #step3 .mobile {
	  order: 3;
  }
  #step5 {
	  display: grid;
	  height: 1620px !important;
  }
  #step5 .left {
	  order: 2;
  }
  #step5 .right {
	  order: 1;
  }
  #step5 .mobile {
	  order: 3;
  }
  #step7 {
	  display: grid;
	  height: 1530px !important;
  }
  #step7 .left {
	  order: 2;
  }
  #step7 .right {
	  order: 1;
  }
  #step7 .mobile {
	  order: 3;
  }
  #step9 {
	  display: grid;
	  height: 1650px !important;
  }
  #step9 .left {
	  order: 2;
  }
  #step9 .right {
	  order: 1;
  }
  #step9 .mobile {
	  order: 3;
  }
  #step11 {
	  display: grid;
	  height: 1330px !important;
  }
  #step11 .left {
	  order: 2;
  }
  #step11 .right {
	  order: 1;
  }
  #step11 .mobile {
	  order: 3;
  }
}