/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

body {color: brown;background: url("../homepage-images/paper-background-purple.jpg");}

body.home {color: #b8d1ed; background: url("../homepage-images/watercolor-background-color.png") top center no-repeat, url("../homepage-images/paper-background.jpg") top center repeat;
background-size:100%, auto;}



a {transition:.5s;}
p {font-family: "brevia", sans-serif;
	font-weight: 400;font-style: normal;
	color:#1c51a1;font-size:25px;}



/*----footer-------*/

div.footer {background-color: #e6e1f0;}
div.footer p {text-decoration: none;font-family:shantell-sans-variable, sans-serif;font-variation-settings:"INFM" 100;font-variation-settings: "ital" 1;
	color:#1c51a1;
	font-size:30px;
	margin: 10px 0px;text-align: left;}
div.footer a {text-decoration: none;font-family:shantell-sans-variable, sans-serif;font-variation-settings:"INFM" 100;font-variation-settings: "BNCE" 62.5;font-variation-settings: "wght" 600;;
	color:#6058ba;
	font-size:30px;
	text-align: center;}
a.backtop 	{margin-top: 30px; padding: 20px 0px;
	text-align: center;
	background: url("../homepage-images/blob-arrow.png") no-repeat bottom;background-size:100%;}
a.backtop:hover {color:#1c51a1;}

div.footer ul {display: inline-block;
	margin: 10px 0px;}
div.footer ul li {float:left; list-style:none;
	padding-right: 30px;}


div.header ul li a {color: #a65479; 
	text-decoration:none;}



a.resume {text-decoration: none;font-family:shantell-sans-variable, sans-serif;
	font-variation-settings:"INFM" 100;font-variation-settings: "BNCE" 62.5;}
a.resume {color:white; 
	font-size:18px; font-weigh: normal;
	text-decoration: none; 
	background:#6058ba; 
	padding:20px 10px;
	margin: 20px;
	border-radius:95px; 
	display: block;
	text-align: center;}
a.resume:hover {background: white; color:#6058ba}

/*HEADER*/
a.onlylogo {display: none;}

div.header a {text-decoration: none;font-family:shantell-sans-variable, sans-serif;
	color:#7fa8d7;
	font-size:20px;
	text-align:center;
	margin-left: 30px;
	margin-top: 20px;
	font-variation-settings:"INFM" 100;font-variation-settings: "BNCE" 62.5;font-variation-settings: "wght" 400;}

a.aboutlink {background:url("../homepage-images/blob-swatch.png") top center no-repeat, url("../homepage-images/person.png") top left no-repeat;; text-align:center; display:block; width:70%; line-height:82px; transition:.5s; background-size:0%, auto;}
a.aboutlink:hover {background:url("../homepage-images/blob-swatch.png") top center no-repeat, url("../homepage-images/person-hover.png") top left no-repeat; background-size: contain,auto; color:#6058ba;}

a.worklink {background:url("../homepage-images/books.png") top left no-repeat; text-align:center; display:block; width:85%; line-height:82px;}
a.worklink:hover {background:url("../homepage-images/blob-circle.png") top center no-repeat, url("../homepage-images/books-hover.png") top left no-repeat; background-size: contain,auto;color:#6058ba; }

a.contactlink {background:url("../homepage-images/mailbox.png") top left no-repeat; text-align:center; display:block; width:80%; line-height:82px;}
a.contactlink:hover {background:url("../homepage-images/blob-splatter.png") top center no-repeat, url("../homepage-images/mailbox-hover.png") top left no-repeat;background-size: contain,auto;color:#6058ba;}


/*CTA*/

div.ctatype {margin-top:150px;}
div.cta h1 {font-family: shantell-sans-variable, sans-serif;
	color:#6058ba;
	font-size:90px;
	line-height: 150px;
	font-weight: normal}
div.homepage {background: url("../homepage-images/sketchpattern.png") top center no-repeat; background-size: 100%, auto;padding-bottom: 220px; margin-top: 30px;}

p.cta {text-decoration: none;font-family:shantell-sans-variable, sans-serif;font-variation-settings:"INFM" 100;font-variation-settings: "ital" 1;
	color:#1c51a1;
	font-size:40px;
	margin: 20px 0px;}
div.ctatype a {text-decoration: none;font-family:shantell-sans-variable, sans-serif;
	font-variation-settings:"INFM" 100;font-variation-settings: "BNCE" 62.5; font-variation-settings: "wght" 300;
	color:#1c51a1;
	font-size:40px;
	display: block;
	padding: 40px 0px;
	text-align: center;
	background: url("../homepage-images/blob-arrow.png") no-repeat bottom;
	background-size:50%; margin-top: 470px;}
div.ctatype a:hover {background:url("../homepage-images/blob-square-2.png")top no-repeat; background-size: 50%; color:#6058ba;}

/*--------ABOUT--------*/

div.headshot {margin-top: 30px;}
div.headshot img {border-radius:50%;}
div.resume {margin-bottom: 20px;}
div.resume p {margin-top: 100px;}

div.title h1 {font-family:shantell-sans-variable, sans-serif;font-variation-settings: "BNCE" 62.5; font-variation-settings: "wght" 600;
	color:#6058ba;
	font-size:99px;
	line-height: 150px;}

div.title span {font-size: 100px; margin: 0px 0px;}
p.about {font-family: "brevia", sans-serif;
	font-weight: 400;font-style: normal;
	color:#1c51a1;font-size:25px;;margin-bottom: 20px;}
div.about a {text-decoration: none;font-family:shantell-sans-variable, sans-serif;
	font-variation-settings:"INFM" 100;font-variation-settings: "BNCE" 62.5; font-variation-settings: "wght" 300;
	color:#1c51a1;
	font-size:40px;
	display: block;
	padding: 40px 0px;
	text-align: center;
	background: url("../homepage-images/blob-arrow.png") no-repeat bottom;
	background-size:70%; margin-top: 40px;}
div.about a:hover {background:url("../homepage-images/blob-square-2.png")top no-repeat; background-size: 95%; color:#6058ba;}


h2.achievements {font-family:shantell-sans-variable, sans-serif;font-variation-settings: "BNCE" 62.5; font-variation-settings: "wght" 500;
	color:#6058ba;
	font-size:70px;
	line-height: 150px;
	text-align: center;}

div.logos {margin-bottom: 30px;}

/*-------GALLERY----------*/

.gallery a {margin: 8px;}
.thumbnails a {display:block; width:100%; padding:10px;background-color:rgba(183,181,228, 1);
 }
.thumbnails a img {width: 100%;}



div.gallery {margin-bottom: 30px;}




.mm-columns { column-width:var 280px; column-gap: 20px;
  --col-width: var(--_col-width, 280px);
  --columns: var(--_columns, 5);
  --gap: var(--_gap, 20px);
  columns: var(--col-width) var(--columns);
  column-gap: var(--gap);
}
.mm-columns__item:not(:last-child) {
  margin-bottom: var(--gap);
}
.mm-columns__img {
  width: 100%;
  height: auto;
}
a {
  cursor: zoom-in;
}



/*-----CONTACT--------*/

div.title h1 {font-size: 120px; margin: 30px 0px;}
ul.social a {image-width: 100%;margin-top: 30px;background-image: none;padding: none}
ul.social a:hover {background: none;}


ul.social {display: inline-block;
	margin: 10px 0px;}
ul.social li {float:left; list-style:none;
	padding-right: 30px;}


ul.social li a {color: #a65479; 
	text-decoration:none;}

form {font-family:shantell-sans-variable, sans-serif;font-variation-settings:"INFM" 100;font-variation-settings: "BNCE" 40;
	color:#1c51a1;
	font-size:30px; }
* {box-sizing: border-box;}

input[type=text], select, textarea { font-family:shantell-sans-variable, sans-serif;font-variation-settings:"INFM" 100;font-variation-settings: "BNCE" 40;
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] { font-family:shantell-sans-variable, sans-serif;font-variation-settings:"INFM" 100;font-variation-settings: "BNCE" 40;
  background-color: #1c51a1;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #6058ba;
}

.form {
  border-radius: 50px;
  background-color:rgba(183,181,228, 0.5);
  padding: 20px;
	margin: 20px 0px;
}

/*submit button*/

.btn {font-family:shantell-sans-variable, sans-serif;font-variation-settings:"INFM" 100;font-variation-settings: "BNCE" 40;
  background-color: #1c51a1;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;}
.btn:hover {background-color: #7fa8d7;}

.modal-window h1 {font-family:shantell-sans-variable, sans-serif;font-variation-settings:"INFM" 100;font-variation-settings: "BNCE" 40;
  color: #1c51a1;}

.modal-window p {font-size: 20px;}

.modal-window {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.25);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  &:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }
  & > div {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em;
    background: white;
  }
  header {
    font-weight: bold;
  }
  h1 {
    font-size: 150%;
    margin: 0 0 15px;
  }
}

.modal-close {
  color: #6058ba;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
  &:hover {
    color: black;
  }
}







/* ----------- HAMBURGER NAV -----------*/



.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgba(183,181,228, 0.8);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {font-family:shantell-sans-variable, sans-serif;
	font-variation-settings:"INFM" 100;font-variation-settings: "BNCE" 62.5; font-variation-settings: "wght" 500;
  padding: 8px;
  text-decoration: none;
  font-size: 46px;
		line-height: 60px;
  color: #6058ba;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #ebe9ff;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}

div.mainlogo span {display:none;}










/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */

@media handheld, only screen and (max-width: 767px) {
	/* ! MOBILE DO NOT ERASE  */

	
	
	body {background-position: center, center;}
	body.home {background-position:center, center;}
	a.onlylogo {display: contents;}
	span.navigationmenu img {width: 29%;}
	div.header {display:none;}
	
	div.homepage {background-position:top; background-size: 115%, auto;padding-top: 6px; margin-top: none;}
	div.homepage a {font-size: 25px;line-height: 3px; margin-top: 250px;background-size: 70%;}
/*	div.ctatype {margin:100px 30px;}*/
	div.mainlogo span {display:contents;}
	div.mainlogo img {margin-left: 7%;}
	div.ctatype {text-align: center;}
	div.cta h1 {font-size:70px;line-height: 130px;text-align:center;}
	div.title h1 {font-size:70px;text-align:center;}
	/*div.ctatype a {font-size:25px;background-size:60%;text-align:center; padding-bottom: 10%; margin-bottom: 0%;}*/
	div.ctatype a:hover {background-size:80%;}
	
/*	div.cta img {width: 80%; margin-left: 10%; margin-top: 0%;}*/
	div.about p {font-size: 20px; line-height: 25px;}
    h2.achievements {font-size: 45px;}
/*	div.logos img {width: 40%; text-align: center; margin-left:30%; display: inline-block}*/
/*	div.social img {width: 10%; text-align: center; margin-left:0%; display: inline-block}*/

	ul.social {padding-right: none;margin: none;}
	div.footer p {font-size: 20px; line-height: 25px;}
	div.footer a {margin-bottom: 30px;}
	div.footer {padding-left: 80px;}

/*----------DONT TOUCH---------------*/
}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}