.circle-container {
	 background: url('../images/globe_umva.png') center center no-repeat;
	 background-size: 80%;
	 position: relative;
	 width: 50rem;
	 height:60rem;
	 border-radius: 50%;
	 padding: 0;
	 list-style: none;
	 margin: 5em auto 0;
	 border: solid 5px transparent;
}
 .circle-container > * {
	 display: block;
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 margin: -2.5rem;
	 width: 5rem;
	 height: 5rem;
}
 .circle-container > *:nth-of-type(1) {
	 transform: rotate(0deg) translate(24.5rem) rotate(0deg);
}
 .circle-container > *:nth-of-type(2) {
	 transform: rotate(36deg) translate(24.5rem) rotate(-36deg);
}
 .circle-container > *:nth-of-type(3) {
	 transform: rotate(72deg) translate(24.5rem) rotate(-72deg);
}
 .circle-container > *:nth-of-type(4) {
	 transform: rotate(108deg) translate(24.5rem) rotate(-108deg);
}
 .circle-container > *:nth-of-type(5) {
	 transform: rotate(144deg) translate(25.5rem) rotate(-144deg);
}
 .circle-container > *:nth-of-type(6) {
	 transform: rotate(180deg) translate(26.5rem) rotate(-180deg);
}
 .circle-container > *:nth-of-type(7) {
	 transform: rotate(216deg) translate(26.5rem) rotate(-216deg);
}
 .circle-container > *:nth-of-type(8) {
	 transform: rotate(252deg) translate(26.5rem) rotate(-252deg);
}
 .circle-container > *:nth-of-type(9) {
	 transform: rotate(288deg) translate(26.5rem) rotate(-288deg);
}
 .circle-container > *:nth-of-type(10) {
	 transform: rotate(324deg) translate(26.5rem) rotate(-324deg);
}
 .circle-container img {
	 display: block;
	 max-width: 100%;
	 border-radius: 50%;
	 filter: grayscale(100%);
	 border: solid 5px tomato;
	 transition: 0.15s;
}
 .circle-container img:hover, .circle-container img:active {
	 filter: grayscale(0);
}
 .circle-container span {
	 display: flex;
	 width: 5em;
	 height: 5em;
	 border-radius: 50%;
	 filter: brightness(0.2) invert(1); 
	 border: solid 5px transparent;
	 justify-content: center;
	 align-items: center;
	 transition: 0.15s;
}
 .circle-container span i {
	 color: #fff;
	 font-size: 2.5rem;
}
 .circle-container span:hover, .circle-container span:active {
	 filter: grayscale(0);
}
@media (max-width: 767px) {
 .circle-container {
	
	 width: 25rem ;
	 height:50rem ;
 }
	 .circle-container > *:nth-of-type(1) {
	 transform: rotate(0deg) translate(12.5rem) rotate(0deg);
}
 .circle-container > *:nth-of-type(2) {
	 transform: rotate(36deg) translate(12.5rem) rotate(-36deg);
}
 .circle-container > *:nth-of-type(3) {
	 transform: rotate(72deg) translate(12.5rem) rotate(-72deg);
}
 .circle-container > *:nth-of-type(4) {
	 transform: rotate(108deg) translate(13.5rem) rotate(-108deg);
}
 .circle-container > *:nth-of-type(5) {
	 transform: rotate(144deg) translate(14.5rem) rotate(-144deg);
}
 .circle-container > *:nth-of-type(6) {
	 transform: rotate(180deg) translate(15.5rem) rotate(-180deg);
}
 .circle-container > *:nth-of-type(7) {
	 transform: rotate(216deg) translate(15.5rem) rotate(-216deg);
}
 .circle-container > *:nth-of-type(8) {
	 transform: rotate(252deg) translate(15.5rem) rotate(-252deg);
}
 .circle-container > *:nth-of-type(9) {
	 transform: rotate(288deg) translate(14.5rem) rotate(-288deg);
}
 .circle-container > *:nth-of-type(10) {
	 transform: rotate(324deg) translate(14.5rem) rotate(-324deg) ;
}


}


}