/*---MAPBOX MODUL---*/

.terkepnyito {
z-index: 500;
position:absolute;
top: 0;
right:0;
width: 110px;
height: 110px;
display: block;
cursor: pointer;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
}

.terkepnyito:before {
position:absolute;
content: '';
top: -5px;
right:-5px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 110px 110px  0;
border-color:  transparent #3e1f4e transparent transparent;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
cursor: pointer;
}

.terkepnyito span {
position:absolute;
display: block;
top: 0;
right:0;
width: 100px;
height: 100px;
background-image: url('/themes/traveltime.hu/images/fedezdfel.png');
background-position: top right;
cursor: pointer;
}

.terkepnyito:hover:before {
border-color:  transparent #3e1f4e transparent  transparent;
}

.terkepnyito:hover {
transform: translate3d(-5px,5px,0);
-webkit-transform: translate3d(-5px,5px,0);
-moz-transform: translate3d(-5px,5px,0);
-ms-transform: translate3d(-5px,5px,0);
}

.terkepnyito.open {

}



.mapbox-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 600px;
min-height: 460px !important;
display: none;

}
.mapbox-container.active {
display: inline-block;
-webkit-animation: fadeInDown 0.4s;
animation: fadeInDown 0.4s;
}

/*---MAPBOX MODUL---*/


.mapbox {
position:relative;
width: 100%;
display: inline-block;
float: left;
height: 600px;
min-height: 460px !important;
background: #3f51b5;
overflow: hidden;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
background-image: url('/themes/traveltime.hu/images/europe2.jpg');
background-repeat: no-repeat;
background-position:center;
}

.mapover {
  background-color: rgba(0,0,0,0.1);
  /*background-image: url('/themes/traveltime.hu/images/img-overlay.png');*/
  content: '';
  position: absolute;
  width: 100%;
  height: 600px;
  min-height: 460px !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index:3;
}


.map, .map0 {

width: 1024px;
height: 460px;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -512px;
margin-top: -230px;
z-index: 2;
/*background: #3f51b5 url('/themes/traveltime.hu/images/europe.jpg') no-repeat center;*/
}

.map {
background: transparent;z-index: 6;
}




.pinbox {
position: absolute;
width: 10px;
height: 10px;
transform: scale(0,0);
-webkit-transform: scale(0,0);
transition: all 0.4s ease;
-webkit-transtion: all 0.4s ease;
transform-origin:  bottom left;
-webkit-transform-origin:  bottom left;
opacity: 0;
z-index: 15;
}




.pindetail {
font-family: 'Open Sans', Arial;
color: #000;
font-size: 14px;
line-height: 18px;
position:absolute;
bottom: 100%;
left: 58px;
z-index: 35;
display: inline-block;
max-width: 0;
overflow: hidden;
text-align: left;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
padding: 10px 0;
background: #eef745;
height: 60px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}



.pindetail span {font-size: 14px; padding-top: 2px; clear: both; display: block; min-width: 90px; }
.pindetail b {font-size: 15px; clear: both; display: block; width: auto; text-transform: uppercase;white-space: nowrap;}

