.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 16px;
  line-height: 1.33;
  border-radius: 9px;
}
.btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
  content: " ";
  display: table;
}
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
  clear: both;
}

.menu-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(100% + 100px);
  background-color: rgba(0,0,0,0.6);
  z-index: 900;
}

.portfolio_teasers_wrapper .owl-carousel .owl-nav button,
.features_teasers_wrapper .owl-carousel .owl-nav button {
  height: 30px;
  width: 30px;
  font-size: 20px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  line-height: 30px;
  text-align: center;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
}

.portfolio_teasers_wrapper .owl-carousel .owl-nav button.owl-prev,
.features_teasers_wrapper .owl-carousel .owl-nav button.owl-prev {
  left: -20px;
}

.portfolio_teasers_wrapper .owl-carousel .owl-nav button.owl-next,
.features_teasers_wrapper .owl-carousel .owl-nav button.owl-next {
  right: -20px;
}

.clients_list.owl-carousel .owl-item img {
  width: 140px;
}

.owl-carousel .owl-dots {
  text-align: center;
}

.owl-carousel button.owl-dot {
  width: 5px;
  height: 5px;
  margin-right: 10px;
  background: #555555;
  border-radius: 50%;
}

.owl-carousel button.owl-dot.active {
  width: 7px;
  height: 7px;
}

.menu_close_btn {
  position: absolute;
  top: 5px;
  right: 10px;
  z-index: 10;
  font-size: 20px;
}

#staticMenu {
  display: none;
}

#mainmenu {
  display: none;
}


.menu_container.static {
  display: block !important;
  clear: none;
  float: right;
  background: transparent;
  position: relative;
  width: auto;
  margin: 29px 0px;
  top: 0;
  left: 0;
}

.menu_container.static > ul {
  background: inherit;
  list-style: none;
  margin: 0;
  padding: 0;
  float: none;
  position: relative;
  width: 100%;
  height: 0;
  transition: all 100ms linear;
  -moz-transition: all 100ms linear;
  -o-transition: all 100ms linear;
  -webkit-transition: all 100ms linear;
  overflow: hidden;
}

.menu_container.static > ul > li {
  float: left;
  background: inherit;
  width: auto;
  border-left: solid 0px #cccccc;
  text-align: left;
  display: block;
  padding: 0;
  margin: 0;
}

.menu_container.static > ul > li > a {
  padding: 12px 12px;
  margin: 0 3px;
  display: block;
  color: #555555;
  text-decoration: none;
  font-size: 13px;
  line-height: 18px;
  font-weight: 800;
  background-color: transparent;
  text-transform: uppercase;
}

.menu_container.static > ul > li:hover > a {
  border-bottom: solid 0px #428bca !important;
  color: #428bca !important;
}

.menu_container.static > ul > li.active > a {
  color: #428BCA;
}

.menu_container.fixed {
  display: block !important;
  visibility: hidden;
  position: fixed;
  top: 0;
  z-index: 901;
  background-color: #ffffff;
  float: none;
  width: 250px;
  box-sizing: border-box;
  padding: 0;
  height: calc(100% + 100px);
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}
.menu_container.fixed.active {
  transform: translate(0, 0);
}

.menu_container.fixed > ul {
  margin: 0;
  float: none;
  position: relative;
  transition: all 100ms linear;
  -moz-transition: all 100ms linear;
  -o-transition: all 100ms linear;
  -webkit-transition: all 100ms linear;
  overflow: hidden;
  height: 100%;
  padding: 30px 0;
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
}
.menu_container.fixed > ul > li {
  width: 100%;
  text-align: center;
}
.menu_container.fixed > ul > li:nth-child(even) {
  border-right: solid 0px red;
}
.menu_container.fixed > ul > li:last-child {
  border-bottom: solid 0px red;
}
.menu_container.fixed > ul > li > a {
  font-weight: bold;
}
.menu_container.fixed > ul > li {
  display: block;
  float: none;
  padding: 0;
  margin: 0;
}
.menu_container.fixed > ul > li > a {
  padding: 10px 15px;
  margin: 0;
  display: block;
  color: #777777;
  text-decoration: none;
  font-size: 16px;
  line-height: 18px;
  font-weight: 500;
  text-transform: uppercase;
  border: 0;
  text-align: left;
}
.menu_container.fixed > ul > li.active > a {
  border-bottom: solid 0px #428BCA;
}
.menu_container.fixed > ul > li:hover > a {
  border-bottom: solid 0px #428BCA;
}
.menu_container.fixed ul > li a {
  position: relative;
}
.menu_container.fixed ul > li.has-dropdown > a:after {
  content: "\203A";
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  position: absolute;
  font-family: Arial, sans-serif;
  top: 12px;
  right: 10px;
  font-size: 24px;
  line-height: 16px;
  font-weight: bold;
  opacity: 0.5;
}
.menu_container.fixed ul > li.subli.has-dropdown > a:after {
  content: "\203A";
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  top: 8px;
}
.menu_container.fixed ul > li.subsubli.has-dropdown > a:after {
  content: "\203A";
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
  top: 8px;
}

