img {
    max-width: 100%;
    height: auto;
}

.portfolio-container {
    max-width: 1200px;
    margin: 0 auto;
    font-family: "Quicksand";
}

.qc-circle-grid-portfolio-item {
    width: 480px;
	height:480px;
    float: left;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    padding: 15px;
	padding: 10px;
    border: 5px solid #ddd;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
	overflow:hidden;
	margin-bottom:20px;
	margin-right:20px;

}
.column2 .qc-circle-grid-portfolio-item .qc-circle-grid-portfolio-item-inner .qc-circle-grid-portfolio-img{
	padding: 15px;
}
.column3 .qc-circle-grid-portfolio-item {
    width: 325px;
	height:325px;    
}

.column4 .qc-circle-grid-portfolio-item {
    width: 240px;
	height:240px;    
}

.clear {
    clear: both;
    width: 100%;
}

.qc-circle-grid-portfolio-item-inner {
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=180, Color=#939393)"; /*IE 8*/
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=180, Color=#939393); /*IE 5.5-7*/

}

/* .qc-circle-grid-portfolio-item-inner:hover {
    box-shadow: none;
}
 */

.qc-circle-grid-portfolio-img img{width:100%;}


.qc-circle-grid-portfolio-img {
	position:relative;
    overflow: hidden;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;

}


@keyframes rotateanimation {
    from{
        -moz-transform: rotate(10deg);/* FF3.5+ */
        -webkit-transform: rotate(10deg);/*Saf3.1+, Chrome*/
        -o-transform: rotate(10deg);/* Opera 10.5 */
        -ms-transform: rotate(10deg);/* IE 9 */
        transform: rotate(10deg);
    }
    80%{
        -moz-transform: rotate(-10deg);/* FF3.5+ */
        -webkit-transform: rotate(-10deg);/*Saf3.1+, Chrome*/
        -o-transform: rotate(-10deg);/* Opera 10.5 */
        -ms-transform: rotate(-10deg);/* IE 9 */
        transform: rotate(-10deg);
    }
    90%{
        -moz-transform: rotate(-2deg);/* FF3.5+ */
        -webkit-transform: rotate(-2deg);/*Saf3.1+, Chrome*/
        -o-transform: rotate(-2deg);/* Opera 10.5 */
        -ms-transform: rotate(-2deg);/* IE 9 */
        transform: rotate(-2deg);
    }
    95%{
        -moz-transform: rotate(-8deg);/* FF3.5+ */
        -webkit-transform: rotate(-8deg);/*Saf3.1+, Chrome*/
        -o-transform: rotate(-8deg);/* Opera 10.5 */
        -ms-transform: rotate(-8deg);/* IE 9 */
        transform: rotate(-8deg);
    }
    to{
        -moz-transform: rotate(0deg);/* FF3.5+ */
        -webkit-transform: rotate(0deg);/*Saf3.1+, Chrome*/
        -o-transform: rotate(0deg);/* Opera 10.5 */
        -ms-transform: rotate(0deg);/* IE 9 */
        transform: rotate(0deg);
    }
}




.qc-circle-grid-portfolio-button {
    box-sizing: border-box;
    display: table;
    width: 100%;
    height: 100%;
}

.qc-circle-grid-portfolio-item img {
    display: block;
    transition: all 0.5s linear;
	margin: 0 auto;
}


.qc-circle-grid-portfolio-item:hover .qc-circle-grid-portfolio-img img{
	transform: scale(1.06);
	-moz-transform: scale(1.06);
	-webkit-transform: scale(1.06);
	-ms-transform:scale(1.1); /* IE 9 */
    -o-transform:scale(1.1); /* Opera */
	cursor: pointer;
	box-sizing: border-box;	
	
}


/* Hover Button Style */

.qc-circle-grid-portfolio-hover-effect {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
text-align: center;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
border-radius: 50%;
background-color: #ddd9;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
display: none;

}
.ilist-title-area h2{align-self: center;}
.ilist-title-area{align-self: center;}
.qc-circle-grid-portfolio-hover-effect-button {
    box-sizing: border-box;
    display: table;
    width: 100%;
    height: 100%;
}



.qc-circle-grid-portfolio-item:hover .qc-circle-grid-portfolio-hover-effect{
	display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
display: flex;
    justify-content: center;
}
.qc-circle-grid-portfolio-hover-effect{
	
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}




/* Responsive Styles */


@media screen and (max-width: 767px) {
    .qc-circle-grid-portfolio-item, .column3 .qc-circle-grid-portfolio-item, .column4 .qc-circle-grid-portfolio-item{
        width: 50%;
		border-radius:0px;
    }
	.qc-circle-grid-portfolio-hover-effect {
		border-radius:0px;
	}
	
}

@media screen and (max-width: 500px) {
    .portfolio-container {
        text-align: center;
    }

    .qc-circle-grid-portfolio-item, .column2 .qc-circle-grid-portfolio-item, .column3 .qc-circle-grid-portfolio-item, .column4 .qc-circle-grid-portfolio-item {
        width: 100%;
        max-width: 360px;
        margin: 10px auto;
        float: none;
        text-align: center;
		border-radius:0px;
    }
	.qc-circle-grid-portfolio-hover-effect {
		border-radius:0px;
	}

}
@media screen and (min-width: 767px) and (max-width: 900px) {
    .column4 .qc-circle-grid-portfolio-item {
        width: 33.33%;
		border-radius:0px;
    }
	.qc-circle-grid-portfolio-hover-effect {
		border-radius:0px;
	}
}