/*  

    halkaBox.js , url: https://github.com/ahmednooor/halkaBox.js

    Version: 0.5

    Author: Ahmed Noor , url: https://github.com/ahmednooor

    License: MIT , url: https://opensource.org/licenses/MIT

*/

.hb-wrapper,.hb-wrapper *,.hb-wrapper :after,.hb-wrapper :before,.hb-wrapper:after,.hb-wrapper:before {

 box-sizing:border-box;

 margin:0;

 padding:0

}

.hb-noscroll,.hb-wrapper {

 overflow:hidden

}

.hb-wrapper {

 display:block;

 width:100%;

 height:100%;

 position:fixed;

 top:0;

 right:0;

 bottom:0;

 left:0;

 z-index:9990;

 opacity:0;

 -webkit-transition:opacity .3s linear;

 transition:opacity .3s linear

}

.hb-wrapper .hb-image-container,.hb-wrapper .hb-image-container div,.hb-wrapper .hb-main-container {

 width:100%;

 height:100%;

 position:relative;

 display:block

}

.hb-wrapper .hb-main-container {

 margin:0;

 padding:0;

 background-color:#fff;

 background-color:rgba(255,255,255,.9);

 -webkit-backface-visibility:hidden;

 backface-visibility:hidden;

 z-index:9991

}

.hb-wrapper .hb-main-container a {

 display:block;

 width:100%;

 height:100%;

 text-decoration:none;

 font-weight:700;

 font-size:1.5rem;

 line-height:0;

 opacity:.7;

 z-index:9995;

 -webkit-transition:opacity .3s ease-in-out;

 transition:opacity .3s ease-in-out

}

.hb-wrapper .hb-main-container a:hover {

 cursor:pointer;

 opacity:1;

 -webkit-backface-visibility:hidden;

 backface-visibility:hidden

}

.hb-wrapper .hb-main-container a svg {

 max-width:100%;

 max-height:100%;

 fill:#000;

 -webkit-backface-visibility:hidden;

 backface-visibility:hidden

}

.hb-wrapper .hb-image-container {

 padding:30px;

 text-align:center;

 z-index:9993

}

.hb-wrapper .hb-image-container div {

 top:50%;

 left:50%;

 opacity:1;

 overflow:hidden;

 -webkit-transform:translate(-50%,-50%);

 transform:translate(-50%,-50%);

 -webkit-transition:opacity .3s ease-in-out;

 transition:opacity .3s ease-in-out;

 -webkit-backface-visibility:hidden;

 backface-visibility:hidden;

 z-index:9994

}

.hb-wrapper .hb-close-icon-container,.hb-wrapper .hb-left-icon-container {

 -webkit-backface-visibility:hidden;

 width:30px;

 height:30px;

 z-index:9995;

 position:absolute

}

.hb-wrapper .hb-image-container div div.hb-loader {

 display:block;

 width:35px;

 height:35px;

 position:fixed;

 top:50%;

 left:50%;

 border-radius:1000px;

 border-top:5px solid #444;

 -webkit-transform:translate(-50%,-50%);

 transform:translate(-50%,-50%);

 -webkit-animation:spinner .6s linear infinite;

 animation:spinner .6s linear infinite;

 z-index:9998

}

.hb-wrapper .hb-image-container div img {

 display:block;

 max-width:100%;

 max-height:100%;

 position:relative;

 top:50%;

 left:50%;

 opacity:1;

 -webkit-transform:translate(-50%,-50%);

 transform:translate(-50%,-50%);

 border: 7px solid #bdbdbd;

}

.hb-wrapper .hb-image-container div p {

 display:block;

 text-align:center;

 position:relative;

 top:50%;

 -webkit-transform:translate(0,-50%);

 transform:translate(0,-50%)

}

.hb-wrapper .hb-image-container div p.hb-err-text-white {

 color:#fff

}

.hb-wrapper .hb-image-container div p.hb-err-text-black {

 color:#000

}

@-webkit-keyframes spinner {

 0% {

  -webkit-transform:translate(-50%,-50%) rotate(0);

  transform:translate(-50%,-50%) rotate(0)

 }

 100% {

  -webkit-transform:translate(-50%,-50%) rotate(360deg);

  transform:translate(-50%,-50%) rotate(360deg)

 }

}

