/*
* Template Name: Tri Networks Multipurpose Bootstrap Design
* Author: Design Gurus
* Author URL: https://themeforest.net/user/design_gurus
* Version: 1.0
*/

/* =============================================================================

1. Fonts
2. Common Styles(Margins Paddings Colors backgrounds)
3. Pre-Loader(Page Loader)
4. Nice Scroll (Custom Scroll)
5. Form|Inputs|Text-AreaS| Styles
6. Buttons
7. Navbar | Navigation Bar | Top Bar
8. Banner | Slider | Top Section
9. Services Section
10. Who We Are Section
11. Counters Section
12. Features Section
13. Reasons Section
14. Our Team Section
15. Footer Section

============================================================================= */


/* ============================================================================= 
1. Fonts
============================================================================= */

@font-face {
    font-family: robo-light;
    src: url("../fonts/roboto/Roboto-Light.ttf");
}
@font-face {
    font-family: robo-medium;
    src: url("../fonts/roboto/Roboto-Medium.ttf");
}
@font-face {
    font-family: robo-bold;
    src: url("../fonts/roboto/Roboto-Bold.ttf");
}

/* ============================================================================= 
2. Common Styles
============================================================================= */
/*body{
    background: #F9FAFC;
    overflow-x: hidden;
}
body p,
body span{
    line-height: 15pt;
}
body h1{
    line-height: 39pt;
}
body h2{
    line-height: 34pt;
}*/
button{
    outline: none !important;
}
a{
    outline: none !important;
    text-decoration: none !important;
}
.relative{
    position: relative;
}
input,
input:focus{
    box-shadow: none !important;
}
.p0{
    padding: 0;
}
.m0{
    margin: 0;
}
.mB0{
    margin-bottom: 0;
}
.mT0{
    margin-top: 0;
}
.centered{
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.logo{
    padding-top: 20px;
    padding-bottom: 20px;
}
.sectionP100{
    padding-top: 100px;
    padding-bottom: 100px;
}
.sectionP60{
    padding-top: 60px;
    padding-bottom: 60px;
}
.sectionP40{
    padding-top: 40px;
    padding-bottom: 40px;
}
.sectionP30{
    padding-top: 30px;
    padding-bottom: 30px;
}
.sectionP10{
    padding-top: 10px;
    padding-bottom: 10px;
}
p{
    font-size: 15px;
    color: #777;
}
.mT15{
    margin-top: 15px;
}
.UC{
    text-transform: uppercase;
}
.full-height{
    min-height: 100vh;
}

.pb0{
    padding-bottom: 0 !important;
}
.bold{
    font-family: robo-medium !important;
}
.bgTColor{
    background: rgba(32,34,38,0.94);
}
.white{
    color: #fff !important;
}
.ul-style{
    padding-left: 0;
    list-style: none;
}
.heading{
    position: relative;
    margin-bottom: 25px;
}

.heading h1{
    color: #24262b;
    font-size: 32px;
    font-family: robo-bold;
    text-transform: uppercase;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

.heading span{
    color: #F86A3A;
    font-size: 100px;
    font-family: robo-bold;
    opacity: .08;
    position: absolute;
    z-index: 0;
    top: 10px;
    left: -33px;
}

/*section-headings*/
.heading.dark-bg h1{
    color: #F86A3A;
}
.heading.dark-bg span{
    color: #fff;
    opacity: .04;
}

.heading.dark-bg.text-center span{
    left: 0;
    width: 100%;
    text-align: center;
}

.heading.white-bg.text-center span{
    left: 0;
    width: 100%;
    text-align: center;
}



/* =============================================================================
8. Banner | Slider | Top Section
============================================================================= */
/*banner-bg-image*/
.main-banner-2{
    background: url('../images/head_bg1.jpg') center fixed;
    background-size: cover;
}

.main-banner-2 .bg-gradient-2{
    background: rgba(32,34,38,0.7);
    background: -moz-linear-gradient(top, rgba(32,34,38,0.7) 0%, rgba(32,34,38,0.98) 74%, rgba(32,34,38,1) 100%);
    background: -webkit-linear-gradient(top, rgba(32,34,38,0.7) 0%, rgba(32,34,38,0.98) 74%, rgba(32,34,38,1) 100%);
    background: -o-linear-gradient(top, rgba(32,34,38,0.7) 0%, rgba(32,34,38,0.98) 74%, rgba(32,34,38,1) 100%);
    background: -ms-linear-gradient(top, rgba(32,34,38,0.7) 0%, rgba(32,34,38,0.98) 74%, rgba(32,34,38,1) 100%);
    background: linear-gradient(to bottom, rgba(32,34,38,0.7) 0%, rgba(32,34,38,0.98) 74%, rgba(32,34,38,1) 100%);
    padding: 100px 100px 100px 100px;
    height: 100vh;
    max-height: 100vh;
}
.bg-gradient-2{
	width:100vw;

}

.fullscreen-video-wrap{
	position:absolute;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	overflow:hidden;
}
.fullscreen-video-wrap video{
	min-width:100vw;
	min-height:100vh;
}
.header-overlay{
	height:100vh;
	max-height:100vh;
	width:100%;
	top:0;
	left:0;
	right:0;
	background:#000000;
	opacity:0.9;
}
.header-content{
	z-index:2;
	}





.slideshow {
  list-style: none;
  z-index: 1;
}
.slideshow li span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: none;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-animation: imageAnimation 15s linear infinite 0s;
  -moz-animation: imageAnimation 15s linear infinite 0s;
  animation: imageAnimation 15s linear infinite 0s;
}
.slideshow li .slide-1-1 {
  position: absolute;
  text-align: center;
  z-index: 2;
  top: 50px;
  left: 0;
  right: 0;
  opacity: 0;
  font-size: 4.0625em;
  font-family: 'Josefin Sans', sans-serif;
  text-transform: uppercase;
  color: #fff;
  -webkit-animation: titleAnimation 24s linear 1 0s;
  -moz-animation: titleAnimation 24s linear 1 0s;
  animation: titleAnimation 24s linear 1 0s;
}
@media only screen and (min-width: 768px) {
  .slideshow li .slide-1-1 {
    top: 30px;
    font-size: 8.125em;
  }
}
@media only screen and (min-width: 1024px) {
  .slideshow li .slide-1-1 {
    font-size: 10.9375em;
  }
}

.slideshow li .slide-1-2 {
  position: absolute;
  text-align: center;
  z-index: 2;
  top: 250px;
  left: 0;
  right: 0;
  opacity: 0;
  font-size: 2.0625em;
  font-family: 'Josefin Sans', sans-serif;
  text-transform: uppercase;
  color: #fff;
  -webkit-animation: titleAnimation 24s linear 1 0s;
  -moz-animation: titleAnimation 24s linear 1 0s;
  animation: titleAnimation 24s linear 1 0s;
}
@media only screen and (min-width: 768px) {
  .slideshow li .slide-1-2 {
    top: 230px;
    font-size: 3.125em;
  }
}
@media only screen and (min-width: 1024px) {
  .slideshow li .slide-1-2 {
    font-size: 2.9375em;
  }
}




.slideshow li .slide-2-1 {
  position: absolute;
  text-align: center;
  z-index: 2;
  top: 50px;
  left: 0;
  right: 0;
  opacity: 0;
  font-size: 4.0625em;
  font-family: 'Josefin Sans', sans-serif;
  text-transform: uppercase;
  color: #fff;
  -webkit-animation: titleAnimation 50s linear 1 25s;
  -moz-animation: titleAnimation 50s linear 1 25s;
  animation: titleAnimation 50s linear 1 25s;
}
@media only screen and (min-width: 768px) {
  .slideshow li .slide-2-1 {
    top: 30px;
    font-size: 8.125em;
  }
}
@media only screen and (min-width: 1024px) {
  .slideshow li .slide-2-1 {
    font-size: 10.9375em;
  }
}

.slideshow li .slide-2-2 {
  position: absolute;
  text-align: center;
  z-index: 2;
  top: 250px;
  left: 0;
  right: 0;
  opacity: 0;
  font-size: 2.0625em;
  font-family: 'Josefin Sans', sans-serif;
  text-transform: uppercase;
  color: #fff;
  -webkit-animation: titleAnimation 50s linear 1 25s;
  -moz-animation: titleAnimation 50s linear 1 25s;
  animation: titleAnimation 50s linear 1 25s;
}
@media only screen and (min-width: 768px) {
  .slideshow li .slide-2-2 {
    top: 230px;
    font-size: 3.125em;
  }
}
@media only screen and (min-width: 1024px) {
  .slideshow li .slide-2-2 {
    font-size: 2.9375em;
  }
}




.slideshow li .slide-3-1 {
  position: absolute;
  text-align: center;
  z-index: 2;
  top: 50px;
  left: 0;
  right: 0;
  opacity: 0;
  font-size: 4.0625em;
  font-family: 'Josefin Sans', sans-serif;
  text-transform: uppercase;
  color: #fff;
  -webkit-animation: titleAnimation 75s linear 1 50s;
  -moz-animation: titleAnimation 75s linear 1 50s;
  animation: titleAnimation 75s linear 1 50s;
}
@media only screen and (min-width: 768px) {
  .slideshow li .slide-3-1 {
    top: 30px;
    font-size: 8.125em;
  }
}
@media only screen and (min-width: 1024px) {
  .slideshow li .slide-3-1 {
    font-size: 10.9375em;
  }
}

.slideshow li .slide-3-2 {
  position: absolute;
  text-align: center;
  z-index: 2;
  top: 250px;
  left: 0;
  right: 0;
  opacity: 0;
  font-size: 2.0625em;
  font-family: 'Josefin Sans', sans-serif;
  text-transform: uppercase;
  color: #fff;
  -webkit-animation: titleAnimation 75s linear 1 50s;
  -moz-animation: titleAnimation 75s linear 1 50s;
  animation: titleAnimation 75s linear 1 50s;
}
@media only screen and (min-width: 768px) {
  .slideshow li .slide-3-2 {
    top: 230px;
    font-size: 3.125em;
  }
}
@media only screen and (min-width: 1024px) {
  .slideshow li .slide-3-2 {
    font-size: 2.9375em;
  }
}



.slideshow li h3333 {
  position: absolute;
  text-align: center;
  z-index: 2;
  top: 50px;
  left: 0;
  right: 0;
  opacity: 0;
  font-size: 4.0625em;
  font-family: 'Josefin Sans', sans-serif;
  text-transform: uppercase;
  color: #fff;
  -webkit-animation: titleAnimation 24s linear 1 0s;
  -moz-animation: titleAnimation 24s linear 1 0s;
  animation: titleAnimation 24s linear 1 0s;
}
@media only screen and (min-width: 768px) {
  .slideshow li h3333 {
    top: 30px;
    font-size: 8.125em;
  }
}
@media only screen and (min-width: 1024px) {
  .slideshow li h3333 {
    font-size: 10.9375em;
  }
}

.slideshow li div333 {
  position: absolute;
  text-align: center;
  z-index: 2;
  top: 250px;
  left: 0;
  right: 0;
  opacity: 0;
  font-size: 2.0625em;
  font-family: 'Josefin Sans', sans-serif;
  text-transform: uppercase;
  color: #fff;
  -webkit-animation: titleAnimation 24s linear 1 0s;
  -moz-animation: titleAnimation 24s linear 1 0s;
  animation: titleAnimation 24s linear 1 0s;
}
@media only screen and (min-width: 768px) {
  .slideshow li div333 {
    top: 230px;
    font-size: 3.125em;
  }
}
@media only screen and (min-width: 1024px) {
  .slideshow li div333 {
    font-size: 2.9375em;
  }
}




.slideshow li:nth-child(1) span {
  background-image: url(../images/head_bg1.jpg);
  background-size: cover;
  width:100vw;
}

.slideshow li:nth-child(2) span {
  background-image: url(../images/head_bg2.jpg);
  background-size: cover;
  width:100vw;
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  animation-delay: 20s;
}

.slideshow li:nth-child(3) span {
  background-image: url(../images/head_bg3.jpg);
  background-size: cover;
  width:100vw;
  -webkit-animation-delay: 40s;
  -moz-animation-delay: 40s;
  animation-delay: 40s;
}

.slideshow li:nth-child(4) span {
  background-image: url(../images/head_bg4.jpg);
  background-size: cover;
  width:100vw;
  -webkit-animation-delay: 60s;
  -moz-animation-delay: 60s;
  animation-delay: 60s;
}

.slideshow li:nth-child(5) span {
  background-image: url(../images/head_bg5.jpg);
  background-size: cover;
  width:100vw;
  -webkit-animation-delay: 80s;
  -moz-animation-delay: 80s;
  animation-delay: 80s;
}

.slideshow li:nth-child(6) span {
  background-image: url(../images/head_bg6.jpg);
  background-size: cover;
  width:100vw;
  -webkit-animation-delay: 100s;
  -moz-animation-delay: 100s;
  animation-delay: 100s;
}

.slideshow li:nth-child(7) span {
  background-image: url(../images/head_bg7.jpg);
  background-size: cover;
  width:100vw;
  -webkit-animation-delay: 120s;
  -moz-animation-delay: 120s;
  animation-delay: 120s;
}

.slideshow li:nth-child(8) span {
  background-image: url(../images/head_bg8.jpg);
  background-size: cover;
  width:100vw;
  -webkit-animation-delay: 140s;
  -moz-animation-delay: 140s;
  animation-delay: 140s;
}

.slideshow li:nth-child(9) span {
  background-image: url(../images/head_bg9.jpg);
  background-size: cover;
  width:100vw;
  -webkit-animation-delay: 160s;
  -moz-animation-delay: 160s;
  animation-delay: 160s;
}

.slideshow li:nth-child(10) span {
  background-image: url(../images/head_bg10.jpg);
  background-size: cover;
  width:100vw;
  -webkit-animation-delay: 180s;
  -moz-animation-delay: 180s;
  animation-delay: 180s;
}


@-webkit-keyframes imageAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }
  12.5% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes imageAnimation {
  0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
  }
  12.5% {
    opacity: 1;
    -moz-animation-timing-function: ease-out;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes imageAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  12.5% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes titleAnimation {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes titleAnimation {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes titleAnimation {
  0% {
    opacity: 0;
  }
  12.5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  37.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.no-cssanimations .slideshow li span {
  opacity: 1;
}




 /* Tooltip container */
.my-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
	color:#F00;
}

/* Tooltip text */
.my-tooltip .my-tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: #F00;
    color: #F00;
    text-align: center;
    padding: 5px;
    border-radius: 0px;

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* Fade in tooltip */
    opacity: .7;
    transition: opacity 0.3s;
}

/* Tooltip arrow */
.my-tooltip .my-tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #F00 transparent transparent transparent;
	color:#F00;
}

/* Show the tooltip text when you mouse over the tooltip container */
.my-tooltip:hover .my-tooltiptext {
    visibility: visible;
    opacity: 1;
} 


.form-group .register-error-message{
	color:#F00;
	}
	
	



/* =============================================================================
15. Testimonial Section
============================================================================= */
.testimonial-bg{
	/*background: url('../images/main-bg.jpg')fixed center;*/
	background: url('../index_images/map.png')center no-repeat;*
	
	background-size: cover;
}
.testimonial-bg .bg-color{
	background: rgba(255,255,255,0);
}

#section-quote {
    width: 100%;
    position: relative;
    overflow:hidden;
    text-align: center
}

