.circle-container > li > a {
	text-decoration:none;
}
.circle-container {
  position: relative;
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  padding: 0;
  list-style: none;
  margin: 5em auto 0;
  border: solid 5px #C00000;
  background-image: url(http://www.itb-china.com/wp-content/uploads/2019/01/buyersCircle.jpg);
    background-size: 10em;
    background-repeat: no-repeat;
    background-position: center;	
}
.circle-container > * {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -3em;
  width: 2.5vw;
  height: 2.5vw; 
  z-index: 1;
}
.circle-container > *:nth-of-type(1) {
  -webkit-transform: rotate(-10deg) translate(15vw) rotate(10deg);
  -ms-transform: rotate(-10deg) translate(15vw) rotate(10deg);
  transform: rotate(-10deg) translate(15vw) rotate(10deg);
}
.circle-container > *:nth-of-type(2) {
  -webkit-transform: rotate(40deg) translate(15vw) rotate(-40deg);
  -ms-transform: rotate(40deg) translate(15vw) rotate(-40deg);
  transform: rotate(40deg) translate(15vw) rotate(-40deg);
}
.circle-container > *:nth-of-type(3) {
  -webkit-transform: rotate(130deg) translate(15vw) rotate(-130deg);
  -ms-transform: rotate(130deg) translate(15vw) rotate(-130deg);
  transform: rotate(130deg) translate(15vw) rotate(-130deg);
}
.circle-container > *:nth-of-type(4) {
  -webkit-transform: rotate(180deg) translate(15vw) rotate(-180deg);
  -ms-transform: rotate(180deg) translate(15vw) rotate(-180deg);
  transform: rotate(180deg) translate(15vw) rotate(-180deg);
}
.circle-container > *:nth-of-type(5) {
  -webkit-transform: rotate(220deg) translate(15vw) rotate(-220deg);
  -ms-transform: rotate(220deg) translate(15vw) rotate(-220deg);
  transform: rotate(220deg) translate(15vw) rotate(-220deg);
}
.circle-container > *:nth-of-type(6) {
  -webkit-transform: rotate(300deg) translate(15vw) rotate(-300deg);
  -ms-transform: rotate(300deg) translate(15vw) rotate(-300deg);
  transform: rotate(300deg) translate(15vw) rotate(-300deg);
}

.circle-container img {
  display: block;
  max-width: 100%;
  border-radius: 50%;
  /*filter: grayscale(100%);*/
  border: solid 2px #C00000;
  transition: 0.15s;
  float: left;
  margin-right: 1.2vw;
  margin-top: 0.5em;
  display:none;
}
.circle-container p{
	display: none;
	margin:0.1em;
}

.circle-container div {
	  border: 1px solid #C00000;
	  background: white;
	  padding:0.4em;
	  border-radius:50%;
	  width: 5em;
	  height: 5em;
	  display: table;
}
.circle-container div > p > span{
	display:block;
	font-size:smaller;
}
.circle-container div:hover {
	/*transform: scale(1.25);*/
	width: 22vw;
	border-radius: 5em;
	height: initial;
	z-index: 2;
}

.circle-container div:hover img, .circle-container div:hover p{
	display:block;
	font-size:smaller;
}
.circle-container div > h4{
	margin: 1.2em auto;
    text-align: center;	
	display: table-cell;
	vertical-align:middle;
}

.circle-container div:hover h4{
	margin: 0.2em 0 0.4em 0;
	width: initial;
	height: initial;
	display:block;
	text-align:left;			 
	/*font-size: initial;*/
}
.circle-buyer-feature{
	overflow:hidden;
	width: 15vw;
}
.circle-container > *:nth-of-type(1){
	z-index:1;
}
.circle-container > *:nth-of-type(2){
	z-index:1;
}
.circle-container > *:nth-of-type(3){
	z-index:2;
}
.circle-container > *:nth-of-type(4){
	z-index:2;
}
.circle-container > *:nth-of-type(5){
	z-index:3;
}
.circle-container > *:nth-of-type(6){
	z-index:2;
}
.circle-container #fourth img{
	margin-top: 1em;
}

