* { box-sizing:border-box;}
body { background:#fff; margin:0; overflow-x:hidden; overflow-y:hidden; background-repeat:no-repeat; background-attachment:fixed;z-index:-1; font-family:"Quicksand",sans-serif;}
#wrapper { position:relative; width:1180px; margin:0 auto; height:645px; overflow:hidden; top:0px;}
.headerDiv {  position:relative; width:1180px; margin:0 auto;}
a { color:#fff; text-decoration:none;}
a:hover { color:#045ecc;}
#homePage {display:inline-block; width:100%; position:relative; height:100%}
.heading { margin-top:0; color:#049cff; font-family:"Quicksand",sans-serif; font-size:28px; font-weight:500; text-align:left;}

/*Content Select*/

::-moz-selection { color:#032181; background:#fff;}
::selection { color:#032181; background:#fff;}

/*Content Select end*/

/*Window scroll*/

::-webkit-scrollbar-track { background:transparent;}
::-webkit-scrollbar-thumb { background:transparent;}

/*Window scroll end*/

/*loader*/

#loading{ background:#fff; height:100%; width:100%; position:fixed; z-index:1; margin-top:0px; top:0px; left:0; z-index:9999; overflow:hidden; display:block;}

#loader { width:100%; position:relative; top:20%; left:0; bottom:0;}

#loader .text { position:absolute; top:20%; left:0; right:0; width:100%; height:150px; text-align:center; color:white; font-size:2em; font-family:'Orbitron', sans-serif; text-shadow:-3px 3px 0 rgba(150,150,150,0.1); -webkit-transform:rotateX(20deg);}

@keyframes hide {
  0% { opacity:1;}
  50% { opacity:0.1;}
  100% { opacity:1;}
}
@-webkit-keyframes hide {
  0% { opacity:1;}
  50% { opacity:0.1;}
  100% { opacity:1;}
}
@-moz-keyframes hide {
  0% { opacity:1;}
  50% { opacity:0.1;}
  100% { opacity:1;}
}
@-o-keyframes hide {
  0% { opacity:1;}
  50% { opacity:0.1;}
  100% { opacity:1;}
}
#loader-outer-circle { border:2px solid #ff384f00; margin:6% auto; text-align:center; width:204px; height:204px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; -webkit-animation:turning_cw 8s infinite; -moz-animation:turning_cw 8s infinite; animation:turning_cw 8s infinite; position:relative; border-top-color:#ff384f;}
#loader-outer-circle2 { border:1px solid #ff384f; text-align:center; width:202px; height:202px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%;}
#loader-outer-circle2:before { content:""; width:8px; height:8px; background:#ff384f; border-radius:100%; position:absolute; bottom:5px; right:138px;}

#loader-inner-circle {border:2px solid #ffc34a00; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); margin:7px; width:184px; height:184px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; -webkit-animation:turning_acw 3s infinite; -moz-animation:turning_acw 3s infinite; animation:turning_acw 3s infinite; border-right-color:#ffc34a; border-left-color:#ffc34a;}
#loader-inner-circle2 { border:1px solid #ffc34a; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); width:182px; height:182px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%;}
#loader-inner-circle2:before { content:""; width:8px; height:8px; background:#ffc34a; border-radius:100%; position:absolute; bottom:-3px; right:82px;}

#loader-center-circle { border:2px solid #5da46f; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); position:absolute; margin:10px; width:160px; height:160px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; -webkit-animation:turning_cw 5s infinite; -moz-animation:turning_cw 5s infinite; animation:turning_cw 5s infinite; border-bottom-color:#5da46f; }

/*loader end*/

/*background*/

.anim, .anim svg { position:fixed; top:0; z-index:-1; opacity:0.4; width:100%; height:100%;}
.anim path { stroke-width:2;}

/*background end*/

/*header*/

.header { display:inline-block; width:100%; padding:25px 50px 10PX;}
.logo { display:inline-block;}
.logo a { display:inline-block;}
.logo a img { width:120px;}

.menu { display:inline-block; width:70%; float:right; text-align:right;}
.menu ul { padding:0; margin:0;}
.menu ul li { list-style:none; display:inline-block; position:relative; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); width:50px; height:50px; margin:10px; text-align:center;}
.menu ul li a { background:none; border:2px solid #fff; border-radius:5px; color:#fff; display:block; font-size:1.6em; font-weight:bold; position:relative; text-transform:uppercase; width:50px; height:50px; display:inline-block; text-align:center; cursor:pointer; padding:8px;}
.menu ul li a[title="Mail"] { color:#3fb3ec; border-color:#3fb3ec;}
.menu ul li a[title="Mail"] svg path { fill:#3fb3ec;}
.menu ul li a[title="Login"] { color:#7a64c6; border-color:#7a64c6;}
.menu ul li a[title="Login"] svg path { fill:#7a64c6;}
.menu ul li a[title="Menu"] { color:#ff4b81; border-color:#ff4b81;}
.menu ul li a[title="Menu"] svg path { fill:#ff4b81;}

.menu ul li a:hover { color:#fff; background:#fff;}
.menu ul li:hover:before { content:''; width:40px; height:40px; background:#000; position:absolute; top:16px; left:6px; display:inline-block; background:linear-gradient(45deg, rgba(0, 0, 0, 0.73), #fff0); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-107deg); border-radius:4px; filter:blur(1px);}
.menu ul li a[title="Mail"]:hover { background:#3fb3ec;}
.menu ul li a[title="Mail"]:hover svg path { fill:#fff;}
.menu ul li a[title="Login"]:hover { background:#7a64c6;}
.menu ul li a[title="Login"]:hover svg path { fill:#fff;}
.menu ul li a[title="Menu"]:hover { background:#ff4b81;}
.menu ul li a[title="Menu"]:hover svg path { fill:#fff;}

.menu ul li a svg { -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
.menu ul li a:hover svg .login, .menu ul li a:hover svg .menugrid, .menu ul li a:hover svg .mail { fill:#0468d7;}
.menu ul li a svg:hover .login, .menu ul li a svg:hover .menugrid, .menu ul li a svg:hover .mail { 
  transition:200ms; transition-timing-function:ease-in-out; -webkit-transition:200ms; -webkit-transition-timing-function:ease-in-out;}

/*menu animation*/

.clearfix:before, .clearfix:after { content:''; display:table; }
.clearfix:after { clear:both;}
a { color:#99cc33; text-decoration:none; outline:none;}
a:hover, a:focus { color:#373e18;}
.codrops-demos a, section button { display:inline-block; background:#a9a9a9; color:#fff; font-weight:400; padding:10px 20px; margin:5px; text-transform:uppercase; border-radius:2px; letter-spacing:1px;}
.codrops-demos a:hover, .codrops-demos a:active, .codrops-demos a.current-demo { background:#777;}
section { padding:1em 2em 5em; text-align:center; font-size:1.5em;}
section p { max-width:600px; margin:0 auto; padding:20px 0;}
@media screen and (max-width:25em) {
  .codrops-icon span { display:none;}
}
/* Overlay style */

.overlay { position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(153,204,51,0.9); z-index:99}
.overlay .overlay-close { width:80px; height:80px; position:absolute; right:20px; top:20px; overflow:hidden; border:none; background:url(../images/cross.png) no-repeat center center; text-indent:200%; color:transparent; outline:none; z-index:100; cursor:pointer;}

/* Menu style */

.overlay nav { text-align:center; position:relative; top:50%; height:60%; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.overlay ul { list-style:none; padding:0; margin:0 auto; display:inline-block; height:100%; position:relative;}
.overlay ul li { display:block; height:20%; height:calc(100% / 8); min-height:54px; -webkit-backface-visibility:hidden; backface-visibility:hidden;}
.overlay ul li a { font-size:30px; font-weight:400; display:block; color:#fff; -webkit-transition:color 0.2s; transition:color 0.2s; font-family:"Quicksand",sans-serif;}
.overlay ul li a:hover, .overlay ul li a:focus { color:#f0f0f0; border-bottom:2px solid #fff}

/* Effects */

.overlay-genie { background:transparent; visibility:hidden; opacity:0; -webkit-transition:opacity 0.3s 0.2s, visibility 0s 0.6s; transition:opacity 0.3s 0.2s, visibility 0s 0.6s;}
.overlay-genie.open { visibility:visible; opacity:1; -webkit-transition:opacity 0.3s; transition:opacity 0.3s; z-index:6;}
.overlay-genie svg { position:absolute; top:0; left:0;}
.overlay-genie .overlay-path { fill:rgba(3, 36, 132, 0.96);}
.overlay-genie nav { opacity:0; -webkit-transform:scale(0.8) translateY(-48%); transform:scale(0.8) translateY(-48%); -webkit-transition:opacity 0.3s 0.3s, -webkit-transform 0.3s 0.3s; transition:opacity 0.3s 0.3s, transform 0.3s 0.3s;}
.overlay-genie .overlay-close { opacity:0; -webkit-transition:opacity 0.3s; transition:opacity 0.3s;}
.overlay-genie.open nav, .overlay-genie.open .overlay-close { opacity:1; -webkit-transition-delay:0.3s; transition-delay:0.3s;}
.overlay-genie.open nav { -webkit-transform:scale(1) translateY(-50%); transform:scale(1) translateY(-50%);}
.overlay-genie.close nav, .overlay-genie.close .overlay-close { -webkit-transition-delay:0s; transition-delay:0s;}

/*menu animation end*/
/*header end*/

/*Center Circle*/

#saracircle { width:100%; height:300px; margin:auto; position:absolute; bottom:0; top:-15%;}

#outer-circle { border:2px solid #ff384f00; margin:0 auto; text-align:center; width:300px; height:300px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; -webkit-animation:turning_cw 8s infinite; -moz-animation:turning_cw 8s infinite; animation:turning_cw 8s infinite; position:relative; border-top-color:#ff384f;}
#outer-circle2 { border:1px solid #ff384f; text-align:center; width:297px; height:297px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%;}
#outer-circle2:before { content:""; width:8px; height:8px; background:#ff384f; border-radius:100%; position:absolute; bottom:-4px; right:138px;}

#inner-circle { border:2px solid #ffc34a00; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); margin:10px; width:274px; height:274px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; -webkit-animation:turning_acw 3s infinite; -moz-animation:turning_acw 3s infinite; animation:turning_acw 3s infinite; border-right-color:#ffc34a; border-left-color:#ffc34a;}
#inner-circle2 { border:1px solid #ffc34a; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); width:271px; height:270px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%;}
#inner-circle2:before { content:""; width:8px; height:8px; background:#ffc34a; border-radius:100%; position:absolute; bottom:6px; right:186px;}

#center-circle { border:2px solid #5da46f00; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); position:absolute; margin:10px; width:248px; height:249px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; -webkit-animation:turning_cw 5s infinite; -moz-animation:turning_cw 5s infinite; animation:turning_cw 5s infinite; border-bottom-color:#5da46f;}
#center-circle2 { border:1px solid #5da46f; -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); transform:rotate(360deg); width:245px; height:245px; -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%;}
#center-circle2:before {content:""; width:8px; height:8px; background:#5da46f; border-radius:100%; position:absolute; top:-4px; right:119px;}

#circle { width:225px; height:225px; background:#fff; border-radius:100%; margin:9px;}

#content { position:absolute; top:32%; left:31.5%; width:425px; height:90px; -moz-border-radius:100%; text-align:center; line-height:35px; font-size:30px; background:#fff; color:#049cff; font-family:"Quicksand",sans-serif; font-weight:500; padding-top:10px;}
#content h1 { margin:0; font-size:26px; font-weight:500;}
#greyCircle { width:300px; height:125px; display:inline-block; background:#fff; position:absolute; top:60%; left:calc(50% - 150px); mix-blend-mode:color;}

:root { --bg:#032484; --primary:#78FFCD; --solid:#fff; --btn-w:10em; --dot-w:calc(var(--btn-w)*.2); --tr-X:calc(var(--btn-w) - var(--dot-w));}
*:before, *:after { box-sizing:border-box;}
.btn { position:relative; margin:10px auto; width:var(--btn-w); color:var(--bg); text-align:center; font-size:13px; line-height:2em; cursor:pointer; font-family:"Quicksand",sans-serif; font-weight:600;}
.btn a { color:#ff4b81;}
.dot { content:''; position:absolute; top:0; width:var(--dot-w); height:100%; border-radius:100%; transition:all 300ms ease; display:none;}
.dot:after { content:''; position:absolute; left:calc(50% - .4em); top:-.4em; height:.8em; width:.8em; background:var(--solid); border-radius:1em; border:.25em solid var(--solid); box-shadow:0 0 .7em var(--solid), 0 0 2em var(--primary);}
.btn:hover { border:.15em solid var(--solid);}
.btn:hover .dot, .btn:focus .dot { animation:atom 4s infinite linear; display:block;}
@keyframes atom {
  0% { transform:translateX(0) rotate(0);}
  30%{ transform:translateX(var(--tr-X)) rotate(0);}
  50% { transform:translateX(var(--tr-X)) rotate(180deg);}
  80% { transform:translateX(0) rotate(180deg);}
  100% { transform:translateX(0) rotate(360deg);}
}
@-webkit-keyframes aura {
  0%{ text-shadow:0 2px 2px #000;}      
  50%{ text-shadow:0 10px 10px #000; line-height:190px;}      
  100%{ text-shadow:0 2px 10px #000;}
}
@-webkit-keyframes turning_cw {
  0%{ -webkit-transform:rotate(0deg);}
  100%{ -webkit-transform:rotate(360deg);}
}
@-webkit-keyframes turning_acw {
  0%{ -webkit-transform:rotate(360deg);}
  100%{ -webkit-transform:rotate(0deg);}
}
@-moz-keyframes aura {
  0%{ text-shadow:0 2px 2px #000;}
  50%{ text-shadow:0 10px 10px #000; line-height:190px;}    
  100%{ text-shadow:0 2px 10px #000;}
}
@-moz-keyframes turning_cw {
  0%{ -moz-transform:rotate(0deg);}
  100%{ -moz-transform:rotate(360deg);}
}
@-moz-keyframes turning_acw {
  0%{ -moz-transform:rotate(360deg);}
  100%{ -moz-transform:rotate(0deg);}
}
@keyframes aura {
  0%{ text-shadow:0 2px 2px #000;}     
  50%{ text-shadow:0 10px 10px #000; line-height:190px;}    
  100%{ text-shadow:0 2px 10px #000;}
}
@keyframes turning_cw {
  0%{
    transform:rotate(0deg);}
  100%{
    transform:rotate(360deg);}
}
@keyframes turning_acw {
  0%{ transform:rotate(360deg);}
  100%{ transform:rotate(0deg);}
}

/*Center Circle end*/

/*Svg Lines*/

.line1 { position:absolute; top:2%; left:715px;}
.line2 { position:absolute; top:-10%; left:290px;}
.line3 { position:absolute; top:49%; left:-11px;}
.line4 { position:absolute; bottom:14%; left:0%; width:100%;}
.line3 line, .line3 polyline { stroke:#888 !important;}

/*Svg Lines end*/

.drops { position:absolute; top:260px; left:75px;}
/*Svg Circle*/
svg #point1 { fill:none; stroke:#049cff; stroke-width:2; stroke-dasharray:1000; stroke-dashoffset:1000; -webkit-animation:dash 20s linear forwards; animation:dash 20s linear forwards;}
svg #point2 { fill:#ff4b81; stroke-dasharray:1000; stroke-dashoffset:1000; -webkit-animation:dash 20s linear forwards; animation:dash 20s linear forwards;}
#graph4 { position:absolute; top:0; left:0 }

@-webkit-keyframes dash {
  to { stroke-dashoffset:0;}
}
@keyframes dash {
  to { stroke-dashoffset:0;}
}

/*Salary*/

#salary{ position:absolute; margin:auto; left:48%; right:0%; top:26%; width:90px;}
#salary h4 { color:#049cff; font-family:"Quicksand",sans-serif; text-align:right; font-size:14px; list-style:none; display:inline-block; white-space:nowrap; overflow:hidden; animation:type 5s steps(60, end); width:47px; position:relative; left:40px; margin:9px 0; height:27px; padding-top:4px; font-weight:500}
#salary h4:before { content:""; width:29px; height:2px; background:#049cff; position:absolute; top:0px; right:-5px;}
#salary h4:after { content:""; width:47px; height:2px; background:#049cff; position:absolute; top:25px; right:-1px;}
#salary ul { margin:0; list-style:none; width:90px; position:relative; padding:0; height:10px;}
#salary li { position:absolute; width:9px; height:0; background-color:#ff4b81; bottom:2px;}
  
@keyframes sequence1 {
  0%{ height:10px;}
  50%{ height:50px;}
  100%{ height:10px;}
}
@keyframes sequence2 {
  0%{ height:20px;}
  50%{ height:65px;}
  100%{ height:20px;}
}

#salary li:nth-child(1){ left:0; animation:sequence1 6s ease infinite -0.1s;}
#salary li:nth-child(2){ left:15px; animation:sequence2 6s ease infinite 0.1s;}
#salary li:nth-child(3){ left:30px; animation:sequence1 6s ease-in-out infinite 0.2s;}
#salary li:nth-child(4){ left:45px; animation:sequence2 6s ease-in infinite 0.3s;}
#salary li:nth-child(5){ left:60px; animation:sequence1 6s ease-in-out infinite 0.4s;}
#salary li:nth-child(6){ left:75px; animation:sequence2 6s ease infinite 0.5s;}

.salaryLine{ position:absolute; margin:auto; left:0%; right:0; top:36%; width:90px;}
.salaryLine ul { margin:0; list-style:none; width:90px; position:relative; padding:0; height:10px;}
.salaryLine li { position:absolute; width:10px !important; height:1px !important; background-color:#7a64c6 !important; bottom:0; animation:none !important;}

/*Salary end*/

/*SARA Screen*/

#screen { position:absolute; top:-3%; left:0%;}
.drawings { position:relative; max-height:600px;}
.illustration { position:absolute; top:48%; left:50%; max-height:100%; max-width:100%; opacity:0; -webkit-transform:translateX(-50%) translateY(-50%); transform:translateX(-50%) translateY(-50%);}
.line-drawing, .illustration { -webkit-transition:opacity 0.5s; transition:opacity 0.5s;}
.line-drawing path { fill:none; stroke:white; stroke-width:2; }

/*slider*/
#slider{ width:234px; height:128px; position:absolute; overflow:hidden; top:28%; left:19%; animation:cssAnimation 0s 5s forwards; visibility:hidden;}
  @keyframes cssAnimation {
  to   { visibility:visible; }
}
.slides{ width:400%; height:100%; position:relative; -webkit-animation:slide 30s infinite; -moz-animation:slide 30s infinite; animation:slide 30s infinite;}
.slider{ width:25%; height:100%; float:left; position:relative; z-index:1; overflow:hidden;}
.slide img{ width:100%; height:100%;}
.slide img{ width:100%; height:100%;}
.image{ width:100%; height:100%;}
.image img{ width:100%; height:100%;}
@-webkit-keyframes slide{
  0%,100%{ margin-left:0%;}
  21%{ margin-left:0%;}
  25%{ margin-left:-100%;}
  46%{ margin-left:-100%;}
  50%{ margin-left:-200%;}
  71%{ margin-left:-200%;}
  75%{ margin-left:-300%;}
  96%{ margin-left:-300%;}
}
@-moz-keyframes slide{
  0%,100%{ margin-left:0%;}
  21%{ margin-left:0%;}
  25%{ margin-left:-100%;}
  46%{ margin-left:-100%;}
  50%{ margin-left:-200%;}
  71%{ margin-left:-200%;}
  75%{ margin-left:-300%;}
  96%{ margin-left:-300%;}
}
@keyframes slide{
  0%,100%{ margin-left:0%;}
  21%{ margin-left:0%;}
  25%{ margin-left:-100%;}
  46%{ margin-left:-100%;}
  50%{ margin-left:-200%;}
  71%{ margin-left:-200%;}
  75%{ margin-left:-300%;}
  96%{ margin-left:-300%;}
}
/*SARA Screen end*/ 

/*Wishes*/
.wishes { width:100%; -webkit-perspective:600; position:relative; top:105px; z-index:1;}
.shape { margin:0 auto; width:80px; height:80px; -webkit-animation:spin 20s infinite linear; -webkit-transform-style:preserve-3d; opacity:0;}
.shape a { color:#aaa; text-decoration:none; position:relative; top:38%; left:19%; font-size:16px; cursor:pointer; font-family:"Quicksand",sans-serif;}
.shape > div { border:2px solid #aaa; position:absolute; width:80px; height:80px; -webkit-border-radius:4px; -webkit-transition:-webkit-transform 2s;}
.shape .one a { color:#ff4b81;}
.shape .two a { color:#7a64c6;}
.shape .three a { color:#3fb3ec;}
.shape .four a { color:#5da46f;}
.shape .five a { color:#ffc34a;}
.shape .six a { color:#000;}
/* This is where the 3D magic happens */
@-webkit-keyframes spin {
  from { -webkit-transform:rotateY(0) rotateX(0); }
  to   { -webkit-transform:rotateY(-360deg) rotateX(360deg); }
}
.rect { position:absolute; top:-76px; left:-82px; z-index:-1}
/* 3D positioning for each of the images/links */
.one { -webkit-transform:rotateX(90deg) translateZ(40px); }
.two { -webkit-transform:translateZ(40px); }
.three { -webkit-transform:rotateY(90deg) translateZ(40px); }
.four { -webkit-transform:rotateY(180deg) translateZ(40px); }
.five { -webkit-transform:rotateY(-90deg) translateZ(40px); }
.six { -webkit-transform:rotateX(-90deg) translateZ(40px); }

.show { opacity:1;}
.hide { opacity:0;}

/*wishes end*/

.task { width:434px; position:absolute; bottom:16%; right:-9.2%; display:inline-block;} 
.task h3 { position:absolute; left:143px; top:44px; font-family:"Quicksand",sans-serif; color:#000; font-size:14px; font-weight:500;} 

/*features*/

.features { position:absolute; left:125px; top:95px; display:inline-block; width:100%; }
.features ul { margin:0;padding:0;}
.features ul li { list-style:none; display:inline-block; width:55px; text-align:center;}
.features ul li a { list-style:none; display:inline-block; color:#fff; font-family:"Quicksand",sans-serif; font-size:14px; white-space:nowrap; overflow:hidden; width:100%; text-align:right;}

/*features end*/

/*features1*/

.features1 { position:absolute; left:45px; top:92px; display:inline-block; width:100%;}
.features1 ul { margin:0;padding:0;}
.features1 ul li { list-style:none; display:inline-block; width:100px; text-align:center; margin-right:5px;}
.features1 ul li a { list-style:none; display:inline-block; color:#888; font-family:"Quicksand",sans-serif; font-size:14px; white-space:nowrap; overflow:hidden; animation:type 5s steps(60, end); width:100px; border-top:1px solid #888; padding-top:8px; padding-bottom:8px; font-weight:500;}

.features1btn { border:none; outline:none; position:relative; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}
.features1btn:after { content:''; position:absolute; z-index:-1; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s;}

.features1btn-1b:after { width:100%; height:0; top:0; left:0; background:#888;}
.features1btn-1b:hover,
.features1btn-1b:active { color:#fff;}
.features1btn-1b:hover:after,
.features1btn-1b:active:after { height:100%;}

/*features1 end*/

.tagLine { position:absolute; left:0; top:132px; display:inline-block; width:100%; padding-left:45px;}
.tagLine h4 { list-style:none; display:inline-block; color:#888; font-family:"Quicksand",sans-serif; font-size:14px; white-space:nowrap; overflow:hidden; animation:type 5s steps(60, end); margin:0; width:500px; font-weight:500; letter-spacing:3px;}
.copyright1 { display:inline-block; font-family:"Quicksand",sans-serif; font-size:12px; font-weight:400; color:#888; text-align:right; position:absolute; right:35px;}

@keyframes type{ 
  from { width:0;} 
} 

#dashedLine { background-image:linear-gradient( to right, #888 50%, transparent 0%); background-size:20px 6px; background-repeat:repeat-x; background-position:0% bottom; animation-name:border-dance; animation-duration:30s; animation-timing-function:linear; animation-iteration-count:infinite; width:303px; position:absolute; top:79px; right:37px; color:rgba(4, 88, 196, 0);}

@keyframes border-dance {
  from { background-position:0% bottom;}
  to { background-position:100% bottom;}
}

/*ServicesPage*/

#services { display:block; text-align:center;position:relative; width:1104px; margin:0 auto; height:580px; overflow:hidden; top:-2px; padding-top:50px; overflow:hidden;}
.closeable { overflow:hidden; display:inline-block; width:18%; height:118px; border:1px solid #888; padding:20px; color:#888; font-size:16px; font-family:"Quicksand",sans-serif; text-align:center; cursor:pointer; border-radius:4px; border-bottom:6px solid rgba(136, 136, 136, 0.82); margin:5px;}
.closeable:hover { box-shadow:1px 1px 53px rgba(0, 0, 0, 0.30);}

/*service Hover*/
.closeable, .closeable:before, .closeable:after { box-sizing:border-box; -webkit-transition:all 1s -0.7s ease-out; -moz-transition:all 1s -0.7s ease-out; -o-transition:all 1s -0.7s ease-out; -ms-transition:all 1s -0.7s ease-out; transition:all 1s -0.7s ease-out;}
[class^="serviceDiv"] { position:relative; display:inline-block;}

.serviceDiv:before, .serviceDiv:after { content:''; position:absolute; top:0; right:0; bottom:0; left:0; border-top:56px solid rgba(255, 255, 255, 0.1); border-bottom:56px solid rgba(255, 255, 255, 0.1);}
.serviceDiv:before { border-right:40px solid transparent; -webkit-transform:translateX(-100%); transform:translateX(-100%);}
.serviceDiv:after { border-left:40px solid transparent; -webkit-transform:translateX(100%); transform:translateX(100%);}
.serviceDiv:hover { color:#049cff;}
.serviceDiv:hover:before { -webkit-transform:translateX(-30%); transform:translateX(-30%);}
.serviceDiv:hover:after { -webkit-transform:translateX(30%); transform:translateX(30%);}

/*service Hover end*/

.close { height:500px; width:98%; text-align:left; display:inline-block !important; border:none; cursor:default; padding:0}
.close svg { height:100px !important; width:100px !important; position:absolute;}
.close svg path { fill:rgba(255, 255, 255, 0.22);}
.close svg polygon { fill:rgba(255, 255, 255, 0.22);}
.close svg rect { fill:rgba(255, 255, 255, 0.22);}
.close .wishes {  stroke:rgba(255, 255, 255, 0.22)}
.close p { display:none;}
.close .detail { display:inline-block; width:100%;}
.close .content { display:inline-block; width:50%; float:left; height:330px; overflow:auto;}
.close .content div { display:inline-block; margin-top:10px;}

/*.close .content scroll*/

.close .content::-webkit-scrollbar-track { border-radius:10px; background-color:transparent;}
.close .content::-webkit-scrollbar { width:12px; background-color:transparent;}
.close .content::-webkit-scrollbar-thumb { background:transparent;}

/*.close .content scroll end*/

.close .detail h1 { font-size:25px; font-weight:500; margin:0;}
.close .detail h2 { font-size:22px; font-weight:400; margin:0;}
.close .content span { font-size:15px; font-weight:400; line-height:20px; margin:0; border-left:1px solid #fff; padding-left:10px; display:inline-block; padding-bottom:10px;}
.close:hover { box-shadow:none;}
.close .content strong { border-left:1px solid #fff; padding-left:10px; display:inline-block;}
.close .serviceImg { display:inline-block; width:50%; overflow:hidden; text-align:right; padding-left:100px;}
.close .serviceImg img { width:100%;}

.button { display:none; position:absolute; bottom:29px; right:90px; z-index:1; background:none; border:none; font-size:20px; font-family:"Quicksand",sans-serif; color:#fff; cursor:pointer;}
.button img { position:absolute; top:7px; right:-15px;}
.button:focus { outline:none;}

/*Exit Bittun*/

.exitBtn {  font-family:"Quicksand",sans-serif; letter-spacing:1px; background:none; color:#888;  outline:none; border:none; height:50px; width:116px; font-size:16px; z-index:2; transition:.01s .23s ease-out all; overflow:hidden;}
.exitBtn:before { content:''; position:absolute; left:0; top:0; height:100%; width:55%; background:#eee; z-index:-1; transition:.3s ease-in all;}
.exitBtn:after { content:''; position:absolute; left:-5%; top:5%; height:90%; width:5%; background:#049cff; z-index:-1; transition:.4s .02s ease-in all;}
.exitBtn:hover { cursor:pointer; color:transparent;}
.exitBtn:hover:before { left:100%; width:25%;}
.exitBtn:hover:after { left:100%; width:70%;}
.exitBtn:hover .exit-icon-right.exitAfter:after { left:-42px; color:#049cff; transition:.2s .2s ease all;}
.exitBtn:hover .exit-icon-right.exitAfter:before { left:-84px; top:16px; opacity:1.2; color:#049cff;}

.exit-icon-right { position:absolute; top:0; right:0; font-size:16px}
.exit-icon-right:after { font-family:"FontAwesome"; content:'\2192'; font-size:24px; display:inline-block; position:relative; top:26px; -webkit-transform:translate3D(0, -50%, 0);         transform:translate3D(0, -50%, 0);}
.exit-icon-right.exitAfter:after { left:-250px; color:black; transition:.15s .25s ease left, .5s .05s ease color;}
.exit-icon-right.exitAfter:before { content:'Exit'; position:absolute; left:-230px; top:14px; opacity:0; transition:.2s ease-in all;}

/*Exit Bittun end*/

/*Thank you Msg*/
  .thankuMsgCover { background:rgba(0, 0, 0, 0.70); position:fixed; top:0; left:0; width:100%; height:100%; bottom:0; z-index:3; text-align:center; padding:17% 0; display:none;}
  .thankuMsg { font-size:20px; background:#fff; display:inline-block; width:300px; border-radius:6px; padding:15px;}
  .msgClick { background:#023f83; border:none; color:#fff; padding:8px 25px; margin-top:19px; border-radius:28px; font-size:14px; cursor:pointer;}
  .msgClick:focus { outline:none;}

/*Thank you Msg*/

/*ServicesPage end*/

/*About Us*/

#about { display:block; text-align:center;position:relative; width:1104px; margin:0 auto; overflow:hidden; top:-2px; padding-top:20px; padding-bottom:50px;}
#about .content { display:inline-block; width:100%; text-align:left; font-family:"Quicksand",sans-serif; overflow:auto; height:424px;}
#about .content h1 { display:inline-block; font-size:25px; font-weight:500; color:#fff;}
#about .content span { font-size:15px; font-weight:400; line-height:20px; margin:0; border-left:1px solid #888; padding-left:15px; color:#888; padding-bottom:10px; display:block;}

/*about scroll*/

#about .content::-webkit-scrollbar-track { border-radius:10px; background-color:transparent;}
#about .content::-webkit-scrollbar { width:12px; background-color:transparent;}
#about .content::-webkit-scrollbar-thumb { background:transparent;}
/*about scroll end*/


/*About Us end*/

/*Privacy Policy*/

#privacy { display:block; text-align:center;position:relative; width:1104px; margin:0 auto; overflow:hidden; top:-2px; padding-top:20px; padding-bottom:50px;}
#privacy .content { display:inline-block; width:100%; text-align:left; font-family:"Quicksand",sans-serif; height:424px; overflow:auto;}
#privacy .content span { font-size:16px; font-weight:400; line-height:20px; margin:0; border-left:1px solid #888; padding-left:10px; color:#888; padding-bottom:10px; display:block;}

/*privacy scroll*/

#privacy .content::-webkit-scrollbar-track { border-radius:10px; background-color:transparent;}
#privacy .content::-webkit-scrollbar { width:12px; background-color:transparent;}
#privacy .content::-webkit-scrollbar-thumb { background:transparent;}
/*privacy scroll end*/


/*Privacy Policy end*/

/*Terms and Conditions*/

#terms { display:block; text-align:center;position:relative; width:1104px; margin:0 auto; height:580px; overflow:hidden; top:-2px; padding-top:20px; overflow:auto; padding-bottom:50px;}
#terms .content { display:inline-block; width:100%; text-align:left; font-family:"Quicksand",sans-serif;}
#terms .content h1 { display:inline-block; font-size:25px; font-weight:500; color:#fff;}
#terms .content span { font-size:16px; font-weight:400; line-height:20px; margin:0; border-left:1px solid #fff; padding-left:10px; color:#fff; padding-bottom:10px; display:block;}

/*Terms scroll*/

#terms::-webkit-scrollbar-track { border-radius:10px; background-color:transparent;}
#terms::-webkit-scrollbar { width:12px; background-color:transparent;}
#terms::-webkit-scrollbar-thumb { background:transparent;}

/*Terms scroll end*/


/*Terms and Conditions end*/

/*OurClient*/

#ourClient { display:block; text-align:center;position:relative; width:1104px; margin:0 auto; overflow:hidden; top:-2px; padding-top:50px; overflow:hidden; font-family:"Quicksand",sans-serif;}
#ourClient figure { float:left; margin:10px; height:100px; width:200px; -webkit-transform:perspective(500); -webkit-transform-style:preserve-3d; -webkit-transition:.5s;}
#ourClient figure:hover { -webkit-transform:perspective(500) rotateX(90deg) translateY(-3em) translateZ(3em);}
#ourClient img { background-color:#fff; box-shadow:0 20px 15px -10px hsla(0,0%,0%,.25); display:block; width:100%; height:100%; -webkit-transition:.5s; padding:10px;}
#ourClient figure:hover img { box-shadow:none;}
#ourClient figcaption { background-color:#fff; color:#000; padding:10px 0; -webkit-transform:rotateX(-90deg); -webkit-transform-origin:100% 0; -webkit-transition:.5s; height:98px;}
#ourClient figcaption h3 { margin-bottom:0}
#ourClient figcaption span { color:#032383; font-size:12px}
#ourClient figure:hover figcaption { box-shadow:0 20px 15px -10px hsla(0,0%,0%,.25);}

/*OurClient end*/

/*comingSoon*/

#comingSoon { display:block; text-align:center;position:relative; width:1104px; margin:0 auto; overflow:hidden; top:-2px; padding-top:50px; overflow:hidden; font-family:"Quicksand",sans-serif;}
#comingSoon div { display:inline-block; text-align:center; color:#fff; font-size:60px; padding:174px 0; vertical-align:middle; height:455px; width:100%;}

/*comingSoon end*/

/*Price Table*/

#priceTable { display:block; text-align:center;position:relative; width:1104px; margin:0 auto; overflow:hidden; top:-2px; padding-top:40px;}
.priceContainer { width:100%; display:inline-block; height:485px; overflow:auto; /*background:rgba(0, 0, 0, 0.05);*/}

/*priceContainer scroll*/

.priceContainer::-webkit-scrollbar-track { background-color:transparent;}
.priceContainer::-webkit-scrollbar { background-color:transparent;}
.priceContainer::-webkit-scrollbar-thumb { background:transparent;}

/*priceContainer scroll end*/

.priceBox { width:24%; height:851px; display:inline-block; border:1px solid rgba(136, 136, 136, 0.61); /*background:linear-gradient(to right, #03218161, #046cdd70);*/}
.priceBox:hover { box-shadow:0px 0px 10px 0px rgba(0,0,0,.2); /*border:1px solid #fff; background:rgba(3, 34, 130, 0.35);*/}
.priceBox h2 { color:#fff; font-family:"Quicksand",sans-serif; font-size:26px; font-weight:500; background:rgba(0, 0, 0, 0.16); padding:21px 0; margin:0;}
.priceBox div { color:#888; font-family:"Quicksand",sans-serif; font-size:14px; padding-bottom:10px; height:50px; line-height:55px; border-bottom:1px solid rgba(136, 136, 136, 0.36);}
.priceBox .btn { padding-bottom:0; height:32px; line-height:2;}
.priceBox .btn .dot { height:32px !important}

.pricingFeatures { height:350px; overflow:auto; }

/*pricingFeatures scroll*/

.pricingFeatures::-webkit-scrollbar-track { background-color:transparent;}
.pricingFeatures::-webkit-scrollbar { background-color:transparent;}
.pricingFeatures::-webkit-scrollbar-thumb { background:transparent;}

/*pricingFeatures scroll end*/
.headings { display:inline-block; width:100%; color:#049cff; font-family:"Quicksand",sans-serif; }
.headings h2 { display:inline-block; width:24%;}
.askQuote { display:inline-block; width:1081px; text-align:right; position:fixed; bottom:6%; left:10%;}
.askQuote .askQuoteDiv { display:inline-block; width:24%;}
.askQuoteDiv a { display:inline-block; width:100%; height:100%;}

/* The Modal (background) */
.modal { display:none; position:fixed; z-index:1; padding-top:100px; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.4);}

/* Modal Content */
.modal-content { background-color:#fefefe; margin:auto; padding:20px; border:1px solid #888; width:30%; display:inline-block; border-radius:6px;}

.enquiry { width:100% !important ; display:inline-block !important; text-align:left; font-family:"Quicksand",sans-serif;}
.enquiry h4 { display:inline-block; font-family:"Quicksand",sans-serif; font-size:18px; margin:0 0 18px 0;}
.enquiryInputs input { border:1px solid #b3b3b3 !important; background:none !important; padding:10px !important; margin:2px !important; width:100%; color:#000 !important; font-size:14px !important; font-family:"Quicksand",sans-serif; font-weight:500;}
.enquiryInputs input:focus { border:1px solid #023f82 !important; outline:none;}
.enquiryInputs label { background:#fff; color:#000; margin:12px 8px !important}
.enquiryInputs textarea { border:1px solid #b3b3b3 !important; background:none !important; padding:10px !important; margin:2px !important; width:100%; font-size:14px !important; font-family:"Quicksand",sans-serif; font-weight:500; resize:none;}
.enquiryInputs textarea:focus { border:1px solid #023f82 !important; outline:none;}
/* The Close Button */
.enquiryClose { color:#aaaaaa; float:right; font-size:28px; font-weight:bold; position:absolute; right:36%; top:17%;}
.enquiryClose:hover,.enquiryClose:focus { color:#000; text-decoration:none; cursor:pointer;}

.enquirySubmitBtn { width:100%; display:inline-block; text-align:left; padding-top:12px;}
.enquirySubmitBtn div { float:left;}
.enquirySubmitBtn .btn { margin:10px 15px; background:#023f83;}
.enquirySubmitBtn .dot { position:absolute;}
.enquirySubmitBtn input { background:none; border:none; cursor:pointer; font-size:13px; font-weight:500; font-family:"Quicksand",sans-serif; width:100%; color:#fff; padding:8px; height:100%;}
.enquirySubmitBtn input:focus { outline:none;}

.priceHeading { display:none;}
.reposiveAskQuote { display:none;}

/*Price Table end*/

/*contact*/

#contact { display:block; text-align:center;position:relative; width:1104px; margin:0 auto; height:580px; overflow:hidden; top:-2px; padding-top:36px; overflow:hidden;}
.contactForm { width:48%; display:inline-block; float:left;}
.contactForm .formInputs input { background:none; border:1px solid rgba(136, 136, 136, 0.74); width:98%; padding:10px; color:#888; font-size:15px; font-family:"Quicksand",sans-serif; margin-bottom:20px}
.contactForm .formInputs input:focus { border:1px solid #888; outline:none;}
.contactForm .formInputs textarea { background:none; border:1px solid rgba(136, 136, 136, 0.74); width:98%; padding:10px; color:#888; font-size:15px; font-family:"Quicksand",sans-serif; resize:none;}
.contactForm .formInputs textarea:focus { border:1px solid #888; outline:none;}
.formMail { width:49%; display:inline-block;}

.submitBtn { width:100%; display:inline-block; text-align:left; padding:22px 0 8px 0;}
.submitBtn div { float:left;}
.submitBtn .btn { margin:10px 15px;}
.submitBtn .dot { position:absolute;}
.submitBtn input { background:none; border:none; cursor:pointer; font-size:13px; font-weight:500; font-family:"Quicksand",sans-serif; width:100%}
.submitBtn input:focus { outline:none;}

/*Input Animation*/

.wrap { vertical-align:middle;}
.wrap div { position:relative;}
label { position:absolute; top:0; font-size:14px; color:rgba(136, 136, 136, 0.74); margin:10px; padding:0 10px; -webkit-transition:top .2s ease-in-out, font-size .2s ease-in-out; transition:top .2s ease-in-out, font-size .2s ease-in-out; font-family:Quicksand;}
.active { top:-16px; font-size:12px; font-family:Quicksand; color:#049cff;}
input[type=text] { width:100%; padding:20px; border:1px solid white; font-size:20px; background-color:teal; color:white;} 
input[type=text]:focus { outline:none;}

/*Input Animation End*/

.contactLink { width:50%; display:inline-block; float:left; color:#049cff; font-family:"Quicksand",sans-serif; font-weight:500; text-align:left;padding-left:35px;}
.links { width:48%; display:inline-block; float:left; padding-bottom:20px; font-size:16px;}

/*Link Animation*/

.saraLinksCnt * { -moz-box-sizing:inherit; box-sizing:inherit; -webkit-transition-property:all; transition-property:all; -webkit-transition-duration:.6s; transition-duration:.6s; -webkit-transition-timing-function:ease; transition-timing-function:ease; display:table-cell; vertical-align:middle;}

.saraLinks { color:#888; cursor:pointer; display:block; font-size:15px; font-weight:400; max-width:100%; position:relative; width:100%; padding-top:6px;}
@media (min-width:400px) { 
  .saraLinks:nth-of-type(even) { margin-right:0;}
}
@media (min-width:600px) { 
  .saraLinks:nth-of-type(5) { margin-right:0;}
}
.saraLinks-2 { letter-spacing:0;}
.saraLinks-2:hover,
.saraLinks-2:focus,
.saraLinks-2:active { letter-spacing:1px; color:#fff;}

/*Link Animation End*/

@media screen and (max-width:800px) {
  .hi-icon { margin:15px !important;}
}
@media screen and (max-width:25em) {
  .codrops-icon span { display:none;}
}

.hi-icon { display:inline-block; font-size:0px; cursor:pointer; width:40px; height:40px; border-radius:50%; text-align:center; position:relative; z-index:1; color:#fff; line-height:56px; margin:15px 10px 0 0;}
.hi-icon:after { pointer-events:none; position:absolute; width:100%; height:100%; border-radius:50%; content:''; -webkit-box-sizing:content-box; 
  -moz-box-sizing:content-box; 
  box-sizing:content-box;}
.hi-icon:before { font-family:'ecoicon'; speak:none; font-size:24px; line-height:38px; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; display:block; -webkit-font-smoothing:antialiased;}

/* Effect 8 */
.hi-icon-effect-8 .hi-icon { background:rgba(255,255,255,0.1); -webkit-transition:-webkit-transform ease-out 0.1s, background 0.2s; -moz-transition:-moz-transform ease-out 0.1s, background 0.2s; transition:transform ease-out 0.1s, background 0.2s;}
.hi-icon-effect-8 .hi-icon:after { top:0; left:0; padding:0; z-index:-1; box-shadow:0 0 0 2px rgba(255,255,255,0.1); opacity:0; -webkit-transform:scale(0.9); -moz-transform:scale(0.9); -ms-transform:scale(0.9); transform:scale(0.9);}
.hi-icon-effect-8 .hi-icon:hover { background:rgba(255,255,255); -webkit-transform:scale(0.93); -moz-transform:scale(0.93); -ms-transform:scale(0.93); transform:scale(0.93); color:#fff;}

.hi-icon-effect-8 .hi-icon:hover svg .socialSvg { fill:#0468d7;}

.hi-icon-effect-8 .hi-icon:hover:after { -webkit-animation:sonarEffect 1.3s ease-out 75ms; -moz-animation:sonarEffect 1.3s ease-out 75ms; animation:sonarEffect 1.3s ease-out 75ms;}

@-webkit-keyframes sonarEffect { 
  0% { opacity:0.3;}
  40% { opacity:0.5; box-shadow:0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5); 
   }
  100% { box-shadow:0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5); -webkit-transform:scale(1.5); opacity:0;}
}
@-moz-keyframes sonarEffect { 
  0% { opacity:0.3;}
  40% {  opacity:0.5; box-shadow:0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);}
  100% { box-shadow:0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5); -moz-transform:scale(1.5); opacity:0;}
}
@keyframes sonarEffect { 0% { opacity:0.3; }
  40% { opacity:0.5; box-shadow:0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5); }
  100% { box-shadow:0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5); transform:scale(1.5); opacity:0; }
}


.social { width:100%; display:inline-block; font-family:"Quicksand",sans-serif; font-size:16px; color:#049cff; text-align:left; font-weight:500;}

.copyright { width:100%; display:inline-block; font-family:"Quicksand",sans-serif; font-size:12px; font-weight:400; color:#888; border-top:1px solid #888; padding:25px; margin-top:78px;}

/*contact end*/

/*Mobile App*/

#mobileApp { display:block; text-align:center;position:relative; width:1104px; margin:0 auto; height:580px; overflow:hidden; top:-2px; padding-top:50px; overflow:hidden;}
#mobileApp .content { display:inline-block; width:50%; text-align:left; font-family:"Quicksand",sans-serif; float:left;}
#mobileApp .content h1 { display:inline-block; font-size:25px; font-weight:500; color:#049cff; margin:0}
#mobileApp .content p { display:inline-block; font-size:15px; font-weight:400; color:#888; line-height:21px; margin-bottom:0; margin-top:8px;}
.appIcon { width:100%;  display:inline-block; padding-top:12px;}
.appIcon img { width:155px; display:inline-block;}

.mobileImg { width:48%; display:inline-block;}
.mobileImg img { width:100%; height:100%;}

/*Mobile App end*/

/*User*/

#users { display:block; text-align:center;position:relative; width:1104px; margin:0 auto; height:580px; overflow:hidden; top:-2px; padding-top:50px; overflow:hidden; color:transparent;}

#thumbnail-slider { margin:0 auto; width:100%; max-width:900px; padding:0; box-sizing:border-box; position:relative; -webkit-user-select:none; user-select:none;}
#thumbnail-slider div.inner { position:relative; overflow:hidden; padding:0; margin:0;}
#thumbnail-slider div.inner ul { white-space:nowrap; position:relative; left:0; top:0; list-style:none; font-size:0; padding:0; margin:0; float:left!important; width:auto!important; height:auto!important;}
#thumbnail-slider ul li { display:inline-block; margin-top:40px; margin-bottom:90px; margin-left:-30px; margin-right:-30px; -webkit-transform:scale(0.9); transform:scale(0.9); -webkit-transition:-webkit-transform 0.5s; transition:transform 0.5s; box-sizing:content-box; text-align:center; vertical-align:middle; padding:0; position:relative; list-style:none; backface-visibility:hidden; }
#thumbnail-slider ul li.active { -webkit-transform:scale(1.15); transform:scale(1.15); background-color:transparent;}

#thumbnail-slider .thumb { width:100%; height:100%; background-size:contain; background-repeat:no-repeat; background-position:center center; display:block; position:absolute; font-size:16px; cursor:inherit; -webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(rgba(255,255,255,0.4))); transition:all linear 0.4s;  text-align:left; text-decoration:none; color:#fff; white-space:normal; background:linear-gradient(to right, #032181, #046cdd) !important; border:1px solid rgba(238, 238, 238, 0.47); border-radius:20px; overflow:hidden;}
#thumbnail-slider .thumb::before { content:""; position:absolute; top:-11px; left:0; width:100px; height:100px; border-radius:0 21px 100px 3px; background:#fff; z-index:-1;}
#thumbnail-slider .thumb h2 { margin:0; display:inline-block; font-family:"Quicksand",sans-serif; padding:40px 0 0 15px; width:60%; font-size:20px; font-weight:500;}
#thumbnail-slider .thumb h4 { margin:0; display:inline-block; font-family:"Quicksand",sans-serif; padding-left:15px; font-size:13px; font-weight:400;}
#thumbnail-slider .thumb p { font-size:12px; padding:0 40px 20px; text-align:justify; font-family:"Quicksand",sans-serif; line-height:18px;}
#thumbnail-slider .thumb img { width:50px; height:50px; border-radius:100%; border:3px solid #fff; margin-left:42px; margin-top:34px; float:left;}

/*-- Start 3D --*/#thumbnail-slider .thumb { -webkit-transform:perspective(500px) translateX(1px) translateZ(-30px) rotateY(30deg); transform:perspective(500px) translateX(1px) translateZ(-30px) rotateY(30deg);}
#thumbnail-slider .active .thumb { -webkit-transform:translateX(0px) translateZ(0px) rotateY(0deg); transform:translateX(0px) translateZ(0px) rotateY(0deg);}
#thumbnail-slider li.active ~ li .thumb { -webkit-transform:perspective(500px) translateX(-1px) translateZ(-30px) rotateY(-30deg); transform:perspective(500px) translateX(-1px) translateZ(-30px) rotateY(-30deg);}
/*-- End 3D --*/

/* --------- navigation controls ------- */   
/* The nav id should be:slider id + ("-prev", "-next", and "-pause-play") */

#thumbnail-slider-pause-play {display:none;} /*.pause*/
#thumbnail-slider-prev, #thumbnail-slider-next {display:none;}

/*User end*/

.responsive { width:100%; background:#fff; display:none;}

/*Services*/
/**************************media*******************************/
/*for Desktop View (Apply similar to Bootstrap class col-md-)*/
@media screen and (min-width:992px) and (max-width:1199px)
{
}
/*for Tablet View (Apply similar to Bootstrap class col-sm-)*/
@media screen and (min-width:768px) and (max-width:991px)
{
}
/*for Mobile View (Apply similar to Bootstrap class col-xs-)*/
@media screen and (min-width:0) and (max-width:767px)
{
  #wrapper { width:100%; overflow:auto;}
  .header { padding:15px 15px 0; position:fixed; top:0; left:0; z-index:1; background:#fff;}
  .headerDiv { width:100%;}
  .logo a img { width:90px;}
  .menu { width:67%;}
  .menu ul li { width:42px; height:42px; margin:6px;}
  .menu ul li a { width:42px; height:42px; padding:2px; line-height:34px;}
  .overlay ul li a { font-size:20px;}
  .overlay .overlay-close { width:20px; height:20px;}
  #saracircle { top:0; margin:12% auto;}
  .heading { padding-left:18px;}

  #homePage { overflow:hidden;}

  #screen { display:none;}
  .line2 { position:absolute; top:-19%; left:-85px;}
  .line4 { display:none;}
  #slider{ animation:cssAnimation 0s 2s forwards;}

  .features { left:142px;}
  .features ul li a { animation:type 1s steps(60, end); text-align:center;}

  #salary { display:none;}
  #circle { background:transparent;}
  #content { position:absolute; top:40%; left:0%; background:#fff; font-size:25px; width:100%; padding:0 11px; line-height:45px; height:50px;}
  .task { display:none;}
  .line1 { display:none;}

  .responsive { display:inline-block; position:fixed; bottom:0; width:100%; padding:15px 0; z-index:1;}
  .responsive div { display:inline-block; width:18%; text-align:center; border-right:1px solid #eee;}

/*Thank you Msg*/
  .thankuMsgCover { padding:60% 0;}

/*Thank you Msg*/

/*services*/

  #services { width:100%; padding-top:80px; height:auto; overflow:auto; padding-bottom:125px;}
  .closeable { width:45%; font-size:14px; margin:2px 1px; padding:20px 0px; height:100px;} 
  .closeable svg { width:30px; height:30px;}

  .close { width:100% !important; height:100% !important; padding:0 15px;}
  .close .content { width:100%;height:auto;}
  .close .content h1 { left:19px; top:22px; font-size:22px; width:200px;}
  .close .content h2 { font-size:18px; top:70px; line-height:20px;}
  .close .content span { padding-top:10px; text-align:justify;}
  .close .serviceImg { display:none;}
  .button { bottom:13%; right:12px; position:fixed;}
  .resExit { display:none; background:#fff; border-radius:25px; height:35px; color:#032383; font-weight:600;}
  .exitBtn:before { display:none;}
  .exit-icon-right { display:none;}
  .exit-icon-right:after { display:none;}
  .exit-icon-right.exitAfter:before { display:none;}
  .exit-icon-right.exitAfter:after { display:none;}
  .exitBtn:after { display:none;}

/*services end*/

/*About*/

  #about { width:100%; padding-top:80px; padding-bottom:100px;}
  #about .content { padding:0 20px; height:auto;}
  #about .content span { text-align:justify;}

/*About end*/

/*Privacy Policy*/

  #privacy { width:100%; padding-top:80px; padding-bottom:100px;}
  #privacy .content { padding:0 20px; height:auto;}
  #privacy .content span { text-align:justify;}

/*Privacy Policy end*/

/*ourClient*/

  #ourClient { width:100%; padding-top:25px; overflow:auto;}
  #ourClient figure { height:75px; width:160px;}

/*ourClient end*/

/*comingSoon*/

  #comingSoon { width:100%; padding-top:62px; overflow:auto;}
  #comingSoon div { display:inline-block; padding:115px 38px; width:87%; height:auto; font-size:35px;}

/*comingSoon end*/

/*Price Table*/

  #priceTable { width:100%; overflow:auto; padding-bottom:100px; padding-top:80px; height:100%;}
  .priceBoxFeatures { display:none;}
  .priceBox { width:85%; margin-bottom:10px; height:980px;}

  .modal-content { background-color:#fefefe; margin:auto; padding:20px; border:1px solid #888; width:90%; display:inline-block; border-radius:6px;} 
  .enquiryClose { right:10%; top:7%;}
  .enquiry { padding-left:0 !important;}

  .priceHeading { display:block;}
  .headings { display:none;}
  .priceContainer { height:auto; background:none;}
  .pricingFeatures { height:100%;}
  .askQuote { display:none;}
  .reposiveAskQuote { display:block;}
  .modal { padding-top:30px; padding-bottom:100px;}

/*Price Table end*/

/*Contact*/
  #contact { width:100%; overflow:auto; padding-top:80px; padding-bottom:25px;}
  .contactForm { width:97%; padding-left:10px;}
  .contactForm .formInputs input { margin-bottom:6px;}
  .formMail { width:100%;}
  .submitBtn { padding:10px 0 8px 0;}
  .submitBtn div { float:none;}
  .submitBtn .btn { margin:10px auto 26px;}
  .btn:hover .dot, .btn:focus .dot { display:none;}
  .contactLink { width:100%; padding-left:0;}
  .links { width:100%; float:none; text-align:center;}
  .social { text-align:center;}
  .copyright { margin-top:26px; font-size:13px; padding:14px;}


  #sumitForm .formInputs:nth-child(1) label { background:linear-gradient(to right, #032789, #0440a7) !important}
  #sumitForm .formInputs .formMail:nth-child(1) label { background:linear-gradient(to right, #032789, #0440a7) !important}
  #sumitForm .formInputs .formMail:nth-child(2) label { background:linear-gradient(to right, #03288a, #044db6) !important}
  #sumitForm .formInputs:nth-child(3) label { background:linear-gradient(to right, #03288a, #044cb6) !important}

/*Contact end*/

/*Mobile App*/

#mobileApp { width:100%; overflow:auto; padding-top:80px;}
#mobileApp .content { width:100%; text-align:justify; padding:15px; padding-bottom:0;}
.mobileImg { width:100%; }

/*Mobile App end*/

/*users*/

#users { width:100%; overflow:auto; padding-top:0;}
#thumbnail-slider li { height:300px !important;}
#thumbnail-slider .thumb h2 { padding:20px 0 0 15px; font-size:16px;}
#thumbnail-slider .thumb h4 { font-size:12px;}
#thumbnail-slider .thumb p { font-size:12px; padding:0 18px 8px; overflow:auto; height:130px;}

/*users end*/

/*for Small Screen Mobile*/
@media screen and (max-width:479px)
{
  #saracircle { top:0; margin:35% auto;}
  #content { top:34%; left:0%; font-size:25px; width:100%; line-height:34px; height:68px;}
  .task { display:none;}
  .line1 { display:none;}

}

@media screen and (max-width:320px)
{
  #about { padding-bottom:180px;} 
  #privacy { padding-bottom:180px;} 
  #priceTable { padding-bottom:180px;} 
  #services { padding-bottom:180px;}
  #contact { padding-bottom:120px;}
  .enquiryInputs label { font-size:10px;}
  .enquiryClose { right:11%; top:9%;}
}