/* 
 * COMBINED CSS FILE - Sorinto Company Site
 * Combines: reset.css, demo.css, style.css, style1.css, style5.css, style8.css, styleIE.css
 * This reduces HTTP requests and improves loading performance
 */

/* Fast-loading Google Fonts - Each font loaded separately for better control */
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Acme&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');

/* ===== CSS RESET (from reset.css) ===== */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
input{
	border:1px solid #b0b0b0;
	padding:3px 5px 4px;
	color:#979797;
	font:13px arial,helvetica,clean,sans-serif;
}
select{
	font:13px arial,helvetica,clean,sans-serif;
	font-size:99%;
}
table{
	font-size:inherit;
	font:100%;
}
pre,code,kbd,samp,tt{
	font-family:monospace;
	line-height:100%;
}

/* ===== DEMO STYLES (from demo.css) ===== */
.cards,
.pe-thumbs {
	opacity: 0;
	/*background: white;*/
}

img {
	height: 150px !important;
}

/* General Demo Style */
body {
	background-color: transparent;
	background-repeat: repeat, no-repeat;
	background-position: top left, center center;
	background-size: auto, cover;
	font-size: 15px;
	font-family: "Lato",Calibri,Arial,sans-serif;
	background-attachment: fixed;
	color: #fff;
	text-align: center;
	/* Enhanced cross-browser text outline */
	-webkit-text-stroke: 1px black;
	-moz-text-stroke: 1px black;
	text-shadow:
		/* Multiple shadow technique for strong outline */
		-2px -2px 0 #000,
		2px -2px 0 #000,
		-2px 2px 0 #000,
		2px 2px 0 #000,
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000,
		/* Additional fine outline */
		-1px 0 0 #000,
		1px 0 0 #000,
		0 -1px 0 #000,
		0 1px 0 #000;
}

a {
	color: #888;
	text-decoration: none;
}

a:hover {
	color: #333;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.main{
	width: 800px;
	padding: 0px 30px 30px 30px;
	margin: 0 auto;
	position: relative;
	text-align: center;
}

.ie .main{
	width: 820px;
}

.column{
	width: 540px;
	float: left;
	position: relative;
}

.column:last-child{
	width: 240px;
	text-align: left;
	float: right;
	border-left: 1px solid #eee;
	padding-left: 20px;
}

.column p{
	font-weight: 300;
	font-size: 13px;
	padding: 5px 0;
	color: #333;
	line-height: 20px;
}

.info{
	background: #f1f1f1;
	border-top: 1px solid #eee;
	text-align: left;
	margin-top: 30px;
	padding: 20px;
	border-radius: 3px;
}

.info h3{
	font-size: 14px;
	color: #555;
	margin: 5px 0px 15px 0px;
}

.info a{
	color: #555;
	text-decoration: underline;
}

.ie9 body{
	overflow: hidden;
}

/* ===== MAIN STYLES (from style.css) ===== */
html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
  overflow-x: hidden;
  background-color: #000;
  font-family: Cinzel;
  height: 100vh;
  overflow-y: auto;
  -webkit-text-stroke: 1px black;
  text-shadow:
    3px 3px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.headerTextOne {
  color: white;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 5px;
  text-align: center;
  line-height: 1.05;
  font-style: normal;
  /* Enhanced cross-browser text outline */
  -webkit-text-stroke: 2px black;
  -moz-text-stroke: 2px black;
  text-shadow: 
    /* Purple glow effect */
    0 0 5px #9d4edd, 
    0 0 10px #9d4edd, 
    0 0 15px #9d4edd, 
    0 0 20px #9d4edd,
    /* Strong black outline */
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    /* Additional fine outline */
    -1px 0 0 #000,
    1px 0 0 #000,
    0 -1px 0 #000,
    0 1px 0 #000;
  margin-bottom: 1px;
  margin-top: 1px;
  font-family: "Paytone One", serif;
  white-space: nowrap;
  word-spacing: normal !important;
  word-break: normal !important;
}

