@charset "utf-8";
/* CSS Document */

/* Simple reset*/
* {
	margin: 0; padding: 0;
}

body {
	background-color: #FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
}

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

ul li {
	background-image: url(../images/bullet.png);
	background-repeat: no-repeat;
	background-position: 0px 1px;
	padding-left: 14px;
}
p { 
	text-align:justify;
	margin-top: 0.5em;

}

pre {
  word-break: break-all; /* webkit */
  word-wrap: break-word;
	white-space: pre;
	white-space: -moz-pre-wrap; /* fennec */
  white-space: pre-wrap;
	white-space: pre\9; /* IE7+ */
}

.compass {
	width: 586px;
	height: 584px;
	/*background-color: #FFFFFF;*/
	border-radius: 100%;
	background-image: url(../compass_01.png);
	position: relative;
	margin: 0 auto;
}

.compass-text {
	width: 586px;
	height: 584px;
	background-image: url(../compass_03.png);
	background-repeat: no-repeat;
	border-radius: 100%;
	position: relative;
	left: 0px;
	top: 0px;
	/*border: 3px solid #C5C5C5;*/
}

.compass-inner {
	width: 586px;
	height: 584px;
	background-image: url(../compass_02.png);
	background-repeat: no-repeat;
	border-radius: 100%;
	position: relative;
	left: 0px;
	top: 0px;
}

.main-arrow {
	height: 56%;
	width: 50px;
	left: 270px;
	top: 120px;
	position: absolute;
	padding-top: 5px;
	box-sizing:border-box;
  transform: rotate(20deg);
	animation: spin 8.0s alternate infinite;
	-ms-transform: rotate(20deg);
	-o-transform: rotate(20deg);
	-o-animation: spin 8.0s alternate infinite;
	-moz-transform: rotate(20deg);
	-moz-animation: spin 8.0s alternate infinite;
	-webkit-transform: rotate(20deg);
	-webkit-animation: spin 8.0s alternate infinite;
	z-index:120;!important
	
}

.wheel{
	position: relative;
	margin: 0 auto;
	width: 586px;
	height: 586px;
	left: 0px;
	top: 0px;
}
.wheel img{
	height: 100%;
	width: 100%;
}

.arrow-up {
	width: 0; 
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 165px solid #EF5052;
	position: relative;
}

.arrow-down {
	-webkit-transform: rotate(180deg); /* Safari and Chrome */
	width: 0; 
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 165px solid #F3F3F3;
	position: relative;
}

.north {
	font-size: 36px;
	color: #FFF;
	position: absolute;
	left: 270px;
	top: 120px;
	z-index:110;!important
}

.east {
	font-size: 36px;
	color: #FFF;
	position: absolute;
	left: 420px;
	top: 260px;
	z-index:110;!important
}

.west {
	font-size: 36px;
	color: #FFF;
	position: absolute;
	left: 130px;
	top: 260px;
	z-index:110;!important
}

.south {
	font-size: 36px;
	color: #FFF;
	position: absolute;
	left: 270px;
	top: 400px;
	z-index:110;!important
}

@keyframes spin {
    0%{
        transform:scale(1) rotate(0deg);
    }
	50% {
		transform:scale(1) rotate(80deg);
	}
	100% {
		transform:scale(1) rotate(-180deg);
	}
}

@-o-keyframes spin {
    0%{
        -webkit-transform:scale(1) rotate(0deg);
    }
	50% {
		-webkit-transform:scale(1) rotate(80deg);
	}
	100% {
		-webkit-transform:scale(1) rotate(-180deg);
	}
}

@-moz-keyframes spin {
    0%{
        -webkit-transform:scale(1) rotate(0deg);
    }
	50% {
		-webkit-transform:scale(1) rotate(80deg);
	}
	100% {
		-webkit-transform:scale(1) rotate(-180deg);
	}
}

@-webkit-keyframes spin {
    0%{
        -webkit-transform:scale(1) rotate(0deg);
    }
	50% {
		-webkit-transform:scale(1) rotate(80deg);
	}
	100% {
		-webkit-transform:scale(1) rotate(-180deg);
	}
}

