@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: 'codropsicons';
  src: url('../fonts/codropsicons/codropsicons.eot');
  src: url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'), url('../fonts/codropsicons/codropsicons.woff') format('woff'), url('../fonts/codropsicons/codropsicons.ttf') format('truetype'), url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}
/* Header */
.codrops-header {
  z-index: 100;
  position: absolute;
  top: 40%;
  left: 15%;
  text-align: center;
  /*max-width: 500px;*/
  /*-webkit-transform: translate(-50%,-50%);*/
  /*transform: translate(-50%,-50%);*/
  /*-webkit-backface-visibility: hidden;*/
  /*backface-visibility: hidden;*/
}
.codrops-header h1 {
  margin: 0;
  font-weight: 200;
  font-size: 3em;
  line-height: 1;
}
.codrops-header h1 span {
  display: block;
  padding: 0.5em 0 0.6em 0.1em;
  font-size: 40%;
  line-height: 1.2;
  opacity: 0.7;
}
/* To Navigation Style */
.codrops-top {
  width: 100%;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 0.69em;
  line-height: 2.2;
  position: relative;
  z-index: 2000;
}
.codrops-top a {
  display: inline-block;
  padding: 0.3em 0.7em;
  text-decoration: none;
  letter-spacing: 1px;
  margin: 5px;
}
.codrops-top span.right {
  float: right;
}
.codrops-top span.right a {
  display: block;
  float: left;
}
.codrops-icon:before {
  margin: 0 4px;
  text-transform: none;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-family: 'codropsicons';
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
}
.codrops-icon-drop:before {
  content: "\e001";
}
.codrops-icon-prev:before {
  content: "\e004";
}
/* Demo Buttons Style */
.codrops-demos {
  padding-top: 2em;
  font-size: 0.8em;
}
.codrops-demos a {
  display: inline-block;
  margin: 0.5em;
  padding: 0.7em 1.1em;
  outline: none;
  border: 2px solid #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 165px;
}
.codrops-demos a:hover, .codrops-demos a.current-demo, .codrops-demos a.current-demo:hover {
  color: #debcc3;
  border-color: #debcc3;
}
.panel {
  border: none !important;
  border-radius: 0 !important;
}
@media screen and (max-width: 25em) {
  .codrops-icon span {
    display: none;
  }
}
.codrops-header {
  z-index: 3;
}
.boxgallery > .slider_btn_wrap {
  position: absolute;
  top: 44%;
  right: 34px;
  z-index: 1000;
  display: block;
  z-index: 4;
}
.boxgallery > .slider_btn_wrap .slider_btn {
  position: relative;
  width: 7px;
  height: 7px;
  margin-bottom: 20px;
  cursor: pointer;
}
.boxgallery > .slider_btn_wrap .slider_btn.active i {
  background: #ffd500;
}
.boxgallery > .slider_btn_wrap i {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
}
.boxgallery > .slider_btn_wrap i:hover {
  background: #ffd500;
}
@media (max-width: 767px) {
  .boxgallery > .slider_btn_wrap {
    top: auto;
    right: auto;
    bottom: 4vw;
    left: 2vw;
    display: flex;
  }
  .boxgallery > .slider_btn_wrap .slider_btn {
    width: 2vw;
    height: 2vw;
    margin: auto;
    margin-right: 15px;
  }
}