@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

#menu{

  font-family: 'Indie Flower', cursive;
 
 }
 img
 {
 max-width: 100%;
 height: auto;
 display: block;
 
 
 
 }
 p{
  font-family: 'Indie Flower', cursive;
 font-size: 30px;
 
 }
 
 .lipic{
  max-width: 94%;
 
 }
 
 header{
  max-width: 100%;
  height: auto;
  display: block;
  background-color: skyblue;
 
 }
input {
position: fixed;
opacity: 0;
}
label {
position: absolute;
margin: 0;
padding: 0;
border: none;
outline: none;
background: none;
cursor: pointer;
}
label::before {
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(10, 38, 57, .75);
content: '';
opacity: 0;
pointer-events: none;
transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
label .burger {
position: fixed;
top: 1em;
left: 1em;
z-index: 3;
width: 2em;
height: 2em;
margin: 0;
padding: 0;
transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
label .burger::before, label .burger .bar, label .burger::after {
position: absolute;
left: 0;
display: block;
width: 100%;
height: 12%;
background: white;
content: '';
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
label .burger .bar {
top: 44%;
}
label .burger::before {
top: 0;
transform-origin: top left;
}
label .burger::after {
bottom: 0;
transform-origin: bottom left;
}
input:focus + label .burger, label:hover .burger {
opacity: 0.75;
}
nav {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 2;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
transform: translate3d(0, 0, 0);
/* material acceleration */
transform: translateX(-100%);
will-change: transform;
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
nav::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: -1;
width: 25em;
background: #3498db;
content: '';
transform: skewX(15deg) translateX(-100%);
transform-origin: bottom left;
will-change: transform;
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
@media (min-width: 40em) {
nav::before {
  width: 40em;
}
}
nav a {
margin: 0.5em 0;
padding: 0.2em 2em;
font-size: 1.5em;
color: white;
text-decoration: none;
font-weight: 500;
transform: translateX(-100%);
z-index: inherit;
}
nav a:nth-child(1) {
transition-delay: 0s, 100ms;
}
nav a:nth-child(2) {
transition-delay: 0s, 150ms;
}
nav a:nth-child(3) {
transition-delay: 0s, 200ms;
}
nav a:nth-child(4) {
transition-delay: 0s, 250ms;
}
nav a:nth-child(5) {
transition-delay: 0s, 300ms;
}
nav a:nth-child(6) {
transition-delay: 0s, 350ms;
}
nav a:hover, nav a:focus {
color: black;
}
main {
overflow: hidden;
z-index:-1;
}
main .content {

z-index: -1000;
}
[id="navcheck"]:checked + label::before {
opacity: 1;
pointer-events: auto;
}
[id="navcheck"]:checked + label .burger::before, [id="navcheck"]:checked + label .burger::after {
width: 141.42%;
}
[id="navcheck"]:checked + label .burger::before {
transform: rotate(45deg) translateY(-50%);
}
[id="navcheck"]:checked + label .burger::after {
transform: rotate(-45deg) translateY(50%);
}
[id="navcheck"]:checked + label .burger .bar {
transform: scale(0.1);
}
[id="navcheck"]:checked ~ nav {
transform: translateX(0);
}
[id="navcheck"]:checked ~ nav::before {
transform: skewX(15deg) translateX(0);
}
[id="navcheck"]:checked ~ nav a {
transform: translateX(0);
}
[id="navcheck"]:checked ~ main .content {
transform: translateX(3em);
transform-origin: left center;
filter: blur(2px);
}
/* helper */
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/* misc */
body {
overflow-x: hidden;
background: #3498db;;
color: white;
font: 1em/1.4 "lato";
}
main {
background: #3498db;
padding: 5% 0;
z-index: -2;
}
article {
width: 80%;
margin: 0 auto;
font-size: 1.3em;
z-index: -1;
}
@media (min-width: 60em) {
article {
  width: 50%;
  z-index:-1;
}
}
h1 {
font: 2.5em/1.4 "roboto condensed";
font-weight: 700;
}

/* line 178, ../../../Desktop/EasiSoftwareSolutionsLLC/css/style.scss */
h1.size {
font: 2.5em/1.4 ;
font-family: 'Indie Flower', cursive;
font-weight: 700;
text-align: center;
font-style: italic;

}

header {
align-items: center;
display: flex;
font-size: 18px;
height: 100vh;
justify-content: center;
overflow: hidden;
position: relative;
text-align: center;
transform-style: preserve-3d;
perspective: 100px;
max-width: 100%;
height: auto;

}

header:before {
animation: fade-slide-down 2s .5s cubic-bezier(0, 0.5, 0, 1) forwards;
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.8)),
           url(https://cssanimation.rocks/levelup/public/images/background.jpg) no-repeat bottom;
background-size: cover;
content: "";
opacity: 0;
position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
z-index: -1;
width: 100%;
}


header:after {
animation: rotate-up .5s .5s cubic-bezier(0, 0.5, 0, 1) forwards;
background: #F9FCFF;
content: "";

left: -5%;
position: fixed;
 right: -5%;
 top: 100%;
transform-origin: 0 0;
z-index: 0;
width: 100%;
}

.header-title, .header-subtitle {
color: #fff;
font-family: 'Indie Flower', cursive;
}

.header-subtitle {
text-transform: uppercase;
margin-bottom: 5rem;
}

.header-button {
transform: translateZ(.1px);
position: relative;
z-index: 10;
}

.animate-pop-in {
animation: pop-in .6s cubic-bezier(0, 0.9, 0.3, 1.2) forwards;
opacity: 0;
}

.rocky-dashed {
animation-delay: .6s;
}

.header-title {
animation-delay: .8s;
}

.header-subtitle {
animation-delay: 1s;
}

.header-button {
animation-delay: 1.1s;
}


/* Animations */

@keyframes fade-slide-down {
0% {
 opacity: 0;
 transform: translateY(-4rem);
}
100% {
 opacity: 1;
 transform: none;
}
}

@keyframes pop-in {
0% {
 opacity: 0;
 transform: translateY(-4rem) scale(.8);
}
100% {
 opacity: 1;
 transform: none;
}
}

@keyframes rotate-up {
100% {
 transform: rotateZ(-4deg);
}
}
footer{


  background: lightskyblue;
}
#move{
max-height: 100%;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;z-index: -1000;


}
#move1{


    max-height: 100%;
    max-width: 100%;

}
@-webkit-keyframes spincube {
from,to  { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
16%      { -webkit-transform: rotateY(-90deg);                           }
33%      { -webkit-transform: rotateY(-90deg) rotateZ(90deg);            }
50%      { -webkit-transform: rotateY(-180deg) rotateZ(90deg);           }
66%      { -webkit-transform: rotateY(-270deg) rotateX(90deg);           }
83%      { -webkit-transform: rotateX(90deg);                            }
}@keyframes spincube {
from,to {
 -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
16% {
 -moz-transform: rotateY(-90deg);
 -ms-transform: rotateY(-90deg);
 transform: rotateY(-90deg);
}
33% {
 -moz-transform: rotateY(-90deg) rotateZ(90deg);
 -ms-transform: rotateY(-90deg) rotateZ(90deg);
 transform: rotateY(-90deg) rotateZ(90deg);
}
50% {
 -moz-transform: rotateY(-180deg) rotateZ(90deg);
 -ms-transform: rotateY(-180deg) rotateZ(90deg);
 transform: rotateY(-180deg) rotateZ(90deg);
}
66% {
 -moz-transform: rotateY(-270deg) rotateX(90deg);
 -ms-transform: rotateY(-270deg) rotateX(90deg);
 transform: rotateY(-270deg) rotateX(90deg);
}
83% {
 -moz-transform: rotateX(90deg);
 -ms-transform: rotateX(90deg);
 transform: rotateX(90deg);
}
p{
 font-size:10px;
}
}.cubespinner
{-webkit-animation-name:spincube;-webkit-animation-timing-function:ease-in-out;
-webkit-animation-iteration-count:infinite;
-webkit-animation-duration:12s;
animation-name:spincube;animation-timing-function:ease-in-out;
animation-iteration-count:infinite;animation-duration:12s;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;
-webkit-transform-origin:60px 60px 0;-moz-transform-origin:60px 60px 0;-ms-transform-origin:60px 60px 0;transform-origin:60px 60px 0}
.cubespinner div{  margin-top:10px;;position:absolute;max-width:220px;max-height:220px;border:1px solid #ccc;background:rgba(255,255,255,.8);box-shadow:inset 0 0 20px rgba(0,0,0,.2);text-align:center;font-size:100px}.cubespinner .face1{-webkit-transform:translateZ(60px);-moz-transform:translateZ(60px);-ms-transform:translateZ(60px);transform:translateZ(60px)}.cubespinner .face2{-webkit-transform:rotateY(90deg) translateZ(60px);-moz-transform:rotateY(90deg) translateZ(60px);-ms-transform:rotateY(90deg) translateZ(60px);transform:rotateY(90deg) translateZ(60px)}.cubespinner .face3{-webkit-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);-moz-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);-ms-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);transform:rotateY(90deg) rotateX(90deg) translateZ(60px)}.cubespinner .face4{-webkit-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);-moz-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);-ms-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);transform:rotateY(180deg) rotateZ(90deg) translateZ(60px)}.cubespinner .face5{-webkit-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);-moz-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);-ms-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px)}.cubespinner .face6{-webkit-transform:rotateX(-90deg) translateZ(60px);-moz-transform:rotateX(-90deg) translateZ(60px);-ms-transform:rotateX(-90deg) translateZ(60px);transform:rotateX(-90deg) translateZ(60px)}

.cubespinner1
{-webkit-animation-name:spincube;-webkit-animation-timing-function:ease-in-out;
 -webkit-animation-iteration-count:infinite;
 -webkit-animation-duration:12s;
 animation-name:spincube;animation-timing-function:ease-in-out;
 animation-iteration-count:infinite;animation-duration:12s;
 -webkit-transform-style:preserve-3d;
 -moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;
 -webkit-transform-origin:60px 60px 0;-moz-transform-origin:60px 60px 0;-ms-transform-origin:60px 60px 0;transform-origin:60px 60px 0}
 .cubespinner1 div{  margin-top:40px;;position:absolute;max-width:220px;max-height:220px;border:1px solid #ccc;background:rgba(255,255,255,.8);box-shadow:inset 0 0 20px rgba(0,0,0,.2);text-align:center;font-size:100px}.cubespinner1 .face1{-webkit-transform:translateZ(60px);-moz-transform:translateZ(60px);-ms-transform:translateZ(60px);transform:translateZ(60px)}.cubespinner1 .face2{-webkit-transform:rotateY(90deg) translateZ(60px);-moz-transform:rotateY(90deg) translateZ(60px);-ms-transform:rotateY(90deg) translateZ(60px);transform:rotateY(90deg) translateZ(60px)}.cubespinner1 .face3{-webkit-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);-moz-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);-ms-transform:rotateY(90deg) rotateX(90deg) translateZ(60px);transform:rotateY(90deg) rotateX(90deg) translateZ(60px)}.cubespinner1 .face4{-webkit-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);-moz-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);-ms-transform:rotateY(180deg) rotateZ(90deg) translateZ(60px);transform:rotateY(180deg) rotateZ(90deg) translateZ(60px)}.cubespinner1 .face5{-webkit-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);-moz-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);-ms-transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px);transform:rotateY(-90deg) rotateZ(90deg) translateZ(60px)}.cubespinner1 .face6{-webkit-transform:rotateX(-90deg) translateZ(60px);-moz-transform:rotateX(-90deg) translateZ(60px);-ms-transform:rotateX(-90deg) translateZ(60px);transform:rotateX(-90deg) translateZ(60px)}

/* The footer is fixed to the bottom of the page */
 
footer{
	position: relative;
	bottom: 0;
}
 
@media (max-height:800px){
	footer { position: static; }
	header { padding-top:40px; }
}
 
 
.footer-distributed{
	background-color: #2c292f;
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;
	padding: 50px 50px 60px 50px;
	margin-top: 80px;
}
 
.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
	display: inline-block;
	vertical-align: top;
}
 
/* Footer left */
 
.footer-distributed .footer-left{
	width: 30%;
}
 
.footer-distributed h3{
	color:  #ffffff;
  font-family: 'Indie Flower', cursive;
	margin: 0;
}

.footer-distributed h5{
	color:  #ffffff;
  font-family: 'Indie Flower', cursive;
  margin: 0;
  font-size: 25px;
}
 
/* The company logo */
 
.footer-distributed .footer-left img{
	width: 20%;
}
 
.footer-distributed h3 span{
	color: white;
}
 
/* Footer links */
 
.footer-distributed .footer-links{
	color:  #ffffff;
	margin: 20px 0 12px;
}
 
.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
	color:  inherit;
}
 
.footer-distributed .footer-company-name{
	color:  white;
	font-size: 25px;
	font-weight: normal;
	margin: 0;
}
 
/* Footer Center */
 
.footer-distributed .footer-center{
	width: 35%;
}
 
 
.footer-distributed .footer-center i{
	background-color:  #33383b;
	color: #ffffff;
	font-size: 25px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-align: center;
	line-height: 42px;
	margin: 10px 15px;
	vertical-align: middle;
}
 
.footer-distributed .footer-center i.fa-envelope{
	font-size: 17px;
	line-height: 38px;
}
 
.footer-distributed .footer-center p{
	display: inline-block;
	color: #ffffff;
	vertical-align: middle;
	margin:0;
}
 
.footer-distributed .footer-center p span{
	display:block;
	font-weight: normal;
	font-size:14px;
	line-height:2;
}
 
.footer-distributed .footer-center p a{
	color: darkblue;
  text-decoration: none;
  
}
.footer-distributed .footer-center img{

  max-width:100%;
  max-height: 100%;
max-width: 100%;
display: flex;
align-items: center;
justify-content: center;z-index: -1000;
}
 
 
/* Footer Right */
 
.footer-distributed .footer-right{
	width: 30%;
}
 
.footer-distributed .footer-company-about{
	line-height: 25px;
	color: white;
	font-size: 20px;
	font-weight: normal;
	margin: 0;
}
 
.footer-distributed .footer-company-about span{
	display: block;
	color:  #ffffff;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}
 
.footer-distributed .footer-icons{
	margin-top: 25px;
}
 
.footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	background-color:  #33383b;
	border-radius: 2px;
 
	font-size: 20px;
	color: #ffffff;
	text-align: center;
	line-height: 35px;
 
	margin-right: 3px;
	margin-bottom: 5px;
}
 
/* Here is the code for Responsive Footer */
/* You can remove below code if you don't want Footer to be responsive */
 
 
@media (max-width: 880px) {
 
	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}
 
	.footer-distributed .footer-center i{
		margin-left: 0;
	}
 
}

	/* WebKit and Opera browsers */
	@-webkit-keyframes spinner {
		from { -webkit-transform: rotateY(0deg);    }
		to   { -webkit-transform: rotateY(-360deg); }
	  }
	
	  /* all other browsers */
	  @keyframes spinner {
		from {
		  -moz-transform: rotateY(0deg);
		  -ms-transform: rotateY(0deg);
		  transform: rotateY(0deg);
		}
		to {
		  -moz-transform: rotateY(-360deg);
		  -ms-transform: rotateY(-360deg);
		  transform: rotateY(-360deg);
		}
	  }

	 
	


	  #spinner {
		-webkit-animation-name: spinner;
		-webkit-animation-timing-function: linear;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-duration: 6s;
	

		
		animation-name: spinner;
		animation-timing-function: linear;
		animation-iteration-count: infinite;
		animation-duration: 6s;
	
		-webkit-transform-style: preserve-3d;
		-moz-transform-style: preserve-3d;
		-ms-transform-style: preserve-3d;
		transform-style: preserve-3d;
	  }