/*

  Site Template Name: CRAFTY

  Theme URL: http://www.code-cafe.com/envato/crafty

  Author: Code Café 

  Author URI: http://themeforest.net/user/thecodecafe

  Description: CRAFTY - Creative Digital Agency Template.

  Version: 1.0.0

*/



/*



=======================================================================

[Table of contents]

=========================================================================



01. COMMON STYLES 

02. HEADER 

03. NAV 

04. SLIDER

05. FEATURED PROJECT

06. ABOUT 

07. OUR HISTORY

08. TESTIMONIAL

09. PORTFOLIO 

10. SERVICES

11. PROCESS 

12. FUN FACTS  

13. TEAM

14. TWITTER FEED 

15. PRICING TABLE 

16. OUR CLIETNS 

17. BLOG 

18. SUBSCRIBE

19. CONTACT

20. FOOTER 





/*



/*---------------------------------------

EXTERNAL FONTS START           

-----------------------------------------*/

@font-face {

  font-family: holimount;

  src: url(../fontsgautham/Holimount.otf);

  font-weight: bold;

}

/*---------------------------------------

EXTERNAL FONTS ENDS             

-----------------------------------------*/



/*---------------------------------------

COMMON STYLES             

-----------------------------------------*/



@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic);

body {

  font-family: "Roboto", sans-serif;

  overflow-x: hidden !important;

  max-width: 100% !important;

}



.container {

  overflow-y: hidden;

}



p {

  color: #7a7a7a;

  font-size: 15px;

  line-height: 25px;

  font-weight: 300;

  margin-bottom: 18px;

}



.no-pading {

  padding-left: 0px;

  padding-right: 0px;

}



.no-pading .row {

  margin-right: 0px;

}



.no-pading .col-md-4 {

  padding-left: 0px;

}



.type_one {

  background: #fff;

}



.type_two {

  background: #f4f4f4;

}



.section_header {

  text-align: center;

  padding: 80px 0px;

}



.section_header h2 {

  color: #333;

  font-size: 25px;

  font-weight: 900;

  margin-top: 0px;

  letter-spacing: 3px;

  position: relative;

  text-transform: uppercase;

}



.section_header h2:after {

  position: absolute;

  width: 50px;

  content: "";

  display: block;

  bottom: -30px;

  left: 50%;

  margin-left: -25px;

  height: 3px;

  background: #b4da6b;

}



.section_header.left h2:after {

  left: 0%;

  margin-left: 0px;

}



.section_header p {

  font-size: 16px;

  color: #7a7a7a;

  font-weight: 300;

  padding-top: 45px;

  line-height: 28px;

}



.crafty_btn {

  color: #ededed;

  font-size: 16px;

  text-transform: uppercase;

  font-weight: 500;

}



a.crafty_btn {

  font-weight: 700;

  color: #333;

  position: relative;

  padding: 4.5px;

  padding-left: 10px;

  border: 0px;

  border-radius: 0px;

  padding-right: 15px;

  text-decoration: none;

  margin-left: 40px;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



a.crafty_btn:before {

  position: absolute;

  display: block;

  content: "+";

  width: 30px;

  left: -40px;

  top: 0px;

  height: 30px;

  line-height: 25px;

  border: 1px solid #333;

  text-align: center;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



a.crafty_btn:hover {

  background: #242424;

  color: #fff;

}



a.crafty_btn:hover:before {

  background: #b4da6b;

  border: 1px solid #b4da6b;

}



.section_pattern {

  position: absolute;

  width: 100%;

  height: 100%;

  background-image: url(../images/pattern.html);

  background-repeat: repeat-x;

}

.parallax {

  background-attachment: fixed !important;

  background-position: center bottom;

  background-repeat: no-repeat;

  background-size: cover;

}



/*---------------------------------------

    HEADER         

-----------------------------------------*/



header {
  background: url("../images/banner2.jpg") no-repeat center center;
  background-size: cover;
}

/* For mobile devices */
@media (max-width: 768px) {
  header {
    background: url("../images/MobileBanner.jpg") no-repeat center center;
    background-size: cover;
  }
}




.header_overlay {

  background-image: linear-gradient(

    to top,

    rgba(255, 0, 0, 0),

    rgba(0, 0, 0, 0.9)

  );

}

/*---------------------------------------

    NAV         

-----------------------------------------*/

/*---------------------------------------

    NAV close open animation start     

-----------------------------------------*/

.navbar-toggle .icon-bar {

	width: 22px;

	-webkit-transition: all 0.2s;

	transition: all 0.2s;

}



/* ANIMATED X */

.navbar-toggle.x .icon-bar:nth-of-type(1) {

	-webkit-transform: rotate(45deg);

	-ms-transform: rotate(45deg);

	transform: rotate(45deg);

	-webkit-transform-origin: 10% 10%;

	-ms-transform-origin: 10% 10%;

	transform-origin: 10% 10%;

}



.navbar-toggle.x .icon-bar:nth-of-type(2) {

	opacity: 0;

	filter: alpha(opacity=0);

}



.navbar-toggle.x .icon-bar:nth-of-type(3) {

	-webkit-transform: rotate(-45deg);

	-ms-transform: rotate(-45deg);

	transform: rotate(-45deg);

	-webkit-transform-origin: 10% 90%;

	-ms-transform-origin: 10% 90%;

	transform-origin: 10% 90%;

}



/* ANIMATED X COLLAPSED */

.navbar-toggle.x.collapsed .icon-bar:nth-of-type(1) {

	-webkit-transform: rotate(0);

	-ms-transform: rotate(0);

	transform: rotate(0);

}



.navbar-toggle.x.collapsed .icon-bar:nth-of-type(2) {

	opacity: 1;

	filter: alpha(opacity=100);

}



.navbar-toggle.x.collapsed .icon-bar:nth-of-type(3) {

	-webkit-transform: rotate(0);

	-ms-transform: rotate(0);

	transform: rotate(0);

}

/*---------------------------------------

    NAV close open animation end

-----------------------------------------*/

#first-cont-nav {

  display: flex;

  justify-content: end;

  align-items: center;

}



.navbar-brand,

.navbar-default .navbar-nav > li > a {

  color: white;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

  font-weight: 500;

  letter-spacing: 2px;

  font-size: 12px;

}



.navbar-default .navbar-nav > .active > a,

.navbar-default .navbar-nav > .active > a:hover,

.navbar-default .navbar-nav > .active > a:focus,

.navbar-default .navbar-nav > li > a:hover,

.navbar-default .navbar-nav > li > a:focus {

  color: #c0ebbf;

  background-color: transparent;

  font-weight: 500;

  letter-spacing: 2px;

  outline: none;

  font-size: 14px;

}



.navbar-default .navbar-nav > li > a:focus {

  color: #f0f0f0;

  font-size: 14px;

}



.navbar-default .navbar-nav > li > a:focus {

  background-color: transparent;

}



.navbar-brand > img {

  max-height: 50px;

}



#navbar-close {

  color: grey;

  margin-top: -9px;

  font-size: 23px !important;

}



@media (min-width: 768px) {

  .navbar-default {

    background: rgba(50, 50, 50, 0);

    border: 0px;

    border-radius: 0px;

    margin-bottom: 0px;

  }



  .navbar-nav > li > a {

    padding-top: 60px;

    height: inherit;

  }

  .navbar-brand {

    padding-top: 30px;

    height: inherit;

  }

}



@media (max-width: 768px) {

  .nav > li > a {

    letter-spacing: 1px !important;

  }

}



@media (min-width: 768px) and (max-width: 991px) {

  .nav > li > a {

    padding-left: 4px;

    padding-right: 4px;

    letter-spacing: 1px;

  }

}

.navbar-default .navbar-collapse,

.navbar-default .navbar-form {

  border-color: #e7e7e7;

  max-height: 100%;

  overflow:  hidden !important;

}

.navbar-default .navbar-toggle,

.navbar-default .navbar-toggle:hover,

.navbar-default .navbar-toggle:focus,

.navbar-default .navbar-toggle:active,

.navbar-default .navbar-toggle:visited {

  background-color: transparent;

  border-color: transparent;

  margin-top: 25px !important;

}

source



/*SEARCH_SOCIAL STARTS*/



.search_social1 {

  padding-left: 0px !important;

  padding-right: 0px !important;

}



.social-search-icons {

  display: flex;

  padding-top: 60px;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.social-search-icons .list-inline {

  padding-left: 5px !important;

  padding-right: 5px !important;

  font-size: 13px !important;

}



.social-search-icons .list-inline .fa {

  color: white;

  padding: 4px;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.social-search-icons .list-inline .fa:hover {

  background-color: rgb(237, 241, 236);

  border-radius: 5px;

  color: rgba(0, 0, 0, 0.8);

  font-size: 14px;

}



.social-search-icons .list-inline li {

  margin-bottom: 0px !important;

}



@media (max-width: 736px) {

  footer {

    padding-bottom: 50px;

  }

}

@media (max-width: 540px) {

  footer {

    padding-bottom: 10px;

  }

}

@media (min-width: 991px) {

  .contact_wig h3 {

    font-size: 19px !important;

  }

}



@media (max-width: 767px) {

  .container {

    max-width: 100% !important;

    overflow-x: hidden !important;

  }

  .contact_wig h3 {

    font-size: 17px !important;

  }

}



@media (max-width: 767px) {

  .navbar-header {

    height: 85px !important;

    background-color: black;

    border-bottom: 5px solid rgb(114, 153, 51);

  }

  .navbar-default {

    background-color: transparent !important;

    border-bottom: none !important;

  }

  .container {

    max-width: 100% !important;

    overflow-x: hidden !important;

  }

  .navbar-brand {

    padding-top: 18px !important;

  }

  .slider .container h1 img {

    width: 450px !important;

    height: auto;

  }

  .nav > li > a {

    letter-spacing: 1px !important;

    padding-bottom: 10px !important;

    padding-top: 10px !important;

  }

  .img-log {

    max-height: 50px !important;

    margin-left: 15px;

  }

  .social-search-icons {

    padding-top: 15px !important;

    padding-bottom: 15px !important ;

  }



  #first-cont-nav .navbar-collapse {

    background-color: black !important;

    border-bottom: 3px solid rgb(114, 153, 51);

    border-top: 2px solid rgb(114, 153, 51);

    width: 160px;

    margin-right: -14px;

  }



  #first-cont-nav .navbar-collapse ul {

    margin: auto;

  }

}