.headerTextTwo {
  color: white;
  font-weight: 100;
  letter-spacing: 3px;
  text-align: center;
  font-style: normal;
  /* Enhanced cross-browser text outline */
  -webkit-text-stroke: 1px black;
  -moz-text-stroke: 1px black;
  text-shadow: 
    /* Strong black outline */
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    /* Additional fine outline */
    -1px 0 0 #000,
    1px 0 0 #000,
    0 -1px 0 #000,
    0 1px 0 #000;
  margin-bottom: 1px;
  margin-top: 1px;
  font-size: 35px;
  line-height: 1.3;
  max-width: 100%;
  word-wrap: break-word;
  font-family: 'Jura', 'Arial Narrow', Arial, sans-serif !important;
  font-weight: bold;
}

.pe-container {
  height: 100vh;
  width: 100%;
  background: transparent;
  font-family: 'Lato', Calibri, Arial, sans-serif;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

.pe-thumbs {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 40px 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
  background: transparent;
  padding: 60px !important;
  border: 0px;
}

.pe-thumbs::-webkit-scrollbar {
  display: none;
}

.pe-thumbs li {
  position: relative;
  margin: 15px;
  z-index: 1;
  cursor: pointer;
}

.pe-thumbs li a {
  display: block;
  outline: none;
}

.pe-thumbs li img {
  display: block;
  border: none;
  width: auto;
  height: auto;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.pe-thumbs li .pe-description {
  position: absolute;
  width: 450px;
  height: 100px;
  background: rgba(252, 214, 112, 0.9);
  color: white;
  z-index: 1001;
  text-align: left;
  height: 200px;
  transition: all 0.1s ease;
  display: none;
}

.pe-description h3 {
  padding: 10px 10px 0px 10px;
  line-height: 20px;
  font-family: 'Paytone One', 'Arial Narrow', Arial, sans-serif;
  font-size: 25px;
  margin: 0px;
  /* Enhanced cross-browser text outline for consistent visibility */
  -webkit-text-stroke: 1px black;
  -moz-text-stroke: 1px black;
  text-shadow: 
    /* Strong black outline */
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    /* Additional fine outline */
    -1px 0 0 #000,
    1px 0 0 #000,
    0 -1px 0 #000,
    0 1px 0 #000;
}

.pe-description p {
  padding: 10px 0px;
  margin: 10px;
  font-size: 28px;
  font-style: bold;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-family: 'Acme', 'Arial Narrow', Arial, sans-serif;
  /* Enhanced cross-browser text outline for consistent visibility */
  -webkit-text-stroke: 1px black;
  -moz-text-stroke: 1px black;
  text-shadow: 
    /* Strong black outline */
    -2px -2px 0 #000,
    2px -2px 0 #000,
    -2px 2px 0 #000,
    2px 2px 0 #000,
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000,
    /* Additional fine outline */
    -1px 0 0 #000,
    1px 0 0 #000,
    0 -1px 0 #000,
    0 1px 0 #000;
}

/* ===== MENU STYLES (from style1.css) ===== */
.bmenu{
    padding: 0px;
    margin: 0 0 10px 0;
    position: relative;
}
.bmenu li{
    font-size: 50px;
    display: block;
}
.bmenu li a{
	color: transparent;
	display: block;
	text-transform: uppercase;
	text-shadow: 0px 0px 5px #fff;
	letter-spacing: 1px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.bmenu:hover li a{
	text-shadow: 0px 0px 6px #fff;
}
.bmenu li a:hover{
	color: #fff;
	text-shadow: 0px 0px 1px #fff;
	padding-left: 10px;
}

/* ===== EXTENDED STYLES (from style5.css) ===== */
/* Font imports moved to HTML for better loading performance */

.headerTextTwo {
		font-family: 'Jura', 'Arial Narrow', Arial, sans-serif !important;
		font-weight: bold;
}

.vl {
	border: 150px solid black;
	height: 100%;
	position: absolute;
	left: 87%;
	top: 0;
}

.vl2 {
	border: 130px solid black;
	height: 100%;
	position: absolute;
	left: 0%;
	top: 0;
}

.grid-container {
	display: grid;
	grid-template-columns: auto;
	background-color: rgba(0, 0, 0, 0.0);
	padding: 50px;
	z-index: 1;
}

.grid-item {
	background-color: rgba(255, 255, 255, 0.0);
	border: 1px solid rgba(0, 0, 0, 0.0);
	margin-bottom: 80px;
	font-size: 0px;
	text-align: center;
}

.grid-container-right {
	display: grid;
	grid-template-columns: auto;
	background-color: rgba(0, 0, 0, 0.0);
	padding: 50px;
	z-index: 1;
	left: 87.4%;
}

@keyframes flickerAnimation {
	0% {
		color: #fff;
		text-shadow: 0px 0px 1px #fff;
		padding-left: 10px;
	}

	50% {
		text-shadow: 0px 0px 16px #fff;
	}

	100% {
		color: #fff;
		text-shadow: 0px 0px 1px #fff;
		padding-left: 10px;
	}
}

@-o-keyframes flickerAnimation {
	0% {
		color: #fff;
		text-shadow: 0px 0px 1px #fff;
		padding-left: 10px;
	}

	50% {
		text-shadow: 0px 0px 16px #fff;
	}

	100% {
		color: #fff;
		text-shadow: 0px 0px 1px #fff;
		padding-left: 10px;
	}
}

@-moz-keyframes flickerAnimation {
	0% {
		color: #fff;
		text-shadow: 0px 0px 1px #fff;
		padding-left: 10px;
	}

	50% {
		text-shadow: 0px 0px 16px #fff;
	}

	100% {
		color: #fff;
		text-shadow: 0px 0px 1px #fff;
		padding-left: 10px;
	}
}

@-webkit-keyframes flickerAnimation {
	0% {
		color: #fff;
		text-shadow: 0px 0px 1px #fff;
		padding-left: 10px;
	}

	50% {
		text-shadow: 0px 0px 16px #fff;
	}

	100% {
		color: #fff;
		text-shadow: 0px 0px 1px #fff;
		padding-left: 10px;
	}
}

.animate-flicker {
	-webkit-animation: flickerAnimation 1.4s infinite;
	-moz-animation: flickerAnimation 1.4s infinite;
	-o-animation: flickerAnimation 1.4s infinite;
	animation: flickerAnimation 1.4s infinite;
}

a.fa.fa-amazon,
a.fa.fa-facebook-square,
a.fa.fa-twitter-square,
a.fa.fa-linkedin-square,
a.fa.fa-bandcamp,
a.fa.fa-patreon,
a.fa.fa-youtube-play,
a.fa.fa-instagram,
a.fa.fa-pinterest,
.github {
	font-size: 12.32em;
	text-align: center;
	background-color: white;
	box-shadow: #ffffff 0px 0px 10px;
	position: relative;
	transform: scale(1.0, 1.0);
	transition: 0.15s cubic-bezier(0.47, 0, 0.745, 0.715);
	border-radius: 10px 10px;
}

a.fa.fa-facebook-square {
	color: #3B5998;
}

a.fa.fa-twitter-square {
	color: #00aced;
}

a.fa.fa-linkedin-square {
	color: #007bb5;
}

a.fa.fa-bandcamp {
	color: #629aa9;
}

a.fa.fa-patreon {
	color: #f96854;
}

a.fa.fa-youtube-play {
	color: #c4302b;
}

a.fa.fa-amazon {
	color: #FF9800;
}

a.fa.fa-instagram {
	display: inline-block;
	text-align: center;
	color: #fff;
	vertical-align: middle;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	border: 2px solid white;
}

a.fa.fa-pinterest {
	color: #E60023;
}

a.fa.fa-amazon:hover,
a.fa.fa-facebook-square:hover,
a.fa.fa-twitter-square:hover,
a.fa.fa-linkedin-square:hover,
a.fa.fa-bandcamp:hover,
a.fa.fa-patreon:hover,
a.fa.fa-youtube-play:hover,
a.fa.fa-instagram:hover,
a.fa.fa-pinterest:hover,
.github:hover {
	transition: 0.15s cubic-bezier(0.47, 0, 0.745, 0.715);
	transform: scale(1.2, 1.2);
}

.site-container {
	container-name: container;
	container-type: size;
}

/* ===== ADDITIONAL STYLES (from style8.css) ===== */
/* latin */
@font-face {
	font-family: 'Josefin Slab';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/josefinslab/v12/lW-swjwOK3Ps5GSJlNNkMalNpiZe_ldbOR4W71msR349Kg.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.pe-thumbs {
	width: 100%;
	height: 80vh;
	padding: 40px 40px;
	position: relative;
	background: transparent;
	padding: 60px !important;
	border: 0px !important;
	overflow-x: hidden;
	overflow-y: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
	opacity: 1.0 !important;
}

.pe-thumbs::-webkit-scrollbar {
	display: none;
}

.pe-thumbs li.cards {
	opacity: 1.0 !important;
	float: left;
	display: inline;
	margin: 15px;
}

.pe-thumbs li a img {
	width: 122px !important;
	height: 156px !important;
	opacity: 1.0 !important;
}

.pe-thumbs li a div.pe-description {
	width: 450px !important;
	height: 100px !important;
	background: rgba(252, 214, 112, 0.9) !important;
	position: absolute !important;
	top: 200px !important;
	left: -40px !important;
	color: white !important;
	z-index: 1001 !important;
	text-align: left !important;
	height: 200px !important;
	transition: all 0.1s ease !important;
}

/* Smart positioning classes for book descriptions */
.pe-thumbs li a div.pe-description.pos-right {
	top: -22px !important; /* Center vertically with the book */
	left: 180px !important; /* Position to the right of the book with much more spacing */
}

.pe-thumbs li a div.pe-description.pos-left {
	top: -22px !important; /* Center vertically with the book */
	left: -507px !important; /* Position to the left of the book with much more spacing */
}

.pe-thumbs li a div.pe-description.pos-bottom-right {
	top: -242px !important; /* Position above the book, centered */
	left: 180px !important; /* Position to the right with much more spacing */
}

.pe-thumbs li a div.pe-description.pos-bottom-left {
	top: -242px !important; /* Position above the book, centered */
	left: -530px !important; /* Position to the left with much more spacing */
}

/* Reduced vertical spacing for filtered views only */
body.filtered-view .pe-thumbs li {
	margin: 15px 15px 8px 15px !important; /* Reduce bottom margin for filtered categories */
}

body.filtered-view .pe-thumbs li.cards {
	margin: 10px 15px 6px 15px !important; /* Even tighter spacing for filtered card views */
}

/* ===== IE SPECIFIC STYLES (from styleIE.css) ===== */
/* IE specific fixes */
.ie .bmenu li a{
	color: #fff;
}
.ie .bmenu:hover li a{
	color:#fff;
}
.ie .bmenu li a:hover{
	color: #fff;
	padding-left: 10px;
}

/* ===== RESPONSIVE DESIGN FROM STYLE5.CSS ===== */
/* Responsive book sizing for different screen sizes */

/* Extra small phones (Galaxy Fold) */
@media (max-width: 280px) {
	.pe-thumbs li a img {
		width: 95px !important;
		height: 150px !important;
	}
}

/* Small phones */
@media (min-width: 281px) and (max-width: 375px) {
	.pe-thumbs li a img {
		width: 127px !important;
		height: 150px !important;
	}
}

/* Standard phones */
@media (min-width: 376px) and (max-width: 414px) {
	.pe-thumbs li a img {
		width: 135px !important;
		height: 160px !important;
	}
}

/* Large phones */
@media (min-width: 415px) and (max-width: 768px) {
	.pe-thumbs li a img {
		width: 145px !important;
		height: 180px !important;
	}
}

/* Tablets */
@media (min-width: 769px) and (max-width: 1024px) {
	.pe-thumbs li a img {
		width: 180px !important;
		height: 230px !important;
	}
}

/* Small desktops/laptops */
@media (min-width: 1025px) and (max-width: 1279px) {
	.pe-thumbs li a img {
		width: 122px !important;
		height: 156px !important;
	}
}

/* Large desktops */
@media (min-width: 1280px) {
	.pe-thumbs li a img {
		width: 122px !important;
		height: 156px !important;
	}
}

/* ===== MOBILE SPACING FIXES - PRESERVE GRIDLOCK ===== */
/* Fix black gaps while keeping the gridlock functionality intact */

/* Reduce container padding that causes black gaps on mobile */
@media (max-width: 768px) {
	.pe-thumbs {
		padding: 25px !important; /* Much less than 60px */
	}
	
	/* Smaller margins for mobile to reduce gaps */
	.pe-thumbs li {
		margin: 8px !important;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.pe-thumbs {
		padding: 35px !important;
	}
	
	.pe-thumbs li {
		margin: 10px !important;
	}
}

/* For filtered views specifically, reduce spacing even more */
@media (max-width: 768px) {
	body.filtered-view .pe-thumbs {
		padding: 15px !important;
	}
	
	body.filtered-view .pe-thumbs li {
		margin: 5px !important;
	}
}