@import url('https://fonts.googleapis.com/css2?family=PT+Serif&family=Cinzel:wght@500&display=swap');

body {
	background-image: url( 'images/tile.jpg' );
	font-size: 1.3rem;
	font-family: PT Serif, Times New Roman, Times Roman, serif;
}

main {
	background-color: #c0b0af;
	background-image: url('images/brown2.jpg');
}

a {
	color: #660022;
	font-weight: bold;
}

a:hover {
	color: #880044;
}

hr {
	display: inline-block;
	margin: auto;
	width: 100%;
	border: none;
	filter: brightness(30%) sepia(1);
	text-align: left;
}

hr::before {
	display: inline-block;
	content: ' ';
	width: 10%;
	height: 52px;
	background-image: url('images/divider-hilt.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top right;
}

hr::after {
	display: inline-block;
	content: ' ';
	width: 80%;
	height: 52px;
	background-image: url('images/divider-blade.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

blockquote {
	border-radius: 5px;
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
	background-color: #f4eede;
	xbox-shadow: inset 0 0 10px rgba( 107, 54, 15 );
	xbackground-image: radial-gradient(ellipse at 15% 10%, #d5a655 0%,#ecbc75 100%);
}

img.carranza {
	float: left;
	width: 30%;
	box-shadow: 3px 3px 5px #240303;

	xborder: 3px ridge rgba( 0,0,0, 0.5 );
}
 
h1 {
	color: #20000b;
	xfont-weight: bold;
}

.bignav a {
	display: inline-block;
	background-size: contain;
	width: 100%;
	box-shadow: 3px 3px 5px #240303;
	opacity: 0.7;
	filter: grayscale(20%);
}


.bignav a:hover {
	opacity: 1.0;
	filter: none;
}

.bignav > div > div {
	position: relative;
}

.bignav div.title {
	padding: 10px;
	color: rgb( 234,209,150 );
	font-size: 1.6rem;
	line-height: 1.8rem;
	font-weight: bold;
	background-color: rgba( 102,0,34, 0.7 ); /* #660022; */
	pointer-events: none;

	position: absolute;
	bottom: 10%;

	width: 90%;
	text-align: center;
	margin-left: 5%;

	clip-path: polygon(100% 0%, calc(100% - 0.75rem) 50%, 100% 100%, 0 100%, 0.75rem 50%, 0 0);

}

/* Center last orphan: */
.bignav div:nth-last-child(1):nth-child(odd) {
	width:100%;
	margin:auto;
}

h1 i {
	font-weight: bold;
}

h1, h2, h4 {
	text-align: center;
}

h2 {
	opacity: 0.7;
	font-size: 1.7rem;
	letter-spacing: 0.3rem;
	font-family: Cinzel;
}

/* https://stackoverflow.com/a/57690242/378779 */
h3, h4 {
	font-family: Cinzel;
	text-align: center;
	padding-top: 46px;
    margin-top: -46px;
    margin-bottom: 20px;
	color: rgba( 0,0,0, 0.8 );
	letter-spacing: 0.2rem;
}

h4 {
	letter-spacing: 0.1rem;
}

nav#nav {
	xwidth: 100%;
	xposition: fixed !important; /* Make it stick/fixed */
	xtransition: top 0.3s; /* Transition effect when sliding down (and up) */
	box-shadow: 0px 5px 23px rgba(0, 0, 0, 0.5);
	z-index: 4000; /* Otherwise cards are on top? */
}

nav#nav a {
	white-space: nowrap;
}

a[href$=".pdf"]:before, a.pdf:before {
	content: ' ';
	display: inline-block;
	background-image: url( 'images/pdf.png' );
	background-size: cover;
	width: 22px;
	height: 28px;
	margin: 0px 10px 0px 0px;
	vertical-align: middle;
	box-shadow: 1px 1px 2px 1px rgba( 0, 0, 0, 0.6 );
	position: relative;
	top: -3px;
	overflow: visible;
}

div.press div.card > a[href$=".pdf"]:before {
	display: none;
}

img.the-shadow {
	box-shadow: 3px 3px 5px #240303;
}

figure {
	font-size: 1.1rem;
	line-height: 1.4rem;
}

nav#nav .nav-item {
	margin-left: 3px;
	margin-right: 3px;
	font-size: 1rem;
}

nav.footer {
	font-size: 1rem;
}

nav.footer ul {
	padding: 0;
	line-height: 2rem;
}

nav.footer li {
	display: inline;
}

nav.footer li a {
	white-space: nowrap;
}

nav.footer li:not(:first-child):before {
	content: '\2b1d';
}

.card {
	border: none;
	width: 18rem;
	text-align: center;
	box-shadow: 3px 3px 5px #240303;
	margin-bottom: 15px;
}

ul.press li {
	line-height: 1.7rem;
	margin-bottom: 1.1rem;
}

div.bibliography {
	column-count: 1;
	column-gap: 5%;
	column-rule-style: solid;
	column-rule-width: 1px;
	column-rule-color: rgba( 0, 0, 0, 0.3 );
}

div.masonry {
	column-rule-style: none;
}

div.bibliography > div {
	margin-top: 1.3rem;
	margin-bottom: 1.3rem;
}

div.bibliography div.title {
	font-style: italic;
	font-weight: bold;
}

div.bibliography div {
	break-inside: avoid;
}

div.videos {
	font-size: 1.1rem;
	line-height: 1.4rem;
}

div.videos li {
	margin-bottom: 5px;
}

/*
Drop shadow (outer glow, really) around transparent PNG:
https://stackoverflow.com/a/45823124/378779
*/
div.dvds img {
	-webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.8));
	filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.8));
}

