/* ###

 :: APP CONTROLLER :: MAKE IMAGES DIR RELATIVE :: ../images/ ::
 :: APP CONTROLLER :: MAKE FONTS DIR RELATIVE :: ../fonts/ ::

 ### */

.map-box
{
	margin-bottom: 30px;
}
.map-box h2
{
	font-weight: 600;
	margin-top: 5px;
}


/*MAPa*/
.map-sem
{
	margin-top: 70px;
    background: url('../../images/app/mapa.png') no-repeat center;
    height: 362px;
	position: relative;	
	cursor: pointer;
    transition: all 1.029s linear;
    -webkit-transition:all 1.029s linear;
    -moz-transition:all 1.029s linear;
    -o-transition:all 1.029s linear;
}

.map-sem:hover
{
    background: url('../../images/app/mapa_blurr.png') no-repeat center;
}

.map-sem .poland
{
    width: 100%;
    height: 100%;
}

.map-sem .poland .map-pol
{
    max-width: 80px;
    position: absolute;
    right: 258px;
    top: 102px;
    z-index: 3;
}

.map-sem:hover .poland .map-pol
{
	max-width: 80px;
    position: absolute;
    right: 258px;
    top: 102px;
    z-index: 3;
    animation: animationFrames linear 0.8s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards, backwards; /*when the spec is finished*/
    transform-origin: 100% 100%;
    -webkit-animation: animationFrames linear 0.8s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 100% 100%;
    -webkit-animation-fill-mode:forwards; /*when the spec is finished*/
    -moz-animation: animationFrames linear 0.8s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 100% 100%;
    -moz-animation-fill-mode:forwards; /*when the spec is finished*/
    -o-animation: animationFrames linear 0.8s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 100% 100%;
    -o-animation-fill-mode:forwards; /*when the spec is finished*/
    -ms-animation: animationFrames linear 0.8s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 100% 100%;
    -ms-animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFrames{
    0% {
        transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
    }
    100% {
        transform:  translate(100px,170px)  scaleX(4.00) scaleY(4.00) ;
    }
}

.map-sem-after .poland .map-pol
{
    max-width: 80px;
    position: absolute;
    right: 258px;
    top: 102px;
    z-index: 3;
    animation: animationFramesAfter linear 0.8s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards, backwards; /*when the spec is finished*/
    transform-origin: 100% 100%;
    -webkit-animation: animationFramesAfter linear 0.8s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 100% 100%;
    -webkit-animation-fill-mode:forwards; /*when the spec is finished*/
    -moz-animation: animationFramesAfter linear 0.8s;
    -moz-animation-iteration-count: 1;
    -moz-transform-origin: 100% 100%;
    -moz-animation-fill-mode:forwards; /*when the spec is finished*/
    -o-animation: animationFramesAfter linear 0.8s;
    -o-animation-iteration-count: 1;
    -o-transform-origin: 100% 100%;
    -o-animation-fill-mode:forwards; /*when the spec is finished*/
    -ms-animation: animationFramesAfter linear 0.8s;
    -ms-animation-iteration-count: 1;
    -ms-transform-origin: 100% 100%;
    -ms-animation-fill-mode:forwards; /*when the spec is finished*/
}

@keyframes animationFramesAfter{
    0% {
        transform:  translate(100px,170px)  scaleX(4.00) scaleY(4.00) ;
    }
    100% {
        transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
    }
}

/*BIELSKO-BIALA*/

.map-sem .country-point
{
    bottom: 60px;
    left: 433px;
    position: absolute;
    z-index: 4;
    opacity: 0;
    display: none;
    transition-duration: 0s;
    transition: opacity .15s ease-in 1s;
    transition-timing-function: ease-out 0s;
    transition-property: opacity;
}

/*CHORZÓW*/

.map-sem .country-second
{
    bottom: 79px;
    left: 448px;
    position: absolute;
    z-index: 4;
    opacity: 0;
    display: none;
    transition-duration: 0s;
    transition: opacity .15s ease-in 1s;
    transition-timing-function: ease-out 0s;
    transition-property: opacity;
}

/*MYSZKÓW*/

.map-sem .country-third
{
    bottom: 93px;
    left: 476px;
    position: absolute;
    z-index: 4;
    opacity: 0;
    display: none;
    transition-duration: 0s;
    transition: opacity .15s ease-in 1s;
    transition-timing-function: ease-out 0s;
    transition-property: opacity;
}

/*ZMOŚĆ*/

.map-sem .country-four
{
    bottom: 90px;
    left: 586px;
    position: absolute;
    z-index: 4;
    opacity: 0;
    display: none;
    transition-duration: 0s;
    transition: opacity .15s ease-in 1s;
    transition-timing-function: ease-out 0s;
    transition-property: opacity;
}

/*LUBLIN*/

.map-sem .country-five
{
    bottom: 115px;
    left: 586px;
    position: absolute;
    z-index: 4;
    opacity: 0;
    display: none;
    transition-duration: 0s;
    transition: opacity .15s ease-in 1s;
    transition-timing-function: ease-out 0s;
    transition-property: opacity;
}

/*WARSZAWA*/

.map-sem .country-six
{
    bottom: 175px;
    left: 505px;
    position: absolute;
    z-index: 4;
    opacity: 0;
    display: none;
    transition-duration: 0s;
    transition: opacity .15s ease-in 1s;
    transition-timing-function: ease-out 0s;
    transition-property: opacity;
}

/*POZNAŃ*/

.map-sem .country-seven
{
    bottom: 195px;
    left: 365px;
    position: absolute;
    z-index: 4;
    opacity: 0;
    display: none;
    transition-duration: 0s;
    transition: opacity .15s ease-in 1s;
    transition-timing-function: ease-out 0s;
    transition-property: opacity;
}

/*GDYNIA*/

.map-sem .country-eight
{
    bottom: 295px;
    left: 430px;
    position: absolute;
    z-index: 4;
    opacity: 0;
    display: none;
    transition-duration: 0s;
    transition: opacity .15s ease-in 1s;
    transition-timing-function: ease-out 0s;
    transition-property: opacity;
}


/*.map-sem:hover .country-point,
.map-sem:hover .country-second,
.map-sem:hover .country-third,
.map-sem:hover .country-four,
.map-sem:hover .country-five,
.map-sem:hover .country-six,
.map-sem:hover .country-seven,
.map-sem:hover .country-eight,
.map-sem:hover .country-nine
{
    opacity: 1;
    display: inline-block;
}*/

.map-sem .country-point .country-point-box
{
    position: relative;
    width: 300px;
    height: 100%;
    display: inline-block;
}

.country-point-box .point
{
    float: left;
    display: inline-block;
    top: 0;
    width: 100px;
    margin-left: 10px;
    color: #173b66;
}

.country-point-box .point span
{
    float: right;
    width: 80px;
    display: inline-block;
    font-size: 12px;
    color: #fff;
    background-color: rgba(83,83,83,0.4);
    padding-left: 5px;
    font-weight: 600;
}

.country-point-box .point i
{
    float: left;
    display: inline-block;
    animation: bounce 2s infinite;
    animation: bounce 2s infinite;
    transform-origin: 100% 100%;
}

.country-point-box .country
{
    background-color: #173b66;
    color: #fff;
    float: left;
    font-size: 13px;
    left: 0;
    padding: 20px;
    position: absolute;
    top: 20px;
    width: 250px;
    z-index: 55;
    display: none;
}

.country-point-box .active
{
    background-color: #173b66;
    color: #fff;
    float: left;
    font-size: 13px;
    left: 0;
    opacity: 1;
    padding: 20px;
    position: absolute;
    top: 20px;
    width: 250px;
    z-index: 55;
}

.country-point-box .country h5
{
    font-size: 16px;
    color: #47b3dd;
    margin-bottom: 15px;
}

.country-point-box .country p
{
    margin: 0;
}

.country-point-box .country a.more
{
    text-align: right;
    float: right;
    padding-left: 10px;
    border-left: 1px solid #73bfe2;
}

/*.country-point-box .point:hover + .country
{
    opacity: 1;
    display: inline-block;
}*/

.country-point-box .point:hover i
{
    color: #c92035;
}

@keyframes showPoint
{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
@keyframes bounce {
    0%, 100%  {width: 10px; height: 10px;}
    50% {width: 13px; height: 13px;}
}

@-moz-keyframes bounce {
    0%, 100%  {width: 10px; height: 10px;}
    50% {width: 13px; height: 13px;}
}


@-webkit-keyframes bounce {
    0%, 100%  {width: 10px; height: 10px;}
    50% {width: 13px; height: 13px;}
}