body { background:#f5f5f5; width:100%; margin:0 auto; padding:0; font-family: 'Exo', sans-serif; }
.header-section { float:left; width:100%; position:relative; height:650px; background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; background-color:#545454; background-blend-mode:multiply; background-image:url(../images/banner.jpg); }
/**** SLIDER ****/
.navigationsection { float:left; width:100%; padding:20px 30px; position:fixed; z-index:10; }
.logo-mobile img { max-width:230px; }
.banner-content { float:left; width:100%; padding-top:10%; }
.banner-caption { float:left; width:50%; color:#fff; letter-spacing:.5px;  }
.banner-caption h4 { font-size:40px; padding:50px 0px; font-weight:700; line-height:50px; animation-delay: 8s; }
.banner-caption p { font-size:20px; padding-bottom:30px; animation-delay: 9s; }
.banner-caption a { font-size:16px; border:1px solid #fff; padding:10px 20px; color:#fff; animation-delay: 10s; text-decoration:none; }
.banner-caption a:hover { border:1px solid #fff; color:#fff; background:#33b5cc; }
.banner-image { float:left; width:35%; position:relative; margin-left:15%; margin-top:4%; }
.banner-thumb { max-width:100px; padding:5%; border-radius:50%; position:absolute; top:0; left:0; }
.banner-image-1 { background:#ec4c4c; z-index:7 }
.banner-image-2 { background:#ede576; animation-delay: 2s; animation-name: slideInLeftUp100; animation-duration: 2s; animation-fill-mode: both; }
.banner-image-2:before { background:#ede576; width:100px; height:100px; }
.banner-image-2:after { background:#ede576; width:100px; height:100px; }
@keyframes slideInLeftUp100 {
	0%   { left:0px; top:0px; }
    50%  { left:100px; top:100px; }
    100% { left:200px; top:0px; }
}
.banner-image-3 { background:#ec4c4c; z-index:6; animation-delay: 4s; animation-name: slideInRightDown100; animation-duration: 1s; animation-fill-mode: both; }
@keyframes slideInRightDown100 {
	0%   { left:0px; top:0px; }
    100%  { left:-100px; top:100px; }
}
.banner-image-4 { background:#33b5cc; z-index:5; animation-delay: 5s; animation-name: slideInLeftDown100; animation-duration: 1s; animation-fill-mode: both; }
@keyframes slideInLeftDown100 {
	0%   { left:0px; top:0px; }
    100%  { left:100px; top:100px; }
}
.banner-image-5 { background:#33b5cc; z-index:4; animation-delay: 6s; animation-name: slideInLeftDown200Up100; animation-duration: 3s; animation-fill-mode: both; }
@keyframes slideInLeftDown200Up100 {
	0%   { left:0px; top:0px; }
    50%  { left:200px; top:200px; }
    100% { left:300px; top:100px; }
}
.banner-image-6 { background:#ec4c4c; z-index:3; animation-delay: 9s; animation-name: slideInLeft100Right100; animation-duration: 2s; animation-fill-mode: both; }
@keyframes slideInLeft100Right100 {
	0%   { left:0px; top:0px; }
    50%  { left:-100px; top:100px; }
    100% { left:0px; top:200px; }
}
.banner-image-7 { background:#33b5cc; z-index:3; animation-delay: 11s; animation-name: slideInLeftDown200; animation-duration: 2s; animation-fill-mode: both; }
@keyframes slideInLeftDown200 {
	0%   { left:0px; top:0px; }
    50%  { left:100px; top:100px; }
    100% { left:200px; top:200px; }
}
.navbar-nav li { background:none; border:none; padding:10px 15px; outline:none;  }
.navbar-nav > li > a { color:#fff; font-size:16px; font-weight:700; text-transform:uppercase; padding:0; /* border-bottom:1px solid transparent; */ }
.nav>li>a:focus, .nav>li>a:hover { background:none;  /* color:#33b5cc; border-bottom:1px solid #33b5cc !important; */ padding-bottom:5px; }
/* .active a { border-bottom:1px solid #33b5cc !important; padding-bottom:5px !important; color:#33b5cc !important;  } */

.full-section { float:left; width:100%; padding:40px 0; background:#f7f7f7; }
.service-full { float:left; width:100%; position:relative;  }
.section-heading { float:left; width:100%; text-align:center; font-size:20px; color:#252525; padding:0 0 10px; font-weight:700; text-transform:uppercase; }
.section-content { float:left; width:100%; text-align:justify; font-size:16px; color:#252525; padding:0 20% 20px; }
.contact-content { float:left; width:100%; text-align:center; font-size:16px; color:#fff; padding:0 20% 20px; margin-bottom:40px; }
.servicesection { float:left; width:32%; padding:30px 20px; border:1px solid #e4e4e4; background:#fff; border-radius:4px; margin:1% 0; min-height: 267px; }
.servicesection:nth-child(3n+2) { margin:1%; }
.services-content-section { float:left; width:100%; }
.services-icon { float:left; width:100%; text-align:center; margin:0 auto;  }
.services-icon img { max-width:40px; margin:0 auto;  }
.services-title { float:left; width:100%; text-align:center; color:#252525; padding:20px 0 10px; font-size:18px; text-transform:uppercase; font-weight:700;  }
.services-content { float:left; width:100%; text-align:center; color:#252525; font-size:13px; padding:0 0 20px;  }
.white-bg { background:#fff; }
.servicebox { float:left; width:32%; margin:0 0 2%; position:relative; padding:0; }
.servicebox:nth-child(3n+1) { margin:0 2% 2%; }
.services-image { float:left; width:100%; }
.services-content-hover { float:left; width:100%; background:rgba(0,0,0,.8); position:absolute; top:0; left:0; right:0; bottom:0; padding:20px; display:none; }
.hover-content { float:left; width:100%; text-align:justify; color:#fff; font-size:12px; padding:10px 0 20px;  }
.hover-link { float:left; width:100%; text-align:center; }
.hover-link a { border:1px solid #FFF; color:#fff; padding:5px 20px; text-decoration:none; }
.services-image:hover .services-content-hover { display:block; }
.hover-title { float:left; width:100%; text-align:center; color:#fff; padding:0 0 10px; font-size:24px; text-transform:capitalize; font-weight:700; }
.home-team-banner .banner-link a { float:right; }
.home-contact-banner { float:left; width:100%; padding:20px 30px; background-image:url(../images/contact-banner.jpg); background-repeat:no-repeat; background-size:cover; background-position:center; min-height:600px; }
.home-contact-banner .banner-text { padding-top:300px; text-align:left; }
.home-contact-banner .banner-link a { float:left; }
.footer-section { float:left; width:100%; background:#252525; padding:40px 0px; }
.message-heading { float:left; width:100%; text-align:left; color:#fff;  font-size:18px; font-weight:700; text-transform:uppercase; padding-bottom:20px; }
.contact-heading { float:left; width:100%; text-align:left; color:#fff;  font-size:18px; font-weight:700; text-transform:uppercase; padding-bottom:20px; }
.message-box { float:left; width:100%; }
.message-box input { float:left; width:100%; background:#e3e8f3; padding:5px; border:none; margin-bottom:5px; color:#0056b8; font-size:16px; outline:none;  }
.message-box textarea { float:left; width:100%; background:#e3e8f3; padding:5px; border:none; margin-bottom:5px; color:#0056b8; font-size:16px; outline:none; min-height:200px;  }
.message-box-button { float:left; width:100%; }
.message-box-button  input { float:right; background:#0056b8; padding:5px 20px; border:none; margin-bottom:5px; color:#fff; font-size:16px; outline:none; font-weight:700;  }
.contact-details { float:left; width:100%; }
.contact-details-left { float:left; width:50%; }
.contact-details-right { float:left; width:50%; }
.contact-person { float:left; width:100%; }
.contact-person-name { float:left; width:100%; color:#0056b8; font-size:18px; font-weight:700; }
.contact-person-name i { font-weight:400; font-style:normal; }
.contact-phone { float:left; width:100%; color:#666666; font-size:16px; font-weight:400; }
.contact-email { float:left; width:100%; color:#666666; font-size:16px; font-weight:400; margin-bottom:20px; text-decoration:underline; }
.copyrights-content { float:left; width:100%; background:#252525; padding:00px 0 20px; }
.footer-rights { float:left; color:#fff; font-size:14px; font-weight:400; text-align:center; }
.footer-about-content { float:left; width:100%; font-size:14px; font-weight:400; color:#fff; text-align:justify; }
.footer-links { float:left; }
.footer-links ul { width:100%; margin:0; padding:0; list-style:none; }
.footer-links ul li { float:left; width:100%; padding-bottom:5px; }
.footer-links ul li  a { float:left; width:100%; color:#fff; font-size:14px; font-weight:400; }
.contact-address-section { float:left; width:100%; }
.contact-address { float:left; width:100%; color:#fff; font-size:14px; font-weight:400; padding-bottom:18px; }
.contact-address b { width:15%; display:inline-block; }
.contact-address a { text-decoration:none; color:#fff; }
.contact-address a:hover { text-decoration:underline; }
.services-wrap { float:left; width:100%; padding:30px 20px; color:#fff; border-radius:8px; margin:1% 0; }
.services-wrap p { text-align:justify; }
.media-heading { float:left; width:100%; text-align:center; font-weight:700; font-size:20px; margin:0; padding-bottom:20px; text-transform:uppercase; }
.servicebg-blue { background:#3369E8; border: 10px solid #80a4f9; }
.servicebg-yellow { background:#eeb211; border: 10px solid #f9d678; }
.servicebg-red { background:#d50f25; border: 10px solid #f56272; }
.servicebg-green { background:#009925; border: 10px solid #7dfd9c; }
.servicebg-orange { background:#ee5728; border: 10px solid #ffaa90; }
.servicebg-darkblue { background:#6460aa; border: 10px solid #9691f7; }
.servicebg-purple { background:#8b288b; border: 10px solid #f786f7; }
.media-body { float:left; width:100%; }
.media-body img { display:block; text-align:center; margin:0 auto 20px; max-width:80px; }
.service-big-image { float:left; width:64%; margin-left:2%; min-height: 340px; }
.service-big-image img { margin:0 auto; }
.contact-heading { float:left; width:100%; text-align: center; font-size: 20px; color: #fff; padding: 0 0 40px; font-weight: 700; text-transform: uppercase}

@-webkit-keyframes expand{
    0%{height:200px}
    100%{height:0px}
}

/* BOUNCE ARROW */
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
.arrow a { position: absolute; bottom: 2%; left: 50%; margin-left: -20px; width: 40px; height: 40px; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); background-size: contain; }
.bounce a { -moz-animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; }
.contact-form-name { float:left; width:100%; margin-bottom:10px; }
.contact-form { padding:0 10%; }
.contact-name { float:left; width:30%; color:#fff; font-size:14px; padding-top:7px; text-transform:uppercase; padding-right:25px; text-align:right; }
.contact-box { float:left; width:70%; position:relative; }
.contact-box input { float:left; width:100%; color:#fff; font-size:14px; border:1px solid #fff; background:none; padding:5px 15px; }
.contact-box textarea { float:left; width:100%; color:#fff; font-size:14px; border:1px solid #fff; background:none; padding:5px 15px; min-height:170px; }
.contact-button { float:left; width:100%; }
.contact-button input { float:right; color:#fff; font-size:14px; border:1px solid #fff; background:none; padding:10px 20px; text-align:center; cursor:pointer; }
.contact-button input:hover { border:1px solid #fff; background:#33b5cc; }
.footer-social { float:left; }
.social-heading { float:left; width:100%; color:#fff; font-size:16px; padding-bottom:20px; text-transform:uppercase; }
.footer-social a { float:left; margin:0 20px 0 0;  }
.footer-social a img { max-width:38px;  }
.error-message { float:left; width:100%; padding:5px; font-size:13px; height:20px; }
.bg-black { background:rgba(0,0,0,.8); padding:10px 30px; }

.facebook { background-image:url("../images/facebook.svg"); background-repeat:no-repeat; background-position:center; background-size:cover; width:38px; height:38px; }
.google { background-image:url("../images/google.svg"); background-repeat:no-repeat; background-position:center; background-size:cover; width:38px; height:38px; }
.linkedin { background-image:url("../images/LinkedIn.svg"); background-repeat:no-repeat; background-position:center; background-size:cover; width:38px; height:38px; }
.instagram { background-image:url("../images/instagram.png"); background-repeat:no-repeat; background-position:center; background-size:cover; width:38px; height:38px; }
.whatsapp { background-image:url("../images/whatsapp_logo.jpeg"); background-repeat:no-repeat; background-position:center; background-size:cover; width:38px; height:38px; }

.facebook:hover { background-image:url("../images/facebook-hover.svg"); }
.google:hover { background-image:url("../images/google-hover.svg"); }
.linkedin:hover { background-image:url("../images/LinkedIn-hover.svg"); }
.instagram:hover { background-image:url("../images/instagram_hover.jpeg"); }

.navbar { margin-bottom:0; }
#client-section { padding:70px 0; }
.clientsection { float:left; width:20%; padding:30px 20px; border:1px solid #e4e4e4; background:#fff; border-radius:8px; }

@media (max-width:767px) { 
#myScrollspy { width: 100%; position: absolute; top: 0; right:0px;   }
.navbar-collapse { border-top:none; box-shadow: 0 0 0; background: rgba(0,0,0,0.9); margin-top: 13px; }
.navbar { margin-bottom:0px; }
.navbar-toggle { margin-top:0; margin-right:0; margin-bottom:0; }
.navigationsection { padding:15px !important; }
.navbar-toggle .icon-bar { background:#fff; }
.banner-content { padding-top:40%; }
.banner-image { display:none; }
.banner-caption { width:100%; }
.banner-caption h4 { font-size:30px; animation-delay: 1s; }
.banner-caption p { font-size:16px; animation-delay: 2s; }
.banner-caption a { font-size:14px; animation-delay: 3s; }
.footer-rights  { width:100%; }
.contact-address-section { float:left; width:100%; margin-top:20px; }
.contact-name { width:40%; }
.contact-box { width:60%; }
.contact-content,.section-content { padding:0 0 20px; }
.services-wrap,.servicesection { width:100%; }
.servicesection:nth-child(3n+2) { margin:1% 0; }
.error-message { font-size:12px; }
.logo-mobile img { max-width:160px; }
.contact-form { padding:0 15px; }
.contact-address b { width:auto;}
}