:root {
  --animate-duration: 0.5s;
}

html,body {
    font-family: 'Barlow Semi Condensed', sans-serif;
	color: #003263;
}

html {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
	background: #fbfbfb;
	margin: 0;
    height: 100%;
    max-height: 100%;
	overflow: hidden;
	display:flex;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
	position: relative;
	flex-direction: column;
}

a {
	text-decoration:none;
}

.blob {
	border-radius: 50%;
	margin: 10px;
	height: 100px;
	width: 100px;
	opacity: 0.6;
	background-color:transparent;
	background: url('../img/mapcircle.png') center center;
	background-size:cover;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;	
	cursor: pointer;
	position:relative;
	animation: pulse-blue 2s infinite;	
}
.blob:hover, .blob:active {
	opacity: 0.7;
	box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
	transform: scale(1);
	background: #003263;
	box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
	animation: pulse-blue 2s infinite;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;

}
.blob::after {
	width: 100px;
	height: 100px;
	display:inline-block;
	position:absolute;
}
.blobs-container .desc {
	background: #003263;
	display:none;
	position: absolute;
	color: #fff;
    padding: 17px;
    width: 150%;
    line-height: 1;
    z-index: 100;
    font-size: 20px;
    font-weight: 500;
	transform: scale(0.7);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;	

}
.blobs-container .desc img {
	position: absolute;
	top:-40px;
	left: 0;
	width: 50px;
}

.blobs-container .desc::before {
	content:"";
	position: absolute;
    top: -50px;
    right: -35px;
	background: url('../img/x.png')center center no-repeat;
	background-size:30px;
	width: 50px;
	height: 78px;	
}
.blobs-container .desc::after {	
	content:"";
	position: absolute;
    bottom: -15px;
    left: -18px;
	background: url('../img/line.png')center center no-repeat;
	background-size:200px;
	width: 200px;
	height: 10px;	
}
.active .desc {
	display:block;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;	
}

.map-wrapper {
    width: 1200px;
    max-width: 1200px;
    height: 800px;
    max-height: 800px;
    overflow: hidden;
    position: relative;
    display: grid;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
	border: 10px solid #ffffff;
}
.all .map-inner {
	background: url('../img/map_00.svg') center center;
	background-size: cover;
}

.all #field01 {
	position: absolute;
    top: 10px;
    left: 500px;
    transform: scale(0.6);
}

.all #field02 {
	position: absolute;
    top: 50px;
    left: 650px;
    transform: scale(0.6);
}

.all #field03 {
	position: absolute;
    top: 260px;
    left: 226px;
    transform: scale(0.6);
}

.all #field04 {
	position: absolute;
    top: -20px;
    left: 586px;
    transform: scale(0.6);
}

.all #field05 {
	position: absolute;
    bottom: -23px;
    left: 375px;
    transform: scale(0.6);
}
.all #field06 {
	position: absolute;
    top: 90px;
    left: 540px;
    transform: scale(0.6);
}

.airport .map-inner {
	background: url('../img/map_01.svg') center center;
	background-size: cover;
}

.airport #field01 {
	position: absolute;
	top:0px;
	left:0px;
}
.airport #field02 {
	position: absolute;
	bottom:34px;
    right:105px;
}

.airport #desc01 {
	top: 60px;
    left: 120px;	
}
.airport #desc02 {
    top: 30px;
    left: -220px;
}

.east .map-inner {
	background: url('../img/map_02.svg') center center;
	background-size: cover;
}

.east #field01 {
	position: absolute;
	top: 130px;
    left: 390px;
}

.east #desc01 {
	top: 60px;
    left: 120px;	
}

.klodzko .map-inner {
	background: url('../img/map_05.svg') center center;
	background-size: cover;
}

.klodzko #field01 {
	position: absolute;
	top: 380px;
    left: 400px;
}

.klodzko #desc01 {
	top: 60px;
    left: 120px;	
}

.walbrzych .map-inner {
	background: url('../img/map_03.svg') center center;
	background-size: cover;
}

.walbrzych #field01 {
	position: absolute;
	top: 146px;
    left: 384px;
}

