/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
@import url("https://www.manageengine.com/css/fonts.css");
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


.clearfix:after {
    clear:both;
    content:'.';
    display:block;
    visibility:hidden;
    height:0;
}
.clearfix {
    display:inline-block;
}
* html .clearfix {
    height:1%;
}
.clearfix {
    display:block;
}
*+html .clearfix {
    display: inline-block;
}


body {
    font-family: 'Zoho_Puvi_Regular';
    line-height: 24px;
    letter-spacing: normal;
    background: #fff;
    color:#222;
    font-size: 14px;
}
.container{
    width:1200px;
    margin: 0 auto;
}
h1,h2,h3,h4,h5,h6{
    font-family: 'Zoho_Puvi_SemiBold';
    margin: 0;
    padding: 0;
    line-height: normal;
}
h2{
    font-size:2.5em;
}
ol li,ul li{
    list-style-type: none;
}
h3{
    margin-top: 15px;
    font-size: 1.5em;
}
.breadcrumb{display: none;}
.infy-banner{margin:100px 0 50px 0;min-height: 500px;}
.infy-banner h2 span{color:#1d99b3;}
.infy-banner h2{font-size:3.5em;text-align: left;margin: 0 0 0 -500px;opacity: 0;transition: all .5s ease-in-out;}
.infy-banner p{font-size:22px;}
.me-logo img{width:200px;}
.info-cont{margin:40px 0 20px 155px;opacity: 0;transition: all .5s ease-in-out;}
.me-logo{margin-top:400px;opacity: 0;transition: all .5s ease-in-out;}
.infy-banner-cont, .infy-banner-creative{
    width:40%;
    display: inline-block;
    vertical-align: top;
}
.infy-banner-cont{margin-top:6%;width:55%;}
.infy-banner-creative{
    opacity: 0;
    text-align: right;
    -ms-transform: scale(2); /* IE 9 */
    -webkit-transform: scale(2); /* Safari */
    transform: scale(2);
    transition: all .5s ease-in-out;
}
#statebusiness.animate h2{margin: 0;opacity: 1;}
#statebusiness.animate .info-cont{margin:25px 0 20px 0;opacity: 1; line-height: 35px;}
#statebusiness.animate .me-logo{margin:0;opacity: 1;}
#statebusiness.animate .infy-banner-creative{
    opacity: 1;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Safari */
    transform: scale(1);
}


