.map{
    
    display: block;
    height: auto;
    margin: auto;
    padding: 0px;
    overflow: hidden;   
    position: relative;
    width: auto;
      height: auto;
      margin:auto;
}
.euro-logo{display: none;}
.scroll{
  position: relative;
}
@media (max-width: 600px) {
.scroll{
  overflow: scroll;
}

.map{
    width: 746px;
    height: 674px;
    touch-action: manipulation;
      
}  
.map:before{
  display: none;
}

/*.euro-logo{
    content: "";
    display: block;
    width: 100px;
    height: 118px;
    background: url(euro-logo.png) no-repeat;
    background-size: 100px;
    margin: auto;
    position: relative;
}*/
/*.euro-logo:after{
content: "";
    display: block;
    width: 85px;
    height: 118px;
    background: url(/imgs/icons/hand.svg) no-repeat;
    background-size: 29px;
    position: absolute;
    bottom: -133px;
    right: -18px;
    filter: opacity(0.4);

}*/


}



/*.map:before{
    content: "";
    position: absolute;
   left: 272px;
    top: 28px;
    width: 142px;
    height: 162px;
    margin-left: -10px;
    background: url(euro-logo.png) no-repeat;
    background-size: 142px;

}*/


body{
	margin: 0;
  background: #fff;

}



.heyo path:hover {
  fill: #006897;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.heyo path:hover {
  fill: #006897;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.enabled path {
fill: #00AED3;
  cursor: pointer;
  position: relative;
}
.enabled .flag {
 -webkit-filter: drop-shadow( 1px 3px 2px rgba(0, 0, 0, .7));
  filter: drop-shadow( 1px 3px 2px rgba(0, 0, 0, .7));
}

path{
 fill: #E0E0E0;
}

.description {
  pointer-events: none;
  position: absolute;
  font-size: 24px;
  text-align: center;
  background: white;
  padding: 10px 15px;
  z-index: 5;
  height: auto;
  line-height: 30px;
  margin: 0 auto;
  color: #21669e;
  border-radius: 35px;
  border-top-left-radius:30px;
  border-top-right-radius: 30px;
  box-shadow: 0 0 0 1px #eee;
  -moz-transform: translate(-50%, -75%);
  -ms-transform: translate(-50%, -75%);
  -webkit-transform: translate(-50%, -75%);
  transform: translate(-50%, -75%);
  display: none;
width: 220px;
max-width: 100%;
}
.description .country{
      margin-bottom: 14px;
    display: block;
}
.description.active {
  display: block;
}
.description:after {
    content: "";
    position: absolute;
    left: 10px;
    bottom: -34px;
    width: 100%;
       height: 62px;
    margin-left: -10px;
    background: url(drop.svg) no-repeat;
    background-size: contain;
        -webkit-filter: drop-shadow( 1px 7px 3px rgba(0, 0, 0, .5));
    filter: drop-shadow( 1px 7px 3px rgba(0, 0, 0, .5));
}
.description:after:not(.active){
  display: none;
}
.description table{
  width: 100%;
  margin-bottom: 30px;
}
.description table tr{

	padding:3px 5px;
	border-radius:5px;
	display: block;margin-bottom: 3px;
}
.description table tr td{

    display: inline-block;

}
.description table tr td:first-child{
  width: 57%;
  text-align: left;
  color: #333333;
font-weight: 400;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.description table tr td:last-child{
  width: 41%;
  text-align: right;
  color: #e42b00;
font-weight: 700;
font-family: 'Roboto', sans-serif;
font-size: 14px;

}
.description .country-name{
  width: 100%;
  display: block;
  border-top: 1px solid #ABD7E1;
  border-bottom: 1px solid #ABD7E1;
      padding: 5px 1px;
  font-size: 20px;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
}

.flag{
    content: '';
    width: 54px;
    height: 54px;
    background-size: 54px 54px;
    display: block;
    position: relative;
    bottom: -2px;
    margin: auto;
  background-color: rgb(255,255,255);
background-color: linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);
        margin-top: -39px;
        pointer-events: none;
}
.mobile{
      position: relative;
    left: unset;
    top: unset;
    transform: unset;
        margin-top: 35px;
}

@media (max-width: 600px) {

.description .country-name{
 font-size: 18px;  
 }
 .description table tr td{
  font-size: 12px;
 }

}



.flag.Russia{  background: url(flags/044-russia.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Germany{  background: url(flags/208-germany.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.France{  background: url(flags/197-france.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Spain{  background: url(flags/230-spain.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Italy{ background: url(flags/263-italy.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Portugal{ background: url(flags/098-portugal.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Netherlands{ background: url(flags/077-netherlands.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.England{ background: url(flags/121-england.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Czech { background: url(flags/202-czech-republic.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Croatia{ background: url(flags/128-croatia.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Denmark{ background: url(flags/191-denmark.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Belgium{ background: url(flags/209-belgium.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Sweden{ background: url(flags/190-sweden.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Greece{ background: url(flags/192-greece.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Turkey{ background: url(flags/154-turkey.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Wales{ background: url(flags/246-wales.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Poland{ background: url(flags/165-poland.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Switzerland{ background: url(flags/176-switzerland.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Iceland{ background: url(flags/222-iceland.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Hungary{ background: url(flags/210-hungary.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Romania{ background: url(flags/213-romania.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Ireland{ background: url(flags/193-ireland.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Scotland{ background: url(flags/227-scotland.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Norway{ background: url(flags/205-norway.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Slovakia{ background: url(flags/218-slovakia.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Bulgaria{ background: url(flags/127-bulgaria.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Albania{ background: url(flags/145-albania.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Ukraine{ background: url(flags/198-ukraine.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Slovenia{ background: url(flags/259-slovenia.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Austria{ background: url(flags/072-austria.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Latvia{ background: url(flags/231-latvia.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Finland{ background: url(flags/finland.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}
.flag.Macedonia{ background: url(flags/038-republic-of-macedonia.svg), linear-gradient(0deg, rgba(255,255,255,1) 34%, rgba(205,149,83,0) 35%);}



.shake {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.description.flipped:after{
    top: -37px;
    transform: rotate(180deg);
}

.description.flipped .flag{
  z-index: 1;
      margin-top: -17px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}