/* ********************************************************** */
/* ********************* MEMORIAM *************************** */

#memoriam{
display: block;
width: 100%;
height: calc(100vh - 60px);
background: url(../img/ice2.jpg);
color: #ede9dd;
color: #333;

/* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
	
}

#memoriam h1 {
font-size: 44px;
margin: 20px auto;
text-align: center;
color: rgba(38,66,82,1);
}

.floatingNick{ width: 50%; float: right; margin-top: 110px;}
.floatingNick img{width: 100%;}


#floatingInfo {
width: 100%;
margin: auto;
padding: 40px 0;
position: absolute;
bottom: 0;
background: linear-gradient(to right, rgba(38,66,82,.75), rgba(38,66,82,.85), rgba(38,66,82,.95), rgba(38,66,82,1), rgba(38,66,82,1));
}

#floatingInfo p{
width: 90%;
margin: 20px auto;
}

#floatingInfo .btn{
width: 300px;
margin: auto;
}

#books{
background: #777;
}

.photos{
background: #777;
}


#books h1{
text-align: center;
}

.bookOne, .bookTwo, .bookThree, .photoOne, .photoTwo, .photoThree {
display: inline-block;
width: 30%;
margin: 20px 0 40px 2.5%;
text-align: center;
}

.bookImg {
	max-width: 94%;
}


@media screen and (max-width: 1200px) { 
.floatingNick{ width: 60%; float: right; margin-top: 135px;}
}

@media screen and (max-width: 750px) { 
#memoriam h1 {
font-size: 34px;
}
.floatingNick{ width: 80%; float: right; margin-top: 65
	px;}
#floatingInfo {background: linear-gradient(to right, rgba(38,66,82,.85), rgba(38,66,82,.95), rgba(38,66,82,1), rgba(38,66,82,1), rgba(38,66,82,1));}
}

@media screen and (max-width: 550px) { 
#memoriam h1 {
font-size: 26px;
}
.floatingNick{ width: 80%; float: right; margin-top: 60px;}
}

@media screen and (max-width: 450px) { 
#memoriam h1 {
font-size: 22px;
}
}