body{
	font-family: sans-serif;
}

	
.card {

	display: block;
    margin-left: auto;
    margin-right: auto;
	padding-top: 30%;
	width: 96%;

}

.container {
  width: 100%
}

#map-icon{

	position: absolute;
	height: 30px;
    width: 30px;
    background-color: rgba(0,0,0,0);
    /*background-color: red;*/
    border-radius: 50%;
    display: inline-block;
	cursor: pointer;


}

.map-icon1 { margin: 3% 15.5%; }
.map-icon2 { margin: 17.2% 16%; }
.map-icon3 { margin: 12.2% 28.3%; }
.map-icon4 { margin: 31.8% 7.2%; }
.map-icon5 { margin: 33.8% 20.6%; }
.map-icon6 { margin: 4% 55%; }
.map-icon7 { margin: 9.4% 73.4%; }
.map-icon8 { margin: 14% 61.9%; }
.map-icon9 { margin: 27.7% 33.6%; }
.map-icon10 { margin: 33.7% 41.9%; }
.map-icon11 { margin: 40.4% 28%; }
.map-icon12 { margin: 35.9% 68.1%; }
.map-icon13 { margin: 26.4% 72.7%; }
.map-icon14 { margin: 40.2% 79.3%; }



#map-icon-ts{

    position: absolute;
	height: 75px;
    width: 125px;
    margin: 18% 43%; 
    background-color: rgba(0,0,0,0);
    /*background-color: red;*/
    border-radius: 50%;
    display: inline-block;
	cursor: pointer;


}


.map-icons{

	padding-bottom: 0.3%;
	
}



a{
text-decoration: none;
color: #000;
cursor: pointer;

}

.dropdown-content{
	display: none;
}




#loader {

  margin-top: 20%;
  margin-left: auto;
  margin-right: auto;
  border: 16px solid #ddd;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin .7s linear infinite;
  animation: spin .7s linear infinite;
  
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}




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


	.card {

		width: 91%;

		padding-top: 5%;

	}


	.container {
		width: 100%
	}


	#map-icon{

		height: 45px;
		width: 45px;



	}

	.map-icons{

		padding-bottom: 0.5%;

	}


	#map-icon-ts{

		position: absolute;
		height: 75px;
		width: 125px;
		margin: 17% 39%; 
	}


	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f1f1f1;
		text-align: center;
		border-radius: 6px;
		padding: 6px 0;
		min-width: 160px;
		z-index: 1;
		margin-left: 55px;
		border: 2px solid #000;

	}

	.dropdown:hover .dropdown-content {
		display: block;  


	}

	img {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width:100%;
	}



	h4 {
		display: block;
		text-align: center;
		padding-bottom: 5%;
	}



	#goToTableskatingPage{

		width: 100%;

	}


	#goToTableskatingPage2{
		margin-top: 5%;
		width:80%;
		border: 1px solid #000;
		cursor: pointer;


	}

 
}

@media screen and (min-width:600px) {


	.card {

		width: 91%;

		padding-top: 5%;

	}


	.container {
		width: 100%
	}


	#map-icon{

		height: 45px;
		width: 45px;



	}

	.map-icons{

		padding-bottom: 0.5%;

	}


	#map-icon-ts{

		position: absolute;
		height: 200px;
		width: 250px;
		margin: 18% 43%; 
	}


	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #f1f1f1;
		text-align: center;
		border-radius: 6px;
		padding: 6px 0;
		min-width: 160px;
		z-index: 1;
		margin-left: 55px;
		border: 2px solid #000;

	}

	.dropdown:hover .dropdown-content {
		display: block;  


	}

	img {
		display: block;
		margin-left: auto;
		margin-right: auto;
		width:100%;
	}



	h4 {
		display: none;
		text-align: center;
		padding-bottom: 5%;
	}



	#goToTableskatingPage{

		width: 100%;

	}


	#goToTableskatingPage2{
		margin-top: 5%;
		width:80%;
		border: 1px solid #000;
		cursor: pointer;


	}



 

}