div.dvds img:hover {
	-webkit-filter: drop-shadow(0px 0px 10px rgba(255,255,255,0.8));
	filter: drop-shadow(0px 0px 10px rgba(255,255,255,0.8));
}

/*
div.weapons div.card > a {
	display: inline-block;
	background-size: contain;
}

a#rapier-and-dagger {
	background-image: url('images/weapon-rapier-and-dagger.jpg');
}

a#rapier-and-dagger:hover {
	background-image: url('images/weapon-rapier-and-dagger-hover.jpg');
}

a#smallsword {
	background-image: url('images/weapon-smallsword.jpg');
}

a#smallsword:hover {
	background-image: url('images/weapon-smallsword-hover.jpg');
}

a#sabre {
	background-image: url('images/weapon-sabre.jpg');
}

a#sabre:hover {
	background-image: url('images/weapon-sabre-hover.jpg');
}

a#nineteenth-century-rapier {
	background-image: url('images/weapon-nineteenth-century-rapier.jpg');
}

a#nineteenth-century-rapier:hover {
	background-image: url('images/weapon-nineteenth-century-rapier-hover.jpg');
}
*/

/*
	Preload hover images:
	https://stackoverflow.com/questions/1373142/preloading-css-images/14390213#14390213

body::after{
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1; // hide images
   content:
   	url('images/weapon-rapier-and-dagger-hover.jpg')
	url('images/weapon-smallsword-hover.jpg')
	url('images/weapon-sabre-hover.jpg')
	url('images/weapon-nineteenth-century-rapier-hover.jpg');

}
*/


/*
div.weapons div.title {
	pointer-events:none;
	position: absolute;
	width: 100%;
	text-align: center;
	font-weight: bold;
	color: white;
	text-shadow:
		0px 2px 3px rgba(0,0,0,0.6),
		0px -2px 3px rgba(0,0,0,0.6),
		2px 0px 3px rgba(0,0,0,0.6),
		-2px 0px 3px rgba(0,0,0,0.6);

	bottom: 10px;
}
*/

a.social {
	padding-left: 5px;
	padding-right: 5px;
	margin-right: 10px;
}

a.social:before {
	display: inline-block;
	content: ' ';
	width: 30px;
	height: 30px;
	margin-right: 0px;
	border-radius: 30px;
	background-size: cover;
	position: relative;
	top: 6px;
	filter: grayscale(60%);
	transition: transform .1s;
}

a.www:before {
	background-image: url(images/social/www.png);
	margin-right: 5px;
}

a.fb:before {
	background-image: url(images/social/fb.png);
}

a.tw:before {
	background-image: url(images/social/tw.png);
}

a.ig:before {
	background-image: url(images/social/ig.png);
}

a.yt:before {
	background-image: url(images/social/yt.png);
}

a.pi:before {
	background-image: url(images/social/pi.png);
}

.social a:hover {
	text-decoration: none;
}

a.social:hover:before {
	xtransform: scale(1.2);
}


/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_aspect_ratio_169 */
.stretchy-wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.stretchy-2 {
	padding-top: 70% !important;
}

.stretchy-wrapper > div {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.card-body {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ead196+0,cccc6e+100&1+0,0+48 */
	background: -moz-linear-gradient(top,  rgba(234,209,150,1) 0%, rgba(220,207,131,0) 48%, rgba(204,204,110,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(234,209,150,1) 0%,rgba(220,207,131,0) 48%,rgba(204,204,110,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(234,209,150,1) 0%,rgba(220,207,131,0) 48%,rgba(204,204,110,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ead196', endColorstr='#00cccc6e',GradientType=0 ); /* IE6-9 */
}

.card-footer a {
	margin-left: 10px;
	margin-right: 10px;
}

div.carousel-item div {
	position: absolute;
	bottom: 10px;
	text-align: center;
	width: 70%;
	margin-left: 15%;
	font-size: 1.1rem;
	line-height: 1.3rem;
	color: rgba(255,255,255,0.8);
	text-shadow:
		0px 2px 3px rgba(0,0,0,0.6),
		0px -2px 3px rgba(0,0,0,0.6),
		2px 0px 3px rgba(0,0,0,0.6),
		-2px 0px 3px rgba(0,0,0,0.6);
}

div#carouselExampleControls {
	margin-top: 50px;
	background-color: black;
}

.carousel-control-next, .carousel-control-prev {
	width: 10%;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
	width: 50px;
	height: 50px;
	opacity: 1.0;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

@media only screen and (max-width: 1200px) {
	img.carranza {
		width: 50%;
	}
}

@media only screen and (max-width: 500px) {
	img.carranza {
		width: 100%;
		float: none;
	}
}

@media only screen and (min-width: 576px) {
}

@media only screen and (min-width: 768px) {
	div.bibliography {
		column-count: 2;
	}

}

@media only screen and (min-width: 1200px) {
	div.bibliography {
		column-count: 2;
	}
}