.container {
	width: 100%;
	padding: 5px 15px;
}


.row {
	clear: both;
	padding: 5px;
	margin: .5em auto;
	padding: 10px;
}



/*--------------------------------------------------------------
# Grid for Homepage
--------------------------------------------------------------*/
.portfolio-cell {
  	overflow: hidden;
  	margin-bottom:;
	margin-left: 5px;
	margin-right: 5px;
  	margin-top: 10px;
	position: relative;
}

.portfolio-cell img {
	/* padding: 2.5rem;	*/
	padding:  15px;
	overflow: hidden;
	width: 90%;
	padding: 1px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.img__wrap {
  	position: relative;
	overflow: hidden;
	transition: all .2s ease-in-out;
	width: 100%;
}

.img__description_layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:  rgba(0, 0, 0, .6);
	color: #fff;
	visibility: hidden;
	opacity: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity .2s, visibility .2s;
	overflow: hidden;
	height: 99%;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.img__wrap:hover .img__description_layer {
	visibility: visible;
	opacity: 1;
}

.img__description {
	font-size: 100%;
	transition: all .2s ease-in-out;
	-webkit-transition: font-size .2s;
    -moz-transition: font-size .2s;
    -o-transition: font-size .2s;
    transition: font-size .2s;
}

.img__wrap:hover .img__description {
	font-size: 150%;
}

.img__description {
	font-size: 120%;
	margin: 1em auto;
	text-align: center;
	width: 90%;
}


.contact-cell {
	border-radius: 5px;
  	margin: 1rem;
  	overflow: hidden;
}

.about-cell {
	border-radius: 5px;
  	margin: 1rem;
  	overflow: hidden;
  	padding: 15px;
}


@media screen and (min-width: 600px) {
	.portfolio-grid {
		background: #fff;
    	display: flex;
    	flex-wrap: wrap;
    	flex-direction: row;
		 align-items: center;
        justify-content: center;
		text-align: center;
		max-width: 1250px;
		margin: 3em auto;
  	}

	.portfolio-cell {
    	width: 50%;
  	}

	.contact-grid {
		display: flex;
	    flex-wrap: wrap;
	    flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		margin: 0;
		margin-top: 0;
	}

	.contact-cell {
  		margin: 0 1em;
    	width: 50%;
  }

	.about-grid {
    	display: flex;
    	flex-wrap: wrap;
    	flex-direction: row;
		align-items: left;
		justify-content: flex-start;
  	}

}





@media screen and (min-width: 600px) {
  .portfolio-cell {
    width: calc(50% - 2rem);
  }

   .contact-cell {
    width: calc(50% - 2rem);
  }

   .about-cell {
    width: calc(50% - 2rem);
  }
}



@media screen and (min-width: 1000px) {
	.portfolio-cell {
		width: calc(100% / 3);
	}

	.contact-cell {
		width: calc(100% / 2);
	}

	.about-cell {
		width: calc(100% / 2);
	}
}


@media screen and (min-width: 1200px) {
	.portfolio-cell {
		 	width: calc(100% / 3);
		}


	.contact-cell {
		width: calc(100% / 2);
	}

	.about-cell {
		width: calc(100% / 2);
  	}
}

@media screen and (min-width: 1400px) {
	.portfolio-cell{
   	 	width: calc(100% / 4);
  	}

  	.contact-cell {
  		width: calc(100% / 2)
  	}

  	.about-cell {
  		width: calc(100% / 2)
  	}
}



@media screen and (min-width: 1000px) {
  .portfolio-cell {
    width: calc(30% - 2rem);
  }
	
	.contact-cell {
		width: calc(50% - 2rem);
  	}

  	.about-cell {
		width: calc(50% - 2rem);
  	}

}

@media screen and (min-width: 1200px) {
	.portfolio-cell {
    	width: calc(24% - 2rem);
  	}

  	.contact-cell {
		width: calc(50% - 2rem);
  	}

  	.about-cell {
		width: calc(50% - 2rem);
  	}
}

@media screen and (min-width: 1400px) {
	.portfolio-cell {
    	width: 27.5%;
  	}
}


@media screen and (max-width: 991px) {
	.portfolio-grid {
		background: #fff;
    	display: flex;
    	flex-wrap: wrap;
    	flex-direction: row;
		 align-items: center;
        justify-content: center;
		text-align: center;
		max-width: initial;
		width: 100%;
		margin: 3em auto;
  	}

}


@media screen and (max-width: 768px) {
	
	.portfolio-cell {
    	width: 100%;
    	display:inline-block;
    	float: none;
    	overflow: hidden;
		margin-bottom:;
		margin-left: auto;
		margin-right: auto;
		margin-top: 1em;
		position: relative;
		float: none;
		display: inline-block;
  	}	

  	.portfolio-cell img {
	/* padding: 2.5rem;	*/
		width: 100%;

		max-height: initial;


}
}



 
@media all and (max-width: 768px) {
	
.onerow {
	}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11 {
		float: none;
		width: 99%;
}