@media (min-width: 2000px) {
	.circle-container {
		width: 30em;
		height: 30em;
		background-size:18em;
	}
	.circle-container div {
		width: 7em;
		height: 7em;
	}
	.circle-container > *:nth-of-type(1) {
	  -webkit-transform: rotate(0deg) translate(15em) rotate(0deg);
	  -ms-transform: rotate(0deg) translate(15em) rotate(0deg);
	  transform: rotate(0deg) translate(15em) rotate(0deg);
	}
	.circle-container > *:nth-of-type(2) {
	  -webkit-transform: rotate(60deg) translate(14em) rotate(-60deg);
	  -ms-transform: rotate(60deg) translate(14em) rotate(-60deg);
	  transform: rotate(60deg) translate(14em) rotate(-60deg);
	}
	.circle-container > *:nth-of-type(3) {
	  -webkit-transform: rotate(120deg) translate(15em) rotate(-120deg);
	  -ms-transform: rotate(120deg) translate(15em) rotate(-120deg);
	  transform: rotate(120deg) translate(15em) rotate(-120deg);
	}
	.circle-container > *:nth-of-type(4) {
	  -webkit-transform: rotate(180deg) translate(15.8em) rotate(-180deg);
	  -ms-transform: rotate(180deg) translate(15.8em) rotate(-180deg);
	  transform: rotate(180deg) translate(15.8em) rotate(-180deg);
	}
	.circle-container > *:nth-of-type(5) {
	  -webkit-transform: rotate(240deg) translate(16.3em) rotate(-240deg);
	  -ms-transform: rotate(240deg) translate(16.3em) rotate(-240deg);
	  transform: rotate(240deg) translate(16.3em) rotate(-240deg);
	}
	.circle-container > *:nth-of-type(6) {
	  -webkit-transform: rotate(300deg) translate(15em) rotate(-300deg);
	  -ms-transform: rotate(300deg) translate(15em) rotate(-300deg);
	  transform: rotate(300deg) translate(15em) rotate(-300deg);
	}
	
}

