/*@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');*/
/*-- Fonts --*/
@font-face{font-family:'TT Common Regular';src:url(../fonts/ttcommons-regular.eot);src:url(../fonts/ttcommons-regular.eot?#iefix) format("embedded-opentype"),url(../fonts/ttcommons-regular.woff2) format("woff2"),url(../fonts/ttcommons-regular.woff) format("woff"),url(../fonts/ttcommons-regular.ttf) format("truetype"),url('../fonts/ttcommons-regular.svg#TT Common Regular') format("svg");font-weight:normal;font-style:normal}

@font-face{font-family:'TT Common Demibold';src:url(../fonts/ttcommons-demibold.eot);src:url(../fonts/ttcommons-demibold.eot?#iefix) format("embedded-opentype"),url(../fonts/ttcommons-demibold.woff2) format("woff2"),url(../fonts/ttcommons-demibold.woff) format("woff"),url(../fonts/ttcommons-demibold.ttf) format("truetype"),url('../fonts/ttcommons-demibold.svg#TT Common Demibold') format("svg");font-weight:normal;font-style:normal}

@font-face{font-family:'TT Common Italic';src:url(../fonts/ttcommons-italic.eot);src:url(../fonts/ttcommons-italic.eot?#iefix) format("embedded-opentype"),url(../fonts/ttcommons-italic.woff2) format("woff2"),url(../fonts/ttcommons-italic.woff) format("woff"),url(../fonts/ttcommons-italic.ttf) format("truetype"),url('../fonts/ttcommons-italic.svg#TT Common Italic') format("svg");font-weight:normal;font-style:normal}

@font-face{font-family:'Amiko Bold';src:url(../fonts/ttcommons-italic.eot);src:url(../fonts/amiko-bold.eot?#iefix) format("embedded-opentype"),url(../fonts/amiko-bold.woff2) format("woff2"),url(../fonts/amiko-bold.woff) format("woff"),url(../fonts/amiko-bold.ttf) format("truetype"),url('../fonts/amiko-bold.svg#Amiko Bold') format("svg");font-weight:normal;font-style:normal}

@font-face{font-family:'Gadugi';src:url(../fonts/ttcommons-italic.eot);src:url(../fonts/gadugi.eot?#iefix) format("embedded-opentype"),url(../fonts/gadugi.woff2) format("woff2"),url(../fonts/gadugi.woff) format("woff"),url(../fonts/gadugi.ttf) format("truetype"),url('../fonts/gadugi.svg#Gadugi') format("svg");font-weight:normal;font-style:normal}
  
/*-- Reset css --*/
/*==================box-sizing================*/
*{box-sizing:border-box}
*, *:before, *:after{box-sizing:border-box}
html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
*, *:before, *:after{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}
/*====*/
*{margin:0;padding:0;border:none}
abbr,acronym,dfn{cursor:help;border-bottom:1px #000 dotted}
dfn{font-style:normal}
.left{float:left}.right{float:right}
.clear{clear:both}
.aligncenter{text-align:center}.alignright{text-align:right}
a{color:#5c5c5c;outline:none;border:none;text-decoration:none}
a:visited{color:#5c5c5c}
a:hover{text-decoration:none;color:#0198d1}
a:active{color:#000}
address{margin:0.2em 0;padding:.5em 0 1em;line-height:140%;font-style:normal}
:focus{outline:0}
ul,ol{list-style:none;margin:0;padding:0}
p{font-size:16px;padding:8px 0;line-height:26px;margin:0/*;font-family:Arial, Helvetica, sans-serif*/}
.input-group{position:relative;margin-bottom:15px}
.form-control{background:#fff;border:solid 1px #efefef;font-size:14px;color:#808080;border-radius:4px;width:100%;height:44px;padding:8px 15px}
.form-control::-moz-placeholder{color:#2c2c2c;opacity:1}
.form-control:-ms-input-placeholder{color:#2c2c2c}
.form-control::-webkit-input-placeholder{color:#2c2c2c}
textarea{font:12px Arial, Helvetica, sans-serif}
textarea.form-control{height:100px}
.block{display:inline-block;width:100%}
.button{display:inline-block;background-color:#7ace4c;color:#fff;font-size:16px;text-transform:uppercase;border:0;padding:12px 26px;text-align:center;vertical-align:middle;border-radius:0}
a.button{color:#fff}
a.button:hover,.button:hover{background:#0b75cf;color:#fff}
.error{ display:block;color:#d60606; margin-top:5px}
.alert-success{opacity:1}
.button.radius{border-radius:4px}
.capitalize{text-transform:none;text-transform:capitalize}
img.img-block{display:block;max-width:100%;height:auto}
.center-box{background-color:transparent;text-align:center;padding:60px 0}
.ucase:before{text-transform:uppercase}
.hd-h1{font-size:60px;font-weight:600;font-family:'TT Common Demibold', Arial, sans-serif;margin:0 0 26px;padding:0;position:relative;}

/*-- Body --*/
html{background:#fff;height:100%;font-family:Arial, Helvetica, sans-serif}
body{background:#f2f2f2;font-family:Arial, Helvetica, sans-serif;font-weight:400;font-size:15px;min-height:100%;color:#404040;width:100%;height:100%;/*overflow:hidden*/}


/*====----====*/
/*html,body{margin:0;padding:0;min-height:100vh;overflow-x:hidden}*/
/*====----====*/

.container{max-width:1170px;margin:0 auto;position:relative;padding:0 15px; z-index:100}/*-- Container --*/
.intro h1,.intro h2,.hd-span{font-family:'TT Common Demibold', Arial, sans-serif}
.intro h1 em{font-family:'TT Common Regular', Arial, sans-serif}
.intro p{font-family:'TT Common Italic', Arial, sans-serif}
.menu li a,.ft-link{font-family:'Amiko Bold', Arial, sans-serif}
.menu li,.menu li a.active{font-family:'Gadugi', Arial, sans-serif}

/*#wrapper{height:910px;overflow-Y:hidden}*/
#logo{position:absolute;top:51px;left:15px}

.intro{text-align:center;padding-top:300px;position:relative}
.intro .container{max-width:1000px}
.intro h1{font-size:82px;color:#000;font-weight:400}
.intro h1 em{display:block;font-size:48px;font-weight:400; font-style:normal;text-transform:uppercase}
.intro h1 em:before,.intro h1 em:after{content:"";background:#000;width:93px;height:2px;display:inline-block;vertical-align:middle;margin:0 38px 4px 0}
.intro h1 em:after{margin:0 0 4px 38px}
.intro p{font-size:25px}
.intro figure{margin-top:20px}


.blue-bubble{position:absolute;top:-216px;right:15px;display:block;background:#01c2f3;border-radius:250px;width:457px;height:457px;opacity:0;
/*-webkit-animation-name: float-bubble-blue;
  animation-name: float-bubble-blue;*/
 -webkit-animation: float-bubble-blue 40s .5s ease-in infinite;
	-moz-animation: float-bubble-blue 40s .5s ease-in infinite;
	-o-animation: float-bubble-blue 40s .5s ease-in infinite;
	animation: float-bubble-blue 40s .5s ease-in infinite;
}
.yellow-bubble{position:absolute;top:155px;right:77px;display:block;background:#f3df01;border-radius:250px;width:136px;height:136px;opacity:0;
/*-webkit-animation-name: float-bubble-yellow;
  animation-name: float-bubble-yellow;*/
 -webkit-animation: float-bubble-yellow 40s ease-in infinite;
	-moz-animation: float-bubble-yellow 40s ease-in infinite;
	-o-animation: float-bubble-yellow 40s ease-in infinite;
	animation: float-bubble-yellow 40s ease-in infinite;
}
@-webkit-keyframes float-bubble-blue {
0%{opacity:0;top:-216px;right:15px;transform:scale(.3)}
5%{opacity:1;transform:scale(1);top:-236px;right:-20px}
15%{right:100px}
30%{top:-230px;right:-20px}
40%{top:-265px;right:110px}
70%{top:-230px;right:0}
95%{opacity:.9;right:45px}
100%{opacity:0;top:-216px;right:15px}
}
@-moz-keyframes float-bubble-blue {
0%{opacity:0;top:-216px;right:15px;transform:scale(.3)}
5%{opacity:1;transform:scale(1);top:-236px;right:-20px}
15%{right:100px}
30%{top:-230px;right:-20px}
40%{top:-265px;right:110px}
70%{top:-230px;right:0}
95%{opacity:.9;right:45px}
100%{opacity:0;top:-216px;right:15px}
}
@keyframes float-bubble-blue {
0%{opacity:0;top:-216px;right:15px;transform:scale(.3)}
5%{opacity:1;transform:scale(1);top:-236px;right:-20px}
15%{right:100px}
30%{top:-230px;right:-20px}
40%{top:-265px;right:110px}
70%{top:-230px;right:0}
95%{opacity:.9;right:45px}
100%{opacity:0;top:-216px;right:15px}
}
@-webkit-keyframes float-bubble-yellow {
0%{opacity:0;top:255px;right:15px;transform:scale(.3)}
5%{opacity:1;transform:scale(1);top:155px;right:77px}
15%{opacity:.9;transform:scale(1);top:125px;right:200px}
30%{top:200px;right:30px}
40%{top:100px;right:100px}
60%{top:155px;right:15px}
70%{top:75px;right:45px}
90%{opacity:.9;right:150px}
100%{opacity:0;top:200px;right:15px}
}
@-moz-keyframes float-bubble-yellow {
0%{opacity:0;top:255px;right:15px;transform:scale(.3)}
5%{opacity:1;transform:scale(1);top:155px;right:77px}
15%{opacity:.9;transform:scale(1);top:125px;right:200px}
30%{top:200px;right:30px}
40%{top:100px;right:100px}
60%{top:155px;right:15px}
70%{top:75px;right:45px}
90%{opacity:.9;right:150px}
100%{opacity:0;top:200px;right:15px}
}
@keyframes float-bubble-yellow {
0%{opacity:0;top:255px;right:15px;transform:scale(.3)}
5%{opacity:1;transform:scale(1);top:155px;right:77px}
15%{opacity:.9;transform:scale(1);top:125px;right:200px}
30%{top:200px;right:30px}
40%{top:100px;right:100px}
60%{top:155px;right:15px}
70%{top:75px;right:45px}
90%{opacity:.9;right:150px}
100%{opacity:0;top:200px;right:15px}
}


/*======Triangle-Animation========*/
.blue-triangle{position:absolute;bottom:-150px;left:15px;display:block;width:0;height:0;opacity:1;border-left:232px solid transparent;border-right:232px solid transparent;border-bottom:300px solid #01c2f3; z-index:100;
-webkit-animation:float-triangle-blue 3s ease-in forwards;
-moz-animation:float-triangle-blue 3s ease-in forwards;
-o-animation:float-triangle-blue 3s ease-in forwards;
animation:float-triangle-blue 3s ease-in forwards;
}
.yellow-triangle{position:absolute;bottom:-170px;/*left:350px;*/display:block;width:0;height:0;opacity:1;border-left:232px solid transparent;border-right:232px solid transparent;border-bottom:300px solid #f3df01;z-index:101;
-webkit-animation:float-triangle-yellow 7s ease-in forwards;
-moz-animation:float-triangle-yellow 7s ease-in forwards;
-o-animation:float-triangle-yellow 7s ease-in forwards;
animation:float-triangle-yellow 7s ease-in forwards;}

/*.blue-triangle.next{
-webkit-animation:float-triangle-blue2 5s 2.9s ease-in infinite;
-moz-animation:float-triangle-blue2 5s 2.9s ease-in infinite;
-o-animation:float-triangle-blue2 5s 2.9s ease-in infinite;
animation:float-triangle-blue2 5s 2.9s ease-in infinite; opacity:0
}

.yellow-triangle.next{
-webkit-animation:float-triangle-yellow2 5s 4s ease-in infinite;
-moz-animation:float-triangle-yellow2 5s 4s ease-in infinite;
-o-animation:float-triangle-yellow2 5s 4s ease-in infinite;
animation:float-triangle-yellow2 5s 4s ease-in infinite; opacity:0
}


@-webkit-keyframes float-triangle-blue2{
  0% {
	left:15px;
	opacity:1
  }
  50% {
	left:50px;
	opacity:1
  }
  100% {
	left:15px;
	opacity:1
  }
}

@-webkit-keyframes float-triangle-yellow2{
  0% {
  	-webkit-transform: scale(.5);
	left:230px;
	opacity:1
  }
  50% {
	left:250px;
	opacity:1;
	-webkit-transform: scale(.5);
  }
  100% {
	left:230px;
	opacity:1;
	-webkit-transform: scale(.5);
  }
}*/

@-webkit-keyframes float-triangle-blue{
  0% {
	opacity: 0  ;	
	bottom:-150px;
	/*right:-170px;*/
	-webkit-transform: scale(.3);
  }
  30% {
	opacity:1;
	
  }
 /* 70% {
  	left:15px;
	
	
  }
  95% {
  	left:45px;
	
  }*/
  100% {
	opacity:1;
	bottom:-145px;	
	/*left:15px*/
  }
}



/*@-moz-keyframes float-triangle-blue{
  0% {
	opacity: 0  ;	
	top:-150px;
	right:15px;
	-moz-transform: scale(.3);
  }
  20% {
	opacity:1;
	-moz-transform: scale(1);
	top:-230px;
	right:0px	
  }
  35% {
	right:75px
	
  }
  70% {
	top:-270px;
	right:40px	
  }
  95% {
	opacity:.9;
	right:100px
  }
  100% {
	opacity:0;
	top:-150px;
	right:15px;
  }
}

@keyframes float-triangle-blue{
  0% {
	opacity: 0  ;	
	top:-150px;
	right:15px;
	transform: scale(.3);
  }
  20% {
	opacity:1;
	transform: scale(1);
	top:-230px;
	right:0px	
  }
  35% {
	right:75px
	
  }
  70% {
	top:-270px;
	right:40px	
  }
  95% {
	opacity:.9;
	right:100px
  }
  100% {
	opacity:0;
	top:-150px;
	right:15px;
  }
}*/


@-webkit-keyframes float-triangle-yellow{
  0% {
	opacity: 0  ;	
	bottom:-130px;
	left:250px;
	-webkit-transform: scale(1);
  }
  30% {
	opacity:1;	
  }
  40% {
  -webkit-transform: scale(.5);
  bottom:-177px;	
  left:210px;
  }
 /* 70% {
	left:230px;
  }
  95% {
	left:210px;
  }*/
  100% {
	left:210px;
	 -webkit-transform: scale(.5);
	/*right:15px;*/
  }
}


/*@-moz-keyframes float-triangle-yellow{
  0% {
	opacity: 0  ;	
	bottom:-10px;
	right:15px;
	-moz-transform: scale(.3);
  }
  20% {
	opacity:1;
	-moz-transform: scale(1);
	bottom:-30px;
	right:0px	
  }
  35% {
	right:50px
	
  }
  70% {
	bottom:-60px;
	right:60px	
  }
  95% {
	opacity:.9;
	right:100px
  }
  100% {
	opacity:0;
	bottom:-10px;
	right:15px;
  }
}



@keyframes float-triangle-yellow{
  0% {
	opacity: 0  ;	
	bottom:-10px;
	right:15px;
	transform: scale(.3);
  }
  20% {
	opacity:1;
	transform: scale(1);
	bottom:-30px;
	right:0px	
  }
  35% {
	right:50px
	
  }
  70% {
	bottom:-60px;
	right:60px	
  }
  95% {
	opacity:.9;
	right:100px
  }
  100% {
	opacity:0;
	bottom:-10px;
	right:15px;
  }
}*/


/*-- Start Main Navigation --*/
.menu{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;position:fixed;z-index:100000;right:0;height:100%;overflow:hidden;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center}
.menu-item{position:relative;display:block;padding:15px 28px 15px 40px;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);font-size:18px;line-height:1;text-align:right;text-transform:uppercase;-webkit-transition:all .2s;-o-transition:all .2s;-moz-transition:all .2s;transition:all .2s}
.menu-item.active{padding-right:40px}
.menu-item:after{content:"";display:block;position:absolute;top:50%;right:0;height:2px;width:29px;margin:-1px 0 0;-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);-o-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:right center;-moz-transform-origin:right center;-ms-transform-origin:right center;-o-transform-origin:right center;transform-origin:right center;background:currentColor;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.menu li a,.menu li a:focus{color:#000}
/*.menu-item.active:after{width:32px}*/
/*.menu-item:nth-child(1){-webkit-transition-delay:.17s;-moz-transition-delay:.17s;-o-transition-delay:.17s;transition-delay:.17s}
.menu-item:nth-child(2){-webkit-transition-delay:.24s;-moz-transition-delay:.24s;-o-transition-delay:.24s;transition-delay:.24s}
.menu-item:nth-child(3){-webkit-transition-delay:.31s;-moz-transition-delay:.31s;-o-transition-delay:.31s;transition-delay:.31s}
.menu-item:nth-child(4){-webkit-transition-delay:.38s;-moz-transition-delay:.38s;-o-transition-delay:.38s;transition-delay:.38s}
.menu-item:nth-child(5){-webkit-transition-delay:.45s;-moz-transition-delay:.45s;-o-transition-delay:.45s;transition-delay:.45s}
.menu-item:nth-child(6){-webkit-transition-delay:.52s;-moz-transition-delay:.52s;-o-transition-delay:.52s;transition-delay:.52s}
.menu-item:nth-child(7){-webkit-transition-delay:.59s;-moz-transition-delay:.59s;-o-transition-delay:.59s;transition-delay:.59s}
.menu-item:nth-child(8){-webkit-transition-delay:.66s;-moz-transition-delay:.66s;-o-transition-delay:.66s;transition-delay:.66s}
.menu-item:nth-child(9){-webkit-transition-delay:.73s;-moz-transition-delay:.73s;-o-transition-delay:.73s;transition-delay:.73s}

.menu-item:nth-child(10){-webkit-transition-delay:.80s;-moz-transition-delay:.80s;-o-transition-delay:.80s;transition-delay:.80s}
.menu-item:nth-child(11){-webkit-transition-delay:.87s;-moz-transition-delay:.87s;-o-transition-delay:.87s;transition-delay:.87s}
.menu-item:nth-child(12){-webkit-transition-delay:.94s;-moz-transition-delay:.94s;-o-transition-delay:.94s;transition-delay:.94s}*/

.menu-item span{display:inline-block;max-width:0;overflow:hidden;text-align:center;opacity:1;/*opacity:.6;*/-webkit-animation:cb-projectbar-item-letter-out .3s;-moz-animation:cb-projectbar-item-letter-out .3s;-o-animation:cb-projectbar-item-letter-out .3s;animation:cb-projectbar-item-letter-out .3s;-webkit-transition:opacity .2s;-o-transition:opacity .2s;-moz-transition:opacity .2s;transition:opacity .2s}
.menu-item span:first-child{-webkit-animation:none;-moz-animation:none;-o-animation:none;animation:none;max-width:100%!important}
.menu-item:active{opacity:1}
.menu-item.active span{opacity:1}
.menu-item.active:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1);transform:scaleX(1)}
.menu-item:focus,.menu-item:hover{text-decoration:none}
.menu-item:focus:after,.menu-item:hover:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);-o-transform:scaleX(0);transform:scaleX(0)}
.menu-item:focus span,.menu-item:hover span{opacity:1;-webkit-animation:cb-projectbar-item-letter-in steps(2) 50ms forwards;-moz-animation:cb-projectbar-item-letter-in steps(2) 50ms forwards;-o-animation:cb-projectbar-item-letter-in steps(2) 50ms forwards;animation:cb-projectbar-item-letter-in steps(2) 50ms forwards}
.menu-item:focus span:first-child,.menu-item:hover span:first-child{-webkit-animation:none;-moz-animation:none;-o-animation:none;animation:none}
.menu-item:focus span:nth-child(2),.menu-item:hover span:nth-child(2){-webkit-animation-delay:.1s;-moz-animation-delay:.1s;-o-animation-delay:.1s;animation-delay:.1s}
.menu-item:focus span:nth-child(3),.menu-item:hover span:nth-child(3){-webkit-animation-delay:.15s;-moz-animation-delay:.15s;-o-animation-delay:.15s;animation-delay:.15s}
.menu-item:focus span:nth-child(4),.menu-item:hover span:nth-child(4){-webkit-animation-delay:.2s;-moz-animation-delay:.2s;-o-animation-delay:.2s;animation-delay:.2s}
.menu-item:focus span:nth-child(5),.menu-item:hover span:nth-child(5){-webkit-animation-delay:.25s;-moz-animation-delay:.25s;-o-animation-delay:.25s;animation-delay:.25s}
.menu-item:focus span:nth-child(6),.menu-item:hover span:nth-child(6){-webkit-animation-delay:.3s;-moz-animation-delay:.3s;-o-animation-delay:.3s;animation-delay:.3s}
.menu-item:focus span:nth-child(7),.menu-item:hover span:nth-child(7){-webkit-animation-delay:.35s;-moz-animation-delay:.35s;-o-animation-delay:.35s;animation-delay:.35s}
.menu-item:focus span:nth-child(8),.menu-item:hover span:nth-child(8){-webkit-animation-delay:.4s;-moz-animation-delay:.4s;-o-animation-delay:.4s;animation-delay:.4s}
.menu-item:focus span:nth-child(9),.menu-item:hover span:nth-child(9){-webkit-animation-delay:.45s;-moz-animation-delay:.45s;-o-animation-delay:.45s;animation-delay:.45s}

.menu-item:focus span:nth-child(10),.menu-item:hover span:nth-child(10){-webkit-animation-delay:.5s;-moz-animation-delay:.5s;-o-animation-delay:.5s;animation-delay:.5s}
.menu-item:focus span:nth-child(11),.menu-item:hover span:nth-child(11){-webkit-animation-delay:.55s;-moz-animation-delay:.55s;-o-animation-delay:.55s;animation-delay:.55s}
.menu-item:focus span:nth-child(12),.menu-item:hover span:nth-child(12){-webkit-animation-delay:.6s;-moz-animation-delay:.6s;-o-animation-delay:.6s;animation-delay:.6s}
.menu.visible .menu-item{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)}


@-webkit-keyframes cb-projectbar-item-letter-out {
0%{max-width:100%}
100%{max-width:0}
}
@-moz-keyframes cb-projectbar-item-letter-out {
0%{max-width:100%}
100%{max-width:0}
}
@-o-keyframes cb-projectbar-item-letter-out {
0%{max-width:100%}
100%{max-width:0}
}
@keyframes cb-projectbar-item-letter-out {
0%{max-width:100%}
100%{max-width:0}
}
@-webkit-keyframes cb-projectbar-item-letter-in {
0%{max-width:100%;background:#fff}
100%{max-width:100%;background:0 0}
}
@-moz-keyframes cb-projectbar-item-letter-in {
0%{max-width:100%;background:#fff}
100%{max-width:100%;background:0 0}
}
@-o-keyframes cb-projectbar-item-letter-in {
0%{max-width:100%;background:#fff}
100%{max-width:100%;background:0 0}
}
@keyframes cb-projectbar-item-letter-in {
0%{max-width:100%;background:#fff}
100%{max-width:100%;background:0 0}
}

nav{overflow:hidden;}
/*.menu{animation:menu-anim-custom .5s .5s forwards;-webkit-animation:menu-anim-custom .5s .5s forwards;-moz-animation:menu-anim-custom .5s .5s forwards;opacity:0;-webkit-transform:translateX(0);transform:translateX(-20px); border:1px solid #0f0;}*/

.menu li:nth-child(1),.menu li:nth-child(2),.menu li:nth-child(3),.menu li:nth-child(4),.menu li:nth-child(5){-webkit-animation:view1 .2s 2s forwards;-moz-animation:view1 .2s 2s forwards;animation:view1 .2s 2s forwards;opacity:0;transform:translateX(30px);}
.menu li:nth-child(2){-webkit-animation-delay:2.1s;-moz-animation-delay:2.1s;animation-delay:2.1s}
.menu li:nth-child(3){-webkit-animation-delay:2.2s;-moz-animation-delay:2.2s;animation-delay:2.2s}
.menu li:nth-child(4){-webkit-animation-delay:2.3s;-moz-animation-delay:2.3s;animation-delay:2.3s}
.menu li:nth-child(5){-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;animation-delay:2.4s}

@-webkit-keyframes view1 {
0%{opacity:0;-webkit-transform:translateX(30px)}
100%{opacity:1;-webkit-transform:translateX(0);}
}
@-moz-keyframes view1 {
0%{opacity:0;transform:-moz-translateX(30px);}
100%{opacity:1;-moz-transform:translateX(0);}
}
@keyframes view1 {
0%{opacity:0;transform:translateX(30px);}
100%{opacity:1;transform:translateX(0);}
}

/*@-webkit-keyframes menu-anim-custom {
0%{opacity:0;-webkit-transform:translateX(-20px)}
100%{opacity:1;-webkit-transform:translateX(0)}
}*/

/*-- Cloud Animation --*/

/*----clouds----*/
#sky {
	overflow: hidden;
	/*width: 800px;*/
	margin:0 auto;
	position:relative;
}
#sky figure{position:relative;top:0;left:0;right:0;margin:0 auto;z-index:100}

#Clouds {
  position: absolute;
  top: 0;
  right: 0;
  bottom: -508px;
  left: 0;
  margin: auto;
  height: 30%;
  overflow: hidden;
  -webkit-animation: FadeIn 3s ease-out;
          animation: FadeIn 3s ease-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
@-webkit-keyframes FadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes FadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.Cloud {
  position: absolute;
  width: 100%;
  background-repeat: no-repeat;
  background-size: auto 100%;
  height: 70px;
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
  -webkit-animation-name: Float, FadeFloat;
          animation-name: Float, FadeFloat;
  z-index: 1;
}
.Cloud.Foreground {
  height: 10%;
  min-height: 20px;
  z-index: 3;
}
.Cloud.Background {
  height: 9.09090909%;
  min-height: 8px;
  -webkit-animation-duration: 210s;
          animation-duration: 210s;
}
@-webkit-keyframes Float {
  from {
    -webkit-transform: translateX(100%) translateZ(0);
            transform: translateX(100%) translateZ(0);
  }
  to {
    -webkit-transform: translateX(-15%) translateZ(0);
            transform: translateX(-15%) translateZ(0);
  }
}
@keyframes Float {
  from {
    -webkit-transform: translateX(100%) translateZ(0);
            transform: translateX(100%) translateZ(0);
  }
  to {
    -webkit-transform: translateX(-15%) translateZ(0);
            transform: translateX(-15%) translateZ(0);
  }
}
/*
@keyframes Float {
  from { transform: translateX(100%) translateY(-100%) translateZ(0); }
  50% { transform: translateX(55%) translateY(0) translateZ(0); }
  to { transform: translateX(-5%) translateY(-100%) translateZ(0); }
}
*/
@-webkit-keyframes FadeFloat {
  0%,
  100% {
    opacity: 0;
  }
  5%,
  90% {
    opacity: 1;
  }
}
@keyframes FadeFloat {
  0%,
  100% {
    opacity: 0;
  }
  5%,
  90% {
    opacity: 1;
  }
}
.Cloud:nth-child(10) {
  -webkit-animation-delay: -184.61538462s;
          animation-delay: -184.61538462s;
  top: 60%;
}
.Cloud.Foreground:nth-child(10) {
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  height: 35%;
}
.Cloud.Background:nth-child(10) {
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
  height: 14.591%;
}
.Cloud:nth-child(9) {
  -webkit-animation-delay: -166.15384615s;
          animation-delay: -166.15384615s;
  top: 54%;
}
.Cloud.Foreground:nth-child(9) {
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  height: 32.5%;
}
.Cloud.Background:nth-child(9) {
  -webkit-animation-duration: 30s;
          animation-duration: 30s;
  height: 11.841%;
}
.Cloud:nth-child(8) {
  -webkit-animation-delay: -147.69230769s;
          animation-delay: -147.69230769s;
  top: 48%;
}
.Cloud.Foreground:nth-child(8) {
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  height: 30%;
}
.Cloud.Background:nth-child(8) {
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
  height: -0.90909091%;
}
.Cloud:nth-child(7) {
  -webkit-animation-delay: -129.23076923s;
          animation-delay: -129.23076923s;
  top: 42%;
}
.Cloud.Foreground:nth-child(7) {
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  height: 27.5%;
}
.Cloud.Background:nth-child(7) {
  -webkit-animation-duration: 22s;
          animation-duration: 22s;
  height: 13.341%;
}
.Cloud:nth-child(6) {
  -webkit-animation-delay: -110.76923077s;
          animation-delay: -110.76923077s;
  top: 36%;
}
.Cloud.Foreground:nth-child(6) {
  -webkit-animation-duration: 27s;
	 animation-duration: 27s;
  height: 25%;
}
.Cloud.Background:nth-child(6) {
  -webkit-animation-duration: 26s;
          animation-duration: 26s;
  height: 13.591%;
}
.Cloud:nth-child(5) {
  -webkit-animation-delay: -92.30769231s;
          animation-delay: -92.30769231s;
  top: 30%;
}
.Cloud.Foreground:nth-child(5) {
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
  height: 20.5%;
}
.Cloud.Background:nth-child(5) {
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  height: 2.84090909%;
}
.Cloud:nth-child(4) {
  -webkit-animation-delay: -73.84615385s;
          animation-delay: -73.84615385s;
  top: 24%;
}
.Cloud.Foreground:nth-child(4) {
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  height: 20%;
}
.Cloud.Background:nth-child(4) {
  -webkit-animation-duration: 34s;
          animation-duration: 34s;
  height: 19.091%;
}
.Cloud:nth-child(3) {
  -webkit-animation-delay: -55.38461538s;
          animation-delay: -55.38461538s;
  top: 18%;
}
.Cloud.Foreground:nth-child(3) {
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
  height: 19.5%;
}
.Cloud.Background:nth-child(3) {
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  height: 5.34090909%;
}
.Cloud:nth-child(2) {
  -webkit-animation-delay: -36.92307692s;
          animation-delay: -36.92307692s;
  top: 12%;
}
.Cloud.Foreground:nth-child(2) {
  -webkit-animation-duration: 15s;
          animation-duration: 15s;
  height: 15%;
}
.Cloud.Background:nth-child(2) {
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  height:18.591%;
}
.Cloud:nth-child(1) {
  -webkit-animation-delay: -18.46153846s;
          animation-delay: -18.46153846s;
  top: 6%;
}
.Cloud.Foreground:nth-child(1) {
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  height: 27.5%;
}
.Cloud.Background:nth-child(1) {
  -webkit-animation-duration: 30s;
          animation-duration: 30s;
  height: 7.84090909%;
}
.Cloud {
  background-image:url(../images/cloud.png) 
}
.Cloud.Background {
  background-image: url(../images/cloud-sm.png)
}
.Cloud.Background img{
  margin-top:18px;
}
.Cloud img{
  margin-top:18px;
}


/*#sky {
	overflow: hidden;
	margin:0 auto;
	position:relative;
}
#sky figure{position:absolute;top:0;left:0;right:0;margin:0 auto;z-index:1000}
#clouds {
	width: 200%;
	height: 292px;
	background: url(../images/clouds-1.png) repeat-x center center;
	background-size:70% auto;
	-webkit-animation: movingclouds 25s linear infinite;
	-moz-animation: movingclouds 25s linear infinite;
	-o-animation: movingclouds 25s linear infinite;
}
-webkit-@keyframes movingclouds {
	0% {margin-left: 0%;}
	100% {margin-left: -100%;}
}
-moz-@keyframes movingclouds {
	0% {margin-left: 0%;}
	100% {margin-left: -100%;}
}
@keyframes movingclouds {
	0% {margin-left: 0%;}
	100% {margin-left: -100%;}
}*/


/*nav{position:fixed;top:345px;right:0;z-index:100}
nav ul li{ font-size:18px;text-transform:uppercase;text-align:right;margin-bottom:24px}
nav ul li a{margin-right:30px;color:#000}
nav ul li a span{display:none}
nav ul li a em,nav ul li div em{font-size:18px;font-style:normal}
nav ul li,nav ul li a,nav ul li.active div:after{-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .3s;transition:all .2s}
nav ul li.active div{margin-right:0;text-align:left}
nav ul li.active div:after{content:"";background:#000;width:29px;height:2px;display:inline-block;vertical-align:middle;margin:0 0 4px 12px}
nav ul li.active:hover div:after{ margin-right:-30px}
nav ul li.active div a span{display:inline}*/

/*-- End Main Navigation --*/


.social-media{position:absolute;top:-238px;/*bottom:42px;*/left:40px;z-index:10000}
.social-media li{text-align:center;}
.social-media li a{display:block;}
.social-media .fa{font-size:19px;color:#000}
.link{background: none;border: 0;box-sizing: border-box;margin: 1em;padding: 1em 2em;box-shadow: none;color: #f45e61;font-size: inherit;font-weight: 700;position: relative;-webkit-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.link::before, .link::after{box-sizing: inherit;content: '';position: absolute;width: 100%;height: 100%;-webkit-transition:all 0.5s ease-out;transition:all 0.5s ease-out;}
.spin{width: 36px;height: 36px;padding: 0;line-height: 40px;}
.spin:hover{color: #0eb7da;}
.spin::before, .spin::after{top: 0;left: 0;}
.spin::before{border: 2px solid transparent;}
.spin:hover::before{border-top-color: #0eb7da;border-right-color: #0eb7da;border-bottom-color: #0eb7da;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;}
.spin::after{border: 0 solid transparent;}
.spin:hover::after{border-top: 2px solid #0eb7da;border-left-width: 2px;border-right-width: 2px;
  -webkit-transform: rotate(270deg);transform: rotate(270deg);transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;}
.circle{border-radius: 100%;box-shadow: none;}
.circle:hover{border-radius: 100%;box-shadow: none;-webkit-transform: scale(1.1,1.1);transform: scale(1.1,1.1);}
.circle::before, .circle::after{border-radius:100%;}
/*.buttons{isolation:isolate;}*/

.spin.facebook:hover::before{border-top-color: #4064ac;border-right-color: #4064ac;border-bottom-color: #4064ac;}
.spin.facebook:hover::after{border-top: 2px solid #4064ac;}
.social-media .spin.facebook:hover .fa{color:#4064ac}

.spin.twitter:hover::before{border-top-color: #19ace1;border-right-color: #19ace1;border-bottom-color: #19ace1;}
.spin.twitter:hover::after{border-top: 2px solid #19ace1;}
.social-media .spin.twitter:hover .fa{color:#19ace1}

.spin.google:hover::before{border-top-color: #e34033;border-right-color: #e34033;border-bottom-color: #e34033;}
.spin.google:hover::after{border-top: 2px solid #e34033;}
.social-media .spin.google:hover .fa{color:#e34033}

.spin.rss:hover::before{border-top-color: #e57c2b;border-right-color: #e57c2b;border-bottom-color: #e57c2b;}
.spin.rss:hover::after{border-top: 2px solid #e57c2b;}
.social-media .spin.rss:hover .fa{color:#e57c2b}

.ft-link{display:block;text-align:center;margin-top:50px; position:relative; z-index:10000000}
.ft-link a{font-size:18px;color:#000;text-transform:uppercase}
.ft-link a:before{content:"";background:#000;width:29px;height:2px;display:inline-block;vertical-align:middle;margin:0 13px 4px 0}

.social-media li:nth-child(1),.social-media li:nth-child(2),.social-media li:nth-child(3),.social-media li:nth-child(4){-webkit-animation:sm-anim .3s 2s forwards;-moz-animation:sm-anim .23ss 2s forwards;animation:sm-anim .3s 2s forwards;opacity:0;transform:translateX(30px);}
.social-media li:nth-child(2){-webkit-animation-delay:2.2s;-moz-animation-delay:2.2s;animation-delay:2.2s}
.social-media li:nth-child(3){-webkit-animation-delay:2.4s;-moz-animation-delay:2.4s;animation-delay:2.4s}
.social-media li:nth-child(4){-webkit-animation-delay:2.6s;-moz-animation-delay:2.6s;animation-delay:2.6s}
.social-media li:nth-child(5){-webkit-animation-delay:2.8s;-moz-animation-delay:2.8s;animation-delay:2.8s}


@-webkit-keyframes sm-anim {
0%{opacity:0}
100%{opacity:1}
}
@-moz-keyframes sm-anim {
0%{opacity:0}
100%{opacity:1}
}
@keyframes sm-anim {
0%{opacity:0}
100%{opacity:1}
}

/*-- Page transition --*/
/*.m-pagetransition{visibility:hidden}*/


.page-loader{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;z-index:1000;display:none}
.page-loader.is-visible{display:block/*;-webkit-animation: pl-zindex .5s linear forwards;-moz-animation:pl-zindex .5s linear forwards;animation:pl-zindex .5s linear forwards;*/}

#wrapper{background:#f2f2f2;position:relative;-webkit-animation: wrapper-zindex .3s 3s linear forwards;-moz-animation:wrapper-zindex .3s 3s linear forwards;animation:wrapper-zindex .3s 3s linear forwards;overflow:hidden;}
-webkit-@keyframes wrapper-zindex {
	0% {z-index:1}
	99.99% {z-index:1}
	100% {z-index:10000}
}
-moz-@keyframes wrapper-zindex {
	0% {z-index:1}
	99.99% {z-index:1}
	100% {z-index:10000}
}
@keyframes wrapper-zindex {
	0% {z-index:1}
	99.99% {z-index:1}
	100% {z-index:10000}
}

.page-loader--a,.page-loader--b,.page-loader--c{width:100%;height:100%;position:absolute;top:0;left:0}
.page-loader--a{z-index:1000;background:#000;-webkit-animation: page-loader .5s linear forwards;-moz-animation: page-loader .5s linear forwards;animation: page-loader .5s linear forwards;}


-webkit-@keyframes page-loader{
	0% {-webkit-transform:translateY(0); opacity:1}
	100% {-webkit-transform:translateY(-100%);opacity:}
}
-moz-@keyframes page-loader {
	0% {-webkit-transform:translateY(0); opacity:1}
	100% {-webkit-transform:translateY(-100%);opacity:}
}
@keyframes page-loader {
	0% {transform:translateY(0);opacity:1}
	100% {transform:translateY(-100%);opacity:1}
}

.page-loader--loader{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:100%;text-align:center;-webkit-animation:opa1 1s .25s backwards;animation:opa1 1s .25s backwards}
.page-loader--loader div{width:9px;height:9px;display:inline-block;background:#1d1d1b;margin:0 13.5px;border-radius:50px}

.page-loader--b{z-index:100;background:#01c2f3;-webkit-animation: page-loader2 1.5s linear forwards;-moz-animation: page-loader2 1.5s linear forwards;animation: page-loader2 1.5s linear forwards;}

-webkit-@keyframes page-loader2 {
	0% {-webkit-transform:translateY(0)}
	
	80% {-webkit-transform:translateY(0)}
	
	100% {-webkit-transform:translateY(-100%)}
}
-moz-@keyframes page-loader2 {
	0% {-webkit-transform:translateY(0)}
	
	80% {-webkit-transform:translateY(0)}
	
	100% {-webkit-transform:translateY(-100%)}
}
@keyframes page-loader2 {
	0% {-webkit-transform:translateY(0)}
	
	80% {-webkit-transform:translateY(0)}
	
	100% {-webkit-transform:translateY(-100%)}
}

.page-loader--loader div:nth-child(1){-webkit-animation:1.25s .1s load infinite cubic-bezier(.455,.03,.515,.955);animation:1.25s .1s load infinite cubic-bezier(.455,.03,.515,.955)}
.page-loader--loader div:nth-child(2){-webkit-animation:1.25s .2s load infinite cubic-bezier(.455,.03,.515,.955);animation:1.25s .2s load infinite cubic-bezier(.455,.03,.515,.955)}
.page-loader--loader div:nth-child(3){-webkit-animation:1.25s .3s load infinite cubic-bezier(.455,.03,.515,.955);animation:1.25s .3s load infinite cubic-bezier(.455,.03,.515,.955)}
.page-loader--loader div:nth-child(4){-webkit-animation:1.25s .4s load infinite cubic-bezier(.455,.03,.515,.955);animation:1.25s .4s load infinite cubic-bezier(.455,.03,.515,.955)}
@-webkit-keyframes load{0%,100%,60%{opacity:1}30%{opacity:.15}}
@keyframes load{0%,100%,60%{opacity:1}30%{opacity:.15}}

.page-loader--c{z-index:10;background:#f3df01;-webkit-animation: page-loader3 .15s 1.5s  linear forwards;-moz-animation: page-loader3 .15s 1.5s  linear forwards;animation: page-loader .15s 1.5s linear forwards;}

-webkit-@keyframes page-loader3 {
	0% {-webkit-transform:translateY(0);opacity:1}
	100% {-webkit-transform:translateY(-100%);opacity:.5}
}
-moz-@keyframes page-loader3 {
	0% {-webkit-transform:translateY(0);opacity:1}
	100% {-webkit-transform:translateY(-100%);opacity:.5}
}
@keyframes page-loader3 {
	0% {transform:translateY(0);opacity:1}
	100% {transform:translateY(-100%);opacity:.5}
}

/*-- Word Animation --*/


/*h1{	
	z-index: 2;
	letter-spacing: -4px;
	position: relative;
}*/
/* -------------------------------- 

Wordz

-------------------------------- */
.word {
      position: absolute;
    width: 100%;
    left: 0;
  opacity: 0;
}

.letter {
  display: inline-block;
  position: relative;
  float:none;
  -webkit-transform: translateZ(25px);
          transform: translateZ(25px);
  -webkit-transform-origin: 50% 50% 25px;
          transform-origin: 50% 50% 25px;
}

.letter.out {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
  -webkit-transition: -webkit-transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: -webkit-transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.letter.behind {
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
}

.letter.in {
  -webkit-transform: rotateX(0deg);
          transform: rotateX(0deg);
  -webkit-transition: -webkit-transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: -webkit-transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/*==========Services===============*/
body#services-page #wrapper{overflow:hidden;min-height:100vh;max-width:1980px;margin:0 auto;}
#services-page .menu{top:0;position:fixed;}
/*#services-page footer{position:relative;margin-top:-18%;}*/

@media (min-width:992px){
.hd-h1,.hd-span,.hd-animation em,.hd-h1:before{-webkit-transition:all 0.5s ease-out 0s;transition:all 0.5s ease-out 0s;}
.intro .hd-h1:before{content:" ";height:124px;width:2px;background:#01c2f3;opacity:1;position:absolute;left:0;right:0;top:78px;margin:0 auto;}
.shrink .hd-h1:before{height:60px;top:68px;opacity:.4;}
.intro .shrink .hd-h1{min-height: 131px;}

.web-application ul li:nth-child(3n+1) .details{clear:both;}
.web-application ul li:nth-child(2) .details{margin-top:90px;margin-bottom:0;}
.web-application ul li:nth-child(5) .details{margin-top:75px;margin-bottom:0;}
.web-application ul li:nth-child(4) .details,.web-application ul li:nth-child(6) .details{margin-top:-10px}
}
.services{padding-top: 131px;}
.intro .hd-h1{font-size:60px;position:relative;min-height:218px;}
.hd-span{display:block;font-size:82px;margin:0;color:#000;line-height:82px;}
.hd-animation em{display:block;color:#313131;font-style:italic;margin:0;padding:0;font-size:24px;}

.web-application ul{padding:70px 0 0;margin-bottom:-21%;}
.web-application ul li .details{margin:0 24px 40px;background:#fff;padding:40px 24px 24px;min-height:386px;}
.web-application ul li h3{color:#000;font-size:21px;position:relative;background:url(../images/sm-headingbg.png) no-repeat left bottom;padding: 0 0 18px;overflow:hidden;}
.web-application ul li p{font-size:15px;font-family:Calibri, Arial, sans-serif}
/*.web-application ul li:nth-child(3n+1) .details{clear:both;}
.web-application ul li:nth-child(2) .details{margin-top:90px;margin-bottom:0;}
.web-application ul li:nth-child(5) .details{margin-top:75px;margin-bottom:0;}
.web-application ul li:nth-child(4) .details,.web-application ul li:nth-child(6) .details{margin-top:-10px}*/

.wordslide {
  -webkit-animation: pulse 3s ease forwards,  nudge 5s linear forwards;
          animation: pulse 3s ease forwards,  nudge 5s linear forwards;
		  
}
@-webkit-keyframes nudge {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
    -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px);
  }
  80% {
    -webkit-transform: translate(0, -10px);
            transform: translate(0, -10px);
  }
}
@keyframes nudge {
  0%, 100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  50% {
     -webkit-transform: translate(0, 10px);
            transform: translate(0, 10px);
  }
  80% {
    -webkit-transform: translate(0, -10px);
            transform: translate(0, -10px);
  }
}


.blue-bubble-services{position:absolute;top:0;right:0;display:block;background:#01c2f3;border-radius:250px;width:350px;height:350px;opacity:0;
 -webkit-animation: float-bubble-blue-services 7s ease-in forwards;
	-moz-animation: float-bubble-blue-services 7s ease-in forwards;
	-o-animation: float-bubble-blue-services 7s ease-in forwards;
	animation: float-bubble-blue-services 7s ease-in forwards;
}
.yellow-bubble-services{position:absolute;top:15px;right:0;display:block;background:#f3df01;border-radius:250px;width:100px;height:100px;opacity:0;
 -webkit-animation: float-bubble-yellow-services 3s ease-in forwards;
	-moz-animation: float-bubble-yellow-services 3s ease-in forwards;
	-o-animation: float-bubble-yellow-services 3s ease-in forwards;
	animation: float-bubble-yellow-services 3s ease-in forwards;
}
@-webkit-keyframes float-bubble-blue-services {
0%{opacity:0;right:-140px; top:-157px;transform:scale(.5)}
30%{opacity:1;transform:scale(1);top:-157px;right:-140px;}
100%{opacity:1;top:-157px;right:-140px;}
}

@-webkit-keyframes float-bubble-yellow-services {
0%{opacity:0;top:160px;right:-35px;transform:scale(.5)}
30%{opacity:1;transform:scale(1);top:180px;right:-35px}
100%{opacity:1;top:140px;right:-35px}
}

/*======Center-Bubbles-Animation========*/

.blue-center-services{position:relative;top:-216px;right:150px;display:block;background:#01c2f3;border-radius:250px;width:300px;height:300px;opacity:0;
 -webkit-animation: float-center-blue-services 7s ease-in forwards;
	-moz-animation: float-center-blue-services 7s ease-in forwards;
	-o-animation: float-center-blue-services 7s ease-in forwards;
	animation: float-center-blue-services 7s ease-in forwards;
}
.yellow-center-services{position:relative;top:15px;right:24px;display:block;background:#f3df01;border-radius:250px;width:120px;height:120px;opacity:0;
 -webkit-animation: float-center-yellow-services 3s ease-in forwards;
	-moz-animation: float-center-yellow-services 3s ease-in forwards;
	-o-animation: float-center-yellow-services 3s ease-in forwards;
	animation: float-center-yellow-services 3s ease-in forwards;
}
@-webkit-keyframes float-center-blue-services {
0%{opacity:0;top:-440px;transform:scale(.5)}
30%{opacity:1;transform:scale(1);top:-440px;}
100%{opacity:1;top:-440px;/*right:15px*/}
}

@-webkit-keyframes float-center-yellow-services {
0%{opacity:0;top:-631px;right:15px;transform:scale(.5)}
30%{opacity:1;top:-431px;transform:scale(1);right:0px}
100%{opacity:1;top:-531px;/*right:15px*/}
}

/*======Triangle-Animation========*/

.blue-triangle-services{position:absolute;bottom:-150px;right:175px;display:block;width:0;height:0;opacity:0;border-left:125px solid transparent;border-right:125px solid transparent;border-bottom:155px solid #01c2f3; z-index:100;
-webkit-animation:float-triangle-blue-services 3s ease-in forwards;
-moz-animation:float-triangle-blue-services 3s ease-in forwards;
-o-animation:float-triangle-blue-services 3s ease-in forwards;
animation:float-triangle-blue-services 3s ease-in forwards;
}
.yellow-triangle-services{position:absolute;bottom:-450px;right:40px;/*display:block;*/width:0;height:0;opacity:0;border-left:80px solid transparent;border-right:80px solid transparent;border-bottom:100px solid #f3df01;z-index:101;
-webkit-animation:float-triangle-yellow-services 4s ease-in forwards;
-moz-animation:float-triangle-yellow-services 4s ease-in forwards;
-o-animation:float-triangle-yellow-services 4s ease-in forwards;
animation:float-triangle-yellow-services 4s ease-in forwards;}

@-webkit-keyframes float-triangle-blue-services{
  0% {
	opacity: 0  ;	
	bottom:-150px;
	-webkit-transform: scale(.3);
  }
  30% {
	opacity:1;
	
  }
  100% {
	opacity:1;
	bottom:0;	
  }
}


@-webkit-keyframes float-triangle-yellow-services{
  0% {
	opacity: 0  ;	
	bottom:-150px;
	-webkit-transform: scale(.3);
  }
  30% {
	opacity:1;	
  }
 100% {
	 opacity:1;
	 bottom:0;	
  }
}








/*====---- ----====*/
@media (max-width:1199px){
	.container{max-width: 975px;}
	.web-application ul li .details{margin:0 0 40px;}
	body{border:1px solid black}
}
@media (max-width:1024px){
	.container{width:928px;padding:0}
	img{max-width:100%;height:auto}.our-services ul li figure img,.web-design figure img{max-width:inherit}
	
	body{border:1px solid orange}
}
@media (max-width:991px){
	.container{width:700px}
		
	body{border:1px solid red} 
}
@media (max-width:767px){ 
	.container{width:590px}
	.hd-span{font-size: 62px;line-height: 62px;}
	
	body{border:1px solid lightgreen}
}
@media (max-width:639px){
	.container{width:440px}
	
	body{border:1px solid blue}
}
@media (max-width:524px){
	
	body{border:1px solid #0fa5e4}
}
@media (max-width:480px){
	.container{max-width:92%}
	html{-webkit-text-size-adjust:none}
    
	body{border:1px solid magenta}
}
@media (max-width:400px){
	
	body{border:1px solid pink}
}