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

html, body { float: left; width: 100%; display: inline-block; margin: 0 auto; padding: 0; border: 0; outline: 0; background: #000 url('/media/section-bgs/b.webp') repeat scroll 0 0 / contain; color: #ddd; text-shadow: none; text-align: left; font-size: 1em; font-family: 'o', 'Arial', 'Helvetica', 'sans-serif'; }
h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; } h5 { font-size: .83em; } h6 { font-size: .75em; }
a { color: #ddd; text-shadow: none; text-decoration: none; }
a:hover { color: #eec600; }

header, footer { float: left; width: 40%; height: 80px; background: #003c00e6; text-align: center; }
header h1 { margin: 0; padding: 0; }
header h1 a, footer h1 a { position: relative; display: inline-block; margin: 0; padding: 8px 0 0 0; vertical-align: middle; font-size: 1.4em; }

#h, #f { float: left; width: 60%; height: 80px; margin: 0; background: #003c00e6; text-align: center; }
#h a, #f a { position: relative; display: inline-block; margin: 28px 40px 0 40px; font-size: 1.4em; line-height: 1em; z-index: 100; vertical-align: middle; }

#m { float: left; clear: both; width: 100%; min-height: 80vh; height: auto; margin: 0; padding: 0; background: #00000080; color: #c89600b3; }

.a, .b, .c, .d, .e, .f, .g { float: left; width: 100%; padding: 0; }
.a { background: #033 url('/media/section-bgs/a.webp') no-repeat fixed 0 0 / 100% auto; }
.b { background: #050 url('/media/section-bgs/b.webp') no-repeat scroll 0 0 / 100%; }
.c { background: #500 url('/media/section-bgs/c.webp') no-repeat fixed 0 0 / cover; }
.d { background: #005 url('/media/section-bgs/d.webp') no-repeat scroll 0 0 / cover; }
.e { background: #550 url('/media/section-bgs/e.webp') no-repeat fixed 0 0 / cover; }
.f { background: #055 url('/media/section-bgs/f.webp') no-repeat scroll 0 0 / cover; }
.g { background: #555 url('/media/section-bgs/b.webp') no-repeat fixed 0 0 / cover; }

.ao, .bo, .co, .do, .eo, .fo, .go, .eao, .ebo { float: left; width: 100%; padding: 60px 0; }
.ao { background: #00370000; }
.bo { background: #3c1e05ed; }
.co { background: #00000099; }
.do { background: #002800cc; }
.eo { background: #645000cc; }
.eao { background: #340143cc; }
.ebo { background: #ffa500bb; }
.fo { background: #001e3ce6; }
.go { background: #3c0300ed; }

._a { clear: both; float: left; width: 78%; margin: 2% 11% 5% 11%; }

._b { float: left; width: 98%; margin: 0 1%; color: #cdcdcd; text-shadow: 1px 4px 6px #111; }
._b h1 { float: left; width: 100%; margin: 30px 0 24px 0; font-size: 3.4em; text-transform: uppercase; color: #ddd; text-align: center; }

.a1 { float: left; width: 95%; margin: 0 0 0 5%; color: #fff; text-shadow: 1px 4px 6px #111; }
.a1 h1, .a1 h2 { float: left; width: auto; padding: 100px; background: #0009; border-radius: 30px; }
.a1 h1 { margin: 0 0 0 -6%; padding: 0 100px; font-size: 8em; font-weight: 900; text-align: center; }
.a1 h2 { float: right; margin: 30% 5% 0 0; padding: 50px; font-size: 1.8em; font-weight: 100; text-align: left; }

.b1 { float: left; width: 100%; margin: 40px 0 0 0; background: #64320f66; border-radius: 0 50px 50px 0; }
.b1z { float: left; width: 35%; padding: 0 5% 0 0; border-radius: 5px; overflow: hidden; }
.b1 img { float: left; width: 100%; padding: 0; }
.b1 h1 { float: left; width: 60%; padding: 0; text-align: left; font-size: 1.8em; text-transform: none; }
.b1 hr { float: left; width: 15%; height: 2px; margin: 0 40% 1% 0; border: none; background: #dddddd50; }
.b1 p { padding: 10px 50px 0 0; text-align: justify; font-size: 1.25em; line-height: 1.5em; }

.c1, .l1 { float: left; width: 31%; margin: 0 1%; padding: 2% 0; background: #0a0a0acc; border-radius: 5px; overflow: hidden; border: 1px solid #fff; text-shadow: none; }
.l1 { width: 22%; background: #fff; }
.l1z { float: left; position: relative; width: 90%; padding: 0 5%; overflow: hidden; }
.l1 img { float: left; position: relative; width: 100%; padding: 0; }
.l1 > a { color: #444; }
.l1 > a:hover { color: #f00; }
.c1 > img, .c1 > img.c1b { float: left; position: relative; width: 12.5%; padding: 5% 10%; margin: -25px 0 0 0; transform: rotate(-35deg) scaleX(9) scaleY(5); z-index: 100; }
.c1 > img.c1b { transform: rotate(35deg) scaleX(8) scaleY(5); z-index: 1; }
.c1a { position: relative; float: left; width: 35%; padding: 35px 0 0 0; text-align: center; z-index: 100; font-size: 1.8em; }
.c1 h2, .l1 h2 { position: relative; float: left; width: 100%; padding: 0; text-align: center; z-index: 100; font-size: 1.8em; }
.c1 hr, .l1 hr { clear: left; float: left; width: 15%; height: 2px; margin: 5% 42.5%; border: none; background: #ffffff80; }
.l1 > a > hr { background: #ddd; }
.c1:hover { background: #ffffffe6; color: #000; }
.c1:hover hr { background: #00000080; }
.c1:hover svg { fill: #000; }
.c2, .c3 { float: left; width: 100%; }
.c2 h3, .c3 h3 { float: left; width: 100%; margin: 10px 0 0 0; text-align: center; line-height: 1.5em; font-size: 1.25em; }
.c2 h3 svg, .c3 h3 svg { width: 10%; margin: 0 15px; padding: 0; vertical-align: text-bottom; fill: #bbb; }
.c2 p, .c3 p { float: left; width: 90%; padding: 0 5%; text-align: center; font-weight: 500; font-size: 1.15em; }

.d1 { float: left; width: 45%; margin: 25px 0 0 5%; text-align: center; }
.d2 { width: 44%; margin: 25px 5% 0 0; border-left: 1px dotted #ffffff80; }

.e1 { float: left; width: 96%; margin: 1% 0; padding: 2%; background: #1119; border-radius: 5px 15px 15px 15px; box-shadow: 5px 5px 6px 4px #1111115f; }
.e1:hover { background: #5555; }
.e1z { float: left; width: 30%; margin: 0 2% 0 0; overflow: hidden; }
.e1 img { float: left; width: 100%; margin: 0; border-radius: 5px; }
.e1a { float: left; width: 26%; }
.e1a1 { float: left; width: 100%; margin: 3px 0 0 0.3%; font-size: 0.8em; }
.e1a hr, .e1b hr { clear: left; float: left; width: 45%; height: 2px; margin: 5px 0 0 0.5%; border: none; background: #ffffff1a; }
.e1b1, .e1b2 { float: left; width: 100%; margin: 0 0 8% 0; font-size: 1.4em; }
.e1b2 { margin: 0; }
.e1b { float: left; width: 40%; margin: 0 0 0 2%; text-align: left; }
.e1b p { float: left; width: 100%; margin: 0; padding: 2% 0; text-align: left; font-size: 1.15em; line-height: 1.5em; }

.f1 { float: left; width: 50%; }
.f1a { float: left; width: 94%; margin: 1%; padding: 2%; color: #cdcdcd; text-shadow: 1px 4px 6px #111; background: #00000080; overflow: hidden; border-radius: 15px; box-shadow: 5px 5px 6px 4px #1111115f; }
.f1az { float: left; width: 50%; height: auto; margin: 0; padding: 0 5% 0 0; overflow: hidden; }
.f1a img { float: left; width: 100%; height: auto; margin: 0; padding: 0; border-radius: 5px; }
.f1a h3 { float: left; width: 45%; height: auto; margin: 0; padding: 0; font-size: 1.5em; text-transform: uppercase; }
.f1a hr { float: left; width: 20%; height: 2px; margin: 2% 25% 2% 0; border: none; background: #64646480; }
.f1a p { margin: 0; padding: 0; text-align: left; font-size: 1.15em; line-height: 1.5em; }

img { transition: all 1s ease-in-out; }
.b1:hover img, .e1:hover img, .f1a:hover img, .l1z img:hover { transform: scale(1.13); }

.g ._b h1 { text-shadow: none; }
.g1 { float: left; width: 98%; margin: 0 1%; color: #cdcdcd; text-shadow: 1px 4px 6px #111; }
.g1 h3 { margin: 0; text-align: center; text-shadow: none; }
.g1 h3 a { text-decoration: underline; }
.g1 h2 { margin: 0 0 40px 20px; text-shadow: none; }

footer { clear: both; width: 100%; height: auto; }
footer h1 { float: left; width: 40%; text-align: center; }
#f { background: none; }
#f a { margin: 48px 40px 0 40px; }
#c { float: left; width: 100%; margin: 8px 0 0 0; font-size: 0.8em; text-align: center; }

::-webkit-scrollbar { background: #b40000; }
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0 #b40000; border-radius: 0; }
::-webkit-scrollbar-thumb { background: #b40000; border-radius: 0; -webkit-box-shadow: inset 0 0 0 #000; font-size: 2em; display: inline-block; width: 0.2em; height: 0.4em; border: 0.05em solid #cdcdcdcc; position: relative; border-radius: 0; z-index: 1; }
*{ scrollbar-width: thin; scrollbar-color: #222 #000;}
::selection { background: #f00; color: #fff }

label { clear: both; float: left; width: 28%; height: 1.5em; margin: 15px 2% 0 0; background: none; border: none; color: #fff; text-align: right; font-size: 1.4em; line-height: 1.5em; font-weight: 600; }
label:after { content: ' \25b8'; }
label.firstname, input#firstname { display: none; }
input, textarea { float: left; width: 40.5%; height: 1.5em; margin: 15px 12% 0 0; padding: 0 .5% 0 1%; background: #ccc; border: none; color: #000; text-shadow: 5px 5px 30px #00000080; font-size: 1.4em; line-height: 1.5em; }
textarea { float: left; position: relative; display: inline-block; min-width: 40%; max-width: 40%; min-height: 7.5em; outline: none; border: none; padding: 5px 1%; font-size: 1.4em; font-family: 'Arial'; }
.formspacer { clear: both; float: left; position: relative; width: 100%; margin: 15px 0 0 0; z-index: 1000; }
input#submit { clear: both; float: left; width: 42%; margin: 0 0 100px 30%; }
::placeholder { color: #333; opacity: 1; }

@media only screen and (min-width: 100px) and (max-width: 768px) {
	.contactsec { width: 94%; margin: 0 3%; }
	.contactsec h3{ font-size: 1.05em; }
	label { width: 100%; margin: 15px 0 0 0; text-align: center; }
	label:after { content: ' \25be'; }
	input, textarea { min-width: 96%; max-width: 96%; margin: 0 2%; padding: 5px 0; text-align: center; }
	input { font-size: 1.2em; }
	.formspacer { margin: 8% 0 5% 0; }
	input#submit { margin: -50px 0 0 2%; padding: 0; }
}

@media only screen and (min-width: 1381px) and (max-width: 1920px) {	.a { background-position: 0 -180px; } 	.a1 h1 { margin: -3% 0 0 0; padding: 0 50px; font-size: 6em; }
	.a1 h2 { margin: 28% 0 0 25%; padding: 0 50px; font-size: 1.8em;}}
@media only screen and (min-width: 1201px) and (max-width: 1380px) {
	#h a { margin: 28px 25px 0 25px; }
	._a { width: 88%; margin: 2% 6% 5% 6%; }
	._b { width: 100%; margin: 0; }
	._b h1 { font-size: 2.5em; }
	.a { background-position: 0 -100px; }
	.a1 h1 { margin: -3% 0 0 0; padding: 0 50px; font-size: 6em; }
	.a1 h2 { margin: 28% 0 0 25%; padding: 0 50px; font-size: 1.8em;}
	#f a { margin: 48px 25px 0 25px; }
}
@media only screen and (min-width: 1025px) and (max-width: 1200px) {	
	#h a{ margin: 28px 15px 0 15px; }
	._a { width: 88%; margin: 2% 6% 5% 6%; }
	._b h1 { font-size: 2em; }
	.a1 h1 { margin: -3% 0 0 2%; padding: 0 50px; font-size: 6em; }
	.a1 h2 { margin: 20% 0 0 25%; padding: 10px 50px; font-size: 1.8em;}
	.e1 { margin: 2% 0 1% 0; }
	.e1z { width: 48%; }
	.e1a { width: 50%; }
	.e1b { width: 96%; margin: 20px 2% 0 2%; }
	.e1b1 { margin: 0 0 4% 0; }
	#f a { margin: 48px 15px 0 15px; }
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	header, footer h1 { width: 100%; }
	#h, #f { width: 100%; margin: 0; height: 50px; text-align: center; }
	#h a, #f a { margin: 8px 30px 0 30px; }
	._a { width: 88%; margin: 0 6% 10px 6%; }
	._b h1 { font-size: 1.6em; }
	.a { background-position: 0 7%; }
	.a1 h1 { margin: -3% 0 0 2%; padding: 0 50px; font-size: 5em; }
	.a1 h2 { margin: 20% 0 0 15%; padding: 10px 0px; font-size: 1.5em;}

.e1 { margin: 2%  1% 0; }
.e1z { width: 38%; }
.e1a { width: 60%; }
.e1b { width: 100%; margin: 20px 0 0 0; }

	.g1 { margin: 8% 0 0 0; }
	.g1 h2 { margin: 0 0 10px 20px; }
}
@media only screen and (min-width: 601px) and (max-width: 768px) {
	header, footer h1 { width: 100%; }
	#h, #f { width: 100%; margin: 0; height: 50px; text-align: center; }
	#h a, #f a { margin: 8px 20px 0 20px; }
	._a { width: 88%; margin: 0 6% 10px 6%; }
	._b h1 { font-size: 1.6em; }
	.a { background-position: 0 120px; }
	.a1 h1 { margin: -3% 0 0 2%; padding: 0 50px; font-size: 4em; }
	.a1 h2 { margin: 20% 0 0 15%; padding: 10px 10px; font-size: 1.3em;}
	.c1, .l1 { width: 98%; margin: 1% 1%; }
	.l1 { width: 47%; }
	.f1 { margin: 10px 0; }
	.f1az { width: 100%; padding: 0; }
	.f1a h3 { width: 96%; margin: 10px 0 0 0; padding: 0 2% }
	.f1a hr { width: 40%; margin: 2%; }
	.f1a p { clear: left; width: 96%; padding: 0 2%; text-indent: 20px; }

.e1 { margin: 2%  1% 0; }
.e1z { width: 38%; }
.e1a { width: 60%; }
.e1b { width: 100%; margin: 20px 0 0 0; }

	.g1 { margin: 8% 0 0 0; }
	.g1 h2 { margin: 0 0 10px 20px; }
}
@media only screen and (min-width: 481px) and (max-width: 600px) {
	header, footer h1 { width: 100%; }
	#h, #f { width: 100%; margin: 0; height: 50px; text-align: center; }
	#h a, #f a { margin: 8px 10px 0 10px; }
	.a {  min-height: 50vh; background-position: 0 120px; }
	._a { width: 88%; margin: 0 6% 10px 6%; }
	._b h1 { font-size: 1.6em; }
	.a1 h1 { margin: -6% 0 0 -6%; padding: 0 50px; font-size: 3em; }
	.a1 h2 { margin: 30% 0 0 5%; padding: 10px; font-size: 1.2em; }
	.b { margin: -60px 0 0 0; }
	.b1z { width: 100%; padding: 0; }
	.b1 h1 { width: auto; padding: 0 30px; }
	.b1 hr { width: 40%; margin: 0 65% 1% 30px; }
	.b1 p { float: left; padding: 0 30px; }
	.c1, .l1 { width: 98%; margin: 1% 1%; }
	.l1 { width: 47%; }
	.d1, .d2 { width: 100%; margin: 25px 0 0 0; border-left: none; }
	.d2 { margin-top: -20px; }

.e1 { margin: 2% 0 1% 0; }
.e1z { width: 100%; margin: 0 0 2% 0; }
.e1a { width: 100%; }
.e1b { width: 100%; margin: 20px 0 0 0; }
	.e1b1 { margin: 0 0 2% 0; }

	.f1 { width: 100%; }

	.g1 { margin: 8% 0 0 0; }
	.g1 h2 { margin: 0 0 10px 20px; }
}
@media only screen and (min-width: 100px) and (max-width: 480px) {
	header, footer h1 { width: 100%; }
	#h, #f { width: 100%; margin: 0; height: 50px; text-align: center; }
	#h a, #f a { margin: 8px 5px 0 5px; font-size: 1em; }
	._a { width: 98%; margin: 0 1% 10px 1%; }
	._b h1 { font-size: 1.4em; }
	.a { min-height: 48vh; background-position: -80px 120px; background-size: 140% auto; }
	.a1 h1 { margin: -6% 0 0 -6%; padding: 0 50px; font-size: 2.5em; }
	.a1 h2 { margin: 34% 0 0 0; padding: 10px; font-size: 1em; }
	.b { margin: -60px 0 0 0; }
	.b1z { width: 100%; padding: 0; }
	.b1 h1 { width: auto; padding: 0 30px; }
	.b1 hr { width: 40%; margin: 0 65% 1% 30px; }
	.b1 p { float: left; padding: 0 30px; }
	.c1, .l1 { width: 98%; margin: 1% 1%; }
	.d1, .d2 { width: 100%; margin: 25px 0 0 0; border-left: none; }
	.d2 { margin-top: -20px; }

.e1 { margin: 2% 0 1% 0; }
.e1z { width: 100%; margin: 0 0 2% 0; }
.e1a { width: 100%; }
.e1b { width: 100%; margin: 20px 0 0 0; }
	.e1b1 { margin: 0 0 2% 0; }

	.f1 { width: 100%; }
	.g1 { margin: 8% 0 0 0; }
	.g1 h2 { margin: 0 0 10px 20px; }
}
@media only screen and (min-width: 321px) and (max-width: 480px) {}
@media only screen and (min-width: 100px) and (max-width: 320px) {}