img { border-radius: 3px; }
bordercolor { height: 8px; display: block; background-color: #9EAB4D; }
bordertop { height: 5px; display: block; background-color: #9EAB4D; }
logo img { margin: 25px 0px 30px 0px; max-width: 200px; }
ul a { color: #9EAB4D; }
ul a:hover { color: #9EAB4D; }
#menubar { margin-top: 95px; padding: 0; float: right; z-index: 1; font-size: 18px; }
#menubar li { display: inline; margin-left: 30px; list-style: none; }
#menubar li a { display: block; text-decoration: none; display: inline; color: #69A357; white-space: nowrap; }
#menubar li a:hover , #menubar li:hover { color: #9EAB4D; }
#menubar li ul 
{ margin: 30px 0px 0px -100px;
  padding: 10px 20px;
  border-radius: 3px;
  position: absolute;
  visibility: hidden;
  background: #9EAB4D;
  opacity:0.85;
  display: inline;
  z-index: 2;
  text-align: center;
}
#menubar li ul li { float: none; margin: 0px; display: inline; }
#menubar li ul li a { padding: 0px; margin: 0px; text-align: center; z-index: 2; color: #ffffff; }
#menubar li ul li a:hover { color: #BFD6B1; }
bord { display: block; height: 10px; background-color: #ffffff; }
#menubar li a#active { color: #9EAB4D; border-bottom: 2px solid #9EAB4D; }
li#active { color: #7563A9; border-bottom: 5px solid #7563A9; }
#active1 { color: #7563A9; }
lin { height: 1px; margin: 8px -15px; background-color: #BFD6B1; display: block; }
#slider , #slider img { border-radius: 3px; overflow: hidden; z-index: 1; }
.slideshow-wrapper { min-height: 355px; }
.orbit-timer { display: none; }
whatwedo { margin-top: 10px; display: block; text-align: center; padding-bottom: 290px; Xborder-bottom: 1px dotted #9EAB4D; }
box { display: block; margin-top: 25px; text-align: left; }
box img { width: 80px; 	margin-bottom: 20px; }
box h1 { font-size: 26px; color: #9EAB4D; }
projects { display: block; margin-top: 80px; padding-bottom: 70px; text-align: center; }
projects h1 { font-size: 35px; margin-bottom: 80px; color: #9EAB4D; background-color: #E1E4D7; }
projects a:hover { opacity: .7; }
clients { display: block;  margin-top: 50px; padding-bottom: 0px; text-align: center; }
clients h1 { font-size: 35px; margin-bottom: 30px; color: #1abc9b; }
clients img { opacity: .5; background-color: #f6f4f6; border-radius: 5px; border: 2px solid #f6f4f6; }
clients img:hover { opacity: 1; }
footer { display: block; margin-top: 80px; padding: 20px 0px 0px 0px; border-top: 5px solid #9EAB4D; Xbackground-color: #F4E7F1; }
footer h4{ font-size: 26px; }
footer p{ font-size: 20px; }
footer p img{ margin: 0px 8px 0px 0px; }
social a { line-height: 30px; }
foot { text-align: right; padding: 0px 0px 10px 0px; display: block; font-size: 11px; color: #404040; }
foot a { color: #404040; opacity: .4; }
foot a:hover { color: #404040; opacity: 1; }
foot img { border-radius: 0px; }
.ender img:hover { opacity: .5; }
.google-maps {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;}
.google-maps iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
/* social icon */
.social 
{ padding: 8px 14px;
  border-radius: 3px;
  background-color: #98BF87;
  transition: all .6s;
  -moz-transition: all .6s;
  -webkit-transition: all .6s;
  -o-transition: all .6s;
  color: #ffffff;
}
.social:hover 
{ transition: all .3s;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  color: #ffffff;
}
.facebook:hover { background-color: #435fa8; }
.twitter:hover { background-color: #39d2fe; }
.google:hover { background-color: #dd4c37; }
.pinterest:hover { background-color: #cb2026; }
.dribbble:hover { background-color: #f472a2; }
/* work page & single work page */
works { text-align: center; display: block; padding-bottom: 0px;/*30px*/; }
works h1 { line-height: 40px;/*50px*/; font-size: 35px;/*30px*/; margin-top: 10px;/*40px*/; text-align: left; background-color: #E1E4D7; padding: 20px; }
works small 
{ font-size: 18px;
  display: block;
  padding-bottom: 20px;
  border-bottom: 5px solid #e7e6e7;
  margin-bottom: 70px;
  color: #9EAB4D;
  text-align: left;
}
works img:hover 
{ opacity: .7;
  transition: all .3s;
  -moz-transition: all .3s;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
}
works p { font-size: 17px; line-height: 28px; text-align: justify; }
line { display: block; height: 1px; margin: 10px 0px; background-color: #9EAB4D; }
usernext { text-align: center; margin-top: 90px; padding-top: 20px; display: block; border-top: 1px solid #e7e6e7; }
social1 { line-height: 35px; display: block; text-align: right; }
works h4 { text-align: left; }
works h5 { border-bottom: 1px dotted #9EAB4D; padding-bottom: 8px; text-align: left; }
.clearing-featured-img img { margin-bottom: 20px; }
.clearing-featured-img img:hover { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }
/* About page */
about { display: block; padding-bottom: 30px; text-align: center; }
about li { margin-bottom: 20px; }
about h1 { line-height: 20px; font-size: 30px; margin-top: 20px; text-align: left; }
about small 
{ font-size: 15px;
  display: block;
  padding-bottom: 20px;
  border-bottom: 1px solid #e7e6e7;
  margin-bottom: 70px;
  color: #1abc9b;
  text-align: left;
}
about h5 { font-size: 25px; margin-top: 40px; text-align: center; line-height: 10px; }
about small1 
{ font-size: 15px;
  display: block;
  padding-bottom: 20px;
  border-bottom: 1px solid #e7e6e7;
  margin-bottom: 25px;
  color: #19bc9b;
  text-align: center;
}
about p { font-size: 15px; line-height: 20px; text-align: center; }
/* Contact page */
contact { display: block; padding-bottom: 30px; }
contact h1 { line-height: 20px; font-size: 35px; margin-top: 35px; text-align: center; background-color: #E1E4D7; padding: 15px; }
/* Elements page */
elements { display: block; padding-bottom: 30px; }
elements h1 { line-height: 20px; font-size: 30px; margin-top: 20px; text-align: left; }
elements small 
{ font-size: 15px;
  display: block;
  padding-bottom: 20px;
  border-bottom: 1px solid #e7e6e7;
  margin-bottom: 50px;
  color: #1abc9b;
  text-align: left;
}
elements h5 { font-weight: bold; }
line1 { display: block; height: 1px; margin: 40px 0px; background-color: #e7e5e7; }
elements .clearing-thumbs img { width: 200px; }
elements .clearing-thumbs img:hover { opacity: .7; }
/* Responsive */
@media only screen and (max-width: 850px) and (min-width: 768px) 
{ logo img { width: 150px; padding-top: 10px; }
  #menubar li { margin-left: 20px; }
  whatwedo { padding-bottom: 400px; }
  .slideshow-wrapper { min-height: 300px; }
}
@media only screen and (max-width: 767px) and (min-width: 500px) 
{ logo { text-align: center; display: block; margin-top: -30px; }
  #menubar li a#active { border: 0px; padding: 5px 10px; border-radius: 3px; background-color: #1abc9b; color: #ffffff; }
  #menubar { margin-top: -25px; margin-bottom: 20px; float: none; text-align: center; }
  #menubar li { margin: 0px 10px; }
  #menubar li a { display: block; text-decoration: none; display: inline; line-height: 40px; }
  #menubar li ul { margin: 40px 0px 0px -130px; padding: 10px 50px; }
  whatwedo { border: 0px; }
  projects { border-top: 1px solid #e8e7e8; padding-top: 40px; }
  footer { padding-top: 0px; }
  footer h4 { margin-top: 50px; }
  about li { margin-bottom: 30px; }
  .slideshow-wrapper { min-height: 200px; }
  foot img { width: 9%; }
}
@media only screen and (max-width: 499px) 
{ logo { text-align: center; display: block; margin-top: -30px; }
  #menubar li a#active { border: 0px; padding: 5px 10px; border-radius: 3px; background-color: #1abc9b; color: #ffffff; }
  #menubar { margin-top: -35px; margin-bottom: 20px; float: none; text-align: center; }
  #menubar li { margin: 0px 7px; }
  #menubar li a { display: block; text-decoration: none; display: inline; line-height: 40px; }
  #menubar li ul { margin: 40px 0px 0px -115px; padding: 10px 30px; }
  whatwedo { border: 0px; margin: 0px; }
  box { text-align: center; }
  box img { display: inline; width: 40px; margin-right: 50px; margin-bottom: 9px; }
  box h1 { display: inline; }
  projects { border-top: 1px solid #e8e7e8; padding-top: 20px; padding-bottom: 20px; }
  clients { margin-top: 20px; }
  footer { padding-top: 0px; margin-top: 30px; text-align: center; }
  footer h4 { margin-top: 30px; }
  foot { text-align: center; margin-top: 10px; }
  foot img { width: 13%; }
  about li { margin-bottom: 30px; }
  #slider .orbit-caption , .orbit-prev , .orbit-next { display: none; }
  .slideshow-wrapper { min-height: 100px; }
  social1 { margin-top: 15px; }
  works small { margin-bottom: 40px; }
  usernext { margin-top: 0px; padding-top: 40px; }
  lin { height: 1px; margin: 0px -30px; }
  elements .clearing-thumbs img { width: 150px; }
}
/* Animation */
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s}
.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s}
@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0)}}
@-moz-keyframes fadeInUp{0%{opacity:0;-moz-transform:translateY(20px)}100%{opacity:1;-moz-transform:translateY(0)}}
@-o-keyframes fadeInUp{0%{opacity:0;-o-transform:translateY(20px)}100%{opacity:1;-o-transform:translateY(0)}}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
.fadeInUp{-webkit-animation-name:fadeInUp;-moz-animation-name:fadeInUp;-o-animation-name:fadeInUp;animation-name:fadeInUp}
@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0)}}
@-moz-keyframes fadeInLeft{0%{opacity:0;-moz-transform:translateX(-20px)}100%{opacity:1;-moz-transform:translateX(0)}}
@-o-keyframes fadeInLeft{0%{opacity:0;-o-transform:translateX(-20px)}100%{opacity:1;-o-transform:translateX(0)}}
@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)}}
.fadeInLeft{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft}
@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0)}}
@-moz-keyframes fadeInRight{0%{opacity:0;-moz-transform:translateX(20px)}100%{opacity:1;-moz-transform:translateX(0)}}
@-o-keyframes fadeInRight{0%{opacity:0;-o-transform:translateX(20px)}100%{opacity:1;-o-transform:translateX(0)}}
@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}
.fadeInRight{-webkit-animation-name:fadeInRight;-moz-animation-name:fadeInRight;-o-animation-name:fadeInRight;animation-name:fadeInRight}