@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

nav {
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	margin-bottom: 50px;
	//width: 100%;
	//max-width: 965px;
	//max-width: 800px;
	text-align: center;

	//display: grid;
	//grid-template-columns: auto auto auto auto auto auto;
  	//grid-template-rows: auto auto auto auto auto auto;
}

.nav button {
	width: 50%;
	margin: 5px auto;
	margin-bottom: 25px;
	//display: block;
	padding: 5px;
	text-align: center;
}
.nav.books {
	clear: both;
	text-align: center;
	margin-bottom: 100px;
}
.nav .bookmark {
	width: 	150px;
	height: 150px;
	background-size: cover; 
	background-position: center center; 
	//float: left; 
	display: inline-block;
	cursor: pointer;
	position: relative;
	margin: 5px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	overflow: hidden;
}

.nav .bookmark video {
	position: absolute;
    z-index: 0;
    top: 0px;
    left: 0px; /* fixed to left. Replace it by right if you want.*/
    min-width: 150px;
    min-height: 150px;
    width: 150px;
    height: 150px;
    transform: scale(1.4);
}

main {
	margin-bottom: 200px;
	padding-bottom: 200px;
	//min-height: 800px;
}

main .pin {
	font-family: 'Lato', sans-serif;
	max-width: 200px;
	word-wrap: break-word;
	//transition: all .2s cubic-bezier(.25,.8,.25,1); /* Animation */
	
}

.pin.nswf {
	border: 1px solid red !important;
}


@media only screen and (max-width: 1000px) {
  main .pin { 
    margin: 20px;
  }
}

.feed {
	margin-top: 100px;
}
main .pin img,
main .pin video {
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all .2s cubic-bezier(.25,.8,.25,1); /* Animation */
}
main .pin:hover {
  //transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  z-index: 100;
  
}
main .pin:hover img,
main .pin:hover video {
  cursor: pointer;
  transform: scale(1.125);
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

main .pin.full img,
main .pin.full video {
  cursor: pointer;
  transform: scale(1.5) !important;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  z-index: 200 !important;
}

main .pin h1 {
	font-size: 25px;
}

.toolbar {
	display: none;
}




html {
    overflow-y:scroll;
}

.play-btn {
	width: auto;
	height: 25px;
	position: absolute;
	z-index: 700;
	left: 0;
	bottom: 40px;
	font-family: sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	color: white;
	padding: 3px;
	font-size: 30px;
	margin-top: -122px;
	opacity: .3;
	text-shadow: 1px 4px 13px
	rgb(68, 68, 68);
}

/*
div.nsfw {
	opacity: .1;
	filter: blur(15px);
	-webkit-filter: blur(15px);
	transition: 1s filter linear;
	-webkit-transition: 1s -webkit-filter linear;
	-moz-transition: 1s -moz-filter linear;
	-ms-transition: 1s -ms-filter linear;
	-o-transition: 1s -o-filter linear;
}
*/

.nsfw img,
.nsfw video {
	transition: 1s filter linear;
	-webkit-transition: 1s -webkit-filter linear;
	-moz-transition: 1s -moz-filter linear;
	-ms-transition: 1s -ms-filter linear;
	-o-transition: 1s -o-filter linear;
}

img.nsfw {
	 filter: grayscale(100%);
	filter: blur(15px);
  	-webkit-filter: blur(15px);
  	opacity: .35 !important;
  	transition: 2s linear all;
}

video.nsfw {
	 filter: grayscale(100%);
	filter: blur(15px);
  	-webkit-filter: blur(15px);
  	opacity: .35 !important;
}

.tweet .CallToAction {
	display: none !important;
	min-height: 350px;
}