.pinbox .imgbox {
width: 60px;
height: 60px;
transform: scale(0.8,0.8);
-webkit-transform: scale(0.8,0.8);
overflow: hidden;
background-size: cover;
background-position: center;
display: inline-block;
position:absolute;
left: 0;
top: -60px;
border: 3px solid #eef745;
background-color: #eef745;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}



.pindbox:after {
width: 0px;
content: '';
line-height: 0;
height: 0;
position: absolute;
top: -2px;
left: 0;
border-style: solid;
border-width: 0 10px 10px 0;
border-color: transparent #eef745 transparent transparent;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}





.pinbox.olaszorszag {top: 300px; left: 55%;}
.pinbox.horvatorszag {top: 265px; left: 59%;}
.pinbox.malta {top: 400px; left: 56%;}
.pinbox.spanyolorszag {top: 380px; left: 35%;}
.pinbox.portugalia{top: 350px; left: 29%;}
.pinbox.franciaorszag {top: 230px; left: 43%;}
.pinbox.egyesult-kiralysag {top: 150px; left: 38%;}
.pinbox.ausztria {top: 240px; left: 58%;}
.pinbox.nemetorszag {top: 210px; left: 50%;}
.pinbox.ciprus {top: 418px; left: 82%;}
.pinbox.gorogorszag {top: 330px; left: 68%;}
.pinbox.montenegro {top: 295px; left: 63%;}
.pinbox.szlovenia {top: 255px; left: 56%;}
.pinbox.torokorszag {top: 365px; left: 78%;}



.pinbox.on  {
transform: scale(0.6,0.6);
-webkit-transform: scale(0.6,0.6);
opacity: 1;
}


.pinbox.on .imgbox {
transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transform: scale(1,1);
-webkit-transform: scale(1,1);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}


.pinbox.on:hover .pindetail {
width: auto;
max-width: 190px;
padding: 10px;
}



.pinbox.on:hover {
z-index: 50;
transform: scale(1,1);
-webkit-transform: scale(1,1);
}


.pinbox:after {
width: 0px;
content: '';
line-height: 0;
height: 0px;
position: absolute;
top: -2px;
left: 0;
border-style: solid;
border-width: 10px 10px 0 0;
border-color: #eef745 transparent  transparent transparent;
}






.mapbox h3 {
position:absolute;
z-index: 5 !important;
top: 40px;
left: 40px;
font-weight: normal;
font-family: 'Open Sans', Arial;
font-weight: 600 !important;
text-align: left;
-webkit-transform:translateZ(0px);
-moz-transform:translateZ(0px);
-ms-transform:translateZ(0px);
-o-transform:translateZ(0px);
transform:translateZ(0px);
font-size: 50px;
color: #fff;
line-height: 50px;
letter-spacing: -1px;
}

.mapbox .plane {background:transparent url(/themes/traveltime.hu/images/repulo.png) 0 0 no-repeat; background-color:transparent; position:absolute; display:block;
height:154px;
width:110px;
left:40% !important;
top:0 !important;
z-index: 10 !important;
-webkit-animation-name:plane-animate-1;
-moz-animation-name:plane-animate-1;
-ms-animation-name:plane-animate-1;
-o-animation-name:plane-animate-1;
animation-name:plane-animate-1;
-webkit-animation-duration:40s;
-moz-animation-duration:40s;
-ms-animation-duration:40s;
-o-animation-duration:40s;
animation-duration:40s;
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation-timing-function:linear;
-ms-animation-timing-function:linear;
-o-animation-timing-function:linear;
animation-timing-function:linear;

-webkit-transform:translateZ(0px);
-moz-transform:translateZ(0px);
-ms-transform:translateZ(0px);
-o-transform:translateZ(0px);
transform:translateZ(0px)
}


@-webkit-keyframes plane-animate-1{
from{ opacity:1;
-webkit-transform:translate(-160px,-160px);
-moz-transform:translate(-160px,-160px);
-ms-transform:translate(-160px,-160px);
-o-transform:translate(-160px,-160px);
transform:translate(-160px,-160px)
}
98%{opacity:1}
99%{opacity:0;
-webkit-transform:translate(233px,600px);
-moz-transform:translate(233px,600px);
-ms-transform:translate(233px,600px);
-o-transform:translate(233px,600px);
transform:translate(233px,600px)}
to{
opacity:0;
-webkit-transform:translate(-160px,-160px);
-moz-transform:translate(-160px,-160px);
-ms-transform:translate(-160px,-160px);
-o-transform:translate(-160px,-160px);
transform:translate(-160px,-160px)
}
}
@-moz-keyframes plane-animate-1{from{ opacity:1;-webkit-transform:translate(-160px,-160px);-moz-transform:translate(-160px,-160px);-ms-transform:translate(-160px,-160px);-o-transform:translate(-160px,-160px);transform:translate(-160px,-160px)}98%{opacity:1}99%{opacity:0;-webkit-transform:translate(233px,600px);-moz-transform:translate(233px,600px);-ms-transform:translate(233px,600px);-o-transform:translate(233px,600px);transform:translate(233px,600px)}to{opacity:0;-webkit-transform:translate(-160px,-160px);-moz-transform:translate(-160px,-160px);-ms-transform:translate(-160px,-160px);-o-transform:translate(-160px,-160px);transform:translate(-160px,-160px)}}
@-ms-keyframes plane-animate-1{from{ opacity:1;-webkit-transform:translate(-160px,-160px);-moz-transform:translate(-160px,-160px);-ms-transform:translate(-160px,-160px);-o-transform:translate(-160px,-160px);transform:translate(-160px,-160px)}98%{opacity:1}99%{opacity:0;-webkit-transform:translate(233px,600px);-moz-transform:translate(233px,600px);-ms-transform:translate(233px,600px);-o-transform:translate(233px,600px);transform:translate(233px,600px)}to{opacity:0;-webkit-transform:translate(-160px,-160px);-moz-transform:translate(-160px,-160px);-ms-transform:translate(-160px,-160px);-o-transform:translate(-160px,-160px);transform:translate(-160px,-160px)}}
@keyframes plane-animate-1{from{ opacity:1;-webkit-transform:translate(-160px,-160px);-moz-transform:translate(-160px,-160px);-ms-transform:translate(-160px,-160px);-o-transform:translate(-160px,-160px);transform:translate(-160px,-160px)}98%{opacity:1}99%{opacity:0;-webkit-transform:translate(233px,600px);-moz-transform:translate(233px,600px);-ms-transform:translate(233px,600px);-o-transform:translate(233px,600px);transform:translate(233px,600px)}to{opacity:0;-webkit-transform:translate(-160px,-160px);-moz-transform:translate(-160px,-160px);-ms-transform:translate(-160px,-160px);-o-transform:translate(-160px,-160px);transform:translate(-160px,-160px)}}

@keyframes PULSE-ANIMATION {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  80% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
@-webkit-keyframes PULSE-ANIMATION {
  0% {
    -webkit-transform: scale(0.8);
    opacity: 1;
  }
  80% {
    -webkit-transform: scale(2);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(2.5);
    opacity: 0;
  }
}
@-moz-keyframes PULSE-ANIMATION {
  0% {
    -moz-transform: scale(0.8);
    opacity: 1;
  }
  80% {
    -moz-transform: scale(2);
    opacity: 0;
  }
  100% {
    -moz-transform: scale(2.5);
    opacity: 0;
  }
}
@-ms-keyframes PULSE-ANIMATION {
  0% {
    -ms-transform: scale(0.8);
    opacity: 1;
  }
  80% {
    -ms-transform: scale(2);
    opacity: 0;
  }
  100% {
    -ms-transform: scale(2.5);
    opacity: 0;
  }
}
@-o-keyframes PULSE-ANIMATION {
  0% {
    -o-transform: scale(0.8);
    opacity: 1;
  }
  80% {
    -o-transform: scale(2);
    opacity: 0;
  }
  100% {
    -o-transform: scale(2.5);
    opacity: 0;
  }
}