h1, h1.pilarz, h2.name{
	 font-family: "Playfair Display", serif;
	 margin-bottom: 1em;
}
 hr {
	 border-top: 1px solid #e5e5e5;
	 width: 70%;
	 margin: 1.5em auto;
}
 #content-body ul li{
	 list-style: none;
	 background-image: none;
	 background-repeat: no-repeat;
	 background-position: 0;
	 padding-left: 0;
}
 .serif, .NewBox > *{
	 font-family: "Playfair Display", serif;
}
 .tiles {
	 display: grid;
	 grid-template-columns: repeat(2, 1fr);
	 grid-template-rows: repeat(6, 1fr);
	 grid-template-areas: "tile1 slider" "tile2 slider" "tile3 slider" "tile4 slider" "tile5 slider" "tile6 slider" "tile7 .";
	 grid-gap: .5em;
}
 .tile, .your-class {
	 max-width: 400px;
}
 .tile {
	 background-color: rgba(228, 220, 203, 0.4);
	 align-self: center;
	 text-align: center;
	 padding: 1.3em;
	 font-size: 1.3em;
	 cursor: pointer;
	 position: relative;
}
 .tile1 {
	 grid-area: tile1;
}
 .tile2 {
	 grid-area: tile2;
}
 .tile3 {
	 grid-area: tile3;
}
 .tile4 {
	 grid-area: tile4;
}
 .tile5 {
	 grid-area: tile5;
}
 .tile6 {
	 grid-area: tile6;
}
 .tile7 {
	 grid-area: tile7;
}
 .your-class{
	 grid-area: slider;
	 align-self: center;
	 justify-self: center;
	 width:100%;
}
 .slick-prev{
	 left:0;
}
 .slick-next{
	 right:0;
}
 .main-link::before {
	 content: " ";
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
}
 .memories, .filter,.social-filter{
	 display: grid;
	 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	 grid-gap: 1em;
	 padding: 0;
}
 .memory{
	 border-radius: 5px;
	 padding: .5em 1.2em;
	 border: 1px solid #e5e5e5;
	 color: black;
	 height: 100%;
}
 .grow:hover{
	 box-shadow: 0 0 5px #e5e5e5;
}
 .affinity{
	 font-size:1em;
}
 .social-filter{
	 margin-bottom: 1em;
}
 span.year{
	 font-style: italic;
	 font-size: 16px;
	 color: black;
	 font-weight: 100;
}
/*Blockquote*/
 .comments{
	 display: grid;
	 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	 grid-gap: .5em;
}
 blockquote {
	 display: grid;
	 font-family: "Playfair Display", serif;
	 background-color: #e5e5e573;
	 margin: 0;
	 padding: 1em;
	 border-radius: 5px;
	 width: 100%;
}
 blockquote > * {
	 grid-column: 2;
}
 blockquote::before {
	 grid-column: 1;
	 content: "“";
	 font-size: 5em;
	 font-weight: bold;
	 line-height: 0.75em;
	 margin-right: 0.1em;
}
 blockquote p {
	 margin: 0.125em 0;
	 text-indent: 2.5em;
}
 blockquote p:first-child {
	 text-indent: 0;
}
 blockquote > :first-child::before {
	 content: "";
}

#toTop {
    background-color:rgba(255, 255, 255, 0.9);
    -webkit-border-top-left-radius: 7px;
        -webkit-border-bottom-left-radius: 7px;
        -moz-border-radius-topleft: 7px;
        -moz-border-radius-bottomleft: 7px;
        border-top-left-radius: 7px;
        border-bottom-left-radius: 7px; 
    padding: 5px 3px;
    position: fixed;
        z-index:9999;
    top:80%;
    right: 8px;
    display: none;
}

/*Clive Form*/
 .clive-field-wrapper .clive-radiobuttons > * + *, .clive-field-wrapper .clive-checkboxes > * + * {
	 margin-left: 0px!important;
}
 .tribute{
	 display: inline-block;
	/*width: 100%;
	*/
}
/*More or Less button */
 .morelink, .tribute .morelink{
	 color: white;
	 padding: 6px 12px;
	 font-size: 14px;
	 font-weight: normal;
	 line-height: 1.42857143;
	 text-align: center;
	 white-space: normal;
	 vertical-align: middle;
	 cursor: pointer;
	 -webkit-user-select: none;
	 -moz-user-select: none;
	 -ms-user-select: none;
	 user-select: none;
	 background-image: none;
	 border: 1px solid transparent;
	 border-radius: 4px;
	 display: block;
	 padding: 5px 0;
	 margin: 0 auto;
	 transition: 2s;
	 margin: 1em auto;
	 transition-timing-function: ease-in-out;
}
 .morelink{
	 width: 30%;
	 background-color:#7c9cb3;
}
 .tribute .morelink{
	 width: 30%;
	 background-color:#72174c;
}
 @media screen and (max-width: 896px){
	 .tiles {
		 grid-template-columns: repeat(4, 1fr);
		 grid-template-rows:repeat(4, min-content);
		 grid-template-areas: "tile1 tile1 tile2 tile2" "tile3 tile3 tile4 tile4" "tile5 tile5 tile6 tile6" ". tile7 tile7 ." ". slider slider .";
		 grid-gap: 1em;
	}
}
 @media screen and (min-width: 897px){
	 .tile{
		 width: 100%;
	}
}
 @media screen and (min-width: 1087px){
	 .tile{
		/*width: 70%;
		*/
		 margin: 0 auto;
	}
}
 @media screen and (max-width: 550px){
	 .tiles {
		 grid-template-columns: minmax(200px, 1fr);
		 grid-template-rows:repeat(8, min-content);
		 grid-template-areas: "tile1" "tile2" "tile3" "tile4" "tile5" "tile6" "tile7" "slider";
		 grid-gap: .5em;
	}
	 .tile, .your-class {
		 width: 100%;
		 justify-self: center;
	}
}