.home-user {
	position:absolute;
	left:30px;
	bottom:5px;
	color:#fff;
	font-size:12px
}
.business-user {
	position:absolute;
	left:50px;
	bottom:90px;
	color:#fff;
	font-size:12px
}
.enterprise-user {
	position:absolute;
	right:50px;
	bottom:100px;
	color:#fff;
	font-size:12px
}
.academic-user {
	position:absolute;
	right:30px;
	bottom:10px;
	color:#fff;
	font-size:12px
}
.cloud-storage-panel {
	width: 100%;
	background: #fff;
	border-radius: 3px 3px 3px 3px;
	margin-top: 10px;
	display: block;
	padding-top: 10px;
	color: #666e70;
}
.cloud-storage-panel .get-free {
	width: 340px;
	border-radius: 3px;
	padding: 12px 10px 12px 20px;
	margin: 0 0 0 -7px;
	font-size: 24px;
	color: #fff;
	text-shadow: 0px 1px 1px #115ba3;
	border: solid 1px #248ffb;
	font-weight: 600;
	background: #2d91f6; /* Old browsers */
	background: -moz-linear-gradient(top, #2d91f6 0%, #2d88e2 44%, #297ed3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2d91f6), color-stop(44%, #2d88e2), color-stop(100%, #297ed3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #2d91f6 0%, #2d88e2 44%, #297ed3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #2d91f6 0%, #2d88e2 44%, #297ed3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #2d91f6 0%, #2d88e2 44%, #297ed3 100%); /* IE10+ */
	background: linear-gradient(to bottom, #2d91f6 0%, #2d88e2 44%, #297ed3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d91f6', endColorstr='#297ed3', GradientType=0 );
}
.cloud-storage-panel .form-panel {
	padding: 15px 20px;
	z-index: 500;
}
.cloud-storage-panel .form-panel .form-control {
	padding: 8px 11px 9px 37px;
}
.form-panel .form-input {
	position: relative;
	font-size: 14px;
	line-height: 38px;
	color: #adadad;
}
.form-panel .form-input .input-icon {
	position: absolute;
	top: 0;
	left: 10px;
	z-index: 1;
}
.form-panel .form-input .input-icon-mail {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 1;
}
.cloud-endpointvault {
	background: url(https://www.systoolsgroup.com/imgs/cloud-endpoint.png) no-repeat;
	width: 420px;
	margin: -20px 0 0 -43px;
	background-size: 100%;
	height: 70px;
	padding: 25px 0px;
	color: #666e70;
}
 @media (max-width: 1199px) {
.cloud-storage-panel {
 border-radius: 3px 3px 40px 40px;
}
.cloud-storage-panel .get-free {
 width: 306px;
 padding: 12px 10px 12px 20px;
 margin: 0 0 0 -7px;
 font-size: 20px;
}
.cloud-endpointvault {
 width: 360px;
 margin: -5px 0 0px -30px;
 height: 42px;
 padding: 10px 30px;
 font-size: 12px
}
}
 @media (max-width: 992px) {
.cloud-storage-panel {
 border-radius: 3px 3px 40px 40px;
}
.cloud-storage-panel .get-free {
 width: 246px;
 margin: 0 0 0 -7px;
 font-size: 18px;
}
.cloud-endpointvault {
 width: 246px;
 margin: -5px 0 0px -10px;
 height: 42px;
 padding: 5px 30px;
 font-size: 12px;
 line-height: 14px;
}
}
 @media (max-width: 767px) {
.cloud-storage-panel .get-free {
 width: 615px;
 margin: 0 0 0 -7px;
 font-size: 30px;
}
.cloud-endpointvault {
 width: 615px;
 margin: -50px 0 0px -10px;
 height: 90px;
 padding: 60px 30px 45px 30px;
 font-size: 18px;
 line-height: 14px;
}
}
 @media (max-width: 639px) {
.cloud-storage-panel .get-free {
 width: 445px;
 padding: 15px 10px 15px 20px;
 margin: 0 0 0 -7px;
 font-size: 30px;
}
.cloud-endpointvault {
 width: 455px;
 margin: -20px 0 0px -10px;
 height: 70px;
 padding: 30px 30px 0px 30px;
 font-size: 16px;
 line-height: 18px;
}
}
 @media (max-width: 479px) {
.cloud-storage-panel .get-free {
 width: 334px;
 font-size: 24px;
}
.cloud-endpointvault {
 width: 334px;
 margin: -10px 0 0px -10px;
 height: 56px;
 padding: 10px 30px 0px 30px;
 font-size: 14px;
 line-height: 16px;
}
}
 @media (max-width: 359px) {
.cloud-storage-panel .get-free {
 width: 274px;
 padding: 8px 10px 8px 20px;
 margin: 0 0 0 -7px;
 font-size: 20px;
}
.cloud-endpointvault {
 width: 274px;
 margin: -10px 0 0px -10px;
 height: 45px;
 padding: 4px 30px 0px 30px;
 font-size: 14px;
 line-height: 16px;
}
}
.endpointvault-arrow-box {
	position: relative;
}
.endpointvault-box {
	position: relative;
}
.box-border-right {
	width: 1px;
	background: #dde1e1;
	height: 70%;
	position: absolute;
	top: 15%;
}
.customer-stories-caption {
	color: #fff;
	padding: 30px 30px 22px 60px;
	background-color: #7ab700;
	background-color: rgba(122, 183, 0, 0.95);
	margin: 6% 0 7% 0;
}
.customNavigation {
	text-align: center;
	position: relative;
}
.customNavigation a {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	cursor: pointer;
}
.customNavigation .prev {
	z-index: 0;
	top: -140px;
	position: absolute;
	left: 0px;
}
.customNavigation .next {
	z-index: 0;
	top: -140px;
	position: absolute;
	right: 0px;
}
/*********************************
 slider
 ********************************/
 .cloud {
	background-image:url(https://www.systoolsgroup.com/imgs/cloudendpoint.png);
	background-repeat: no-repeat;
	background-position:center;
	height: 147px;
	width: 280px;
	margin:-30px auto 0 auto;
}
.cloud1, .cloud2, .cloud3 {
	position: absolute;
	background-image: url(https://www.systoolsgroup.com/imgs/cloud.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	top: 70px;
	left: 14px;
}
.cloud1 {
	background-position: 0px -190px;
	height: 70px;
	width: 100px;
	left: 350px;
	top: 30px;
}
.cloud2 {
	background-position: -105px -190px;
	height: 89px;
	width: 154px;
	left: 82px;
	top: 50px;
}
.cloud3 {
	background-position: -265px -190px;
	height: 90px;
	width: 135px;
	left: 900px;
	top: 14px;
}
.cloud1, .cloud {
	animation: moveCloudOne 6s linear infinite;
	-webkit-animation: moveCloudOne 6s linear infinite;
	-moz-animation: moveCloudOne 6s linear infinite;
	-o-animation: moveCloudOne 6s linear infinite;
}
.cloud2 {
	animation: moveCloudOne 7s linear infinite 2s;
	-webkit-animation: moveCloudOne 7s linear infinite 2s;
	-moz-animation: moveCloudOne 7s linear infinite 2s;
	-o-animation: moveCloudOne 7s linear infinite 2s;
}
.cloud3 {
	animation: moveCloudOne 8s linear infinite;
	-webkit-animation: moveCloudOne 8s linear infinite;
	-moz-animation: moveCloudOne 8s linear infinite;
	-o-animation: moveCloudOne 8s linear infinite;
}
 @media (max-width:767px) {
.cloud {
 display:none;
}
}
@media (max-width:991px) {
.cloud {
 top:40px !important;
}
}
@media (min-width:768px) {
.cloud {
 top:40px !important;
}
}
@media (min-width:992px) {
.cloud {
 top:20px !important;
}
}
 @keyframes moveCloudOne {
 0% {
 transform: translateX(0px);
}
 50% {
 transform: translateX(-50px);
}
 100% {
 transform: translateY(0px);
}
}
@-moz-keyframes moveCloudOne {
 0% {
 -moz-transform: translateX(0px);
}
 50% {
 -moz-transform: translateX(-50px);
}
 100% {
 -moz-transform: translateX(0px);
}
}
@-webkit-keyframes moveCloudOne {
 0% {
 -webkit-transform: translateX(0px);
}
 50% {
 -webkit-transform: translateX(-50px);
}
 100% {
 -webkit-transform: translateX(0px);
}
}
@-ms-keyframes moveCloudOne {
 0% {
 -ms-transform: translateX(0px);
}
 50% {
 -ms-transform: translateX(-50px);
}
 100% {
 -ms-transform: translateX(0px);
}
}
 @keyframes moveCloudTwo {
 0% {
 transform: translateX(0px);
}
 50% {
 transform: translateX(-20px);
}
 100% {
 transform: translateY(0px);
}
}
@-moz-keyframes moveCloudTwo {
 0% {
 -moz-transform: translateX(0px);
}
 50% {
 -moz-transform: translateX(-20px);
}
 100% {
 -moz-transform: translateX(0px);
}
}
@-webkit-keyframes moveCloudTwo {
 0% {
 -webkit-transform: translateX(0px);
}
 50% {
 -webkit-transform: translateX(-20px);
}
 100% {
 -webkit-transform: translateX(0px);
}
}
@-ms-keyframes moveCloudTwo {
 0% {
 -ms-transform: translateX(0px);
}
 50% {
 -ms-transform: translateX(-20px);
}
 100% {
 -ms-transform: translateX(0px);
}
}
 @keyframes moveCloudThree {
 0% {
 transform: translateX(0px);
}
 50% {
 transform: translateX(-30px);
}
 100% {
 transform: translateY(0px);
}
}
@-moz-keyframes moveCloudThree {
 0% {
 -moz-transform: translateX(0px);
}
 50% {
 -moz-transform: translateX(-30px);
}
 100% {
 -moz-transform: translateX(0px);
}
}
@-webkit-keyframes moveCloudThree {
 0% {
 -webkit-transform: translateX(0px);
}
 50% {
 -webkit-transform: translateX(-30px);
}
 100% {
 -webkit-transform: translateX(0px);
}
}
@-ms-keyframes moveCloudThree {
 0% {
 -ms-transform: translateX(0px);
}
 50% {
 -ms-transform: translateX(-30px);
}
 100% {
 -ms-transform: translateX(0px);
}
}
#slide1, #slide2, #slide3 {
	top: 0px;
	position: relative;
	height: 450px;
	overflow: hidden;
}
.bg-examiner {
	background-color: #006699;
	background-repeat: repeat;
}
.bg-mx {
	background-image: url(https://www.systoolsgroup.com/imgs/cloud.png);
	background-repeat: no-repeat;
	background-position: 0px -520px;
	height: 70px;
	width: 400px;
	position: absolute;
	bottom: -15px;
	left: 49%;
	margin-left:-200px;
}
.mx-laptop {
	background-image: url(https://www.systoolsgroup.com/imgs/cloud.png);
	background-repeat: no-repeat;
	background-position: 0px -350px;
	height: 150px;
	width: 160px;
	position: absolute;
	bottom: 30px;
	left: 49%;
	margin-left:-80px;
}
.endPoint-ani-text {
	height: 45px;
	width: 150px;
	position: absolute;
	bottom: 95px;
	left: 45%;
	margin-left: -33px;
	font-weight: 700;
	font-size: 24px;
	line-height: 22px;
	color: #fbc247;
	text-shadow: 0px 1px 1px #000000;
	z-index:500;
}
@media (max-width:991px) {
.endPoint-ani-text {
 left: 43%;
}
}
@media (max-width:480px) {
.endPoint-ani-text {
 left: 39%;
}
}
@media (max-width:360px) {
.endPoint-ani-text {
 left: 36%;
}
}
.ani-maila, .ani-mailb, .ani-mailc, .ani-maild {
	width: 50px;
	height: 50px;
	position: absolute;
}
.ani-maila {
	top: 270px;
	left: 50px;
}
.ani-mailb {
	top: 350px;
	left: 50px;
}
.ani-mailc {
	top: 270px;
	right: 50px;
}
.ani-maild {
	top: 350px;
	right: 50px;
}
.ani-maile {
	top: 100px;
	right: 450px;
}
.ani-mailf {
	top: 100px;
	right: 450px;
}
.ani-mailg {
	top: 100px;
	right: 450px;
}
.maila1, .maila2, .maila3, .maila4, .mailb1, .mailb2, .mailb3, .mailb4, .mailc1, .mailc2, .mailc3, .mailc4, .maild1, .maild2, .maild3, .maild4, .maile1, .maile2, .maile3, .maile4, .mailf1, .mailf2, .mailf3, .mailf4, .mailg1, .mailg2, .mailg3, .mailg4 {
	position: absolute;
	height: 50px;
	width: 50px;
	background-image:url(https://www.systoolsgroup.com/imgs/sprite-data-endpointvault.png);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-color:#FFF;
	opacity:0;
}
.maila1 {
	background-position: 0px 0px;
}
.maila2 {
	background-position: 0px -50px;
}
.maila3 {
	background-position: -0px -100px;
}
.maila4 {
	background-position: -0px -150px;
}
.mailb1 {
	background-position: -0px -200px;
}
.mailb2 {
	background-position: -0px -250px;
}
.mailb3 {
	background-position: -0px -300px;
}
.mailb4 {
	background-position: -0px -350px;
}
.mailc1 {
	background-position: -0px -400px;
}
.mailc2 {
	background-position: -0px -450px;
}
.mailc3 {
	background-position: -0px -500px;
}
.mailc4 {
	background-position: -0px -550px;
}
.maild1 {
	background-position: -0px -50px;
}
.maild2 {
	background-position: -0px -100px;
}
.maild3 {
	background-position: -0px -150px;
}
.maild4 {
	background-position: -0px -200px;
}
.maile1 {
	background-position: -50px 0px;
}
.maile2 {
	background-position: -50px -50px;
}
.maile3 {
	background-position: -50px -100px;
}
.maile4 {
	background-position: -50px -150px;
}
.mailf1 {
	background-position: -50px -200px;
}
.mailf2 {
	background-position: -50px -250px;
}
.mailf3 {
	background-position: -50px -300px;
}
.mailf4 {
	background-position: -50px -350px;
}
.mailg1 {
	background-position: -50px -400px;
}
.mailg2 {
	background-position: -50px -450px;
}
.mailg3 {
	background-position: -50px -500px;
}
.mailg4 {
	background-position: -50px -550px;
}
.maila1 {
	animation: moveMailOne 4s linear infinite 4s;
	-webkit-animation: moveMailOne 4s linear infinite 4s;
}
.maila2 {
	animation: moveMailOne 4s linear infinite 3s;
	-webkit-animation: moveMailOne 4s linear infinite 3s;
}
.maila3 {
	animation: moveMailOne 4s linear infinite 2s;
	-webkit-animation: moveMailOne 4s linear infinite 2s;
}
.maila4 {
	animation: moveMailOne 4s linear infinite 1s;
	-webkit-animation: moveMailOne 4s linear infinite 1s;
}
 @keyframes moveMailOne {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, -10px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(250px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, 40px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes moveMailOne {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, -10px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(250px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, 40px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-webkit-keyframes moveMailOne {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, -10px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(250px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, 40px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-ms-keyframes moveMailOne {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, -10px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(250px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, 40px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-o-keyframes moveMailOne {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, -10px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(250px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, 40px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
.mailb1 {
	animation: moveMailTwo 4.5s linear infinite 1.5s;
	-moz-animation: moveMailTwo 4.5s linear infinite 1.5s;
	-webkit-animation: moveMailTwo 4.5s linear infinite 1.5s;
}
.mailb2 {
	animation: moveMailTwo 4.5s linear infinite 2.5s;
	-moz-animation: moveMailTwo 4.5s linear infinite 2.5s;
	-webkit-animation: moveMailTwo 4.5s linear infinite 2.5s;
}
.mailb3 {
	animation: moveMailTwo 4.5s linear infinite 3.5s;
	-moz-animation: moveMailTwo 4.5s linear infinite 3.5s;
	-webkit-animation: moveMailTwo 4.5s linear infinite 3.5s;
}
.mailb4 {
	animation: moveMailTwo 4.5s linear infinite 4.5s;
	-moz-animation: moveMailTwo 4.5s linear infinite 4.5s;
	-webkit-animation: moveMailTwo 4.5s linear infinite 4.5s;
}
@keyframes moveMailTwo {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, 0px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -10px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, -20px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 10px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes moveMailTwo {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, 0px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -10px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, -20px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 10px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-webkit-keyframes moveMailTwo {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, 0px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -10px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, -20px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 10px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-ms-keyframes moveMailTwo {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, 0px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -10px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, -20px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 10px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-o-keyframes moveMailTwo {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, 0px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -10px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, -20px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 10px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
.mailc1 {
	animation: moveMailThree 4s linear infinite 4s;
	-moz-animation: moveMailThree 4s linear infinite 4s;
	-webkit-animation: moveMailThree 4s linear infinite 4s;
}
.mailc2 {
	animation: moveMailThree 4s linear infinite 3s;
	-moz-animation: moveMailThree 4s linear infinite 3s;
	-webkit-animation: moveMailThree 4s linear infinite 3s;
}
.mailc3 {
	animation: moveMailThree 4s linear infinite 2s;
	-moz-animation: moveMailThree 4s linear infinite 2s;
	-webkit-animation: moveMailThree 4s linear infinite 2s;
}
.mailc4 {
	animation: moveMailThree 4s linear infinite 1s;
	-moz-animation: moveMailThree 4s linear infinite 1s;
	-webkit-animation: moveMailThree 4s linear infinite 1s;
}
@keyframes moveMailThree {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(-100px, -30px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(-220px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(-350px, -10px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(-450px, 50px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes moveMailThree {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(-100px, -30px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(-220px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(-350px, -10px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(-450px, 50px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-webkit-keyframes moveMailThree {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(-100px, -30px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(-220px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(-350px, -10px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(-450px, 50px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-ms-keyframes moveMailThree {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(-100px, -30px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(-220px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(-350px, -10px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(-450px, 50px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-o-keyframes moveMailFive {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(-100px, -30px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(-220px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(-350px, -10px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(-450px, 50px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
.maild1 {
	animation: moveMailFour 4s linear infinite 4s;
	-moz-animation: moveMailFour 4s linear infinite 4s;
	-webkit-animation: moveMailFour 4s linear infinite 4s;
}
.maild2 {
	animation: moveMailFour 4s linear infinite 3s;
	-moz-animation: moveMailFour 4s linear infinite 3s;
	-webkit-animation: moveMailFour 4s linear infinite 3s;
}
.maild3 {
	animation: moveMailFour 4s linear infinite 2s;
	-moz-animation: moveMailFour 4s linear infinite 2s;
	-webkit-animation: moveMailFour 4s linear infinite 2s;
}
.maild4 {
	animation: moveMailFour 4s linear infinite 1s;
	-moz-animation: moveMailFour 4s linear infinite 1s;
	-webkit-animation: moveMailFour 4s linear infinite 1s;
}
@keyframes moveMailFour {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(-100px, -30px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(-250px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(-380px, -10px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(-460px, -20px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes moveMailFour {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(-100px, -30px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(-250px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(-380px, -10px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(-460px, -20px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-webkit-keyframes moveMailFour {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(-100px, -30px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(-250px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(-380px, -10px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(-460px, -20px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-ms-keyframes moveMailFour {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(-100px, -30px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(-250px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(-380px, -10px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(-460px, -20px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-o-keyframes moveMailFour {
0% {
transform:translate(0px, 0px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
20% {
transform:translate(-100px, -30px) scale(0.7, 0.7) rotate(20deg);
opacity:1;
}
40% {
transform:translate(-250px, -20px) scale(0.5, 0.5) rotate(30deg);
opacity:1;
}
60% {
transform:translate(-380px, -10px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
80% {
transform:translate(-460px, -20px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
.maile1 {
	animation: moveMailFive 4s linear infinite 4s;
	-moz-animation: moveMailFive 4s linear infinite 4s;
	-webkit-animation: moveMailFive 4s linear infinite 4s;
}
.maile2 {
	animation: moveMailFive 4s linear infinite 3s;
	-moz-animation: moveMailFive 4s linear infinite 3s;
	-webkit-animation: moveMailFive 4s linear infinite 3s;
}
.maile3 {
	animation: moveMailFive 4s linear infinite 2s;
	-moz-animation: moveMailFive 4s linear infinite 2s;
	-webkit-animation: moveMailFive 4s linear infinite 2s;
}
.maile4 {
	animation: moveMailFive 4s linear infinite 1s;
	-moz-animation: moveMailFive 4s linear infinite 1s;
	-webkit-animation: moveMailFive 4s linear infinite 1s;
}
 @keyframes moveMailFive {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(480px, 80px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(480px, 10px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(480px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes moveMailFive {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(480px, 80px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(480px, 10px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(480px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-webkit-keyframes moveMailFive {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(480px, 80px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(480px, 10px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(480px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-ms-keyframes moveMailFive {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(480px, 80px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(480px, 10px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(480px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-o-keyframes moveMailFive {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(480px, 80px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(480px, 10px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(480px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
.mailf1 {
	animation: moveMailSix 4s linear infinite 4s;
	-moz-animation: moveMailSix 4s linear infinite 4s;
	-webkit-animation: moveMailSix 4s linear infinite 4s;
}
.mailf2 {
	animation: moveMailSix 4s linear infinite 3s;
	-moz-animation: moveMailSix 4s linear infinite 3s;
	-webkit-animation:moveMailSix 4s linear infinite 3s;
}
.mailf3 {
	animation: moveMailSix 4s linear infinite 2s;
	-moz-animation: moveMailSix 4s linear infinite 2s;
	-webkit-animation: moveMailSix 4s linear infinite 2s;
}
.mailf4 {
	animation: moveMailSix 4s linear infinite 1s;
	-moz-animation: moveMailSix 4s linear infinite 1s;
	-webkit-animation: moveMailSix 4s linear infinite 1s;
}
 @keyframes moveMailSix {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(530px, 90px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(550px, 30px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(500px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes moveMailSix {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(530px, 90px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(550px, 30px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(500px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-webkit-keyframes moveMailSix {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(530px, 90px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(550px, 30px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(500px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-ms-keyframes moveMailSix {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(530px, 90px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(550px, 30px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(500px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-o-keyframes moveMailSix {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(530px, 90px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(550px, 30px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(500px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
.mailg1 {
	animation: moveMailSeven 4s linear infinite 4s;
	-moz-animation: moveMailSeven 4s linear infinite 4s;
	-webkit-animation: moveMailSeven 4s linear infinite 4s;
}
.mailg2 {
	animation: moveMailSeven 4s linear infinite 3s;
	-moz-animation: moveMailSeven 4s linear infinite 3s;
	-webkit-animation:moveMailSeven 4s linear infinite 3s;
}
.mailg3 {
	animation: moveMailSeven 4s linear infinite 2s;
	-moz-animation: moveMailSeven 4s linear infinite 2s;
	-webkit-animation: moveMailSeven 4s linear infinite 2s;
}
.mailg4 {
	animation: moveMailSeven 4s linear infinite 1s;
	-moz-animation: moveMailSeven 4s linear infinite 1s;
	-webkit-animation: moveMailSeven 4s linear infinite 1s;
}
 @keyframes moveMailSeven {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(420px, 90px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(400px, 30px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(450px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes moveMailSeven {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(420px, 90px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(400px, 30px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(450px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-webkit-keyframes moveMailSeven {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(420px, 90px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(400px, 30px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(450px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-ms-keyframes moveMailSeven {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(420px, 90px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(400px, 30px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(450px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-o-keyframes moveMailSeven {
0% {
transform:translate(480px, 150px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
25% {
transform:translate(420px, 90px) scale(0.3, 0.3) rotate(20deg);
opacity:1;
}
 50% {
transform:translate(400px, 30px) scale(0.5, 0.5) rotate(20deg);
opacity:1;
}
75% {
transform:translate(450px, -60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
/***************************
 slide 2
****************************/
.bg-mx-sec {
	background-image: url(https://www.systoolsgroup.com/img/cloud.png);
	background-repeat: no-repeat;
	background-position: 0px -520px;
	height: 70px;
	width: 400px;
	position: absolute;
	bottom: 50px;
	left: 50%;
	margin-left:-200px;
}
.mx-laptop-sec {
	background-image: url(https://www.systoolsgroup.com/img/cloud.png);
	background-repeat: no-repeat;
	background-position: 0px -350px;
	height: 150px;
	width: 160px;
	position: absolute;
	bottom: 100px;
	left: 50%;
	margin-left:-80px;
}
.mx-mail {
	background-image: url(https://www.systoolsgroup.com/img/cloud.png);
	background-repeat: no-repeat;
	background-position: -162px -470px;
	height: 45px;
	width: 66px;
	position: absolute;
	bottom: 165px;
	left: 50%;
	margin-left: -33px;
}
.bg-mx-lens {
	height: 120px;
	width: 10px;
	position: absolute;
	bottom: 115px;
	left: 50%;
	margin-left: -10px;
	transform-origin:right;
	animation: moveLens 4s linear infinite;
	-moz-animation: moveLens 4s linear infinite;
	-webkit-animation: moveLens 4s linear infinite;
}
.bg-mx-lens > .mx-lens {
	background-image: url(https://www.systoolsgroup.com/img/cloud.png);
	background-repeat: no-repeat;
	height: 80px;
	width: 80px;
	background-position: -300px -275px;
	animation: inner-circle 4s linear infinite;
}
@-moz-keyframes moveLens {
 from {
transform:rotate(0deg);
}
to {
	transform:rotate(360deg);
}
}
@-webkit-keyframes moveLens {
 from {
transform:rotate(0deg);
}
to {
	transform:rotate(360deg);
}
}
@-ms-keyframes moveLens {
 from {
transform:rotate(0deg);
}
to {
	transform:rotate(360deg);
}
}
@keyframes inner-circle {
 from {
transform:rotate(0deg);
}
to {
	transform:rotate(-360deg);
}
}
.ani-maila-sec, .ani-mailb-sec, .ani-mailc-sec {
	width: 50px;
	height: 50px;
	position: absolute;
}
.ani-maila-sec {
	top: 160px;
	left: 50px;
}
.ani-mailb-sec {
	top: 230px;
	left: 50px;
}
.ani-mailc-sec {
	top: 320px;
	left: 50px;
}
.maila1-sec, .maila2-sec, .maila3-sec, .maila4-sec, .mailb1-sec, .mailb2-sec, .mailb3-sec, .mailb4-sec, .mailc1-sec, .mailc2-sec, .mailc3-sec, .mailc4-sec {
	position: absolute;
	height: 50px;
	width: 50px;
	background-image: url("https://www.systoolsgroup.com/img/sprite-data.png");
	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-color:#FFF;
	opacity:0;
}
.maila1-sec {
	background-position: 0px 0px;
}
.maila2-sec {
	background-position: 0px -50px;
}
.maila3-sec {
	background-position: 0px -100px;
}
.maila4-sec {
	background-position: 0px -150px;
}
.mailb1-sec {
	background-position: 0px -200px;
}
.mailb2-sec {
	background-position: 0px -250px;
}
.mailb3-sec {
	background-position: 0px -300px;
}
.mailb4-sec {
	background-position: 0px -350px;
}
.mailc1-sec {
	background-position: 0px -400px;
}
.mailc2-sec {
	background-position: 0px -450px;
}
.mailc3-sec {
	background-position: 0px -500px;
}
.mailc4-sec {
	background-position: 0px -550px;
}
.maila1-sec {
	animation: moveMailOne-sec 4s linear infinite 4s;
	-webkit-animation: moveMailOne-sec 4s linear infinite 4s;
}
.maila2-sec {
	animation: moveMailOne-sec 4s linear infinite 3s;
	-webkit-animation: moveMailOne-sec 4s linear infinite 3s;
}
.maila3-sec {
	animation: moveMailOne-sec 4s linear infinite 2s;
	-webkit-animation: moveMailOne-sec 4s linear infinite 2s;
}
.maila4-sec {
	animation: moveMailOne-sec 4s linear infinite 1s;
	-webkit-animation: moveMailOne-sec 4s linear infinite 1s;
}
@keyframes moveMailOne-sec {
0% {
transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, -20px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -30px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, 20px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 20px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes moveMailOne-sec {
0% {
transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, -10px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
transform:translate(250px, -20px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, 40px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-webkit-keyframes moveMailOne-sec {
0% {
-webkit-transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
-webkit-transform:translate(100px, -10px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
-webkit-transform:translate(250px, -20px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
-webkit-transform:translate(350px, 40px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
-webkit-transform:translate(450px, 60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-ms-keyframes moveMailOne-sec {
0% {
-ms-transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
-ms-transform:translate(100px, -10px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
-ms-transform:translate(250px, -20px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
-ms-transform:translate(350px, 40px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
-ms-transform:translate(450px, 60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-o-keyframes moveMailOne-sec {
0% {
transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, -10px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
transform:translate(250px, -20px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, 40px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 60px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
.mailb1-sec {
	animation: moveMailTwo-sec 4.5s linear infinite 1.5s;
	-moz-animation: moveMailTwo-sec 4.5s linear infinite 1.5s;
	-webkit-animation: moveMailTwo-sec 4.5s linear infinite 1.5s;
}
.mailb2-sec {
	animation: moveMailTwo-sec 4.5s linear infinite 2.5s;
	-moz-animation: moveMailTwo-sec 4.5s linear infinite 2.5s;
	-webkit-animation: moveMailTwo-sec 4.5s linear infinite 2.5s;
}
.mailb3-sec {
	animation: moveMailTwo-sec 4.5s linear infinite 3.5s;
	-moz-animation: moveMailTwo-sec 4.5s linear infinite 3.5s;
	-webkit-animation: moveMailTwo-sec 4.5s linear infinite 3.5s;
}
.mailb4-sec {
	animation: moveMailTwo-sec 4.5s linear infinite 4.5s;
	-moz-animation: moveMailTwo-sec 4.5s linear infinite 4.5s;
	-webkit-animation: moveMailTwo-sec 4.5s linear infinite 4.5s;
}
@keyframes moveMailTwo-sec {
0% {
transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, 0px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -10px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, -20px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 10px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes moveMailTwo-sec {
0% {
transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, 0px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -10px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, -20px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 10px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-webkit-keyframes moveMailTwo-sec {
0% {
-webkit-transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
-webkit-transform:translate(100px, 0px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
-webkit-transform:translate(220px, -10px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
-webkit-transform:translate(350px, -20px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
-webkit-transform:translate(450px, 10px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-ms-keyframes moveMailTwo-sec {
0% {
transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, 0px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -10px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, -20px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 10px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-o-keyframes moveMailTwo-sec {
0% {
transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, 0px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -10px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, -20px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, 10px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
.mailc1-sec {
	animation: moveMailThree-sec 4s linear infinite 4s;
	-moz-animation: moveMailThree-sec 4s linear infinite 4s;
	-webkit-animation: moveMailThree-sec 4s linear infinite 4s;
}
.mailc2-sec {
	animation: moveMailThree-sec 4s linear infinite 3s;
	-moz-animation: moveMailThree-sec 4s linear infinite 3s;
	-webkit-animation: moveMailThree-sec 4s linear infinite 3s;
}
.mailc3-sec {
	animation: moveMailThree-sec 4s linear infinite 2s;
	-moz-animation: moveMailThree-sec 4s linear infinite 2s;
	-webkit-animation: moveMailThree-sec 4s linear infinite 2s;
}
.mailc4-sec {
	animation: moveMailThree-sec 4s linear infinite 1s;
	-moz-animation: moveMailThree-sec 4s linear infinite 1s;
	-webkit-animation: moveMailThree-sec 4s linear infinite 1s;
}
@-keyframes moveMailThree-sec {
0% {
transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, 10px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -30px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, -80px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, -120px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-moz-keyframes moveMailThree-sec {
0% {
transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, 10px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -30px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, -50px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, -70px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-webkit-keyframes moveMailThree-sec {
0% {
-webkit-transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
-webkit-transform:translate(100px, 10px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
-webkit-transform:translate(220px, -30px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
-webkit-transform:translate(350px, -50px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
-webkit-transform:translate(450px, -70px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-ms-keyframes moveMailThree-sec {
0% {
transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, 10px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -30px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, -50px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, -70px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
@-o-keyframes moveMailThree-sec {
0% {
transform:translate(0px, 0px) scale(0.5, 0.5) rotate(10deg);
opacity:0;
}
20% {
transform:translate(100px, 10px) scale(1, 1) rotate(20deg);
opacity:1;
}
40% {
transform:translate(220px, -30px) scale(0.8, 0.8) rotate(30deg);
opacity:1;
}
60% {
transform:translate(350px, -50px) scale(0.6, 0.6) rotate(20deg);
opacity:1;
}
80% {
transform:translate(450px, -70px) scale(0.2, 0.2) rotate(10deg);
opacity:0;
}
100% {
opacity:0;
}
}
.header1, .header2, .header3, .header4, .header5, .header6, .header7, .header8, .header9, .header10, .header11, .header12 {
  position: absolute;
  background-image: url(https://www.systoolsgroup.com/img/mx-outputs.png);
  background-position: 0px 0px;
  background-repeat: no-repeat;
  transform:scale(0);
}
.header1 {
  height: 20px;
  width: 65px;
  right: 460px;
  top: 225px;
  background-position: 0px -10px;
  animation: moveHeaderOne 6s linear infinite 2s;
  -moz-animation: moveHeaderOne 6s linear infinite 2s;
  -webkit-animation: moveHeaderOne 6s linear infinite 2s;
}
.header2 {
  height: 20px;
  width: 50px;
  right: 460px;
  top: 225px;
  background-position: 0px -50px;
  animation: moveHeaderOne 6s linear infinite 4s;
  -moz-animation: moveHeaderOne 6s linear infinite 4s;
  -webkit-animation: moveHeaderOne 6s linear infinite 4s;
}
.header3 {
  background-position: 0px -95px;
  height: 20px;
  width: 37px;
  right: 460px;
  top: 225px;
  animation: moveHeaderOne 6s linear infinite 6s;
  -moz-animation: moveHeaderOne 6s linear infinite 6s;
  -webkit-animation: moveHeaderOne 6s linear infinite 6s;
}
.header4 {
  background-position: 0px -135px;
  height: 20px;
  width: 25px;
  right: 480px;
  top: 260px;
  animation: moveHeaderTwo 6s linear infinite 1s;
  -moz-animation: moveHeaderTwo 6s linear infinite 1s;
  -webkit-animation: moveHeaderTwo 6s linear infinite 1s;
}
.header5 {
  background-position: 0px -170px;
  height: 20px;
  width: 25px;
  right: 480px;
  top: 260px;
  animation: moveHeaderTwo 6s linear infinite 3s;
  -moz-animation: moveHeaderTwo 6s linear infinite 3s;
  -webkit-animation: moveHeaderTwo 6s linear infinite 3s;
}
.header6 {
  background-position: 0px -210px;
  height: 20px;
  width: 27px;
  right: 480px;
  top: 260px;
  animation: moveHeaderTwo 6s linear infinite 5s;
  -moz-animation: moveHeaderTwo 6s linear infinite 5s;
  -webkit-animation: moveHeaderTwo 6s linear infinite 5s;
}
.header7 {
  background-position: 0px -246px;
  height: 20px;
  width: 49px;
  right: 480px;
  top: 260px;
  animation: moveHeaderThree 6s linear infinite 2s;
  -moz-animation: moveHeaderThree 6s linear infinite 2s;
  -webkit-animation: moveHeaderThree 6s linear infinite 2s;
}
.header8 {
  background-position: 0px -283px;
  height: 20px;
  width: 60px;
  right: 480px;
  top: 260px;
  animation: moveHeaderThree 6s linear infinite 4s;
  -moz-animation: moveHeaderThree 6s linear infinite 4s;
  -webkit-animation: moveHeaderThree 6s linear infinite 4s;
}
.header9 {
  background-position: 0px -318px;
  height: 20px;
  width: 75px;
  right: 480px;
  top: 260px;
  animation: moveHeaderThree 6s linear infinite 6s;
  -moz-animation: moveHeaderThree 6s linear infinite 6s;
  -webkit-animation: moveHeaderThree 6s linear infinite 6s;
}
.header10 {
  background-position: 0px -358px;
  height: 20px;
  width: 40px;
  right: 460px;
  top: 290px;
  animation: moveHeaderFour 6s linear infinite 1s;
  -moz-animation: moveHeaderFour 6s linear infinite 1s;
  -webkit-animation: moveHeaderFour 6s linear infinite 1s;
}
.header11 {
  background-position: 0px -398px;
  height: 20px;
  width: 60px;
  right: 480px;
  top: 290px;
  animation: moveHeaderFour 6s linear infinite 3s;
  -moz-animation: moveHeaderFour 6s linear infinite 3s;
  -webkit-animation: moveHeaderFour 6s linear infinite 3s;
}
.header12 {
  background-position: 0px -438px;
  height: 20px;
  width: 75px;
  right: 480px;
  top: 290px;
  animation: moveHeaderFour 6s linear infinite 5s;
  -moz-animation: moveHeaderFour 6s linear infinite 5s;
  -webkit-animation: moveHeaderFour 6s linear infinite 5s;
}
@-keyframes moveHeaderOne {
from {
transform:translate(0px, 0px) ;
opacity:0
}
25% {
transform:translate(100px, -60px) scale(1);
opacity:0
}
50% {
transform:translate(200px, -80px);
opacity:1
}
75% {
transform:translate(300px, -80px);
opacity:1
}
to {
transform:translate(450px, -80px);
opacity:0
}
}
@-moz-keyframes moveHeaderOne {
from {
transform:translate(0px, 0px);
opacity:0
}
25% {
transform:translate(100px, -60px) scale(1);
opacity:1
}
50% {
transform:translate(200px, -80px);
opacity:1
}
75% {
transform:translate(300px, -80px);
opacity:1
}
to {
transform:translate(450px, -80px);
opacity:0
}
}
@-webkit-keyframes moveHeaderOne {
from {
-webkit-transform:translate(0px, 0px);
-webkit-opacity:0
}
25% {
-webkit-transform:translate(100px, -60px) scale(1);
-webkit-opacity:1
}
50% {
-webkit-transform:translate(200px, -80px);
-webkit-opacity:1
}
75% {
-webkit-transform:translate(300px, -80px);
-webkit-opacity:1
}
to {
-webkit-transform:translate(450px, -80px);
-webkit-opacity:0
}
}
@-ms-keyframes moveHeaderOne {
from {
-ms-transform:translate(0px, 0px);
opacity:0
}
25% {
-ms-transform:translate(100px, -60px) scale(1);
opacity:1
}
50% {
-ms-transform:translate(200px, -80px);
opacity:1
}
75% {
-ms-transform:translate(300px, -80px);
opacity:1
}
to {
-ms-transform:translate(450px, -80px);
opacity:0
}
}
@-o-keyframes moveHeaderOne {
from {
transform:translate(0px, 0px);
opacity:0
}
25% {
transform:translate(100px, -60px) scale(1);
opacity:1
}
50% {
transform:translate(200px, -80px);
opacity:1
}
75% {
transform:translate(300px, -80px);
opacity:1
}
to {
transform:translate(450px, -80px);
opacity:0
}
}
@-keyframes moveHeaderTwo {
from {
transform:translate(0px, 0px);
opacity:0
}
25% {
transform:translate(100px, -20px) scale(1);
opacity:1
}
50% {
transform:translate(200px, -50px);
opacity:1
}
75% {
transform:translate(300px, -50px);
opacity:1
}
to {
transform:translate(450px, -50px);
opacity:0
}
}
@-moz-keyframes moveHeaderTwo {
from {
transform:translate(0px, 0px);
opacity:0
}
25% {
transform:translate(100px, -20px) scale(1);
opacity:1
}
50% {
transform:translate(200px, -50px);
opacity:1
}
75% {
transform:translate(300px, -50px);
opacity:1
}
to {
transform:translate(450px, -50px);
opacity:0
}
}
@-webkit-keyframes moveHeaderTwo {
from {
-webkit-transform:translate(0px, 0px);
-webkit-opacity:0
}
25% {
-webkit-transform:translate(100px, -20px) scale(1);
-webkit-opacity:1
}
50% {
-webkit-transform:translate(200px, -50px);
-webkit-opacity:1
}
75% {
-webkit-transform:translate(300px, -50px);
-webkit-opacity:1
}
to {
-webkit-transform:translate(450px, -50px);
-webkit-opacity:0
}
}
@-ms-keyframes moveHeaderTwo {
from {
-ms-transform:translate(0px, 0px);
opacity:0
}
25% {
-ms-transform:translate(100px, -20px) scale(1);
opacity:1
}
50% {
-ms-transform:translate(200px, -50px);
opacity:1
}
75% {
-ms-transform:translate(300px, -50px);
opacity:1
}
to {
-ms-transform:translate(450px, -50px);
opacity:0
}
}
@-o-keyframes moveHeaderTwo {
from {
transform:translate(0px, 0px);
opacity:0
}
25% {
transform:translate(100px, -20px) scale(1);
opacity:1
}
50% {
transform:translate(200px, -50px);
opacity:1
}
75% {
transform:translate(300px, -50px);
opacity:1
}
to {
transform:translate(450px, -50px);
opacity:0
}
}
@-keyframes moveHeaderThree {
from {
transform:translate(0px, 0px);
opacity:0
}
25% {
transform:translate(100px, 0px) scale(1);
opacity:1
}
50% {
transform:translate(200px, 0px);
opacity:1
}
75% {
transform:translate(300px, 0px);
opacity:1
}
to {
transform:translate(450px, 0px);
opacity:0
}
}
@-moz-keyframes moveHeaderThree {
from {
transform:translate(0px, 0px);
opacity:0
}
25% {
transform:translate(100px, 0px) scale(1);
opacity:1
}
50% {
transform:translate(200px, 0px);
opacity:1
}
75% {
transform:translate(300px, 0px);
opacity:1
}
to {
transform:translate(450px, 0px);
opacity:0
}
}
@-webkit-keyframes moveHeaderThree {
from {
-webkit-transform:translate(0px, 0px);
-webkit-opacity:0
}
25% {
-webkit-transform:translate(100px, 0px) scale(1);
-webkit-opacity:1
}
50% {
-webkit-transform:translate(200px, 0px);
-webkit-opacity:1
}
75% {
-webkit-transform:translate(300px, 0px);
-webkit-opacity:1
}
to {
-webkit-transform:translate(450px, 0px);
-webkit-opacity:0
}
}
@-ms-keyframes moveHeaderThree {
from {
-ms-transform:translate(0px, 0px);
opacity:0
}
25% {
-ms-transform:translate(100px, 0px) scale(1);
opacity:1
}
50% {
-ms-transform:translate(200px, 0px);
opacity:1
}
75% {
-ms-transform:translate(300px, 0px);
opacity:1
}
to {
-ms-transform:translate(450px, 0px);
opacity:0
}
}
@-o-keyframes moveHeaderThree {
from {
transform:translate(0px, 0px);
opacity:0
}
25% {
transform:translate(100px, 0px) scale(1);
opacity:1
}
50% {
transform:translate(200px, 0px);
opacity:1
}
75% {
transform:translate(300px, 0px);
opacity:1
}
to {
transform:translate(450px, 0px);
opacity:0
}
}
@-keyframes moveHeaderFour {
from {
transform:translate(0px, 0px);
opacity:0
}
25% {
transform:translate(100px, 20px) scale(1);
opacity:1
}
50% {
transform:translate(200px, 30px);
opacity:1
}
75% {
transform:translate(300px, 30px);
opacity:1
}
to {
transform:translate(450px, 30px);
opacity:0
}
}
@-moz-keyframes moveHeaderFour {
from {
transform:translate(0px, 0px);
opacity:0
}
25% {
transform:translate(100px, 20px) scale(1);
opacity:1
}
50% {
transform:translate(200px, 30px);
opacity:1
}
75% {
transform:translate(300px, 30px);
opacity:1
}
to {
transform:translate(450px, 30px);
opacity:0
}
}
@-webkit-keyframes moveHeaderFour {
from {
-webkit-transform:translate(0px, 0px);
-webkit-opacity:0
}
25% {
-webkit-transform:translate(100px, 20px) scale(1);
-webkit-opacity:1
}
50% {
-webkit-transform:translate(200px, 30px);
-webkit-opacity:1
}
75% {
-webkit-transform:translate(300px, 30px);
-webkit-opacity:1
}
to {
-webkit-transform:translate(450px, 30px);
-webkit-opacity:0
}
}
@-ms-keyframes moveHeaderFour {
from {
-ms-transform:translate(0px, 0px);
opacity:0
}
25% {
-ms-transform:translate(100px, 20px) scale(1);
opacity:1
}
50% {
-ms-transform:translate(200px, 30px);
opacity:1
}
75% {
-ms-transform:translate(300px, 30px);
opacity:1
}
to {
-ms-transform:translate(450px, 30px);
opacity:0
}
}
@-o-keyframes moveHeaderFour {
from {
transform:translate(0px, 0px);
opacity:0
}
25% {
transform:translate(100px, 20px) scale(1);
opacity:1
}
50% {
transform:translate(200px, 30px);
opacity:1
}
75% {
transform:translate(300px, 30px);
opacity:1
}
to {
transform:translate(450px, 30px);
opacity:0
}
}


.customsnav .next, .customsnav .prev{
	color:#000;
	position:absolute;
	top:20%;
	border-radius:50%;
	padding:3px 2px;
	margin-right:3px;
}
.customsnav a:hover{
	color:#fff;
	background-color:#06c;
}
.customsnav .next{
		right:0px;
}
.customsnav .prev{
		right:20%;
}