@media (max-width: 2000px) {
	.circle-container div{
		width: 7em;
		height: 7em;
		background-size:13em
	}
	.circle-container div:hover{
		width: 25vw;
	}
	.circle-container{
		width: 20vw;
		height: 20vw;
	}
	.circle-container > *:nth-of-type(1) {
	  -webkit-transform: rotate(0deg) translate(10vw) rotate(0deg);
	  -ms-transform: rotate(0deg) translate(10vw) rotate(0deg);
	  transform: rotate(0deg) translate(10vw) rotate(0deg);
	}
	.circle-container > *:nth-of-type(2) {
	  -webkit-transform: rotate(60deg) translate(9vw) rotate(-60deg);
	  -ms-transform: rotate(60deg) translate(9vw) rotate(-60deg);
	  transform: rotate(60deg) translate(9vw) rotate(-60deg);
	}
	.circle-container > *:nth-of-type(3) {
	  -webkit-transform: rotate(120deg) translate(10vw) rotate(-120deg);
	  -ms-transform: rotate(120deg) translate(10vw) rotate(-120deg);
	  transform: rotate(120deg) translate(10vw) rotate(-120deg);
	}
	.circle-container > *:nth-of-type(4) {
	  -webkit-transform: rotate(180deg) translate(11vw) rotate(-180deg);
	  -ms-transform: rotate(180deg) translate(11vw) rotate(-180deg);
	  transform: rotate(180deg) translate(11vw) rotate(-180deg);
	}
	.circle-container > *:nth-of-type(5) {
	  -webkit-transform: rotate(240deg) translate(11vw) rotate(-240deg);
	  -ms-transform: rotate(240deg) translate(11vw) rotate(-240deg);
	  transform: rotate(240deg) translate(11vw) rotate(-240deg);
	}
	.circle-container > *:nth-of-type(6) {
	  -webkit-transform: rotate(300deg) translate(10vw) rotate(-300deg);
	  -ms-transform: rotate(300deg) translate(10vw) rotate(-300deg);
	  transform: rotate(300deg) translate(10vw) rotate(-300deg);
	}
}
@media (max-width: 1500px) {
	.circle-container div:hover{
		width: 35vw;
	}
	.circle-container div{
		width: 6.5em;
		height: 6.5em;
		background-size:10em
	}
	.circle-container{
		width: 36vw;
		height: 36vw;
	}
	.circle-container > *:nth-of-type(1){
		-webkit-transform: rotate(0deg) translate(17vw) rotate(0deg);
		-ms-transform: rotate(0deg) translate(17vw) rotate(0deg);
		transform: rotate(0deg) translate(17vw) rotate(0deg);
	}
	.circle-container > *:nth-of-type(2){
		-webkit-transform: rotate(60deg) translate(17vw) rotate(-60deg);
		-ms-transform: rotate(60deg) translate(17vw) rotate(-60deg);
		transform: rotate(60deg) translate(17vw) rotate(-60deg);
	}	
	.circle-container > *:nth-of-type(3){
		-webkit-transform: rotate(120deg) translate(18vw) rotate(-120deg);
		-ms-transform: rotate(120deg) translate(18vw) rotate(-120deg);
		transform: rotate(120deg) translate(18vw) rotate(-120deg);		
	}
	.circle-container > *:nth-of-type(4){
		-webkit-transform: rotate(180deg) translate(18vw) rotate(-180deg);
		-ms-transform: rotate(180deg) translate(18vw) rotate(-180deg);
		transform: rotate(180deg) translate(18vw) rotate(-180deg);		
	}
	.circle-container > *:nth-of-type(5){
		-webkit-transform: rotate(240deg) translate(19vw) rotate(-240deg);
		-ms-transform: rotate(240deg) translate(19vw) rotate(-240deg);
		transform: rotate(240deg) translate(19vw) rotate(-240deg);		
	}
	.circle-container > *:nth-of-type(6){
		-webkit-transform: rotate(300deg) translate(18vw) rotate(-300deg);
		-ms-transform: rotate(300deg) translate(18vw) rotate(-300deg);
		transform: rotate(300deg) translate(18vw) rotate(-300deg);		
	}
}