#section-quote > h2 {
    color: #0e1c2a;
    font-family: OpenSans-Regular;
    font-size: 36px;
    font-weight: normal
}

#section-quote > p {
    color: #767676;
    font-family: OpenSans-Light;
    font-size: 18px;
    text-align: center;
    margin-top: 10px
}

#section-quote .container-quote {
    position: relative;
    width: 100%;
    margin: 120px 0 150px;
    height: 135px;-webkit-perspective: 10000px;
    -moz-perspective: 10000px;
    -ms-perspective: 10000px;
    perspective: 10000px
}

#section-quote .container-quote .quote {
    width: 520px;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 50%;
    cursor: pointer;
    text-align: center;-webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: all 1s cubic-bezier(0.5,-0.01, 0, 1.005);
    -moz-transition: all 1s cubic-bezier(0.5,-0.01, 0, 1.005);
    -o-transition: all 1s cubic-bezier(0.5,-0.01, 0, 1.005);
    transition: all 1s cubic-bezier(0.5,-0.01, 0, 1.005)
}

#section-quote .container-quote .quote.hide-top {
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(-100%) rotateX(70deg);
    -moz-transform: translateX(-50%) translateY(-100%) rotateX(70deg);
    -ms-transform: translateX(-50%) translateY(-100%) rotateX(70deg);
    -o-transform: translateX(-50%) translateY(-100%) rotateX(70deg);
    transform: translateX(-50%) translateY(-100%) rotateX(70deg)
}

