body {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center!important;



}

.topbar {
	background: #272822;
	height: 10px;
	width: 100%;
}
.container {
	text-align: center!important;
	padding-left: 20px;
	padding-right: 20px;

}

.maincontainer {
	text-align: left!important;
	padding-left: 20px;
	padding-right: 20px;
	min-height: 85vh;

}

.logo img {
	display: block;
	margin: auto;
	padding-top: 70px;
	padding-bottom: 50px;
	max-width: 200px;
}

nav {
	margin-bottom: 50px;
	font-size: 14px;

}

p {
	width: 65%;
	color: #666666;
	font-size: 15px;
	margin: 0 auto;
	display: block;

}

li {
	color: #666666;
	font-size: 15px;
}

.field p {
	width: 100%;
	margin: 0;
	padding-bottom: 20px;
	padding-top: 0;
	color: #666666;

}

nav.pagination.is-centered  {
		margin-top: 40px;
		margin-left: 30px;
		margin-right: 30px;
	}

nav.pagination.is-centered a:hover  {
		color: #0099CC;
		border-color: #0099CC;
	}


.nav-left {
	width: 0;
}

.nav-left .nav-item {
	width: 100px;
}

nav.level {
	width: 35%;
}

.nav-item img {
	
	max-height: 52px!important;
}

.nav-menu {
	visibility: hidden;
	width: 0px;
}

label.label {
	text-align: left!important;
}

.navbar-item img { 
	min-height: 75px!important;
	max-width: 75px!important;
	margin-top: 20px!important;



}

a.navbar-item .navbar-link{
}

a.navbar-item:hover {
	color: #0099CC;
}


.grid, .form, .icons {
	margin-top: 100px;

}

.form {
	padding-left: 60px;
	padding-right: 60px;
	margin-left: auto;
	margin-right: auto;
}

.aboutpic img {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	box-shadow: 0 0 25px 2px #0099CC;
	margin: 0 auto;
	display: block;
}

a button.button {
	color: #ffffff;
}




a:hover button.button {
	color: #aaaaaa;


}

button.button {
	background: #0099CC;
}

button.button:hover a {
	color: #FFFFFF;
}

button a {
	color: #FFFFFF;
}

.resumeButton a.button  {
	border-color: #eeeeee;
	color: #eeeeee;
	border-radius: 50%;
	box-shadow: 0 0 25px 2px #0099CC;
	width: 200px;
	height: 200px;
	margin-top: 30px;
}

.progress::-webkit-progress-value {
  background-color: #0099CC;

}



.progress::-webkit-progress-value:hover {
  background-color: #006699;
}


.icons img {
max-height: 300px;

}

.icons p {
	padding-top: 20px;
	padding-bottom: 20px;
}

.socialmedia i {
	font-size: 25px;
}

.socialmedia i:hover {
	color: #0099CC;
}

.skills {
	width: 40%;
	margin: 0 auto;
	padding-top: 55px;
}

.skills h4, .resumeIcon h4 {
	font-size: 20px;
	font-weight: normal;
}

h1 {

	font-size: 50px;
	font-weight: lighter;
	color: #0099CC;
	padding-bottom: 10px;
}

h2 {
	font-size: 30px;
	color: #0099CC;
	padding-bottom: 10px;
	padding-top: 50px;
}

h2:first-child {
	
	padding-top: 0px;

}

h3 {
	font-size: 50px;
	color: #666666;
	padding-bottom: 50px;


}

h4 {

	font-size: 30px;
	font-weight: lighter;
	color: #0099CC;
	padding-bottom: 10px;
}

a h4 {
	color: #0099CC;
	font-size: 25px;
	/*width: 200px;
	height: 200px;
	border-radius: 50%;
	box-shadow: 0 0 25px 2px #0099CC;
	margin: 0 auto;
	padding-top: 75px; */

}

h5 {
	font-size: 25px;
	color: #666666;
	text-align: left;

}

a:hover h4 {
	color: #272822;
}

