/* 
* Version: 1.6
* Default Color 	  : #72c02c;
* Default Hover Color : #5fb611;
*/

/*If you are using default Unify color (green - #72c02c), you do not need to link (use) default.css*/


/*moving circle in header*/


#moving {
  display: block;
  position: absolute;
  top: calc(50% - 10em);
  left: calc(50% - 10em);
width: 3em;
height: 56em;
}

span.spin {
  -webkit-animation: spin 10s linear infinite;
          animation: spin 10s linear infinite;
}

span.spin-reverse {
  -webkit-animation: spin 30s linear infinite;
          animation: spin 30s linear infinite;
}

span.pulse {
  -webkit-animation: spin-pulse 20s linear infinite;
          animation: spin-pulse 20s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateZ(0);
            transform: rotateZ(0);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotateZ(0);
            transform: rotateZ(0);
  }
  100% {
    -webkit-transform: rotateZ(360deg);
            transform: rotateZ(360deg);
  }
}
@-webkit-keyframes spin-pulse {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(0.9) rotateZ(180deg);
            transform: scale(0.9) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}
@keyframes spin-pulse {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(0.9) rotateZ(180deg);
            transform: scale(0.9) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}


.circle {
  border-radius: 50%;
  left: calc(50% - 6.25em);
  top: calc(50% - 12.5em);
  -webkit-transform-origin: 50% 12.5em;
          transform-origin: 50% 12.5em;
}

.squircle {
  border-radius: 25%;
}

.circle, .squircle {
  width: 12.5em;
  height: 12.5em;
  position: absolute;
  border-top: 0.1em solid rgba(255, 255, 255, 0.4);
}

.large.circle {
  box-shadow: 0 1em 2em rgba(0, 0, 0, 0.5);
}

.small {
  width: 4em;
  height: 4em;
  left: calc(50% - 2em);
  top: calc(50% - 15em);
  -webkit-transform-origin: 50% 15em;
          transform-origin: 50% 15em;
  box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 4em;
	color: #fff;
}

.one {
  background: rgba(16, 63, 236, 0.75);
  -webkit-transform: rotateZ(225deg);
          transform: rotateZ(225deg);
		 border-radius: 50% !important;
}

.two {
  background: rgba(37, 172, 162, 0.75);
  -webkit-transform: rotateZ(180deg);
          transform: rotateZ(180deg);
		 border-radius: 50% !important;
}

.three {
  background: rgba(233, 124, 32, 0.75);
  -webkit-transform: rotateZ(135deg);
          transform: rotateZ(135deg);
		 border-radius: 50% !important;
}

.four {
  background: rgba(235, 67, 35, 0.75);
  -webkit-transform: rotateZ(90deg);
          transform: rotateZ(90deg);
		 border-radius: 50% !important;
}

.five {
  background: rgba(190, 28, 65, 0.75);
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
		 border-radius: 50% !important;

}

.six {
  background: rgba(208, 57, 159, 0.75);
  -webkit-transform: rotateZ(0);
          transform: rotateZ(0);
		 border-radius: 50% !important;

}

.seven {
  background: rgba(150, 32, 198, 0.75);
  -webkit-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg);
		 border-radius: 50% !important;

}

.eight {
  background: rgba(95, 33, 203, 0.75);
  -webkit-transform: rotateZ(-90deg);
          transform: rotateZ(-90deg);
		 border-radius: 50% !important;

}

.small.squircle {
  background: none;
  box-shadow: none;
}
.small.squircle::after {
  content: "";
  border-radius: 25%;
  width: 100%;
  height: 100%;
  position: absolute;
  background: red;
  -webkit-transform: rotateZ(-45deg);
          transform: rotateZ(-45deg);
  box-shadow: -0.25em 0.25em 0.5em rgba(0, 0, 0, 0.2);
}
.small.squircle.two::after {
  background: rgba(37, 172, 162, 0.75);
}
.small.squircle.four::after {
  background: rgba(235, 67, 35, 0.75);
}
.small.squircle.six::after {
  background: rgba(208, 57, 159, 0.75);
}
.small.squircle.eight::after {
  background: rgba(95, 33, 203, 0.75);
}

.large.squircle.one {
  position: absolute;
  background: rgba(30, 7, 66, 0.65);
  border: none;
left: calc(50% - 6.5em);
top: calc(52% - 7.5em);
width: 13em;
height: 12em;
  -webkit-transform: none;
          transform: none;
	 border-radius: 30px !important;
}
	  
	  
	  
	.large.squircle.two {
  position: absolute;
  background: rgba(30, 7, 66, 0.65);
  border: none;
left: calc(38% - 10.5em);
top: calc(50% - -11.5em);
width: 13em;
height: 13em;
  -webkit-transform: none;
          transform: none;
		  border-radius: 30px !important;
}
	  
  
	  
	  
.large.squircle.one {
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}