#section-quote .container-quote .quote.show {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(0%) rotateX(0deg);
    -moz-transform: translateX(-50%) translateY(0%) rotateX(0deg);
    -ms-transform: translateX(-50%) translateY(0%) rotateX(0deg);
    -o-transform: translateX(-50%) translateY(0%) rotateX(0deg);
    transform: translateX(-50%) translateY(0%) rotateX(0deg)
}

#section-quote .container-quote .quote.hide-bottom {
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(100%) rotateX(-70deg);
    -moz-transform: translateX(-50%) translateY(100%) rotateX(-70deg);
    -ms-transform: translateX(-50%) translateY(100%) rotateX(-70deg);
    -o-transform: translateX(-50%) translateY(100%) rotateX(-70deg);
    transform: translateX(-50%) translateY(100%) rotateX(-70deg)
}

#section-quote .container-quote .quote p {
    color: #24262B;
    font-family: robo-light;
    font-size: 25px;
	line-height: 25pt;
    display: block
}

#section-quote .container-quote .quote .container-info {
    display: inline-block;
    padding-left: 40px;
    position: relative;
    margin-top: 20px;
    text-align: left
}

#section-quote .container-quote .quote .container-info .pp {
    height: 30px;
    width: 30px;
    border-radius: 100%;
    position: absolute;
    left: 0px;
    top: 50%;
	border:2px solid #fff;
	box-shadow: 0 2px 3px rgba(0,0,0,0.1);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 120%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

