html {
	font-size: 16px;
}

body {
	margin: 0;
	padding: 0;
	font-family: "Raleway", serif;
	color: rgb(0, 0, 0);
	line-height: 1.6;
}

.container {
	width: 100%;
	top: 0;
	margin: 0 auto;
	position: fixed;
	z-index: 10;
}

header {
	background: rgba(255, 255, 224, 0.7);
	/*background: #55d6aa;*/
	font-family: "Raleway", sans-serif;
	font-weight: 900;
	height: 70px;
	box-shadow: 0px 4px 8px 0px #616161;
}
@media (max-width: 1150px){
	header{ height: 140px;  }
}
#latePeriodMenu{
	display: none; 
}
@media (min-width: 800px){
	#latePeriodMenu{ display: block; }
}

/* clearfix hack */
header::after {
	content: "";
	clear: both;
	display: table;
}

.logo {
	float: left;
	width: 105px;
	margin-left: 20px;
	margin-top: 5px;
}

.name {
	font-family: "Homemade Apple", sans-serif;
	float: left;
	margin-top: 20px;
	margin-left: 15px;
	font-size: 1.5rem;
	color: #1e1e24;
	letter-spacing: 0;
	text-shadow: 0 2px #616161;
}

nav {
	float: right;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li {
	float: left;
	margin-left: 25px;
	margin-right: 25px;
	padding-top: 10px;
	position: relative;
	text-align: center;
}

nav a {
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 900;
	color: #000;

}

nav a:hover {
	color: rgba(0, 130, 170, 1);
}

nav a::before {
	content: "";
	display: block;
	height: 6px;
	top: 0;
	width: 0%;
	background-color: rgba(0, 130, 170, 1);
	position: absolute;
	transition: width ease-in-out 250ms;
	/* navbar links animation, width increases from 0 to 100% */
}

nav a:hover::before {
	width: 100%;
}

.entry {
	position: relative;
	max-width: 100%;
	height: 800px;
	background: linear-gradient(rgba(0, 130, 170, 0), rgba(0, 130, 170, 1)), url('../image/ag.jpg');
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
}


blockquote {
	position: absolute;
	left: 40px;
	top: 250px;
	font-size: 1.25em;
	width: 40%;
	min-width: 320px;
	margin: 25px auto;
	padding: 1.2em 30px 1.2em 75px;
	border-left: 8px solid #78C0A8;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	line-height: 1.6;
	background: rgba(255, 255, 224, 0.5);
}


blockquote::before {
	font-family: 'Lora', sans-serif;
	content: "\201C";
	color: #78C0A8;
	font-size: 6rem;
	position: absolute;
	left: 10px;
	top: -10px;
}

blockquote span {
	text-transform: none;
	display: block;
	font-family: 'Homemade Apple', sans-serif;
	margin-top: 15px;
	margin-left: 50px;
}

p {
	font-size: 1.2rem;
}

p::selection,
p span::selection,
p~span::selection {
	background-color: #ffeb3b;
}

.card {
	max-width: 100%;
	background-image: url("https://picsum.photos/1080?image=1021&blur=1");
	background-blend-mode: luminosity;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	padding: 40px;
}

.card-content {
	background: linear-gradient(130deg, rgba(0, 188, 212, .30),
		#4766c8, rgba(100, 48, 148, .30));
	padding: 40px;
	box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.75);
	border-radius: 5px;
	box-sizing: border-box;
	position: relative;
	top: 30px;
}

.inline-image {
	margin: 10px 15px;
	height: 250px;
}

.image-border {
	border: 2px groove #ddd;
	box-shadow: 0px 4px 10px 0 rgb(220, 220, 220);
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.bibliography {
	padding-top: 75px;
	display: grid;
	align-items: center;
	justify-content: center;
}

.bibliography table tr:nth-child(odd) {
	background-color: rgba(225, 225, 225, 0.9)
}

.bibliography table tr:nth-child(even) {
	background-color: rgba(225, 225, 225, 20)
}

.bibliography h3 {
	text-align: center;
}

/*First letters of paragraphs. Pseudo element */
section p::first-letter {
	font-family: "Homemade Apple", sans-serif;
	font-size: 3em;
	margin: 5px 5px 0px 0px;
	padding-left: 5px;
	max-height: 100%;
	max-width: 100%;
}

td {
	border: 1px solid rgba(255, 246, 239, 1);
	padding: 10px 15px;
}

h2 {
	font-family: 'Lora', sans-serif;
	font-size: 3rem;
	text-align: center;
	margin: 0 auto;
}

h3 {
	font-family: 'Lora', sans-serif;
	font-size: 2rem;
}

h3+ul {
	font-size: 1.2rem;
}

.mytable {
	border-collapse: collapse;
	font-size: 1.2rem;

}

.mytable img {
	width: 100px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
	transition: transform 200ms;
}

.mytable img:hover {
	box-shadow: 0px 15px 60px rgba(0, 0, 0, 0.25);
	transform: scale(1.1);
}

/* Simple Grid Container for 3 quote */

.grid-container {
	display: grid;
	grid-gap: 1.5rem;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(1, 1fr);
	text-align: center;
	padding: 2rem;
	place-items: center;
}

.box {
	background: rgba(0, 188, 212, .5);
	padding: 2rem;
	border-radius: 5px;
	box-shadow: 0px 15px 60px rgba(0, 0, 0, 0.75);
}

#best-quotes h2 {
 margin-top: 30px;
}

span {
	text-transform: uppercase;
	font-style: italic;

}

footer {
	max-width: 100%;
	height: 30px;
	background-color: rgba(0, 188, 212, 1);

}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline ul li {
  list-style-type: none;
  padding: 50px 0;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #fff;
}

.timeline ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: inherit;
}

.timeline ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 15px;
  background: #F45B69;
}

.timeline ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ul li:nth-child(odd) div {
  left: 45px;
}

.timeline ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #F45B69 transparent transparent;
}

.timeline ul li:nth-child(even) div {
  left: -439px;
}

@media (max-width: 700px){
  .timeline ul li:nth-child(even) div {
  left: -239px;
  width: 200px;
  }
}


@media (max-width: 900px){
  .timeline ul li:nth-child(even) div {
  left: -200px;
  width: 150px;
  }
}


@media (max-width: 700px){
  .timeline ul li:nth-child(odd) div {
  width: 200px;
  }
}


@media (max-width: 900px){
  .timeline ul li:nth-child(odd) div {
  width: 150px;
  }
}


.timeline ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #F45B69;
}

time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}



} 

*{ box-sizing: border-box; }
/*
body{
    background: #F0F0F0;
    margin: 0;
}*/

head{
  position: fixed;
  opacity: 0;
  transition: opacity 2s;
  left: 0;
  top: 0;
  width: 100%;
  z-index:10;

}
gallery{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    width: 100%;
    max-width: 800px;
    margin: 25px auto;
    transform: rot(-45deg);
}

gallery img{
    display: block;
    box-shadow: -1px 0px 0px rgba(0,0,0,0.06);
    width: 100%;
    padding: 5px;
}

header img{
   width: 100%;
   max-width: 800px;
   margin: 5px auto;
   padding:5px;
   display: block;
}