@font-face { font-family: 'theboldfont'; src: url('/sl/fonts/theboldfont.ttf'); font-display: swap; }
@font-face { font-family: 'Roboto-Light'; src: url('/sl/fonts/Roboto-Light.ttf'); font-display: swap; }

html, body, header, div, footer, article, section { float: left; position: relative; display: inline-block; width: 100%; height: auto; margin: 0 auto; padding: 0; border: 0; outline: 0; color: #000; text-shadow: none; text-align: left; font: 1em 'theboldfont','Roboto-Light', 'Helvetica', 'Arial'; }
div { width: auto; }

html, body, .header, article, footer { background: linear-gradient(to bottom,  rgba(254,178,5,1) 0%,rgba(252,153,5,1) 100%); }
#middle, .secc { background: linear-gradient(to bottom,  rgba(252,153,5,1) 0%,rgba(254,178,5,1) 100%); }
article:before, article:after {	background: linear-gradient(135deg,  rgba(254,178,5,1) 0%,rgba(252,153,5,1) 100%); }

h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; } h5 { font-size: .83em; } h6 { font-size: .75em; }
a { color: #feb205; text-shadow: 0 -1px 1px #000, 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000; text-decoration: none; }
a:hover { color: #000; text-shadow: 0 -1px 1px #feb205, 1px 0 1px #feb205, 0 1px 1px #feb205, -1px 0 1px #feb205; }



header .title, #search, .footleft .title, .footright { background: #000; transform: skewY(-2.5deg); }
#head, .footmid { background: #000; transform: skewY(2.5deg); }

.header { width: 100%; height: 250px; }
header { width: 26%; height: auto; }

header .title { width: 100%; height: 180px; margin: -15px 0 0 0;  }
header h1 a, .footleft h1 a { position: relative; display: inline-block; width: auto; height: auto; margin: 0; padding: 25px 15%; font-size: 2.4em; background: url('/media/svg/1.svg') right/18% no-repeat scroll; }
header h1 a:hover, .footleft h1 a:hover { background-image: url('/media/svg/2.svg'); }

#head { width: calc(49% + 15px); height: 230px; margin: -55px 0 0 -15px; }
#head a { position: relative; float: left; top: 74px; margin: 16px 40px 0 45px; font-size: 1.4em; text-transform: uppercase; }

#search { width: calc(25% + 1px); height: 210px; margin: -25px 0 0 -1px; }
#search h2, .footright h2 { margin: 55px 0 0 0; padding: 0 0 0 10px; font-size: 1em; text-shadow: 0 -1px 1px #feb205, 1px 0 1px #feb205, 0 1px 1px #feb205, -1px 0 1px #feb205; }


#middle { clear: both; width: 100%; min-height: 80vh; height: auto; margin: 0; padding: 0; }

.secc { min-height: 33vh; }
.secc > h1 { font-size: 3.5em; margin: -20px 0 0 0; padding: 0; text-align: center; }

.artlefttitle {	width: calc(23% - 4px);	margin: 0 0 25px 2%; border: 8px solid #000; border-bottom: none; }
.artleft { width: 23%; margin: -10px 0 0 2%; }
.artmid, .artmidtitle { width: 48%; margin: 0 1%; }
.artmidtitle { width: calc(50% - 24px); margin: 0 0 25px 0; border-top: 8px solid #000; }
.artrighttitle { width: calc(23% - 4px); margin: 0 2% 25px 0; border: 8px solid #000; border-bottom: none; }
.artright { width: 23%; margin: 10px 2% 0 0; }
.artlefttitle h2, .artmidtitle h2, .artrighttitle h2 { font-size: 1.5em; margin: 0; padding: 20px; text-align: center; }


article { width: calc(100% - 16px); margin: 9vh 0 12vh 0; border: 8px solid #000; border-top: none; border-bottom: none; }
.artleft article, .artright article { margin: 9vh 0 8vh 0; }

article:before, article.flip:after, article:after, article.flip:before { content: ''; position: absolute; left: -8px; width: 100%; height: 60px; border: 8px solid #000; transform: skewY(2.5deg); }
article:after, article.flip:before { transform: skewY(-2.5deg); }
article:before, article.flip:before { top: -36px; border-bottom: none; }
article:after, article.flip:after { bottom: -36px; border-top: none; }


article header { width: 90%; margin: -40px 0 0 0; padding: 0 5%; z-index: 100; }
article header h1, article.flip header h1, .artleft article header h1, .artright article header h1 { position: relative; display: inline-block; max-width: 75%; padding: 2% 3%; background: #000; color: #feb205; font-size: 2.1em; }
article header h1 { margin: 0% 0 10px 0; top: -40px; }
article.flip header h1 { margin: 0 0 10px 0; top: -20px }
.artleft article header h1, .artright article header h1, .artleft article.flip header h1, .artright article.flip header h1 { margin: 0% 0 20px 0; font-size: 1.5em; top: -15px; }
article section { margin: 0; padding: 5% 5% 2% 5%; font: 900 1em 'Roboto-Light'; z-index: 100; }
.artmid article section { padding: 5% 5% 2% 5%; }
article section p { width: 85%; text-align: left; padding: 0 5%; margin: 1% 0 5% 1%; font-size: 1.10em; line-height: 1.5em; }
.artmid article section p { width: 85%; font-size: 1.25em; }
article section video { float: left; margin: 0 5% 1% 5%; max-width: 45%; height: auto; background: #000; border: 4px solid #000; }
.artmid > article section video { float: left; margin: 0 4% 0 2%; max-width: 45%; height: auto; background: #000; border: 4px solid #000; }
article section a { float: left; margin: 5px 10px 5px 0; padding: 6px 16px; font-weight: 900; font-size: 0.8em; }


article.pagecontainer section { padding: 0; }
article.pagecontainer { margin: 2vh 0 6vh 0; }

.pagecount { float: left; width: 30%; margin: 0; padding: 0; background: #000; color: #feb205; }
.pagecount h1 { text-align: center; }
.pagepos { width: 17.5%; margin: 35px 0 0 0; }
.pagepos h2 { margin: 0; padding: 0; text-align: center; font-size: 1.8em; background: #000; color: #000; text-shadow: 0 -1px 1px #feb205, 1px 0 1px #feb205, 0 1px 1px #feb205, -1px 0 1px #feb205; }
.pagepos > h2 > a { width: 100%; margin: 0 0 0 0; padding: 0; text-decoration: none; text-align: center; font-size: 1.0em; background: #000; color: feb205; }




footer { clear: both; width: 100%; height: 170px; margin: 0; overflow: hidden; }

.footleft { width: 26%; height: 140px; margin: 35px 0 0 0; background: #000; }
.footleft .title { width: 100%; height: 120px; margin: -15px 0 0 0; }

.footmid { width: calc(49% + 1px); height: 170px; margin: 30px 0 0 -1px; }
.footmid a { position: relative; float: left; top: 14px; margin: 16px 45px 0 40px; font-size: 1.40em; text-transform: uppercase; }

.footright { width: calc(25% + 1px); height: 150px; margin: 40px 0 0 -1px; }
.footright h2 { margin: 25px 0 0 0; }



::-webkit-scrollbar { background: rgba(0,0,0,1); }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,1); border-radius: 0; }
::-webkit-scrollbar-thumb { background: rgba(254,178,5,1); border-radius: 0; -webkit-box-shadow: inset 0 0 0 rgba(0,0,0,1.0); 
	font-size: 2em;
	display: inline-block;
	width: 0.2em;
	height: 0.4em;
	border: 0.05em solid rgba(254,178,5,1);
	position: relative;
	border-radius: 0em;
	z-index: 1;}

::selection { color: #feb205; text-shadow: 0 -1px 1px #000, 1px 0 1px #000, 0 1px 1px #000, -1px 0 1px #000; background: #000; }

@media only screen and (min-width: 1381px) and (max-width: 1920px) {

}
@media only screen and (min-width: 1201px) and (max-width: 1380px) {

}
@media only screen and (min-width: 1025px) and (max-width: 1200px) {

}
@media only screen and (min-width:  769px) and (max-width: 1024px) {

}
@media only screen and (min-width: 601px) and (max-width: 768px) {

}
@media only screen and (min-width: 481px) and (max-width: 600px) {

}
@media only screen and (min-width: 321px) and (max-width: 480px) {
	header { width: 100%; }
	#head { width: 100%; margin: -55px 0 0 0; }
	
	#search { background: #fff; float: left; width: 100%; height: 4510px; margin: 25px 0 0 -1px; }
}
@media only screen and (min-width: 100px) and (max-width: 320px) {

}