@font-face {

  font-family: "Avenir-Heavy";
  src: url('../font/901497541657a2f24e42848bcf7fad52.eot');
  /* IE9*/
  src: url('../font/901497541657a2f24e42848bcf7fad52.eot?#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('../font/901497541657a2f24e42848bcf7fad52.woff2') format('woff2'),
    /* chrome、firefox */
    url('../font/901497541657a2f24e42848bcf7fad52.woff') format('woff'),
    /* chrome、firefox */
    url('../font/901497541657a2f24e42848bcf7fad52.ttf') format('truetype'),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../font/901497541657a2f24e42848bcf7fad52.svg#Avenir Heavy') format("svg");
  /* iOS 4.1- */
}

@font-face {

  font-family: "Verdana-Italic";
  src: url("../font/24b3a293c865a2c265280f017fb24ba5.eot");
  /* IE9*/
  src: url("../font/24b3a293c865a2c265280f017fb24ba5.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
    url("../font/24b3a293c865a2c265280f017fb24ba5.woff2") format("woff2"),
    /* chrome、firefox */
    url("../font/24b3a293c865a2c265280f017fb24ba5.woff") format("woff"),
    /* chrome、firefox */
    url("../font/24b3a293c865a2c265280f017fb24ba5.ttf") format("truetype"),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../font/24b3a293c865a2c265280f017fb24ba5.svg#Verdana Italic") format("svg");
  /* iOS 4.1- */

}

@font-face {

  font-family: "Avenir-Black";
  src: url("../font/275de2221d9f0c4c9257d17f5a1e4006.eot");
  /* IE9*/
  src: url("../font/275de2221d9f0c4c9257d17f5a1e4006.eot?#iefix") format("embedded-opentype"),
    /* IE6-IE8 */
    url("../font/275de2221d9f0c4c9257d17f5a1e4006.woff2") format("woff2"),
    /* chrome、firefox */
    url("../font/275de2221d9f0c4c9257d17f5a1e4006.woff") format("woff"),
    /* chrome、firefox */
    url("../font/275de2221d9f0c4c9257d17f5a1e4006.ttf") format("truetype"),
    /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("../font/275de2221d9f0c4c9257d17f5a1e4006.svg#Avenir Black") format("svg");
  /* iOS 4.1- */

}

@font-face {

  font-family: "Polly-Regular";
  src: url("../font/275de2221d9f0c4c9257d17f5a1e4006.eot?#iefix") format("embedded-opentype"),
    url("../font/Polly-Bold.woff2") format("woff2") url("../font/Polly-Bold.woff") format("woff");
}

body {
  margin: 0;
  padding: 0;
  background-color: #F9F9F9;
}

#info-box {
  width: 300px;
  background: #eee;
  border: solid 1px #333;
  border-radius: 20px;
  padding: 10px;
  opacity: 0;
  font-size: 20px;
  position: absolute;
  text-align: center;
}

.fade-in {
  visibility: visible;
  transition: 0.5s opacity, 0.5s visibility;
}

.fade-out {
  visibility: hidden;
  transition: 0.5s opacity, 0.5s visibility;
}

.btn {
  position: absolute;
  bottom: 40%;
  left: 4%;
  z-index: 2;
  display: flex;
  flex-direction: column;

}


.btn span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.zoom,
.zoom-out,
.zoom-init,
.help {

  display: inline-block;
  border-radius: 15px;
  background-color: #C83C49;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 14px;
  padding: 10px;
  width: 50px;
  font-family: 'Avenir-Black';
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;


}

.zoom:hover,
.zoom-out:hover,
.zoom-init:hover,
.help:hover {

  background-color: #c60b1d;
  border-color: #c60b1d;

}

#info-box {
  z-index: 1;
  border-color: #C83C49;
  border-width: 3px;
  background-color: #C83C49;
  color: white;
}



.banniere {
  margin-left: -10%;
}

.car-icon {
  height: 100px;
  margin-right: 10%
}


#map {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

}

#map>svg {

  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%
}

#grid_banner {
  position: absolute;
  top: 2%;
  left: 0;
  z-index: 1;
  width: 40%;
  height: auto;
}

#grid_icon {
  position: absolute;
  top: 4%;
  right: 4%;
  z-index: 1;
  width: 7%;
  height: auto;
}


#car {

  position: absolute;
  bottom: 2%;
  right: 3%;
  z-index: 1;
  width: 24%;
  height: auto;

}

#map {
  position: relative;
}


.screen {

  visibility: hidden;
}

@media screen and (max-width: 950px) {


  .zoom,
  .zoom-out,
  .zoom-init,
  .help {
    padding: 5px;
  }

  #helpModal>div {
    margin: auto !important;
  }

  #car {
    bottom: 2%;
    right: 3%;
    width: 16%;

  }

  .btn {
    bottom: 20%;
  }


}



@media all and (orientation:portrait) {

  .screen {
    visibility: visible;
  }

}





.modalDialog {
  position: fixed;
  font-family: "Avenir-Heavy";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog>div,
#helpModal>div {
  width: 70%;
  position: relative;
  margin: 50% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #c83c49;
}

.modalDialog img {
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.modalDialog p {
  color: #FFFFFF;
}

.close {
  background: #ffffff;
  color: #c83c49;
  line-height: 25px;
  text-align: center;
  float: right;
  width: 10%;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  margin-top: 2%;
}