html, body {
/*background:url('back.jpg');*/
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.part {
     animation-direction:alternate;
 position:absolute;
  width: 200px;
   height: 200px;

   transition: all 3s ease-in-out;
   
  
 
}
.tox{
	
    opacity: 0.4;
    top: 0px !important;
    right: 0!important;
    animation-direction: alternate;
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 20px auto;
    transform-style: preserve-3D;
    border-radius: 100%;
    transition: all 3s ease-in-out;

	
}
.box {
     animation-direction:alternate;
	position:absolute;
	width: 100%;
	height: 100%;
	margin: 20px auto;

	transform-style: preserve-3D;
	border-radius:100%;
	transition: all 3s ease-in-out ;

	

}

.c1 {
      background: rgba(85, 229, 255, 1);
	   transform-origin: 51% 50%;
	   top:7px;
	   right: 6px;
}
.c2 {
      background: rgba(173, 111, 230,1);
	   transform-origin: 49% 50%;
	   top:4px;
	   right: -3px;
}
.c3 {
      background: rgb(255, 111, 223);
	   transform-origin: 50% 51%;
	   top:-6px;
	   right: 4px;

}
.c4 {
      background:#76d856;
	   transform-origin: 49% 50%;
	   top:-3px;
	   right: -5px;

	
}
.c5 {
      background:#fff;
	   transform-origin: 50% 50%;
	   top:0;
	   right: 0;

	
}
.box:nth-child(5){
	
opacity:0.7;
  transition: all .2s ease-in-out;
}
.holder:hover  .box:nth-child(5){
	
opacity:.35 !important

}
.box:nth-child(2),.box:nth-child(3),.box:nth-child(4){
	
opacity:0.15

}
.sca{
	 
	   transition: all .2s ease-in-out;
	   	   	position:absolute;
	width: 100%;
	height: 100%;
	margin: 20px auto;
	transition: all 1s linear ;
	opacity:.2;


position:absolute;
	border-radius:100%;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes scaleme /* Safari and Chrome */ {
  from {
    -webkit-transform: scale(15);
    -o-transform: scale(15);
    transform: scale(15);
  }
  to {
    -webkit-transform: scale(15);
    -o-transform: scale(15);
    transform: scale(15);
  }
}
@keyframes scaleme {
  0% {
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -ms-transform: scale(15);
    -moz-transform: scale(15);
    -webkit-transform: scale(15);
    -o-transform: scale(15);
    transform: scale(15);
  }
}
.holder:hover  .box{

  -webkit-animation: rotating 1s linear infinite;
  -moz-animation: rotating 1s linear infinite;
  -ms-animation: rotating 1s linear infinite;
  -o-animation: rotating 1s linear infinite;
  animation: rotating 1s linear infinite;
  
}
.ho1{

top:0px;
right:0px;

}
.ho2{

top:0px;
left:0px;


}
.ho3{

bottom:0px;
right:0px;


}
.ho4{

bottom:0px;
left:0px;


}
.holder{
       width: 50%;
    height: 50%;
    position: absolute;

	     animation-direction:alternate;
   transition: all 3s ease-in-out;
   

}
.parag p{
	
    text-align: right;
    direction: rtl;
    padding: 15px;
    transition: all .2s ease-in-out;
    text-align: right;
    font-family: 'b yekan';
    font-size: 13px;
    color: #929292;
    text-decoration: none;
		
		
	}
.holder:hover  .parag{
	 transition: all .2s ease-in-out;
	opacity:1;
}
.part:hover .parag{
	 transition: all .2s ease-in-out;
	opacity:1;
}

.parag {
	    border-radius: 100px;
		border: 1px solid #eee;
    transition: all .2s ease-in-out;
    opacity: 0;
    margin-top: 169px;
    width: 186px;
	    height: 110px;

    /* width: 396px; */
    text-align: right;
   
    
    position: absolute;
    /* opacity: 1 !important; */
    /* border-radius: 5px; */
    z-index: -200;
}
.ho1 .parag{
	 background: #fff;
	    top: -104px;
         padding-left: 62px;
    padding-right: 17px;
    right: -200px;
}
.ho2 .parag{
	 background: #fff;
	    top: -104px;
  padding-right: 62px;
    padding-left: 17px;
    left: -200px;
}

.ho3 .parag{
	 background: #fff;
	    top: -104px;
     padding-left: 62px;
    padding-right: 17px;
    right: -200px;
}
.ho4 .parag{
	 background: #fff;
	    top: -104px;
       padding-right: 62px;
    padding-left: 17px;
    left: -200px;
	
}
.parag  a{
	 transition: all .2s ease-in-out;
	    text-align: right;
    font-family: tahoma;
	font-size:11px;
    color:#bdbdbd;
    text-decoration: none;
		padding-right:3px;

}
.parag li{
	 transition: all .2s ease-in-out;
	 
}
.parag a:hover{
	 transition: all .3s ease-in-out;
	color:#000;
	padding-right:10px;
	}
/*.part:hover .sca{
width:1500px;
height:1500px;
	transition: all 1s ease-in-out ;
	top:-750px;
	right:-750px;
	 z-index: 200;
	 opacity:.6;
	
	  
	
	
}
.part:hover .part{
	
	   z-index: 253;
	
	
}

.part:hover .text{
	
	   z-index: 300;
	
	
}
*/

.p1{
	    left: 10%;
    bottom: 10%;
	
}
.p2{
        right: 10%;
    bottom: 10%;

	
}

.p3{
	    left: 10%;
    top: 10%;
}

.p4{
	    right: 10%;
    top: 10%;
}
	

.logo{
	
    background: url(logo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 45%;
    right: 42%;
    height: 16%;
    width: 16%;
    margin: auto;
	 
}
.text{
    text-align: center;
    margin-top: 92px;
    z-index: 9999;
    position: absolute;
    width: 100px;
    left: 49px;
	
}
.text a{
	
    font-family: 'b yekan';
    color: #fff;
    font-size: 22px;
    text-decoration: none;
    text-shadow: 1px 1px 1px #7a89de;
	
}
@media (max-width:768px){
    body{
        position:relative;
        height:50%;
        
    }

}