body
{
	font-family:Roboto;
	margin:0;
	background:#efefef;
}

.page {
	width:80%;
	margin:auto;
}

a {
	color:#000;
	text-decoration:none;
}

 a img:hover {
	 transform: scale(1.1); 
	 -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
 }

h1 {
	font-size:50pt;
	text-transform:uppercase;
	font-weight:600;
	margin:10px 0px 0px 0px;
	padding:0px;

}
h2 {
	font-size:26pt;
	color:#4b434b;
	font-family:Roboto;
	text-transform:uppercase;
	margin:0px;
	padding:0px;

}

h3 {
	font-size:18pt;
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
	border-bottom:dotted 2px #4b434b;
	padding-bottom:10px;
	margin: 60px 0px 20px 0px;
}

h4 {
	font-size:12pt;
	text-transform:uppercase;
}

h5 {
	font-size:11pt;
	text-transform:uppercase;
	color:#4b434b;

}

h2.title {
	text-align:center;
	margin-bottom:20px;
}

h2.title span {
	background-color:#000;
	color:#efefef;
	text-align:center;
	padding:10px;
	font-size:26pt;	
	text-align:center;
}

.header .wrapper {
	display:flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

	.header .col {
		flex:1;
		text-align:center;
		text-transform:uppercase;
	}

	.meta {
		font-size:10pt;
		align-items:center;
		text-align:center;
		margin:20px 0px 20px 0px;
	}



.portfolio {
	margin:80px 0px;
}

	.portfolio .wrapper {
		display:flex;
		flex-wrap: wrap;
		gap:40px;
	}

	.portfolio .col {
		flex:1;
	}

	.portfolio .col.logos {
		max-width:33%;
	}
.logos .wrapper {
	gap:10px;
}
.logos img {
	max-width:100%;
	border-radius:50%;
	margin-bottom:20px;
}

.logos img:hover {
	transform: scale(2); 
	-webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
	box-shadow: 1px 1px 3px #000;
	z-index:1;
	
}

.wordpress img {
	max-width:100%;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	border: 1px solid #dfdbdb;
	width:100%!important;
}

.wordpress h4, .wordpress h5 {
	text-align:left;
	margin:0px;
	padding:0px;
	border:0;
}

.wordpress h4 {
	font-size:12pt;
	margin-top:10px;
}

.wrapper .wordpress {
	gap:40px;
}

.wrapper .gallery {
	gap:20px;
	}


.wordpress p {
	font-size:11pt;
	font-weight:normal;
	margin:10px 0px 20px 0px;
}


.ui {
	margin:40px 0px 40px 0px;
}

.ui .wrapper {
	margin-bottom:20px;
}

.work {
}

	.work .wrapper {
		display:flex;
		align-items: start;
		flex-wrap: wrap;
		gap:40px;
	}

	.work .col {
		flex:1;
	}

		.work .col .date {
			max-width:20%;
			color:#4b434b;

		}
	
	.work h4, .work h5 {
		padding:0px;
		margin:0px;
	}

	.work p {
		font-size:10pt;
		padding:0px;
		margin: 0px 0px 30px 0px;
	}

	.work .col .skill {
		max-width:50%;
		width:50%;
		text-align:right;
		padding:10px 20px;
		color:#4b434b;
	}
	
	.work .col .stars {
		max-width:50%;
		width:50%;
		text-align:left;
		padding:10px 20px;

	}

	.work .col .school {
		text-align:center;
		padding:15px 0px;
	}

.top-margin {
	margin-top:40px;
}

.padding {
	padding:0px 40px;
}

.circle {
	display: inline-block;
    background-color: #000;
    border-radius: 50%;
	margin-top:40px;
}

.circle-inner {
  color: white;
  display: table-cell;
  vertical-align: middle; 
  text-align: center;
  text-decoration: none;
  height: 100px;
  width: 100px;  
  font-size: 45px;
}

.star {
	display: inline-block;
    background-color: #000;
    border-radius: 50%;
	height:10px;
	width:10px;
	border:2px solid #000;
	margin-right:10px;

}

.no-star {
	display: inline-block;
    background-color: #efefef;
    border-radius: 50%;
	height:10px;
	width:10px;
	border:2px solid #000;
	margin-right:10px;
}

.graphics img {
	width:100%;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	border: 1px solid #dfdbdb;
}

.margin-bottom {
	margin-bottom:20px;

}

.button {
	border:1px dashed #000;
	width:250px;
	padding:10px;
	margin:20px auto;
}

.button .wrapper {
	display:flex;
	align-items:center;

}

.button .wrapper .col:first-child {
	border-right:1px solid #000;
	padding-right:20px;
	margin-right:10px;
	max-width:25%;
}

.button .wrapper .col {
	flex:1;
	justify-content:center;
	text-align:center;
}

.button svg {
	max-height:40px;
}

.aboutme {
	margin-top:80px;
}

.aboutme .wrapper {
	display:flex;
	gap:20px;
}

.aboutme h3 {
	border:0px;
	margin:0px;
	padding:0px;
}

.aboutme h4 {
	margin:0px;
	padding:0px;
	color:#4b434b;
	text-align:center;
}

.aboutme img {
	width:200px;
	border-radius:50%;
	margin:20px auto 0px auto;
	box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
	border: 1px solid #dfdbdb;
}

.aboutme .wrapper .col:first-child {
	align-items:center;
	text-align:center;
}

.aboutme .wrapper .col {
	flex:1;
		justify-content:center;
	align-items:center;
	text-align:center;
}

.aboutme .wrapper {
	margin-top:40px;
	justify-content:center;
	align-items:center;
}
.footer {
	background:#000;
	color:#efefef;
	width:100%;
	text-align:center;
	padding:40px 0px;
	text-transform:uppercase;
	font-size:8pt;
	min-width:100%;
	margin-top:60px;
}

	.footer a {
		color:#efefef;
	}

	.footer .circle {
		display: inline-block;
		background-color: #efefef;
		border-radius: 50%;
		margin-top:0px;
	}

	.footer .circle-inner {
		color: black;
		display: table-cell;
		vertical-align: middle; 
		text-align: center;
		text-decoration: none;
		height: 50px;
		width: 50px;  
		font-size: 25px;
	}


	.footer .wrapper {
		display:flex;
		justify-content:center;
		align-items:center;
		gap:5px;
	}

	.footer .padding {
		width:80%;
		margin:auto;
	}
		.footer .wrapper .col {
			flex:1;
			align-items:center;
			gap:6px;
		}
	

@media (max-width:1000px) {

  .col, .wrapper {
	  width:100%;
	  max-width:100%;
	  display:block;
  }

  .portfolio .wrapper {
	  display:block;
  }

  .mobile-flex {
	   display:flex!important;
  }

  .mobile-flex .col {
	  max-width:50%;

  }

  .wordpress img, .wordpress {
	  width:100%;
  }

.gallery .col, .portfolio .wrapper .gallery {
        display: flex;
;
    }

	.gallery .wrapper {
		display:flex;
		width:100%;
	}

.resume .wrapper .col, .resume .wrapper {
	width:100%;
	display:block;
}

.work .col .skill, .work .col .stars {
    max-width: 100%;
    width: 100%;
    text-align: center;
    color: #4b434b;
	display:block;
}

.work .col .date {
max-width:100%;
}

.graphics img {
	margin-bottom:20px;
}

.chunk {
	    margin-bottom: 20px;
        border-bottom: 1px solid gray;
        padding-bottom: 20px;

}

h1 {
	font-size:36pt;
	font-family:Roboto!important;

}

.portfolio {
	margin:40px 0px;
}

.portfolio .col.logos {
    max-width: 100%;
}

.circle {
	margin-top:20px;
}

.header .star {
	display: none;
}

.aboutme .wrapper {
	flex:none;
	display:block;
}

.work .wrapper {
	display:block;
}

.meta {
	font-weight:bold;
}

.footer .wrapper .col, .footer .wrapper {
	flex:none;
	display:block;
}

.footer .wrapper .col {
	margin-bottom:10px;
}

.footer .circle {
	margin:20px 0px;
}
}