@media (max-width: 480px) {

  .container {

    max-width: 100% !important;

    overflow-x: hidden !important;

  }

  .slider .container h1 img {

    width: 350px !important;

    height: auto;

  }

  .bf ul.filter li a {

    margin-right: 0px !important;

    font-size: 12px;

    padding: 0px 5px !important;

  }

}



@media (max-width: 379px) {

  .container {

    max-width: 100% !important;

    overflow-x: hidden !important;

  }

  .slider .container h1 img {

    width: 300px !important;

    height: auto;

  }

}

@media (min-width: 320px) and (max-width: 330px) {

  .container {

    max-width: 100% !important;

    overflow-x: hidden !important;

  }

  .slider .container h1 img {

    width: 260px !important;

    height: auto;

  }

}

@media (min-width: 250px) and (max-width: 319px) {

  .container {

    max-width: 100% !important;

    overflow-x: hidden !important;

  }

  .slider .container h1 img {

    width: 230px !important;

    height: auto;

  }

}



@media (max-width: 297px) {

  .bf ul.filter li a {

    font-size: 12px;

    padding: 0px 2px !important;

  }

}



/*SEARCH_SOCIAL ENDS*/



/*---------------------------------------

    SLIDER        

-----------------------------------------*/



.slider {

}



.carousel-inner {

  display: table;

}



.carousel {

  z-index: 13;

}



.slider .item {

  padding-bottom: 10px;

}



.carousel-inner > .item .container {

  position: relative;

}



.carousel-inner > .item > img,

.carousel-inner > .item > a > img {

  max-height: 643px;

  min-height: 500px;

}



@media (max-width: 600px) {

  .carousel-inner > .item .container h1 {

    font-size: 40px;

  }

}

.carousel-inner > .item .container h1 span {

  color: #b4da6b;

}



.carousel-inner > .item .container p {

  font-size: 20px;

  font-weight: 500;

  color: #000;

  margin: 30px 0;

}



.carousel-control.left,

.carousel-control {

  opacity: 0;

  filter: alpha(opacity=0);

}



.carousel-control:hover,

.carousel-control:focus {

  opacity: 1;

  filter: alpha(opacity=100);

}



.carousel-control img {

  position: absolute;

  margin-top: -23px;

  top: 50%;

}



.carousel-control.left img {

  left: 15px;

}



.carousel-control.right img {

  right: 15px;

}



.we_are .owl-theme .owl-controls {

  margin-top: 12px;

}



a.left.carousel-control {

  background-image: none;

}



a.right.carousel-control {

  background-image: none;

}



a.left.carousel-control:hover {

  cursor: url(../images/sl_right.png), auto;

}



a.right.carousel-control:hover {

  cursor: url(../images/sl_left.png), auto;

}

.down_btn {

  height: 50px;

  width: 100%;

}

.down_btn {

  text-align: center;

}

.floating {

  float: center;

  -webkit-animation-name: Floatingx;

  -webkit-animation-duration: 3s;

  -webkit-animation-iteration-count: infinite;

  -webkit-animation-timing-function: ease-in-out;

  -moz-animation-name: Floating;

  -moz-animation-duration: 3s;

  -moz-animation-iteration-count: infinite;

  -moz-animation-timing-function: ease-in-out;

  margin-top: 5px;

}



@-webkit-keyframes Floatingx {

  from {

    -webkit-transform: translate(0, 0px);

  }

  65% {

    -webkit-transform: translate(0, 10px);

  }

  to {

    -webkit-transform: translate(0, -0px);

  }

}



@-moz-keyframes Floating {

  from {

    -moz-transform: translate(0, 0px);

  }

  65% {

    -moz-transform: translate(0, 10px);

  }

  to {

    -moz-transform: translate(0, -0px);

  }

}

/*---------------------------------------

    FEATURED PROJECT         

-----------------------------------------*/



#imgstack {

  width: 100%;

  margin: 0px;

  display: flex;

  flex-wrap: wrap;

}



.imgfit {

  padding: 1px !important;

}

.imgfit:hover {

  padding: 0px !important;

}

.imgfit img {

  border-bottom: 3px solid transparent;

}

.imgfit img:hover {

  cursor: url(../images/plus.png), auto;

  border-color: rgb(43, 255, 0);

  filter: brightness(40%);

  transition: all 1s;

}



/* The Modal (background) */

.modal {

  display: none;

  position: fixed;

  z-index: 30000;

  left: 0;

  top: 0px;

  width: 100%;

  height: 100%;

  overflow: auto;

  background-color: rgba(0, 0, 0, 0.8);

}



/* Modal Content */

.modal-content {

  position: relative;

  top: 130px;

  margin: auto;

  padding: 0;

  width: 100%;

  max-width: 1200px;

}



/* The Close Button */

.close {

  color: white;

  position: absolute;

  top: 10px;

  right: 25px;

  font-size: 60px;

  font-weight: bold;

  opacity: initial;

}



.close:hover,

.close:focus {

  color: rgb(78, 78, 78);

  text-decoration: none;

  cursor: pointer;

  opacity: 1;

}



.mySlides {

  display: none;

}



.cursor {

  cursor: pointer;

}



/* Next & previous buttons */

.prev,

.next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  color: white;

  font-weight: bold;

  font-size: 30px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

  -webkit-user-select: none;

}

.prev {

  left: -9%;

}

.next {

  right: -9% !important;

}



/* Position the "next button" to the right */



@media (min-width: 1400px) and (max-width: 1600px) {

  .prev {

    left: -8% !important;

  }

  .next {

    right: -8% !important;

  }

}



@media (min-width: 1300px) and (max-width: 1400px) {

  .prev {

    left: -5% !important;

  }

  .next {

    right: -5% !important;

  }

}



@media (min-width: 575px) and (max-width: 1300px) {

  .prev {

    left: 0% !important;

  }

  .next {

    right: 0% !important;

  }

  .close {

    font-size: 40px;

  }



}

@media (min-width: 280px) and (max-width: 575px){

  .prev,

.next {

  font-size: 20px;

}

.prev {

  left: -1% !important;

}

.next {

  right: -1% !important;

}

.close {

  font-size: 30px;

}

}



/* On hover, add a black background color with a little bit see-through */

.prev:hover,

.next:hover {

  color: rgba(0, 0, 0, 0.8);

  text-decoration: none;

}



/* Number text (1/3 etc) */

.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}



.active,

.demo:hover {

  opacity: 1;

}



img.hover-shadow {

  transition: 0.3s;

}



.hover-shadow:hover {

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

}



/*---------------------------------------

    FEATURED PROJECT ENDS       

-----------------------------------------*/

/*---------------------------------------

    ABOUT STARTS    

-----------------------------------------*/



.we_are {

  text-align: left;

}



.we_are .section_content {

  padding-bottom: 100px;

}



.we_are .wig .icon .fa {

  color: #b4da6b;

  font-size: 60px;

  margin-left: 50px;

}



.wig_text {

  margin-top: 32px;

  border-left: 1px solid #e4e3e3;

  padding-left: 25px;

  margin-left: 25px;

  position: relative;

}



.wig_text.first {

  border-left: 0px;

}



.we_are .wig h2 {

  color: #333;

  font-size: 20px;

  margin-top: 0px;

  padding-bottom: 12px;

}



.we_are .wig p {

  color: #7a7a7a;

  line-height: 24px;

  font-size: 15px;

  font-weight: 300;

}