@media (max-width: 600px) {
	
  .wheel{
	  position: relative;
	  margin: 0 auto;
	  width: 293px;
	  height: 293px;
	  left: 0px;
	  top: 0px;
  }
  .wheel img{
	  height: 100%;
	  width: 100%;
  }

  .compass {
    width: 200px;
	height: 200px;
	text-align: center;
  }
  
  .compass-inner {
	  width: 170px;
	  height: 170px;
	  left: 13px;
	  top: 13px;
  }
  
  .main-arrow {
	width: 30px;
	left: 200px;
	width: 15px;
	padding-top: 3px;
  }
  
  .arrow-up {
	border-bottom: 82.5px solid #EF5052;
	border-left: 7.5px solid transparent;
	border-right: 7.5px solid transparent;
  }
  
   .arrow-down {
	border-bottom: 82.5px solid #F3F3F3;
	border-left: 7.5px solid transparent;
	border-right: 7.5px solid transparent;
  }
  
  .north {
	  left: 78px;
	  top: 10px;
	  font-size: 16px;
  }
  
  .south {
	  font-size: 16px;
	  left: 78px;
	  top: 140px;
  }
  
  .east {
	  font-size: 16px;
	  top: 72.5px;
	  left: 145px;
  }
  
  .west {
	  font-size: 16px;
	  left: 10px;
	  top: 72.5px;
  }
}


@media (max-width: 600px) {
  .compass {
    width: 200px;
	height: 200px;
	text-align: center;
  }
  
  .compass-inner {
	  width: 170px;
	  height: 170px;
	  left: 13px;
	  top: 13px;
  }
  
  .main-arrow {
	width: 30px;
	left: 78px;
	width: 15px;
	padding-top: 3px;
  }
  
  .arrow-up {
	border-bottom: 82.5px solid #EF5052;
	border-left: 7.5px solid transparent;
	border-right: 7.5px solid transparent;
  }
  
   .arrow-down {
	border-bottom: 82.5px solid #F3F3F3;
	border-left: 7.5px solid transparent;
	border-right: 7.5px solid transparent;
  }
  
  .north {
	  left: 78px;
	  top: 10px;
	  font-size: 16px;
  }
  
  .south {
	  font-size: 16px;
	  left: 78px;
	  top: 140px;
  }
  
  .east {
	  font-size: 16px;
	  top: 72.5px;
	  left: 145px;
  }
  
  .west {
	  font-size: 16px;
	  left: 10px;
	  top: 72.5px;
  }
}

@media (max-width: 600px) {
  .compass {
    width: 200px;
	height: 200px;
	text-align: center;
  }
  
  .compass-inner {
	  width: 170px;
	  height: 170px;
	  left: 13px;
	  top: 13px;
  }
  
  .main-arrow {
	width: 30px;
	left: 78px;
	width: 15px;
	padding-top: 3px;
  }
  
  .arrow-up {
	border-bottom: 82.5px solid #EF5052;
	border-left: 7.5px solid transparent;
	border-right: 7.5px solid transparent;
  }
  
   .arrow-down {
	border-bottom: 82.5px solid #F3F3F3;
	border-left: 7.5px solid transparent;
	border-right: 7.5px solid transparent;
  }
  
  .north {
	  left: 78px;
	  top: 10px;
	  font-size: 16px;
  }
  
  .south {
	  font-size: 16px;
	  left: 78px;
	  top: 140px;
  }
  
  .east {
	  font-size: 16px;
	  top: 72.5px;
	  left: 145px;
  }
  
  .west {
	  font-size: 16px;
	  left: 10px;
	  top: 72.5px;
  }
}

@media (max-width: 600px) {


#inline1,
#inline2,
#inline3,
#inline4,
#inline5 {
	max-width: 100%;
}

  .compass {
    width: 200px;
	height: 200px;
	text-align: center;
	margin-left: 0;
  }
  
  .compass-inner {
	  width: 170px;
	  height: 170px;
	  left: 13px;
	  top: 13px;
  }
  
  .main-arrow {
	height: 50%;
	width: 30px;
	left: 140px;
	top: 85px;
	width: 15px;
	padding-top: 3px;
  }
  
  .arrow-up {
	border-bottom: 52.5px solid #EF5052;
	border-left: 7.5px solid transparent;
	border-right: 7.5px solid transparent;
  }
  
   .arrow-down {
	border-bottom: 52.5px solid #F3F3F3;
	border-left: 7.5px solid transparent;
	border-right: 7.5px solid transparent;
  }
  
  .north {
	  left: 140px;
	  top: 70px;
	  font-size: 16px;
  }
  
  .south {
	  font-size: 16px;
	  left: 140px;
	  top: 200px;
  }
  
  .east {
	  font-size: 16px;
	  top: 130px;
	  left: 210px;
  }
  
  .west {
	  font-size: 16px;
	  left: 70px;
	  top: 130px;
  }
  
  #image{
  margin:100px 100px;
}
}