html{
	scroll-behavior: smooth;
}

.animate-in1{
    -webkit-animation: fadeIn 8s;
    animation: fadeIn 8s;
	animation-timing-function:cubic-bezier(1, 0.04, .92, 0.5);
}

.animate-out1{
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 0;
} 

@-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    50% { opacity: 0; }
	100% {opacity: 1;}
}

@keyframes fadeIn {
    0% { opacity: 0; }
    50% { opacity: 0; }
	100% {opacity: 1;}
} 

.animate-in2{
    -webkit-animation: fadeIn 1s ease-in;
    animation: fadeIn 1s ease-in;
}

.animate-out2{
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
} 

.opening {
  background-color: none;
  position:relative;
  top:200px;
  font-size:120px;
  font-weight:200;
  -webkit-font-smoothing: antialiased;
  -webkit-animation: fadeinout 4s forwards;
  animation: fadeinout 4s forwards;
  text-align:center;
  animation-timing-function:ease-in-out;
  margin:0;
}

#topbutton {
  display: none; 
  position: fixed;
  bottom: 120px;
  right:6%;
  left:94%;
  float:right;
  font-weight:400;
  font-size: 20px;
  text-align:center;
  color: black;
  cursor: pointer;
  text-decoration:none;
}

#topbutton:hover {
	opacity:0.6;
}

.line{
	font-size:30px;
	font-weight:300;
}

.hi{
	font-weight:300;
}

@-webkit-keyframes fadeinout {

  0% {
    opacity: 0;
	z-index:1000;
	display:none;
	background-size:1200px 1200px;
  }

  50% {
    opacity: 1;
	z-index:1000;
	background-size:1200px 1200px;
  }
  
  100%{
	opacity:0;
	z-index:0;
	display:none;
	background-size:1200px 1200px;
  }
}

@keyframes fadeinout {

  0% {
    opacity: 0;
	z-index:1000;
	display:none;
	background-size:1200px 1200px;
	height:0;
  }

  50% {
    opacity: 1;
	z-index:1000;
	background-size:1200px 1200px;
	height:0;
  }
  
  100% {
	opacity:0;
	z-index:0;
	display:none;
	background-size:1200px 1200px;
	height:0;
  }
} 

body{
	background-color:#f7f2ec;
	color:black;
	font-family: "Avenir Next";
	line-height:1.6em;
	margin:0;
}

body::-webkit-scrollbar{
	display:none;
}

.container{
	width:85%;
	margin:auto;
	overflow:hidden;

}

#background-wrap{
	bottom:0;
	left:0;
	padding-top:50px;
	position:fixed;
	right:0;
	top:0;
	z-index:-1;
}

@-webkit-keyframes animateCloud{
	0%{margin-left:-1000px;}
	100%{margin-left:100%;}
}

@keyframes animateCloud{
	0%{margin-left:-1000px;}
	100%{margin-left:100%;}
}

.x1{
	animation:animateCloud 40s linear infinite;
	transform:scale(0.1);
}

.x2{
	animation:animateCloud 20s linear infinite;
	transform:scale(0.3);
}

.x3{
	animation:animateCloud 32s linear infinite;
	transform:scale(0.4);
}

.x4{
	animation:animateCloud 26s linear infinite;
	transform:scale(0.2);
}

.x5{
	animation:animateCloud 55s linear infinite;
	transform:scale(0.65);
}

.x6{
	animation:animateCloud 20s linear infinite;
	transform:scale(0.45);
}