.wig_text:before {

  position: absolute;

  content: "";

  bottom: -30px;

  left: 25px;

  height: 1px;

  width: 40px;

  background: #b4da6b;

  opacity: 0;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.wig:hover div.wig_text:before {

  opacity: 1;

}



@media (max-width: 991px) {

  .wig {

    padding-bottom: 90px;

  }

  .wig_text {

    border-left: 0px solid #000;

  }

}

/*---------------------------------------

OUR HISTORY         

-----------------------------------------*/



.history {

  text-align: left;

}



.history .section_header {

  padding-bottom: 45px;

}



.his_img {

  padding-top: 70px;

  text-align: center;

}



.history .crafty_btn {

  display: inline-block;

  margin-top: 45px;

  margin-bottom: 100px;

}



.history p span {

  color: #b4da6b;

}



.history p b {

  color: #7a7a7a;

}

/*---------------------------------------

TESTIMONIAL         

-----------------------------------------*/



.testmonial_cont {

  background-color: rgba(50, 95, 124, 0.22);

  background-image: url(../images/backgroundchanges/bg03.jpg);

  /*background-size*/



  background-size: cover;

  background-position: center center;

}



.testmonial_cont_overlay {

  background-color: rgba(0, 0, 0, 0.3);

}



.testmonial {

  position: relative;

  z-index: 2;

  padding-top: 100px;

  padding-bottom: 100px;

  text-align: center;

}

.testimonal-img-size {

  height: 150px;

  width: auto;

}



.testmonial .testmonial-caption {

  color: #ffffff;

}



.testmonial .testmonial-caption p {

  font-size: 25px;

  line-height: 36px;

  color: #fff;

}



.testmonial .testmonial-caption .cli_info {

  font-size: 16px;

  line-height: 26px;

}



.testmonial .testmonial-caption .cli_name {

  font-weight: 600;

  font-size: 20px;

}



.testmonial .testmonial-caption .cli_com {

  font-size: 14px;

  font-weight: 300;

}



.testmonial .testmonial-caption .cli_com a,

.testmonial .testmonial-caption .cli_com a:hover {

  font-size: 14px;

  font-weight: 600;

  color: #b4da6b;

  text-decoration: none;

}



.testmonial .carousel-indicators li {

  width: 40px;

  /*border-radius*/



  border-radius: 0px;

  height: 12px;

  margin: 1px;

}



.testmonial .carousel-indicators {

  bottom: -45px;

}

@media (max-width: 480px) {

  .testimonal-img-size {

    height: 100px;

  }

}

@media (max-width: 320px) {

  .testimonal-img-size {

    height: 80px;

  }

}

/*---------------------------------------

TESTIMONIAL ENDS

-----------------------------------------*/



/*---------------------------------------

PORTFOLIO STARTS        

-----------------------------------------*/



.bf ul.filter li a {

  display: block;

  padding: 5px 10px;

  text-decoration: none;

  background: transparent;

  border: 0px;

  color: #7a7a7a;

  font-weight: bold;

  margin-bottom: 4px;

  position: relative;

  text-align: left;

  margin-right: 20px;

  padding-left: 0px;

  text-transform: uppercase;

  font-weight: 300;

}

.bf ul.filter li a:focus {

  outline: none;

}

.bf ul.filter li a:before {

  position: absolute;

  bottom: -15px;

  left: 0px;

  width: 30px;

  background: transparent;

  content: "";

  height: 1px;

}



.bf ul.filter li a.active {

  background: transparent;

  border: 0px;

  color: #333;

  font-weight: 500;

}



.bf ul.filter li a:hover:before,

.bf ul.filter li a.active:before {

  background: rgb(114, 153, 51);

}



.bf ul.items li img {

  background-color: rgba(0, 0, 0, 0.1) !important;

  z-index: 20;

  border-bottom: 5px solid transparent;

  background-position: center center;

  border-bottom: 5px solid transparent;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.bf ul.items li img:hover {

  border-color: #a2f011;

  filter: brightness(50%);

}



.bf ul.items.bflayhover li .caption a {

  display: block;

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

}



.bf ul.items li img:hover {

  cursor: url(../images/plus.png), auto;

}



.bf ul.items.bflayhover li .caption:hover {

  background: rgba(0, 0, 0, 0.35);

}



.bf ul.items li img {

  width: 100%;

}



.bf ul.filter {

  margin-bottom: 50px;

}



@media (max-width: 627px) {

  .bf ul.filter li a:before {

    bottom: 4px;

  }

  .bf ul.filter li a {

    line-height: 35px;

  }

}



@media (min-width: 1368px) {

  .bf.full-width ul.items li {

    width: 25%;

  }

}

@media (max-width: 768px) {

  .pp_pic_holder.pp_default {

    width: 100% !important;

    margin-top: -100px !important;

    left: 0 !important;

    overflow: hidden;

    padding-left: 15px;

    padding-right: 15px;

  }

  div.pp_default .pp_content_container .pp_left {

    padding-left: 0 !important;

  }

  div.pp_default .pp_content_container .pp_right {

    padding-right: 0 !important;

  }

  .pp_content {

    width: 100% !important;

    height: auto !important;

  }

  .pp_fade {

    width: 100% !important;

    height: 100% !important;

  }

  a.pp_expand,

  a.pp_contract,

  .pp_hoverContainer,

  .pp_gallery,

  .pp_top,

  .pp_bottom {

    display: none !important;

  }

  #pp_full_res img {

    width: 100% !important;

    height: auto !important;

  }

  .pp_details {

    width: 100% !important;

    padding-left: 3%;

    padding-right: 4%;

    padding-top: 10px;

    padding-bottom: 10px;

    background-color: #fff;

    margin-top: -2px !important;

    height: 48px;

  }

  a.pp_close {

    right: 10px !important;

    top: 10px !important;

  }

}

/*---------------------------------------

PORTFOLIO ENDS        

-----------------------------------------*/

/*---------------------------------------

SERVICES         

-----------------------------------------*/



.services {

}



.services #myTab li img {

  width: 50px;

  height: auto;

  padding-bottom: 30px;

}

.services #myTab li {

  padding-bottom: 50px;

}

.services ul li a {

  color: black;

}



.services .nav-services > li.active > a,

.nav-services > li.active > a:hover,

.nav-services > li.active > a:focus {

  background-color: #f4f4f4;

  border: 0px;

  position: relative;

}



.nav-services li.active:before {

  content: "";

  position: absolute;

  left: 15%;

  bottom: 20px;

  background-color: #f4f4f4;

  width: 20px;

  height: 20px;

  transform: rotate(45deg);

  z-index: 2;

}



.services ul li.active a {

  color: rgb(114, 153, 51);

}



.services > .nav-tabs.nav-justified > .active > a,

.nav-tabs.nav-justified > .active > a:hover,

.nav-tabs.nav-justified > .active > a:focus {

  border: 0px;

  color: #333;

}



@media (max-width: 768px) {

  .nav-services li.active:before {

    background-color: transparent;

  }

}



.services .tab-pane {

  padding: 50px 0px;

}



.service-tab-desc h2 {

  color: #333;

  font-size: 25px;

  font-weight: 700;

}



.service-tab-desc p {

  font-size: 16px;

  margin-bottom: 15px;

  margin-top: 25px;

}



.service-tab-desc b {

  font-weight: 300;

  color: #c5c5c5;

}



.service-tab-desc p span {

  color: #b4da6b;

}



.services .skill {

  margin-bottom: 5px;

  color: #979797;

  font-size: 16px;

  font-weight: 300;

}



.services .progress {

  height: 5px;

  border-radius: 0px;

  margin-bottom: 30px;

  background-color: #e4e3e3;

}



.progress-bar-success {

  background-color: #b4da6b;

}

.progress-bar {

  -webkit-transition: all 1.5s;

  -moz-transition: all 1.5s;

  -ms-transition: all 1.5s;

  -o-transition: all 1.5s;

  transition: all 1.5s;

}

.extra-margin {

  margin-top: 50px;

}



/*---------------------------------------

    PROCESS         

-----------------------------------------*/



.the_process {

  background-color: #f4f4f4;

  text-align: center;

  padding-bottom: 10px;

}



.process_title {

  font-size: 55px;

  font-weight: 900;

  color: #b4da6b;

  text-transform: uppercase;

  position: relative;

}



.process_title span {

  display: inline-block;

  background: #131217;

  position: relative;

  z-index: 4;

  padding: 0 25px;

}



.process_title span:after,

.process_title span:before {

  content: "";

  position: absolute;

  width: 10px;

  height: 10px;

  top: 50%;

  margin-top: -5px;

  background: red;

  border-radius: 50%;

}



.process_title span:after {

  left: 0;

}



.process_title span:before {

  right: 0;

}



.process_title:before {

  content: "";

  position: absolute;

  top: 50%;

  left: 0;

  width: 100%;

  height: 0px;

  border-bottom: 1px dotted red;

}



.the_process .nav-tabs > li > a {

  color: #b4da6b;

  text-transform: uppercase;

  font-weight: bold;

}



.the_process .nav-tabs > li > a span {

  display: inline-block;

  background: #f4f4f4;

  padding: 0 16px;

  opacity: 0;

  font-size: 0px;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.the_process .nav-tabs > li > a,

.the_process .nav-tabs > li > a:hover,

.the_process .nav-tabs > li > a:focus {

  background: transparent;

  outline: none;

}



.the_process .nav-tabs > li.active > a,

.the_process .nav-tabs > li.active > a:hover,

.the_process .nav-tabs > li.active > a:focus {

  font-size: 55px;

  color: #b4da6b;

  background: transparent;

  border: 0px solid #fff;

  outline: none;

}



.the_process .nav-tabs > li.active > a span,

.the_process .nav-tabs > li.active > a:hover span,

.the_process .nav-tabs > li.active > a:focus span {

  font-size: 36px;

  opacity: 1;

}



.the_process .nav-tabs .fa {

  display: block;

  position: absolute;

  left: 50%;

  margin-left: -10px;

  bottom: 25px;

  color: #787878;

  font-size: 35px;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.the_process .nav-tabs .fa:hover {

  color: #b4da6b;

}



.the_process .nav-tabs > li.active > a .fa {

  bottom: 100px;

  font-size: 70px;

  color: #787878;

}



.the_process .nav-tabs > li .fa:before {

  background: #f4f4f4;

  padding: 10px;

}



.the_process .tab-pane {

  padding-top: 0px;

}



.the_process .nav-tabs > li {

  position: relative;

}



.the_process .nav-tabs > li:before {

  position: absolute;

  content: "";

  height: 0px;

  border-top: 1px dotted #959494;

  width: 100%;

  bottom: 80px;

  left: 0;

}



.single_process a .fa {

  color: #787878;

  font-size: 42px;

}



.tab-content p {

  color: #7a7a7a;

  font-size: 16px;

  font-weight: 300;

}



.tab-content b {

  color: #7a7a7a;

}



.tab-content p span {

  color: #b4da6b;

}



.single_process.two .process_text {

  margin-left: 15%;

}



.single_process.three .process_text {

  margin-left: 30%;

}



.single_process.four .process_text {

  margin-left: 45%;

}



@media (max-width: 991px) and (min-width: 768px) {

  .process_text {

    width: 82%;

  }

  .single_process.two .process_text {

    margin-left: 6%;

  }

  .single_process.three .process_text {

    margin-left: 12%;

  }

  .single_process.four .process_text {

    margin-left: 18%;

  }

}



@media (max-width: 768px) {

  .process_text {

    margin-left: 0px;

    width: 100%;

  }

  .single_process.two .process_text,

  .single_process.three .process_text,

  .single_process.four .process_text {

    margin-left: 0px;

  }

  .the_process .nav-tabs .fa {

    bottom: 38px;

  }

}

/*---------------------------------------

FUN FACTS         

-----------------------------------------*/



.fact_number_cont {

  background-image: url(../images/backgroundchanges/bg01.jpg);

  background-size: cover;

  background-position: center center;

}



.fact_number {

  text-align: left;

  background-image: linear-gradient(rgb(0, 0, 0, 0.6), rgb(0, 0, 0, 0.6));

  padding: 90px 0;

}



.fact_number .faci {

  font-weight: 900;

  font-size: 17px;

  text-transform: uppercase;

  color: #fff;

  position: relative;

  margin: 10px;

}



/*---------------------------------------

    whitelog beside start       

    -----------------------------------------*/

.white-logo-align1 {

  position: absolute;

  right: 310px;

  width: 25px;

}



.white-logo-align2 {

  position: absolute;

  right: 260px;

  width: 25px;

}



.white-logo-align3 {

  position: absolute;

  right: 215px;

  width: 25px;

}



@media only screen and (max-width: 1200px) {

  .white-logo-align1 {

    right: 250px;

    width: 22px;

  }

  .white-logo-align2 {

    width: 22px;

    right: 210px;

  }

  .white-logo-align3 {

    width: 22px;

    right: 170px;

  }

}



@media only screen and (max-width: 991px) {

  .whilelogo-screenadjust {

    width: 50% !important;

  }

  .white-logo-align1 {

    right: 330px;

  }

  .white-logo-align2 {

    right: 330px;

  }

  .white-logo-align3 {

    right: 330px;

  }

  #workspaces-position-align {

    bottom: 130px;

  }

}



@media only screen and (max-width: 768px) {

  .whilelogo-screenadjust {

    width: 100% !important;

    margin-left: 100px;

  }

  .white-logo-align1 {

    left: -30px;

  }

  .white-logo-align2 {

    left: -30px;

  }

  .white-logo-align3 {

    left: -30px;

  }

  #workspaces-position-align {

    bottom: 0px;

  }

}