.walbrzych #desc01 {
	top: 60px;
    left: 120px;	
}

.north .map-inner {
	background: url('../img/map_04.svg') center center;
	background-size: cover;
}

.north #field01 {
    position: absolute;
    top: -30px;
    left: 41px;
    transform: scale(0.8);
}

.north #field02 {
	position: absolute;
	top: -13px;
    left: 85px;
	transform: scale(0.8);
}

.north #field03 {
	position: absolute;
    top: 199px;
    right: -36px;
	transform: scale(0.8);
}

.north #field04 {
	position: absolute;
	bottom: 19px;
    right: 190px;
	transform: scale(0.8);
}

.north #desc01 {
	top: 60px;
    left: 120px;	
}
.north #desc02 {
	top: 100px;
    left: 110px;
}

.north #desc03 {
    top: 30px;
    left: -220px;
}

.north #desc04 {
    top: 30px;
    left: -220px;
}

.south .map-inner {
	background: url('../img/map_06.svg') center center;
	background-size: cover;
}

.south #field01 {
    position: absolute;
    top: 120px;
    left: 370px;
    transform: scale(0.6);
}

.south #field02 {
	position: absolute;
	top: 167px;
    left: 432px;
    transform: scale(0.6);
}

.south #field03 {
	position: absolute;
	top: 229px;
    right: 459px;
    transform: scale(0.6);
}

.south #field04 {
	position: absolute;
	top: 183px;
    right: 241px;
    transform: scale(0.6);
}
.south #field05 {
	position: absolute;
	top: 228px;
    right: 224px;
    transform: scale(0.6);
}
.south #field06 {
	position: absolute;
	top: 269px;
    right: 248px;
    transform: scale(0.6);
}
.south #field07 {
	position: absolute;
	top: 209px;
    right: 108px;
    transform: scale(0.6);
}
.south #field08 {
	position: absolute;
	top: 263px;
    right: 158px;
    transform: scale(0.6);
}
.south #field09 {
	position: absolute;
    bottom: -19px;
    right: 506px;
    transform: scale(0.6);
}
.south #field10 {
	position: absolute;
    top: -30px;
    right: 60px;
    transform: scale(0.6);
}
.south #desc01 {
	top: 60px;
    left: -220px;	
}
.south #desc02 {
	top: 0px;
    left: 110px;
}
.south #desc03 {
    top: 30px;
    left: 110px;
}
.south #desc04 {
	top: 90px;
    left: -200px;	
}
.south #desc05 {
	top: 30px;
    left: -200px;	
}
.south #desc06 {
	top: 20px;
    left: -200px;	
}
.south #desc07 {
    top: 50px;
    left: 100px;	
}
.south #desc08 {
	top: 80px;
    left: 100px;	
}
.south #desc09 {
	top: 27px;
    left: 100px;	
}
.south #desc10 {
	top: 90px;
    left: -190px;	
}
@keyframes pulse-blue {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
  }
  
  70% {
    transform: scale(1.2);
    box-shadow: 0 0 0 20px rgba(52, 172, 224, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
  }
}

/* FOOTER */

.logo {
    position: fixed;
    bottom: 0px;	
	display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;	
}
.logo img {
    width: 150px;
	float: left;
	margin-right: 35px;
}	
.logo span {
	font-family: Helvetica, Arial;
	font-size: 10px;
}
.logo .btn {
	background: #003263;
	color: #fff;
	font-weight: 500;
	padding: 7px 12px;
	text-align: center; 
	margin-right: 35px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;		
}
.logo .btn:hover {
	background: #008AD2;	
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;		
}

/* RESPONSIVE */

@media (min-width: 1921px) { 
.map-wrapper {
    width: 1800px;
    max-width: 1800px;
	height: 1125px;
    max-height: 1125px;
}
.logo {
	transform: scale(1.4);
	bottom: 30px;
}

.all #field01 {
	position: absolute;
    top: 80px;
    left: 936px;
    transform: scale(1);
}

.all #field02 {
	position: absolute;
    top: 130px;
    left: 1220px;
    transform: scale(1);
}

.all #field03 {
	position: absolute;
    top: 570px;
    left: 446px;	
    transform: scale(1);
}