.contentmoving {
  text-align: center;
}
.contentmoving svg {
  fill: #fff;
  width: 3em;
  margin: 1.25em auto 1em;
}
.contentmoving h1 {
font-weight: lighter;
font-size: 23px;
margin: 5px auto 5px;
max-width: 7em;
color: #fff;
}

.message {
  position: absolute;
  left: 1em;
  bottom: 1em;
  right: 0;
  color: #222;
  text-align: left;
}
.message a {
  text-decoration: none;
  font-weight: bold;
  color: #999;
}


 /*Text animation*/ 
.textcontent {
  position: absolute;
  top: 20%;
  left: 17%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-25%, 256%);
  height: 160px;
	width: 520px;
  font-family: 'Lato', sans-serif;
  font-size: 42px;
  line-height: 40px;
  color: #fcf;
 }
.content__container {
  font-weight: 600;
  overflow: hidden;
  height: 40px;
  padding: 0 40px;
  color: #fff !important;
  font-size: 42px;
  line-height: 40px;
}
 
	span.appss{font-size: 50px; color: #000;}
.content__container:after, .content__container:before {
  position: absolute;
  top: 0;
  color: #16a085;
  font-size: 42px;
  line-height: 40px;
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  animation-name: opacity;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.content__container__text {
  display: inline;
  float: left;
  margin: 0;
color: #000;
line-height: 40px;

}
	.content__container__text__Apps{
		padding-left: 20%;
		color: #dc2a82;
  font-size: 42px;
  line-height: 40px;
	}
.content__container__list {
  margin-top: 0;
  padding-left: 80px;
  text-align: left;
  list-style: none;
  -webkit-animation-name: change;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
  animation-name: change;
  animation-duration: 10s;
  animation-iteration-count: infinite;
	text-transform: uppercase;
  font-size: 42px;
  line-height: 40px;
}
.content__container__list__item {
  line-height: 40px;
  margin: 0;
  color: #fff !important;

}

@-webkit-keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@-webkit-keyframes change {
  0%, 12.66%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  16.66%, 29.32% {
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }
  33.32%,45.98% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  49.98%,62.64% {
    -webkit-transform: translate3d(0, -75%, 0);
            transform: translate3d(0, -75%, 0);
  }
  66.64%,79.3% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  83.3%,95.96% {
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }
}
@keyframes opacity {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes change {
  0%, 12.66%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
  16.66%, 29.32% {
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }
  33.32%,45.98% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  49.98%,62.64% {
    -webkit-transform: translate3d(0, -75%, 0);
            transform: translate3d(0, -75%, 0);
  }
  66.64%,79.3% {
    -webkit-transform: translate3d(0, -50%, 0);
            transform: translate3d(0, -50%, 0);
  }
  83.3%,95.96% {
    -webkit-transform: translate3d(0, -25%, 0);
            transform: translate3d(0, -25%, 0);
  }
}
 

h1.impossible {	
	color: #ecf8fd !important;
font-family: 'Raleway', sans-serif;
font-size: 38px;
line-height: 50px;
font-weight: bolder;
paddin: 61px 0 0 0 !important;
position: absolute;
top: 50px !important;
right: 37px !important;

	}

h2.impossible2 {	
color: gold !important;
font-family: 'Raleway', sans-serif;
font-size: 21px;
line-height: 50px;
font-weight: bolder;
paddin: 61px 0 0 0 !important;
position: absolute;
top: 210px !important;
right: 37px !important;
border-top: 1px solid #E9DF60;
border-bottom: 1px solid #E9DF60;

	}
h3.impossible3 {	
color: #fff !important;
font-family: 'Raleway', sans-serif;
font-size: 18px;
line-height: 50px;
font-weight: bolder;
paddin: 61px 0 0 0 !important;
position: absolute;
top: 309px !important;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
text-align: left !important;
left: 10px;

	}




p.apptext {
  text-transform:capitalize;
letter-spacing: 0.2em;
display: inline-block;
 
border-width: 4px 0;
padding: 1.5em 0em;
position: absolute;
bottom: 8%;
left: 29%;
width: 20em;
margin: 0 0 0 -20em;
}
p.apptext span {
  font-size: 24px;
	font-family: "Oswald", sans-serif;
  letter-spacing: 0;
  padding: .25em 0 .325em;
  display: block;
  margin: 0 auto;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  /* Clip Background Image */
  background:url("../../img/mobileapps/animated_text_fill.png")repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  /* Animate Background Image */
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 80s linear infinite;
  /* Activate hardware acceleration for smoother animations */
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

/* Animate Background Image */
@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}





p.apptext2 {
  text-transform:capitalize;
letter-spacing: 0.2em;
display: inline-block;
 
border-width: 4px 0;
padding: 1.5em 0em;
position: absolute;
bottom: 8%;
left: 51%;
width: 26em;
margin: 0 0 0 -20em;
}
p.apptext2 span {
  font-size: 24px;
	font-family: "Oswald", sans-serif;
  letter-spacing: 0;
  padding: .25em 0 .325em;
  display: block;
  margin: 0 auto;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  /* Clip Background Image */
  background:url("../../img/mobileapps/animated_text_fill.png")repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  /* Animate Background Image */
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 80s linear infinite;
  /* Activate hardware acceleration for smoother animations */
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

/* Animate Background Image */
@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}









p.apptext3 {
  text-transform:capitalize;
letter-spacing: 0.2em;
display: inline-block;
 
border-width: 4px 0;
padding: 1.5em 0em;
position: absolute;
bottom: 8%;
left: 80%;
width: 28em;
margin: 0 0 0 -20em;
}
p.apptext3 span {
  font-size: 24px;
	font-family: "Oswald", sans-serif;
  letter-spacing: 0;
  padding: .25em 0 .325em;
  display: block;
  margin: 0 auto;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  /* Clip Background Image */
  background:url("../../img/mobileapps/animated_text_fill.png")repeat-y;
  -webkit-background-clip: text;
  background-clip: text;
  /* Animate Background Image */
  -webkit-text-fill-color: transparent;
  -webkit-animation: aitf 80s linear infinite;
  /* Activate hardware acceleration for smoother animations */
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
}

/* Animate Background Image */
@-webkit-keyframes aitf {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}











.image-hover {
  position: relative;
  display: inline-block;
  border: 1px solid #c4c4c4;
  left: 50%;
  margin-left: -210px;
  width: 150px;
  height: 150px;
  border-radius: 500px !important;
  padding: 0;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZGRkZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cccccc), color-stop(100%, #dddddd));
  background-image: -moz-linear-gradient(top, #cccccc, #dddddd);
  background-image: -webkit-linear-gradient(top, #cccccc, #dddddd);
  background-image: linear-gradient(to bottom, #cccccc, #dddddd);
  box-shadow: 0px 1px 0px 1px rgba(250, 250, 250, 0.5) inset;
}
.image-hover:hover .hover {
  width: 150px;
  height: 150px;
  top: 0;
  left: 0;
  -webkit-animation: roll-anim 0.5s ease 0s;
}
.image-hover:hover .hover hr {
  -webkit-transition: all 0.7s ease 0.3s;
  margin: 0 30px;
  opacity: 1;
  border-width: 1px;
  padding: 0;
  border: 0;
  height: 1px;
  background-color: #fff;
  border-color: #fff;
  color: #ff;
}

.img-shadow {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6) inset;
  width: 150px;
  height: 150px;
  position: absolute;
  z-index: 1000;
  border-radius: 500px !important;
}

.img-wrap {
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius: 500px;
  z-index: 100;
  height: 150px;
  width: 150px;
  overflow: hidden;
  border-radius: 500px !important;
}
	
.img-wrap i{
		
		font-size: 100px; text-align:center; color: black;margin-left:15px;
	}

.img-wrap img {
  height: 100px;
  border-radius: 500px !important;
  overflow: hidden;
	text-align: center;
	margin: 4px;
}

.hover {
  overflow: hidden;
  width: 0;
  height: 0;
  opacity: .9;
  position: absolute;
  z-index: 200;
  top: 50%;
  left: 50%;
  margin-top: 0;
  margin-left: 0;
  background-color: #ce4b4b;
  border-radius: 500px !important;
  transition: all 0.5s ease-in-out 0s;
  animation: roll-anim-end 0.5s ease 0s;
}
.hover p {
  text-align: center;
  color: #fff;
  margin-top: 45%;
}

.image-hover hr {
  margin: 0 210px;
  opacity: 0;
}

@-webkit-keyframes roll-anim {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes roll-anim-end {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
 

@media (max-width:1200px){.wwdc{
	display: none;
	}}	

@media (max-width:1200px){h2.impossible2{
	display: none;
	}}


@media (max-width:1200px){h2.impossible3{
	display: none;
	}}
 
@media (max-width:1200px){h1.impossible{
font-size: 25px !important;
	}}

@media (max-width:1200px){p.apptext{
	display: none;
	}}

@media (max-width:1200px){p.apptext2{
	display: none;
	}}

@media (max-width:1200px){p.apptext3{
	display: none;
	}}


@media (max-width:1200px){.textcontent{
	height: 72px !important;
	left: 23px;
	width: 545px;
	display: none;
	}}