#section-quote .container-quote .quote .container-info .name {
    color: #F86A3A;
    font-family: robo-light;
    font-size: 15px
}

#section-quote .container-quote .quote .container-info .job {
    color: #666;
    font-family: robo-light;
    font-size: 12px
}

#section-quote .container-pe-quote {
    position: absolute;
    height: 100%;
    top: 0px;
    z-index: 1
}

#section-quote .container-pe-quote.left {
    left: 90px
}

#section-quote .container-pe-quote.right {
    right: 46px
}

#section-quote .container-pe-quote .pp-quote {
    cursor: pointer;
    position: absolute;
    border-radius: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    animation-name: floating;
    -webkit-animation-name: floating;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
	-webkit-transform-origin: 50% 1px;
    -moz-transform-origin: 50% 1px;
    -ms-transform-origin: 50% 1px;
    -o-transform-origin: 50% 1px;
    transform-origin: 50% 1px;
    -webkit-transition: all 2s ease;-moz-transition: all 2s ease;
    -ms-transition: all 2s ease;-o-transition: all 2s ease;
    transition: all 2s ease
}

#container-general .anim-section-quote #section-quote .container-pe-quote .pp-quote {
    opacity: 1
}

#section-quote .container-pe-quote .pp-quote .img {
    overflow:hidden;
    border-radius: 100%;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 120%;
    position: relative;
    z-index: 1
}