.menu_container.fixed ul > li.has-dropdown:hover > a:after {
  opacity: 1;
}
/* =Responsive: All above the breakpoint, default @ 768px
-------------------------------------------------------------- */
@media only screen and (min-width: 768px) {
  .main-menu-burger {
    display: block;
  }

  .menu_container.fixed {
    float: right;
    clear: none;
    margin: 29px 0px;
    background: transparent;
    position: relative;
    top: 0;
    left: 0;
    width: auto;
  }
  .menu_container.static > ul,
  .menu_container.fixed > ul {
    background: none;
    height: inherit;
    overflow: visible;
  }
  .menu_container.static > ul > li,
  .menu_container.fixed > ul > li {
    float: left;
    background: inherit;
    width: auto;
    border-left: solid 0px #cccccc;
    text-align: left;
  }
  .menu_container.static > ul > li > a,
  .menu_container.fixed > ul > li > a {
    padding: 12px 12px;
    margin: 0 3px;
    display: block;
    color: #555555;
    text-decoration: none;
    font-size: 13px;
    line-height: 18px;
    font-weight: 800;
    background-color: transparent;
  }
  .menu_container.static > ul > li.right,
  .menu_container.fixed > ul > li.right {
    float: right;
  }
  .menu_container.fixed ul > li.has-dropdown > a:after {
    right: 0px;
    font-size: 18px;
  }
}
/* =Responsive: Desktop or even Big Tablet
-------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
  .menu_container.fixed > ul > li > a {
    padding: 15px 10px;
    margin: 0 3px;
  }
}
/* =Responsive: Small Tablet
-------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
  .menu_container.fixed {
    float: none;
    clear: both;
    margin: 0px 0px 20px 0;
  }
  .menu_container.fixed > ul > li > a {
    padding: 15px 10px;
    margin: 0 3px;
  }
}

@media only screen and (max-width: 767px) {
  .menu_container.fixed {
    visibility: visible;
  }

  .portfolio_teasers_wrapper .owl-carousel .owl-nav button.owl-prev,
  .features_teasers_wrapper .owl-carousel .owl-nav button.owl-prev {
    left: -18px;
  }

  .portfolio_teasers_wrapper .owl-carousel .owl-nav button.owl-next,
  .features_teasers_wrapper .owl-carousel .owl-nav button.owl-next {
    right: -18px;
  }
}

.main-menu-burger {
  position: absolute;
  top: 28px;
  right: 15px;
  display: none;
}

.main-menu-burger input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;

  cursor: pointer;

  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */

  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
.main-menu-burger span
{
  display: block;
  width: 25px;
  height: 3px;
  margin-bottom: 5px;
  position: relative;

  background: #666666;
  border-radius: 3px;

  z-index: 1;

  transform-origin: 4px 0px;

  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
  opacity 0.55s ease;
}

.main-menu-burger span:first-child
{
  transform-origin: 0% 0%;
}

.main-menu-burger span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/*
 * Transform all the slices of hamburger
 * into a crossmark.
 */
.main-menu-burger input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-9px, -13px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
.main-menu-burger input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
.main-menu-burger input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(-2px, 8px);
}

@media (max-width: 768px) {
  .main-menu-burger {
    display: block;
  }
}