.infy-banner-creative img{
    width:80%;
}
.infy-banner p.paging-slide{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1d99b3+0,002b6a+100 */
    background: #1d99b3; /* Old browsers */
    background: -moz-linear-gradient(top, #1d99b3 0%, #002b6a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #1d99b3 0%,#002b6a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #1d99b3 0%,#002b6a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d99b3', endColorstr='#002b6a',GradientType=0 ); /* IE6-9 */
    color:#fff;
    width:40px;
    height:40px;
    text-align: center;
    padding: 17px 10px 3px 10px;
    margin: 20px auto;
    border-radius: 50px;
    font-size: 18px;
    display: none;
}
#itbusiness{background:#1d99b3;}
#itbusiness, #itclouds{padding: 50px 0px;}
#packwell{padding: 50px 0 150px 0;}
.itbusiness-flow ul{text-align: center;}
.itbusiness-flow ul h3{text-align: left; margin: 0 0 5px 0;}
.itbusiness-flow ul li{
    width:25%;
    background:#fff;
    box-shadow: 0px 1px 5px #e2dddd;
    padding: 10px;
    margin: 20px;
    display: inline-block;
    vertical-align: top;
}
#itclouds .cloud-notify{margin: -15px 0 0 20px;}
.itbusiness-flow ul{
    margin: 30px 0 0 0;
}
.itbusiness-flow ul li:first-child{
    position: relative;
}
.itbusiness-flow ul li:nth-child(2){
    margin: 20px 20px 20px 30%;
}
.itbusiness-flow ul li:nth-child(3){
    margin: 21.5% 20px 20px 20px;
}
.itbusiness-flow{
    position: relative;
}
.infy-it-flow{
    position: absolute;
    left: 33.2%;
    top: 6%;
    z-index: 2;
}
.infy-it-flow img{width:80%;}
.itbusiness-flow .cloud-notify{
    position: absolute;
    top: -29px;
    right:-118px;
}
.itbusiness-flow ul .cloud-notify h3{text-align: center;}
.itbusiness-flow ul .cloud-notify p{font-size: .9em;}
.connect-line1, .connect-line2{
    position: absolute;
    width: 1px;
    height: 200px;
    background: #002b5f;
    z-index: 1;
    left: 28%;
    top: 40%;
}
.connect-line2{
    width: 600px;
    height: 1px;
    left: 28%;
    top: 58.5%;
}
.connect-line1 img{
    position: absolute;
    top: 103px;
    left: 100px;
}
.connect-line2 img{
    position: absolute;
    top: -7px;
    left: 475px;
}
section h2{
    text-align: center;
}
#itbusiness h2{color:#fff;}
.it-percentage{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1d99b3+0,002b6a+100 */
    background: #1d99b3; /* Old browsers */
    background: -moz-linear-gradient(top, #1d99b3 0%, #002b6a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #1d99b3 0%,#002b6a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #1d99b3 0%,#002b6a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d99b3', endColorstr='#002b6a',GradientType=0 ); /* IE6-9 */
    width:50px;
    height: 45px;
    padding: 15px 0px 0 10px;
    display: inline-block;
    border-radius: 50px;
    color:#fff;
    font-size: 20px;
    text-align: left;
    vertical-align: top;
    font-weight: bold;
}
.it-details{
    display: inline-block;
    text-align: left;
    width:75%;
    vertical-align: top;
    margin: 2px 0 0 0;
}
.it-details p, .it-details h3{
    margin: 2px;
    line-height: normal;
}
nav {
    width: 30px;
    position: fixed;
    top: 40%;
    right: 10px;
    z-index: 9999;
}
nav ul {
    list-style: none;
    padding: 0;
}
nav ul li {
    list-style: none;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #c1c1c1;
    display: block;
    margin: 10px 0;
    cursor: pointer;
}
nav ul li.navactive {
    background: #002b6a;
}
ul.cloud-steps{
    margin:100px 0 0 0;
}
ul.cloud-steps li{
    margin:0 0 60px 5%;
    position: relative;
    width:80%;
}
ul.cloud-steps li:nth-child(2){
    padding-left:10%;
    width: 70%;
}
ul.cloud-steps li:nth-child(3){
    padding-left:20%;
    width: 60%;
}
ul.cloud-steps li div.cloud-steps-inner{
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1c94b0+0,002b6a+100 */
    background: #1c94b0; /* Old browsers */
    background: -moz-linear-gradient(left, #1c94b0 0%, #002b6a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #1c94b0 0%,#002b6a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #1c94b0 0%,#002b6a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c94b0', endColorstr='#002b6a',GradientType=1 ); /* IE6-9 */
    padding: 10px;
    margin: 0;
    display: inline-block;
    vertical-align: top;
    border-top-left-radius:50px;
    border-top-right-radius:0;
    border-bottom-right-radius:0;
    border-bottom-left-radius:50px;
    width: 400px;
    position: relative;
    z-index: 2;
}
ul.cloud-steps li .it-percentage{
    background:#fff;
    color:#1a8fad;
}
ul.cloud-steps li .it-details{
    color:#fff;
    padding: 0 0 0 5px;
}
.cloud-creative{
    width: 100px;
    height: 75px;
    background: #fff;
    border:2px solid #012d6b;
    display: inline-block;
    vertical-align: top;
    margin: 0 0 0 20px;
    position: relative;
    z-index: 2;
    text-align: center;
}
.cloud-creative img{
    width:90%;
}
.flow-line{
    width: 70%;
    position: absolute;
    height: 2px;
    right: 0;
    top: 43px;
    border-top: 1px dashed #ddd;
    z-index: 1;
}
.flow-line2{
    width: 14px;
    position: absolute;
    height: 14px;
    right: 0;
    top: 37px;
    z-index: 1;
    background:url("http://tools.manageengine.com/images/common/infy-bullet.png") no-repeat right top;
}

.cloud-notify{
    display: inline-block;
    width: 90px;
    height: 90px;
    background: #fff;
    box-shadow: 0 1px 3px #ddd;
    border-radius: 100px;
    padding: 10px;
    text-align: center;
    position: relative;
    z-index: 2;
    margin: 0 0 0 20px;
}
.cloud-notify h3{
    margin: 0;
    font-size: 1.5em;
    line-height: normal;
    color:#1a8fad;
}
.cloud-notify p{
    font-size: .9em;
    line-height: normal;
    margin: 3px 0 0 0;
}
.cloud-step-arrow{
    position: absolute;
    right: -5px;
    top: 85px;
    background: url(http://tools.manageengine.com/images/common/infy-arrow.png) no-repeat right top;
    height: 60px;
    width: 20px;
}

#securitylock{
    background: #1d99b3;
    min-height: 500px;
    padding: 50px 0px;
}
#securitylock .container{
    position: relative;
}
#securitylock h2{
    color:#fff;
}
.securitysteps .it-percentage{
    background:none;
    color:#1a8fad;
    font-size: 2em;
    display: block;
    height: auto;
    width:auto;
    padding: 10px 0;
}
ul.securitysteps{
    display: inline-block;
    vertical-align: top;
    width:22%;
    margin: 100px 0 0 215px;
    padding: 0;
    position: relative;
    z-index: 3;
}
.securitysteps li{
    background:#fff;
    padding: 20px;
    margin: 0 0 40px 0;
    height: 150px;
}
.securitysteps .it-details{
    width:100%;
}
ul.securitysteps2{
    width:57%;
    margin: 16.7% 0 0 0;
    z-index: 1;
}
.securitysteps2 li{
    display: inline-block;
    width:35%;
    margin: 0 0 50px 40px;
}
.securitysteps2 li:last-child{
    background:#bd3b53;
    color:#fff;
    position: relative;
}
.securitysteps2 li:last-child .it-percentage{
    color:#fff;
}
.lock-creative{
    position: absolute;
    top: -72px;
    right: 20px;
    text-align: right;
    transition: all .5s ease-in-out;
    z-index:2;
    transition-delay: .3s;
}
.lock-creative img{
    width:90%;
}
.lock-cover{
    background: #bd3b53;
    display: block;
    height: 35px;
    width: 100%;
    text-align: right;
    position: absolute;
    top: 0px;
    z-index: 3;
    right: 0;
    transition: all .5s ease-in-out;
    transition-delay: .6s;
}
#securitylock.animate .lock-creative{
    top: -106px;
}
#securitylock.animate .lock-cover{
    opacity: 0;
}
.doorlock{
    position: absolute;
    bottom: -57px;
    left: -50px;
    z-index: 2;
}
.doorlock img{
    width:83%;
}
ul.packwell-list{
    text-align: center;
    margin: 100px 0 0 0;
}
ul.packwell-list li{
    width: 27%;
    display: inline-block;
    background: #fff;
    box-shadow: 0 1px 3px #ddd;
    text-align: center;
    margin: 0 3%;
    vertical-align: top;
    min-height: 370px;
    transition: all .5s ease-in-out;
}
ul.packwell-list li:hover{
    transform: scale(1.05);
    box-shadow: 1px 2px 3px #aaa;
}
ul.packwell-list li h3{
    margin:10px 0;
}
ul.packwell-list li img{
    width:100%;
}
ul.packwell-list li p{
    padding: 10px 15px;
}
ul.packwell-list li:nth-child(2){position: relative;}
ul.packwell-list .it-percentage{
    background:#002b5f;
    margin: -40px 0 0 0;
}
ul.packwell-list .cloud-notify{
    position: absolute;
    bottom: 70px;
    right: -40px;
}
ul.packwell-list .cloud-notify p{
    padding: 0;
}
ul.packwell-list .cloud-notify h3{
    margin: 10px 0 0 0;
}
footer{
    text-align: center;
    background: #1d99b3;
    padding: 200px 0 0 0;
    position: relative;
}
.footer-cont{
    background:#002b5f;
    color:#fff;
    padding: 20px;
    text-align: center;
    margin: -8px 0 0 0;
}
.footer-container{
    position: absolute;
    bottom: 0;
    width:100%;
}
.footer-container a{display: block;}
.survey-note{
    color:#708eb3;
}
#itbusiness .container, #itclouds .container, #securitylock .container, #packwell .container{
    opacity: 0;
    transition: all .5s ease-in-out;
}
#itbusiness.animate .container, #itclouds.animate .container, #securitylock.animate .container, #packwell.animate .container, #footersection.animate .container{
    opacity: 1;
}
/**************************************  Responsive style starts **************************************/
@media (min-width: 2000px) {
    .container{
        -ms-transform: scale(1.5); /* IE 9 */
        -webkit-transform: scale(1.5); /* Safari */
        transform: scale(1.5);
        margin: 10% auto 0 auto;
    }
    .footer-container{transform: scale(1);}
    .footer-container a img{transform: scale(1.5);margin: 0px 0px 131px;}
}
@media (max-width: 1400px) {
    .container{ width:1000px;}
    .footer-container{width:100%;}
    .infy-it-flow{left: 33%;}
    ul.securitysteps{margin: 100px 0px 0px 200px;}
    ul.securitysteps2{margin: 23% 0px 0px;}
    .doorlock img {width: 87%;}
    .connect-line2 img{left: 433px;}
    .itbusiness-flow ul li:nth-child(2){margin: 20px 20px 20px 30%;}
    .itbusiness-flow ul li:nth-child(3){margin: 19.5% 20px 20px;}
    .itbusiness-flow ul li{width:28%;}
    .infy-it-flow img{width: 67%;}
}
@media (max-width: 1000px) {
    .container{ width:100%;}
    .infy-banner-cont{margin: 2%;}
    .infy-it-flow{left: 35%;}
    .infy-it-flow img{width: 46%;}
    .itbusiness-flow ul li:nth-child(3){margin: 5% 20px 20px;}
    .itbusiness-flow .cloud-notify{top: 65px;left: 70%;}
    ul.cloud-steps li{width:90%;}
    ul.cloud-steps li:nth-child(2){width:80%;}
    ul.cloud-steps li:nth-child(3){width:75%;padding-left: 15%;}
    ul.securitysteps{margin: 100px 0px 0px 20px;width: 35%;}
    ul.securitysteps2{width: 57%;margin: 28% 0px 0px;}
    .securitysteps2 li{margin: 0px 0px 50px 15px;}
    .doorlock{display: none;}
    .connect-line2{width: 45%;}
    #securitylock.animate .lock-creative{top: -74px;}
    .lock-creative img{width: 80%;}
    ul.packwell-list .cloud-notify{bottom: 120px;}
    #footersection .container{opacity: 1;}
}
@media (max-width: 600px) {
    .infy-banner{margin: 50px 0px 0px;}
    .infy-banner-cont{width: 90%;margin: 5%;}
    .infy-banner-creative{width:80%;}
    .itbusiness-flow ul li{width:80%;}
    .itbusiness-flow ul li:nth-child(2), .itbusiness-flow ul li:nth-child(3){margin:20px;}
    .infy-it-flow{display: none;}
    ul.cloud-steps li div.cloud-steps-inner{width: 50%;}
    ul.cloud-steps li:nth-child(2), ul.cloud-steps li:nth-child(3){padding-left: 0;}
    .cloud-notify{position: absolute;top: -40px;left: 100px;}
    ul.cloud-steps li:nth-child(2), ul.cloud-steps li:nth-child(3){width:90%;}
    .cloud-step-arrow{right: 20%;top: 70%;}
    ul.securitysteps{width:89%;}
    ul.securitysteps2{width:96%;margin: 2% 0px 0 5px;}
    .securitysteps2 li{width:82%;margin: 0px 0px 120px 15px;}
    .securitysteps2 li:nth-child(2){width:82%;margin-bottom:50px;}
    .connect-line2, .connect-line1 img, .connect-line2 img{display: none;}
    #securitylock.animate .lock-creative{top: -93px;}
    ul.packwell-list li{width:90%;margin-bottom: 50px;}
    ul.packwell-list .cloud-notify{top: 62%;left: 74%;}
    footer img{width:100%;}
    #packwell{padding: 50px 0px 50px;}
    footer{padding: 100px 0px 0px;}
}