/* by Haidar Hammoud haidar.hmd1@gmail.com */

/* Left Slider */
.box-container-left{
  position:absolute;
  right: 100%;
  top:0;
  opacity: 0.8;
  overflow: hidden;
  transition: 0.2s ease;
}


/* Down slider */
.box-container-down{
  position:absolute;
  bottom: 100%;
  opacity: 0.8;
  overflow: hidden;
  transition: 0.2s ease;
}

/* Right Slider */
.box-container-right{
  position: absolute;
  left:100%;
  top:0;
  opacity: 0.8;
  overflow: hidden;
  transition: 0.2s ease;
}

/* Up Slider */
.box-container-up{
  position: absolute;
  top: 100%;
  opacity: 0.8;
  overflow: hidden;
  transition: 0.2s ease;
}



/* Button Style */


/* Default btn Style */
.btn-style{
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer;
  transform: translate(-50%,-50%);
}

.default{
  padding: 14px 16px;
  border: 1px solid black;
  background: transparent;
}

/* style 1 */

.style-1{
  padding: 14px 16px;
  border: 1px solid black;
  border-radius: 5px;
  background: transparent;
}


/* style 1 btn */

/* Left Slider */
.box-container-left-style{
  position:absolute;
  right: 100%;
  top:0;
  opacity: 0.8;
  overflow: hidden;
  transition: 0.2s ease;
}


/* Down slider */
.box-container-down-style{
  position:absolute;
  bottom: 100%;
  opacity: 0.8;
  overflow: hidden;
  transition: 0.2s ease;
}

/* Right Slider */
.box-container-right-style{
  position: absolute;
  left:100%;
  top:0;
  opacity: 0.8;
  overflow: hidden;
  transition: 0.2s ease;
}

/* Up Slider */
.box-container-up-style{
  position: absolute;
  top: 100%;
  opacity: 0.8;
  overflow: hidden;
  transition: 0.2s ease;
}



/* style 2 */

.style-2{
  padding: 14px 16px;
  border: 4px solid black;
  border-radius: 5px;
  background: transparent;
}


/* style 1 btn */

/* Left Slider */
.box-container-left-style2{
  position:absolute;
  right: 100%;
  top:0;
  opacity: 0.8;
  overflow: hidden;
  transition: 0.2s ease;
}


/* Down slider */
.box-container-down-style2{
  position:absolute;
  bottom: 100%;
  opacity: 0.8;
  overflow: hidden;
  transition: 0.2s ease;
}

/* Right Slider */
.box-container-right-style2{
  position: absolute;
  left:100%;
  top:0;
  opacity: 0.8;
  overflow: hidden;
  transition: 0.2s ease;
}

/* Up Slider */
.box-container-up-style2{
  position: absolute;
  top: 100%;
  opacity: 0.8;
  overflow: hidden;
  transition: 0.2s ease;
}

