*, *::after, *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}


[class^='col-'] {
	float: left;
}

.col-4of12{
	width:33.3%;
}

.col-2of12 {
	width: 16.6%;
}

.col-6of12 {
	width: 50%;
}

.col-3of12 {
	width: 25%;
}


.col-12of12 {
	width: 100%;
}

.col-2of12.blank{
	
}

.grid::after {
	content: "";
	display: block;
	clear: both;
}

.col-8of12{
	/*float: left;*/
	width: 66%;
}


.col-2of12{
	float: left;
	width: 16.6%;
}



@media (max-width: 32em) {
	.col-2of12{
		width: 30%;
	}	
}



@media (max-width: 60em) {
	.col-3of12{
		width: 50%;
	}	
	.centerName{
		top: 30%;
	}
	.centerRole{
		top: 40%;
	}
	.portfolioImg {
	    margin-top: 200px;
	    margin-bottom: 200px;
	}

	.project-description {
    	margin: 1rem 4%;
	}

	.role-tools-team {
   		margin: 5rem 4% 10rem 4%;

	}

	.Name {
		top: 10%;
		left: 5%;
		max-width: 18rem;
	}

	.i-do-design {
		top: 47%;
		left: 25%;

	}

	.project-1 {
		max-width: 7rem;
    	top: 25%;
    	left: 70%;

	}

	.project-2 {
		max-width: 7rem;
    	top: 45%;
    	left: 53%;

	}

	.project-3 {
		max-width: 7rem;
    	top: 65%;
    	left: 70%;

	}

	.more{
		max-width: 4rem;
    	left: 85.15%;
    	top: 50%;
	}

	.about-page {
		margin: 2rem 3%;
	}

	.about {
		margin: 2rem 1rem;
	}

	.link {
		margin-left: 1rem;
	}

	.aboutPic{
		max-width: 70%;
	}

	.back-arrow {
		margin-bottom: 0.7rem;
		margin-right: 2rem;
	}



}

@media (max-width: 30em) {
	.col-3of12{
		width: 100%;
	}	

	.centerName{
		top: 15%;
		font-size: 33px;
	}

	.centerRole{
		top: 25%;
	}

	.col-6of12{
		width: 100%;
	}

	.col-4of12{
		width: 100%;
		margin-bottom: 1rem;
	}


	.Name {
		top: 5%;
		max-width: 20rem;
	}

	.i-do-design {
		top: 30%;
		left: 40%;

	}

	.project-1 {
		max-width: 7rem;
    	top: 40%;
    	left: 50%;

	}

	.project-1-caption {
		top: 45%;
    	left: 30%;
	}

	.project-2 {
		max-width: 7rem;
    	top: 60%;
    	left: 20%;

	}

	.project-2-caption {
    	top: 80%;
    	left: 10%;
	}


	.project-3 {
		max-width: 7rem;
    	top: 80%;
    	left: 50%;

	}

	.project-3-caption {
    	top: 90%;
    	left: 30%;
	}

	.more{
		max-width: 4rem;
    	left: 82%;
    	top: 70%;
	}

	.moreCaption {
		left: 77%;
    	top: 70%;
	}

	.arrowLeft{
		margin-left: 1rem;

	}

	.arrowRight{
		margin-right: 1rem;
	}

	.col-2of12 {
		max-width: 17%;
	}

	.nearGifTextRight{
    margin-top: 10px;
	}
	
	.nearGifTextLeft{
    margin-top: 10px;
	}


}

@media (max-width: 25em) {

	.Name {
		top: 3%;
		max-width: 70%;
	}

	.i-do-design {
		top: 30%;
		left: 40%;

	}

	.project-1 {
		max-width: 35%;
    	top: 45%;
    	left: 45%;

	}

	.project-2 {
		max-width: 35%;
    	top: 60%;
    	left: 15%;

	}

	.project-3 {
		max-width: 35%;
    	top: 75%;
    	left: 45%;

	}

	.more{
		max-width: 23%;
    	left: 75%;
    	top: 65%;
	}

}