@media only screen and (max-width: 430px) {

  .whilelogo-screenadjust {

    margin-left: 40px;

  }

}

@media only screen and (max-width: 360px) {

  .whilelogo-screenadjust {

    margin-left: 15px;

  }

}



/*---------------------------------------

    whitelog beside end       

    -----------------------------------------*/



.fact_number ul {

  padding-left: 20px !important;

}



.fact_number ul li {

  font-weight: lighter !important;

  color: #fff;

  font-size: 14px;

}

/*---------------------------------------

LAYOUT START        

-----------------------------------------*/



.team {

  background-color: #f5faf4;

}



#my_nanogallery2 :hover {

  cursor: url(../images/plusblack.png), auto;

}



.team .thumbnail {

  display: block;

  padding: 6px;

  margin-bottom: 71px;

  line-height: 1.42857143;

  background-color: transparent;

  border: 1px solid #e4e3e3;

  border-radius: 0px;

  -webkit-transition: all 0.2s ease-in-out;

  -o-transition: all 0.2s ease-in-out;

  transition: all 0.2s ease-in-out;

}



.team .thumbnail .caption {

  color: #ababab;

  position: relative;

  background: transparent;

}



.team .thumbnail .caption h3 {

  margin-top: 10px;

  font-size: 20px;

  text-transform: uppercase;

  color: #333;

  font-weight: 700;

  margin-bottom: 0px;

  height: 50px;

}



.team .thumbnail .caption p {

  margin-bottom: 10px;

  margin-top: 0px;

  font-size: 15px;

  color: #7a7a7a;

  font-weight: 300;

  font-style: italic;

}



.team_social h4 {

  color: #080808;

  font-size: 15px;

  text-transform: uppercase;

  font-weight: 300;

}



.thumbnail:hover {

  background-color: #fafafa;

  box-shadow: 0px 0px 40px 3px rgb(114, 153, 51);

}



