@keyframes jumptoptop {
	0% {
		opacity: 0;
		transform: translate(0, -20px);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}

@keyframes jumpdowndown{
	0% {
		opacity: 0;
		transform: translate(0, 20px);
	}
	100% {
		opacity: 1;
		transform: translate(0, 0);
	}
}



/* Every page has these CSS styles */
header {
  box-shadow: 0 1px 5px 0px rgba(70, 70, 70, 0.9);
  width: 100vw;
  z-index:1;
  background-color: white;
  
}

body {
	font-family: 'Indie Flower', cursive;
	margin: 0;
	background-image: url("body2.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: cover;
  overflow-x: hidden;
}

/*
body {
	background-image: url("images/body.png");
	background-attachment: fixed;
	background-position: 0% 0%;
	background-repeat: repeat;
	background-size: cover;
	width: 100vw;
	height: 640px;
	margin: 0 0 20px 0;
}
*/

div.container {
	overflow: hidden;

}

div.logo {
	float: left;
	margin: 24px;
}

div.company.name {
	float: left;
	margin: 24px 12px 24px 12px;
}

img.logo.photo {
	width: 60px;
	height: 60px;
	border-radius: 30px;
}

div.email.calltoaction {
	float: right;
	margin-right: 24px;
}

p.email.calltoaction.message {
	font-size:30px;
	color: #3942d3;
	font-weight: 700;
}

a.email.calltoaction.link {
	font-size:30px;
	color: #c5cccd;
	font-weight: 700;
	text-decoration: none;
}

a.email.calltoaction.link:hover {
	color: #F3B00C;
}

nav.navigation.bar {
  display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: wrap;
}

a.page.link {
	font-size: 30px;
	text-align: center;
	color: #3942d3;
	text-decoration: none;
	font-weight: 400;
	margin: 24px;
}

a.page.link:hover {
	color: #F3B00C;
}

a.logo.link {
	text-decoration: none;
	margin-left: 24px;
}

b.current.page {
	font-size: 30px;
	text-align: center;
	color: #F3B00C;
	font-weight: 800;
	margin: 24px;
}

a.company.link {
	text-decoration: none;
}

b.webname {
	display: inline-block;
	font-size:30px;
	font-family: 'Londrina Sketch', cursive;
	color: #33A9F3;
	font-weight: 700;
	text-decoration: none;
	animation: jumptoptop 1.25s 1s both;

	
}

b.webname.bold {
	display: inline-block;
	font-size:40px;
	font-family: 'Londrina Sketch', cursive;
	color:#8b9192;
	font-weight: 900;
	text-decoration: none;
	animation: jumpdowndown 1.25s 1.5s both;
}

b.webname.dotcom {
  display: inline-block;
	font-size: 28px;
	font-family: 'Londrina Sketch', cursive;
	color: #F3B00C;
	font-weight: 600;
	text-decoration: none;
	animation: jumptoptop 1.25s 2s both;
}

section.post {
	margin: 10px 90px 10px 90px;
	background-color: #f8fbfe;
	background-position: center bottom;
	border-radius: 30px 30px 30px 30px;
	overflow: hidden;
	transform: scale(0.88);
  box-shadow: 0 1px 5px 0px rgba(70, 70, 70, 0.9);
  z-index:1;
}

/*
section.post:hover {
	transform: scale(1.15);
}
*/

/* Styles the post's contents */
div.post.content {
	margin-top: 24px; 
  /*24 divides in 12, 8, 6, 4, 2 (5 times) */
	
}

div.post.userinfo {
 	display: flex;
  margin: 8px auto auto 8px;
	flex-direction: row;
	justify-content: flex-start; 
  /* x direction */
	flex-wrap: wrap;
	align-items: center; 
  /* how every row should behave */
	align-content: space-around;
  border-bottom: 1px solid #dee1e6;
}

img.profile.photo {
  height: 200px;
  width: 200px;
  border-radius: 100px;
  margin-right: 18px;
  margin-bottom: 8px;
  box-shadow: 0 1px 2px 0px rgba(70, 70, 70, 0.9);
  transform: scale(0.8);
}

div.profile.personal {
  line-height: 0.2;
}

p.profile.name {
  font-size: 42px;
  font-weight: 700;
  color: #3a6ce0;
}

p.profile.position {
  font-size: 24px;
  font-weight: 200;
  color: #33A9F3;
}

div.post.messages {
  text-align: left;
  margin: 8px auto 8px 16px;
}

p.post.message {
  font-size: 24px;
  line-height: 1.2;
}

a.post.contact {
	color: #1baa48;
	text-decoration: none;
	border-bottom: 2px solid #f8fbfe;
	transition: border-bottom 0.5s;
}

a.post.contact:hover {
	border-bottom: 2px solid #1baa48;
}

footer.footnote {
	background-color: #f4fdfd;
  box-shadow: 0 1px 5px 0px rgba(70, 70, 70, 0.9);
  z-index:1;
  width: 100vw;
  
}


div.footnote.container.webname {
	background-color: #7b7c7a;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
}

a.footnote.link {
	display: block;
	margin: 24px auto 8px auto;
	text-decoration: none;
}

b.footnote.webname {
	color:#eff8fd;
	
}

b.footnote.webname.bold {
	color:#eff8fd;
}

a.credit.background {
	font-size: 18px;
	color: white;
	text-decoration: none;
	font-weight: 600;
	display: block;
	margin: 8px auto 4px auto;
}
a.email.footer.link {
	font-size: 18px;
	color: white;
	text-decoration: none;
	font-weight: 600;
	display: block;
	margin: 4px auto 4px auto;
}
p.follow.message {
  margin: 4px auto 16px auto;
  font-size: 18px;
	color: white;
  font-weight: 600;
}

a.social.linkedin {
	font-size: 18px;
	color: white;
  background-color: #317bb3ff;
	text-decoration: none;
	font-weight: 800;
  padding: 3px 8px 3px 8px;
  letter-spacing: 3px;
  text-align: center;
	display: inline-block;
  border: 2px solid #317bb3ff;
  border-radius: 5px;
}

/* Tablet & cellphone view */
@media (max-width: 880px) {
  header {
    width: auto;
  }
  div.logo {
		float: none;
		width: auto;
  	display: flex;
		flex-direction: row;
		justify-content: center;
	}

	div.company.name {
		float: none;
  	width: auto;
  	text-align: center;
	}
	div.email.calltoaction {
		float: none;
	}
  
  p.email.calltoaction.message {
		font-size:18px;
  	text-align: center;
	}
  a.email.calltoaction.link {
		font-size:18px;
	}
  section.post {
	margin: 5px;
	}
  a.credit.background {
	font-size: 16px;
}
}

@media (max-width: 600px) {
	div.post.userinfo {
 	display: flex;
	flex-direction: row;
	justify-content: center; 
  /* x direction */
	flex-wrap: wrap;
	align-items: center; 
  /* how every row should behave */
	align-content: space-around;
}
	p.profile.name {
  	font-size: 28px;
	}

	p.profile.position {
  	font-size: 18px;
	}
  
  section.post {
		transform: scale(1);
	}
}