/*halo*/
.halo1{
	visibility: hidden;
	opacity: 0;
	position: absolute;
		top: 50%;
        left: 50%;
  -ms-transform: translate(-50%, -50%) skewX(25deg);
  transform: translate(-50%, -50%) skewX(25deg);
  	width: 45%;
  	height: 45%;
	  border-radius: 50%;
      border-style:solid;
      border-color: #f2ebc0;
      background-color: #f2ebc0;
      border-width: 0.2vw;

      transition-property: visibility, opacity;
  		transition-duration: 0.3s;
  		transition-timing-function: cubic-bezier(.3,1.5,.34,1.05);
}
.halo1rot{
	  -ms-transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(35deg) skewX(25deg);
  transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(35deg) skewX(25deg);
}

.halo1rot2{
	  -ms-transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(35deg) rotate(90deg) skewX(25deg);
  transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(90deg) rotate(35deg) skewX(25deg);
}
.img:hover~.halo1,
nav>a:focus>.halo1{
	visibility: visible;
	opacity: 0.9;
}

.halo3{
	visibility: hidden;
	opacity: 0;
	position: absolute;
		top: 50%;
        left: 50%;
  -ms-transform: translate(-50%, -50%) skewX(25deg);
  transform: translate(-50%, -50%) skewX(25deg);
  	width: 53%;
  	height: 53%;
	  border-radius: 50%;
      border-style:solid;
      border-color: #f2ebc0;
      border-width: 0.2vw;

      transition-property: visibility, opacity;
  		transition-duration: 0.3s;
  		transition-timing-function: cubic-bezier(.3,1.5,.34,1.05);
}

.halo3rot{
	  -ms-transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(35deg) skewX(25deg);
  transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(35deg) skewX(25deg);
}
.halo3rot2{
	  -ms-transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(90deg)rotate(35deg) skewX(25deg);
  transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(90deg) rotate(35deg) skewX(25deg);
}

.img:hover~.halo3,
nav>a:focus>.halo3{
	visibility: visible;
	opacity: 0.9;
}


.halo2{
	visibility: hidden;
	opacity: 0;
	position: absolute;
		top: 50%;
        left: 50%;
  -ms-transform: translate(-50%, -50%) skewX(25deg);
  transform: translate(-50%, -50%) skewX(25deg);
  	width: 65%;
  	height: 65%;
	  border-radius: 50%;
      border-style:dashed;
      border-color: #f2ebc0;
      border-width: 0.4vw;

      animation-name:halo;
      animation-duration: 5s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;

            transition-property: visibility, opacity;
  		transition-duration: 0.3s;
  		transition-timing-function: cubic-bezier(.3,1.5,.34,1.05);;
}

.halo2rot{
	  -ms-transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(35deg) skewX(25deg);
  transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(35deg) skewX(25deg);
  animation-name:halo2rot;
}

.halo2rot2{
	  -ms-transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(90deg) rotate(35deg) skewX(25deg);
  transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1)  rotate(90deg) rotate(35deg) skewX(25deg);
  animation-name:halo2rot2;
}

.img:hover~.halo2,
nav>a:focus>.halo2{
	visibility: visible;
	opacity: 0.9;
}

@keyframes halo {
	from{transform: translate(-50%, -50%) skewX(25deg) rotate(0);}
	to{transform: translate(-50%, -50%) skewX(25deg) rotate(356deg);}
}


@keyframes halo2rot {
	from{transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(35deg) skewX(25deg) rotate(0);}
	to{transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(35deg) skewX(25deg) rotate(356deg);}
}

@keyframes halo2rot2 {
	from{transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(90deg) rotate(35deg) skewX(25deg) rotate(0);}
	to{transform: translate(-50%, -50%) rotate(-35deg) scaleX(-1) rotate(90deg) rotate(35deg) skewX(25deg) rotate(356deg);}
}
/*halo end*/