.team .thumbnail .caption .team_social {

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0px;

  background: #f4f4f4;

  left: 0;

  z-index: 26;

  font-size: 15px;

  padding-top: 15px;

  opacity: 0;

  filter: alpha(opacity=0);

  color: #636363;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.team_member_image img {

  width: 100%;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.team_member_image {

  background: rgba(0, 0, 0, 0.5);

  position: relative;

}



.team .thumbnail:hover div.team_member_image {

  background-color: rgba(0, 0, 0, 0.5);

}



.team .thumbnail .caption .team_social .fa {

  color: #7a7a7a;

  font-size: 18px;

  -webkit-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}



.team .thumbnail .caption .team_social .fa:hover {

  color: #b4da6b;

}



.team .thumbnail {

  position: relative;

}



.team .thumbnail .team_overlay {

  position: absolute;

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  z-index: 25;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.team .thumbnail:hover .team_overlay {

  cursor: url(../images/plus.png), auto;

  background-color: rgba(0, 0, 0, 0.3);

}



.team .thumbnail:hover .caption .team_social {

  opacity: 1;

  filter: alpha(opacity=100);

}

/*---------------------------------------

TWITTER FEED         

-----------------------------------------*/



.twtter_feed_cont {

  background-color: #20465e;

  background-image: url(../images/bg/tw.jpg);

  /*background-size*/



  background-size: cover;

  background-position: center center;

}



.twtter_feed {

  font-size: 25px;

  color: #ffffff;

  padding: 45px 0;

  position: relative;

  z-index: 2;

  font-weight: 100;

}



.twtter_feed_overlay {

  background: rgba(0, 0, 0, 0.3);

}



.twtter_feed .container-fluid {

  position: relative;

  z-index: 2;

}



.twtter_feed .acc_info {

  font-size: 18px;

}



.twtter_feed .acc_name {

  font-size: 25px;

  font-weight: bold;

}



.twiter_feed_section {

  background: rgba(40, 40, 40, 0);

  position: relative;

  padding-top: 60px;

  padding-bottom: 80px;

  z-index: 5;

}



.twiter_feed_section .container {

  overflow: hidden;

}



.twiter_header {

  padding-bottom: 40px;

}



.tw_slider .reviewer_info {

  padding-bottom: 40px;

}



.tw_slider .item {

  width: 100%;

}



.tw_slider .item blockquote {

  border-left: 0px;

  font-size: 24px;

  font-style: italic;

  font-weight: 100;

  line-height: 35px;

  position: relative;

  color: #fff;

}



.tw_slider .item blockquote:after,

.tw_slider .item blockquote:before {

  position: absolute;

  font-size: 24px;

  color: #19c5b7;

  font-family: FontAwesome;

}



.tw_slider .item blockquote span.user {

  font-weight: 400;

}



.tw_slider .item blockquote a {

  text-decoration: none;

  color: #fff;

}



.tw_slider .item blockquote span.time {

  font-size: 14px;

}



.owl-stage-outer {

  overflow: hidden;

}



.tw_slider .owl-pagination .owl-page,

.qutoSilder .owl-pagination .owl-page {

  display: inline-block;

}



.tw_slider .owl-pagination .owl-page span,

.qutoSilder .owl-pagination .owl-page span {

  background: transparent !important;

  color: #aaaaaa;

  font-size: 18px;

  font-weight: 600;

  height: inherit !important;

  border-bottom: 2px solid transparent;

  border-radius: 0px !important;

  width: inherit !important;

  padding-left: 15px;

  margin: 5px;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.tw_slider .owl-pagination .owl-page.active span,

.tw_slider .owl-pagination .owl-page:hover span,

.qutoSilder .owl-pagination .owl-page.active span,

.qutoSilder .owl-pagination .owl-page:hover span {

  background: transparent;

  border-color: #b4da6b;

  color: #b4da6b;

  padding-left: 15px;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.owl-theme .owl-controls .owl-page span.owl-numbers {

  padding: 0px;

  padding-left: 15px;

  font-size: 16px;

}



.twtter_feed .owl-controls {

  display: block;

  width: 100%;

  height: 31px;

  text-align: center;

}



.twtter_feed .owl-controls .owl-pagination {

  display: block;

  display: inline-block;

  margin: 0 auto;

}



.twtter_feed .owl-controls .owl-pagination .owl-page {

  display: inline-block;

  width: 40px;

  height: 12px;

  background: transparent;

  margin: 2px;

  border: 1px solid #fff;

}



.twtter_feed .owl-controls .owl-pagination .owl-page.active {

  background: #fff;

}



.tw_ic .fa {

  color: #fff;

}



.qot {

  color: #b4da6b;

  font-size: 30px;

  font-family: arial;

  font-weight: bold;

  display: inline-block;

  padding: 5px;

}

/*---------------------------------------

PRICING TABLE         

-----------------------------------------*/

.price_area {

  text-align: center;

}

.price {

  border-top: 1px solid #e4e3e3;

}



.price .price_single {

  overflow: hidden;

  position: relative;

  padding: 120px 50px;

  min-height: 380px;

  border-left: 1px solid #e4e3e3;

}



.price .price_single:first-child {

  border-left: 0px solid #2a2a2a;

}



.price .price_single:hover {

  background-color: #f4f4f4;

}



.price .price_single.border {

  border-right: 1px solid #e6e6e6;

}



.price div.desc {

  opacity: 0;

  filter: alpha(opacity=0);

  display: block;

  position: absolute;

  top: 40%;

  left: 0;

  width: 100%;

  padding: 0 50px;

  color: #c4c4c4;

  -webkit-transform: perspective(500px) rotateX(-90deg) rotateY(0deg)

    rotateZ(0deg);

  transform: perspective(500px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);

  transition: all 0.27s cubic-bezier(0, 0, 0.58, 1);

}



.price .main {

  transition: all 300ms cubic-bezier(0.07, 0.58, 0.39, 1);

}



.price .price_single:hover .service-intro {

  opacity: 0;

  filter: alpha(opacity=0);

  -webkit-transform: scale(0);

  transform: scale(0);

}



.price .price_single:hover .desc {

  opacity: 1;

  filter: alpha(opacity=100);

  -webkit-transform: perspective(500px) rotateX(0deg) rotateY(0deg)

    rotateZ(0deg);

  transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);

}



@media (max-width: 768px) {

  .price .price_single .desc {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform: perspective(500px) rotateX(0deg) rotateY(0deg)

      rotateZ(0deg);

    transform: perspective(500px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);

  }

  .price .price_single .main {

    margin-top: -100px;

  }

}

.price .price_single:hover .main {

  margin-top: -100px;

}



.price-btn {

  position: absolute;

  bottom: -33px;

  left: 50%;

  width: 150px;

  margin-left: -75px;

}



.price-btn a {

  padding: 18px 45px;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.price-btn a:hover {

  margin-left: 35px;

}



.main h3 {

  color: #b4da6b;

  font-size: 40px;

  font-weight: 900;

  letter-spacing: 1px;

  text-transform: uppercase;

}



.main h5 {

  color: #333;

  font-size: 20px;

  font-weight: 500;

  letter-spacing: 1px;

  text-transform: uppercase;

}



.desc ul li {

  font-size: 16px;

  color: #7a7a7a;

  font-weight: 300;

}

/*---------------------------------------

OUR CLIETNS         

-----------------------------------------*/



.clients {

  background-color: #20465e;

  background-image: url(../images/backgroundchanges/bg03.jpg);

  /*background-size*/



  background-size: cover;

  background-position: center center;

}



.clients_overlay {

  background-color: #f5faf4;

}



.clients_logo {

  position: relative;



  padding: 30px;

  text-align: center;

}



.client-heading {

  color: black;

  font-weight: 100;

}



.clients_logo {

}

/*---------------------------------------

BLOG         

-----------------------------------------*/



.blog {

  padding-bottom: 80px;

}



.single_blog {

  background: #f4f4f4;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.single_blog_image img {

  width: 100%;

}



.blog_caption {

  position: relative;

  padding-left: 30px;

  padding-right: 30px;

  padding-bottom: 60px;

}



.blog_caption h2 a {

  color: #333;

  text-decoration: none;

  font-weight: 500;

  font-size: 20px;

  text-transform: uppercase;

}



.blog_caption h4 {

  font-size: 14px;

  color: #979797;

  font-weight: 300;

  margin-top: 2px;

}



.blog_caption h4 a {

  font-size: 14px;

  color: #7a7a7a;

  font-weight: 300;

  text-decoration: none;

  font-style: italic;

}



.blog_caption p {

  color: #7a7a7a;

  font-size: 16px;

  font-weight: 300;

  margin-top: 25px;

  line-height: 28px;

}



.blog_single_link {

  position: absolute;

  bottom: 30px;

  left: 50%;

  width: 150px;

  margin-left: -75px;

  opacity: 0;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.blog_single_link a {

  padding: 18px 45px;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.blog_single_link a:hover {

  margin-left: 35px;

}



.single_blog:hover div.blog_single_link {

  opacity: 1;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.single_blog:hover {

  box-shadow: 0px 7px 14px rgba(0, 0, 0, 0.2);

  -webkit-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}



.home-blog-btn {

  margin-top: 60px;

}



.blog-btn,

.blog-btn:visited,

blog-btn:focus {

  background: transparent;

  color: #b4da6b;

  font-size: 16px;

  font-weight: 400;

  border: 1px solid #b4da6b;

  border-radius: 3px;

  text-align: center;

  text-transform: uppercase;

  padding: 14px 30px;

  -webkit-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}

.blog-btn:hover {

  background-color: #b4da6b;

  color: #fff;

}



@media (max-width: 991px) {

  .single_blog {

    margin-bottom: 60px;

  }

}

/*---------------------------------------

SUBSCRIBE         

-----------------------------------------*/



.subscribe_area {

  background-image: url(../images/bg/subscribe.jpg);

  background-size: cover;

  background-position: center;

}

.subscribe_area_overlay {

  background-color: rgba(0, 0, 0, 0.3);

}

.subscriber {

  padding-bottom: 30px;

}

.subscriber h2 {

  color: #fff;

  text-transform: uppercase;

  font-size: 30px;

  padding-top: 50px;

  font-weight: 300;

}

.subscriber h4 {

  color: #fff;

  font-weight: 100;

  margin-top: 10px;

  font-size: 17px;

}

.subscribe_area .section_header {

  padding: 60px 0;

}

.subscribe_area .section_header h1 {

  color: #fff;

}



.subscriber form {

  max-width: 480px;

  margin: 0 auto;

  margin-bottom: 40px;

  margin-top: 100px;

}



.subscriber form input,

.subscriber form button {

  display: inline-block;

}

.subscriber .form-control,

.subscriber .form-control:visited,

.subscriber .form-control:active {

  height: 50px;

  color: #fff;

  padding: 6px 12px;

  font-size: 14px;

  line-height: 1.42857143;

  background-color: transparent;

  border: 1px solid #fff;

  background-image: none;

  border-radius: 3px;

  margin-bottom: 15px;

  opacity: 0.8;

  -webkit-transition: all 1s;

  -moz-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}

.subscriber .form-control:focus {

  border: 1px solid #fd4d66;

  border-color: #fd4d66;

  outline: 0px none;

  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.075) inset,

    0px 0px 0px rgba(102, 175, 233, 0.6);

}

.subscriber form input[placeholder] {

  color: red;

}

.subscriber form input[text] {

  color: red;

}

.subscriber form input {

  width: 65%;

  margin-right: 3%;

}



.subscriber form button,

.subscriber form button:focus,

.subscriber form button:hover,

.subscriber form button:active,

.subscriber form button:visited {

  display: inline-block;

  width: 28%;

  background-color: #b4da6b;

  color: #fff;

  padding: 13px 0px;

  margin-top: -2px;

}



.subscriber form button:hover {

  color: #fff;

}



.subscriber p {

  color: #7a7a7a;

  font-size: 15px;

}



.subscriber p a {

  text-decoration: none;

  color: #b4da6b;

  font-weight: 500;

}



.InputEmail1_lab {

  display: block;

}



.InputEmail1_lab.error {

  color: #fff;

  font-size: 15px;

  font-weight: 400;

}



.InputEmail1_lab.valid {

  color: #fff;

  font-size: 15px;

  font-weight: 400;

}



/*---------------------------------------

CONTACT         

-----------------------------------------*/



.contact {

}



.contact form {

  padding-top: 30px;

  padding-bottom: 30px;

  margin-bottom: 10px;

}



.contact form .form-control {

  display: block;

  width: 100%;

  height: 50px;

  padding: 6px 12px;

  font-size: 14px;

  line-height: 1.42857143;

  color: #7a7a7a;

  background-color: transparent;

  border: 1px solid #7a7a7a;

  background-image: none;

  border-radius: 3px;

  margin-bottom: 15px;

  opacity: 0.8;

  -webkit-transition: all 1s;

  -moz-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}

.contact form .form-control:focus {

  border: 1px solid #fd4d66;

  border-color: #fd4d66;

  outline: 0px none;

  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.075) inset,

    0px 0px 0px rgba(102, 175, 233, 0.6);

}

.contact form input.btn,

.contact form input.btn:active,

.contact form input.btn:focus,

.contact form input.btn:visited {

  width: 100%;

  min-height: 48px;

  border-radius: 0px;

  background-color: transparent;

  color: #333;

  border-color: #b4da6b;

  font-size: 16px;

  text-transform: uppercase;

  font-weight: 500;

  letter-spacing: 2px;

  border-radius: 3px;

  border: 1px solid #b4da6b;

  -webkit-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}

.contact form button.btn:hover {

  background-color: #b4da6b;

  color: #fff;

}

#Message {

  height: 140px;

}



.contact .contact_wig .fa {

  color: rgb(114, 153, 51);

  font-size: 30px;

  padding-right: 5px;

}



.contact_wig h3 {

  font-size: 25px;

  font-weight: 900;

  position: relative;

  padding-bottom: 15px;

  color: #333;

}



.contact_wig h3:after {

  content: "";

  display: block;

  left: 37px;

  bottom: 0px;

  height: 1px;

  background: #b4da6b;

  position: absolute;

  width: 35px;

}



.contact_wig p {

  padding-left: 35px;

  color: #949494;

}



/*---------------------------------------

map      

-----------------------------------------*/



#mapimagp {

  padding: 0px;

}



#location-QR-code {

  width: 150px;

  height: auto;

}

/*---------------------------------------

map end      

-----------------------------------------*/



/*---------------------------------------

FOOTER         

-----------------------------------------*/



footer {

  background-color: #fff;

}



.copy {

  background: black;

  padding-top: 30px;

}



.copy p {

  color: #8e8e8e;

}



.copy a {

  opacity: 0.8;

  color: yellow;

  text-decoration: none;

}



/*SINGLE BLOG PAGE STYLE*/



.post_content {

}



.post_image {

}



.post_image img {

  width: 100%;

}



.post_info {

  background: #f4f4f4;

  padding-top: 40px;

  padding-left: 30px;

  padding-right: 30px;

  padding-bottom: 30px;

}



.post_info h2 {

  margin-top: 0px;

  font-size: 20px;

  color: #fff;

  text-transform: uppercase;

}



.post_info h2 a {

  color: #333;

  text-decoration: none;

}



.post_info h4 {

  font-size: 14px;

  color: #7a7a7a;

  font-weight: 400;

  font-style: italic;

}



.post_info h4 a {

  color: #7a7a7a;

  text-decoration: none;

}



.post-body {

  margin-top: 90px;

}



.post-body p {

  color: #7a7a7a;

  font-size: 16px;

  font-weight: 300;

  line-height: 27px;

  margin-bottom: 40px;

}



.post-body blockquote {

  padding: 0px 20px;

  margin: 0 0 20px;

  font-size: 17.5px;

  border-left: 2px solid #b4da6b;

  margin-bottom: 40px;

}



.post-body p span {

  color: #b4da6b;

}



.post-body p b {

}



.post-body p span.large {

  font-size: 30px;

  color: #b4da6b;

  font-weight: 600;

}



.extra_post_info {

  border-bottom: 1px solid #e4e3e3;

  padding-bottom: 40px;

}



.comments {

}



.comments ul {

  margin: 0;

  list-style: none;

}



.comments ul li {

  position: relative;

  padding-right: 45px;

}



.comments ul li a {

  padding-left: 25px;

  color: #7a7a7a;

  font-size: 18px;

  text-decoration: none;

}



.comments ul li i {

  position: absolute;

  color: #b4da6b;

  font-size: 25px;

  padding-right: 10px;

  top: 0;

  left: 0;

}



.share {

}



.share ul {

  text-align: right;

}



.share ul li {

}



.share ul li:first-child {

  color: #7a7a7a;

  font-size: 18px;

  font-weight: 300;

  padding-right: 30px;

}



.share ul li a {

  display: inline-block;

  border: 1px solid #7a7a7a;

  width: 30px;

  height: 30px;

  line-height: 30px;

  text-align: center;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

  border-radius: 5px;

}



.share ul li a i {

  font-size: 18px;

  line-height: 30px;

  color: #7a7a7a;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.share ul li a:hover {

  background: #b4da6b;

  border-color: #b4da6b;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.share ul li a:hover i {

  color: #fff;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



@media (max-width: 991px) {

  .share ul {

    text-align: left;

    margin-top: 30px;

  }

}



@media (max-width: 380px) {

  .share ul li:first-child {

    padding-right: 10px;

  }

}



@media (max-width: 360px) {

  .share ul li:first-child {

    display: block;

    margin-bottom: 20px;

  }

}



.comment_section {

  margin-top: 60px;

}



.comment_section h3 {

  font-size: 30px;

  color: #333;

  text-transform: uppercase;

  font-weight: 600;

  position: relative;

  padding-bottom: 10px;

  margin-bottom: 80px;

}



.comment_section h3:after {

  position: absolute;

  content: "";

  bottom: 0;

  left: 0;

  width: 70px;

  height: 1px;

  background: #b4da6b;

}



ul.comment_list {

  padding: 0;

  margin: 0;

  list-style: none;

}



ul.comment_list li {

  position: relative;

}

.single-comment {

  margin-bottom: 40px;

}

.comment_image {

  position: absolute;

  left: 0;

  top: 0;

}



.comment_image img {

  border-radius: 50%;

}



.comment_info {

  padding-left: 160px;

  padding-top: 15px;

}



.comment_info h2 {

  font-size: 25px;

  font-weight: 600;

  text-transform: uppercase;

  margin-bottom: 5px;

}



.comment_info h2 a {

  color: #b4da6b;

  text-decoration: none;

}



.comment_info h4 {

  color: #7a7a7a;

  font-size: 15px;

  font-weight: 300;

  font-style: italic;

  margin-top: 0px;

}



.comment_info p {

  margin-top: 40px;

  color: #7a7a7a;

  font-size: 15px;

  font-weight: 300;

  line-height: 27px;

}



.two_part_sm {

  width: 10%;

  float: left;

}



.two_part_bg {

  width: 90%;

  float: left;

}



.comment_share {

  overflow: hidden;

}



.reply {

  text-decoration: none;

  color: #7a7a7a;

  font-size: 17px;

  font-weight: 300;

  -webkit-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}



.reply:hover {

  color: #b4da6b;

}



.social.list-inline > li {

  padding-right: 2px;

  padding-left: 2px;

}



ul.social {

  text-align: right;

}



ul.social li {

}



ul.social li a {

  display: inline-block;

  border: 1px solid #7a7a7a;

  width: 25px;

  height: 25px;

  text-align: center;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

  border-radius: 5px;

}



ul.social li a i {

  font-size: 13px;

  line-height: 11px;

  color: #7a7a7a;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

  line-height: 25px;

}



ul.social li a:hover {

  background: #b4da6b;

  border-color: #b4da6b;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



ul.social li a:hover i {

  color: #fff;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



ul.social li:first-child {

  color: #7a7a7a;

  font-size: 13px;

  font-weight: 300;

  padding-right: 10px;

}



ul.children {

  padding-left: 160px;

  margin-bottom: 40px;

  margin-top: 40px;

  list-style: none;

}



@media (max-width: 768px) {

  .comment_info {

    padding-left: 0px;

    padding-top: 135px;

  }

  ul.children {

    padding-left: 65px;

  }

}

@media (max-width: 370px) {

  .two_part_sm {

    width: 100%;

  }

  .two_part_bg {

    width: 100%;

  }

  ul.social {

    text-align: left;

    margin: 0px;

  }

}



.respond_section {

  padding-right: 90px;

  margin-top: 90px;

}



.respond_section h2 {

  color: #333;

  font-size: 30px;

  text-transform: uppercase;

  font-weight: 700;

  margin-bottom: 55px;

  position: relative;

}



.respond_section h2:after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -15px;

  width: 44px;

  height: 1px;

  background-color: #b4da6b;

}



.respond_section .form-control {

  display: block;

  width: 100%;

  height: 50px;

  padding: 6px 12px;

  font-size: 14px;

  line-height: 1.42857143;

  color: #555;

  background-color: #f4f4f4;

  border: 1px solid #7a7a7a;

  background-image: none;

  border-radius: 3px;

  margin-bottom: 15px;

  opacity: 0.8;

  -webkit-transition: all 1s;

  -moz-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}

.respond_section .form-control:focus {

  border: 1px solid #fd4d66;

  border-color: #fd4d66;

  outline: 0px none;

  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.075) inset,

    0px 0px 0px rgba(102, 175, 233, 0.6);

}



.respond_section .col-sm-6 {

  margin-bottom: 15px;

}



#comment_submit {

  width: 100%;

  min-height: 48px;

  border-radius: 0px;

  background-color: transparent;

  color: #333;

  border-color: #b4da6b;

  font-size: 16px;

  text-transform: uppercase;

  font-weight: 500;

  letter-spacing: 2px;

  border-radius: 3px;

  border: 1px solid #b4da6b;

  margin-bottom: 60px;

  margin-top: 15px;

  -webkit-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}

#comment_submit:hover {

  background-color: #b4da6b;

  color: #fff;

}

@media (max-width: 360px) {

  #comment_submit {

    font-size: 14px;

  }

}

