/*===========================
      07.LOCATION css 
===========================*/




.single-location{
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    z-index: 5;
    
    &::before{
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: -webkit-linear-gradient(left, rgba(250,219,76,1) 0%, rgba(63,189,82,1) 100%);
        background: -o-linear-gradient(left, rgba(250,219,76,1) 0%, rgba(63,189,82,1) 100%);
        background: linear-gradient(to right, rgba(250,219,76,1) 0%, rgba(63,189,82,1) 100%);
        opacity: 0;
        @include transition(0.3s);
        visibility: hidden;
        z-index: 5;
    }
    
    & img{
        width: 100%;
        @include transition(0.3s);
    }
    
    & a{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9;
    }
    
    & .location-title{
        position: absolute;
        left: 0;
        width: 100%;
        bottom: 45px;
        font-size: 24px;
        font-weight: 600;
        color: $white;
        z-index: 8;
        
        @media #{$lg}{
            font-size: 20px;
        }
    }
    
    &.location-2{
        &::before{
            background: -webkit-linear-gradient(left, rgba(250,219,76,1) 0%, rgba(63,189,82,1) 100%);
            background: -o-linear-gradient(left, rgba(250,219,76,1) 0%, rgba(63,189,82,1) 100%);
            background: linear-gradient(to right, rgba(250,219,76,1) 0%, rgba(63,189,82,1) 100%);
        }
    }
    &.location-3{
        &::before{
            background: -webkit-linear-gradient(left, rgba(30,33,48,1) 0%, rgba(236,116,36,1) 100%);
            background: -o-linear-gradient(left, rgba(30,33,48,1) 0%, rgba(236,116,36,1) 100%);
            background: linear-gradient(to right, rgba(30,33,48,1) 0%, rgba(236,116,36,1) 100%);
        }
    }
    
    &:hover{
        & img{
            @include transform(scale(1.1));
        }
        &::before{
            opacity: 0.7;
            visibility: visible;
        }
    }
    
    
}