.cloud{
	background:white;
	background:linear-gradient(top,white 5%, #f1f1f1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='white',endColorstr='#f1f1f1',GradientType=0);
	border-radius:100px;
	box-shadow:0 8px 5px rgba(0,0,0,0.3);
	height:120px;
	position:relative;
	width:350px;
}

.cloud:after, .cloud:before{
	background:white;
	content:'';
	position:absolute;
	z-index:-1;
}

.cloud:after{
	border-radius:100px;
	height:100px;
	left:50px;
	top:-50px;
	width:100px;
}

.cloud:before{
	border-radius:200px;
	height:180px;
	width:180px;
	right:50px;
	top:-90px;
}

.main-header{
	background-color:none;
	color:black;
	margin-top:40px;
	margin-bottom:40px;

}

.main-header h1{
	font-size:40px;
	margin:0;
	font-style:normal;
	font-family:"Avenir Next";
	font-weight:200;
	font-variant:small-caps;
	float:left;
	vertical-align:middle;
	display:inline-block;
	-webkit-font-smoothing:antialiased;
}

.main-header h1.name{
	float:left;


}

.main-header img{
	float:left;
    object-fit: contain;
    object-position: 0 100%;
	width:80px;
	height:70px;
    /*-webkit-transition: -webkit-transform 1.5s ease-in-out;*/
    animation-duration:4s;
	transition-timing-function: linear;
	animation-iteration-count:infinite;
	-webkit-transition: all 4s;
	transition: all 4s;
	padding:0;
	margin:0;
	position:relative;
	top:-25px;
	cursor: pointer;

}

.logo:hover{
	animation-direction:alternate;
	transform: rotate(360deg);
	transition-timing-function: linear;
	transition: all 4s;
	-webkit-transition: all 4s;
}

/*#main-header img:hover{
     -webkit-transform: rotate(60deg);
     transform: rotate(360deg);
	 animation:rotation 8s infinite linear;
} */

/*@keyframes rotation{
	from{
		transform:rotate(0deg);
	}
	to{
		transform:rotate(359deg);
	}
} */

#navbar{
	margin:0;
	padding:0;
	background-color:none;
	color:black;
	float:right;
	font-weight:200;
	font-variant:small-caps;
	display:inline-block;
	-webkit-font-smoothing: antialiased;
}

#navbar ul{
	margin:0;
	padding:0;
	list-style:none;
	float:right;
	word-spacing:2.5em;

}


#navbar li{
	display:inline;
}

#navbar a{
	color:black;
	text-decoration:none;
	font-size:20px;
}

#navbar a:hover{
	opacity:.6;
}

.currentlink{
	color:black;
	font-weight:400;
}

#showcase{
	clear:both;
	background-color:none;
	background-position: center right;
	text-align:center;
}

#showcase h1{
	color:black;
	font-size:80px;
	line-height:1.3em;
	text-align:left;
	position:relative;
	top:-40px;
	word-spacing:0;
	font-family:'Avenir Next';
	font-weight:300;
}

#showcase h2{
	color:black;
	font-size:60px;
	line-height:1.3em;
	text-align:left;
	position:relative;
	top:-110px;
	font-weight:300;
}

#showcase li{
	display:inline-block;
}

#showcase h1 a{
	/*color:#000;*/
	text-decoration:none;
	font-size:80px;
	/*background-image:url("../Jon has a nikon/jonbday[edit].jpg");*/
	-webkit-background-clip:text;
	-moz-background-clip:text;
	background-clip:text;
	color:transparent;
}

#showcase h2 a{
	color:#000000;
	text-decoration:none;
	font-size:60px;
	/*background-image:url("../Jon has a nikon/lights[edit].jpg");*/
	-webkit-background-clip:text;
	-moz-background-clip:text;
	background-clip:text;
	color:transparent;
}

#showcase h1 a:hover{
	color:#D94141;
}

#showcase h2 a:hover{
	opacity:.7;
	}

/*.case{
	position:relative;
	text-align:center;
	color:white;
	border-style:solid;
	border-color:red;
	background-color:#f7f2ec;
	text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.6);
	font-variant:small-caps;
	font-weight:400;
	border-style:solid;
	border-color:red;
	height:800px;
}*/

.About{
	clear:both;
	position:relative;
	text-align:center;
	border-radius:15px;
	width:46.5%;
	max-height:100%;
	float:left;
	margin-top:20px;
	text-decoration:none;
	color:white;
	font-size:50px;
	transition-duration: .4s;
	transition-timing-function:ease-in-out;


}