@media (max-width: 300px) {

  #comment_submit {

    font-size: 12px;

  }

}

@media (max-width: 412px) {

  .respond_section h2 {

    font-size: 22px;

  }

}

/*SIDEBAR BLOG*/



.search-btn,

.search-btn:hover {

  background-color: #b4da6b;

  border-color: #b4da6b;

  border-radius: 0px;

  color: #fefefe;

  font-size: 20px;

  display: inline-block;

  width: 18%;

  margin-left: 2%;

  padding: 5px;

  margin-top: -2px;

}

.search .form-control {

  height: 40px;

  background: transparent;

  border-radius: 0px;

  border: 1px solid #7a7a7a;

  width: 78%;

  display: inline-block;

  -webkit-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}

.search .form-control:focus {

  border: 1px solid #fd4d66;

  border-color: #fd4d66;

  outline: 0px none;

  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.075) inset,

    0px 0px 0px rgba(102, 175, 233, 0.6);

}

/*SIDEBAR*/

.categories {

  margin-top: 80px;

}

.categories h2,

.tag h2,

.lt_post h2 {

  color: #333;

  font-size: 20px;

  text-transform: uppercase;

  font-weight: 400;

  letter-spacing: 3px;

  position: relative;

  margin-bottom: 45px;

}

.categories h2:after,

.tag h2:after,

.lt_post h2:after {

  content: "";

  position: absolute;

  bottom: -10px;

  left: 0px;

  width: 50px;

  height: 1px;

  background-color: #b4da6b;

}

.categories ul {

  margin: 0;

  padding: 0;

  list-style: none;

}

.categories ul li {

}

.categories ul li a {

  color: #7a7a7a;

  font-size: 16px;

  font-weight: 300;

  display: block;

  padding-bottom: 7px;

  padding-top: 7px;

  border-bottom: 1px solid #7a7a7a;

  text-decoration: none;

  -webkit-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}

.categories ul li a:hover {

  color: #b4da6b;

}

.tag {

  margin-top: 80px;

}

.tag ul {

  margin: 0;

  padding: 0;

  list-style: none;

}

.tag ul li {

  display: inline-block;

  color: #7a7a7a;

}

.tag ul li a {

  color: #7a7a7a;

  font-size: 15px;

  font-weight: 300;

  text-decoration: none;

  padding-right: 3px;

  -webkit-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}

.tag ul li a:hover {

  color: #b4da6b;

}

.lt_post {

  margin-top: 80px;

}

.lt_post ul {

  margin: 0;

  padding: 0;

  list-style: none;

}

.lt_post ul li {

}

.lt_post ul li a {

  color: #7a7a7a;

  font-size: 16px;

  font-weight: 300;

  display: block;

  padding-bottom: 7px;

  padding-top: 7px;

  border-bottom: 1px solid #7a7a7a;

  text-decoration: none;

  -webkit-transition: all 0.5s;

  -o-transition: all 0.5s;

  transition: all 0.5s;

}

.lt_post ul li a:hover {

}

@media (max-width: 991px) {

  .sidebar {

    margin-top: 80px;

  }

}



/*BLOG POST*/

.blog_header {

  background: url(../images/bg/fact.jpg);

  background-size: cover;

  background-position: center;

}

.blog_header_overlay {

  background-color: rgba(0, 0, 0, 0.3);

}

.blog_header .section_header h1 {

  color: #fff;

  padding-top: 50px;

}

