/* Default Layout: 992px.  */

.column {
    width: 960px
}

.circle_single {
    width: 270px;
}

.item-hover.circle {
    height: 270px;
    width: 270px;
}

.item-hover.circle.effect1 .spinner {
    height: 270px;
    width: 270px;
}

.item-hover.circle.effect1 .info {
    bottom: 6px;
    left: 6px;
    right: 6px;
    top: 6px;
}

.item-hover.circle.effect1 .img {
    bottom: 6px;
    left: 6px;
    right: 6px;
    top: 6px;
}

.item-hover.circle.effect5 .info {
    bottom: 1px;
    left: 0;
    right: 0;
    top: -3px;
}

.main-wrapper .container .circle_single {
    margin-left: 0;
    width: 250px;
}

.circle_single {
    margin-left: 25px !important;
    margin-right: 25px !important;
}

.item-hover.circle .img {
    height: 270px;
    width: 270px;
}

.rakib-dev-fifth .mask {
    transform: translateX(-7000px);
}


/*
Square Style 2 Effects
*/

.rakib-dev-second .mask {
    background-color: rgba(115, 146, 184, 0.7);
    opacity: 0;
    padding: 21px;
    transform: translate(-3px, -163px) rotate(-46deg);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: translate(1px, -146px) rotate(-46deg);
    -moz-transform: translate(1px, -146px) rotate(-46deg);
    -o-transform: translate(1px, -146px) rotate(-46deg);
    -ms-transform: translate(1px, -146px) rotate(-46deg);
    transform: translate(1px, -146px) rotate(-46deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}


/* Tablet Layout: 768px. */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .circle_single {
        width: 245px;
    }
    .item-hover.circle {
        height: 245px;
        width: 245px;
    }
    .item-hover.circle.effect1 .spinner {
        height: 245px;
        width: 245px;
    }
    .item-hover.circle .img {
        height: 245px;
        width: 245px;
    }
}


/* Mobile Layout: 320px. */

@media only screen and (max-width: 767px) {
    .column {
        width: 300px
    }
}


/* Wide Mobile Layout: 480px. */

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .column {
        width: 450px
    }
    .circle_single {
        width: 430px;
    }
    .item-hover.circle {
        height: 430px;
        width: 430px;
    }
    .item-hover.circle.effect1 .spinner {
        height: 430px;
        width: 430px;
    }
    .item-hover.circle .img {
        height: 430px;
        width: 430px;
    }
    .rakib-dev-second .mask {
        background-color: rgba(115, 146, 184, 0.7);
        opacity: 0;
        padding: 72px;
        transform: translate(-9px, -342px) rotate(-44deg) !important;
        transition: all 0.2s ease-in-out 0s;
    }
}