.Images{
	position:relative;
	text-align:center;
	border-radius:15px;
	width:46.5%;
	max-height:100%;
	float:right;
	margin-top:20px;
	text-decoration:none;
	color:white;
	font-size:50px;
	transition-duration: .4s;
	transition-timing-function:ease-in-out;
	text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.6);
	font-variant:small-caps;
	font-weight:400;

}

.centered{
	position:absolute;
	bottom:50%;
	right:50%;
	transform: translate(50%, 50%);
} 

.center{
	position:absolute;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
} 

.About a{
	text-decoration:none;
	text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.6);
	font-variant:small-caps;
	font-weight:400;
	color:white;
} 

.Images a{
	text-decoration:none;
	text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.6);
	font-variant:small-caps;
	font-weight:400;
	color:white;
} 

.About img{
	width: 570px;
    height: 550px;
    object-fit: cover;
	object-position: 0px 10%;
	border-radius:15px;
	margin:0;
	float:left;
}

.Images img{
    width: 570px;
  	height: 550px;
    object-fit: cover;
	object-position:-140px 50%;
	border-radius:15px;
	margin:0;
	float:right;
}

.About:hover{
	transform: translateY(-20px);
	opacity:0.9;
}

.Images:hover{
	transform: translateY(-20px);
	opacity:0.9;
} 

.Explanation{
	clear:both;
	padding-top:30px;
	margin-bottom:40px;
}

.Explanation h1{
	font-weight:500;
}


#main-footer{
	background:black;
	color:white;
	text-align:center;
	padding:20px;
	box-sizing:border-box;
	margin-bottom:0;
}

.fa {
  padding:10px;
  font-size: 100px;
  width: 20px;
  text-align: center;
  text-decoration: none;
}

.fa:hover {
  opacity: 0.7;
  transform: translateY(0.5px);
}

.fa-instagram {
  background: none;
  color: white;

}

.fa-linkedin {
  background: none;
  color: white;
}

.fa-envelope {
  background: none;
  color: white;
}

.tiktok {
  background: none;
  color: white;
  padding:10px;
}

.tiktok:hover {
  opacity:0.7;
}


.biopic1{
	clear:both;
	border-radius:15px;
	width:46.5%;
	max-height:100%;
	float:left;
	margin-top:20px;

}

.biopic2{
	border-radius:15px;
	width:46.5%;
	max-height:100%;
	float:right;
	margin-top:20px;

}

.biopic1 img{
	width:570px;
	height:370px;
	object-fit:cover;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
	margin:0;
}

.biopic2 img{
	width:570px;
	height:370px;
	object-fit:cover;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
	margin:0;
} 

.aboutshowcase{
	clear:both;
	background-color:none;
	background-position: center right;
	text-align:center;
	padding-top:30px;
	margin-bottom:20px;
}

.aboutshowcase p{
	color:black;
	font-size:30px;
	line-height:1.3em;
	text-align:left;
	position:relative;
	top:-40px;
	word-spacing:0;
	font-family:'Avenir Next';
	font-weight:200;
	-webkit-font-smoothing: antialiased;
}

.aboutshowcase h2{
	color:black;
	font-size:20px;
	line-height:1.3em;
	word-spacing:0;
	font-family:'Avenir Next';
	font-weight:400;
}

.aboutshowcase b{
	font-weight:400;
}

.aboutshowcase li{
	display:inline-block;
}

.aboutshowcase a.email{
	text-decoration:none;
	color:#94cdff;
}

.aboutshowcase a.email:hover;{
	opacity:.6;
}

.aboutshowcase a.cornell{
	text-decoration:none;
	color:#B31B1B;
}

.aboutshowcase a.cornell:hover{
	opacity:.6;
}

.aboutshowcase a.spotify{
	text-decoration:none;
	color:#5cd65c;
}

.aboutshowcase a.spotify:hover{
	opacity:.6;
}

.aboutshowcase a.CIAS{
	text-decoration:none;
	color:#ff944d;
}

.aboutshowcase a.CIAS:hover{
	opacity:.6;
}

