@import "../variables";
@import "../mixins";


/*========================
	Gallery Area
===========================*/

.gallery{
    margin-top: 40px;
    overflow: hidden;
    position: relative;
    .gallery__thumb{
        a{
            display: block;
            position: relative;
            z-index: 2;
            &::before {
                background: #0095e8 none repeat scroll 0 0;
                content: "";
                height: 172%;
                left: -167%;
                opacity: 0.9;
                position: absolute;
                top: -70.5%;
                transform: rotate(45deg);
                transition: all 0.5s ease 0s;
                width: 100%;
                z-index: 1;
            }
            &::after {
                background: #89d700 none repeat scroll 0 0;
                content: "";
                height: 168%;
                opacity: 0.9;
                position: absolute;
                right: -169%;
                top: 11%;
                transform: rotate(45deg);
                transition: all 0.5s ease 0s;
                width: 136%;
                z-index: 1;
            }
            img{
                width: 100%;
            }
        }
    }
    .gallery__hover__inner{
        position: absolute;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.5s ease 0s;
        width: 100%;
        z-index: 9;
        .gallery__hover__action{
            transform: scale(0);
            transition: all 0.5s ease 0s;
            .gallery__zoom{
                display: flex;
                justify-content: center;
                margin-bottom: 23px;
                li{
                    margin: 0 5px;
                    a{
                        i{
                            border: 1px solid #fff;
                            border-radius: 5px;
                            color: #fff;
                            font-size: 18px;
                            height: 40px;
                            line-height: 38px;
                            text-align: center;
                            transition: all 0.4s ease 0s;
                            width: 40px;
                        }
                        &:hover i {
                            background: #fe5629 none repeat scroll 0 0;
                            border: 1px solid #fe5629;
                        }
                    }
                }
            }
            .gallery__title{
                a{
                    color: #ffffff;
                    font-size: 22px;
                    text-transform: capitalize;
                    transition: all 0.3s ease 0s;
                    font-family: $heading-font;
                    font-weight: 700;
                }
            }
        }
    }
}


.gallery:hover .gallery__thumb a::before {
    left: -36%;
}
.gallery:hover .gallery__thumb a::after {
    right: -69%;
}
.gallery:hover .gallery__hover__inner {
}
.gallery__hover__action {
    
}
.gallery:hover .gallery__hover__action {
    transform: scale(1);
}
.gallery__hover__action h4 a:hover {
    color: #ff9900;
}





// Galler Two


.gallery--2 .gallery__thumb a::before,
.gallery--3 .gallery__thumb a::before {
  display: none;
}
.gallery--2 .gallery .gallery__thumb a::after {
  background: #e9ebf8 none repeat scroll 0 0;
  content: "";
  height: 120%;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(0deg);
  transition: all 0.5s ease 0s;
  width: 136%;
  z-index: 1;
}
.gallery--2 .gallery:hover .gallery__thumb a::after {
  opacity: 0.8;
}
.gallery--2 .gallery .gallery__hover__inner .gallery__hover__action .gallery__zoom li a i {
  background: rgba(0, 0, 0, 0.2) none repeat scroll 0 0;
  border: 1px solid transparent;
}
.gallery--2 .gallery .gallery__hover__inner .gallery__hover__action .gallery__zoom li a:hover i {
  background: #89d700 none repeat scroll 0 0;
  border: 1px solid #89d700;
}
.gallery--2 .gallery .gallery__hover__inner .gallery__hover__action .gallery__zoom {
  margin-bottom: 0;
}

// Masonary


.gallery--3 .gallery .gallery__thumb a::after {
  background: #000 none repeat scroll 0 0;
  content: "";
  height: 100%;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: rotate(0deg);
  transition: all 0.5s ease 0s;
  width: 100%;
  z-index: 1;
  border-radius: 5px;
}
.gallery--3 .gallery:hover .gallery__thumb a::after {
  opacity: 0.7;
}
.gallery--3 .gallery .gallery__hover__inner .gallery__hover__action .gallery__zoom {
  margin-bottom: 0;
}
.gallery--3 .gallery:hover .gallery__thumb a::after {
  right: 0;
}
.gallery--3 .gallery .gallery__hover__inner .gallery__hover__action .gallery__zoom li a i {
  background: #fff none repeat scroll 0 0;
  color: #666666;
  font-size: 18px;
  height: 45px;
  line-height: 42px;
  text-align: center;
  transition: all 0.4s ease 0s;
  width: 45px;
}
.gallery--3 .gallery .gallery__hover__inner .gallery__hover__action .gallery__zoom li a:hover i {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #fff;
  color: #89d700;
}




// Gallery Page One




.gallery-page-one .gallery,
.gallery-page-three .gallery {
  margin-left: -15px;
  margin-right: -15px;
  margin-top: 0;
  overflow: hidden;
  position: relative;
}


.gallery-page-one.gallery--3 .gallery .gallery__hover__inner .gallery__hover__action .gallery__zoom li a i {
  background: transparent none repeat scroll 0 0;
  color: #fff;
  font-size: 16px;
  height: 40px;
  line-height: 39px;
  width: 40px;
}
.gallery-page-one.gallery--3 .gallery .gallery__hover__inner .gallery__hover__action .gallery__zoom li a:hover i {
  background: transparent none repeat scroll 0 0;
  border: 1px solid #89d700;
  color: #89d700;
}


.gallery-page-one.gallery--3 .gallery .gallery__thumb a::after,
.gallery-page-three.gallery--3 .gallery .gallery__thumb a::after {
  border-radius: 0;
}

.gallery-page-three.gallery--3 .gallery .gallery__hover__inner .gallery__hover__action .gallery__zoom li a i {
  background: #000000 none repeat scroll 0 0;
  border: 1px solid #000000;
  color: #fff;
}


.gallery-page-three.gallery--3 .gallery .gallery__hover__inner .gallery__hover__action .gallery__zoom li a:hover i {
  background: #89d700 none repeat scroll 0 0;
  border: 1px solid #89d700;
  color: #fff;
}


.gallery-page-three.gallery--3 .gallery .gallery__thumb a::after {
  background: #fff none repeat scroll 0 0;
}
.gallery-page-three.gallery--3 .gallery:hover .gallery__thumb a::after {
  opacity: 0.9;
}


// Gallery Menu


.gallery__menu{
    text-align: center;
    button{
        background: transparent none repeat scroll 0 0;
        border: 1px solid #dddddd;
        color: #666666;
        font-family: $body-font;
        font-size: 24px;
        font-weight: 700;
        height: 60px;
        line-height: 57px;
        padding: 0 30px;
        transition: all 0.4s ease 0s;
        &.is-checked{
            color: $theme-color;
        }
        &:hover{
            color: $theme-color;
        }
    }
}