.all #field04 {
	position: absolute;
    top: 10px;
    left: 1110px;	
    transform: scale(1);
}

.all #field05 {
	position: absolute;
    bottom: -3px;
    left: 745px;
    transform: scale(1);
}

.all #field06 {
	position: absolute;
    top: 200px;
    left: 1010px;
    transform: scale(1);
}

.airport #field01 {
	top: 29px;
    left: 26px;
    transform: scale(1.4);
}

.airport #field02 {
	bottom: 78px;
    right: 190px;
    transform: scale(1.4);
}

.east #field01 {
	position: absolute;
	top: 280px;
    left: 760px;
	transform: scale(1.4);
}

.klodzko #field01 {
	position: absolute;
	top: 730px;
    left: 772px;
	transform: scale(1.4);
}

.walbrzych #field01 {
	position: absolute;
	top: 306px;
    left: 741px;
	transform: scale(1.4);
}

.north #field01 {
    position: absolute;
    top: -20px;
    left: 121px;
    transform: scale(1.4);
}

.north #field02 {
	position: absolute;
	top: 27px;
    left: 199px;
	transform: scale(1.4);
}

.north #field03 {
	position: absolute;
    top: 409px;
    right: -26px;
	transform: scale(1.4);
}

.north #field04 {
	position: absolute;
	bottom: 99px;
    right: 400px;
	transform: scale(1.4);
}

.south #field01 {
    position: absolute;
    top: 270px;
    left: 710px;
	transform: scale(1.4);
}

.south #field02 {
	position: absolute;
    top: 347px;
    left: 822px;
	transform: scale(1.4);
}

.south #field03 {
	position: absolute;
	top: 469px;
    right: 859px;
	transform: scale(1.4);
}

.south #field04 {
	position: absolute;
	top: 383px;
    right: 501px;
	transform: scale(1.4);
}
.south #field05 {
	position: absolute;
	top: 458px;
    right: 454px;
	transform: scale(1.4);
}
.south #field06 {
	position: absolute;
    top: 529px;
    right: 498px;
	transform: scale(1.4);
}
.south #field07 {
	position: absolute;
	top: 429px;
    right: 258px;
	transform: scale(1.4);
}
.south #field08 {
	position: absolute;
	top: 523px;
    right: 338px;
	transform: scale(1.4);
}
.south #field09 {
    position: absolute;
    bottom: 21px;
    right: 956px;
    transform: scale(1.4);
}
.south #field10 {
	position: absolute;
    top: -20px;
    right: 150px;
    transform: scale(1.4);
}
}

@media (min-width: 1441px) and (max-width: 1920px) { 
.map-wrapper {
    width: 1200px;
    max-width: 1200px;
	height: 750px;
    max-height: 750px;
}
.logo {
	transform: scale(0.9);
}

.all #field01 {
	position: absolute;
    top: 40px;
    left: 616px;
    transform: scale(0.8);
}

.all #field02 {
	position: absolute;
top: 70px;
    left: 800px;
    transform: scale(0.8);
}

.all #field03 {
	position: absolute;
    top: 360px;
    left: 276px;
    transform: scale(0.8);
}

.all #field04 {
	position: absolute;
	top: 1px;
    left: 710px;
    transform: scale(0.8);
}

.all #field05 {
	position: absolute;
    bottom: -13px;
    left: 475px;
    transform: scale(0.8);
}

.all #field06 {
	position: absolute;
    top: 120px;
    left: 650px;
    transform: scale(0.8);
}

.airport #field01 {
	top: 0px;
    left: 0px;
    transform: scale(1);
}
.airport #field02 {
	bottom: 29px;
    right: 109px;
    transform: scale(1);
}

.east #field01 {
	position: absolute;
	top: 160px;
    left: 480px;
}
.klodzko #field01 {
	position: absolute;
	top: 471px;
    left: 494px;
	transform: scale(1);
}

.walbrzych #field01 {
	position: absolute;
	top: 186px;
    left: 464px;
	transform: scale(1);
}
.north #field01 {
    position: absolute;
    top: -20px;
    left: 61px;
    transform: scale(1);
}