.aboutshowcase a.BMES{
	text-decoration:none;
	color:#1aa3ff;
}

.aboutshowcase a.BMES:hover{
	opacity:.6;
}

#resumeshowcase1{
	clear:both;
	background-color:none;
	background-position: center right;
	height:450px;
	text-align:center;
	font-family:'Avenir Next';
	font-weight:600;
	font-size:20px;

}

#resumeshowcase1 h1{
	color:black;
	font-size:20px;
	line-height:1.3em;
	text-align:center;
	position:relative;
	top:-40px;
	word-spacing:0;
	font-family:'Avenir Next';
	font-weight:600;
	margin-top:30px;
}

#resumeshowcase2{
	clear:both;
	background-color:none;
	background-position: center right;
	height:300px;
	min-height:100px;
	text-align:center;
}

#resumeshowcase3{
	clear:both;
	background-color:none;
	background-position: center right;
	text-align:center;

}

#resumeshowcase4{
	clear:both;
	background-color:none;
	background-position: center right;
	text-align:center;
	margin-bottom:20px;
}


.section1{
	float:left;
	width:50%;
}


.section2{
	clear:both;
	float:left;
	width:50%;

}

.section3{
	clear:both;
	float:left;
	width:50%;

}

.section4{
	clear:both;
	float:left;
	width:50%;

}

.content1{
	float:right;
	text-align:left;
	width:50%;
	font-size:16px;
	font-weight:400;
	margin-bottom:20px;
}

.content1 h2{
	font-weight:600;
}

.content2{
	float:right;
	text-align:left;
	width:50%;
	margin-bottom:20px;

}

.content2 h2{
	font-weight:600;
}

.content3{
	float:right;
	text-align:left;
	width:50%;
	margin-bottom:20px;

}

.content3 h2{
	font-weight:600;
}

.content4{
	float:right;
	text-align:left;
	width:50%;

}

.content4 h2{
	font-weight:600;
}

.year{
	font-weight:500;
}

#resumeshowcase1 h1.education{
	color:black;
	font-size:40px;
	line-height:1.3em;
	text-align:left;
	position:relative;
	top:-20px;
	word-spacing:0;
	font-family:'Avenir Next';
	font-weight:500;
}

#resumeshowcase2 h1.relevantexp{
	clear:both;
	color:black;
	font-size:40px;
	line-height:1.3em;
	text-align:left;
	position:relative;
	top:-20px;
	word-spacing:0;
	font-family:'Avenir Next';
	font-weight:500;
}

#resumeshowcase3 h1.activities{
	color:black;
	font-size:40px;
	line-height:1.3em;
	text-align:left;
	position:relative;
	top:-20px;
	word-spacing:0;
	font-family:'Avenir Next';
	font-weight:500;
}

#resumeshowcase4 h1.skills{
	color:black;
	font-size:40px;
	line-height:1.3em;
	text-align:left;
	position:relative;
	top:-20px;
	word-spacing:0;
	font-family:'Avenir Next';
	font-weight:500;
}

#resumeshowcase1 h2.Cornell{
	color:black;
	position:relative;
	top:-5px;
	font-size:30px;
	line-height:1.3em;
	text-align:left;
	word-spacing:0;
	font-family:'Avenir Next';
	font-weight:600;
	margin-bottom:0px;
}


.resume1:after{
	content:"";
	display: column;
	clear:both;
}

.resume2:after{
	content:"";
	display: column;
	clear:both;
}

#resumeshowcase1 a.here{
	text-decoration:none;
	color:#c97171;
}

#resumeshowcase1 a.here:hover{
	opacity:.6;
}

#resumeshowcase1 a.cornell{
	text-decoration:none;
	color:#B31B1B;
}

#resumeshowcase1 a.cornell:hover{
	opacity:.6;
}

#resumeshowcase2 a.cwru{
	text-decoration:none;
	color:#00304e;
}

#resumeshowcase2 a.cwru:hover{
	opacity:.6;
}

#resumeshowcase2 a.clinic{
	text-decoration:none;
	color:#01843d;
}