#section-quote .container-pe-quote .pp-quote:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    height: calc(100% + 5px);
    width: calc(100% + 5px);
    border-radius: 100%;
    background-color: #fff;
    -webkit-transform: translate(-50%,-50%) scale(1);
    -moz-transform: translate(-50%,-50%) scale(1);
    -ms-transform: translate(-50%,-50%) scale(1);
    -o-transform: translate(-50%,-50%) scale(1);
    transform: translate(-50%,-50%) scale(1);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease
}

#section-quote .container-pe-quote .pp-quote:hover:after,
#section-quote .container-pe-quote .pp-quote.active:after
{	
    background-color: #F86A3A;
    -webkit-transform: translate(-50%,-50%) scale(1.05);
    -moz-transform: translate(-50%,-50%) scale(1.05);
    -ms-transform: translate(-50%,-50%) scale(1.05);
    -o-transform: translate(-50%,-50%) scale(1.05);
    transform: translate(-50%,-50%) scale(1.05);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}

@keyframes floating {
    from {
        -webkit-transform: rotate(0deg) translate(-10px) rotate(0deg);
        -moz-transform: rotate(0deg) translate(-10px) rotate(0deg);
        -ms-transform: rotate(0deg) translate(-10px) rotate(0deg);
        -o-transform: rotate(0deg) translate(-10px) rotate(0deg);
        transform: rotate(0deg) translate(-10px) rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg);
        -moz-transform: rotate(360deg) translate(-10px) rotate(-360deg);
        -ms-transform: rotate(360deg) translate(-10px) rotate(-360deg);
        -o-transform: rotate(360deg) translate(-10px) rotate(-360deg);
        transform: rotate(360deg) translate(-10px) rotate(-360deg)
    }
}