.north #field02 {
	position: absolute;
	top: -3px;
    left: 119px;
	transform: scale(1);
}

.north #field03 {
	position: absolute;
    top: 249px;
    right: -26px;
	transform: scale(1);
}

.north #field04 {
	position: absolute;
	bottom: 39px;
    right: 240px;
	transform: scale(1);
}

.south #field01 {
    position: absolute;
    top: 160px;
    left: 450px;
	transform: scale(1);
}

.south #field02 {
	position: absolute;
    top: 207px;
    left: 522px;
	transform: scale(1);
}

.south #field03 {
	position: absolute;
	top: 289px;
    right: 549px;
	transform: scale(1);
}

.south #field04 {
	position: absolute;
    top: 233px;
    right: 311px;
	transform: scale(1);
}
.south #field05 {
	position: absolute;
    top: 288px;
    right: 284px;
    transform: scale(0.7);
}
.south #field06 {
	position: absolute;
    top: 339px;
    right: 318px;
	transform: scale(1);
}
.south #field07 {
	position: absolute;
    top: 269px;
    right: 158px;
	transform: scale(1);
}
.south #field08 {
	position: absolute;
	top: 325px;
    right: 208px;
	transform: scale(1);
}
.south #field09 {
	position: absolute;
	bottom: -9px;
    right: 616px;
    transform: scale(1);
}
.south #field10 {
	position: absolute;
	top: -28px;
    right: 82px;
    transform: scale(1);
}
}

@media (min-width: 1025px) and (max-width:1440px) { 
.map-wrapper {
    width: 1000px;
    max-width: 1000px;
	height: 625px;
    max-height: 625px;
}
.logo {
	transform: scale(0.9);
}
.airport #field01 {
	top: -27px;
    left: -14px;
    transform: scale(1);
}
.airport #field02 {
	bottom: -1px;
    right: 81px;
    transform: scale(1);
}
}
@media ( min-width: 769px ) and ( max-width: 1024px ) {
.map-wrapper {
    width: 700px;
    max-width: 700px;
	height: 440px;
    max-height: 440px;
}
.logo {
	transform: scale(0.9);
	text-align: center;	
}
.all #field01 {
	position: absolute;
	top: 0px;
    left: 316px;
    transform: scale(0.6);
}

.all #field02 {
	position: absolute;
	top: 20px;
    left: 430px;
    transform: scale(0.7);
}

.all #field03 {
	position: absolute;
    top: 180px;
    left: 136px;
    transform: scale(0.7);
}

.all #field04 {
	position: absolute;
	top: -27px;
    left: 380px;
    transform: scale(0.6);
}

.all #field05 {
	position: absolute;
    bottom: -33px;
    left: 268px;
    transform: scale(0.6);
}

.all #field06 {
	position: absolute;
	top: 50px;
    left: 360px;
    transform: scale(0.8);
}

.airport #field01 {
	top: -24px;
    left: -30px;
	transform: scale(0.7);	
}
.airport #field02 {
	bottom: -6px;
    right: 37px;
	transform: scale(0.7);
}
.east #field01 {
	position: absolute;
	top: 70px;
    left: 254px;
	transform: scale(0.7);
}
.klodzko #field01 {
	position: absolute;
	top: 250px;
    left: 267px; 
	transform: scale(0.7); 
}

.walbrzych #field01 {
	position: absolute;
	top: 86px;
    left: 251px;
	transform: scale(0.7);
}
.north #field01 {
    position: absolute;
    top: -34px;
    left: 11px;
    transform: scale(0.7);
}

.north #field02 {
	position: absolute;
    top: -23px;
    left: 49px;
	transform: scale(0.7);
}

.north #field03 {
	position: absolute;
    top: 119px;
    right: -46px;
	transform: scale(0.7);
}

.north #field04 {
	position: absolute;
	bottom: -1px;
    right: 120px;
	transform: scale(0.7);
}

.south #field01 {
    position: absolute;
    top: 70px;
    left: 240px;
	transform: scale(0.7);
}

.south #field02 {
	position: absolute;
	top: 97px;
    left: 282px;
	transform: scale(0.7);
}

