@media only screen  and (max-width: 1200px) {
	  .col-3  {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
      }

}

@media only screen  and (max-width: 1200px) {
	  .col-3  {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
      }

}

@media only screen and (max-width: 1000px) {
	.wrapper {
		  width: auto;
	}
}

@media only screen and (max-width: 900px) {
	  
	 .pageBorder {
		margin-right: 100px;
		margin-left: 100px;
	}
}

@media only screen and (max-width: 600px) {
	.resume {
		font-size: 12px;
	}
	.pageTitle {
		font-size: 20px;
	}
	
	h2 {
		font-size: 20px;
	}
	
	p {
		font-size: 12px;
	}
	.pageBorder {
		margin-right: 50px;
		margin-left: 50px;
	}
	.col-3  {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
      }
	
 .navbar nav a {
    /* hide all the top navbar links */
    display: none;
  }

  .navbar nav a.hamburger-icon {
	/* display the hamburger icon */
    display: block;
    float: right;
    font-size: 1.5em;
    padding: 10px 20px;
    width: auto;
  }

}

@media screen and (max-width: 598px) {
	.menu a:not(:first-child) {display: none;}
	.menu a.hamburger-icon {
			float: right;
			display: block;
	}

	.navbar.responsive {position: relative; }
	.menu.responsive {position: absolute; background: white;}
 /* .menu.responsive {position: relative;}*/
  .menu.responsive .hamburger-icon {
    position: absolute;
    right: 0;
    top: 0;
	display: none;
  }
  .menu.responsive a {
    float: none;
    display: block;
    text-align: left;
	width: 100%;
	margin-left: 6px;
  }
}
/* creating this because if it breaks, I can just delete it and */
/* start again with the 600px media that works */

/*this sort of works but I cannot get the nav hamburger back, nor can I get */
/*the menu to disappear.  Also the highlight on the first child includes the /*
/*unused portion of the line for the hamburger.  If I push the hamburger to the */
/*bottom then I can get the highlight correct.  */

/* I need to try :
   1.  hide the hamburger
   2.  put this into the javascript on.documentReady as it was ... it may
        help considering we're toggling the class
		
*/
@media only screen and (max-width: 200px) {
	
	.navbar nav a.hamburger-icon {
		/* display the hamburger icon */
		display: block;
		font-size: 1.5em;
		padding: 10px 20px;
		width: auto;
	}
	
	nav.menu {
		width: 150px;
		/*100% of viewport height - 121px */
		min-height: calc(100vh - 121px);
		background-color: #2813F5;
		/* absolute is positioned relative to its parent */
		position: absolute;
		float: right;
		right: -150px;
		transition: .3s all;

	
	}
	/* display: block makes all links print vertically */
	/*  Also transforms text to all uppercase */
	nav.menu > a {
		display: block;
		padding: 3px;
		margin: 15px 0 0px 20px;
		color: white;
		text-transform: uppercase;
		border-right: none;
		border-left: none;
		background-color: #2813F5;
	}
	
	.navbar nav a {
		width: 75%;
	}
}