.blog_header .section_header p {

  font-weight: 300;

  color: #fff;

}

.single_blog_page {

  padding-top: 100px;

}

.blog-post {

  margin-bottom: 70px;

  background-color: #f4f4f4;

}

.blog-featured-item {

}

.blog-featured-item img {

  width: 100%;

}

.blog-featured-item iframe {

  width: 100%;

  height: 400px;

  border: 0px;

}

.blog-post-body {

  background-color: #f4f4f4;

  padding: 40px 30px 30px 30px;

}

.blog-post-body h2 {

  margin-top: 0px;

  text-transform: uppercase;

  font-size: 20px;

  font-weight: 500;

}

.blog-post-body h2 a {

  color: #333;

  text-decoration: none;

}

.blog-post-body h4 {

  font-size: 14px;

  color: #7a7a7a;

  font-weight: 400;

  font-style: italic;

}

.blog-post-body h4 a {

  color: #7a7a7a;

  text-decoration: none;

}

.blog-post-body p {

  color: #7a7a7a;

  font-size: 15px;

  margin-top: 35px;

  margin-bottom: 35px;

}

.blog-post-body .extra_post_info {

  margin-top: 40px;

  padding-bottom: 0px;

  border: 0px solid #fff;

}



/*SINGLE PORTFOLIO*/

.left_menu {

  padding-top: 50px;

}

.left_menu a {

  color: #7a7a7a;

  font-size: 16px;

  text-transform: uppercase;

  text-decoration: none;

  font-weight: 500;

}

.left_menu a i {

  color: #7a7a7a;

  border: 1px solid #7a7a7a;

  margin-right: 15px;

  padding: 7px 12px;

}

.portfolio_title {

  padding-top: 50px;

  padding-bottom: 90px;

}

.portfolio_title h2 {

  color: #333333;

  font-size: 25px;

  font-weight: 600;

  margin-bottom: 0px;

  letter-spacing: 3px;

}

.portfolio_title p {

  color: #7a7a7a;

  font-size: 16px;

  font-weight: 300;

  position: relative;

}

.portfolio_title p:after {

  content: "";

  position: absolute;

  bottom: -25px;

  left: 50%;

  margin-left: -20px;

  width: 40px;

  height: 1px;

  background-color: #b4da6b;

}



.single_portfolio .item img {

  width: 100%;

}



.portfolio_slider {

  padding-bottom: 100px;

}

.single_info {

}

.single_info h2 {

  font-size: 22px;

  text-transform: uppercase;

  margin-bottom: 0px;

}

.single_info p {

  font-size: 16px;

  color: #7a7a7a;

  text-transform: uppercase;

  margin-top: 0px;

}

.single_portfolio_desc {

  padding-top: 120px;

  padding-bottom: 120px;

}

.portfolio_desc {

}

.portfolio_desc p {

  color: #7a7a7a;

  font-size: 16px;

}

.portfolio_desc a {

  display: inline-block;

  margin-top: 27px;

}

.portfolio_quote {

  background: #b4da6b;

  padding: 30px 35px;

}

.portfolio_quote div i {

  color: #fff;

  display: block;

  text-align: center;

  font-size: 40px;

}

.portfolio_quote h2 {

  color: #fff;

  font-size: 16px;

  font-weight: 300;

  text-transform: uppercase;

  line-height: 31px;

  text-align: center;

}

.portfolio_quote h4 {

  color: #fff;

  font-size: 14px;

  text-align: center;

  font-weight: 500;

  margin-bottom: 0px;

}

.portfolio_quote h5 {

  font-size: 12px;

  color: #fff;

  text-align: center;

  font-weight: 300;

  margin-top: 0px;

}



/*SINGLE PORTFOLIO*/



.portfolio_title {

  padding-top: 50px;

  padding-bottom: 90px;

}

.portfolio_title h2 {

  color: #333333;

  font-size: 25px;

  font-weight: 600;

  margin-bottom: 0px;

  letter-spacing: 3px;

}

.portfolio_title p {

  color: #7a7a7a;

  font-size: 16px;

  font-weight: 300;

  position: relative;

}

.portfolio_title p:after {

  content: "";

  position: absolute;

  bottom: -25px;

  left: 50%;

  margin-left: -20px;

  width: 40px;

  height: 1px;

  background-color: #b4da6b;

}



.single_portfolio .item img {

  width: 100%;

}



.portfolio_slider {

  padding-bottom: 100px;

}

.single_info {

}

.single_info h2 {

  font-size: 22px;

  text-transform: uppercase;

  margin-bottom: 0px;

}

.single_info p {

  font-size: 16px;

  color: #7a7a7a;

  text-transform: uppercase;

  margin-top: 0px;

}

.single_portfolio_desc {

  padding-top: 120px;

  padding-bottom: 120px;

}

.portfolio_desc {

}

.portfolio_desc p {

  color: #7a7a7a;

  font-size: 16px;

}

.portfolio_desc a {

  display: inline-block;

  margin-top: 27px;

}

.portfolio_quote {

  background: #b4da6b;

  padding: 30px 35px;

}

.portfolio_quote div i {

  color: #fff;

  display: block;

  text-align: center;

  font-size: 40px;

}

.portfolio_quote h2 {

  color: #fff;

  font-size: 16px;

  font-weight: 300;

  text-transform: uppercase;

  line-height: 31px;

  text-align: center;

}

.portfolio_quote h4 {

  color: #fff;

  font-size: 14px;

  text-align: center;

  font-weight: 500;

  margin-bottom: 0px;

}

.portfolio_quote h5 {

  font-size: 12px;

  color: #fff;

  text-align: center;

  font-weight: 300;

  margin-top: 0px;

}

.portfolio_slider .owl-pagination .owl-page span {

  background: transparent !important;

  color: red;

  font-size: 18px;

  font-weight: 600;

  height: inherit !important;

  border-bottom: 2px solid transparent;

  border-radius: 0px !important;

  width: inherit !important;

  padding-left: 15px;

  margin: 5px;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}



.portfolio_slider .owl-pagination .owl-page.active span,

.tw_slider .owl-pagination .owl-page:hover span,

.qutoSilder .owl-pagination .owl-page.active span,

.qutoSilder .owl-pagination .owl-page:hover span {

  background: transparent;

  border-color: #b4da6b;

  color: #b4da6b;

  padding-left: 15px;

  -webkit-transition: all 1s;

  -o-transition: all 1s;

  transition: all 1s;

}

.portfolio_slider .owl-theme .owl-controls .owl-page span.owl-numbers {

  color: #7a7a7a;

  opacity: 1;

}

.portfolio_slider .owl-theme .owl-controls .owl-page.active span.owl-numbers {

  color: #b4da6b;

}

.portfolio_static {

}

.single_portfolio_st {

}

.single_portfolio_st .item {

  padding-top: 20px;

}

.single_portfolio_st .item img {

  width: 100%;

}



/*  inquiry form3 Brochure start*/



.download-brocher {

  text-align: center;

  margin-top: 100px;

  margin-bottom: 40px;

  overflow: visible !important;

}



.download-brocher #abc {

  padding: 15px;

  text-decoration: none;

  cursor: pointer;

  background: #333;

  border: none;

  border-radius: 10px;

  box-shadow: 0px 0px 15px #444, 0px 0px 15px #222, inset 0px 0px 10px #222,

    inset 0px 0px 10px #444;

  color: white;

  font-size: 16px;

}

.download-brocher #abc:hover {

  box-shadow: 0px 0px 15px #444, 0px 0px 15px #222, inset 0px 0px 10px #222,

    inset 0px 0px 10px #444;

  font-size: 16px;

  transition: 500ms;

  padding: 16px;

  color: rgb(114, 153, 51);

  text-shadow: 0px 0px 10px rgb(114, 153, 51);

}



#contact2 > #captcha_form3 > ul {

  padding: 0;

}



#contact2 {

  background: rgb(231, 236, 230);

  width: 330px;

  margin: 0 auto;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

  position: fixed;

  top: 8em;

  display: none;

  left: 0;

  right: 0;

  max-height: calc(100vh - 100px);

  overflow-y: auto;

  overflow-x: hidden;

  z-index: 999;

}



#contact2 input {

  border: 0;

  margin: 1em 40px;

  width: 240px;

  padding: 10px;

  border-bottom: 2px solid rgb(114, 153, 51);

  background: none;

  font-family: "Fontawesome", "Source Sans Pro", sans-serif;

  display: block;

  color: rgb(114, 153, 51);

}



#contact2 textarea {

  border: 0;

  width: 240px;

  height: 100px;

  display: block;

  margin-left: 40px;

  background: none;

  padding: 10px;

  font-family: "Fontawesome", "Source Sans Pro", sans-serif;

  border-bottom: 2px solid rgb(114, 153, 51);

  color: rgb(114, 153, 51);

}



#contact2 #submit {

  margin: 3em auto 4em;

  border: 2px solid #bf8d70;

  color: #bf8d70;

}

#contact2 #submit:hover {

  color: #fff;

}



#contact2 .close {

  float: right;

  font-size: 25px;

  font-weight: 700;

  line-height: 1;

  color: #000;

  text-shadow: 0 1px 0 #fff;

  filter: alpha(opacity=20);

  opacity: 1;

  margin-right: 10px;

}

#contact2 input[type="text"],

#contact2 input[type="email"],

#contact2 input[type="number"],

#contact2 input[type="password"] {

  font-size: inherit;

}



/* width */

::-webkit-scrollbar {

  width: 6px;

}



/* Track */

::-webkit-scrollbar-track {

  background: #020202;

}



/* Handle */

::-webkit-scrollbar-thumb {

  background: rgb(114, 153, 51);

}



/* Handle on hover */

::-webkit-scrollbar-thumb:hover {

  background: #1a460f;

}