@media (max-width: 1200px) {
	.circle-container div:hover{
		width: 47vw;
	}
	.circle-container{
		width: 50vw;
		height: 50vw;
	}
	.circle-container div{
		width: 7em;
		height: 7em;
	}
	.circle-container > *:nth-of-type(1){
		-webkit-transform: rotate(-10deg) translate(25vw) rotate(10deg);
		-ms-transform: rotate(-10deg) translate(25vw) rotate(10deg);
		transform: rotate(-10deg) translate(25vw) rotate(10deg);
	}
	.circle-container > *:nth-of-type(2){
		-webkit-transform: rotate(40deg) translate(24vw) rotate(-40deg);
		-ms-transform: rotate(40deg) translate(24vw) rotate(-40deg);
		transform: rotate(40deg) translate(24vw) rotate(-40deg);
	}	
	.circle-container > *:nth-of-type(3){
		-webkit-transform: rotate(130deg) translate(25vw) rotate(-130deg);
		-ms-transform: rotate(130deg) translate(25vw) rotate(-130deg);
		transform: rotate(130deg) translate(25vw) rotate(-130deg);		
	}
	.circle-container > *:nth-of-type(4){
		-webkit-transform: rotate(180deg) translate(27vw) rotate(-180deg);
		-ms-transform: rotate(180deg) translate(27vw) rotate(-180deg);
		transform: rotate(180deg) translate(27vw) rotate(-180deg);		
	}
	.circle-container > *:nth-of-type(5){
		-webkit-transform: rotate(220deg) translate(29vw) rotate(-220deg);
		-ms-transform: rotate(220deg) translate(29vw) rotate(-220deg);
		transform: rotate(220deg) translate(29vw) rotate(-220deg);		
	}
	.circle-container > *:nth-of-type(6){
		-webkit-transform: rotate(300deg) translate(27vw) rotate(-300deg);
		-ms-transform: rotate(300deg) translate(27vw) rotate(-300deg);
		transform: rotate(300deg) translate(27vw) rotate(-300deg);		
	}
	#fifth:hover{
		transform: translate(-13vw);
	}
	#first:hover{
		transform: translate(-18vw);
	}
	#second:hover{
		transform: translate(-12vw);
	}
	#sixth:hover{
		transform: translate(-12vw);
	}
	
}
@media (max-width: 800px) {
	.circle-container{
		width: 70vw;
		height: 70vw;
	}
	.circle-container div{
		width: 7em;
		height: 7em;
	}
	/*.circle-container div.circle-buyer-feature:hover{
		width: 47vw;
	}*/
	#first:hover{
		-webkit-transform:  translate(-26vw) ;
		-ms-transform: translate(-26vw) ;
		transform: translate(-26vw) ;
	}
	#second:hover{
		-webkit-transform:  translate(-18vw) ;
		-ms-transform: translate(-18vw) ;
		transform: translate(-18vw) ;
	}
	#sixth:hover{
		-webkit-transform:  translate(-18vw) ;
		-ms-transform: translate(-18vw) ;
		transform: translate(-18vw) ;
	}
	#fifth:hover{
		transform: translate(0vw);
	}
	.circle-buyer-feature > h4{
		margin: 3em auto;
		font-size: initial;
	}
	.circle-container > *:nth-of-type(1){
		-webkit-transform: rotate(-10deg) translate(35vw) rotate(10deg);
		-ms-transform: rotate(-10deg) translate(35vw) rotate(10deg);
		transform: rotate(-10deg) translate(35vw) rotate(10deg);
	}
	.circle-container > *:nth-of-type(2){
		-webkit-transform: rotate(40deg) translate(34vw) rotate(-40deg);
		-ms-transform: rotate(40deg) translate(34vw) rotate(-40deg);
		transform: rotate(40deg) translate(34vw) rotate(-40deg);
	}	
	.circle-container > *:nth-of-type(3){
		-webkit-transform: rotate(130deg) translate(35vw) rotate(-130deg);
		-ms-transform: rotate(130deg) translate(35vw) rotate(-130deg);
		transform: rotate(130deg) translate(35vw) rotate(-130deg);		
	}
	.circle-container > *:nth-of-type(4){
		-webkit-transform: rotate(180deg) translate(39vw) rotate(-180deg);
		-ms-transform: rotate(180deg) translate(39vw) rotate(-180deg);
		transform: rotate(180deg) translate(39vw) rotate(-180deg);		
	}
	.circle-container > *:nth-of-type(5){
		-webkit-transform: rotate(220deg) translate(39vw) rotate(-220deg);
		-ms-transform: rotate(220deg) translate(39vw) rotate(-220deg);
		transform: rotate(220deg) translate(39vw) rotate(-220deg);		
	}
	.circle-container > *:nth-of-type(6){
		-webkit-transform: rotate(300deg) translate(37vw) rotate(-300deg);
		-ms-transform: rotate(300deg) translate(37vw) rotate(-300deg);
		transform: rotate(300deg) translate(37vw) rotate(-300deg);		
	}
}