#resumeshowcase2 a.clinic:hover{
	opacity:.6;
}

#resumeshowcase2 a.cmunc{
	text-decoration:none;
	color:#9ca7ac;
}

#resumeshowcase2 a.cmunc:hover{
	opacity:.6;
}

#resumeshowcase2 a.bme2000{
	text-decoration:none;
	color:#f58e8e;
}

#resumeshowcase2 a.bme2000:hover{
	opacity:.6;
}

#resumeshowcase3 a.bmes{
	text-decoration:none;
	color:#156588;
}

#resumeshowcase3 a.bmes:hover{
	opacity:.6;
}

/*@media(max-width:50%){
	#main{
		width:100%;
		float:none;
		}
	#showcase{
		width:100%;
	}

}*/

.Nature{
	clear:both;
	position:relative;
	text-align:center;
	border-radius:15px;
	width:46.5%;
	max-height:100%;
	float:left;
	margin-top:20px;
	text-decoration:none;
	color:white;
	font-size:50px;
	transition-duration: .4s;
	transition-timing-function:ease-in-out;


}

.City{
	position:relative;
	text-align:center;
	border-radius:15px;
	width:46.5%;
	max-height:100%;
	float:right;
	margin-top:20px;
	text-decoration:none;
	color:white;
	font-size:50px;
	transition-duration: .4s;
	transition-timing-function:ease-in-out;
	text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.6);
	font-variant:small-caps;
	font-weight:400;

}

.Nature a{
	text-decoration:none;
	text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.6);
	font-variant:small-caps;
	font-weight:400;
	color:white;
} 

.City a{
	text-decoration:none;
	text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.6);
	font-variant:small-caps;
	font-weight:400;
	color:white;
} 

.Nature img{
	width: 570px;
    height: 550px;
    object-fit: cover;
	object-position: 0px 10%;
	border-radius:15px;
	margin:0;
	float:left;
}

.City img{
    width: 570px;
  	height: 550px;
    object-fit: cover;
	object-position:-140px 50%;
	border-radius:15px;
	margin:0;
	float:right;
}

.Nature:hover{
	transform: translateY(-20px);
	opacity:0.9;
}

.City:hover{
	transform: translateY(-20px);
	opacity:0.9;
} 

input[type=text], input[type=submit] {
  padding: 12px;
  width:100%;
  display: inline-block;
  box-sizing: border-box;
  border-radius:10px;
}

input[type=submit] {
  background-color: black;
  color: white;
  border: none;
  margin-bottom:20px;
}

input[type=submit]:hover {
  opacity: 0.6;
  cursor: pointer;
}

.heading{
	clear:both;
	padding-top:30px;
	text-align:center;
}

.boxcenter{
	width:50%;
	margin:auto;
	margin-bottom:10px;
}

.Nashville{
	clear:both;
	float:left;
	position:relative;
	text-align:center;
	border-radius:15px;
	width:46.5%;
	max-height:100%;
	margin:20px auto 0 auto;
	font-family:'Avenir Next';
}

.Nashville p{
	font-size:20px;
}

.Nashville img{
    width: 570px;
  	height: 550px;
    object-fit: cover;
	object-position:-140px 50%;
	border-radius:15px;
	margin:0;
}

.Nashville h1{
	background-image:url("city background.jpg");
	-webkit-background-clip: text; 
	padding-top:5px;
    -webkit-text-fill-color: transparent;
	background-repeat: repeat;
}

.Caleb{
	clear:none;
	float:right;
	position:relative;
	text-align:center;
	border-radius:15px;
	width:46.5%;
	max-height:100%;
	margin:20px auto 0 auto;
	font-family:'Avenir Next';
}

.Caleb p{
	font-size:20px;
}

.Caleb img{
    width: 570px;
  	height: 550px;
    object-fit: cover;
	object-position:0px 60%;
	border-radius:15px;
	margin:0;
}

.Caleb h1{
	background-image:url("caleb background.jpg");
	-webkit-background-clip: text; 
	padding-top:5px;
    -webkit-text-fill-color: transparent;
	background-repeat: repeat;
}