.south #field03 {
	position: absolute;
	top: 149px;
    right: 299px;
	transform: scale(0.7);
}

.south #field04 {
	position: absolute;
    top: 113px;
    right: 151px;
	transform: scale(0.7);
}
.south #field05 {
	position: absolute;
    top: 138px;
    right: 144px;
    transform: scale(0.7);
}
.south #field06 {
	position: absolute;
	top: 169px;
    right: 158px;
	transform: scale(0.7);
}
.south #field07 {
	position: absolute;
	top: 129px;
    right: 68px;
	transform: scale(0.7);
}
.south #field08 {
	position: absolute;
	top: 175px;
    right: 98px;
	transform: scale(0.7);
}
.south #field09 {
    position: absolute;
    bottom: -19px;
    right: 336px;
    transform: scale(0.7);
}
.south #field10 {
	position: absolute;
    top: -40px;
    right: 30px;
    transform: scale(0.7);
}
}
@media ( max-width: 768px ) {
.map-wrapper {
    width: 500px;
    max-width: 500px;
    height: 330px;
    max-height: 330px;
}
.logo {
	transform: scale(0.8);
	text-align: center;
}
.all #field01 {
	position: absolute;
	top: -20px;
    left: 216px;
    transform: scale(0.4);
}

.all #field02 {
	position: absolute;
	top: -2px;
    left: 300px;
    transform: scale(0.4);
}

.all #field03 {
	position: absolute;
    top: 110px;
    left: 81px;
    transform: scale(0.4);
}

.all #field04 {
	position: absolute;
	top: -37px;
    left: 260px;
    transform: scale(0.4);
}

.all #field05 {
	position: absolute;
        bottom: -41px;
    left: 166px;
    transform: scale(0.4);
}

.all #field06 {
	position: absolute;
	top: 20px;
    left: 240px;
    transform: scale(0.4);
}

.airport #field01 {
	top: -36px;
    left: -35px;
    transform: scale(0.4);	
}
.airport #field02 {
	bottom: -21px;
    right: 9px;
    transform: scale(0.4);
}
.east #field01 {
	position: absolute;
	top: 40px;
    left: 163px;
    transform: scale(0.4);
}
.klodzko #field01 {
	position: absolute;
	top: 170px;
    left: 172px;
	transform: scale(0.4);
}

.walbrzych #field01 {
	position: absolute;
	top: 55px;
    left: 164px;
    transform: scale(0.4);
}
.north #field01 {
    position: absolute;
	top: -34px;
    left: -9px;
    transform: scale(0.4);
}

.north #field02 {
	position: absolute;
    top: -23px;
    left: 13px;
	transform: scale(0.4);
}

.north #field03 {
	position: absolute;
    top: 79px;
    right: -46px;
	transform: scale(0.4);
}

.north #field04 {
	position: absolute;
	bottom: -7px;
    right: 68px;
	transform: scale(0.4);
}

.south #field01 {
    position: absolute;
    top: 40px;
    left: 150px;
	transform: scale(0.4);
}

.south #field02 {
	position: absolute;
    top: 63px;
    left: 184px;
	transform: scale(0.4);
}

.south #field03 {
	position: absolute;
	top: 97px;
    right: 198px;
	transform: scale(0.4);
}

.south #field04 {
	position: absolute;
    top: 73px;
    right: 91px;
	transform: scale(0.4);
}
.south #field05 {
	position: absolute;
	top: 88px;
    right: 84px;
    transform: scale(0.4);
}
.south #field06 {
	position: absolute;
	top: 109px;
    right: 88px;
	transform: scale(0.4);
}
.south #field07 {
	position: absolute;
	top: 89px;
    right: 28px;
	transform: scale(0.4);
}
.south #field08 {
	position: absolute;
    top: 115px;
    right: 48px;
	transform: scale(0.4);
}
.south #field09 {
    position: absolute;
    bottom: -29px;
    right: 226px;
    transform: scale(0.4);
}
.south #field10 {
	position: absolute;
    top: -40px;
    right: 0px;
    transform: scale(0.4);
}
}