@media (max-width: 600px) {
	.circle-buyer-feature > h4{
		margin: 3em auto;
		font-size: smaller;
	}
	/*.circle-container{
		width: 70vw;
		height: 70vw;
	}*/
	.circle-container div.circle-buyer-feature{
		width: 6em;
		height: 6em;
	}
	.circle-container div:hover{
		width: 47vw;
	}
	.circle-container div:hover >img{
		display:none;
	}
	.circle-container div:hover >p{
		margin-top:0.5em;
		/*display: none;*/
	}
	.circle-container div:hover >h4{
		margin:0em;
	}
	.circle-container > *:nth-of-type(1){
		-webkit-transform: rotate(-10deg) translate(35vw) rotate(10deg);
		-ms-transform: rotate(-10deg) translate(35vw) rotate(10deg);
		transform: rotate(-10deg) translate(35vw) rotate(10deg);
	}
	.circle-container > *:nth-of-type(2){
		-webkit-transform: rotate(40deg) translate(35vw) rotate(-40deg);
		-ms-transform: rotate(40deg) translate(35vw) rotate(-40deg);
		transform: rotate(40deg) translate(35vw) rotate(-40deg);
	}	
	.circle-container > *:nth-of-type(3){
		-webkit-transform: rotate(130deg) translate(35vw) rotate(-130deg);
		-ms-transform: rotate(130deg) translate(35vw) rotate(-130deg);
		transform: rotate(130deg) translate(35vw) rotate(-130deg);		
	}
	.circle-container > *:nth-of-type(4){
		-webkit-transform: rotate(180deg) translate(36vw) rotate(-180deg);
		-ms-transform: rotate(180deg) translate(36vw) rotate(-180deg);
		transform: rotate(180deg) translate(36vw) rotate(-180deg);		
	}
	.circle-container > *:nth-of-type(5){
		-webkit-transform: rotate(220deg) translate(38vw) rotate(-220deg);
		-ms-transform: rotate(220deg) translate(38vw) rotate(-220deg);
		transform: rotate(220deg) translate(38vw) rotate(-220deg);		
	}
	.circle-container > *:nth-of-type(6){
		-webkit-transform: rotate(300deg) translate(35vw) rotate(-300deg);
		-ms-transform: rotate(300deg) translate(35vw) rotate(-300deg);
		transform: rotate(300deg) translate(35vw) rotate(-300deg);		
	}
}

@media (max-width: 400px) {
	.circle-container{
		background-size: 7em;
	}
	.circle-buyer-feature > h4{
		margin: 1.5em auto;
		font-size: 12px;
	}
	.circle-container div:hover >h4{
		margin: 0.5em auto;
	}
	.circle-container div.circle-buyer-feature{
		width: 4.5em;
		height: 4.5em;
	}
	/*.circle-container{
		width: 70vw;
		height: 70vw;
	}*/
	.circle-container div:hover >p{
		display:none;
	}
	.circle-container div.circle-buyer-feature:hover{
		width:4.5em;
		border: 3px solid red;
	}
	#first:hover, #second:hover, #third:hover, #fourth:hover, #fifth:hover, #sixth:hover{
		transform:translate(0);
	}
	.circle-container > *:nth-of-type(1) {
		-webkit-transform: rotate(10deg) translate(33vw) rotate(-10deg);
		-ms-transform: rotate(10deg) translate(33vw) rotate(-10deg);
		transform: rotate(10deg) translate(33vw) rotate(-10deg);		
	}
	.circle-container > *:nth-of-type(2) {
		-webkit-transform: rotate(70deg) translate(33vw) rotate(-70deg);
		-ms-transform: rotate(70deg) translate(33vw) rotate(-70deg);
		transform: rotate(70deg) translate(33vw) rotate(-70deg);		
	}
	.circle-container > *:nth-of-type(3) {
		-webkit-transform: rotate(130deg) translate(32vw) rotate(-130deg);
		-ms-transform: rotate(130deg) translate(32vw) rotate(-130deg);
		transform: rotate(130deg) translate(32vw) rotate(-130deg);		
	}
	.circle-container > *:nth-of-type(4) {
		-webkit-transform: rotate(190deg) translate(32vw) rotate(-190deg);
		-ms-transform: rotate(190deg) translate(32vw) rotate(-190deg);
		transform: rotate(190deg) translate(32vw) rotate(-190deg);		
	}
	.circle-container > *:nth-of-type(5) {
		-webkit-transform: rotate(250deg) translate(32vw) rotate(-250deg);
		-ms-transform: rotate(250deg) translate(32vw) rotate(-250deg);
		transform: rotate(250deg) translate(32vw) rotate(-250deg);		
	}
	.circle-container > *:nth-of-type(6) {
		-webkit-transform: rotate(310deg) translate(35vw) rotate(-310deg);
		-ms-transform: rotate(310deg) translate(35vw) rotate(-310deg);
		transform: rotate(310deg) translate(35vw) rotate(-310deg);		
	}
	
	.circle-container div {	
	  width: 12em;
	  height: 12em;
	}
}