.here{
	text-decoration:none;
	color:#c97171;
}

.here:hover{
	opacity:0.6;
}

.post{
	clear:both;
	padding:40px 0 40px 0;
	text-align:center;
	font-size:20px;
	margin:auto;
	font-weight:500;
}

.post a{
	text-decoration:none;
	color:#c97171;
	position:center;
}

.post a:hover{
	opacity:0.6;
}

.Trees{
	clear:both;
	position:relative;
	text-align:center;
	float:left;
	border-radius:15px;
	width:46.5%;
	max-height:100%;
	margin:20px auto 0 auto;
	font-family:'Avenir Next';
}

.Trees p{
	font-size:20px;
}

.Trees img{
    width: 570px;
  	height: 550px;
    object-fit: cover;
	object-position:-140px 50%;
	border-radius:15px;
	margin:0;
	padding:0;
}

.Trees h1{
	background-image:url("nature background.jpg");
	padding-top:5px;
	-webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
	background-repeat: repeat;
}

.Moon{
	position:relative;
	text-align:center;
	float:right;
	border-radius:15px;
	width:46.5%;
	max-height:100%;
	margin:20px auto 0 auto;
	font-family:'Avenir Next';
}

.Moon p{
	font-size:20px;
}

.Moon img{
    width: 570px;
  	height: 550px;
    object-fit: cover;
	object-position:-140px 50%;
	border-radius:15px;
	margin:0;
}

.Moon h1{
	background-image:url("moon background.jpg");
	-webkit-background-clip: text; 
	padding-top:5px;
    -webkit-text-fill-color: transparent;
	background-repeat: repeat;
}

@media screen and (max-width: 800px) {
  .About{
    width: 100%;

  }
  .Images img{
  	float:left;
  }
  .Images{
	width: 100%;
  	margin-top:40px;
  }
  
  .Nature{
    width: 100%;

  }
  .City img{
  	float:left;
  }
  .City{
	width: 100%;
  	margin-top:40px;
	text-align:center;
  }

  .opening{
	width:100%;
  }
  .biopic1{
  	width: 100%;
  }
  .biopic2{
	width:100%;
	margin-top:40px;

  }
  .biopic2 img{
	float:left;;
  }
  .section1{
	width:100%;
  }
  .content1{
	width:100%;
	float:left;
	margin-top:-60px;
  }
  .section2{
	width:100%;
  }
  .content2{
	width:100%;
	float:left;
	margin-top:-60px;
  }
  .section3{
	width:100%;
  }
  .content3{
	width:100%;
	float:left;
	margin-top:-60px;
  }
  .section4{
	width:100%;
	margin-top:0;
  }
  .content4{
	width:100%;
	float:left;
	margin-top:-50px;

  }
  .boxcenter{
	width:99%;
  }
  
  .Nashville{
    width:100%;

  }
  
  .Trees{
    width:100%;
  }
  
  .Moon{
	width:100%;
  }
  .Caleb{
	  width:100%;
  }
  
}

@media screen and (max-width: 860px) {
    .main-header h1{
  	  visibility:hidden;
	  display:none;
	  index:-10;
    }
    .logo{
  	  visibility:visible;
    }

    #navbar ul{
      word-spacing:1.5em;
	
    }
    #navbar a{
      font-size:18px;
    }
}

@media screen and (max-width: 526px) {
    .opening{
    	font-size:80px;
    }
	.line{
		font-size:20px;
		line-height:1.2em;
	}
    #navbar ul{
      word-spacing:1em;
	
    }
    #navbar a{
      font-size:14px;
    }
	.aboutshowcase p{
		font-size:20px;
	}
	.aboutshowcase h2{
		font-size:15px;
	}
}

@media screen and (max-width: 400px) {
    .opening{
    	font-size:60px;
    }
	.post{
		font-size:18;
	}
	.Moon img{
		object-position:-280px 50%;
	}
	.Caleb img{
		object-position:-20px 60%;
	}
	
}