.circle {
    position: relative;
    width: 300px;
    height: 300px;
    opacity: 0.8;
    background: rgba(74,88,46,0.8);
    /* Create Circle With 50% Rounded */
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: 3px solid rgba(74,88,46,0.8);
    /* Assign the perspective to enable 3d Transform */
    perspective: 600px;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
}


    .circle .front img {
        border-radius: 50%;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
    }

    .circle .back img {
        height: 100%;
        width: 100%;
    }





    .circle .front {
        position: absolute;
        z-index: 9;
        margin-top: 75px;
        margin-left: 87px;
        font-size: 45px;
        color: white;
        font-family: Hybrea, Overlock;
        /* Assign The 3D Transform */
        -webkit-transform: rotateX(0deg) rotateY(0deg);
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -moz-transform: rotateX(0deg) rotateY(0deg);
        -moz-transform-style: preserve-3d;
        -moz-backface-visibility: hidden;
        /* Transition Effect */
        transition: all .2s ease-in-out;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
    }

    /* .flipping class for flip effect using jquery */



    .circle.flipping .front {
        z-index: 9;
        -webkit-transform: rotateX(180deg);
        -moz-transform: rotateX(180deg);
    }

.whiteBorder {
    border: 3px solid rgba(44, 150, 44, 0.80);
}


.circle .back {
    position: absolute;
    width: 300px;
    height: 300px;
    overflow: hidden;
    text-align: center;
    z-index: 8;
    /* Create Circle With 50% Rounded */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    /* Assign The 3D Transform */
    -webkit-transform: rotateX(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* Transition Effect */
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
}



.circle.flipping .back {
    z-index: 10;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
}


@media (max-width: 1024px) {
    .circle {
        width: 200px;
        height: 200px;
    }

        .circle .front {
            margin-top: 20%;
            margin-left: 20%;
            font-size: 40px;
        }

        .circle .back {
            width: 200px;
            height: 200px;
        }
}

@media (max-width: 900px) {
    .circle {
        width: 170px;
        height: 170px;
    }

        .circle .front {
            margin-top: 35px;
            margin-left: 40px;
            font-size: 33px;
        }

        .circle .back {
            width: 170px;
            height: 170px;
        }
}

@media (max-width: 768px) {
    .circle {
        width: 150px;
        height: 150px;
    }

        .circle .front {
            margin-top: 30px;
            margin-left: 30px;
            font-size: 30px;
        }

        .circle .back {
            width: 150px;
            height: 150px;
        }
}


@media (max-width: 680px) {
    .circle {
        width: 150px;
        height: 150px;
    }

        .circle .back {
            width: 150px;
            height: 150px;
        }
}


@media (max-width: 460px) {
    .circle {
        width: 125px;
        height: 125px;
    }

        .circle .front {
            margin-top: 20%;
            margin-left: 22%;
            font-size: 25px;
        }

        .circle .back {
            width: 125px;
            height: 125px;
        }
}

@media (max-width: 400px) {

    .circle .front {
        margin-top: 20%;
        margin-left: 25%;
        font-size: 25px;
    }
}

@media (max-width: 390px) {

    .circle .front {
        margin-top: 20%;
        margin-left: 22%;
        font-size: 25px;
    }
}


#gallery {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
}

@media (max-width:1200px) {
    #gallery {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-gap: 20px;
        -moz-column-gap: 20px;
        column-gap: 20px;
    }
}

@media (max-width:800px) {
    #gallery {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 20px;
        -moz-column-gap: 20px;
        column-gap: 20px;
    }
}

.cardImg {
    max-width: 550px;
    height: auto;
    margin: 4% auto;
    box-shadow: -3px 5px 15px #000;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

@media (max-width:600px) {
    #gallery {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}


.modal-img {
    width: 100%;
    height: auto;
}

.modal-body {
    padding: 0px;
}