@keyframes spinner {

 0% {

  -webkit-transform:translate(-50%,-50%) rotate(0);

  transform:translate(-50%,-50%) rotate(0)

 }

 100% {

  -webkit-transform:translate(-50%,-50%) rotate(360deg);

  transform:translate(-50%,-50%) rotate(360deg)

 }

}

.hb-slidenextin {

 -webkit-animation:slideNextIn .3s ease-in-out forwards;

 animation:slideNextIn .3s ease-in-out forwards

}

@-webkit-keyframes slideNextIn {

 0% {

  left:100%;

  opacity:0

 }

 100% {

  left:50%;

  opacity:1

 }

}

@keyframes slideNextIn {

 0% {

  left:100%;

  opacity:0

 }

 100% {

  left:50%;

  opacity:1

 }

}

.hb-slidenextout {

 -webkit-animation:slideNextOut .3s ease-in-out forwards;

 animation:slideNextOut .3s ease-in-out forwards

}

@-webkit-keyframes slideNextOut {

 0% {

  left:50%;

  opacity:1

 }

 100% {

  left:0;

  opacity:0

 }

}

@keyframes slideNextOut {

 0% {

  left:50%;

  opacity:1

 }

 100% {

  left:0;

  opacity:0

 }

}

.hb-slidepreviousin {

 -webkit-animation:slidePreviousIn .3s ease-in-out forwards;

 animation:slidePreviousIn .3s ease-in-out forwards

}

@-webkit-keyframes slidePreviousIn {

 0% {

  left:0;

  opacity:0

 }

 100% {

  left:50%;

  opacity:1

 }

}

@keyframes slidePreviousIn {

 0% {

  left:0;

  opacity:0

 }

 100% {

  left:50%;

  opacity:1

 }

}

.hb-slidepreviousout {

 -webkit-animation:slidePreviousOut .3s ease-in-out forwards;

 animation:slidePreviousOut .3s ease-in-out forwards

}

@-webkit-keyframes slidePreviousOut {

 0% {

  left:50%;

  opacity:1

 }

 100% {

  left:100%;

  opacity:0

 }

}

@keyframes slidePreviousOut {

 0% {

  left:50%;

  opacity:1

 }

 100% {

  left:100%;

  opacity:0

 }

}

.hb-wrapper .hb-close-icon-container {

 top:0;

 right:0;

 backface-visibility:hidden

}

.hb-wrapper .hb-left-icon-container {

 top:50%;

 left:0;

 -webkit-transform:translate(0,-50%);

 transform:translate(0,-50%);

 backface-visibility:hidden

}

.hb-wrapper .hb-right-icon-container {

 width:30px;

 height:30px;

 position:absolute;

 top:50%;

 right:0;

 -webkit-transform:translate(0,-50%);

 transform:translate(0,-50%);

 -webkit-backface-visibility:hidden;

 backface-visibility:hidden;

 z-index:9995

}

.hb-wrapper .hb-close {

 padding:8px

}

.hb-wrapper .hb-left,.hb-wrapper .hb-right {

 padding:6px

}

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

 .hb-wrapper .hb-image-container,.hb-wrapper .hb-image-container img {

  padding:0

 }

 .hb-wrapper .hb-close-icon-container {

  width:40px;

  height:40px;

  right:0;

  top:0;

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

  transform:translate(0,0);

  background-color:#fff;

  background-color:rgba(255,255,255,.7)

 }

 .hb-wrapper .hb-left-icon-container,.hb-wrapper .hb-right-icon-container {

  width:40px;

  height:40px;

  top:auto;

  bottom:0;

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

  transform:translate(0,0);

  background-color:#fff;

  background-color:rgba(255,255,255,.7)

 }

 .hb-wrapper .hb-close {

  padding:10px

 }

 .hb-wrapper .hb-left {

  padding:9px 10px 9px 8px

 }

 .hb-wrapper .hb-right {

  padding:9px 8px 9px 10px

 }

}