@-webkit-keyframes floating {

    from {-webkit-transform: rotate(0deg) translate(-10px) rotate(0deg);
		-moz-transform: rotate(0deg) translate(-10px) rotate(0deg);
		-ms-transform: rotate(0deg) translate(-10px) rotate(0deg);
		-o-transform: rotate(0deg) translate(-10px) rotate(0deg);
		transform: rotate(0deg) translate(-10px) rotate(0deg)
    }

    to {-webkit-transform: rotate(360deg) translate(-10px) rotate(-360deg);
		-moz-transform: rotate(360deg) translate(-10px) rotate(-360deg);
		-ms-transform: rotate(360deg) translate(-10px) rotate(-360deg);
		-o-transform: rotate(360deg) translate(-10px) rotate(-360deg);
		transform: rotate(360deg) translate(-10px) rotate(-360deg)
    }

}


#section-quote .container-pe-quote .li-quote-1 {
    height: 90px;
    width: 90px;
    left: 15px;
    top: 30px;
    animation-duration: 10s;
    -webkit-animation-duration: 10s;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s
}
#section-quote .container-pe-quote .li-quote-2 {
    height: 63px;
    width: 63px;
    left: 120px;
    top: 150px;
    animation-duration: 12s;
    -webkit-animation-duration: 12s;
    -webkit-transition-delay: 0s;
    transition-delay: 0s
}
#section-quote .container-pe-quote .li-quote-3
{
    height: 82px;
    width: 82px;
    left:-70px;
    top: 180px;
    animation-duration: 11s;
    -webkit-animation-duration: 11s;
    -webkit-transition-delay: 0.6s;
    transition-delay: 0.6s
}
#section-quote .container-pe-quote .li-quote-4
{
    height: 48px;
    width: 48px;
    left: 68px;
    top: 250px;
    animation-duration: 6s;
    -webkit-animation-duration: 6s;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s
}
#section-quote .container-pe-quote .li-quote-5
{
    height: 73px;
    width: 73px;
    left:-60px;
    top: 320px;
    animation-duration: 7s;-webkit-animation-duration: 7s;-webkit-transition-delay: 0.7s;
    transition-delay: 0.7s
}
#section-quote .container-pe-quote .li-quote-6
{
    height: 63px;
    width: 63px;
    left: 65px;
    top: 380px;
    animation-duration: 5s;-webkit-animation-duration: 5s;-webkit-transition-delay: 0.1s;
    transition-delay: 0.1s
}
#section-quote .container-pe-quote .li-quote-12
{  height: 63px;
    width: 63px;
    left: -15px;
    top: 460px;
    animation-duration: 8s;-webkit-animation-duration: 8s;-webkit-transition-delay: 0.3s
;
    transition-delay: 0.3s
}
#section-quote .container-pe-quote .li-quote-7
{
    height: 73px;
    width: 73px;
    right:-15px;
    top: 30px;
    animation-duration: 5s;-webkit-animation-duration: 5s;-webkit-transition-delay: 0.7s;
    transition-delay: 0.7s
}
#section-quote .container-pe-quote .li-quote-8
{
    height: 73px;
    width: 73px;
    right: 28px;
    top: 150px;
    animation-duration: 8s;-webkit-animation-duration: 8s;-webkit-transition-delay: 0.4s;
    transition-delay: 0.4s
}
#section-quote .container-pe-quote .li-quote-9
{
    height: 48px;
    width: 48px;
    right: 150px;
    top: 90px;
    animation-duration: 7s;-webkit-animation-duration: 7s;-webkit-transition-delay: 0.3s;
    transition-delay: 0.3s
}
#section-quote .container-pe-quote .li-quote-10
{
    height: 90px;
    width: 90px;
    right: 114px;
    top: 250px;
    animation-duration: 8s;-webkit-animation-duration: 8s;-webkit-transition-delay: 0.4s;
    transition-delay: 0.4s
}
#section-quote .container-pe-quote .li-quote-11
{
    height: 52px;
    width: 52px;
    right: 28px;
    top: 320px;
    animation-duration: 7s;-webkit-animation-duration: 7s;-webkit-transition-delay: 0.5s;
    transition-delay: 0.5s
}
#section-quote .container-pe-quote .li-quote-13
{
    height: 42px;
    width: 42px;
    right: 128px;
    top: 380px;
    animation-duration: 9s;-webkit-animation-duration: 9s;-webkit-transition-delay: 0.2s;
    transition-delay: 0.2s
}
#section-quote .container-pe-quote .li-quote-14
{
    height: 48px;
    width: 48px;
    right: 108px;
    top: 470px;
    animation-duration: 7s;-webkit-animation-duration: 7s;-webkit-transition-delay: 0.2s;
    transition-delay: 0.2s
}