h4.aboutResume {
	padding-left: 50px
}


a {
	color: #aaaaaa;
}

a:hover {
	color: #6568AA;
}

.resumeIcon i {
	font-size: 100px;
	color: #0099CC;
	padding-top: 50px;
}

.resumeIcon i:hover {
	color: #006699;
}





.nav-item a.is-tab.is-active,
a.nav-item.is-tab.is-active {
  border-bottom: 3px solid #6568AA!important;
  color: #6568AA!important;
}

.nav-item a.is-tab:hover,
a.nav-item.is-tab:hover {
  border-bottom-color: #6568AA!important;
}

footer {
	padding-top: 20px!important;
	margin-top: 20px;
	text-align: center;
	background: #272822;
	box-shadow: 0 0 25px 2px #B6958B;

}



footer p {
	font-size: 14px;
	color: #fff;
	padding-bottom: 10px;
	padding-top: 10px;
	text-align: center;
	width: 100%;
}

footer a {
	color: #fff;
}

footer a:hover {
	color: #aaa;
}


figure img {
	box-shadow: 1px 1px 6px 1px #aaaaaa;
}


.nav-toggle span {
  background-color: #4a4a4a;
  display: block;
  height: 1px;
  left: 50%;
  margin-left: -7px;
  position: absolute;
  top: 50%;
  transition: none 86ms ease-out;
  transition-property: background, left, opacity, transform;
  width: 15px;
}

.nav-toggle span:nth-child(1) {
  margin-top: -6px;
}

.nav-toggle span:nth-child(2) {
  margin-top: -1px;
}

.nav-toggle span:nth-child(3) {
  margin-top: 4px;
}

.nav-toggle:hover {
  background-color: whitesmoke;
}

.nav-toggle.is-active span {
  background-color: #6568AA;
}

.nav-toggle.is-active span:nth-child(1) {
  margin-left: -5px;
  transform: rotate(45deg);
  transform-origin: left top;
}

.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
  margin-left: -5px;
  transform: rotate(-45deg);
  transform-origin: left bottom;
}


/*START MEDIA QUERIES*/


@media screen and (max-width: 768px) {


.navbar-item img { 
	padding-left: none!important;
	margin-left: none!important;


}

a.navbar-item.is-active {
	color: #0099CC;
}


.navbar-brand {
	padding-left: none!important;
	margin-left: none!important;
}

.skills {
	width: 80%;

}

  .logo img {
	padding-top: 5px;
	max-width: 60px;
	position: absolute!important;
	top: -120px!important;
	left: 0!important;
	padding-left: 10px;
	z-index: 10!important;

	}

	h4.aboutResume {
	padding-left: 0;
}

	hr.hr-top {
		visibility: hidden;
		
	}

	hr.hr-home {
		visibility: hidden;
		margin-top: 0!important;

	}

	nav {
		margin-bottom: 30px;
	}


	.nav-menu {
		visibility: visible;
		width: 100%;
		padding-left: 10px;
		opacity: 0.93;

	}

	.nav-menu a {
		padding-top: 30px!important;
		padding-bottom: 30px!important;
		font-size: 25px;
		border: none!important;
		margin: auto;
		display: block;

	}

	.nav-menu a:hover {
		font-size: 26px;
	}

	.nav-menu a.nav-item.is-active {
		color: #6568AA!important;
	  width: 100%;
	  margin: auto;
	}



	h1 {
		font-size: 55px;
		padding-left: 5px;
		padding-right: 5px;
	}

	

	h3 {
	font-size: 37px;
	color: #666666;

	}

	p {
		width: 85%;
		padding-bottom: 20px;
		padding-top: 20px;
		
	}

	.field {
	margin: 10px;

	}

	.form {
	box-shadow: 1px 1px 6px 1px #aaaaaa;
	padding: 10px;
	margin: 20px;

	}

	footer p {
	padding-bottom: 20px!important;
	padding-top: 0!important;
	}

	footer {
		margin-top: 35px;
	}

}