@import url(https://fonts.googleapis.com/css?family=Raleway:300);
html {
  height: 100%;
}



.badge , .badge2 ,.badge3{
  display: block;
  position: relative;
  width: 12rem;
  height: 12rem;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  box-shadow: 0px 0.3rem 0.5rem rgba(202, 202, 202, 0.75);
  float:left
}

.badge  { background: url(icon_belive.png) no-repeat 100% 100%;
  background-size: 100%;}

.badge2  { background: url(icon_hope.png) no-repeat 100% 100%;
  background-size: 100%;}
  
.badge3  { background: url(icon_love.png) no-repeat 100% 100%;
  background-size: 100%;}



.badge:hover, .badge2:hover, .badge3:hover {
  box-shadow: 0px 0.5rem 2rem rgba(0, 0, 0, 0.75);
  background-position: 0% 50%;
}



.badge:hover .text , .badge2:hover .text , .badge3:hover .text {
  transform: rotate(-45deg) translate(0px) rotate(-315deg);
  background: rgba(102, 51, 153, 0.5);
  width: 13rem;
  letter-spacing: 1rem;
  line-height: 13rem;
  height: 13rem;
  margin-top: -6.5rem;
  margin-left: -6.5rem;
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out;
}
.badge .text , .badge2 .text , .badge3 .text {
  display: block;
  position: absolute;
  width: 10rem;
  height: 10rem;
  line-height: 10rem;
  left: 50%;
  top: 50%;
  margin-top: -7rem;
  margin-left: -8rem;
  text-align: center;
  color: #ff8a17;
  border-radius: 50%;
  transform: rotate(-180deg) translate(-10rem) rotate(180deg);
  transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
  font-size:60px;

filter: drop-shadow(0px 2px 3px #c8c8c8); font-weight:bold
}


.badge:hover .text { background: #ffcf17ab;}
.badge2:hover .text{ background: #68d3ff8f;}
.badge3:hover .text { background: #ffb1c49e;}


.badge2 .text { color:#0a3da3}
.badge3 .text { color:#ff4470}



.intro { position: absolute;font-weight: bold;font-size: 30px;top: 50%;right: 0%;transform: translate(-0%, 43%);}



.badge .strokeText {color: #ff8e00}
.badge2 .strokeText {color:#0a3da3; -webkit-text-stroke: 1px #0a3da3;}
.badge3 .strokeText {color:#ff4470; -webkit-text-stroke: 1px #ff4470;}


.badge_icon, .badge_icon_inside { float:left; width:100%; margin:60px 0}
.badge_icon  ul, .badge_icon_inside ul { list-style: none;margin: 0;padding: 0;}
.badge_icon  ul li ,  .badge_icon_inside ul li{ float:left; width: calc(33.3% - 2%); position:relative; margin:0 1%}
.badge_icon_inside ul li .badge .text, .badge2 .text, .badge3 .text { font-size:50px}
.badge_icon_inside .intro { font-size: 20px;transform: translate(10%, 33%);}

@media screen and (max-width: 1200px) {
.badge, .badge2, .badge3 { width:10rem; height:10rem}
.badge:hover .text, .badge2:hover .text, .badge3:hover .text { width: 11rem;letter-spacing: 0rem;line-height: 11rem;height: 11rem;margin-top: -5.5rem;margin-left: -5.5rem;}
.badge .text, .badge2 .text, .badge3 .text { font-size:50px}
.intro { transform: translate(0%, 43%);}
.badge_icon_inside .intro { font-size: 20px !important;transform: translate(10%, 30%);}
	}
@media screen and (max-width: 1130px) {
.intro { transform: translate(10%, 43%);}
	}
	
@media screen and (max-width: 1080px) {
.badge .text, .badge2 .text, .badge3 .text { font-size:50px}
.intro { font-size:17px !important; transform: translate(11%, -37%);}

.badge_icon_inside ul li { clear:both ; width: 40%;margin: 4% 30%;}

	}
@media screen and (max-width: 960px) {
.badge_icon ul li { width: 35%;margin: 1% 32.5%;clear: both;}
		}
@media screen and (max-width: 650px) {
.badge_icon ul li { width: 50%;margin: 4% 25%;clear: both;}

.badge .text, .badge2 .text, .badge3 .text { font-size:50px}
.intro { transform: translate(28%, 33%);}
.badge:hover .text, .badge2:hover .text, .badge3:hover .text { width: 16rem;
letter-spacing: 0rem;
line-height: 16rem;
height: 16rem;
margin-top: -8rem;
margin-left: -8rem;}



.badge_icon_inside .badge, .badge2, .badge3 { width:10rem; height:10rem}
.badge_icon_inside .badge:hover .text, .badge2:hover .text, .badge3:hover .text  {width: 11rem;line-height: 11rem;
height: 11rem;margin-top: -5.5rem;
margin-left: -5.5rem; }
.badge_icon_inside .intro { transform: translate(0%, 30%);}
.badge_icon_inside ul li { width:60%;  margin:4% 20%}
			}
@media screen and (max-width: 490px) {
.badge_icon ul li { width: 80%;margin: 1% 10%;}
.intro { transform: translate(8%, 33%);}
.badge_icon_inside ul li { width:90%; margin:4% 5%}	
.badge_icon_inside .intro { transform: translate(10%, 30%);}
				}