.animatable {

  /* initially hide animatable objects */

  visibility: hidden;



  /* initially pause animatable objects their animations */

  -webkit-animation-play-state: paused;

  -moz-animation-play-state: paused;

  -ms-animation-play-state: paused;

  -o-animation-play-state: paused;

  animation-play-state: paused;

}



/* show objects being animated */

.animated {

  visibility: visible;



  -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: 2s;

  -moz-animation-duration: 2s;

  -ms-animation-duration: 2s;

  -o-animation-duration: 2s;

  animation-duration: 2s;



  -webkit-animation-play-state: running;

  -moz-animation-play-state: running;

  -ms-animation-play-state: running;

  -o-animation-play-state: running;

  animation-play-state: running;

}



/* CSS Animations (extracted from http://glifo.uiparade.com/) */

@-webkit-keyframes fadeInDown {

  0% {

    opacity: 0;

    -webkit-transform: translateY(-20px);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateY(0);

  }

}



@-moz-keyframes fadeInDown {

  0% {

    opacity: 0;

    -moz-transform: translateY(-20px);

  }



  100% {

    opacity: 1;

    -moz-transform: translateY(0);

  }

}



@-o-keyframes fadeInDown {

  0% {

    opacity: 0;

    -o-transform: translateY(-20px);

  }



  100% {

    opacity: 1;

    -o-transform: translateY(0);

  }

}



@keyframes fadeInDown {

  0% {

    opacity: 0;

    transform: translateY(-20px);

  }

  100% {

    opacity: 1;

    transform: translateY(0);

  }

}



@-webkit-keyframes fadeIn {

  0% {

    opacity: 0;

  }

  20% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}



@-moz-keyframes fadeIn {

  0% {

    opacity: 0;

  }

  20% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}



@-o-keyframes fadeIn {

  0% {

    opacity: 0;

  }

  20% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}



@keyframes fadeIn {

  0% {

    opacity: 0;

  }

  60% {

    opacity: 0;

  }

  20% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

@-webkit-keyframes bounceInLeft {

  0% {

    opacity: 0;

    -webkit-transform: translateX(-2000px);

  }

  60% {

    -webkit-transform: translateX(20px);

  }



  80% {

    -webkit-transform: translateX(-5px);

  }



  100% {

    opacity: 1;

    -webkit-transform: translateX(0);

  }

}



@-moz-keyframes bounceInLeft {

  0% {

    opacity: 0;

    -moz-transform: translateX(-2000px);

  }



  60% {

    -moz-transform: translateX(20px);

  }



  80% {

    -moz-transform: translateX(-5px);

  }



  100% {

    opacity: 1;

    -moz-transform: translateX(0);

  }

}



@-o-keyframes bounceInLeft {

  0% {

    opacity: 0;

    -o-transform: translateX(-2000px);

  }



  60% {

    opacity: 1;

    -o-transform: translateX(20px);

  }



  80% {

    -o-transform: translateX(-5px);

  }



  100% {

    opacity: 1;

    -o-transform: translateX(0);

  }

}



@keyframes bounceInLeft {

  0% {

    opacity: 0;

    transform: translateX(-2000px);

  }



  60% {

    transform: translateX(20px);

  }



  80% {

    transform: translateX(-5px);

  }



  100% {

    opacity: 1;

    transform: translateX(0);

  }

}

@-webkit-keyframes bounceInRight {

  0% {

    opacity: 0;

    -webkit-transform: translateX(2000px);

  }



  60% {

    -webkit-transform: translateX(-20px);

  }



  80% {

    -webkit-transform: translateX(5px);

  }



  100% {

    opacity: 1;

    -webkit-transform: translateX(0);

  }

}



@-moz-keyframes bounceInRight {

  0% {

    opacity: 0;

    -moz-transform: translateX(2000px);

  }



  60% {

    -moz-transform: translateX(-20px);

  }



  80% {

    -moz-transform: translateX(5px);

  }



  100% {

    opacity: 1;

    -moz-transform: translateX(0);

  }

}



@-o-keyframes bounceInRight {

  0% {

    opacity: 0;

    -o-transform: translateX(2000px);

  }



  60% {

    -o-transform: translateX(-20px);

  }



  80% {

    -o-transform: translateX(5px);

  }



  100% {

    opacity: 1;

    -o-transform: translateX(0);

  }

}



@keyframes bounceInRight {

  0% {

    opacity: 0;

    transform: translateX(2000px);

  }



  60% {

    transform: translateX(-20px);

  }



  80% {

    transform: translateX(5px);

  }



  100% {

    opacity: 1;

    transform: translateX(0);

  }

}

@-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);

  }

}

@-webkit-keyframes bounceIn {

  0% {

    opacity: 0;

    -webkit-transform: scale(0.3);

  }

  50% {

    -webkit-transform: scale(1.05);

  }



  70% {

    -webkit-transform: scale(0.9);

  }



  100% {

    opacity: 1;

    -webkit-transform: scale(1);

  }

}



@-moz-keyframes bounceIn {

  0% {

    opacity: 0;

    -moz-transform: scale(0.3);

  }



  50% {

    -moz-transform: scale(1.05);

  }



  70% {

    -moz-transform: scale(0.9);

  }



  100% {

    opacity: 1;

    -moz-transform: scale(1);

  }

}



@-o-keyframes bounceIn {

  0% {

    opacity: 0;

    -o-transform: scale(0.3);

  }



  50% {

    -o-transform: scale(1.05);

  }



  70% {

    -o-transform: scale(0.9);

  }



  100% {

    opacity: 1;

    -o-transform: scale(1);

  }

}



@keyframes bounceIn {

  0% {

    opacity: 0;

    transform: scale(0.3);

  }



  50% {

    transform: scale(1.05);

  }



  70% {

    transform: scale(0.9);

  }



  100% {

    opacity: 1;

    transform: scale(1);

  }

}

@-webkit-keyframes moveUp {

  0% {

    opacity: 1;

    -webkit-transform: translateY(40px);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateY(0);

  }

}



@-moz-keyframes moveUp {

  0% {

    opacity: 1;

    -moz-transform: translateY(40px);

  }



  100% {

    opacity: 1;

    -moz-transform: translateY(0);

  }

}



@-o-keyframes moveUp {

  0% {

    opacity: 1;

    -o-transform: translateY(40px);

  }



  100% {

    opacity: 1;

    -o-transform: translateY(0);

  }

}



@keyframes moveUp {

  0% {

    opacity: 1;

    transform: translateY(40px);

  }



  100% {

    opacity: 1;

    transform: translateY(0);

  }

}



@-webkit-keyframes fadeBgColor {

  0% {

    background: none;

  }

  70% {

    background: none;

  }

  100% {

    background: #464646;

  }

}

@-o-keyframes fadeBgColor {

  0% {

    background: none;

  }

  70% {

    background: none;

  }

  100% {

    background: #464646;

  }

}

@keyframes fadeBgColor {

  0% {

    background: none;

  }

  70% {

    background: none;

  }

  100% {

    background: #464646;

  }

}



.animated.animationDelay {

  animation-delay: 0.4s;

  -webkit-animation-delay: 0.4s;

}

.animated.animationDelayMed {

  animation-delay: 1.2s;

  -webkit-animation-delay: 1.2s;

}

.animated.animationDelayLong {

  animation-delay: 1.6s;

  -webkit-animation-delay: 1.6s;

}

.animated.fadeBgColor {

  -webkit-animation-name: fadeBgColor;

  -moz-animation-name: fadeBgColor;

  -o-animation-name: fadeBgColor;

  animation-name: fadeBgColor;

}

.animated.bounceIn {

  -webkit-animation-name: bounceIn;

  -moz-animation-name: bounceIn;

  -o-animation-name: bounceIn;

  animation-name: bounceIn;

}

.animated.bounceInRight {

  -webkit-animation-name: bounceInRight;

  -moz-animation-name: bounceInRight;

  -o-animation-name: bounceInRight;

  animation-name: bounceInRight;

}

.animated.bounceInLeft {

  -webkit-animation-name: bounceInLeft;

  -moz-animation-name: bounceInLeft;

  -o-animation-name: bounceInLeft;

  animation-name: bounceInLeft;

}

.animated.fadeIn {

  -webkit-animation-name: fadeIn;

  -moz-animation-name: fadeIn;

  -o-animation-name: fadeIn;

  animation-name: fadeIn;

}

.animated.fadeInDown {

  -webkit-animation-name: fadeInDown;

  -moz-animation-name: fadeInDown;

  -o-animation-name: fadeInDown;

  animation-name: fadeInDown;

}

.animated.fadeInUp {

  -webkit-animation-name: fadeInUp;

  -moz-animation-name: fadeInUp;

  -o-animation-name: fadeInUp;

  animation-name: fadeInUp;

}

.animated.moveUp {

  -webkit-animation-name: moveUp;

  -moz-animation-name: moveUp;

  -o-animation-name: moveUp;

  animation-name: moveUp;

}

:root{
    --size: 48px;
    --bg: rgba(0,0,0,0.7);
    --fg: #fff;
    --glass: 10px;
  }

  .scroll-top{
    position: fixed;
    right: 20px;
    bottom: 24px;
    width: var(--size);
    height: var(--size);
    border-radius: 12px;
    border: none;
    background: #4fc563;
    color: var(--fg);
    display: inline-grid;
    place-items: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    cursor: pointer;
    transform: translateY(20px);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 9999;
  }

  .scroll-top:focus { outline: 3px solid rgba(255,255,255,0.12); }
  .scroll-top svg { width: 22px; height: 22px; }

  /* visible state */
  .scroll-top.show{
    opacity: 1;
    transform: translateY(0);
  }

  /* small bounce on hover to attract attention */
  .scroll-top:hover { transform: translateY(-6px); }

  /* respect reduced motion */
  @media (prefers-reduced-motion: reduce){
    .scroll-top, .scroll-top:hover { transition: none; transform: none; }
  }

/*testing*/